/* ============================================================
   ARCORE — Design tokens & base (shared)
   Mirrors the brand master. Dark by default.
   ============================================================ */
:root{
  /* neutrals */
  --obsidian:#0A0B0D; --carbon:#121419; --graphite:#1B1E25; --slate:#262A33; --steel:#3A4050;
  --mist:#9AA0AD; --fog:#C9CCD4; --bone:#F4F2EC; --white:#FFFFFF;
  /* accents */
  --gold:#F4B23E; --gold-deep:#C8881E; --gold-soft:#FBD98C;
  --cyan:#22D3EE; --cyan-deep:#0E9DB5;
  --coral:#FF6B57; --coral-deep:#E5462F; --coral-soft:#FFB3A6;
  /* signature gradients */
  --solar:linear-gradient(120deg,#F4B23E 0%,#FF6B57 100%);
  --flux:linear-gradient(120deg,#22D3EE 0%,#6366F1 100%);
  /* radii */
  --r-card:16px; --r-ctl:12px; --r-pill:100px;
  /* spacing scale (multiples of 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s14:56px;
  /* container */
  --maxw:1180px;
  /* type */
  --ff-text:'Inter',system-ui,sans-serif;
  --ff-arcore:'Space Grotesk',sans-serif;
  --ff-corecap:'Space Mono',monospace;
  --ff-arca:'Bricolage Grotesque','Space Grotesk',sans-serif;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.2s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff-text);
  background:var(--obsidian);
  color:var(--fog);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--ff-arcore);color:var(--white);letter-spacing:-.02em;line-height:1.1;font-weight:700}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:rgba(244,178,62,.28);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--ff-corecap);font-size:12px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--gold);font-weight:700;
}
.lead{color:var(--mist);font-size:clamp(16px,2vw,19px);max-width:60ch}
.mono{font-family:var(--ff-corecap)}
.ff-arcore{font-family:var(--ff-arcore)} .ff-corecap{font-family:var(--ff-corecap);letter-spacing:-.02em} .ff-arca{font-family:var(--ff-arca)}
.g-solar{background:var(--solar);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-flux{background:var(--flux);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--ff-arcore);font-weight:600;border:none;
  border-radius:var(--r-ctl);padding:13px 22px;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  text-decoration:none;line-height:1;
}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--solar);color:#1a0f02;box-shadow:0 8px 24px -10px rgba(244,178,62,.6)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,107,87,.6)}
.btn-cyan{background:var(--cyan);color:#02232a;box-shadow:0 8px 24px -12px rgba(34,211,238,.7)}
.btn-cyan:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#2a0a05}
.btn-coral:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1px solid var(--steel);color:var(--white)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn .arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-corecap);font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.02em;
}
.badge .dot{width:7px;height:7px;border-radius:50%}
.badge.gold{background:rgba(244,178,62,.13);color:var(--gold-soft);border:1px solid rgba(244,178,62,.3)}
.badge.gold .dot{background:var(--gold)}
.badge.cyan{background:rgba(34,211,238,.12);color:#9DEAF5;border:1px solid rgba(34,211,238,.3)}
.badge.cyan .dot{background:var(--cyan)}
.badge.coral{background:rgba(255,107,87,.13);color:var(--coral-soft);border:1px solid rgba(255,107,87,.3)}
.badge.coral .dot{background:var(--coral)}

/* ---------- Inputs ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:var(--mist);font-family:var(--ff-corecap);letter-spacing:.02em}
.input{
  width:100%;background:var(--graphite);border:1px solid var(--steel);
  border-radius:var(--r-ctl);padding:13px 15px;color:var(--white);
  font-family:var(--ff-text);font-size:15px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input::placeholder{color:var(--mist)}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,178,62,.16)}

/* ---------- Cards ---------- */
.card{background:var(--carbon);border:1px solid var(--slate);border-radius:var(--r-card);padding:24px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}