/* ===== Hero v2: Orbit Core with floating cards (ArtCraft-inspired) ===== */

.hero-v2{position:relative;overflow:hidden;padding:0 24px;min-height:clamp(720px,calc(100svh - 64px),900px);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
  /* orbit radii (ellipses): inner, middle, outer */
  --rx1:min(600px,46vw);--ry1:362px;
  --rx2:min(700px,52vw);--ry2:380px;
  --rx3:min(800px,58vw);--ry3:420px}
/* Vercel frame guide lines continue through the hero */
.hero-v2::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:min(1200px,100%);transform:translateX(-50%);
  border-left:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none;z-index:0}

.stage{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.09)}
.ring-1{width:calc(var(--rx1)*2);height:calc(var(--ry1)*2);border-color:rgba(255,255,255,.07)}
.ring-2{width:calc(var(--rx2)*2);height:calc(var(--ry2)*2);border-color:rgba(255,255,255,.10)}
.ring-3{width:calc(var(--rx3)*2);height:calc(var(--ry3)*2);border-color:rgba(255,255,255,.13)}

/* cards */
.card{position:absolute;left:0;top:0;offset-rotate:0deg;offset-anchor:50% 50%;
  display:flex;flex-direction:column;gap:4px;text-align:left;min-width:150px;max-width:230px;padding:10px 14px 12px;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  animation:orbit var(--dur) linear infinite;animation-delay:calc(var(--d) * var(--dur) * -1)}
.card.r1{offset-path:ellipse(var(--rx1) var(--ry1) at 50% 50%);--dur:64s}
.card.r2{offset-path:ellipse(var(--rx2) var(--ry2) at 50% 50%);--dur:78s;animation-direction:reverse}
.card.r3{offset-path:ellipse(var(--rx3) var(--ry3) at 50% 50%);--dur:90s}
@keyframes orbit{from{offset-distance:0%}to{offset-distance:100%}}

/* depth: farther = smaller, dimmer, softer */
.card.far{transform:scale(.8);opacity:.6;filter:blur(1.2px)}
.card.mid{transform:scale(.9);opacity:.85}
.card.near{transform:none;opacity:.95}

.c-label{display:flex;align-items:center;gap:7px;font:500 10.5px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(235,86,0,.7);flex:none}
.c-body{font:500 14px/19px Inter,var(--sans);color:#f2f2f2}
.c-meta{font:400 12px/16px Inter,var(--sans);color:#8f8f8f}
.c-mono{font:500 12.5px/18px var(--mono);color:#e6e6e6}
.c-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.c-tags b{font:500 11px/16px Inter,var(--sans);color:#cfcfcf;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:1px 6px}
.card.chip{min-width:0;border-radius:999px;padding:8px 16px 9px;flex-direction:row;align-items:center;gap:10px}
.card.chip .c-label{order:0}
.card.chip .c-body{font-weight:600}
.card.chip .c-meta{display:none}

/* copy over the center + dark vignette for readability */
.hero-copy{position:relative;z-index:2;text-align:center;padding:48px 0 56px;width:min(1120px,100%)}
.hero-copy::before{content:"";position:absolute;inset:-60px -120px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.92) 0,rgba(0,0,0,.82) 55%,rgba(0,0,0,.45) 80%,transparent 100%)}
.hero-v2 .orbit-wrap{width:132px;height:132px;margin:0 auto 28px}
.hero-v2 .glow{inset:-110px}


@media (prefers-reduced-motion:reduce){
  .card{animation:none!important;offset-distance:calc(var(--d) * 100%)}
  .card.r2{offset-distance:calc((1 - var(--d)) * 100%)}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .card.m-show{offset-distance:calc(var(--md) * 100%)}
}

/* tablet */
@media (max-width:1100px){
  .hero-v2{--rx1:46vw;--ry1:360px;--rx2:60vw;--ry2:470px;--rx3:76vw;--ry3:580px}
  .card.far{display:none}
}

/* mobile: orbit block sits above the copy, only 4 cards, no overlap with text */
@media (max-width:640px){
  .hero-v2{display:block;min-height:0;padding:0 var(--pad) 32px;
    --rx1:120px;--ry1:52px;--rx2:150px;--ry2:66px;--rx3:172px;--ry3:80px}
  .stage{inset:0 0 auto 0;height:176px;
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
  .card{display:none}
  .card.m-show{display:flex}
  .card.m-show{offset-path:ellipse(var(--rx2) var(--ry2) at 50% 50%);--dur:60s;animation-direction:normal}
  .card.m1{--md:.125}.card.m2{--md:.375}.card.m3{--md:.625}.card.m4{--md:.875}
  .card.m-show{animation-delay:calc(var(--md) * var(--dur) * -1)}
  .card{min-width:0;max-width:140px;padding:7px 10px 8px;border-radius:10px;transform:none!important;opacity:.92!important;filter:none!important}
  .card .c-meta{display:none}
  .c-body{font-size:12.5px;line-height:16px}
  .c-label{font-size:9.5px}
  .card.chip{padding:6px 12px}
  .hero-copy{padding:60px 0 0}
  .hero-copy::before{display:none}
  .hero-v2 .orbit-wrap{width:56px;height:56px;margin-bottom:64px}
  .hero-v2 .glow{inset:-40px}
}
/* compact two-line headline, like a centered wordmark */
.hero-v2 h1{font-size:68px;line-height:80px;max-width:820px;margin-left:auto;margin-right:auto;text-wrap:balance}
.hero-v2 .lead{max-width:700px}
@media (max-width:1000px){.hero-v2 h1{font-size:48px;line-height:58px;max-width:620px}}
@media (max-width:640px){.hero-v2 h1{font-size:32px;line-height:40px;max-width:none}}
.card.r1 .c-body{white-space:nowrap}
/* v2.2 mobile: compact orbit block (half height, 176px). The 4 cards sit still beside the core,
   two on each side, so they never cross the core or the text. */
@media (max-width:640px){
  .card.m-show{animation:none!important;offset-path:none;max-width:128px}
  .card.m-show .c-body{overflow-wrap:anywhere}
  .card.m2{left:10px;top:10px}
  .card.m3{left:10px;top:120px}
  .card.m4{left:auto;right:10px;top:16px}
  .card.m1{left:auto;right:10px;top:120px}
}