/* ═══════════════════════════════════════════
   OPSIVO — Design Tokens & Reset
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --blue-deep:   #1460CC;
  --blue:        #0AAEEE;
  --green:       #20C25A;
  --blue-light:  #38C5FF;
  --green-light: #4ADE80;

  /* Gradients */
  --grad:        linear-gradient(135deg, var(--blue-deep), var(--blue), var(--green));
  --grad-soft:   linear-gradient(135deg, rgba(10,174,238,0.15), rgba(32,194,90,0.10));
  --grad-text:   linear-gradient(135deg, var(--blue), var(--green));

  /* Backgrounds */
  --bg-0:   #04080F;
  --bg-1:   #070D18;
  --bg-2:   #0C1525;
  --bg-3:   #101D2E;
  --bg-4:   #152236;

  /* Surfaces */
  --surface-1: rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.055);
  --surface-3: rgba(255,255,255,0.08);

  /* Borders */
  --border-1: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.10);
  --border-blue: rgba(10,174,238,0.22);

  /* Text */
  --text-primary:   #F0F6FF;
  --text-secondary: #94A3B8;
  --text-muted:     #4B6280;
  --text-dim:       #2D4060;

  /* Typography */
  --font-body:  'Outfit', 'Helvetica Neue', sans-serif;
  --font-mono:  'DM Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-14: 6rem;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-blue: 0 0 40px rgba(10,174,238,0.12);
  --shadow-glow: 0 0 80px rgba(10,174,238,0.08);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s;
  --t-mid:  0.3s;
  --t-slow: 0.6s;

  /* Layout */
  --max-w: 1160px;
  --nav-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ── Utility ── */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }