/* Hero and card artwork share one responsive coordinate system each. */
.hero { display:block; min-height:0; padding:150px 0 72px; }
.hero-shell { display:grid; grid-template-columns:120px minmax(0,1fr); gap:32px; }
.hero-rail { display:grid; align-self:start; gap:18px; padding-left:20px; border-left:1px solid var(--line); margin-top:76px; font-size:13px; }
.hero-rail a { color:#777; }
.hero-rail a:first-child,.hero-rail a:hover { color:var(--ink); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); align-items:start; gap:24px; min-width:0; }
.hero-copy { min-width:0; container-type:inline-size; }
.hero-copy .eyebrow { margin:0 0 28px; }
.hero-copy .display { max-width:none; white-space:nowrap; font-size:clamp(18px,9.8cqw,64px); letter-spacing:-.055em; line-height:1.08; }
.hero-copy .lede { font-size:clamp(16px,3.9cqw,23px); margin:28px 0 0; max-width:29em; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 22px; margin-top:30px; }
.hero-actions .text-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.cta-note { color:#595959; font-size:12px; line-height:1.5; margin:20px 0 0; max-width:35em; }
.hero-art { position:relative; width:100%; aspect-ratio:1; margin-top:48px; min-width:0; }
.hero-gridlines { position:absolute; inset:0; border-top:1px solid var(--line); border-left:1px solid var(--line); transform:skewY(-9deg); opacity:.6; }
.hero-gridlines:before,.hero-gridlines:after { content:""; position:absolute; background:var(--line); }
.hero-gridlines:before { left:35%; width:1px; height:100%; }
.hero-gridlines:after { top:54%; width:100%; height:1px; }
.orbital { position:absolute; inset:0; aspect-ratio:1; transition:transform .4s var(--ease); }
.orbit-label { display:block; width:100%; height:100%; animation:spin 30s linear infinite; }
.orbit-label text { font:600 29px Poppins,Arial,sans-serif; fill:var(--ink); letter-spacing:0; }
.down-arrow { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(26px,3vw,42px); font-weight:400; }
.hero-proof { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; margin-top:32px; border:1px solid var(--line); border-radius:22px; }
.hero-proof p { margin:0; font-size:14px; font-weight:500; }
.hero-proof ul { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; margin:0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.hero-proof li:before { content:'•'; margin-right:8px; color:#888; }

/* All rotated corners and hover positions stay inside this reserved stage. */
.stack-stage { position:relative; width:100%; height:auto; aspect-ratio:1.22; container-type:inline-size; perspective:none; overflow:visible; }
.card-layer { position:absolute; width:73%; height:55%; padding:4cqw; border:1px solid var(--ink); background:var(--paper); box-shadow:0 3cqw 5cqw rgba(0,0,0,.13); transform-origin:center; transition:transform .45s var(--ease); animation:none; translate:none; }
.card-layer:nth-child(1) { left:8%; top:32%; transform:rotate(-10deg); }
.card-layer:nth-child(2) { left:13%; top:22%; transform:rotate(3deg); }
.card-layer:nth-child(3) { left:19%; top:12%; transform:rotate(-3deg); }
.mock-kicker { font-size:1.65cqw; letter-spacing:.14em; text-transform:uppercase; color:#555; }
.mock-title { font-size:4cqw; line-height:1.35; letter-spacing:-.04em; margin:3cqw 0 5cqw; }
.flow { display:flex; align-items:center; gap:1.5cqw; }
.flow-node { display:grid; place-items:center; flex:0 0 9cqw; height:7cqw; border:1px solid var(--ink); font-size:1.65cqw; }
.flow-line { height:1px; flex:1; min-width:0; background:var(--ink); }
.mock-lines { display:grid; gap:1.5cqw; }
.mock-lines i { display:block; height:1.3cqw; background:var(--soft); }
.mock-lines i:nth-child(2) { width:70%; }
.mock-lines i:nth-child(3) { width:48%; }
.closing .display { width:100%; max-width:none; }
@media(hover:hover) and (pointer:fine) {
  .orbital:hover { transform:scale(1.08); }
  .stack-stage:hover .card-layer:nth-child(1) { transform:rotate(-12deg) translate(-1cqw,1cqw); }
  .stack-stage:hover .card-layer:nth-child(2) { transform:rotate(4deg); }
  .stack-stage:hover .card-layer:nth-child(3) { transform:rotate(-2deg) translate(1cqw,-1cqw); }
}
@media(max-width:1200px) {
  .hero-shell { display:block; }
  .hero-rail { display:none; }
  .hero-grid { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:30px; }
}
@media(max-width:820px) {
  .hero { padding:116px 0 56px; }
  .hero-grid { gap:18px; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
  .hero-art { margin-top:62px; }
  .hero-proof { align-items:flex-start; flex-direction:column; padding:20px; margin-top:38px; gap:14px; }
  .automation-layout { gap:32px; }
  .hero-copy .lede { margin-top:22px; }
}
@media(max-width:540px) {
  .hero { padding-top:108px; padding-bottom:40px; }
  .hero-grid { grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:12px; }
  .hero-copy { display:contents; }
  .hero-grid { container-type:inline-size; }
  .hero-copy .eyebrow { grid-column:1/-1; margin-bottom:10px; font-size:10px; }
  .hero-copy .display { grid-column:1; grid-row:2; font-size:6.25cqw; align-self:center; }
  .hero-art { grid-column:2; grid-row:2 / span 2; align-self:start; margin-top:0; }
  .hero-copy .lede { grid-column:1; grid-row:3; font-size:15px; margin:6px 0 0; }
  .hero-actions { grid-column:1/-1; margin-top:14px; gap:10px 18px; }
  .hero-actions .btn { font-size:12px; padding:12px 14px; }
  .hero-actions .text-link { font-size:12px; }
  .cta-note { grid-column:1/-1; margin:2px 0 0; max-width:33em; }
  .hero-proof { margin-top:30px; padding:18px; }
  .hero-proof p { font-size:13px; }
  .hero-proof ul { font-size:9px; gap:8px 14px; }
  .nav .btn { font-size:10px; padding:9px 11px; }
}
@media(prefers-reduced-motion:reduce) {
  .orbit-label { animation:none; }
  .orbital,.card-layer { transition:none; }
}