/* Minimal base so hero.html can be previewed standalone too.
   Values match navigation.css's reset — harmless if both are loaded together. */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:#000;}

/* ============ HERO (3D — gold/navy signature) ============ */
:root{
  --panel:#0D1826;
  --panel-2:#101F33;
  --hline: rgba(232,236,232,0.09);
  --gold-1:#2ef523;
  --gold-2:#1affab;
  --navy-deep:#0E1E38;
  --cyan:#4FD1C5;
  --paper:#EDEFF4;
  --muted:#8B98AC;
}

.hero{
  position:relative;
  min-height:calc(100vh - 76px);
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  align-items:center;
  gap:20px;
  padding: 80px clamp(20px,5vw,64px);
  background: radial-gradient(ellipse 1400px 900px at 78% 30%, #0d1b0f 0%, #000 60%);
  overflow:hidden;
  font-family:'Inter', sans-serif;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 82% 18%, rgba(126,211,33,0.16), transparent 60%),
    radial-gradient(ellipse 700px 600px at 10% 60%, rgba(57,214,66,0.08), transparent 55%);
  pointer-events:none;
}

.hero a{ text-decoration:none; }

.hero-copy{ position:relative; z-index:2; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 10px;
  border:1px solid var(--hline);
  border-radius:99px;
  background:rgba(237,239,244,0.03);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--gold-1);
  margin-bottom:28px;
}
.eyebrow .dash{ color:var(--muted); }
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:2px;
  background: linear-gradient(135deg, var(--gold-1), var(--cyan));
  transform:rotate(45deg);
}

.hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(38px, 4.6vw, 66px);
  line-height:1.05;
  letter-spacing:-0.015em;
  color:var(--paper);
  max-width:15ch;
}
.hero h1 .accent{
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 55%, var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p.lead{
  margin-top:24px;
  font-size:16.5px;
  line-height:1.7;
  color:var(--muted);
  max-width:46ch;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:38px;
}
.btn{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13.5px;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color:#1A0F00;
  box-shadow: 0 6px 20px -6px rgba(255,138,20,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: 0 10px 26px -6px rgba(255,138,20,0.7); }
.btn-ghost{
  background:transparent;
  color:var(--paper);
  border:1px solid var(--hline);
}
.btn-ghost:hover{ border-color:rgba(237,239,244,0.35); background:rgba(237,239,244,0.03); }
.btn-ghost .arrow{ transition:transform .25s ease; }
.btn-ghost:hover .arrow{ transform:translateX(3px); }
.btn-lg{ padding:15px 26px; font-size:14.5px; border-radius:10px; }

.hero-stats{
  display:flex;
  gap:40px;
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--hline);
  max-width:480px;
}
.hero-stats .stat b{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:26px;
  font-weight:700;
  color:var(--paper);
}
.hero-stats .stat span{
  display:block;
  margin-top:4px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  color:var(--muted);
  text-transform:uppercase;
}

/* ---- 3D signature: The Balance Core ---- */
.hero-visual{
  position:relative;
  height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  z-index:1;
}

.orbit-ring{
  position:absolute;
  border:1px solid var(--hline);
  border-radius:50%;
  transform-style:preserve-3d;
}
.orbit-ring.r1{ width:520px; height:520px; transform:rotateX(72deg); animation:spin-cw 34s linear infinite; }
.orbit-ring.r2{ width:420px; height:420px; transform:rotateX(72deg) rotateZ(40deg); border-color:rgba(79,209,197,0.16); animation:spin-ccw 26s linear infinite; }
.orbit-ring.r3{ width:620px; height:620px; transform:rotateX(72deg) rotateZ(-20deg); animation:spin-cw 46s linear infinite; opacity:.5; }

@keyframes spin-cw{ from{transform:rotateX(72deg) rotateZ(0deg);} to{transform:rotateX(72deg) rotateZ(360deg);} }
@keyframes spin-ccw{ from{transform:rotateX(72deg) rotateZ(40deg);} to{transform:rotateX(72deg) rotateZ(-320deg);} }

.node{
  position:absolute;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan), 0 0 22px rgba(79,209,197,0.5);
}
.node.gold{ background:var(--gold-1); box-shadow:0 0 10px var(--gold-1), 0 0 22px rgba(245,166,35,0.5); }

.core-stage{
  position:relative;
  width:300px;
  height:300px;
  transform-style:preserve-3d;
  animation: core-float 7s ease-in-out infinite;
}
@keyframes core-float{
  0%,100%{ transform:translateY(0) rotateX(6deg); }
  50%{ transform:translateY(-14px) rotateX(2deg); }
}

.core-disc{
  position:absolute;
  inset:0;
  border-radius:50%;
  transform-style:preserve-3d;
  animation: core-spin 16s linear infinite;
  box-shadow:
    0 0 0 1px rgba(237,239,244,0.06),
    0 30px 80px -20px rgba(57,214,66,0.3),
    0 30px 80px -30px rgba(0,0,0,0.7);
}
@keyframes core-spin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }

.core-disc::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.14), transparent 40%),
    radial-gradient(circle at 50% 50%, #0d1b0f 0%, #030503 70%);
  -webkit-mask-image: radial-gradient(circle, black 62%, transparent 63%);
          mask-image: radial-gradient(circle, black 62%, transparent 63%);
}

.core-glyph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.core-glyph img{
  width:62%;
  height:62%;
  object-fit:contain;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(57,214,66,0.35));
  animation: glyph-counter-spin 16s linear infinite reverse;
}
@keyframes glyph-counter-spin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }

.core-ring-glow{
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(126,211,33,0.28);
  box-shadow: 0 0 70px 10px rgba(57,214,66,0.16), inset 0 0 40px rgba(126,211,33,0.08);
}

.scan-line{
  position:absolute;
  left:8%; right:8%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.55;
  animation: scan-move 4.5s ease-in-out infinite;
}
@keyframes scan-move{
  0%{ top:18%; opacity:0; }
  10%{ opacity:.6; }
  50%{ top:82%; opacity:.6; }
  60%{ opacity:0; }
  100%{ top:18%; opacity:0; }
}

.tag-chip{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:8px;
  background: rgba(13,24,38,0.85);
  border:1px solid var(--hline);
  backdrop-filter: blur(6px);
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  color:var(--paper);
  letter-spacing:0.03em;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.5);
  animation: chip-float 5s ease-in-out infinite;
}
.tag-chip .dot{ width:5px; height:5px; border-radius:50%; }
.tag-chip.c1{ top:6%; left:-6%; animation-delay:0s; }
.tag-chip.c1 .dot{ background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.tag-chip.c2{ bottom:10%; right:-8%; animation-delay:1.4s; }
.tag-chip.c2 .dot{ background:var(--gold-1); box-shadow:0 0 6px var(--gold-1); }
.tag-chip.c3{ bottom:-2%; left:4%; animation-delay:2.6s; }
.tag-chip.c3 .dot{ background:#7CF29C; box-shadow:0 0 6px #7CF29C; }

@keyframes chip-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ===== RESPONSIVE (hero only) ===== */
@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:48px 20px 60px;
  }
  .hero-visual{
    height:360px;
    order:-1;
  }
  .core-stage{ width:200px; height:200px; }
  .hero-stats{ flex-wrap:wrap; row-gap:18px; }
}


.hide-scrollbar::-webkit-scrollbar {
  display: none;
}