@font-face{font-family:"Cabinet Grotesk";src:url("../../assets/font/cabinetgrotesk-800.woff2") format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../../assets/font/satoshi-var.woff2") format("woff2");font-weight:300 900;font-display:swap}

@font-face{font-family:"Unbounded";src:url("../../assets/font/unbounded-300-900.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../../assets/font/intertight-normal.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{--c1:#F1EEE6;--c2:#2340D8;--c3:#FF7A2F;--paper:#F1EEE6;--paper2:#E6E1D4;--cob:#2340D8;--cob2:#1A2FA6;--org:#FF7A2F;--ink:#141B3D;
 --f-body:"Satoshi",system-ui,sans-serif;--f-d:"Cabinet Grotesk","Arial Black",sans-serif;--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.76,0,.24,1)}
body{background:var(--paper);color:var(--cob)}
.ic{width:18px;height:18px;flex:none}
.tag,.eyebrow{font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
/* header */
.sbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 16px;border-radius:999px;white-space:nowrap;
 background:color-mix(in srgb,var(--paper) 80%,transparent);border:1px solid color-mix(in srgb,var(--cob) 14%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.slogo{display:flex;align-items:center;gap:8px;font:800 15px/1 var(--f-d);text-decoration:none;letter-spacing:-.02em;margin-right:8px}
.sdot{width:12px;height:12px;border-radius:50%;background:var(--org);box-shadow:0 0 0 3px color-mix(in srgb,var(--org) 30%,transparent);animation:ping 2s infinite}
@keyframes ping{50%{box-shadow:0 0 0 7px transparent}}
.snav{display:flex}.snav a{font:600 13px/1 var(--f-body);text-decoration:none;padding:9px 12px;border-radius:999px;transition:background .3s}
.snav a:hover{background:color-mix(in srgb,var(--cob) 10%,transparent)}
.sgo{font:700 13px/1 var(--f-body);text-decoration:none;background:var(--cob);color:var(--paper);padding:10px 14px;border-radius:999px}
.pill{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px;border-radius:999px;font:700 15px/1 var(--f-body);text-decoration:none;transition:background .35s,color .35s}
.pill-solid{background:var(--cob);color:var(--paper)}.pill-solid:hover{background:var(--org);color:var(--ink)}
.pill-line{border:1.5px solid currentColor}.pill-line:hover{background:var(--cob);color:var(--paper)}
.mag{will-change:transform}
/* hero */
.hero{height:280vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden}
.hl{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);text-align:center;font:800 clamp(52px,6.2vw,104px)/.95 var(--f-d);letter-spacing:-.05em;color:var(--cob);z-index:2;white-space:nowrap;transform-origin:left top}
.hl-l{display:block;overflow:hidden;padding:0 .04em .06em}
.hl-l>span{display:inline-block}
.hl-l:nth-child(2)>span{color:var(--org);font-style:normal}
.deck{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3}
.card{position:absolute;left:0;top:0;width:var(--cw,168px);height:var(--ch,218px);margin:calc(var(--ch,218px)/-2) 0 0 calc(var(--cw,168px)/-2);border-radius:22px;overflow:hidden;
 box-shadow:0 18px 40px -18px rgba(20,27,61,.45),0 2px 0 rgba(255,255,255,.4) inset;will-change:transform;background:var(--cob)}
.card .art{position:absolute;inset:0}
.clab{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px 7px 8px;border-radius:999px;background:var(--paper);color:var(--cob);font:700 11px/1 var(--f-body);letter-spacing:.02em}
.clab .ic{width:14px;height:14px}
.c-film{background:var(--cob)}.c-film .art{background:radial-gradient(circle at 70% 30%,var(--org) 0 26%,transparent 26.5%),linear-gradient(160deg,var(--cob),var(--cob2))}
.c-film .art::after{content:"";position:absolute;left:22px;top:22px;width:46px;height:46px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5-8-5Z' fill='%232340D8'/%3E%3C/svg%3E") center/26px no-repeat}
.c-dots{background:var(--org)}.c-dots .art{background:radial-gradient(circle,var(--cob) 0 3.4px,transparent 3.8px) 0 0/16px 16px;-webkit-mask:linear-gradient(135deg,#000 30%,transparent 85%);mask:linear-gradient(135deg,#000 30%,transparent 85%)}
.c-stripe{background:var(--paper2)}.c-stripe .art{background:repeating-linear-gradient(-45deg,var(--cob) 0 10px,transparent 10px 24px);opacity:.9}
.c-grid{background:var(--cob)}.c-grid .art{background:linear-gradient(color-mix(in srgb,var(--paper) 22%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--paper) 22%,transparent) 1px,transparent 1px) 0 0/22px 22px}
.c-grid .art::after{content:"";position:absolute;left:18px;right:18px;top:26px;height:70px;border-radius:12px;background:var(--paper);box-shadow:inset 0 14px 0 var(--org)}
.c-orb{background:conic-gradient(from 200deg at 50% 60%,var(--cob),var(--org),var(--cob2),var(--cob))}.c-orb .art{background:radial-gradient(circle at 42% 38%,#fff 0,#ffd2b8 12%,var(--org) 34%,#b9471a 52%,transparent 53%) 50% 40%/120px 120px no-repeat}
.c-type{background:var(--paper)}.c-type .art b{position:absolute;left:12px;top:4px;font:800 104px/1 var(--f-d);letter-spacing:-.06em;color:var(--cob)}
.c-wave{background:var(--org)}.c-wave .art{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M0 20c10-14 20-14 30 0s20 14 30 0 20-14 30 0' fill='none' stroke='%23F1EEE6' stroke-width='3'/%3E%3C/svg%3E") 0 0/80px 26px}
.c-go{background:var(--cob2)}.c-go .art b{position:absolute;left:10px;top:14px;font:900 96px/.9 var(--f-d);letter-spacing:-.06em;color:var(--org)}
.hero-side{position:absolute;right:40px;bottom:44px;z-index:4;max-width:400px;opacity:0;transform:translateY(30px);pointer-events:none}
.hero-side.on{pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.live{width:8px;height:8px;border-radius:50%;background:var(--org)}
.lede{margin:0 0 22px;font:500 18px/1.45 var(--f-body);color:var(--ink)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:10px;font:700 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.75;z-index:4}
.scroll-cue i{width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}
/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px}
.sec-head h2,.play-head h2{margin:14px 0 0;font:800 clamp(48px,5.2vw,88px)/.95 var(--f-d);letter-spacing:-.05em}
/* bento */
.services{padding:130px 40px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,230px);gap:16px;grid-template-areas:"b b w w" "b b m d" "s t t d"}
.tile{position:relative;border-radius:30px;overflow:hidden;transform:scale(.82);opacity:0;transition:transform 1s var(--ease) calc(var(--i)*.12s),opacity .5s ease calc(var(--i)*.12s),border-radius 1s var(--ease) calc(var(--i)*.12s)}
.bento.in .tile{transform:none;opacity:1}
.tin{position:absolute;inset:0;padding:24px 26px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(16px);transition:opacity .6s ease calc(var(--i)*.12s + .5s),transform .8s var(--ease) calc(var(--i)*.12s + .5s)}
.bento.in .tin{opacity:1;transform:none}
.tile h3{margin:4px 0 6px;font:800 26px/1 var(--f-d);letter-spacing:-.04em}
.tile p{margin:0;font:500 15px/1.4 var(--f-body);max-width:34ch;opacity:.85}
.tile .tno{font:700 12px/1 var(--f-body);letter-spacing:.12em;opacity:.65;margin-bottom:4px}
.t-brand{grid-area:b;background:var(--cob);color:var(--paper)}
.t-brand h3{font-size:clamp(40px,4vw,64px)}
.sig{position:absolute;right:30px;top:30px;width:min(46%,220px);fill:none;stroke:var(--org);stroke-width:6;stroke-linecap:round}
.sig circle{fill:var(--org);stroke:none}
.sig path{stroke-dasharray:120;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease)}
.t-brand:hover .sig path{animation:sigw 1.2s var(--ease) infinite}
.t-brand:hover .sig path:nth-of-type(2){animation-delay:.18s}
@keyframes sigw{0%{stroke-dashoffset:120;opacity:.2}60%{stroke-dashoffset:0;opacity:1}}
.t-web{grid-area:w;background:var(--paper2);color:var(--cob)}
.mini{position:absolute;right:24px;top:22px;width:44%;height:72%;border-radius:14px;background:var(--paper);box-shadow:0 12px 30px -16px rgba(20,27,61,.4);overflow:hidden}
.mini>i{position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--cob) 30%,transparent)}
.mini>i:nth-child(1){left:10px}.mini>i:nth-child(2){left:21px}.mini>i:nth-child(3){left:32px}
.mb{position:absolute;left:10px;right:10px;top:26px;height:38%;border-radius:8px;background:var(--cob)}
.ml{position:absolute;left:10px;width:60%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--cob) 25%,transparent);top:calc(26px + 38% + 10px)}.ml.s{width:40%;top:calc(26px + 38% + 22px)}
.mbtn{position:absolute;right:12px;bottom:12px;width:58px;height:20px;border-radius:999px;background:var(--org);transition:transform .2s}
.mcur{position:absolute;width:18px;height:18px;left:20%;top:70%;fill:var(--ink);stroke:var(--paper);stroke-width:1.5;transition:left .9s var(--ease),top .9s var(--ease)}
.t-web:hover .mcur{left:calc(100% - 46px);top:calc(100% - 26px)}
.t-web:hover .mbtn{animation:press .3s .85s}
@keyframes press{50%{transform:scale(.88)}}
.t-motion{grid-area:m;background:var(--org);color:var(--ink)}
.easebox{position:absolute;right:20px;top:20px;width:160px;height:90px}
.ease{position:absolute;inset:0;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:.85}
.edot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px var(--ink);offset-path:path("M8 82C70 82 70 8 152 8");offset-distance:0%;offset-rotate:0deg}
.t-motion:hover .edot{animation:ride 1.2s var(--ease) infinite}
.t-3d{grid-area:d;background:var(--cob2);color:var(--paper);perspective:600px}
.cube{position:absolute;left:50%;top:34%;width:90px;height:90px;margin:-45px 0 0 -45px;transform-style:preserve-3d;animation:cube 9s linear infinite}
.t-3d:hover .cube{animation-duration:2.5s}
.cube i{position:absolute;inset:0;border-radius:12px;border:2px solid var(--paper);background:color-mix(in srgb,var(--org) 70%,transparent)}
.cube i:nth-child(1){transform:translateZ(45px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(45px)}.cube i:nth-child(3){transform:rotateY(90deg) translateZ(45px);background:color-mix(in srgb,var(--paper) 30%,transparent)}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(45px);background:color-mix(in srgb,var(--paper) 30%,transparent)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(45px);background:var(--org)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(45px)}
@keyframes cube{to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes cube0{from{transform:rotateX(-24deg) rotateY(0)}}
.t-social{grid-area:s;background:var(--paper2);color:var(--cob)}
.story{position:absolute;right:22px;top:20px;width:74px;height:120px;border-radius:14px;border:2px solid var(--cob);display:flex;gap:3px;padding:7px 6px;background:linear-gradient(170deg,transparent 55%,color-mix(in srgb,var(--org) 60%,transparent))}
.story i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--cob) 25%,transparent);position:relative;overflow:hidden}
.story i::after{content:"";position:absolute;inset:0;background:var(--cob);transform:scaleX(0);transform-origin:left}
.t-social:hover .story i::after{animation:fill 1.6s linear forwards}
.t-social:hover .story i:nth-child(2)::after{animation-delay:1.6s}.t-social:hover .story i:nth-child(3)::after{animation-delay:3.2s}
@keyframes fill{to{transform:scaleX(1)}}
.t-strat{grid-area:t;background:var(--org);color:var(--ink)}
.bars{position:absolute;right:26px;top:24px;bottom:24px;width:40%;display:flex;align-items:flex-end;gap:8px}
.bars i{flex:1;border-radius:8px 8px 3px 3px;background:var(--ink);height:calc(var(--h)*45%);transition:height .8s var(--ease)}
.t-strat:hover .bars i{height:calc(var(--h)*100%)}
.bars i:nth-child(2){transition-delay:.05s}.bars i:nth-child(3){transition-delay:.1s}.bars i:nth-child(4){transition-delay:.15s}.bars i:nth-child(5){transition-delay:.2s}.bars i:nth-child(6){transition-delay:.25s;background:var(--paper)}
@keyframes ride{to{offset-distance:100%}}
/* playground */
.play{padding:120px 40px 60px;background:var(--cob);color:var(--paper)}
.play-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:30px;margin-bottom:34px}
.play-head .tag{grid-column:1/-1}
.play-head h2{margin:0}
.play-note{margin:0;font:500 16px/1.45 var(--f-body);max-width:26ch;opacity:.85;grid-column:3}
.arena{position:relative;height:min(78vh,720px);border-radius:34px;background:color-mix(in srgb,var(--paper) 7%,transparent);border:1px solid color-mix(in srgb,var(--paper) 18%,transparent);overflow:hidden;touch-action:pan-y}
.idea{position:absolute;left:50%;top:60%;width:340px;height:200px;margin:-100px 0 0 -170px;border-radius:28px;border:0;background:var(--paper);color:var(--cob);display:grid;align-content:center;justify-items:center;gap:8px;z-index:1;
 box-shadow:0 30px 60px -30px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.idea:active{transform:scale(.97)}
.idea-k{font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.idea b{font:800 30px/1.02 var(--f-d);letter-spacing:-.04em;text-align:center}
.idea small{font:600 13px/1 var(--f-body);color:var(--org)}
.pills{position:absolute;inset:0;z-index:2;pointer-events:none}
.ppill{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:58px;padding:0 26px;border-radius:999px;background:var(--org);color:var(--ink);font:800 19px/1 var(--f-d);letter-spacing:-.03em;white-space:nowrap;
 user-select:none;-webkit-user-select:none;will-change:transform;visibility:hidden;pointer-events:auto;cursor:grab;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.ppill.alt{background:var(--paper);color:var(--cob)}
.ppill.hot{background:var(--ink);color:var(--paper)}
.ppill.on{visibility:visible}
.pills.static{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:24px}
.pills.static .ppill{position:static;visibility:visible;transform:none!important}
/* process */
.process{padding:130px 40px 120px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{position:relative;padding:30px 26px;border-radius:28px;background:var(--paper2);min-height:290px;display:flex;flex-direction:column}
.steps b{font:800 64px/1 var(--f-d);letter-spacing:-.06em;color:var(--cob)}
.steps .sic{position:absolute;right:22px;top:26px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--cob);color:var(--paper)}
.steps .sic .ic{width:22px;height:22px}
.steps h3{margin:auto 0 8px;font:800 26px/1 var(--f-d);letter-spacing:-.04em}
.steps p{margin:0;font:500 15px/1.45 var(--f-body);color:var(--ink);opacity:.85}
.steps li:nth-child(4){background:var(--org)}.steps li:nth-child(4) .sic{background:var(--ink)}
.pline{height:3px;margin-top:26px;border-radius:3px;background:color-mix(in srgb,var(--cob) 14%,transparent);overflow:hidden}
.pline i{display:block;height:100%;background:var(--cob);transform-origin:left;transform:scaleX(var(--p,0))}
/* end + giant wordmark */
.end{padding:110px 40px 0;overflow:hidden;background:var(--paper)}
.end-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.end h2{margin:0;font:800 clamp(48px,5.6vw,96px)/.95 var(--f-d);letter-spacing:-.05em}
.giant{margin:40px 0 0;display:flex;justify-content:space-between;font:900 min(17.6vw,380px)/.8 var(--f-d);letter-spacing:-.06em;color:var(--cob);overflow:hidden;padding-top:.04em}
.giant span{display:inline-block;transform:translateY(var(--y,100%));will-change:transform}
.giant span:nth-child(odd){color:var(--cob)}.giant span:nth-child(3),.giant span:nth-child(6){color:var(--org)}
/* cursor + toast */
.cursor{position:fixed;left:0;top:0;z-index:95;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--org);pointer-events:none;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease);display:grid;place-items:center}
.cursor span{font:800 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px}.cursor.big span{opacity:1}
@media (hover:none){.cursor{display:none}}
.toast{position:fixed;left:50%;bottom:24px;z-index:99;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--cob);color:var(--paper);padding:14px 20px;border-radius:999px;font:600 14px/1.3 var(--f-body);transition:transform .5s var(--ease),visibility 0s .5s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.hero{height:auto}.hero-pin{position:relative}.hero-side{opacity:1;transform:none;pointer-events:auto}.tile,.tin{opacity:1;transform:none}.giant span{transform:none}.cube{animation:none;transform:rotateX(-24deg) rotateY(35deg)}}

/* ---- 3D upgrade (Oct 27): the "One" speaker replaces the CSS cube; baked stills for the 3D-loop card ---- */
.t-3d .spk{position:absolute;inset:0;pointer-events:none}
.t-3d .spk-gl{position:absolute;inset:0;width:100%;height:100%}
.t-3d .spk-still{position:absolute;left:0;top:0;width:100%;height:66%;object-fit:contain;object-position:50% 60%}
.t-3d .spk-still{transition:opacity .8s var(--ease)}
.t-3d .spk-gl{opacity:0;transition:opacity .6s ease}
.t-3d .spk.is-on .spk-gl{opacity:1}
.t-3d .spk.is-on .spk-still{opacity:0}
.t-3d .s-loud,.loud .t-3d .s-calm{opacity:0}
.loud .t-3d .s-loud{opacity:1}
.loud .t-3d .spk.is-on .spk-still{opacity:0}
.t-3d .spk-wave{display:none}
.c-orb{background:radial-gradient(120% 85% at 50% 34%,color-mix(in srgb,var(--cob) 82%,#fff) 0%,var(--cob) 42%,var(--cob2) 100%)}
.c-orb .art{background:url(../../assets/lab/signal/one-card-calm.webp) 50% 34%/auto 84% no-repeat}
.loud .c-orb{background:radial-gradient(120% 85% at 50% 34%,#fff 0%,var(--cob) 45%,var(--cob2) 100%)}
.loud .c-orb .art{background-image:url(../../assets/lab/signal/one-card-loud.webp)}
.t-3d .spk-still{-webkit-mask-image:linear-gradient(#000 72%,transparent 99%);mask-image:linear-gradient(#000 72%,transparent 99%)}

/* design pass apply (7994e000, Oct 27) */
/* Unbounded -> Cabinet Grotesk 800/900 (Unbounded face kept: the speaker badge canvas draws with it), Inter Tight -> Satoshi. */
.hl,.sec-head h2,.play-head h2,.end h2{letter-spacing:-.04em}
.giant{letter-spacing:-.045em}
/* rectangular CTA, 3px radius, solid cobalt with an orange sweep */
.pill{border-radius:3px;position:relative;overflow:hidden;isolation:isolate;letter-spacing:.01em}
.pill-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--org);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pill-solid:hover{background:var(--cob)}
.pill-solid:hover::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.pill-solid::before{transition:none}}

/* glass body (helper) */
.sbar.lg-rim{position:absolute}
.pill-line.lg{border-radius:3px}
.sbar.lg{--lg-alpha:80%}
.mode.lg{--lg-alpha:74%}
.mode-th{background-image:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.05) 52%,rgba(255,255,255,0))!important}
.pill-line.lg:hover{color:var(--cob)}