/* Decorative motion stays behind the content and inside the landing hero. */
.hero.hero-code { min-height:790px; padding-bottom:125px; }
.hero-code .hero-content { padding:82px 20px 0; max-width:800px; }
.hero-code .hero-pill { background:var(--bg); font-size:10px; border-color:var(--line); }
.hero-code h1 { font-size:clamp(64px,6.8vw,92px); line-height:1.01; letter-spacing:-.025em; }
html .hero-code h1 span { color:var(--ink); }
html .hero-code .hero-copy { color:var(--muted); font-size:17px; line-height:1.7; }
.hero-code .hero-actions { gap:16px; }
.hero-code .hero-actions .button { min-height:48px; }
.code-atmosphere { position:absolute; inset:0 0 64px; z-index:-1; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,transparent 25%,#4f8cff04 90%); }
.code-atmosphere:before { content:''; position:absolute; inset:0; opacity:.22; background-image:radial-gradient(var(--muted) .5px,transparent .5px); background-size:28px 28px; mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent); }
.code-atmosphere:after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 34% 46% at 50% 38%,var(--bg) 20%,transparent 100%); }
.code-canvas { display:block; width:100%; height:100%; }
.scene-caption { position:absolute; left:36px; top:64px; display:flex; gap:16px; align-items:flex-start; color:var(--muted); font:9px/1.6 var(--mono); letter-spacing:.05em; text-align:left; pointer-events:none; }
.scene-coordinate { color:var(--accent); border-top:1px solid var(--accent); padding-top:4px; }
.hero-request { text-align:left; max-width:465px; margin:40px auto 0; border:1px solid var(--line); border-radius:9px; background:var(--bg); box-shadow:0 12px 35px #0002; overflow:hidden; }
.request-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--surface); font:9px var(--mono); letter-spacing:.06em; color:var(--muted); }
.request-heading>span { display:flex; align-items:center; gap:8px; }
.request-heading i { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.request-heading a { padding:3px 0; color:var(--ink); }
.request-heading a:hover { color:var(--accent); }
.request-code { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:14px; row-gap:9px; padding:20px 18px; font:12px/1.6 var(--mono); }
.request-code code { font-size:12px; overflow-wrap:anywhere; }
.request-line { color:var(--muted); opacity:.65; user-select:none; font-size:10px; }
.syntax-verb,.syntax-value { color:var(--accent); }
.syntax-key { color:#dad4d8; }
.request-footnote { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 18px 14px; font-size:11px; color:var(--muted); }
.request-footnote>span:last-child { font:12px var(--mono); color:var(--accent); }
.scene-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; position:absolute; bottom:84px; left:36px; right:36px; }
.cursor-hint { font:8px var(--mono); letter-spacing:.06em; color:var(--muted); }
html .hero-code .motion-toggle { background:var(--bg); border:1px solid var(--line); color:var(--muted); font:10px var(--mono); min-height:34px; padding:8px 11px; margin-left:auto; }
html .hero-code .motion-toggle:hover { color:var(--ink); border-color:var(--muted); }
html .hero-code .motion-toggle[aria-pressed=true] { border-color:#6b817d; color:var(--accent); }
html .hero-code .hero-bottom { background:var(--bg); font-size:10px; letter-spacing:.04em; }
.hero-code .hero-corners { inset:32px 36px 64px; }
.hero-code[data-motion=static] .cursor-hint { visibility:hidden; }
@media(min-width:1500px) {
  .hero.hero-code { min-height:830px; }
  .hero-code .hero-content { padding-top:96px; }
}
@media(max-width:1000px) {
  .scene-caption { top:28px; left:26px; font-size:8px; }
  .scene-caption>span:last-child { display:none; }
  .cursor-hint { display:none; }
}
@media(max-width:760px) {
  .hero.hero-code { min-height:740px; padding-bottom:140px; }
  .hero-code .hero-content { padding:65px 0 0; }
  .hero-code h1 { font-size:clamp(48px,9.8vw,72px); }
  html .hero-code .hero-copy { font-size:15px; padding:0 8px; }
  .hero-code .hero-pill { font-size:9px; margin-bottom:22px; }
  .hero-code .hero-actions { gap:10px; }
  .hero-code .hero-actions .button { padding:12px 14px; font-size:11px; }
  .hero-request { margin-top:30px; max-width:435px; }
  .request-heading { padding:13px 14px; font-size:8px; }
  .request-code { padding:18px 14px; column-gap:8px; grid-template-columns:16px minmax(0,1fr); }
  .request-code code { font-size:11px; }
  .request-footnote { padding:0 14px 14px; font-size:10px; }
  .scene-controls { bottom:94px; left:20px; right:20px; }
  .scene-caption { left:20px; top:22px; }
  html .hero-code .hero-bottom { padding:20px 0; gap:12px 18px; font-size:8px; left:20px; right:20px; }
  .hero-code .hero-corners { inset:20px 20px 64px; }
}
@media(max-width:380px) {
  .hero-code h1 { font-size:46px; }
  .hero-code .hero-actions .button { padding:11px 10px; font-size:10px; }
  .request-code code { font-size:10px; }
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
  .cursor-hint { display:none; }
}