:root{
  --paper:#F5F3EC; --card:#FFFFFF; --ink:#141309; --muted:#6d6b61; --faint:#9a988d;
  --cobalt:#2b4cf0; --violet:#7a5bff; --amber:#ff9d2e; --lime:#caf000; --pink:#ff5d8f; --nv:#76b900; --bcg:#177b53;
  --line:rgba(20,19,9,.13); --line-soft:rgba(20,19,9,.07); --dot:rgba(20,19,9,.06); --term:#0d0e12;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden}
body{ background:var(--paper); color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:140px 140px, 22px 22px; }
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.display{font-family:"Space Grotesk",ui-sans-serif,sans-serif}
.wrap{ max-width:980px; margin:0 auto; padding:0 20px }
a{color:inherit}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hue{to{filter:hue-rotate(360deg)}}

.bar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  font-family:"JetBrains Mono",monospace; font-size:12px; padding:8px 16px; background:rgba(245,243,236,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft) }
.bar .l{display:flex;align-items:center;gap:9px} .bar .name{font-weight:700}
.ava{ width:24px; height:24px; border-radius:50%; object-fit:cover; border:1.5px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.2) }
.bar .status{display:flex; align-items:center; gap:14px; color:var(--muted)}
.live{display:inline-flex; align-items:center; gap:6px} .gdot{width:7px;height:7px;border-radius:50%;background:#28c05a;display:inline-block;box-shadow:0 0 0 3px rgba(40,192,90,.16)}
@media(max-width:600px){ .bar .hide-sm{display:none} }

.hero{ position:relative; padding:56px 0 40px; display:grid; grid-template-columns:1fr; gap:34px }
@media(min-width:860px){ .hero{ grid-template-columns:1.25fr .85fr; align-items:center; gap:40px } }
.eyebrow{ font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted); max-width:42ch; margin-bottom:20px; line-height:1.5 }
h1{ font-family:"Space Grotesk"; font-weight:700; font-size:clamp(35px,7.4vw,62px); line-height:1.01; letter-spacing:-.025em }
.mark{ background-image:linear-gradient(120deg,var(--lime),var(--lime)); background-repeat:no-repeat; background-size:100% 40%; background-position:0 78%; padding:0 3px; -webkit-box-decoration-break:clone; box-decoration-break:clone }
.squw{ position:relative; display:inline-block }
.squw svg{ position:absolute; left:-2px; right:-2px; bottom:-12px; width:calc(100% + 4px); height:13px }
.sub{ margin-top:20px; font-size:clamp(15px,2vw,17.5px); color:#2b2a1f; max-width:52ch }
.cta-row{ margin-top:26px; display:flex; align-items:center; gap:15px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); text-decoration:none; font-family:"Space Grotesk"; font-weight:600; font-size:15px; padding:13px 22px; border-radius:100px; box-shadow:0 8px 20px -10px rgba(20,19,9,.5); transition:transform .15s, background .15s }
.btn:hover{ transform:translateY(-2px); background:var(--cobalt) }
.cta-micro{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--faint) }
.kao{ position:absolute; font-family:"JetBrains Mono",monospace; color:var(--faint); user-select:none; pointer-events:none; --r:6deg; animation:float 6.5s ease-in-out infinite }
.kao.k1{ top:52px; right:-1%; font-size:19px; --r:7deg }
@media(max-width:860px){ .kao{display:none} }

.term{ background:var(--term); border-radius:13px; overflow:hidden; box-shadow:0 26px 54px -24px rgba(20,19,9,.6), 0 2px 0 rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.4); transform:rotate(-1.4deg); transition:transform .25s }
.term:hover{ transform:rotate(0) }
.term .tt{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#17181e; border-bottom:1px solid rgba(255,255,255,.06) }
.term .lights{display:flex;gap:6px} .term .lights i{width:11px;height:11px;border-radius:50%} .term .lights i:nth-child(1){background:#ff5f57} .term .lights i:nth-child(2){background:#febc2e} .term .lights i:nth-child(3){background:#28c840}
.term .path{ font-family:"JetBrains Mono",monospace; font-size:11.5px; color:#7d8290 }
.term .tb{ padding:16px 15px 18px; font-family:"JetBrains Mono",monospace; font-size:12.5px; line-height:1.85; color:#c9cedb }
.term .p{color:#4fd28a} .term .c{color:#e4e7ee} .term .dim{color:#7d8290} .term .amb{color:#ffb454}
.term .cur{ display:inline-block; width:8px; height:15px; background:#4fd28a; vertical-align:-2px; animation:blink 1.1s steps(1) infinite }

/* DIMENSIONAL GLOSSY STICKERS */
.creds{ display:flex; flex-wrap:wrap; gap:15px 16px; align-items:center; justify-content:space-between; padding:10px 0 2px }
.creds .stk:nth-child(2){ margin-top:15px } .creds .stk:nth-child(4){ margin-top:11px }
@media(max-width:640px){
  .creds{ flex-direction:column; align-items:flex-start; gap:16px; padding:14px 0 6px }
  .creds .stk:nth-child(even){ align-self:flex-end; margin-top:0 }
  .creds .stk:nth-child(odd){ margin-top:0 }
}
.stk{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:13px;
  background:linear-gradient(158deg,#ffffff,#f1efe7); border:1.5px solid rgba(20,19,9,.82); font-family:"JetBrains Mono",monospace; font-size:12px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -2px 6px rgba(20,19,9,.08), 0 10px 20px -9px rgba(20,19,9,.5), 0 3px 5px rgba(20,19,9,.16) }
.stk .m{ color:var(--faint); font-weight:500 }
.stk::before{ content:""; position:absolute; inset:1px 1px 40% 1px; border-radius:12px 12px 40% 40%; background:linear-gradient(180deg,rgba(255,255,255,.55),transparent); pointer-events:none }
.stk::after{ content:""; position:absolute; bottom:-2px; right:-2px; width:17px; height:17px;
  background:linear-gradient(135deg,#e9e6dc 40%,#cfccc0); border-radius:3px 0 12px 0; box-shadow:-2px -2px 4px rgba(0,0,0,.12); transform:rotate(0deg) }
.stk.r1{transform:rotate(-3deg)} .stk.r2{transform:rotate(2deg)} .stk.r3{transform:rotate(-1.5deg)} .stk.r4{transform:rotate(2.5deg)}
.stk .wm{ font-family:"Space Grotesk"; font-weight:700; font-size:15px; line-height:1; position:relative }
.stk .nv{ color:var(--nv) } .stk .bcg{ color:var(--bcg) }
.stk .logo{ display:block; width:auto; position:relative }
.stk .logo-w{ height:23px } .stk .logo-nv{ height:22px } .stk .logo-bcg{ height:17px } .stk .logo-gp{ height:16px } .stk .logo-wm{ height:21px }
.stk.foil{ background:linear-gradient(120deg,#ffd1e8,#c9e6ff,#d5ffe0,#fff1c9,#ffd1e8); background-size:300% 300%; animation:hue 8s linear infinite; border-color:rgba(20,19,9,.7) }
.stk.foil .m{color:#3a382f} .stk.foil::before{background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)}
.wombo-ic{ width:22px; height:22px; display:block; position:relative }

section{ padding:46px 0; border-top:1px solid var(--line-soft) }
.sec-label{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:9px; margin-bottom:24px }
.sec-label .n{ color:var(--cobalt); font-weight:700 } .sec-label .ln{ flex:1; height:1px; background:var(--line-soft) }

.gets{ display:grid; gap:22px } @media(min-width:720px){ .gets{grid-template-columns:1fr 1fr 1fr; gap:28px} }
.get .tag{ font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--cobalt); margin-bottom:9px }
.get h3{ font-family:"Space Grotesk"; font-weight:600; font-size:16.5px; margin-bottom:6px; line-height:1.25 }
.get p{ color:#38362a; font-size:14.5px; max-width:52ch }

.ls{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); margin:-6px 0 18px } .ls .p{color:#3aa564} .ls .f{color:var(--ink)}
.record{ display:grid; gap:20px } @media(min-width:760px){ .record{ grid-template-columns:1.4fr 1fr } .win.big{ grid-row:span 2 } }
.win{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -22px rgba(20,19,9,.5), 0 3px 8px rgba(20,19,9,.08); transition:transform .22s, box-shadow .22s }
.win:hover{ transform:translateY(-5px); box-shadow:0 30px 54px -24px rgba(20,19,9,.55) }
.win .tt{ display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,#fdfcf8,#f6f4ee) }
.win .lights{display:flex;gap:6px} .win .lights i{width:11px;height:11px;border-radius:50%;display:inline-block} .win .lights i:nth-child(1){background:#ff5f57} .win .lights i:nth-child(2){background:#febc2e} .win .lights i:nth-child(3){background:#28c840}
.win .fname{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted) }
.win .bd{ padding:17px 17px 19px }
.win .k{ font-family:"Space Grotesk"; font-weight:700; font-size:16px; margin-bottom:9px; display:flex; align-items:center; gap:10px }
.win .k .cc{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--cobalt); background:#e9edff; padding:3px 8px; border-radius:7px; font-weight:500 }
.win .bd p{ color:#38362a; font-size:14px }
.win.big .k{ font-size:20px }
.win .k .wombo-full{ height:26px; width:auto; display:block }
.win .k .mw-word{ height:18px; width:auto; display:block }
.win .tt .fav{ height:14px; width:auto; display:block; margin-left:2px }
.win .k .bcg-mark{ height:19px; width:auto; display:block }
.win.big .num{ font-family:"Space Grotesk"; font-weight:700; font-size:clamp(50px,8vw,80px); line-height:.95; letter-spacing:-.03em; margin:4px 0 4px; background:linear-gradient(96deg,var(--cobalt),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent }
.win.big .no1{ font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--cobalt); margin-bottom:14px }
/* Dream art strip: live Dream videos (see dream.ai) */
.art{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:15px; text-decoration:none }
@media(max-width:560px){ .art{ grid-template-columns:repeat(3,1fr) } }
.art .t{ display:block; width:100%; aspect-ratio:3/4; border-radius:8px; object-fit:cover; background:#e9e6dc; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 3px 8px -4px rgba(0,0,0,.35); transition:box-shadow .2s }
.art .t:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 14px -5px rgba(0,0,0,.4) }
.art-cap{ font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--faint); margin-top:8px }
.dreamlink{ color:var(--cobalt); text-decoration:none; border-bottom:1px solid rgba(43,76,240,.35) } .dreamlink:hover{ border-bottom-color:var(--cobalt) }
.badges{ display:flex; gap:9px; margin-top:13px; flex-wrap:wrap }
.badges a{ display:inline-flex; border-radius:7px; transition:transform .15s } .badges a:hover{ transform:translateY(-2px) }
.badges img{ height:38px; width:auto; display:block }
/* MemeWorks real screenshot */
.shot{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center top; background:#efeee8; border-bottom:1px solid var(--line-soft); position:relative }
.shotwrap{ position:relative }

.how p{ max-width:60ch; color:#2b2a1f; font-size:16.5px; line-height:1.6 } .how b{font-weight:600}
.how .hl{ background-image:linear-gradient(120deg,var(--amber),var(--amber)); background-repeat:no-repeat; background-size:100% 36%; background-position:0 82% }

/* CONTACT + portrait */
.cwrap{ display:grid; grid-template-columns:auto 1fr; gap:16px 15px; align-items:start }
.cwrap .ctas{ grid-column:1 / -1; margin-top:2px }
@media(min-width:640px){ .cwrap{ grid-template-columns:auto 1fr auto; gap:22px; align-items:center } .cwrap .ctas{ grid-column:auto; margin-top:0 } }
.photo{ width:76px; height:76px; border-radius:16px; object-fit:cover; border:3px solid #fff; box-shadow:0 10px 22px -10px rgba(20,19,9,.5) }
/* click Paul, get Alan */
.flip{ display:inline-block; cursor:pointer; perspective:640px; -webkit-tap-highlight-color:transparent }
.flip .fi{ display:block; position:relative; transition:transform .62s cubic-bezier(.2,.75,.25,1); transform-style:preserve-3d }
.flip.flipped .fi{ transform:rotateY(180deg) }
.flip img{ backface-visibility:hidden; -webkit-backface-visibility:hidden; display:block }
.flip .back{ position:absolute; inset:0; transform:rotateY(180deg) }
.photo-flip{ transform:rotate(-3deg) }
.bubble{ position:relative; background:var(--cobalt); color:#fff; padding:15px 19px; border-radius:20px 20px 20px 5px; max-width:46ch; font-size:15px; line-height:1.5; box-shadow:0 12px 26px -14px rgba(43,76,240,.7) } .bubble .em{ color:rgba(255,255,255,.82) }
.ctas{ display:flex; flex-direction:column; align-items:flex-start; gap:9px }
.wabtn{ font-family:"JetBrains Mono",monospace; font-size:14px; text-decoration:none; border:1.5px solid var(--line); border-radius:100px; padding:11px 18px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:.15s; font-weight:500; background:var(--card) }
.wabtn svg{ width:17px; height:17px; display:block }
.wabtn:hover{ border-color:#25D366; transform:translateY(-1px) }
.mailbtn{ font-family:"JetBrains Mono",monospace; font-size:14px; text-decoration:none; border:1.5px solid var(--ink); border-radius:100px; padding:12px 19px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:.15s; font-weight:500 } .mailbtn:hover{ background:var(--ink); color:var(--paper) }
/* ══ MOTION ══════════════════════════════════════════════════════
   .anim is set in the head only when the visitor allows motion, and is
   removed again by main.js if GSAP never loads. So the page is fully
   visible on its own, and only hides itself when something will animate. */
.anim .bar, .anim .hero .eyebrow, .anim .hero h1 .w, .anim .hero .sub, .anim .hero .cta-row,
.anim .term, .anim .term .tb > div:not(.egg), .anim .stk, .anim .sec-label, .anim .ls, .anim .get,
.anim .win, .anim .art .t, .anim .how p, .anim .cwrap > *, .anim footer{ opacity:0 }
.anim .sec-label .ln{ transform:scaleX(0) }

h1 .w{ display:inline-block; will-change:transform }
.term .c.typing::after{ content:""; display:inline-block; width:7px; height:13px; background:#4fd28a; vertical-align:-1px; margin-left:1px; animation:blink 1s steps(1) infinite }

/* the terminal easter egg: $ cat */
.term{ cursor:pointer }
.term .hint{ color:#4a4f5c; margin-left:9px; white-space:nowrap }
.term .egg-vid{ display:block; width:118px; border-radius:8px; margin:9px 0 2px; box-shadow:0 8px 18px -8px rgba(0,0,0,.8) }

/* trophy storm off the Best App sticker */
.prize{ position:fixed; z-index:999; pointer-events:none; line-height:1; will-change:transform }

/* the stickers are meant to be grabbed */
.stk{ cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; will-change:transform }
.stk.grabbed{ cursor:grabbing; z-index:5 }
.stk img{ -webkit-user-drag:none; user-drag:none; pointer-events:none }

footer{ border-top:1px solid var(--line-soft); padding:24px 0 42px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap }