/* ==========================================================
   BASE.CSS — Design Tokens, Reset, Typography
   Loaded first. Every other file depends on these variables.
========================================================== */

:root{
  /* Colors */
  --bg: #050816;
  --card: #0B1120;
  --card-hover: #101a2e;
  --primary: #4F8CFF;
  --secondary: #78A6FF;
  --text: #FFFFFF;
  --paragraph: #A9B4C5;
  --border: rgba(255,255,255,.08);
  --primary-glow: rgba(79,140,255,.35);

  /* Radius */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;

  /* Layout */
  --container: 1080px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --transition: .35s var(--ease);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;   /* true scroll root — must be hidden here, not just body */
  width:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  position:relative;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font:inherit; }

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
section{ padding:96px 0; position:relative; }

/* ---------- Typography ---------- */
.section-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:12px;
}
.section-title{
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:18px;
}
.section-text{ color:var(--paragraph); font-size:16px; max-width:52ch; }
.text-gradient{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.center{ text-align:center; margin-inline:auto; }

/* ---------- Accessibility ---------- */
::selection{ background:var(--primary); color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--secondary);
  outline-offset:3px;
  border-radius:4px;
}

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

/* Desktop-only custom cursor: real cursor should stay on touch devices */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor{ cursor:none; }
  body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }
}