/* ============================================
   Cofe Vam — Design System
   Dark Premium FinTech · Persian RTL
   ============================================ */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/peyda-font@v6.0.1/dist/font-face.css');

:root {
  /* Colors — Dark Premium (default) */
  --bg: oklch(0.14 0.018 250);
  --bg-2: oklch(0.17 0.02 250);
  --surface: oklch(0.20 0.022 250);
  --surface-2: oklch(0.24 0.024 250);
  --surface-3: oklch(0.28 0.024 250);
  --border: oklch(0.32 0.02 250 / 0.6);
  --border-strong: oklch(0.42 0.025 250);
  --text: oklch(0.97 0.008 250);
  --text-muted: oklch(0.72 0.015 250);
  --text-dim: oklch(0.55 0.018 250);

  /* Accents */
  --accent: oklch(0.82 0.17 155);         /* neon green */
  --accent-2: oklch(0.72 0.20 155);
  --accent-glow: oklch(0.82 0.17 155 / 0.35);
  --gold: oklch(0.84 0.13 82);            /* soft gold */
  --gold-glow: oklch(0.84 0.13 82 / 0.35);

  /* Semantic */
  --success: oklch(0.78 0.16 155);
  --warning: oklch(0.82 0.15 75);
  --error: oklch(0.68 0.20 25);
  --info: oklch(0.72 0.13 240);

  /* Gradients */
  --grad-hero: radial-gradient(ellipse at 20% 20%, oklch(0.82 0.17 155 / 0.18), transparent 50%),
               radial-gradient(ellipse at 80% 30%, oklch(0.84 0.13 82 / 0.14), transparent 55%),
               radial-gradient(ellipse at 50% 80%, oklch(0.55 0.18 260 / 0.20), transparent 60%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  --grad-card: linear-gradient(180deg, oklch(0.22 0.024 250 / 0.9), oklch(0.18 0.022 250 / 0.7));

  /* Type */
  --font: 'Peyda', 'Vazirmatn', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-xl: 32px; --r-full: 999px;

  /* Elevation */
  --e-1: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 3px oklch(0 0 0 / 0.15);
  --e-2: 0 4px 8px oklch(0 0 0 / 0.25), 0 8px 24px oklch(0 0 0 / 0.2);
  --e-3: 0 12px 32px oklch(0 0 0 / 0.35), 0 24px 60px oklch(0 0 0 / 0.28);
  --e-glow: 0 0 0 1px var(--accent-glow), 0 20px 60px var(--accent-glow);

  /* Timing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: oklch(0.98 0.005 250);
  --bg-2: oklch(0.96 0.006 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.97 0.005 250);
  --surface-3: oklch(0.94 0.008 250);
  --border: oklch(0.88 0.008 250 / 0.9);
  --border-strong: oklch(0.78 0.01 250);
  --text: oklch(0.20 0.02 250);
  --text-muted: oklch(0.42 0.02 250);
  --text-dim: oklch(0.58 0.018 250);

  --accent: oklch(0.62 0.18 155);
  --accent-2: oklch(0.55 0.20 155);
  --accent-glow: oklch(0.62 0.18 155 / 0.20);
  --gold: oklch(0.70 0.14 78);
  --gold-glow: oklch(0.70 0.14 78 / 0.22);

  --grad-hero: radial-gradient(ellipse at 20% 20%, oklch(0.62 0.18 155 / 0.10), transparent 50%),
               radial-gradient(ellipse at 80% 30%, oklch(0.70 0.14 78 / 0.10), transparent 55%),
               radial-gradient(ellipse at 50% 80%, oklch(0.60 0.15 260 / 0.10), transparent 60%);
  --grad-card: linear-gradient(180deg, oklch(1 0 0 / 0.9), oklch(0.98 0.005 250 / 0.7));

  --e-1: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 3px oklch(0 0 0 / 0.04);
  --e-2: 0 6px 16px oklch(0.5 0.02 250 / 0.10), 0 12px 32px oklch(0.5 0.02 250 / 0.08);
  --e-3: 0 20px 40px oklch(0.5 0.02 250 / 0.14), 0 30px 80px oklch(0.5 0.02 250 / 0.10);

  color-scheme: light;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  direction: rtl;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* Selection */
::selection { background: var(--accent-glow); color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ==== Typography ==== */
.h-display { font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; font-weight: 800; }
.h-1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }
.h-2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
.h-3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 600; }
.body-lg { font-size: 18px; line-height: 1.65; color: var(--text-muted); }
.body { font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.caption { font-size: 13px; color: var(--text-dim); letter-spacing: 0.02em; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--accent); opacity: 0.6;
}
.text-gradient {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==== Layout ==== */
.container {
  width: 100%; max-width: 1280px;
  margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
}
.section { padding: clamp(80px, 12vh, 140px) 0; position: relative; }
.stack-y > * + * { margin-top: var(--gap, 16px); }

/* ==== Buttons ==== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600;
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-accent);
  color: oklch(0.14 0.02 250);
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn-glass {
  background: oklch(1 0 0 / 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid oklch(1 0 0 / 0.1);
  color: var(--text);
}
.btn-glass:hover { background: oklch(1 0 0 / 0.10); }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ==== Card / Glass ==== */
.card {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: var(--s-6);
  backdrop-filter: blur(20px);
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--e-2);
}
.glass {
  background: oklch(1 0 0 / 0.04);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: var(--r-l);
}
[data-theme="light"] .glass {
  background: oklch(1 0 0 / 0.7);
  border: 1px solid oklch(0.85 0.008 250 / 0.6);
}

/* ==== Badge ==== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  background: oklch(0.82 0.17 155 / 0.14);
  color: var(--accent);
  border: 1px solid oklch(0.82 0.17 155 / 0.24);
}
.badge-gold {
  background: oklch(0.84 0.13 82 / 0.14);
  color: var(--gold);
  border-color: oklch(0.84 0.13 82 / 0.24);
}
.badge-dim {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ==== Utility ==== */
.hstack { display: flex; align-items: center; gap: var(--gap, 12px); }
.vstack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.grid { display: grid; gap: var(--gap, 24px); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }
.divider { height: 1px; background: var(--border); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==== Reveal (JS-driven) ==== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.in { opacity: 1; transform: none; }
.reveal-blur { opacity: 0; filter: blur(12px); transition: opacity .8s var(--ease), filter .8s var(--ease); }
.reveal-blur.in { opacity: 1; filter: none; }

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.stagger.in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger.in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger.in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger.in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-scale, .reveal-blur, .stagger > * { opacity: 1; transform: none; filter: none; }
}

/* ==== Scroll progress ==== */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0;
  height: 2px; z-index: 100;
  background: var(--grad-accent);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* ==== Persian numerals helper ==== */
.fa-num { font-feature-settings: 'ss01'; }