:root{--bg:#050916;--panel:rgba(12,23,48,.68);--line:rgba(125,164,255,.18);--text:#f5f7ff;--muted:#9baacb;--blue:#4775ff;--violet:#8b5cff;--cyan:#62d8ff;--mx:50vw;--my:50vh}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}::selection{background:#5b70ff;color:white}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.cursor-glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(500px circle at var(--mx) var(--my),rgba(40,93,255,.10),transparent 65%)}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.6;animation:drift 14s ease-in-out infinite alternate}.orb.one{width:38vw;height:38vw;min-width:300px;min-height:300px;right:-8vw;top:5vh;background:radial-gradient(circle at 35% 35%,#305dff88,transparent 67%)}.orb.two{width:30vw;height:30vw;min-width:260px;min-height:260px;left:-12vw;bottom:-8vh;background:radial-gradient(circle at 50% 50%,#752cff66,transparent 70%);animation-delay:-5s}.orb.three{width:20vw;height:20vw;right:25vw;bottom:-10vw;background:radial-gradient(circle,#00baff24,transparent 70%);animation-delay:-9s}
@keyframes drift{to{transform:translate3d(4vw,-3vh,0) scale(1.13)}}
header{position:fixed;z-index:20;top:0;left:0;right:0;padding:22px clamp(22px,7vw,108px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(139,170,255,.09);background:linear-gradient(180deg,rgba(4,9,22,.88),rgba(4,9,22,.28));backdrop-filter:blur(18px)}
.logo{font-size:26px;font-weight:850;letter-spacing:-1.5px}.logo span{color:#5b7dff}.nav{display:flex;gap:clamp(16px,3vw,42px);font-size:12px;color:#b5c2e1}.nav a{transition:color .25s}.nav a:hover{color:#fff}.mail-pill{border:1px solid #587eff88;border-radius:99px;padding:11px 17px;display:flex;gap:9px;align-items:center;font-size:12px;background:#101b37a8;transition:.3s;box-shadow:inset 0 0 20px #416dff0c}.mail-pill:hover{transform:translateY(-2px);border-color:#8aa4ff;box-shadow:0 0 30px #3866ff33,inset 0 0 24px #416dff1c}
.slide{min-height:100svh;scroll-snap-align:start;position:relative;z-index:2;padding:125px clamp(22px,7vw,108px) 48px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.eyebrow{font-size:11px;letter-spacing:2.1px;text-transform:uppercase;color:#7fa4ff;font-weight:700;display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.hero{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:3vw}.hero-copy{position:relative;z-index:3}.hero h1{font-size:clamp(42px,5.4vw,78px);line-height:.99;letter-spacing:-.065em;margin:22px 0 25px;max-width:750px}.gradient-text{white-space:nowrap;background:linear-gradient(100deg,#5c7dff 8%,#9b78ff 53%,#66d9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:clamp(15px,1.25vw,18px);line-height:1.75;color:#a9b7d7;max-width:540px}.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px}.primary{display:inline-flex;align-items:center;gap:13px;padding:16px 22px;border-radius:99px;background:linear-gradient(110deg,#3769ff,#6446f5);box-shadow:0 9px 35px #3f60ff42;color:white;font-size:13px;font-weight:650;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}.primary:before{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 20%,#ffffff3b 48%,transparent 70%);transform:translateX(-120%);transition:transform .7s}.primary:hover{transform:translateY(-4px);box-shadow:0 15px 45px #4268ff70}.primary:hover:before{transform:translateX(120%)}.microcopy{font-size:11px;line-height:1.6;color:#7183a9}

/* ---------- hero visual: dashboard + light ribbons ---------- */
.visual{height:min(68vh,620px);min-height:420px;position:relative;perspective:1100px;display:grid;place-items:center;isolation:isolate}
.visual:before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#214dff50,#4d22c922 42%,transparent 70%);filter:blur(22px);animation:pulse 5s ease-in-out infinite alternate;z-index:-2}
.visual .floor{position:absolute;z-index:-1;left:8%;right:8%;bottom:6%;height:16%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#3d63ff55,#6a3dff22 45%,transparent 72%);filter:blur(14px);animation:floorPulse 6s ease-in-out infinite}
@keyframes floorPulse{50%{transform:scaleX(.9);opacity:.7}}
@keyframes pulse{to{opacity:.6;transform:scale(1.12)}}
.ribbons{position:absolute;left:50%;top:50%;width:min(150%,800px);aspect-ratio:3/2;translate:-50% -50%;pointer-events:none;overflow:visible}
.ribbons.back{z-index:1}.ribbons.front{z-index:6;mix-blend-mode:screen}
.ribbons .track{fill:none;stroke:#7d95ff;stroke-opacity:.10;stroke-width:1}
.ribbons .glow{fill:none;stroke-linecap:round;stroke-dasharray:24 76;filter:blur(7px);opacity:.75;animation:orbit var(--dur,11s) linear infinite}
.ribbons .core{fill:none;stroke-linecap:round;stroke-dasharray:24 76;opacity:.95;animation:orbit var(--dur,11s) linear infinite}
.ribbons .o2 .glow,.ribbons .o2 .core{animation-direction:reverse}
@keyframes orbit{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.dash{position:relative;z-index:3;width:min(100%,540px);border:1px solid #6c94ff65;border-radius:22px;background:linear-gradient(145deg,#13234aeb,#080f24f5 65%);box-shadow:0 40px 110px #000a,0 0 60px #315fff30,inset 0 1px #ffffff25;transform:rotateY(-13deg) rotateX(6deg);transform-style:preserve-3d;animation:float 6s ease-in-out infinite;overflow:hidden}
.dash:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff12 45%,transparent 58%);transform:translateX(-100%);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
@keyframes float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -13px;rotate:1deg}}
.dash-top{display:flex;align-items:center;gap:6px;padding:12px 15px;border-bottom:1px solid #829eff20}.dot{width:7px;height:7px;border-radius:50%;background:#6e86ff}.dot:nth-child(2){background:#8b6dff}.dot:nth-child(3){background:#55c9ff}
.url{margin-left:10px;flex:1;max-width:220px;font-size:9.5px;color:#8ea2cf;background:#0a1430;border:1px solid #6c8dff22;border-radius:7px;padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:9.5px;color:#8fe3c0;letter-spacing:.5px}.live i{width:7px;height:7px;border-radius:50%;background:#35d39a;box-shadow:0 0 0 0 #35d39a88;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px #35d39a00}100%{box-shadow:0 0 0 0 #35d39a00}}
.dash-body{display:grid;grid-template-columns:46px 1fr;min-height:300px}
.dash-side{border-right:1px solid #6e91ff1b;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative}
.dash-side .brand{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#3f6bff,#7a4dff);display:grid;place-items:center;font-size:12px;font-weight:850;margin-bottom:6px;box-shadow:0 0 18px #4f6dff66}
.side-btn{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#6f84b5;transition:color .4s,background .4s}.side-btn svg{width:15px;height:15px}
.side-btn.on{color:#fff;background:#2a4590aa;box-shadow:inset 0 0 0 1px #6f93ff55}
.stage{position:relative;padding:14px 15px 10px;min-height:300px}
.scene{position:absolute;inset:14px 15px 10px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.scene.on{opacity:1;transform:none}
.s-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.s-title{font-size:12px;font-weight:700;color:#e3eaff}.s-sub{font-size:9.5px;color:#7f93c2}
.card{border:1px solid #6d8fff22;background:#0b1631c9;border-radius:11px;padding:9px 10px}
.muted{color:#7f93c2}
/* scene 1: analytics */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.kpi .k{font-size:8.5px;color:#7f93c2;text-transform:uppercase;letter-spacing:.6px}.kpi .v{font-size:16px;font-weight:800;margin-top:4px;letter-spacing:-.03em}.kpi .d{font-size:8.5px;color:#4fe0a6;margin-top:2px}
.chart{margin-top:8px;height:118px;padding:6px 6px 2px;position:relative}.chart svg{width:100%;height:100%;display:block}
.chart .grid line{stroke:#7d95ff14}
.chart .ln{fill:none;stroke:url(#gLine);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.chart .ln2{fill:none;stroke:#8b5cff;stroke-opacity:.6;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.chart .area{fill:url(#gArea);opacity:0}
.play .chart .ln{animation:draw 1.8s .2s ease-out forwards}.play .chart .ln2{animation:draw 2s .5s ease-out forwards}.play .chart .area{animation:fadeIn 1s 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadeIn{to{opacity:1}}
.row2{display:grid;grid-template-columns:1.25fr 1fr;gap:7px;margin-top:7px}
.bars{display:flex;align-items:flex-end;gap:4px;height:34px}.bars i{flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(#6c8bff,#4b3dd6);transform-origin:bottom;transform:scaleY(.08)}
.play .bars i{animation:grow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.status{display:flex;align-items:center;gap:8px;font-size:10px}.status b{font-size:13px}.health{height:5px;border-radius:5px;background:#16244a;overflow:hidden;margin-top:7px}.health i{display:block;height:100%;width:0;background:linear-gradient(90deg,#35d39a,#62d8ff);border-radius:5px}
.play .health i{animation:fill 1.6s .4s ease-out forwards}@keyframes fill{to{width:99.9%}}
/* scene 2: catalog */
.sync{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#9fb1da;margin-bottom:9px}.sync .bar{flex:1;height:4px;border-radius:4px;background:#16244a;overflow:hidden}.sync .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4775ff,#62d8ff)}
.play .sync .bar i{animation:syncFill 3.6s ease-in-out forwards}@keyframes syncFill{to{width:100%}}
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.prod{display:grid;grid-template-columns:46px 1fr;gap:9px;align-items:center;opacity:0;transform:translateY(8px)}
.play .prod{animation:popIn .55s cubic-bezier(.2,.8,.2,1) forwards}.play .prod:nth-child(2){animation-delay:.15s}.play .prod:nth-child(3){animation-delay:.3s}.play .prod:nth-child(4){animation-delay:.45s}
@keyframes popIn{to{opacity:1;transform:none}}
.thumb{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#3a5bd8,#121e47 70%)}.thumb svg{width:26px;height:26px}
.thumb.t2{background:radial-gradient(circle at 30% 25%,#7a4dff,#1b1547 70%)}.thumb.t3{background:radial-gradient(circle at 30% 25%,#1aa6d6,#0c2742 70%)}.thumb.t4{background:radial-gradient(circle at 30% 25%,#d0478a,#2a1238 70%)}
.prod .n{font-size:10.5px;font-weight:650;line-height:1.25}.prod .p{font-size:11px;font-weight:800;margin-top:4px;display:flex;gap:6px;align-items:baseline}.prod .p s{font-size:9px;color:#6f80a8;font-weight:500}
.prod .tag{font-size:8px;padding:2px 5px;border-radius:5px;background:#35d39a22;color:#5ee7b1;margin-left:auto}
.price-new{color:#7ef0c0}.play .prod.flash{animation:popIn .55s .15s cubic-bezier(.2,.8,.2,1) forwards,flash 1.2s 2.4s}@keyframes flash{30%{background:#35d39a2a;box-shadow:0 0 0 1px #35d39a66}}
/* scene 3: delivery */
.deliv{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.map{position:relative;height:196px;border-radius:12px;overflow:hidden;border:1px solid #6d8fff22;background:#081127}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .road{stroke:#3a4f86;stroke-width:5;fill:none;stroke-linecap:round}.map .road.s{stroke-width:2.5;stroke:#2a3a66}
.map .river{fill:none;stroke:#1f4a8a;stroke-width:11;opacity:.55;stroke-linecap:round}
.map .block{fill:#0f1c3d}
.map .route{fill:none;stroke:#62d8ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px #62d8ff)}
.play .map .route{animation:draw 2.4s .2s ease-in-out forwards}
.pin{fill:#8b5cff}.pin.dst{fill:#35d39a}
.courier{fill:#fff;filter:drop-shadow(0 0 6px #62d8ff)}
.pvz{display:grid;gap:6px}.opt{display:flex;align-items:center;gap:8px;padding:8px 9px;font-size:9.5px;border-radius:10px;border:1px solid #6d8fff22;background:#0b1631c9;transition:border-color .4s,background .4s}
.opt .r{width:11px;height:11px;border-radius:50%;border:1.5px solid #5d74b2;flex:0 0 auto;transition:.4s;position:relative}
.opt b{display:block;font-size:10px;color:#e3eaff;margin-bottom:2px}.opt .eta{margin-left:auto;font-weight:700;color:#9fb1da;white-space:nowrap}
.opt.sel{border-color:#6f93ff88;background:#162a5ccc}.opt.sel .r{border-color:#62d8ff;background:radial-gradient(circle,#62d8ff 40%,transparent 45%)}
.eta-chip{margin-top:6px;font-size:9.5px;padding:8px 9px;border-radius:10px;background:linear-gradient(110deg,#2c47b8,#5233c9);display:flex;justify-content:space-between}
/* scene 4: cart & receipt */
.pos{display:grid;grid-template-columns:1.25fr 1fr;gap:9px}
.lines{display:grid;gap:6px}.line{display:flex;align-items:center;gap:8px;font-size:10px}.line .mini{width:26px;height:26px;border-radius:7px;background:radial-gradient(circle at 30% 25%,#3a5bd8,#121e47 70%);flex:0 0 auto}.line .mini.m2{background:radial-gradient(circle at 30% 25%,#7a4dff,#1b1547 70%)}.line .mini.m3{background:radial-gradient(circle at 30% 25%,#1aa6d6,#0c2742 70%)}
.line .nm{flex:1;line-height:1.25}.line .q{display:flex;align-items:center;gap:5px;color:#9fb1da}.line .q i{width:15px;height:15px;border-radius:5px;border:1px solid #6d8fff44;display:grid;place-items:center;font-style:normal;font-size:9px}.line .sum{width:52px;text-align:right;font-weight:700}
.qty{display:inline-block;min-width:8px;text-align:center}.qty.bump{animation:bump .5s}@keyframes bump{40%{transform:scale(1.6);color:#62d8ff}}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:1px dashed #6d8fff33;font-size:10px}.total b{font-size:16px;letter-spacing:-.02em}
.pay{margin-top:8px;text-align:center;font-size:10px;font-weight:700;padding:8px;border-radius:9px;background:linear-gradient(110deg,#3769ff,#6446f5);box-shadow:0 6px 18px #3f60ff44;transition:transform .2s,filter .2s}.pay.press{transform:scale(.95);filter:brightness(1.3)}
.till{position:relative;display:flex;flex-direction:column;align-items:center}
.till .slot{width:100%;height:12px;border-radius:6px;background:#1a2a55;box-shadow:inset 0 2px 4px #0009;position:relative;z-index:2}
.receipt{width:86%;margin-top:-4px;background:#f3f5fb;color:#1a2035;border-radius:0 0 4px 4px;padding:9px 9px 12px;font:8.5px/1.45 ui-monospace,Menlo,Consolas,monospace;clip-path:inset(0 0 100% 0);transition:clip-path 2.2s steps(14,end);position:relative;--zig:linear-gradient(-45deg,transparent 4px,#f3f5fb 0) 0 100%/8px 8px repeat-x,linear-gradient(45deg,transparent 4px,#f3f5fb 0) 0 100%/8px 8px repeat-x}
.receipt.print{clip-path:inset(0 0 0 0)}
.receipt:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--zig)}
.receipt .c{text-align:center;font-weight:700}.receipt .rr{display:flex;justify-content:space-between}.receipt hr{border:0;border-top:1px dashed #9aa3bd;margin:5px 0}
.barcode{height:16px;margin-top:6px;background:repeating-linear-gradient(90deg,#1a2035 0 1px,transparent 1px 3px,#1a2035 3px 5px,transparent 5px 6px,#1a2035 6px 7px,transparent 7px 9px)}
.dash-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #829eff20}
.dash-tabs button{all:unset;cursor:pointer;padding:9px 10px 10px;font-size:9px;color:#7083b0;letter-spacing:.4px;position:relative;transition:color .3s}
.dash-tabs button b{display:block;font-size:8px;color:#5a6c99;margin-bottom:2px}
.dash-tabs button.on{color:#e3eaff}.dash-tabs button i{position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:2px;background:#1c2a52;overflow:hidden}
.dash-tabs button i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#4775ff,#62d8ff);transform:scaleX(0);transform-origin:left}
.dash-tabs button.on i:after{animation:tabProgress var(--scene-ms,6000ms) linear forwards}
.dash-tabs button.done i:after{transform:scaleX(1);opacity:.35}
@keyframes tabProgress{to{transform:scaleX(1)}}
.dash-tabs button:focus-visible{outline:2px solid #6383ff;outline-offset:-2px;border-radius:6px}

.float-card{position:absolute;z-index:7;pointer-events:none;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #789aff55;border-radius:15px;background:linear-gradient(140deg,#172952ed,#0a1229e8);box-shadow:0 18px 40px #0006,0 0 25px #426aff20;backdrop-filter:blur(15px);font-size:12px;animation:float 5s ease-in-out infinite}.float-card b{font-size:22px;color:#8e9fff}.float-card.wp{top:6%;left:-2%}.float-card.bitrix{right:-2%;bottom:4%;animation-delay:-2s}.float-card.dev{bottom:16%;left:-4%;animation-delay:-3.4s}.float-card span small{display:block;color:#91a3ca;font-size:10px;margin-top:4px}
.mark{width:34px;height:34px;flex:0 0 auto;display:block}.mark.wp{filter:drop-shadow(0 0 10px #3858e966)}.mark.bx{filter:drop-shadow(0 0 10px #d9193555)}

.slide-indicator{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:30;display:grid;gap:12px}.slide-indicator a{width:7px;height:7px;border-radius:50%;background:#66769b66;border:1px solid #829bdb66;transition:.3s}.slide-indicator a.active,.slide-indicator a:hover{height:25px;border-radius:9px;background:#6383ff;box-shadow:0 0 15px #6383ff88}
.section-head{display:grid;grid-template-columns:1fr .8fr;gap:5vw;align-items:end;margin-bottom:38px}.section-head h2{font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.055em;margin:16px 0 0}.section-head p{font-size:14px;line-height:1.8;color:var(--muted);max-width:440px;margin:0 0 5px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.service{position:relative;min-height:148px;padding:23px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#101b35b8,#070e20b8);transition:transform .35s,border-color .35s,background .35s,box-shadow .35s;overflow:hidden;transform-style:preserve-3d}.service:before{content:"";position:absolute;inset:-1px;background:radial-gradient(320px circle at var(--cardx,50%) var(--cardy,50%),#4775ff24,transparent 50%);opacity:0;transition:opacity .35s}.service:hover{transform:translateY(-6px) perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-color:#658cff70;box-shadow:0 20px 45px #0003,0 0 30px #3867ff12}.service:hover:before{opacity:1}.service-icon{width:42px;height:42px;border:1px solid #5b80ff55;border-radius:13px;display:grid;place-items:center;color:#90a7ff;font-size:20px;background:linear-gradient(140deg,#203a75a8,#0b1530);box-shadow:inset 0 0 18px #537cff15;margin-bottom:19px}.service-icon .mark{width:26px;height:26px}.service h3{font-size:15px;margin:0 0 9px;letter-spacing:-.02em}.service p{font-size:12px;color:#91a2c7;line-height:1.65;margin:0;max-width:330px}.service .arrow{position:absolute;right:20px;bottom:20px;color:#82a0ff;transition:transform .3s}.service:hover .arrow{transform:translate(4px,-4px)}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}.step{padding:20px 18px;border-top:1px solid #7193ff55;position:relative}.step:before{content:"";position:absolute;top:-4px;left:18px;width:7px;height:7px;background:#7f9aff;border-radius:50%;box-shadow:0 0 13px #6689ff}.step-num{font-size:11px;color:#6f91ff;letter-spacing:1.5px}.step h3{font-size:16px;margin:17px 0 9px}.step p{font-size:12px;color:#91a2c7;line-height:1.7;margin:0}
.platforms{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}.platform{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #6889ff2b;background:#0c1730a6;border-radius:12px;color:#b9c8e8;font-size:12px;transition:.3s;min-height:46px}.platform>span{color:#829cff;font-weight:800;font-size:15px}.platform:hover{transform:translateY(-4px);border-color:#6d91ff8a;background:#16264a}
.platform .mark{width:22px;height:22px}.platform .wordmark{height:17px;width:auto;color:#eef2ff;display:block}
#contact{justify-content:space-between;padding-bottom:26px}.contact-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;border:1px solid #688bff3d;border-radius:25px;padding:clamp(26px,5vw,60px);background:radial-gradient(ellipse at 85% 120%,#4137ba55,transparent 45%),linear-gradient(130deg,#101c3ad9,#070d1ce8);box-shadow:0 30px 80px #0003;position:relative;overflow:hidden}.contact-panel:after{content:"";position:absolute;width:230px;height:230px;right:8%;top:-130px;border-radius:50%;border:1px solid #6f8fff38;box-shadow:0 0 0 25px #6f8fff08,0 0 0 55px #6f8fff06;pointer-events:none}.contact-panel h2{font-size:clamp(34px,4.3vw,58px);letter-spacing:-.055em;line-height:1.04;margin:17px 0 0;max-width:550px}.contact-right{position:relative;z-index:2}.contact-right p{font-size:14px;color:#a4b3d5;line-height:1.8;margin:0 0 22px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:40px;color:#7e90b7;font-size:11px}.footer-bottom .logo{color:#eef2ff}.footer-note{max-width:230px;line-height:1.7}
.scroll-hint{position:absolute;bottom:26px;left:clamp(22px,7vw,108px);display:flex;gap:10px;align-items:center;color:#64769d;font-size:10px;letter-spacing:1px;text-transform:uppercase}.scroll-hint i{height:25px;width:15px;border:1px solid #6683c955;border-radius:12px;position:relative}.scroll-hint i:after{content:"";position:absolute;width:2px;height:5px;left:5px;top:5px;background:#7e9aff;border-radius:2px;animation:scroll 1.5s infinite}@keyframes scroll{to{transform:translateY(8px);opacity:0}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}

/* pause everything in the hero while it is off-screen or the tab is hidden */
.visual.paused *,.visual.paused *:before,.visual.paused *:after{animation-play-state:paused!important}
/* lite mode: weak devices, data saver, reduced motion */
html.lite .noise,html.lite .cursor-glow,html.lite .ribbons .glow,html.lite .dash:after,html.lite .visual .floor{display:none}
html.lite .orb{animation:none;filter:none}
html.lite .dash,html.lite .float-card{backdrop-filter:none;animation:none}
html.lite header{backdrop-filter:none;background:rgba(4,9,22,.94)}
html.lite .ribbons.front{mix-blend-mode:normal}

@media(max-width:900px){header{padding:17px 22px}.nav{display:none}.hero{grid-template-columns:1fr}.hero{padding-top:45px}.visual{height:470px;min-height:400px;margin-top:-5px}.section-head{grid-template-columns:1fr;gap:16px}.services{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(2,1fr)}.slide-indicator{right:10px}.contact-panel{grid-template-columns:1fr}.scroll-hint{display:none}.dash{transform:rotateY(-6deg) rotateX(4deg)}}
@media(max-width:560px){header{padding:15px 18px}.logo{font-size:23px}.mail-pill{padding:9px 11px;font-size:11px}.slide{padding:105px 20px 38px;min-height:100svh}.hero h1{font-size:clamp(39px,12vw,58px)}.lead{font-size:14px}.hero-actions{gap:13px}.visual{height:440px;min-height:400px;margin:0 -8px}.dash{width:100%;border-radius:17px;transform:none}.dash-body{grid-template-columns:36px 1fr;min-height:282px}.stage{min-height:282px;padding:11px}.scene{inset:11px}.side-btn{width:24px;height:24px}.dash-side .brand{width:22px;height:22px}.url{display:none}.kpi .v{font-size:13px}.deliv{grid-template-columns:1fr}.pvz .opt:nth-child(3),.eta-chip{display:none}.map{height:126px}.pos{grid-template-columns:1.3fr 1fr}.line .mini{display:none}.line .sum{width:44px}.float-card{padding:9px 11px;font-size:10px}.float-card b{font-size:18px}.float-card .mark{width:26px;height:26px}.float-card.wp{left:0;top:0}.float-card.bitrix{right:0;top:auto;bottom:0}.float-card.dev{display:none}.services{grid-template-columns:1fr}.service{min-height:132px;padding:19px}.service-icon{margin-bottom:13px}.process{grid-template-columns:1fr 1fr;gap:4px}.step{padding:17px 12px}.step h3{font-size:14px}.step p{font-size:11px}.platforms{gap:7px}.platform{padding:10px 12px}.contact-panel{padding:25px 21px;border-radius:19px}.footer-bottom{align-items:flex-start;flex-wrap:wrap;padding-top:28px}.footer-note{max-width:170px}.slide-indicator{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* ---------- shared: pages, projects, blog ---------- */
[hidden]{display:none!important}
.nav a[aria-current]{color:#fff}
.link{color:#8ea6ff;border-bottom:1px solid #8ea6ff55;transition:border-color .2s}.link:hover{border-color:#8ea6ff}
#contact{min-height:auto;padding-top:80px;padding-bottom:20px}
.site-foot{position:relative;z-index:2;padding:34px clamp(22px,7vw,108px) 30px}
.foot-nav{display:flex;gap:18px}.foot-nav a:hover,.site-foot a:hover{color:#fff}
.ghost{display:inline-flex;align-items:center;padding:15px 22px;border-radius:99px;border:1px solid #6d8fff55;color:#c9d4f2;font-size:13px;transition:.3s}.ghost:hover{border-color:#8aa4ff;color:#fff}

/* projects */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.pstats div{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#101b35b8,#070e20b8)}
.pstats b{display:block;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;background:linear-gradient(100deg,#7d97ff,#a88bff 60%,#7fe0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pstats span{font-size:12px;color:var(--muted)}
.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pfilter button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;border:1px solid #6889ff2b;background:#0c1730a6;color:#b9c8e8;font-size:12px;transition:.25s}
.pfilter button i{font-style:normal;font-size:10px;color:#7f93c2;background:#16244a;border-radius:99px;padding:2px 7px}
.pfilter button .mark{width:16px;height:16px}
.pfilter button:hover{border-color:#6d91ff8a}
.pfilter button[aria-pressed=true]{background:linear-gradient(110deg,#2f4fd0,#5634c8);border-color:transparent;color:#fff}.pfilter button[aria-pressed=true] i{background:#ffffff26;color:#fff}
.pfilter button:focus-visible,.pmore:focus-visible{outline:2px solid #6383ff;outline-offset:2px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.pcard{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#101b35c8,#070e20c8);transition:transform .35s,border-color .35s,box-shadow .35s;animation:popIn .5s cubic-bezier(.2,.8,.2,1) both}
.pcard:hover{transform:translateY(-5px);border-color:#658cff70;box-shadow:0 20px 45px #0003,0 0 30px #3867ff12}
.ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pcms{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#a9b7d7}.pcms .mark{width:20px;height:20px}
.pcms .mono{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#c9d4ff;background:linear-gradient(140deg,#2a3f7a,#1a2550)}
.pyear{font-size:11px;color:#7083b0;letter-spacing:1px}
.pkind{font-size:11px;color:#7fa4ff;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.pcard h3{font-size:18px;margin:6px 0 9px;letter-spacing:-.02em;word-break:break-word}.pcard h3 a span{color:#82a0ff;font-size:14px;transition:transform .3s;display:inline-block}.pcard h3 a:hover span{transform:translate(3px,-3px)}
.pcard p{font-size:12.5px;color:#91a2c7;line-height:1.65;margin:0 0 16px;flex:1}
.pfoot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ptag{font-size:10px;padding:4px 8px;border-radius:7px;background:#16244a;color:#a5b4da}
.pst{font-size:10px;padding:4px 8px;border-radius:7px;font-weight:700}.pst.live{background:#35d39a1f;color:#5ee7b1}.pst.done{background:#4775ff22;color:#8ea6ff}.pst.arch{background:#ffffff0d;color:#7d8aa8}
.pmore{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;margin:22px auto 0;padding:14px 22px;border-radius:99px;border:1px solid #587eff88;background:#101b37a8;font-size:13px;transition:.3s}.pmore:hover{transform:translateY(-2px);border-color:#8aa4ff;box-shadow:0 0 30px #3866ff33}
.pmore i{font-style:normal;font-size:11px;background:#2a4590;border-radius:99px;padding:2px 8px}

/* blog cards */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.bcard{position:relative;display:flex;flex-direction:column;padding:22px 22px 44px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#101b35b8,#070e20b8);transition:transform .35s,border-color .35s}
.bcard:hover{transform:translateY(-5px);border-color:#658cff70}.bcard .arrow{position:absolute;right:20px;bottom:18px;color:#82a0ff;transition:transform .3s}.bcard:hover .arrow{transform:translate(4px,-4px)}
.bmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:#7f93c2;margin-bottom:12px}
.bcard h3{font-size:16px;line-height:1.35;margin:0 0 10px;letter-spacing:-.01em}.bcard p{font-size:12.5px;line-height:1.65;color:#91a2c7;margin:0}

/* inner pages */
body.inner .slide{min-height:auto}
.page{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:130px clamp(22px,5vw,60px) 30px}
.page .section-head{margin-bottom:30px}
.h1{font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.055em;margin:16px 0 0}
.crumbs{display:flex;gap:9px;font-size:12px;color:#7083b0;margin-bottom:26px}.crumbs a:hover{color:#fff}
.article{max-width:860px}
.article-head h1{font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.045em;margin:6px 0 30px}
.prose{font-size:16px;line-height:1.8;color:#c3cde6;overflow-wrap:anywhere}
.prose p{margin:0 0 1.1em}.prose h2,.prose h3,.prose h4{color:#fff;letter-spacing:-.02em;line-height:1.3;margin:1.8em 0 .6em}
.prose a{color:#8ea6ff;border-bottom:1px solid #8ea6ff44}.prose a:hover{border-color:#8ea6ff}
.prose img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:8px 0;background:#fff}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}.prose li{margin:.3em 0}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:#16244a;border-radius:5px;padding:2px 5px}
.prose pre{margin:0 0 1.3em;border-radius:14px;border:1px solid var(--line);background:#0a1126;overflow:auto;max-height:640px}
.prose pre code{display:block;padding:18px 20px;background:none;font-size:13px;line-height:1.6;white-space:pre}
.prose pre code.hljs{background:none;padding:18px 20px}
.prose table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:14px;display:block;overflow:auto}.prose td,.prose th{border:1px solid var(--line);padding:8px 10px}
.prose blockquote{margin:0 0 1.2em;padding:4px 18px;border-left:3px solid #6383ff;color:#a9b7d7}
.related{max-width:1180px;padding-top:40px}.related .eyebrow{margin-bottom:18px}
.page-cta{position:relative;z-index:2;max-width:1180px;margin:60px auto 0;padding:0 clamp(22px,5vw,60px)}
.notfound{min-height:70vh;display:flex;flex-direction:column;justify-content:center}

@media(max-width:900px){.pgrid,.bgrid{grid-template-columns:repeat(2,1fr)}.pstats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid,.bgrid{grid-template-columns:1fr}.pstats{gap:8px}.pstats div{padding:14px}.page{padding:100px 20px 24px}.prose{font-size:15px}.prose pre code{font-size:12px;padding:14px}.site-foot{padding:26px 20px}.foot-nav{order:5}}