/* Rubberduc one-page site. Tokens, type and layout follow the "Rubberduc One-Page Site" Figma file. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --yellow:#ffd23f; --cyan:#00ccff; --ink:#0b1020; --night:#050812; --navy:#101a33; --navy2:#1c2742;
  --cream:#f7f5ef; --ice:#8be8ff; --mist:#b8c0d6; --slate:#8a94ad; --grey:#4a5470; --teal:#007399;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --wrap:1200px; --pad:clamp(20px,8.33vw,120px);
  --nav-h:88px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:none}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;z-index:100;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:999px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sec--cream :focus-visible,.heroB :focus-visible{outline-color:var(--ink)}

/* ----- variant switches (set on <html> by js/boot.js) ----- */
html[data-mode="prelaunch"] [data-only="full"],
html[data-mode="full"] [data-only="prelaunch"]{display:none!important}
html[data-hero="a"] [data-hero-show="b"],
html[data-hero="b"] [data-hero-show="a"]{display:none!important}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}

/* ----- type ----- */
.eyebrow{font:700 13px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.eyebrow--cyan{color:var(--cyan)} .eyebrow--teal{color:var(--teal)} .eyebrow--ink{color:var(--ink)}
.h2{font:800 clamp(34px,5.6vw,56px)/1.04 var(--display);letter-spacing:-.015em;color:var(--ink);margin-top:24px;max-width:1200px}
.h2 em{font-style:normal;color:var(--teal)}

/* ----- buttons ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font:600 15px/1.2 var(--body);text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s;position:relative;overflow:hidden;cursor:pointer}
.btn--lg{padding:18px 28px;font-size:17px}
.btn--xl{padding:22px 36px;font-size:20px}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,210,63,.35)}
.btn--ghost{border-color:rgba(247,245,239,.4);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream);transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:var(--yellow)}
.btn--ink:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,16,32,.35)}
.btn--nav{border-color:var(--cyan);color:var(--cyan)}
.btn--nav:hover{background:var(--cyan);color:var(--ink)}
html[data-hero="b"] .nav:not(.is-solid) .nav__brand img{filter:drop-shadow(1.5px 0 0 #0b1020) drop-shadow(-1.5px 0 0 #0b1020) drop-shadow(0 1.5px 0 #0b1020) drop-shadow(0 -1.5px 0 #0b1020)}
html[data-hero="b"] .nav:not(.is-solid) .btn--nav{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* ----- nav ----- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;gap:32px;padding:0 clamp(20px,3.3vw,48px);transition:background .3s,backdrop-filter .3s,box-shadow .3s;color:var(--cream)}
.nav.is-solid{background:rgba(5,8,18,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-hero="b"] .nav:not(.is-solid){color:var(--ink)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 26px/1 var(--display);letter-spacing:-.01em;margin-right:auto}
.nav__links{display:flex;gap:36px}
.nav__links a{font:500 15px/1 var(--body);text-decoration:none;opacity:.85;position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav__links a:hover{opacity:1} .nav__links a:hover::after{transform:scaleX(1)}
.nav__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(247,245,239,.12)}
html[data-hero="b"] .nav:not(.is-solid) .nav__progress{background:rgba(11,16,32,.12)}
.nav__progress-bar{height:2px;width:0;background:var(--cyan)}
html[data-hero="b"] .nav:not(.is-solid) .nav__progress-bar{background:var(--ink)}
.nav__progress-duck{position:absolute;bottom:2px;left:0;width:18px;height:17px;transform:translateX(-9px)}
@media (max-width:860px){.nav__links{display:none}.nav{gap:12px}.nav__brand{font-size:22px}.nav__brand img{width:32px;height:auto}}
@media (max-width:420px){.btn--nav{padding:10px 14px;font-size:13px}.nav__brand{font-size:20px}}

/* ----- sections ----- */
.sec{padding:clamp(72px,8.33vw,120px) 0;position:relative}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--tight{padding-top:0}
.sec--night{background:var(--night)}
.sec--cyan{background:var(--cyan);color:var(--ink);overflow:hidden}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms)}
.reveal.in{opacity:1;transform:none}
.js-off .reveal{opacity:1;transform:none}

/* ================= HERO A ================= */
.hero{position:relative;overflow:hidden}
.heroA{min-height:max(100svh,760px);background:radial-gradient(ellipse 70% 55% at 50% 22%,#0c1c3d 0%,rgba(5,8,18,0) 70%),var(--night);padding-top:130px;display:flex;flex-direction:column;align-items:center}
.heroA__stage{position:relative;width:100%;height:270px;flex:none}
.halos{position:absolute;left:50%;top:133px;width:0;height:0}
.halos i,.mystery__halos i{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);border-radius:50%;border:1.5px solid rgba(0,204,255,var(--o));animation:halo 6s ease-in-out infinite}
.halos i:nth-child(2n){animation-delay:-2s} .halos i:nth-child(3n){animation-delay:-4s}
@keyframes halo{50%{transform:scale(1.025)}}
.bubbles i{position:absolute;width:var(--d);height:var(--d);border-radius:50%;border:1.5px solid rgba(0,204,255,.4);animation:bubble var(--t) ease-in-out infinite}
@keyframes bubble{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-22px);opacity:.9}}
.heroA__glow{position:absolute;left:50%;top:140px;width:360px;height:360px;margin:-180px 0 0 -180px;background:radial-gradient(circle,rgba(255,210,63,.16),rgba(255,210,63,0) 65%);will-change:transform}
.duck-rig{position:absolute;left:50%;top:0;width:0;height:0;will-change:transform}
.duck{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.duck img{width:100%;height:auto;pointer-events:none;user-select:none}
.duck--hero{position:absolute;left:-140px;top:0;width:280px;height:auto;transform-origin:50% 85%;will-change:transform}
.duck--hero.squeak{animation:squeak .5s ease-out}
@keyframes squeak{0%{scale:1 1}25%{scale:1.14 .84}55%{scale:.92 1.1}100%{scale:1 1}}
.ripples{position:absolute;left:0;top:232px;width:0;height:0}
.ripple{position:absolute;opacity:0;transform-origin:50% 50%;animation:ripple 4s ease-out infinite}
.ripple--a{left:-200px;top:-23px;width:400px;height:46px}
.ripple--b{left:-270px;top:-33px;width:540px;height:66px;animation-delay:2s}
@keyframes ripple{0%{opacity:0;transform:scale(.55)}25%{opacity:.9}100%{opacity:0;transform:scale(1.15)}}
.water{position:absolute;left:0;right:0;top:calc(100% - 16px);height:90px;background:linear-gradient(180deg,rgba(0,204,255,.18),rgba(0,204,255,0));pointer-events:none}
.waterline{position:absolute;left:0;top:calc(100% - 24px);width:100%;height:14px;animation:wave 6s linear infinite;pointer-events:none;object-fit:cover}
@keyframes wave{to{transform:translateX(-90px)}}
.waterline{width:calc(100% + 90px)}
.heroA__copy{position:relative;text-align:center;padding:96px var(--pad) 0;max-width:1320px}
.heroA__h1{font:800 clamp(44px,7.4vw,80px)/.98 var(--display);letter-spacing:-.02em;margin-top:28px;color:var(--cream)}
.heroA__h1 .line{display:block}
.heroA__h1 .line--y{color:var(--yellow)}
.tagline{font:italic 400 clamp(22px,2.7vw,30px)/1.2 var(--serif);color:var(--ice);margin-top:28px}
.lede{font:400 clamp(16px,1.5vw,19px)/1.4 var(--body);color:var(--mist);margin-top:14px}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.scrollcue{position:absolute;left:clamp(20px,3.3vw,48px);bottom:26px;font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--slate)}
.heroA__copy{padding-bottom:110px}
@media (max-width:700px){.heroA{padding-top:104px}.heroA__stage{height:236px}.duck--hero{width:220px;left:-110px}.heroA__copy{padding-top:70px}.scrollcue{display:none}.eyebrow{letter-spacing:.1em}.ripples{top:196px}.halos{top:112px}.heroA__glow{top:112px}
  .ripple--a{left:-150px;width:300px;height:35px;top:-17px}.ripple--b{left:-200px;width:400px;height:49px;top:-25px}}

/* ================= HERO B ================= */
.heroB{background:var(--yellow);color:var(--ink);min-height:max(100svh,700px);padding:calc(var(--nav-h) + 16px) 0 190px}
.heroB__grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:start;padding:0 clamp(20px,5.5vw,80px);max-width:1600px;margin:0 auto}
.heroB__word{--fs:min(15.6vw,250px);position:relative;font:800 var(--fs)/1 var(--display);color:var(--ink);padding-top:.04em}
.heroB__row{position:relative;white-space:nowrap;display:flex;align-items:flex-start}
.heroB__row b{display:inline-block;font-weight:800;transform:translateY(var(--dy,0)) rotate(var(--r,0));margin-right:-.075em;animation:letterIn .9s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--n,0)*70ms)}
.heroB__row--1 b:nth-of-type(1){--n:0}.heroB__row--1 b:nth-of-type(2){--n:1}.heroB__row--1 b:nth-of-type(3){--n:2}.heroB__row--1 b:nth-of-type(4){--n:3}.heroB__row--1 b:nth-of-type(5){--n:4}.heroB__row--1 b:nth-of-type(6){--n:5}
.heroB__row--2 b:nth-of-type(1){--n:6}.heroB__row--2 b:nth-of-type(2){--n:7}.heroB__row--2 b:nth-of-type(3){--n:8}
@keyframes letterIn{from{opacity:0;transform:translateY(-.5em) rotate(calc(var(--r,0)*-4)) scale(.8)}}
.heroB__row .ghost{position:absolute;left:.04em;top:.06em;color:transparent;-webkit-text-stroke:max(2px,.012em) rgba(0,115,153,.75);pointer-events:none;letter-spacing:-.07em}
.heroB__row--2{margin-top:-.26em;margin-left:.07em}
.heroB__row--2 .shoved{margin-left:.02em;transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.duck--b{position:absolute;left:1.62em;top:.22em;width:1.28em;transform:rotate(6deg) scaleX(-1);animation:duckSlide 1.3s cubic-bezier(.2,.9,.3,1) .9s both;pointer-events:auto}
.duck--b.squeak{animation:squeakB .5s ease-out}
@keyframes duckSlide{from{opacity:0;transform:translateX(60vw) rotate(6deg) scaleX(-1)}}
@keyframes squeakB{25%{scale:1.1 .88}55%{scale:.94 1.06}}
.heroB__word .speed{position:absolute;left:2.9em;top:.55em;width:.32em;height:auto;opacity:0;animation:speed 2.8s ease-out 1.4s infinite}
@keyframes speed{0%{opacity:0;transform:translateX(30px)}20%{opacity:1}100%{opacity:0;transform:translateX(-8px)}}
.heroB__side{padding-top:clamp(30px,6vw,86px)}
.heroB__tag{font:italic 400 clamp(26px,2.5vw,36px)/1.1 var(--serif)}
.heroB__lede{font:400 18px/1.5 var(--body);color:rgba(11,16,32,.8);margin:clamp(24px,4vw,56px) 0 28px}
.heroB__link{display:block;margin-top:22px;margin-left:4px;font:600 16px/1 var(--body);text-decoration:none}
.heroB__link:hover{text-decoration:underline;text-underline-offset:5px}
.marquee{position:absolute;left:-4%;width:108%;overflow:hidden;white-space:nowrap}
.marquee--cyan{bottom:30px;height:64px;background:var(--cyan);color:var(--ink);transform:rotate(2.5deg);padding-top:18px}
.marquee--ink{bottom:68px;height:68px;background:var(--ink);color:var(--yellow);transform:rotate(-1.5deg);padding-top:20px;z-index:1}
.marquee__track{display:inline-block;font:700 22px/1.2 var(--mono);letter-spacing:.06em;will-change:transform}
@media (max-width:900px){
  .heroB{padding-bottom:170px}
  .heroB__grid{grid-template-columns:1fr}
  .heroB__word{--fs:22vw;padding-bottom:.45em}
  .heroB__side{padding-top:20px;max-width:520px}
  .marquee__track{font-size:16px}.marquee--cyan{height:48px;padding-top:12px}.marquee--ink{height:50px;padding-top:14px;bottom:56px}
}

/* ================= 01 WHAT WE DO ================= */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(40px,6vw,88px)}
.card{border-radius:28px;padding:8px 28px 34px;min-height:470px;position:relative;overflow:hidden;transition:box-shadow .3s;transform-style:preserve-3d}
.card--apps{background:#fff;border:2px solid rgba(11,16,32,.9)}
.card--web{background:var(--cyan)}
.card--more{background:var(--ink);color:var(--cream);border:1.5px solid rgba(0,204,255,.4)}
.card h3{font:700 32px/1.2 var(--display);margin-top:14px}
.problem{font:700 11px/1 var(--mono);letter-spacing:.14em;margin-top:18px}
.card--apps .problem,.card--web .problem{color:var(--teal)} .card--web .problem{color:rgba(11,16,32,.7)}
.card--more .problem{color:var(--cyan)}
.card .lead{font:600 18px/1.35 var(--body);margin-top:10px}
.card .body{font:400 15px/1.5 var(--body);margin-top:14px;color:var(--grey)}
.card--web .body{color:rgba(11,16,32,.8)} .card--more .body{color:rgba(247,245,239,.78)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips li{border:1.5px solid rgba(11,16,32,.35);border-radius:999px;padding:7px 14px;font:600 13px/1.2 var(--body)}
.card--more .chips li{border-color:rgba(247,245,239,.35)}
.ill{position:relative;height:190px;margin:0 -28px}
.ill__duck{position:absolute;height:auto}
/* apps */
.phone{position:absolute;right:56px;top:22px;width:92px;height:156px;border-radius:18px;background:var(--ink);padding:8px}
.phone__screen{width:100%;height:100%;border-radius:12px;background:var(--navy2);overflow:hidden;display:grid;place-items:center}
.phone__go{width:52px;height:52px;border-radius:26px;background:var(--cyan);color:var(--ink);font:700 10px/1 var(--mono);display:grid;place-items:center;letter-spacing:.06em;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(0,204,255,.18)}}
.phone__splash{width:100%;height:100%;object-fit:cover}
.ill__duck--typing{left:68px;top:48px;width:150px;animation:typing 1.2s ease-in-out infinite}
@keyframes typing{50%{transform:translateY(-3px) rotate(-1.5deg)}}
/* web */
.browser{position:absolute;left:150px;top:46px;width:200px;height:124px;border-radius:14px;background:#fff;border:2px solid var(--ink);overflow:hidden}
.browser__bar{height:26px;background:var(--ink)}
.browser i{position:absolute;left:14px;border-radius:5px;background:rgba(11,16,32,.15);height:8px}
.browser .b1{top:42px;width:120px;height:10px;background:var(--cyan)}
.browser .b2{top:62px;width:168px}.browser .b3{top:78px;width:140px}
.browser .b4{top:94px;width:90px;height:18px;border-radius:9px;background:var(--ink)}
.surfwave{position:absolute;left:120px;top:170px;width:260px;height:15px;background:url(../assets/fx/surf-wave.svg) 0 0/260px 15px repeat-x;animation:surf 3s linear infinite}
@keyframes surf{to{background-position-x:-52px}}
.ill__duck--surf{left:36px;top:34px;width:130px;animation:surfduck 3.2s ease-in-out infinite}
@keyframes surfduck{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(60px,-6px) rotate(3deg)}}
/* more */
.ill--more .juggle-arc{position:absolute;left:112px;top:20px;width:160px;height:40px;opacity:.7}
.ill__duck--juggle{left:118px;top:76px;width:130px}
.ball{position:absolute;width:26px;height:26px;border-radius:50%;left:174px;top:30px;animation:juggle 1.8s ease-in-out infinite}
.ball--y{background:var(--yellow);--x:-62px}.ball--c{background:var(--cyan);animation-delay:-.6s;--x:0px}.ball--o{background:#ff7a1a;animation-delay:-1.2s;--x:62px}
@keyframes juggle{0%{transform:translate(var(--x),38px)}50%{transform:translate(calc(var(--x)*-1),-8px)}100%{transform:translate(var(--x),38px)}}
@media (max-width:1020px){.cards3{grid-template-columns:1fr;max-width:560px}}
@media (max-width:420px){.ill{transform:scale(.9);transform-origin:left top;margin-bottom:-14px}.ill__duck--typing{left:26px}.phone{right:34px}}

/* ================= 02 BUILT & HATCHING ================= */
.grok{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;background:var(--ink);color:var(--cream);border:2px solid var(--yellow);border-radius:28px;padding:38px;margin-top:48px;box-shadow:0 12px 40px rgba(255,209,64,.35)}
.grok__tile{width:112px;height:112px;border-radius:25px;background:#fff;display:grid;place-items:center}
.grok__label{font:700 12px/1 var(--mono);letter-spacing:.12em;color:var(--cyan)}
.grok__name{font:800 clamp(36px,4.4vw,52px)/1.1 var(--display);letter-spacing:-.01em;margin-top:6px}
.grok__teaser{font:400 18px/1.5 var(--body);color:rgba(247,245,239,.85);max-width:560px;margin-top:14px}
.grok__small{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--ice);margin-top:14px}
.badge{display:inline-block;font:700 12px/1 var(--mono);letter-spacing:.08em;border-radius:999px;padding:7px 14px}
.badge--live{background:var(--yellow);color:var(--ink);position:absolute;top:38px;right:38px}
.badge--yellow{background:var(--yellow);color:var(--ink);font-family:var(--body);font-weight:600;padding:6px 14px}
.badge--outline{border:1.5px solid rgba(11,16,32,.5);font-size:11px;padding:6px 12px;color:var(--ink)}
.grok__cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:end}
.grok__store{font:500 12px/1 var(--mono);color:var(--slate);text-decoration:none}
.grok__store:hover{color:var(--ice)}
.subhead{font:700 13px/1 var(--mono);letter-spacing:.16em;color:var(--grey);margin-top:42px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:22px}
.work{position:relative;background:#fff;border:2px solid rgba(11,16,32,.9);border-radius:24px;padding:24px;min-height:278px;display:flex;flex-direction:column;transition:box-shadow .3s}
.work:hover,.work:focus-visible{box-shadow:0 14px 30px rgba(11,16,32,.14)}
.work__icon{width:72px;height:72px;border-radius:16px}
.work .badge{position:absolute;top:24px;right:20px}
.work__label{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--teal);margin-top:24px}
.work h3{font:800 24px/1.1 var(--display);margin-top:8px}
.work p:last-child{font:400 15px/1.45 var(--body);color:var(--grey);margin-top:12px}
.peek{position:absolute;right:26px;top:0;width:84px;height:34px;overflow:hidden;transform:translateY(0);pointer-events:none;opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s}
.peek img{width:84px;height:64px;margin-top:2px}
.work:hover .peek,.work:focus-visible .peek{opacity:1;transform:translateY(-32px)}
.alsoworks{margin-top:34px;font:400 17px/1.4 var(--body);color:var(--grey)}
.alsoworks strong{color:var(--ink)} .alsoworks a{color:var(--teal);font-weight:600}
@media (max-width:1100px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grok{grid-template-columns:1fr;padding:28px 24px;gap:22px}.badge--live{position:static;justify-self:start;order:-1}.grok__tile{width:88px;height:88px}.grok__tile img{width:70px;height:70px}.cards4{grid-template-columns:1fr}.work{min-height:0}}

/* ================= 03 TEASER (pre-launch) ================= */
.teaser{padding:clamp(72px,8.33vw,120px) 0;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(0,204,255,.1),rgba(5,8,18,0) 70%),var(--night)}
.teaser__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.teaser__h{font:800 clamp(56px,8.2vw,112px)/.92 var(--display);letter-spacing:-.02em;margin-top:28px}
.teaser__h span{display:block;color:var(--yellow)}
.teaser__tag{font:italic 400 clamp(24px,2.4vw,32px)/1.15 var(--serif);color:var(--ice);margin-top:30px}
.teaser__p{font:400 19px/1.5 var(--body);color:rgba(247,245,239,.8);max-width:600px;margin-top:22px}
.status{margin:26px 0 34px}
.status li{font:700 14px/1 var(--mono);letter-spacing:.1em;padding:8px 0;white-space:pre-wrap}
.status .ok{color:var(--cyan)} .status .soon{color:var(--yellow)}
.teaser__fine{font:400 14px/1 var(--body);color:var(--slate);margin-top:18px}
.mystery{position:relative;background:var(--navy);border:1.5px solid rgba(0,204,255,.35);border-radius:32px;aspect-ratio:520/580;overflow:hidden;width:100%;max-width:520px;justify-self:end}
.mystery__halos{position:absolute;left:50%;top:40%;width:0;height:0}
.mystery__classified{position:absolute;left:26px;top:28px;font:700 12px/1 var(--mono);letter-spacing:.2em;color:var(--slate)}
.mystery__badge{position:absolute;right:26px;top:26px}
.mystery__q{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:12%;font:800 clamp(180px,22vw,300px)/1 var(--display);color:var(--yellow);animation:qbob 4s ease-in-out infinite}
@keyframes qbob{50%{transform:translateY(-8px) rotate(2deg)}}
.mystery__lines{position:absolute;left:26px;bottom:64px;width:70%}
.mystery__lines i{display:block;height:14px;border-radius:7px;background:rgba(138,148,173,.25);margin-top:14px}
.mystery__duck{position:absolute;right:-2%;bottom:-6%;width:40%;height:auto;transform:scaleX(-1);transform-origin:50% 100%;animation:guard 3.6s ease-in-out infinite}
@keyframes guard{50%{transform:scaleX(-1) translateY(-6px) rotate(2deg)}}
@media (max-width:900px){.teaser__grid{grid-template-columns:1fr}.mystery{justify-self:center}}

/* ================= 03 FULL: JACK IN STORY ================= */
.story{background:linear-gradient(180deg,#0b1020,#070b18 60%,#0b1020);padding-bottom:clamp(80px,9vw,140px)}
.story__head{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:40px;align-items:end}
.story__h{font:800 clamp(52px,8.9vw,128px)/.92 var(--display);letter-spacing:-.03em;margin-top:30px}
.story__h .y{color:var(--yellow)} .story__h .nb{display:block}
.story__serif{font:italic 400 34px/1.1 var(--serif);color:var(--ice)}
.story__intro p:last-child{font:400 17px/1.5 var(--body);color:var(--mist);margin-top:14px}
.story__beats{position:relative;margin-top:clamp(60px,8vw,120px);padding-left:0}
.story__rail{position:absolute;left:-50px;top:0;bottom:0;width:2px;background:rgba(0,204,255,.18);border-radius:1px}
.story__rail i{display:block;width:100%;height:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.beat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;margin-bottom:clamp(70px,9vw,140px)}
.beat--visual-left .beat__visual{order:-1}
.beat--wide,.beat--payoff{display:block}
.beat__text h3{font:700 clamp(30px,3.6vw,44px)/1.08 var(--display);margin-top:14px;max-width:520px}
.beat__text p:not(.eyebrow){font:400 18px/1.6 var(--body);color:var(--mist);margin-top:20px;max-width:520px}
.beat__text .mono-y{font:500 22px/1.3 var(--mono);color:var(--yellow)}
.vis{position:relative;background:var(--navy);border:1px solid rgba(0,204,255,.18);border-radius:24px;aspect-ratio:560/380;overflow:hidden}
/* beat 1 */
.seat{position:absolute;left:10.7%;top:13%;width:53.6%;height:50%;border-radius:14px;background:#000;border:2px solid var(--navy2);overflow:hidden}
.seat span{position:absolute;left:4%;top:5%;font:700 10px/1 var(--mono);letter-spacing:.18em;color:var(--slate)}
.seat .wave{position:absolute;left:6%;top:22%;width:88%;height:63%;animation:yell .35s steps(2) infinite}
.vis--problem.in .seat{animation:shake .45s linear 2}
@keyframes yell{50%{transform:translateX(2px) scaleY(.92)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.jack35{border-radius:50%;outline:2px solid var(--cyan);position:absolute;left:30%;top:72%;width:6.5%;height:auto}
.jack35__l{position:absolute;left:32.5%;top:78%;font:500 11px/1 var(--mono);color:var(--slate);transform:translateX(30%)}
.pod{position:absolute;top:25%;width:7.2%;height:17%;border-radius:12px 12px 14px 14px;background:var(--cream)}
.pod--l{left:71%}.pod--r{left:81.5%}
.chip{display:inline-block;border:1.5px solid rgba(247,245,239,.35);border-radius:999px;padding:7px 14px;font:600 12px/1.2 var(--body);color:var(--cream)}
.chip--air{position:absolute;left:62%;top:50%;border-color:#ff5a5a;color:#ff9a9a;white-space:nowrap;font-size:clamp(9px,1.5vw,13px);padding:6px 12px}
.fail{position:absolute;left:76%;top:63%;width:7%;height:auto;opacity:0;transform:scale(.4);transition:.5s .6s}
.vis--problem.in .fail{opacity:1;transform:none}
/* beat 2 */
.vis--myth .horizon{position:absolute;inset:0;width:100%;height:100%}
.plug{position:absolute;left:39%;top:39%;width:21.5%;height:auto;transform:translateX(-90px);opacity:0;transition:transform 1s cubic-bezier(.2,1,.3,1) .2s,opacity .5s .2s}
.vis--myth.in .plug{transform:none;opacity:1}
.jackin-txt{position:absolute;left:0;right:0;top:60%;text-align:center;font:500 18px/1 var(--mono);color:var(--cyan)}
.jackin-txt::after{content:"";display:inline-block;width:.6em;height:1.1em;background:var(--cyan);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* beat 3 */
.vis--duck{background:var(--navy)}
.vis--duck::before{content:"";position:absolute;left:50%;top:50%;width:75%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,204,255,.18),rgba(0,204,255,0) 68%)}
.b3duck{position:absolute;left:28%;top:40%;width:44%;height:auto;transform:translateX(-80px);opacity:0;transition:transform .9s cubic-bezier(.2,1,.3,1),opacity .4s}
.b3hat{position:absolute;left:39.4%;top:23.5%;width:28%;height:auto;transform:translateY(-120px) rotate(-12deg);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) .9s,opacity .3s .9s}
.b3phones{position:absolute;left:43.9%;top:31%;width:19%;height:auto;transform:translateX(-90px) scale(.6);opacity:0;transition:transform .6s cubic-bezier(.3,1.6,.5,1) 1.7s,opacity .3s 1.5s}
.vis--duck.in .b3duck{transform:none;opacity:1}
.vis--duck.in .b3hat{transform:none;opacity:1}
.vis--duck.in .b3phones{transform:none;opacity:1}
/* beat 4 */
.fix{margin-top:44px;position:relative;background:rgba(16,26,51,.6);border:1px solid rgba(0,204,255,.18);border-radius:24px;padding:48px 24px 36px}
.fix__line{position:absolute;left:0;top:67px;width:100%;height:12px}
.fix__line path{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s ease .3s;vector-effect:non-scaling-stroke}
.fix.in .fix__line path{stroke-dashoffset:0}
.fix__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.fix__steps li{display:flex;flex-direction:column;align-items:center;gap:4px}
.fix__steps b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--navy);border:2px solid var(--cyan);font:800 24px/1 var(--display);color:var(--yellow);margin-bottom:20px}
.fix__steps strong{font:700 20px/1.2 var(--display)}
.fix__steps span{font:400 14px/1.3 var(--body);color:var(--slate)}
.fix__chips{display:flex;justify-content:center;gap:8px;margin-top:34px;flex-wrap:wrap}
.fix__chips li{border:1.5px solid rgba(0,204,255,.5);color:var(--cyan);border-radius:999px;padding:7px 14px;font:700 12px/1.2 var(--mono)}
@media (max-width:760px){.fix__steps{grid-template-columns:1fr 1fr;row-gap:28px}.fix__line{display:none}}
/* beat 5 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.stat{background:var(--navy);border:1px solid rgba(0,204,255,.18);border-radius:24px;padding:28px 24px}
.stat b{font:800 clamp(34px,4vw,48px)/1.1 var(--display);color:var(--yellow);display:block}
.stat p{font:400 17px/1.4 var(--body);color:var(--cream);margin-top:14px}
.stat .stat__sub{color:var(--mist);font-size:15px;margin-top:10px}
/* beat 6 */
.beat--payoff{text-align:center}
.payoff__icon{position:relative;width:min(300px,70vw);aspect-ratio:1;margin:30px auto 10px;display:grid;place-items:center}
.payoff__icon i{position:absolute;border-radius:50%;border:1.5px solid rgba(0,204,255,.4);inset:0;animation:halo 5s ease-in-out infinite}
.payoff__icon i+i{inset:12%;border-color:rgba(0,204,255,.25);animation-delay:-2s}
.payoff__icon img{position:relative;width:76%;height:auto;border-radius:22%;box-shadow:0 0 41px rgba(0,204,255,.35)}
.payoff__h{font:800 clamp(40px,6vw,80px)/1.05 var(--display);letter-spacing:-.02em;margin-top:34px}
.payoff__s{font:italic 400 clamp(26px,3.2vw,44px)/1.15 var(--serif);color:var(--yellow);margin-top:14px}
.chip--soon{border-color:var(--cyan);color:var(--cyan);font-size:14px;padding:10px 18px;margin-top:34px}
@media (max-width:900px){.story__head{grid-template-columns:1fr}.beat{grid-template-columns:1fr}.beat--visual-left .beat__visual{order:0}.stats{grid-template-columns:1fr}.story__rail{display:none}}

/* ================= 04 HOW WE WORK ================= */
.how__lede{font:400 19px/1.5 var(--body);color:var(--grey);margin-top:18px;max-width:640px}
.how{position:relative;margin-top:clamp(40px,6vw,80px)}
.how__path{position:absolute;left:40px;top:0;width:calc(100% - 40px);height:80px;overflow:visible}
.how__path path{fill:none;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.how__path-bg{stroke:rgba(11,16,32,.3);stroke-dasharray:2 12}
.how__path-lit{stroke:var(--cyan);stroke-width:6}
.how__duck{position:absolute;left:0;top:0;width:96px;height:auto;z-index:2;will-change:transform;margin:-66px 0 0 -48px}
.how__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:0}
.how__steps li{padding-top:108px;position:relative;text-align:left}
.how__steps li b{position:absolute;left:0;top:0;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:2px dashed rgba(11,16,32,.3);font:800 36px/1 var(--display);color:var(--slate);transition:.4s;z-index:1}
.how__steps li.lit b{background:var(--cyan);border:2px solid var(--cyan);color:var(--ink);transform:scale(1.06)}
.how__steps h3{font:700 28px/1.15 var(--display)}
.how__steps p{font:400 16px/1.5 var(--body);color:var(--grey);margin-top:10px;max-width:260px}
.how__note{font:italic 400 28px/1.2 var(--serif);color:var(--teal);margin-top:56px}
@media (max-width:900px){.how__path,.how__duck{display:none}.how__steps{grid-template-columns:1fr;gap:0}.how__steps li{padding:0 0 36px 108px;min-height:116px;border-left:0}.how__steps li::before{content:"";position:absolute;left:39px;top:80px;bottom:0;width:0;border-left:3px dashed rgba(11,16,32,.25)}.how__steps li:last-child::before{display:none}.how__steps li b{width:64px;height:64px;font-size:28px;left:8px}.how__steps li::before{left:39px;top:68px}.how__steps li.lit::before{border-color:var(--cyan)}}

/* ================= 05 CONTACT ================= */
.contact{padding-bottom:clamp(110px,12vw,170px)}
@media (min-width:1280px){.contact{padding-bottom:210px}}
.contact__grid{position:relative;display:block}
.contact__h{font:800 clamp(46px,7.2vw,92px)/.94 var(--display);letter-spacing:-.03em;margin-top:30px;max-width:1060px}
.contact__h span{display:block}
.contact__p{font:400 20px/1.5 var(--body);color:rgba(11,16,32,.8);max-width:620px;margin-top:26px}
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 18px;margin-top:40px}
.contact__note{font:500 17px/1.3 var(--body);color:rgba(11,16,32,.75)}
.contact__note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.contact__note a:hover{text-decoration-color:var(--yellow)}
.contact__duckwrap{position:absolute;right:var(--pad);bottom:-120px;width:390px;height:390px;display:grid;place-items:center;z-index:0}
.contact__duckwrap::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);transform:scale(.6);opacity:0;transition:transform .9s cubic-bezier(.2,1.2,.4,1),opacity .5s}
.contact__duckwrap.in::before{transform:none;opacity:1}
.contact__grid>div:first-child{position:relative;z-index:1}
.contact__duck{position:relative;width:290px;height:auto;transform:translateX(120%);opacity:0;transition:transform 1.4s cubic-bezier(.2,.9,.3,1),opacity .6s;animation:none}
.contact__duckwrap.in .contact__duck{transform:none;opacity:1;animation:sit 3.5s ease-in-out 1.5s infinite}
@keyframes sit{50%{transform:translateY(-8px) rotate(1.5deg)}}
.contact__water{position:absolute;left:0;bottom:0;width:100%;height:17px;object-fit:cover}
.contact::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(11,16,32,.02),rgba(11,16,32,.12));pointer-events:none}
.contact .bub{position:absolute;pointer-events:none;border:1.5px solid rgba(11,16,32,.45);border-radius:50%;animation:rise 1.4s ease-out forwards;z-index:3}
@keyframes rise{to{transform:translateY(-120px);opacity:0}}
@media (max-width:1279px){.contact__duckwrap{position:relative;right:auto;bottom:auto;margin:48px auto 0;width:min(360px,86vw);height:min(360px,86vw)}.contact__duck{width:72%}}
@media (max-width:900px){.contact__row .btn{width:100%}}

/* ================= FOOTER ================= */
.footer{background:var(--ink);padding:44px var(--pad) 40px;display:grid;grid-template-columns:auto 1fr auto;gap:12px 40px;align-items:center;max-width:none}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__duck{width:40px;height:38px;display:grid;place-items:center}
.footer__duck img{width:40px;height:auto}
.footer__duck.pop{animation:squeak .5s}
.footer__name{font:700 24px/1 var(--display)}
.footer__tag{font:italic 400 22px/1.2 var(--serif);color:var(--ice)}
.footer__fine{font:400 14px/1 var(--body);color:var(--slate)}
.footer__egg{grid-column:1/-1;font:400 11px/1 var(--mono);color:var(--slate);opacity:.7}
@media (max-width:760px){.footer{grid-template-columns:1fr;text-align:left}.footer__tag{font-size:20px}}

/* toast + easter eggs */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);background:var(--ink);color:var(--yellow);border:1.5px solid var(--yellow);padding:12px 20px;border-radius:999px;font:600 15px/1 var(--body);opacity:0;pointer-events:none;transition:.4s;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}
.army{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:80;overflow:hidden}
.army img{position:absolute;bottom:-60px;height:auto;animation:armyUp var(--t) linear forwards}
@keyframes armyUp{to{transform:translateY(calc(-100vh - 140px)) rotate(var(--rot))}}
.ripple-ring{position:fixed;width:20px;height:20px;margin:-10px;border:2px solid var(--cyan);border-radius:50%;pointer-events:none;z-index:70;animation:ring .8s ease-out forwards}
@keyframes ring{to{transform:scale(7);opacity:0}}

/* ----- reduced motion: static, readable, no loops (PRD section 6) ----- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
  .heroA__h1,.heroA__copy{opacity:1}
  .contact__duck{transform:none;opacity:1}
  .fix__line path{stroke-dashoffset:0}
  .b3duck,.b3hat,.b3phones,.plug,.fail{transform:none;opacity:1}
  .duck--b{opacity:1}
  .marquee__track{transform:none!important}
  .ripple{opacity:.35;transform:none}
  .story__rail i{height:100%!important}
}

#how .h2{max-width:900px}