:root{
  --black:#060608; --panel:#0e0e12; --panel2:#15151b;
  --line:#2a2a33; --silver:#c8c8d2; --white:#fff;
  --pink:#ff2d78; --pink-d:#e01461;
  --orange:#ff7a18; --amber:#ff9500; --yellow:#ffc400;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-width:1180px; background:var(--black); color:var(--white);
  font-family:var(--sans); overflow-x:hidden;
}
img{display:block;max-width:100%}
h1,h2{font-weight:700;letter-spacing:-.02em;line-height:.95}

/* ---------- grain + trails ---------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.trail{
  position:absolute;height:2px;border-radius:2px;pointer-events:none;z-index:1;
  filter:blur(1.5px);opacity:.75;
}
.t1{top:22%;left:-20%;width:70%;background:linear-gradient(90deg,transparent,var(--pink),transparent);animation:flow 9s linear infinite}
.t2{top:58%;left:-30%;width:90%;background:linear-gradient(90deg,transparent,var(--orange),transparent);animation:flow 12s linear infinite 1s}
.t3{top:78%;left:-25%;width:60%;background:linear-gradient(90deg,transparent,var(--yellow),transparent);animation:flow 14s linear infinite 3s}
.t4{top:30%;left:-20%;width:80%;background:linear-gradient(90deg,transparent,var(--pink),transparent);animation:flow 11s linear infinite}
.t5{top:66%;left:-30%;width:80%;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:flow 13s linear infinite 2s}
@keyframes flow{to{transform:translateX(160vw)}}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:760px;overflow:hidden;display:flex;align-items:center}
.hero-art{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--black) 0%,rgba(6,6,8,.94) 28%,rgba(6,6,8,.55) 46%,transparent 66%);
}
.hero-copy{position:relative;z-index:3;padding-left:84px;max-width:720px}

.status{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.22em;color:var(--silver);border:1px solid var(--line);
  background:rgba(14,14,18,.8);padding:7px 14px;border-radius:30px;margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:#39e07a;box-shadow:0 0 10px #39e07a;animation:blink 1.8s infinite}
@keyframes blink{0%,70%,100%{opacity:1}85%{opacity:.25}}

.title{font-size:138px;letter-spacing:-.045em}
.ticker{
  font-family:var(--mono);font-weight:700;font-size:40px;letter-spacing:.06em;margin-top:2px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tag{font-size:27px;font-weight:700;margin-top:22px}
.sub{font-size:16px;color:var(--silver);margin-top:10px;max-width:520px;line-height:1.6}

.ca-box{
  margin-top:30px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;max-width:600px;
}
.ca-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#7d7d8c;margin-bottom:7px}
#ca{font-family:var(--mono);font-size:15px;color:var(--yellow);word-break:break-all;display:block}

.actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;
  padding:15px 28px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;display:inline-block;transition:.22s;background:none;
}
.btn-white{background:var(--white);color:#0a0a0c}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,255,255,.22)}
.btn-pink{border-color:var(--pink);color:var(--pink)}
.btn-pink:hover{transform:translateY(-3px);color:var(--white);background:rgba(255,45,120,.14);box-shadow:0 0 28px rgba(255,122,24,.55);border-color:var(--orange)}
.btn-pink.pulse{animation:pulse .45s ease}
@keyframes pulse{50%{transform:scale(1.07)}}
.btn-ghost{border-color:var(--line);color:var(--silver)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px)}

.copied{
  font-family:var(--mono);font-size:13px;letter-spacing:.13em;color:var(--yellow);
  margin-top:16px;opacity:0;transform:translateY(-4px);transition:.25s;
}
.copied.on{opacity:1;transform:none}

.scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--silver);
  text-decoration:none;animation:bob 2.4s ease-in-out infinite;
}
.scroll:hover{color:var(--yellow)}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* ---------- scan headings ---------- */
[data-scan]{position:relative;display:inline-block}
[data-scan]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,45,120,.85) 50%,transparent 58%);
  transform:translateX(-120%);mix-blend-mode:screen;
}
.in [data-scan]::after,[data-scan].in::after{animation:scanx 1.1s .18s ease-out forwards}
@keyframes scanx{to{transform:translateX(120%)}}

/* ---------- meet ---------- */
.meet{display:flex;gap:64px;align-items:flex-start;padding:130px 84px;position:relative;justify-content:center}
.meet-art{position:relative}
.meet-art img{width:100%;height:500px;object-fit:cover;object-position:50% 38%;border-radius:20px;opacity:0;transition:opacity .5s}
.meet-art.has-img img{opacity:1}
.meet-art.has-img.is-cut img{height:auto;object-fit:contain;border-radius:0}
.pins{list-style:none;position:static;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pins li{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--silver);
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--pink);
  padding:9px 13px;border-radius:8px;white-space:nowrap;animation:flick 6s infinite;
}
.pins li:last-child{grid-column:1 / -1}
.pins li:nth-child(2){animation-delay:.8s}.pins li:nth-child(3){animation-delay:1.6s}
.pins li:nth-child(4){animation-delay:2.4s}.pins li:nth-child(5){animation-delay:3.2s}
.pins b{display:block;color:#6e6e7c;font-size:9px;letter-spacing:.2em;margin-bottom:2px}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.45}}
.meet-copy{flex:0 1 620px;min-width:0}
.meet-copy h2{font-size:68px}
.lead{color:var(--silver);font-size:17px;line-height:1.7;margin-top:22px}

/* ---------- chat ---------- */
.chat{margin-top:34px;display:flex;flex-direction:column;gap:14px;max-width:620px;align-items:flex-start}
.chat.wide{max-width:820px;margin-inline:auto;align-items:stretch}
.msg{
  font-family:var(--mono);font-size:14px;line-height:1.6;padding:15px 19px;border-radius:14px;
  max-width:88%;min-width:220px;opacity:0;transform:translateY(10px);animation:pop .4s forwards;
}
@keyframes pop{to{opacity:1;transform:none}}
.msg.you{align-self:flex-end;margin-left:auto;text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--silver);border-bottom-right-radius:4px}
.msg.bot{
  align-self:flex-start;background:linear-gradient(180deg,rgba(255,45,120,.1),rgba(255,122,24,.06));
  border:1px solid rgba(255,45,120,.4);color:var(--white);border-bottom-left-radius:4px;
}
.msg .who{display:block;text-align:left;font-size:9px;letter-spacing:.22em;color:#7d7d8c;margin-bottom:6px}
.msg.bot .who{color:var(--pink)}
.cur{display:inline-block;width:8px;height:15px;background:var(--yellow);vertical-align:-2px;margin-left:3px;animation:blink .9s step-end infinite}
.typing{align-self:flex-start;display:flex;gap:5px;padding:16px 20px;background:var(--panel2);border:1px solid var(--line);border-radius:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--silver);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- interface ---------- */
.iface{position:relative;padding:150px 84px;overflow:hidden}
.iface-bg{position:absolute;inset:0;z-index:0}
.iface-bg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;filter:blur(2px)}
.iface-bg.has-img img{opacity:.3}
.iface-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(6,6,8,.72),var(--black) 72%)}
.iface-inner{position:relative;z-index:2;text-align:center}
.iface-inner h2{font-size:64px}
.iface-inner h2 span{background:linear-gradient(90deg,var(--pink),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.iface .chat{margin-top:52px}

/* ---------- inside the shades ---------- */
.shades{display:flex;align-items:center;gap:64px;padding:130px 84px;position:relative}
.shades-art{position:relative;flex:1 1 60%;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.shades-art img{width:100%;height:600px;object-fit:cover;opacity:0;transition:opacity .6s}
.shades-art.has-img img{opacity:1}
.reflect{position:absolute;inset:0;pointer-events:none}
.reflect span{
  position:absolute;opacity:.55;transition:transform .5s ease-out;display:block;
}
/* delivered macro paints its own reflections — hide the stand-ins, keep the parallax motes */
.shades-art.has-img .reflect span{opacity:0}
.shades-art.has-img .reflect span::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px 0 0 -3px;
  border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 14px 4px rgba(255,214,120,.8);
}
.shades-art.has-img .reflect span{opacity:.45}
.shades-art.has-img .reflect svg{display:none}
.reflect svg{filter:drop-shadow(0 0 12px rgba(255,255,255,.9))}
.reflect span:nth-child(1){left:18%;top:30%}.reflect span:nth-child(2){left:34%;top:62%}
.reflect span:nth-child(3){left:52%;top:26%}.reflect span:nth-child(4){left:66%;top:58%}
.reflect span:nth-child(5){left:78%;top:36%}.reflect span:nth-child(6){left:44%;top:44%}
.sweep{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-110%);animation:scanx 4.5s 1.4s ease-in-out infinite;
}
.shades-copy{flex:1 1 40%}
.shades-copy h2{font-size:62px}
.shades-copy h2 span{color:var(--yellow)}
.words{display:flex;gap:16px;margin-top:26px}
.words b{
  font-family:var(--mono);font-size:15px;letter-spacing:.14em;padding:9px 16px;border-radius:9px;
  border:1px solid var(--line);color:var(--silver);animation:glowb 3s infinite;
}
.words b:nth-child(2){animation-delay:1s}.words b:nth-child(3){animation-delay:2s}
@keyframes glowb{0%,100%{border-color:var(--line);color:var(--silver)}25%{border-color:var(--orange);color:var(--yellow);box-shadow:0 0 18px rgba(255,122,24,.35)}}
.shades-copy p{color:var(--silver);font-size:18px;margin-top:26px;line-height:1.65;max-width:440px}

/* ---------- world scenes ---------- */
.world{padding:40px 0 20px}
.world-h{display:block;text-align:center;font-size:54px;margin-bottom:60px}
.scene{position:relative;height:88vh;min-height:620px;overflow:hidden;margin-bottom:6px}
.scene img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s,transform 1.2s;transform:scale(1.08)}
.scene.has-img img{opacity:1}
.scene.in img{transform:scale(1)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.92) 0%,rgba(6,6,8,.45) 24%,transparent 52%)}
.scene-cap{
  position:absolute;left:84px;bottom:66px;z-index:3;max-width:760px;
}
/* readable over bright art (final-answer, shades-macro, prompt-master) */
.scene-cap::before{
  content:"";position:absolute;left:-200px;right:-220px;top:-120px;bottom:-200px;z-index:-1;
  background:radial-gradient(60% 55% at 30% 62%,rgba(3,3,5,.92) 0%,rgba(3,3,5,.78) 32%,rgba(3,3,5,.42) 56%,transparent 76%);
}
.scene-cap em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.24em;color:#ff6fa0;display:block;margin-bottom:12px;text-shadow:0 2px 10px rgba(0,0,0,.95)}
.scene-cap q{font-size:40px;font-weight:700;quotes:none;line-height:1.15;display:block;text-shadow:0 3px 18px rgba(0,0,0,.9)}

/* ---------- faces ---------- */
.faces{display:flex;gap:28px;justify-content:center;padding:110px 84px 30px}
.face{
  width:220px;height:220px;border-radius:50%;overflow:hidden;border:2px solid var(--line);
  background:var(--panel);transition:.3s;flex:0 0 auto;
}
/* delivered cutouts: drop the frame, keep the hover lift */
.face.is-cut{border-color:transparent;background:none;overflow:visible;border-radius:0}
.face.is-cut img{object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
.face.is-cut:hover{border-color:transparent;box-shadow:none;filter:drop-shadow(0 0 26px rgba(255,45,120,.5))}
.face img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.face.has-img img{opacity:1}
.face:hover{border-color:var(--pink);transform:translateY(-8px) scale(1.04);box-shadow:0 14px 44px rgba(255,45,120,.3)}

/* ---------- cards ---------- */
.cards{padding:70px 84px 140px;text-align:center}
.cards h2{font-size:62px}
.cards h2 span{background:linear-gradient(90deg,var(--pink),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.card-row{display:flex;gap:22px;margin-top:56px}
.card{
  flex:1 1 0;min-width:0;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:30px 26px;transition:.3s;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 42%,rgba(255,122,24,.5) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .7s;
}
.card:hover::before{transform:translateX(120%)}
.card:hover{border-color:var(--pink);transform:translateY(-9px);background:var(--panel2);box-shadow:0 18px 50px rgba(255,45,120,.18)}
.card em{font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.16em;color:var(--pink);display:block}
.card p{font-size:16px;color:var(--white);margin-top:16px;line-height:1.55;min-height:76px}
.card code{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#6e6e7c;display:block;border-top:1px solid var(--line);padding-top:14px}

/* ---------- finale ---------- */
.finale{position:relative;height:100vh;min-height:780px;overflow:hidden;display:flex;align-items:flex-end}
.finale-art{position:absolute;inset:0;z-index:0}
.finale-art img{width:100%;height:100%;object-fit:cover;object-position:62% 18%;opacity:0;transition:opacity .7s}
.finale-art.has-img img{opacity:1}
.finale::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,.06) 22%,rgba(6,6,8,.68) 52%,rgba(6,6,8,.97) 74%,var(--black) 88%);
}
.finale-copy{position:relative;z-index:3;padding:0 84px 64px;max-width:900px;width:100%}
.finale-copy h2{font-size:74px}
.finale-copy h2 span{color:var(--yellow)}
.finale-copy .ticker{font-size:34px;margin-top:16px}
.finale-copy p{color:var(--silver);font-size:18px;margin-top:18px;line-height:1.6}
.term{
  display:block;max-width:620px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:#7d7d8c;
  margin-top:40px;border-top:1px solid var(--line);padding-top:18px;
}

/* ---------- click bubble ---------- */
.bubble{
  position:fixed;z-index:30;pointer-events:none;font-family:var(--mono);font-size:13px;
  background:var(--white);color:#0a0a0c;padding:11px 16px;border-radius:13px;
  opacity:0;transform:scale(.8) translateY(6px);transition:.2s;font-weight:700;
}
.bubble.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

#chat1{min-height:340px;justify-content:flex-start;width:100%;max-width:620px}
#chat2{min-height:470px}

/* meet column: portrait + status pins stacked */
.meet-col{flex:0 0 440px}
.meet-art{position:relative;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.meet-art.has-img.is-cut{border:none;background:none;overflow:visible}
.meet-art.has-img.is-cut img{
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.75));
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
}

/* visitor count — revealed by the ledger script only when it has a real number */
.visits{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:#7d7d8c;display:flex;align-items:center;gap:9px;
}
.visits b{color:var(--yellow);font-weight:700;letter-spacing:.12em}
.vdot{width:6px;height:6px;border-radius:50%;background:#39e07a;box-shadow:0 0 9px #39e07a;animation:blink 1.8s infinite}