: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%;scroll-behavior:smooth}
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; padding:10px 0 2px }
.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:19px } .stk .logo-bcg{ height:17px }
.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.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) } }
a.art{ transition:transform .2s } a.art:hover{ transform:translateY(-2px) }
.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 }
a.art:hover .t{ 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 } .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(20,19,9,.72); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; backdrop-filter:blur(2px) }

.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; gap:22px; align-items:center } @media(min-width:640px){ .cwrap{ grid-template-columns:auto 1fr auto } }
.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); 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) }
.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) }
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 }