:root{
  --navy:#091636;--frost:#F2FDFF;--sky:#7BBCFE;--lav:#B8A9FE;
  --bg:#050d22;--bg2:#091636;--fg:#F2FDFF;
  --muted:rgba(242,253,255,.62);--faint:rgba(242,253,255,.36);
  --border:rgba(242,253,255,.10);--border2:rgba(242,253,255,.22);--surface:rgba(242,253,255,.035);
  --blk:rgba(242,253,255,.08);--card:#0c1d45;--glass:rgba(12,29,69,.72);
  --accent:#7BBCFE;--accent2:#B8A9FE;
  --grad:linear-gradient(135deg,var(--sky),var(--lav));
  --ease:cubic-bezier(.22,1,.36,1);--pad:clamp(20px,5vw,72px);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#050d22}}
:root[data-theme="dark"]{--bg:#050d22}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,canvas,video{max-width:100%;display:block}
::placeholder{color:var(--faint);opacity:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--lav);color:var(--navy)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.h-mega{font-weight:800;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-.04em}
.h-lg{font-weight:800;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-.04em}
.h-md{font-weight:700;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.12;letter-spacing:-.03em}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:18px}
.eyebrow::after{content:"";width:36px;height:1px;background:currentColor;opacity:.5}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:var(--muted);max-width:52ch}
.small{font-size:.88rem;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.line{display:block;overflow:hidden;padding-bottom:.05em}
.line>span{display:block}
.reveal .line>span{transform:translateY(105%)}
.reveal.in .line>span{transform:none;transition:transform 1.1s var(--ease)}
.reveal.in .line:nth-child(2)>span{transition-delay:.08s}
.reveal.in .line:nth-child(3)>span{transition-delay:.16s}
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.55em;border-radius:999px;font-weight:600;font-size:.97rem;letter-spacing:-.01em;transition:background .2s,color .2s,border-color .2s,transform .5s var(--ease);will-change:transform;min-height:48px}
.btn-solid{background:var(--frost);color:var(--navy)}
.btn-solid:hover{background:var(--sky)}
.btn-ghost{border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.5;pointer-events:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.ld-word{font-weight:900;font-size:clamp(2.6rem,9vw,6rem);letter-spacing:-.06em}
.ld-sub{margin-top:.8rem;font-size:.8rem;letter-spacing:.32em;color:var(--muted);text-align:center}
.ld-bar{margin:1.6rem auto 0;width:min(260px,60vw);height:1px;background:var(--border);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}

/* cursor */
.cur,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:150;border-radius:50%;transform:translate3d(-50%,-50%,0)}
.cur{width:6px;height:6px;background:var(--fg)}
.cur-ring{width:34px;height:34px;border:1px solid var(--border2);display:grid;place-items:center;transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cur-ring span{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--navy);opacity:0;transition:opacity .2s;white-space:nowrap}
.cur-ring.big{width:86px;height:86px;background:var(--frost);border-color:transparent}
.cur-ring.big span{opacity:1}
.cur-ring.hov{width:54px;height:54px;border-color:var(--accent)}
@media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none}}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor input,body.has-cursor textarea,body.has-cursor select,body.has-cursor label{cursor:none}}

/* nav */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 52px);left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(5,13,34,.6);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--border);width:max-content;max-width:calc(100% - 20px)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em;font-size:15px;user-select:none;white-space:nowrap}
.dots{display:grid;grid-template-columns:repeat(4,4px);gap:2.5px}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor}
.nav-links{list-style:none;display:flex;gap:2px;margin-left:10px}
.nav-links a{display:block;padding:9px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg);background:var(--surface)}
.nav-soc{display:flex;gap:2px;margin:0 4px;padding-left:8px;border-left:1px solid var(--border)}
.nav-soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);transition:color .2s,background .2s}
.nav-soc a:hover{color:var(--navy);background:var(--frost)}
.iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);transition:border-color .2s}
.iconbtn:hover{border-color:var(--accent)}
.eq{display:flex;gap:2px;align-items:flex-end;height:14px}
.eq i{width:2px;height:4px;background:currentColor;border-radius:1px}
.sound-on .eq i{animation:eq 1s ease-in-out infinite alternate}
.sound-on .eq i:nth-child(2){animation-delay:-.3s}.sound-on .eq i:nth-child(3){animation-delay:-.6s}.sound-on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:3px}to{height:14px}}
.nav-cta{background:var(--frost);color:var(--navy);font-weight:600;padding:10px 16px;border-radius:999px;font-size:14px;white-space:nowrap}
.nav-cta:hover{background:var(--sky)}
.menu-btn{display:none;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted)}
@media (max-width:1240px){.nav-soc{display:none}}
@media (max-width:1000px){.nav-links{display:none}.menu-btn{display:block}}
@media (max-width:440px){.nav-cta{display:none}}

/* full menu */
#menu{position:fixed;inset:0;z-index:130;background:rgba(5,13,34,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 30px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;overflow:auto}
#menu.open{opacity:1;visibility:visible}
.menu-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);right:var(--pad);padding:10px 16px;border:1px solid var(--border);border-radius:999px;font-size:14px}
.menu-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden;max-width:1300px}
.menu-grid a{display:flex;gap:16px;align-items:center;background:var(--bg);padding:16px;transition:background .4s}
.menu-grid a:hover{background:var(--bg2)}
.menu-grid img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.menu-grid b{display:block;font-size:1.1rem;letter-spacing:-.03em}
.menu-grid small{color:var(--muted);font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chip{padding:9px 15px;border-radius:999px;border:1px solid var(--border);font-size:14px;font-weight:500;color:var(--muted);transition:all .2s;display:inline-block}
.chip:hover{color:var(--fg);border-color:var(--border2)}
.chip.on{background:var(--frost);color:var(--navy);border-color:var(--frost)}

/* layout */
section{position:relative}
.wrap{padding:clamp(80px,12vh,150px) var(--pad);max-width:1440px;margin:0 auto}
.wrap.tight{padding-top:clamp(50px,8vh,90px);padding-bottom:clamp(50px,8vh,90px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.hr{height:1px;background:var(--border);margin:0 var(--pad)}
.panel{border:1px solid var(--border);border-radius:24px;background:var(--surface);padding:clamp(20px,3vw,34px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--faint);list-style:none;margin-bottom:26px}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a:hover{color:var(--fg)}

/* hero (home) */
#hero{position:relative;height:340vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(40px,9vh,110px);pointer-events:none;will-change:opacity,transform}
.hero-copy>*{pointer-events:auto}
.hero-copy .h-mega{max-width:18ch}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:clamp(22px,4vh,40px)}
.hero-stage{position:absolute;right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 130px);text-align:right;font-size:12px;color:var(--muted);letter-spacing:.06em}
.hero-stage b{display:block;font-size:clamp(1rem,1.4vw,1.25rem);letter-spacing:-.04em;color:var(--fg);font-weight:800}
.hero-end{position:absolute;left:0;right:0;bottom:clamp(40px,10vh,110px);text-align:center;opacity:0;pointer-events:none;padding:0 var(--pad)}
.hero-end b{display:block;font-weight:800;font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.04em;line-height:1.02}
.hero-end span{display:block;margin-top:12px;color:var(--muted)}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:46px;background:linear-gradient(var(--fg),transparent);opacity:.5}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,var(--bg) 100%)}
.no-gl #gl{display:none}
.no-gl .hero-pin{background:radial-gradient(60% 60% at 70% 40%,rgba(123,188,254,.25),transparent),radial-gradient(50% 50% at 20% 70%,rgba(184,169,254,.2),transparent)}

/* engines (home section 2) */
.eng{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(34px,5vh,60px);align-items:stretch}
@media (max-width:900px){.eng{grid-template-columns:1fr}}
.eng-list{list-style:none;border-top:1px solid var(--border)}
.eng-list a{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:baseline;padding:17px 4px;border-bottom:1px solid var(--border);color:var(--muted);transition:padding .5s var(--ease),color .2s}
.eng-list .n{font-size:12.5px;font-weight:600}
.eng-list .t{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;letter-spacing:-.025em;color:var(--fg)}
.eng-list .go{font-size:13px;opacity:0;transition:opacity .3s}
.eng-list a.on{padding-left:16px;color:var(--accent)}
.eng-list a.on .go{opacity:1}
.eng-stage{position:relative;border-radius:26px;overflow:hidden;min-height:500px;background:var(--bg2);isolation:isolate}
.eng-stage figure{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.eng-stage figure.on{opacity:1}
.eng-stage img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s linear}
.eng-stage figure.on img{transform:scale(1)}
.eng-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,34,0) 35%,rgba(5,13,34,.88));z-index:1;pointer-events:none}
.eng-cap{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.eng-cap b{display:block;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.eng-cap p{color:rgba(242,253,255,.85);margin-top:8px;max-width:40ch;font-size:.98rem}
.eng-cap .k{font-size:12px;font-weight:600;color:var(--sky);letter-spacing:.06em}

/* what we do */
.svc{list-style:none;margin-top:clamp(34px,5vh,60px);border-top:1px solid var(--border)}
.svc>li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 140px;gap:clamp(14px,3vw,44px);padding:clamp(24px,3.5vh,36px) 0;border-bottom:1px solid var(--border);align-items:start}
@media (max-width:960px){.svc>li{grid-template-columns:1fr}}
.svc .sn{font-size:13px;font-weight:600;color:var(--accent);padding-top:5px}
.svc h3{font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:-.035em;line-height:1.08;font-weight:800}
.svc .what{color:var(--muted);margin-top:8px;max-width:44ch;font-size:15.5px}
.svc .tags{display:flex;flex-wrap:wrap;gap:6px}
.svc .tags span{padding:6px 11px;border-radius:999px;border:1px solid var(--border);font-size:13px}
.svc .more{justify-self:end;font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap;padding-top:4px}
.svc .more:hover{color:var(--fg)}

/* clients marquee */
.marquee{overflow:hidden;margin-top:clamp(36px,6vh,60px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse;animation-duration:52s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{flex:none;height:110px;display:grid;place-items:center;padding:0 clamp(28px,4vw,56px);opacity:.72;transition:opacity .3s}
.mq-item:hover{opacity:1}
.mq-item img{height:44px;width:auto;max-width:220px;object-fit:contain}
.mq-item img.tall{height:62px}
.mq-item .wm{font-weight:800;font-size:clamp(1.15rem,1.8vw,1.55rem);letter-spacing:-.04em;white-space:nowrap}
.mq-item .wm.l{font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(.9rem,1.3vw,1.05rem)}
.mq-item .wm.i{font-style:italic}
.mq-item .wm.lc{text-transform:lowercase;font-weight:600}
.cstats{display:flex;gap:clamp(20px,4vw,50px)}
.cstats b{display:block;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;letter-spacing:-.06em;line-height:1}
.cstats span{font-size:13px;color:var(--muted)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}

/* forms */
.form{display:grid;gap:20px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
.fld label,.fld .lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=url],.fld textarea,.fld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border2);color:var(--fg);font:inherit;font-size:1.02rem;font-weight:500;padding:8px 0 10px;border-radius:0;transition:border-color .2s}
.fld textarea{min-height:80px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--accent)}
.drop{position:relative;border:1px dashed var(--border2);border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;transition:border-color .2s,background .2s;min-height:76px}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(123,188,254,.05)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ic{width:40px;height:40px;border-radius:12px;background:var(--grad);flex:none;display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:20px}
.drop b{display:block;font-size:14.5px}
.drop small{color:var(--faint);font-size:12.5px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs img{width:54px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:inline-block;padding:11px 18px;border-radius:999px;border:1px solid var(--border2);font-size:14px;font-weight:600;transition:all .2s}
.seg input:checked+span{background:var(--frost);color:var(--navy);border-color:var(--frost)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.form-note{font-size:12.5px;color:var(--faint)}
.form-msg{font-size:14px;min-height:1.4em}
.demo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:900px){.demo{grid-template-columns:1fr}}
.perks{list-style:none;display:grid;gap:12px;margin-top:26px}
.perks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.perks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);margin-top:9px;flex:none}

/* diagnostic */
.diag{max-width:940px;margin:34px auto 0}
.q-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:14px}
.q-prog{height:2px;background:var(--border);margin-bottom:30px;overflow:hidden}
.q-prog i{display:block;height:100%;background:var(--grad);transition:width .5s var(--ease)}
.q-title{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:22px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:600px){.opts{grid-template-columns:1fr}}
.opt{text-align:left;padding:18px 20px;border:1px solid var(--border);border-radius:16px;font-weight:600;font-size:15.5px;transition:all .2s}
.opt:hover{border-color:var(--accent);background:rgba(123,188,254,.07)}
.q-back{margin-top:18px;font-size:14px;color:var(--muted)}
.scores{display:grid;gap:14px;margin:26px 0}
.score{display:grid;grid-template-columns:110px 1fr 46px;gap:14px;align-items:center;font-size:14px;font-weight:600}
.score .tr{height:8px;background:var(--border);border-radius:8px;overflow:hidden}
.score .tr i{display:block;height:100%;width:0;border-radius:8px;background:var(--grad);transition:width 1.2s var(--ease)}
.score.low .tr i{background:linear-gradient(90deg,#ff8fa8,#b8a9fe)}
.opp{padding:24px;border-radius:20px;background:linear-gradient(120deg,rgba(123,188,254,.14),rgba(184,169,254,.18));border:1px solid rgba(184,169,254,.4)}
.opp small{color:var(--accent2);font-weight:600;font-size:13px}
.opp h3{font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.04em;margin:6px 0 8px}

/* service page */
.s-hero{padding:calc(env(safe-area-inset-top,0px) + 168px) var(--pad) clamp(40px,7vh,80px);max-width:1440px;margin:0 auto}
.s-hero .split{align-items:end}
.s-hero-img{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:21/9;margin-top:clamp(30px,5vh,56px)}
.s-hero-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.s-hero-img.in img{transform:scale(1)}
.s-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,13,34,.6))}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:30px}
.facts div{background:var(--bg);padding:18px 20px}
.facts b{display:block;font-size:15px;letter-spacing:-.02em}
.facts span{font-size:13px;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:22px;overflow:hidden;margin-top:34px;counter-reset:st}
.steps li{background:var(--bg);padding:24px 22px;counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:28px}
.steps b{display:block;font-size:1.08rem;letter-spacing:-.025em;margin-bottom:6px}
.steps p{font-size:14.5px;color:var(--muted)}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:34px}
.case{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .3s,transform .5s var(--ease)}
.case:hover{border-color:rgba(123,188,254,.45);transform:translateY(-4px)}
.case .cimg{aspect-ratio:16/10;background:linear-gradient(135deg,rgba(123,188,254,.16),rgba(184,169,254,.12));position:relative;overflow:hidden}
.case .cimg img{width:100%;height:100%;object-fit:cover}
.case .cimg .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.08em}
.case .cb{padding:20px 22px 22px;display:grid;gap:10px}
.case h3{font-size:1.2rem;letter-spacing:-.03em}
.case dl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;font-size:14px}
.case dt{color:var(--faint);font-weight:600;font-size:12.5px;padding-top:2px}
.case dd{color:var(--muted)}
.faq{margin-top:30px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-weight:400;font-size:1.6rem;color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:75ch}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:28px}
.related a{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;isolation:isolate}
.related img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.related a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,13,34,.9));z-index:-1}
.related a:hover img{transform:scale(1.06)}
.related b{font-size:1.05rem;letter-spacing:-.02em}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:clamp(26px,4vw,44px);border-radius:26px;background:linear-gradient(120deg,rgba(123,188,254,.14),rgba(184,169,254,.16));border:1px solid rgba(184,169,254,.3)}
.cta-band h2{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.04em;line-height:1.1;max-width:24ch}

/* gallery */
.gallery{columns:3 260px;column-gap:12px;margin-top:34px}
.gallery figure{break-inside:avoid;margin-bottom:12px;border-radius:18px;overflow:hidden;position:relative}
.gallery img{width:100%;height:auto;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(5,13,34,.6);backdrop-filter:blur(8px)}

/* reels */
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:34px}
.reel{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--border)}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .rl{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;font-size:13px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.reel .rl small{display:block;font-weight:500;opacity:.8;font-size:11.5px}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,13,34,.75));pointer-events:none}
.reel .play{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(242,253,255,.9);display:grid;place-items:center}
.reel .play::before{content:"";border-left:10px solid var(--navy);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.reel.playing .play{opacity:0}
.reel.empty{background:linear-gradient(160deg,rgba(123,188,254,.12),rgba(184,169,254,.1))}
.reel.empty .slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.06em}

/* proof (ads) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:22px;overflow:hidden;margin-top:34px}
@media (max-width:800px){.stats{grid-template-columns:1fr 1fr}}
.stats div{background:var(--bg);padding:24px 22px}
.stats b{display:block;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.stats span{font-size:13px;color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:20px}
.shot{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--card);aspect-ratio:16/10;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot figcaption{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(5,13,34,.7)}
.shot.empty{background:repeating-linear-gradient(135deg,rgba(242,253,255,.03) 0 12px,transparent 12px 24px),var(--card)}
.shot.empty img{display:none}
.shot .slot{position:absolute;inset:0;display:none;place-items:center;font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.06em;text-align:center;padding:20px}
.shot.empty .slot{display:grid}
.flowline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:34px}
.flowline span{padding:12px 18px;border-radius:14px;border:1px solid var(--border);font-weight:700;font-size:14px;position:relative;overflow:hidden}
.flowline span::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(123,188,254,.35),transparent);animation:sweep 3.2s linear infinite}
.flowline span:nth-child(odd)::after{animation-delay:.8s}
.flowline i{width:22px;height:1px;background:var(--border2)}
@keyframes sweep{to{left:120%}}

/* build devices */
.devices{position:relative;aspect-ratio:4/3.1;perspective:1600px}
.dev-browser{position:absolute;left:0;top:4%;width:84%;aspect-ratio:16/10.5;border-radius:16px;background:var(--card);border:1px solid var(--border2);overflow:hidden;transform:rotateY(14deg) rotateX(6deg);box-shadow:0 60px 120px -40px rgba(0,0,0,.8);animation:floaty 9s ease-in-out infinite}
.dev-phone{position:absolute;right:2%;bottom:0;width:27%;aspect-ratio:9/19;border-radius:26px;background:var(--card);border:1px solid var(--border2);overflow:hidden;transform:rotateY(-18deg) rotateX(4deg) translateZ(80px);box-shadow:0 50px 100px -30px rgba(0,0,0,.85);animation:floaty 9s ease-in-out infinite reverse}
@keyframes floaty{50%{translate:0 -10px}}
.bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--border)}
.bar i{width:7px;height:7px;border-radius:50%;background:var(--border2)}
.screen{position:absolute;inset:26px 0 0;opacity:0;transition:opacity .7s var(--ease)}
.screen.on{opacity:1}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.dev-phone .screen{inset:0}
.seg-tabs{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:4px;margin-top:22px;flex-wrap:wrap}
.seg-tabs button{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:all .2s}
.seg-tabs button.on{background:var(--frost);color:var(--navy)}
.arch{list-style:none;display:grid;gap:6px}
.arch li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--border);border-radius:12px;font-weight:600;font-size:15px;transition:all .5s var(--ease)}
.arch li small{font-weight:400;color:var(--faint);font-size:12.5px;text-align:right}
.arch li:hover,.arch li.on{background:linear-gradient(90deg,rgba(123,188,254,.18),rgba(184,169,254,.08));border-color:rgba(123,188,254,.55);transform:translateX(8px)}
.arch li:hover small,.arch li.on small{color:var(--fg)}

/* automation scene */
.auto-wrap{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.62fr);gap:clamp(24px,3vw,44px);margin-top:clamp(30px,5vh,56px);align-items:center}
@media (max-width:1000px){.auto-wrap{grid-template-columns:1fr}}
.ascene{position:relative;aspect-ratio:16/10.5;min-height:520px;perspective:1800px;perspective-origin:50% 40%}
.aworld{position:absolute;inset:5% 3% 3% 7%;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-18deg) rotateZ(2deg);transition:transform 1.2s var(--ease)}
.aglow{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(123,188,254,.22),rgba(184,169,254,.1) 50%,transparent);filter:blur(30px);transform:translateZ(-260px)}
.agrid{position:absolute;inset:-10%;transform:translateZ(-220px);background-image:linear-gradient(rgba(242,253,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(242,253,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.ap{position:absolute;border-radius:18px;background:linear-gradient(160deg,rgba(18,36,82,.92),rgba(9,22,54,.94));border:1px solid rgba(242,253,255,.14);box-shadow:0 40px 80px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(242,253,255,.08);color:var(--fg);transform-style:preserve-3d;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ap-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(242,253,255,.08);font-size:12px;font-weight:600;color:var(--muted)}
.ap-h b{color:var(--fg);font-size:12.5px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#7ee2b8}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#7ee2b8;box-shadow:0 0 10px #7ee2b8}
/* crm board */
.ap-crm{left:0;top:2%;width:55%;height:56%;transform:translateZ(-120px)}
.crm{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;height:calc(100% - 42px)}
.col{background:rgba(242,253,255,.03);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;position:relative}
.col>span{font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.04em;display:flex;justify-content:space-between}
.dcard{border-radius:8px;background:rgba(242,253,255,.06);border:1px solid rgba(242,253,255,.08);padding:7px 8px;font-size:10.5px;line-height:1.35}
.dcard b{display:block;font-size:11px}
.dcard i{font-style:normal;color:var(--faint)}
.dcard.hot{background:linear-gradient(135deg,rgba(123,188,254,.3),rgba(184,169,254,.25));border-color:rgba(123,188,254,.6);box-shadow:0 10px 30px -10px rgba(123,188,254,.6)}
.mover{position:absolute;left:0;top:0;width:calc(25% - 14px);transition:transform 1s var(--ease),opacity .5s;z-index:3}
/* phone */
.ap-phone{left:58%;top:6%;width:24%;aspect-ratio:9/18.5;border-radius:34px;padding:9px;background:linear-gradient(160deg,#1a2a55,#0a1530);transform:translateZ(60px) rotateY(-6deg);border:1px solid rgba(242,253,255,.2)}
.ap-phone .scr{position:absolute;inset:9px;border-radius:26px;overflow:hidden;background:#0b1633;display:flex;flex-direction:column}
.ap-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:14px;border-radius:10px;background:#050d22;z-index:2}
.chat-h{display:flex;align-items:center;gap:8px;padding:26px 12px 10px;border-bottom:1px solid rgba(242,253,255,.08)}
.chat-h .av{width:26px;height:26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--navy)}
.chat-h b{display:block;font-size:11.5px}
.chat-h small{font-size:9.5px;color:#7ee2b8}
.chat{flex:1;padding:10px;display:flex;flex-direction:column;gap:7px;overflow:hidden;justify-content:flex-end}
.msg{max-width:84%;padding:7px 9px;border-radius:12px;font-size:10.5px;line-height:1.4;display:none}
.msg.on{display:block;animation:msgIn .5s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.95)}}
.msg.in{background:rgba(242,253,255,.08);border-bottom-left-radius:4px;align-self:flex-start}
.msg.out{background:linear-gradient(135deg,#7BBCFE,#9db0fe);color:#071232;border-bottom-right-radius:4px;align-self:flex-end}
.msg small{display:block;font-size:8.5px;opacity:.6;margin-top:2px;text-align:right}
.typing{align-self:flex-end;display:none;gap:3px;padding:8px 10px;border-radius:12px;background:rgba(123,188,254,.25)}
.typing.on{display:flex}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--sky);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{transform:translateY(-3px);opacity:.5}}
/* lead card */
.ap-lead{left:-3%;top:56%;width:30%;transform:translateZ(140px) translateY(20px);opacity:0}
.ap-lead.on{opacity:1;transform:translateZ(140px)}
.lead-b{padding:12px 14px;display:grid;gap:7px;font-size:11.5px}
.lead-b div{display:flex;justify-content:space-between;gap:10px}
.lead-b span{color:var(--faint)}
.tag{display:inline-block;padding:3px 8px;border-radius:999px;background:rgba(123,188,254,.18);color:var(--sky);font-size:10px;font-weight:700}
/* score */
.ap-score{left:84%;top:0;width:17%;transform:translateZ(180px);opacity:0}
.ap-score.on{opacity:1}
.gauge{padding:14px;display:grid;place-items:center;gap:6px}
.gauge svg{width:100%;max-width:120px}
.gauge b{font-size:11px;color:#ffb38a}
/* email + calendar */
.ap-mail{left:27%;top:70%;width:29%;transform:translateZ(110px) translateY(20px);opacity:0}
.ap-mail.on{opacity:1;transform:translateZ(110px)}
.ap-cal{left:74%;top:66%;width:27%;transform:translateZ(200px) translateY(20px);opacity:0}
.ap-cal.on{opacity:1;transform:translateZ(200px)}
.mail-b{padding:12px 14px;font-size:11px;display:grid;gap:5px}
.mail-b .bar2{height:6px;border-radius:4px;background:rgba(242,253,255,.08)}
.cal-b{padding:12px 14px;font-size:11px;display:grid;gap:8px}
.cal-b .slot{padding:8px 10px;border-radius:10px;background:linear-gradient(135deg,rgba(126,226,184,.22),rgba(123,188,254,.18));border:1px solid rgba(126,226,184,.4)}
.cal-b .slot b{display:block;font-size:12px}
.beams{position:absolute;inset:0;transform:translateZ(-40px);overflow:visible;pointer-events:none}
.beams path{fill:none;stroke:url(#bg);stroke-width:1.6;stroke-dasharray:4 7;opacity:.0;transition:opacity .6s}
.beams path.on{opacity:.85;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.beams circle{fill:#F2FDFF;filter:drop-shadow(0 0 6px #7BBCFE);opacity:0}
.timeline{list-style:none;display:grid;gap:4px}
.timeline li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid transparent;color:var(--faint);transition:all .5s var(--ease)}
.timeline li time{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.timeline li b{display:block;font-size:14.5px;letter-spacing:-.02em}
.timeline li span{font-size:13px}
.timeline li.on{color:var(--fg);border-color:rgba(123,188,254,.4);background:rgba(123,188,254,.06)}
.timeline li.on time{color:var(--sky)}
.timeline li.done{color:var(--muted)}
.integr{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.integr span{padding:8px 14px;border-radius:12px;border:1px solid var(--border);font-size:13.5px;font-weight:600}
@media (max-width:700px){.auto-wrap{overflow-x:clip;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad)}.ascene{aspect-ratio:4/5;min-height:0}.aworld{inset:0;transform:rotateX(8deg) rotateY(-10deg)}.ap-crm,.ap-mail{display:none}.ap-phone{left:30%;top:6%;width:44%}.ap-lead{left:0;top:58%;width:52%}.ap-score{left:74%;top:4%;width:26%}.ap-cal{left:48%;top:72%;width:52%}.beams{display:none}}

/* funnel */
#funnelSvg{width:100%;height:auto;overflow:visible}
#funnelSvg text{fill:var(--fg)}
#funnelSvg .fl{stroke:var(--border2)}
.fcards{display:grid;gap:10px}
.fcard{padding:18px 20px;border:1px solid var(--border);border-radius:16px;transition:border-color .3s,background .3s}
.fcard:hover{border-color:rgba(123,188,254,.45);background:rgba(123,188,254,.04)}
.fcard b{display:block;font-size:1.02rem;letter-spacing:-.02em}
.fcard p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* launch box */
.brandbox{position:relative;aspect-ratio:1;max-width:500px;width:100%;margin:0 auto;border-radius:28px;background:var(--surface);border:1px dashed var(--border2);overflow:hidden;transition:background 1s var(--ease)}
.brandbox .bl{position:absolute;opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.brandbox .q{font-weight:900;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.06em;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--faint)}
.brandbox[data-l="0"] .q{opacity:1}
.b1{width:52%;aspect-ratio:1;border-radius:50%;left:24%;top:18%;background:conic-gradient(from 200deg,#8e85d8,#b8a9fe,#6f6db5,#2b2f6a,#8e85d8);transform:scale(.6)}
.b2{left:8%;top:8%;font-weight:900;font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:-.05em;transform:translateY(10px)}
.b3{width:44%;aspect-ratio:1;border-radius:0 0 100% 0;left:0;bottom:0;background:var(--sky);transform:translate(-30%,30%)}
.b4{right:8%;bottom:8%;display:grid;grid-template-columns:repeat(4,10px);gap:6px;transform:scale(.4)}
.b4 i{width:10px;height:10px;border-radius:50%;background:#091636}
.b5{left:8%;bottom:10%;right:40%;font-size:13px;font-weight:600;color:var(--navy);transform:translateY(10px)}
.b6{inset:0;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(184,169,254,.6),0 0 120px -20px rgba(184,169,254,.5)}
.brandbox .bl.on{opacity:1;transform:none}
.brandbox .b1.on{transform:scale(1) rotate(30deg)}

/* studio */
.studio{position:relative;aspect-ratio:1/.9;border-radius:28px;background:radial-gradient(80% 60% at 50% 30%,#13275e,#050d22);overflow:hidden;perspective:1100px;touch-action:none;cursor:grab;border:1px solid var(--border)}
.floor{position:absolute;left:-20%;right:-20%;bottom:-10%;height:55%;background:radial-gradient(ellipse at 50% 0%,rgba(184,169,254,.22),transparent 60%);transform:rotateX(70deg)}
.softbox{position:absolute;width:26%;aspect-ratio:3/4;top:10%;border-radius:8px;background:linear-gradient(#f2fdff,#cfe6ff);box-shadow:0 0 80px 20px rgba(123,188,254,.35);transition:opacity .4s}
.product{position:absolute;left:50%;top:52%;width:26%;aspect-ratio:1/1.6;transform-style:preserve-3d;transform:translate(-50%,-50%)}
.product .f{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden}
.pf{background:linear-gradient(160deg,#c6bcff,#6f6db5);transform:translateZ(var(--d))}
.pb{background:linear-gradient(160deg,#7bbcfe,#2b3f8a);transform:rotateY(180deg) translateZ(var(--d))}
.pl,.pr{width:calc(var(--d)*2);left:calc(50% - var(--d))}
.pl{background:linear-gradient(#8e85d8,#3c3f86);transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.pr{background:linear-gradient(#a9cffd,#4565b5);transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.product .label{position:absolute;left:12%;right:12%;top:38%;font-weight:900;font-size:clamp(.7rem,1.4vw,1rem);letter-spacing:-.04em;color:var(--navy);transform:translateZ(calc(var(--d) + 1px))}
.rec{position:absolute;left:18px;top:16px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.rec i{width:8px;height:8px;border-radius:50%;background:#ff6b8b;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.cam-hud{position:absolute;right:18px;bottom:16px;font-size:12px;color:var(--muted)}

/* social orbit */
.universe{position:relative;aspect-ratio:1;max-width:560px;margin:0 auto;width:100%}
.core{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#b8a9fe 55%,#6f6db5);display:grid;place-items:center;font-weight:900;letter-spacing:-.04em;color:var(--navy);font-size:clamp(.9rem,2vw,1.15rem);box-shadow:0 0 100px -10px rgba(184,169,254,.6);z-index:5}
.orbit-ring{position:absolute;border:1px solid var(--border);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.ocard{position:absolute;left:50%;top:50%;padding:9px 13px;border-radius:12px;background:var(--glass);border:1px solid var(--border2);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;will-change:transform;backdrop-filter:blur(6px)}
.piece{position:absolute;left:50%;top:50%;width:clamp(16px,2.6vw,24px);aspect-ratio:9/16;border-radius:4px;opacity:0;transform:translate(-50%,-50%) scale(.2);transition:transform 1s var(--ease),opacity .6s}

/* locations */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:24px}
.loc-grid a{padding:14px 16px;border:1px solid var(--border);border-radius:14px;font-weight:600;font-size:14.5px;transition:all .2s}
.loc-grid a:hover{border-color:var(--accent);color:var(--accent)}
.prose{max-width:72ch;color:var(--muted);display:grid;gap:16px;font-size:16.5px}
.prose strong{color:var(--fg)}
.cards3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:30px}
.cards3 a,.cards3 div{border:1px solid var(--border);border-radius:20px;padding:22px;transition:border-color .3s,background .3s;display:block}
.cards3 a:hover{border-color:rgba(123,188,254,.45);background:rgba(123,188,254,.04)}
.cards3 b{display:block;font-size:1.08rem;letter-spacing:-.025em;margin-bottom:6px}
.cards3 p{font-size:14.5px;color:var(--muted)}
.svc-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-top:34px}
.svc-hub a{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3.2;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate}
.svc-hub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.svc-hub a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,34,.1) 20%,rgba(5,13,34,.92));z-index:-1}
.svc-hub a:hover img{transform:scale(1.05)}
.svc-hub small{color:var(--sky);font-weight:600;font-size:12.5px}
.svc-hub b{font-size:1.5rem;letter-spacing:-.04em;line-height:1.05;margin:4px 0 6px}
.svc-hub p{font-size:14.5px;color:rgba(242,253,255,.8)}

/* footer */
footer{border-top:1px solid var(--border)}
.foot-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:clamp(50px,8vh,80px) var(--pad);max-width:1440px;margin:0 auto}
.foot-cta h2{font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:700;letter-spacing:-.035em}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr 1fr;gap:30px;padding:46px var(--pad) 30px;max-width:1440px;margin:0 auto;border-top:1px solid var(--border)}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h3{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:12px}
.foot-grid ul{list-style:none;display:grid;gap:8px;font-size:14.5px}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--pad) calc(30px + env(safe-area-inset-bottom,0px));max-width:1440px;margin:0 auto;font-size:12.5px;color:var(--faint);border-top:1px solid var(--border)}

.mob-cta{display:none}
@media (max-width:760px){
  .mob-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;justify-content:center;padding:16px;border-radius:999px;background:var(--frost);color:var(--navy);font-weight:700;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .5s var(--ease)}
  .mob-cta.show{transform:none}
  .hero-stage{display:none}
  #hero{height:260vh}
  .eng-stage{min-height:380px}
  .score{grid-template-columns:90px 1fr 40px}
}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 80px);transform:translate(-50%,-20px);padding:10px 18px;border-radius:999px;background:var(--frost);color:var(--navy);font-weight:600;font-size:14px;z-index:170;opacity:0;transition:all .4s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
#override{position:fixed;inset:0;z-index:180;background:#000;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s}
#override.on{opacity:1;visibility:visible}
#override pre{font-family:Inter,sans-serif;font-weight:900;font-size:clamp(1.6rem,6vw,4.6rem);letter-spacing:-.05em;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:pre-line;line-height:1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.reveal .line>span{transform:none}.fade{opacity:1;transform:none}}

/* world map */
.wtabs{justify-content:flex-end}
.world{position:relative;margin-top:clamp(30px,5vh,56px);display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
@media (max-width:1000px){.world{grid-template-columns:1fr}.wtabs{justify-content:flex-start}}
.wmap{position:relative;width:100%;aspect-ratio:1000/372.2;transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
.wmap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wdots circle{fill:rgba(242,253,255,.17);transition:fill .8s}
.wdots circle.hl{fill:rgba(123,188,254,.75)}
.wdots circle.tw{animation:wtw 3.6s ease-in-out infinite}
@keyframes wtw{50%{fill:rgba(184,169,254,.8)}}
.warcs path{fill:none;stroke:url(#wg);stroke-width:1.1;stroke-dasharray:3 5;opacity:.18;transition:opacity .6s,stroke-width .6s}
.warcs path.on{opacity:1;stroke-width:1.8;animation:dash 1.1s linear infinite}
.pin{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;display:grid;place-items:center;z-index:3}
.pin i{width:9px;height:9px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(123,188,254,.6);animation:pp 2.4s ease-out infinite;transition:transform .4s var(--ease),background .3s}
.pin.studio i{width:13px;height:13px;background:var(--frost)}
.pin.city i{width:7px;height:7px;background:var(--lav);animation:none;opacity:.85}
@keyframes pp{0%{box-shadow:0 0 0 0 rgba(123,188,254,.55)}100%{box-shadow:0 0 0 16px rgba(123,188,254,0)}}
.pin span{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translate(-50%,4px);white-space:nowrap;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:999px;background:rgba(5,13,34,.85);border:1px solid var(--border2);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.pin:hover span,.pin:focus-visible span,.pin.on span{opacity:1;transform:translate(-50%,0)}
.pin.on i{transform:scale(1.5);background:var(--frost)}
.pin.studio span{border-color:rgba(242,253,255,.5)}
.wpanel{position:relative}
@media (min-width:1001px){.wmap{margin-top:30px}}
.wcard{border:1px solid var(--border2);border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(18,36,82,.7),rgba(9,22,54,.7));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:wcIn .6s var(--ease)}
@keyframes wcIn{from{opacity:0;transform:translateY(14px)}}
.wcard small{color:var(--sky);font-weight:600;font-size:12.5px}
.wcard h3{font-size:1.6rem;letter-spacing:-.04em;line-height:1.05;margin:4px 0 8px}
.wcard p{font-size:14.5px;color:var(--muted)}
.wlogos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.wl{height:50px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;padding:8px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.15;letter-spacing:-.01em;transition:border-color .3s,background .3s}
.wl:hover{border-color:rgba(123,188,254,.5);background:rgba(123,188,254,.06)}
.wl img{max-height:28px;max-width:100%;width:auto;object-fit:contain;opacity:.9}
.wlinks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px}
.wlinks a{font-size:13.5px;font-weight:600;color:var(--sky)}
.wlinks a.on,.wlinks a:hover{color:var(--fg)}
@media (max-width:700px){.pin span{display:none}.pin.on span{display:block}.wlogos{grid-template-columns:repeat(3,1fr)}}

/* sticky top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px;background:linear-gradient(90deg,#7BBCFE,#B8A9FE);color:#091636;font-size:13.5px;font-weight:600;text-align:center}
.topbar i{width:7px;height:7px;border-radius:50%;background:#091636;animation:blink 1.4s steps(2) infinite;flex:none}
.topbar b{font-weight:800;padding:4px 10px;border-radius:999px;background:#091636;color:#F2FDFF;font-size:12.5px;white-space:nowrap}
.topbar:hover b{background:#F2FDFF;color:#091636}
.topbar .tb-s{display:none}
@media (max-width:640px){.topbar .tb-l{display:none}.topbar .tb-s{display:inline}}

/* portfolio */
.pf-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px);position:sticky;top:calc(env(safe-area-inset-top,0px) + 112px);z-index:20;padding:10px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.pf-cats{display:flex;flex-wrap:wrap;gap:6px}
.pf-cats button{padding:9px 15px;border-radius:999px;border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--muted);transition:all .25s}
.pf-cats button:hover{color:var(--fg);border-color:var(--border2)}
.pf-cats button.on{background:var(--frost);color:var(--navy);border-color:var(--frost)}
.pf-cats sup{font-size:10.5px;margin-left:4px;opacity:.6}
.pf-dev{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--border2);background:rgba(5,13,34,.7);backdrop-filter:blur(10px)}
.pf-dev button{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);transition:all .3s var(--ease)}
.pf-dev button.on{background:var(--grad);color:var(--navy)}
.pf-dev svg{width:15px;height:15px}
.port{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:18px}
.port[data-mode="m"]{grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:1000px){.port[data-mode="m"]{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.port{grid-template-columns:1fr}.port[data-mode="m"]{grid-template-columns:repeat(2,1fr)}}
.pcard{display:flex;flex-direction:column;gap:12px}
.pframe{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border2);background:#0a1530;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);cursor:zoom-in;transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .4s}
.pcard:hover .pframe{transform:translateY(-6px);border-color:rgba(123,188,254,.5);box-shadow:0 60px 100px -40px rgba(0,0,0,.95)}
.pbar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--border);background:#0c1a3d}
.pbar i{width:8px;height:8px;border-radius:50%;background:var(--border2)}
.pbar span{margin-left:10px;flex:1;font-size:11.5px;color:var(--faint);background:rgba(242,253,255,.05);border-radius:999px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvid{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden}
.pvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.pvid .vm{display:none}
.port[data-mode="m"] .pframe{border-radius:30px;padding:7px;background:linear-gradient(160deg,#1c2b57,#0a1530)}
.port[data-mode="m"] .pframe::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:30%;height:13px;border-radius:10px;background:#050d22;z-index:3}
.port[data-mode="m"] .pbar{display:none}
.port[data-mode="m"] .pvid{aspect-ratio:390/844;border-radius:24px}
.port[data-mode="m"] .vd{display:none}
.port[data-mode="m"] .vm{display:block}
.pexp{position:absolute;right:10px;bottom:10px;z-index:4;padding:7px 12px;border-radius:999px;background:rgba(5,13,34,.78);backdrop-filter:blur(8px);font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--fg);opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.pcard:hover .pexp,.pexp:focus-visible{opacity:1;transform:none}
@media (hover:none){.pexp{opacity:1;transform:none}}
.pmeta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px}
.pmeta b{display:block;font-size:1.05rem;letter-spacing:-.025em}
.pmeta small{color:var(--muted);font-size:13px}
.pmeta a{font-size:13px;font-weight:600;color:var(--sky);white-space:nowrap;padding-top:2px}
.pmeta a:hover{color:var(--fg)}
.port[data-mode="m"] .pmeta{flex-direction:column;gap:4px}
/* theatre */
.theatre{position:fixed;inset:0;z-index:160;background:rgba(3,8,22,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 18px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.theatre.open{opacity:1;visibility:visible}
.th-top{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(1200px,100%);flex-wrap:wrap}
.th-top b{font-size:1.15rem;letter-spacing:-.03em}
.th-top small{display:block;color:var(--muted);font-size:13px}
.th-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.th-stage{position:relative;width:min(1200px,100%);flex:1;min-height:0;display:grid;place-items:center}
.th-frame{border-radius:18px;overflow:hidden;border:1px solid var(--border2);background:#fff;box-shadow:0 60px 140px -40px rgba(0,0,0,.95);transition:all .7s var(--ease)}
.th-frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.theatre[data-mode="d"] .th-frame{width:100%;max-height:100%;aspect-ratio:16/10}
.theatre[data-mode="m"] .th-frame{height:100%;max-height:min(80vh,820px);aspect-ratio:390/844;border-radius:34px;border:8px solid #1a2a55}
.th-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(242,253,255,.9);color:var(--navy);font-size:20px;font-weight:700;display:grid;place-items:center;z-index:2}
.th-nav.prev{left:-8px}.th-nav.next{right:-8px}
@media (max-width:700px){.th-nav{top:auto;bottom:-6px;transform:none}.th-nav.prev{left:10px}.th-nav.next{right:10px}}
.th-close{width:42px;height:42px;border-radius:50%;border:1px solid var(--border2);font-size:18px}

/* automation workflows */
.wf-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.wf-tabs button{padding:10px 16px;border-radius:999px;border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--muted);transition:all .25s}
.wf-tabs button:hover{color:var(--fg);border-color:var(--border2)}
.wf-tabs button.on{background:var(--grad);color:var(--navy);border-color:transparent}
.wf-canvas{position:relative;margin-top:18px;aspect-ratio:1200/600;border-radius:26px;overflow:hidden;border:1px solid var(--border2);background:radial-gradient(70% 70% at 50% 40%,rgba(123,188,254,.08),transparent 70%),radial-gradient(circle,rgba(242,253,255,.08) 1px,transparent 1.2px) 0 0/22px 22px,#060f28;box-shadow:inset 0 0 120px rgba(5,13,34,.9)}
@media (max-width:760px){.wf-canvas{aspect-ratio:4/5}}
.wf-world{position:absolute;left:0;top:0;width:1200px;height:560px;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.65,0,.35,1);will-change:transform}
.wf-edges{position:absolute;inset:0;overflow:visible}
.wf-edges .base{fill:none;stroke:rgba(242,253,255,.07);stroke-width:2}
.wf-edges .line{fill:none;stroke:url(#wfg);stroke-width:2.2;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1);filter:url(#wfglow)}
.wf-edges .line.back{stroke-dasharray:5 7!important;stroke-dashoffset:0!important;opacity:0;transition:opacity .8s;animation:dash 1.4s linear infinite}
.wf-edges .line.back.on{opacity:.75}
.wf-edges .pulse{fill:#F2FDFF;filter:url(#wfglow)}
.wf-node{position:absolute;width:196px;height:96px;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding:12px 12px 10px;border-radius:16px;background:linear-gradient(160deg,rgba(22,40,88,.96),rgba(10,22,52,.97));border:1px solid rgba(242,253,255,.14);box-shadow:0 24px 50px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(242,253,255,.08);opacity:0;transform:translateY(14px) scale(.9);filter:blur(6px);transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease),border-color .4s,box-shadow .4s}
.wf-node.on{opacity:1;transform:none;filter:none}
.wf-node.ping{border-color:rgba(123,188,254,.8);box-shadow:0 0 0 4px rgba(123,188,254,.12),0 24px 60px -20px rgba(123,188,254,.45)}
.wf-node.trigger .wf-ic{background:linear-gradient(135deg,#ffb38a,#ff8fa8)}
.wf-node.ai .wf-ic{background:linear-gradient(135deg,#B8A9FE,#7BBCFE)}
.wf-node.logic .wf-ic{background:linear-gradient(135deg,#F2FDFF,#cfe6ff)}
.wf-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#7BBCFE,#4a7fd6);color:#091636}
.wf-ic svg{width:19px;height:19px}
.wf-node b{display:block;font-size:13px;letter-spacing:-.01em;line-height:1.2}
.wf-node small{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:2px}
.wf-node em{grid-column:1/-1;font-style:normal;font-size:10px;font-weight:600;color:var(--faint);letter-spacing:.03em;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(242,253,255,.07);padding-top:7px;margin-top:2px}
.wf-st{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.wf-st::before{content:"";width:9px;height:9px;border-radius:50%;border:1.6px solid var(--sky);border-right-color:transparent;animation:spin .8s linear infinite}
.wf-node.done .wf-st{color:#7ee2b8}
.wf-node.done .wf-st::before{border:0;width:7px;height:7px;background:#7ee2b8;box-shadow:0 0 8px #7ee2b8;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.wf-lbl{position:absolute;transform:translate(-50%,-50%);padding:4px 9px;border-radius:999px;background:#0b1838;border:1px solid rgba(123,188,254,.45);font-size:10.5px;font-weight:700;color:var(--sky);white-space:nowrap;opacity:0;transition:opacity .6s}
.wf-lbl.on{opacity:1}
.wf-hud{position:absolute;left:18px;top:16px;display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);z-index:3}
.wf-step{padding:4px 10px;border-radius:999px;background:rgba(5,13,34,.7);border:1px solid var(--border)}
.wf-replay{position:absolute;right:16px;top:12px;z-index:3;padding:8px 14px;border-radius:999px;border:1px solid var(--border2);background:rgba(5,13,34,.7);font-size:12.5px;font-weight:600}
.wf-replay:hover{border-color:var(--sky)}
.wf-info{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:26px;align-items:start}
@media (max-width:900px){.wf-info{grid-template-columns:1fr}}
.wf-desc{color:var(--muted);margin-top:8px;font-size:15.5px}
.wf-k{font-size:12.5px;font-weight:600;color:var(--faint);margin-bottom:10px}
.wf-tools{display:flex;flex-wrap:wrap;gap:6px}
.wf-tools span{padding:6px 11px;border-radius:10px;border:1px solid var(--border);font-size:13px;font-weight:600}
.wf-outs{list-style:none;display:grid;gap:8px;font-size:14.5px}
.wf-outs li{display:flex;gap:10px}
.wf-outs li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);margin-top:8px;flex:none}

/* funnel services */
.fn{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:clamp(20px,3vw,40px);margin-top:clamp(30px,5vh,50px);align-items:start}
@media (max-width:1000px){.fn{grid-template-columns:1fr}}
.fn-list{display:grid;gap:4px}
.fn-item{display:grid;grid-template-columns:34px 1fr;gap:10px;text-align:left;padding:13px 14px;border-radius:16px;border:1px solid transparent;transition:background .35s,border-color .35s}
.fn-item:hover{background:var(--surface)}
.fn-item.on{background:linear-gradient(120deg,rgba(123,188,254,.12),rgba(184,169,254,.1));border-color:rgba(123,188,254,.35)}
.fn-n{font-size:12px;font-weight:700;color:var(--faint);padding-top:3px}
.fn-item.on .fn-n{color:var(--sky)}
.fn-item b{display:block;font-size:15px;letter-spacing:-.02em}
.fn-item small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.fn-item.on small,.fn-item:hover small{max-height:60px;opacity:1}
@media (max-width:1000px){.fn-list{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}.fn-list::-webkit-scrollbar{display:none}.fn-item{flex:none;grid-template-columns:auto;padding:9px 14px;border-radius:999px;border-color:var(--border)}.fn-item small,.fn-n{display:none}.fn-item b{font-size:13.5px;white-space:nowrap}}
.fn-stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 120px)}
.fn-canvas{position:relative;aspect-ratio:1/1.02;border-radius:26px;overflow:hidden;border:1px solid var(--border2);background:radial-gradient(60% 50% at 38% 30%,rgba(123,188,254,.1),transparent 70%),linear-gradient(180deg,#071232,#050d22)}
@media (max-width:1000px){.fn-stage{position:relative;top:0}.fn-canvas{aspect-ratio:4/5}}
.fn-canvas canvas{position:absolute;inset:0;width:100%;height:100%}
.fn-labels{position:absolute;inset:0;pointer-events:none}
.fn-lab{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);max-width:44%}
.fn-lab.on{opacity:1}
.fn-lab i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--navy);background:var(--c1,#7BBCFE);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;flex:none;box-shadow:0 0 0 0 var(--c1);transition:box-shadow .5s}
.fn-lab b{display:block;font-size:13.5px;letter-spacing:-.015em;line-height:1.2}
.fn-lab small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.fn-lab.hot b{color:var(--c1)}
.fn-lab.hot i{box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 25%,transparent)}
.fn-lab.end{flex-direction:column;align-items:center;text-align:center;transform:translate(-50%,0);max-width:none}
.fn-lab.end b{font-size:14px}
.fn-head{position:absolute;left:20px;top:16px;z-index:2}
.fn-head small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--sky)}
.fn-head b{font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.03em}
.fn-replay{position:absolute;right:16px;top:14px;z-index:2;padding:8px 14px;border-radius:999px;border:1px solid var(--border2);background:rgba(5,13,34,.7);font-size:12.5px;font-weight:600}
.fn-info{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin-top:20px}
@media (max-width:700px){.fn-info{grid-template-columns:1fr}.fn-lab{max-width:48%}.fn-lab b{font-size:12px}.fn-lab small{font-size:10.5px}}
.fn-k{font-size:12.5px;font-weight:600;color:var(--faint);margin-bottom:10px}
.fn-build{display:flex;flex-wrap:wrap;gap:6px}
.fn-build span{padding:6px 11px;border-radius:10px;border:1px solid var(--border);font-size:13px;font-weight:600}
.fn-best{font-size:15px;color:var(--fg)}

/* 3D funnel callouts + widgets */
.fn-canvas{aspect-ratio:1.18/1}
@media (max-width:1000px){.fn-canvas{aspect-ratio:4/5}}
.fn-widgets,.fn-labels{position:absolute;inset:0;pointer-events:none}
.fn-call{position:absolute;transform:translate(8px,-50%);display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:rgba(10,22,52,.82);border:1px solid rgba(242,253,255,.12);backdrop-filter:blur(8px);max-width:220px;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .4s,box-shadow .4s}
.fn-call.on{opacity:1;transform:translate(0,-50%)}
.fn-call i{font-style:normal;font-size:10.5px;font-weight:800;color:#091636;background:var(--c1);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;flex:none}
.fn-call b{display:block;font-size:13px;letter-spacing:-.015em;line-height:1.2}
.fn-call small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.fn-call.hot{border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 18%,transparent),0 16px 40px -16px var(--c1)}
.fn-call.end{flex-direction:column;transform:translate(-50%,0);background:none;border:0;backdrop-filter:none;padding:0;max-width:none}
.fn-call.end.on{transform:translate(-50%,0)}
.fn-call.end b{font-size:14px}
@media (max-width:700px){.fn-call{max-width:150px;padding:7px 9px;gap:7px}.fn-call b{font-size:11.5px}.fn-call small{display:none}}
.fw{position:absolute;width:170px;padding:12px;border-radius:16px;background:linear-gradient(160deg,rgba(22,40,88,.92),rgba(10,22,52,.92));border:1px solid rgba(242,253,255,.13);box-shadow:0 24px 50px -24px rgba(0,0,0,.9);opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--ease);font-size:11.5px}
.fw.on{opacity:1;transform:none}
.fw-h{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.fw.spark svg{width:100%;height:auto;overflow:visible}
.fw.spark path{fill:none;stroke:url(#none);stroke:#7BBCFE;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.fw.spark.on path{animation:sparkdraw 3.2s var(--ease) infinite}
@keyframes sparkdraw{0%{stroke-dashoffset:260}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.fw-f{display:grid;gap:4px;margin-bottom:8px}.fw-f span{font-size:10px;color:var(--faint)}
.fw-f i{display:block;height:8px;border-radius:4px;background:rgba(242,253,255,.08);position:relative;overflow:hidden}
.fw-f i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#7BBCFE,#B8A9FE);animation:typew 4s steps(12) infinite}
.fw-f i.d2::after{animation-delay:.8s}
@keyframes typew{0%{width:0}40%,100%{width:var(--w)}}
.fw-btn{margin-top:8px;padding:7px 10px;border-radius:10px;background:linear-gradient(90deg,#7BBCFE,#B8A9FE);color:#091636;font-weight:800;font-size:11px;text-align:center;animation:pop 4s var(--ease) infinite}
@keyframes pop{0%,45%{opacity:.35;transform:scale(.96)}55%,100%{opacity:1;transform:none}}
.fw-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid rgba(242,253,255,.06);font-size:11px}.fw-row span{color:var(--muted)}
.fw-row .ok{color:#7ee2b8;animation:pop 4s var(--ease) infinite}.fw-row .ok.d2{animation-delay:.6s}
.fw-b{max-width:88%;padding:6px 8px;border-radius:10px;margin-bottom:5px;font-size:10.5px;animation:chat 6s var(--ease) infinite;opacity:0}
.fw-b.in{background:rgba(242,253,255,.08)}.fw-b.out{background:linear-gradient(135deg,#7EE2B8,#7BBCFE);color:#071232;margin-left:auto}
.fw-b.d2{animation-delay:1.2s}.fw-b.d3{animation-delay:2.4s}
@keyframes chat{0%{opacity:0;transform:translateY(6px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
.fw-badge{display:inline-grid;width:18px;height:18px;border-radius:50%;background:#FF9FB3;color:#091636;overflow:hidden;font-size:10px}
.fw-badge i{grid-area:1/1;display:grid;place-items:center;font-style:normal;font-weight:800;animation:cnt 4.5s steps(1) infinite;opacity:0}
.fw-badge i:nth-child(2){animation-delay:1.5s}.fw-badge i:nth-child(3){animation-delay:3s}
@keyframes cnt{0%,33%{opacity:1}34%,100%{opacity:0}}
.fw-prod{display:flex;gap:9px;align-items:center}.fw-prod .th{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#F3A6C8,#9B8CF6);flex:none}
.fw-prod b{display:block;font-size:11.5px}.fw-prod small{font-size:10px;color:var(--muted)}
.fw-lp{position:relative;height:74px;border-radius:8px;background:rgba(242,253,255,.05);padding:8px;display:grid;gap:5px;align-content:start}
.fw-lp i{height:7px;border-radius:4px;background:rgba(242,253,255,.18);width:80%}.fw-lp i.s{width:55%;background:rgba(242,253,255,.08)}
.fw-lp .cta{justify-self:start;margin-top:3px;padding:3px 8px;border-radius:6px;background:#7BBCFE;color:#091636;font-size:9.5px;font-weight:800;animation:pop 3s infinite}
.fw-lp .cur{position:absolute;width:10px;height:10px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(-20deg);animation:curmove 3s var(--ease) infinite}
@keyframes curmove{0%{left:80%;top:10%}45%{left:22%;top:66%}55%{left:22%;top:66%;transform:rotate(-20deg) scale(.8)}100%{left:80%;top:10%}}
.livepill{padding:2px 6px;border-radius:5px;background:#FF6B8B;color:#fff;font-size:9px;animation:blink 1.2s steps(2) infinite}
.fw-vid{height:62px;border-radius:9px;background:linear-gradient(135deg,#2b3f8a,#9B8CF6);display:grid;place-items:center}
.fw-vid .pl{border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.fw-av{display:flex;align-items:center;margin-top:8px}.fw-av i{width:18px;height:18px;border-radius:50%;border:2px solid #0b1838;margin-left:-5px;background:linear-gradient(135deg,#7BBCFE,#F3A6C8);animation:pop 3s infinite}
.fw-av i:first-child{margin-left:0}.fw-av i:nth-child(2){animation-delay:.3s}.fw-av i:nth-child(3){animation-delay:.6s}.fw-av i:nth-child(4){animation-delay:.9s}
.fw-av small{margin-left:8px;font-size:10px;color:var(--muted)}
.fw-pdf{display:flex;gap:9px;align-items:center}.fw-pdf .doc{width:32px;height:40px;border-radius:5px;background:#F2FDFF;color:#091636;font-size:9px;font-weight:800;display:grid;place-items:center;flex:none}
.fw-pdf b{display:block;font-size:11px}.fw-pdf small{font-size:10px;color:var(--muted)}
.fw-bar{height:6px;border-radius:3px;background:rgba(242,253,255,.08);margin-top:10px;overflow:hidden}.fw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7BBCFE,#7EE2B8);animation:load 3.5s var(--ease) infinite}
@keyframes load{0%{width:0}70%,100%{width:100%}}
.fw-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.fw-cal i{aspect-ratio:1;border-radius:4px;background:rgba(242,253,255,.07)}
.fw-cal i.pick{background:#7EE2B8;animation:pop 3s infinite;box-shadow:0 0 12px #7EE2B8}
.fw-post{height:66px;border-radius:9px;background:linear-gradient(135deg,#C6A8F5,#F5D38A);display:grid;place-items:center;margin-bottom:6px}
.fw-post .heart{font-size:26px;color:#fff;animation:heart 2.4s var(--ease) infinite}
@keyframes heart{0%,40%{transform:scale(0);opacity:0}55%{transform:scale(1.3);opacity:1}70%,100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.fw *{animation:none!important}.fw-f i::after{width:var(--w)}.fw-b{opacity:1}}

/* live performance */
.lvbox{margin-top:clamp(28px,4vh,44px);border:1px solid var(--border2);border-radius:26px;padding:clamp(18px,2.6vw,30px);background:radial-gradient(60% 80% at 80% 0%,rgba(123,188,254,.1),transparent 60%),linear-gradient(180deg,#071232,#050d22)}
.live-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ff6b8b}
.live-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff6b8b;box-shadow:0 0 0 0 rgba(255,107,139,.6);animation:pp2 1.6s infinite}
@keyframes pp2{0%{box-shadow:0 0 0 0 rgba(255,107,139,.55)}100%{box-shadow:0 0 0 12px rgba(255,107,139,0)}}
.live-month{font-size:13px;color:var(--muted)}
.live-cur{margin-left:auto;display:inline-flex;border:1px solid var(--border2);border-radius:999px;padding:3px}
.live-cur button{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--muted)}
.live-cur button.on{background:var(--frost);color:var(--navy)}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-top:18px}
@media (max-width:860px){.live-grid{grid-template-columns:1fr}}
.lv{background:#060f28;padding:20px 22px}
.lv small{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.lv b{display:block;font-size:clamp(1.6rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;background:linear-gradient(90deg,#F2FDFF,#B8A9FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-rate{display:block;font-size:12px;color:#7ee2b8;margin-top:6px;font-weight:600}
.live-chart{position:relative;margin-top:18px;height:220px}
.live-chart svg{width:100%;height:100%;overflow:visible}
.lv-line{fill:none;stroke:#7BBCFE;stroke-width:2.4}
.lv-line2{fill:none;stroke:#B8A9FE;stroke-width:1.8;stroke-dasharray:5 5;opacity:.8}
.lv-head{fill:#F2FDFF;filter:drop-shadow(0 0 8px #7BBCFE)}
.live-leg{position:absolute;left:0;top:0;display:flex;gap:16px;font-size:12px;color:var(--muted)}
.live-leg i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.live-leg i.a{background:#7BBCFE}.live-leg i.b{background:#B8A9FE}
.live-note{font-size:11.5px;color:var(--faint);margin-top:12px}
.snaps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
@media (max-width:1100px){.snaps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.snaps{grid-template-columns:1fr}}
.snap{border:1px solid var(--border);border-radius:18px;padding:18px}
.snap small{font-size:12px;font-weight:700;color:var(--sky)}
.snap b{display:block;font-size:1.35rem;letter-spacing:-.03em;margin:6px 0 8px}
.snap ul{list-style:none;display:grid;gap:4px;font-size:13px;color:var(--muted)}
/* case studies */
.cs-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.cs-tabs button{padding:9px 15px;border-radius:999px;border:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--muted);transition:all .25s}
.cs-tabs button.on{background:var(--grad);color:var(--navy);border-color:transparent}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media (max-width:1100px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cs-grid{grid-template-columns:1fr}}
.cs{border:1px solid var(--border);border-radius:22px;padding:20px;background:linear-gradient(170deg,rgba(18,36,82,.45),rgba(5,13,34,.6));display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .5s var(--ease)}
.cs:hover{border-color:rgba(123,188,254,.45);transform:translateY(-4px)}
.cs-top{display:flex;gap:8px;align-items:center;font-size:11.5px;font-weight:700}
.cs-n{color:var(--faint)}.cs-tag{color:var(--sky)}.cs-mkt{margin-left:auto;padding:3px 9px;border-radius:999px;border:1px solid var(--border2);color:var(--fg)}
.cs h3{font-size:1.2rem;letter-spacing:-.03em;line-height:1.15}
.cs-type{font-size:13px;color:var(--muted);margin-top:-6px}
.cs-ch{display:flex;flex-wrap:wrap;gap:5px}.cs-ch i{font-style:normal;font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;background:rgba(242,253,255,.06)}
.cs-chart{position:relative;height:150px;border-radius:14px;background:rgba(5,13,34,.6);border:1px solid rgba(242,253,255,.06);overflow:hidden}
.cs-chart svg{position:absolute;inset:0;width:100%;height:100%}
.cs-chart .lbl{position:absolute;font-size:10.5px;font-weight:700;color:var(--muted)}
.cs-chart .big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.cs-chart .big b{display:block;font-size:2rem;font-weight:900;letter-spacing:-.05em;background:linear-gradient(90deg,#F2FDFF,#B8A9FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-chart .big small{font-size:11px;color:var(--muted)}
.cs-m{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cs-m div{font-size:12px}.cs-m span{display:block;color:var(--faint);font-size:10.5px;font-weight:600;margin-bottom:2px}.cs-m b{font-size:12.5px;letter-spacing:-.01em}
.cs-did{font-size:13px;color:var(--muted)}.cs-did b{color:var(--fg)}
.cs-res{font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:12px;background:linear-gradient(120deg,rgba(126,226,184,.12),rgba(123,188,254,.08));border:1px solid rgba(126,226,184,.25);margin-top:auto}

.lv-proj{fill:none;stroke:rgba(242,253,255,.22);stroke-width:1.4;stroke-dasharray:2 6}
.live-leg i.c{background:rgba(242,253,255,.3)}

/* photoshoot reels */
.vreels{display:grid;grid-template-columns:repeat(3,minmax(0,340px));gap:18px;margin-top:34px}
@media (max-width:900px){.vreels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vreels{grid-template-columns:1fr;max-width:360px}}
.vreel{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;border:1px solid var(--border2);background:#0a1530;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.vreel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.vr-sound{position:absolute;left:12px;bottom:12px;z-index:2;padding:8px 12px;border-radius:999px;background:rgba(5,13,34,.72);backdrop-filter:blur(8px);font-size:12px;font-weight:700}
.vreel.ig{background:linear-gradient(160deg,#1a2a55,#0a1530)}
.vreel.ig iframe{position:absolute;left:0;top:-54px;width:100%;height:calc(100% + 140px);border:0;z-index:1;background:transparent}
.ig-fb{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;z-index:0}
.ig-fb b{font-size:15px}.ig-fb small{font-size:12px;color:var(--muted)}
.ig-ic{width:46px;height:46px;border-radius:14px;border:3px solid #F2FDFF;position:relative;margin-bottom:6px}
.ig-ic::before{content:"";position:absolute;inset:9px;border-radius:50%;border:3px solid #F2FDFF}
.ig-link{position:absolute;right:12px;bottom:12px;z-index:2;padding:7px 11px;border-radius:999px;background:rgba(5,13,34,.78);font-size:11.5px;font-weight:700}

/* insights stories */
.stories{display:flex;gap:18px;margin-top:28px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.st{flex:none;display:grid;justify-items:center;gap:8px}
.st-ring{width:86px;height:86px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#F5D38A,#FF6B8B,#B8A9FE,#7BBCFE,#F5D38A);transition:transform .4s var(--ease)}
.st:hover .st-ring{transform:scale(1.06)}
.st-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 38%;border:3px solid var(--bg)}
.st small{font-size:12px;font-weight:700}
.st.seen .st-ring{background:rgba(242,253,255,.2)}
.sv{position:fixed;inset:0;z-index:170;background:rgba(3,8,22,.94);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
.sv.open{opacity:1;visibility:visible}
.sv-frame{position:relative;height:min(92vh,860px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#0b0f19;box-shadow:0 60px 140px -40px rgba(0,0,0,.95)}
.sv-bars{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;gap:4px}
.sv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-bars b{display:block;height:100%;width:0;background:#fff}
.sv-head{position:absolute;left:12px;right:12px;top:22px;z-index:3;display:flex;align-items:center;gap:10px}
.sv-av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:11px;font-weight:800;color:#091636}
.sv-head b{display:block;font-size:13px}.sv-head small{font-size:11px;color:rgba(255,255,255,.7)}
.sv-x{margin-left:auto;width:34px;height:34px;border-radius:50%;font-size:16px;color:#fff}
.sv-track{position:absolute;inset:0}
.sv-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .35s}
.sv-slide.on{opacity:1}
.sv-slide img{width:100%;height:100%;object-fit:contain;background:#0b0f19}
.sv-tap{position:absolute;top:70px;bottom:60px;width:40%;z-index:2}
.sv-tap.l{left:0}.sv-tap.r{right:0;width:60%}
.sv-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:14px;font-weight:700}
/* insights dashboard */
.idash{margin-top:30px;border:1px solid var(--border2);border-radius:26px;padding:clamp(18px,2.6vw,30px);background:radial-gradient(60% 80% at 15% 0%,rgba(255,107,139,.08),transparent 60%),linear-gradient(180deg,#071232,#050d22)}
.id-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.id-head small{display:block;font-size:12px;font-weight:700;color:var(--sky)}.id-head b{font-size:1.1rem;letter-spacing:-.02em}
.id-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-top:18px}
@media (max-width:1000px){.id-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.id-kpis{grid-template-columns:repeat(2,1fr)}}
.id-kpis div{background:#060f28;padding:16px 18px}
.id-kpis small{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.id-kpis b{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.04em;background:linear-gradient(90deg,#F2FDFF,#FFB3C7);-webkit-background-clip:text;background-clip:text;color:transparent}
.id-grid{display:grid;grid-template-columns:.8fr 1.3fr 1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:1100px){.id-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.id-grid{grid-template-columns:1fr}}
.id-card{border:1px solid var(--border);border-radius:18px;padding:16px;background:rgba(5,13,34,.5);position:relative;min-height:220px}
.id-card>small{font-size:12px;font-weight:700;color:var(--muted)}
.id-top{display:grid;justify-items:center;text-align:center}
.id-top svg{width:140px;height:140px;margin-top:10px;transform:rotate(-90deg)}
.id-top .trk{fill:none;stroke:rgba(242,253,255,.08);stroke-width:12}
.id-top .arc{fill:none;stroke:url(#none);stroke:#FF6B8B;stroke-width:12;stroke-linecap:round;stroke-dasharray:364.4;stroke-dashoffset:364.4;transition:stroke-dashoffset 2s var(--ease)}
.id-topv{position:absolute;top:84px;left:0;right:0;text-align:center}
.id-topv b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:-.04em}.id-topv span{font-size:11px;color:var(--muted)}
.id-sub{font-size:12px;color:var(--muted);margin-top:6px}
.id-bars{display:grid;gap:9px;margin-top:14px}
.id-bar{display:grid;grid-template-columns:52px 1fr 60px;gap:8px;align-items:center;font-size:11.5px}
.id-bar span{color:var(--muted)}.id-bar em{font-style:normal;font-weight:700;text-align:right}
.id-bar i{display:block;height:10px;border-radius:6px;background:rgba(242,253,255,.06);overflow:hidden}
.id-bar i b{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7BBCFE,#FF6B8B);transition:width 1.4s var(--ease)}
.id-donut{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin-top:16px}
.id-donut svg{width:120px;height:120px;transform:rotate(-90deg)}
.id-leg{display:grid;gap:6px;font-size:12px}.id-leg div{display:flex;align-items:center;gap:7px}.id-leg i{width:9px;height:9px;border-radius:3px}
.id-leg b{margin-left:auto;font-weight:700}
.id-watch{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:16px}
.id-watch div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;font-size:10.5px;color:var(--muted)}
.id-watch i{width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(#B8A9FE,#7BBCFE);height:0;transition:height 1.2s var(--ease)}
.id-watch b{color:var(--fg);font-size:11px}

/* live insights dashboard v2 */
.id-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px;margin-top:18px;align-items:stretch}
@media (max-width:1000px){.id-main{grid-template-columns:1fr}}
.id-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px}
.id-ring{position:relative;width:min(100%,380px);aspect-ratio:1;margin:8px auto 0}
.id-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.id-ring .trk{fill:none;stroke:rgba(242,253,255,.07);stroke-width:18}
.id-ring .arc{fill:none;stroke:url(#idg);stroke-width:18;stroke-linecap:round;filter:drop-shadow(0 0 14px rgba(255,107,139,.45))}
.id-ringv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.id-ringv b{font-size:clamp(1.5rem,2.9vw,2.4rem);font-weight:900;letter-spacing:-.04em;background:linear-gradient(90deg,#F2FDFF,#FFB3C7);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.id-ringv span{font-size:12.5px;color:var(--muted)}
.id-ringv em{font-style:normal;font-size:12px;font-weight:700;color:#7ee2b8}
.id-hero .id-sub{margin-top:8px}
.id-side{display:grid;gap:14px;align-content:start}
.id-side .id-kpis{margin-top:0;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.id-side .id-kpis{grid-template-columns:repeat(2,1fr)}}
.id-two{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
@media (max-width:700px){.id-two{grid-template-columns:1fr}}
.id-trend{width:100%;height:170px;margin-top:12px;overflow:visible}
.id-trend .ln{fill:none;stroke:#FF6B8B;stroke-width:2.6;stroke-linecap:round}
.id-trend .hd{fill:#fff;filter:drop-shadow(0 0 8px #FF6B8B)}
.id-months{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:6px}
.id-ring .arc{animation:ringglow 3s ease-in-out infinite}
@keyframes ringglow{50%{filter:drop-shadow(0 0 26px rgba(184,169,254,.7))}}

/* contact */
.ct{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:900px){.ct{grid-template-columns:1fr}}
.ct-wa{display:flex;align-items:center;gap:14px;margin-top:28px;padding:16px 18px;border-radius:20px;background:linear-gradient(120deg,rgba(126,226,184,.16),rgba(123,188,254,.1));border:1px solid rgba(126,226,184,.4);transition:transform .5s var(--ease),border-color .3s}
.ct-wa:hover{transform:translateY(-3px);border-color:#7ee2b8}
.ct-wai{width:46px;height:46px;border-radius:14px;background:#25D366;color:#fff;display:grid;place-items:center;flex:none}.ct-wai svg{width:22px;height:22px}
.ct-wa b{display:block;font-size:1.05rem}.ct-wa small{font-size:13px;color:var(--muted)}.ct-wa em{margin-left:auto;font-style:normal;font-size:20px;color:#7ee2b8}
.ct-list{list-style:none;display:grid;gap:14px;margin-top:26px;font-size:15px}
.ct-list small{display:block;font-size:12px;font-weight:600;color:var(--faint);margin-bottom:2px}
.ct-list a:hover{color:var(--sky)}
.fld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border2);color:var(--fg);font:inherit;font-size:1rem;font-weight:500;padding:8px 0 10px;border-radius:0}
.fld select option{background:#091636}