/* hero */
.hero{padding-block:clamp(40px,6vw,84px) clamp(48px,6vw,80px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;font:400 .82rem/1.3 var(--mono);color:var(--muted);border:1px solid var(--line);background:var(--paper);padding:8px 14px;border-radius:999px}
h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:800;margin-block:22px 20px}
mark{background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 60%/100% 84%;color:var(--on-hl);padding-inline:.1em;border-radius:6px;animation:swipe 1s .5s cubic-bezier(.6,0,.2,1) backwards}
.rot{display:block;height:1.08em;overflow:hidden;color:var(--accent)}
.rot b{display:block;font-weight:800;animation:rot 11s cubic-bezier(.75,0,.2,1) infinite}
.rot span{display:block;height:1.08em;line-height:1.08;white-space:nowrap}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;border-top:2px solid var(--ink)}
.stats div{padding:16px 16px 0 0}
.stats strong{display:block;font:800 clamp(1.9rem,4vw,2.8rem)/1 var(--display);font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.92rem;line-height:1.35;display:block;margin-top:6px}
.plate{position:relative;background:var(--panel);border-radius:22px;overflow:hidden;aspect-ratio:4/5;max-width:100%;border:1px solid var(--panel-line);
  box-shadow:14px 14px 0 var(--accent)}
.plate img{position:absolute;inset:auto 0 0 0;width:100%;height:92%;object-fit:cover;object-position:top;mix-blend-mode:lighten}
.plate::before,.plate::after{content:"";position:absolute;border:1.5px dashed var(--panel-accent);border-radius:50%;opacity:.45;animation:spin 40s linear infinite}
.plate::before{width:120%;aspect-ratio:1;left:-10%;top:-34%}
.plate::after{width:70%;aspect-ratio:1;right:-28%;top:8%;animation-duration:26s;animation-direction:reverse}
.note{position:absolute;z-index:2;left:16px;top:18px;font:600 1.5rem/1.05 var(--hand);color:var(--hl);text-align:left;transform:rotate(4deg)}
.tag{position:absolute;z-index:2;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font:400 .72rem/1 var(--mono);color:var(--panel-ink)}
.tag span{background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(6px);border:1px solid var(--panel-line);padding:8px 10px;border-radius:8px}
@keyframes swipe{from{background-size:0 84%}}

@keyframes rot{0%,19%{transform:translateY(0)}25%,44%{transform:translateY(-1.08em)}50%,69%{transform:translateY(-2.16em)}75%,94%{transform:translateY(-3.24em)}100%{transform:translateY(-4.32em)}}

@media (max-width:900px){ .hero .wrap{grid-template-columns:minmax(0,1fr)} .plate{max-width:380px;aspect-ratio:1/1;margin-right:14px} }
@media (max-width:720px){ .stats div{padding-right:10px} }