/* =====================================================================
   HERO v2 : living stage (pastel)
   ===================================================================== */
.hero{padding:56px 0 100px}
.hero__grid{grid-template-columns:1.05fr .95fr;gap:36px}
.tag{padding:7px 14px 7px 12px;background:rgba(255,255,255,.75);border:1px solid #fff;border-radius:99px;box-shadow:0 8px 24px -14px rgba(180,63,118,.5);backdrop-filter:blur(8px);font-size:11.5px}
.tag::before{display:none}
.tag__dot{width:8px;height:8px;border-radius:50%;background:var(--mint-strong);animation:ping 2s infinite}
.hero h1{font-size:clamp(38px,5.4vw,70px)}

/* rotating word */
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:0 .08em .16em 0;font-family:var(--ff-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.rot>span{grid-area:1/1;transform:translateY(105%);opacity:0;filter:blur(6px);
  background:linear-gradient(90deg,var(--pink-strong),var(--teal-strong),var(--pink-strong));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 6s linear infinite;
  transition:transform .75s var(--ease),opacity .5s ease,filter .6s ease}
.rot>span.is-on{transform:none;opacity:1;filter:none}
.rot>span.is-out{transform:translateY(-105%);opacity:0;filter:blur(6px)}

/* stats row */
.hstats{display:flex;gap:10px;margin:30px 0 0;padding:0;flex-wrap:wrap}
.hstats div{border:1px solid #fff;border-radius:18px;padding:12px 18px;min-width:88px;backdrop-filter:blur(8px);box-shadow:0 10px 26px -18px rgba(120,50,90,.5);transition:transform .4s var(--ease)}
.hstats div:hover{transform:translateY(-4px)}
.hstats div:nth-child(1){background:rgba(253,238,244,.9)}.hstats div:nth-child(2){background:rgba(255,243,248,.9)}
.hstats div:nth-child(3){background:rgba(234,247,244,.9)}.hstats div:nth-child(4){background:rgba(238,248,236,.9)}
.hstats dt{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum"}
.hstats dd{margin:4px 0 0;font-size:12px;color:var(--mute);font-weight:600}

/* stage */
.stage{position:relative;height:500px;perspective:1200px}
.px{position:absolute;left:var(--x,0);top:var(--y,0);will-change:transform}
.px.win-px{left:2%;top:4%;width:80%}
.px.chat-px{right:0;bottom:4%;left:auto;top:auto;width:68%}
.px.glow-px{left:0;top:0;width:100%;height:100%}
.stage__glow{position:absolute;left:-10%;top:-6%;width:120%;height:120%;border-radius:50%;background:radial-gradient(closest-side,rgba(248,200,220,.9),rgba(248,200,220,.5) 55%,transparent 75%);filter:blur(20px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.85}}
.float{animation:bob 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.4deg)}}

.win{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(160%);border:1px solid #fff;border-radius:22px;box-shadow:0 34px 70px -34px rgba(120,50,90,.55),inset 0 1px 0 #fff;overflow:hidden}
.win__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--faint);font-weight:700;background:linear-gradient(90deg,var(--pink-soft),var(--butter-soft))}
.win__bar i{width:10px;height:10px;border-radius:50%;background:var(--pink-mid)}.win__bar i:nth-child(2){background:var(--butter)}.win__bar i:nth-child(3){background:var(--mint)}
.win__bar span{margin-left:10px}
.win__code{margin:0;padding:18px 20px 22px;font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:normal;overflow:hidden}
.win__code .ln{white-space:pre;min-height:1.75em}
.win__code .ln{display:block;clip-path:inset(0 100% 0 0);opacity:.2;transition:clip-path .55s steps(18,end),opacity .3s}
.win__code .ln.on{clip-path:inset(0 0 0 0);opacity:1}
.win__code b{font-weight:600}.win__code .k{color:var(--pink-strong)}.win__code .f{color:var(--teal-strong)}.win__code .s{color:var(--butter-strong)}.win__code .c{color:var(--faint);font-weight:500}
.caret{display:inline-block;width:7px;height:1.1em;background:var(--pink-strong);vertical-align:-.2em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.chat{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:22px;padding:16px;box-shadow:0 30px 60px -30px rgba(120,50,90,.55);display:grid;gap:10px;min-height:112px}
.bub{max-width:88%;padding:10px 14px;border-radius:16px;font-size:13.5px;font-weight:600;line-height:1.45;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bub.on{opacity:1;transform:none}
.bub--me{justify-self:end;background:var(--grad);border-bottom-right-radius:5px}
.bub--ai{justify-self:start;background:var(--teal-soft);border:1px solid var(--teal);border-bottom-left-radius:5px;min-width:64px;min-height:38px;display:grid}
.bub--ai>*{grid-area:1/1}
.dots{display:flex;gap:5px;align-items:center;transition:opacity .25s}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--teal-strong);animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.bub--ai .txt{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bub--ai.done .dots{opacity:0}.bub--ai.done .txt{opacity:1;transform:none}

.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border:1px solid #fff;border-radius:99px;padding:9px 16px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 16px 34px -16px rgba(120,50,90,.55);backdrop-filter:blur(10px)}
.chip b{font-size:16px;letter-spacing:-.02em}
.chip--a{background:var(--pink-soft)}.chip--b{background:var(--butter-soft)}
.chip--ok{background:var(--mint-soft);color:var(--mint-strong);opacity:0;transform:scale(.9) translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chip--ok.on{opacity:1;transform:none}
.chip--ok i{width:9px;height:9px;border-radius:50%;background:var(--mint-strong);animation:ping 1.8s infinite}
.orb{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid #fff;display:grid;place-items:center;box-shadow:0 18px 34px -14px rgba(120,50,90,.55)}
.orb img{width:28px;height:28px}.orb--sm{width:44px;height:44px}.orb--sm img{width:22px;height:22px}

.scrollcue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;border:2px solid var(--line2);border-radius:99px;transform:translateX(-50%);display:block}
.scrollcue i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--pink-strong);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(14px);opacity:0}}

.magnet{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s,translate .25s var(--ease)}

@media (max-width:960px){
  .stage{height:440px;max-width:560px;margin:8px auto 0;width:100%}.scrollcue{display:none}
}
@media (max-width:640px){
  .stage{height:400px}.px.win-px{width:92%;left:0}.px.chat-px{width:84%}
  .win__code{font-size:12px;padding:14px}.hstats div{flex:1;min-width:70px;padding:10px 12px}
  .orb--sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  .win__code .ln,.bub,.chip--ok,.bub--ai .txt{clip-path:none!important;opacity:1!important;transform:none!important}
  .dots{display:none}.rot>span{filter:none}.rot>span:not(.is-on){display:none}
}