/* ===== Theme ===== */
:root {
  --bg: #0a0f1a;
  --bg-2: #0e1520;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --text: #e8ecf1;
  --muted: #8a9bb0;
  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --accent-deep: #1d4ed8;
  --glow: rgba(59, 130, 246, 0.15);
  --radius: 12px;
  /* Fluid content width: fills most of the viewport on wide monitors
     while staying readable. */
  --max: clamp(1120px, 92vw, 1760px);
  --gutter: clamp(24px, 5vw, 88px);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Fluid base size — everything sized in rem scales up gently on large
   monitors (1440p / 4K) and down on small ones, keeping proportions intact. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  font-size: clamp(15px, 0.7vw + 11px, 19px);
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) prevents horizontal scroll WITHOUT breaking sticky. */
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

/* ===== Background orbs ===== */
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15;
}
.orb-1 { width: 600px; height: 600px; top: -200px; left: -100px; background: radial-gradient(circle, var(--accent-deep), transparent 70%); }
.orb-2 { width: 500px; height: 500px; top: 40%; right: -150px; background: radial-gradient(circle, #1e40af, transparent 70%); }
.orb-3 { display: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 12px; font-weight: 600; font-size: 15px;
  cursor: pointer; border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 12px -4px var(--glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px var(--glow); background: var(--accent-2); }
.btn-ghost { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.btn-ghost:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--accent); }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6, 13, 26, 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 15px; transition: color 0.2s; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--accent); transition: width 0.25s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

/* ===== Hero ===== */
.hero { padding: clamp(150px, 14vw, 240px) 0 clamp(80px, 7vw, 130px); text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: 13.5px; font-weight: 500; margin-bottom: 28px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.035em; margin-bottom: 22px;
}
.grad {
  color: var(--accent-2);
}
.hero-sub { max-width: 38rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ===== Stats ===== */
.stats {
  display: flex; gap: 14px; margin-top: 60px; flex-wrap: wrap; justify-content: center; width: 100%;
}
.stat {
  flex: 1; min-width: 160px; padding: 26px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(6px); transition: transform 0.3s var(--ease), border-color 0.3s;
}
.stat:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.stat-num {
  display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text);
}
.stat-label { color: var(--muted); font-size: 14px; }

/* ===== Sections ===== */
.section { padding: clamp(80px, 7vw, 150px) 0; }
.section-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(48px, 4vw, 72px); }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12.5px;
  font-weight: 700; color: var(--accent); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ===== Feature grid ===== */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.4vw, 26px); }
.card {
  padding: 32px 28px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s;
  position: relative;
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-2); }
.card-icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 10px; margin-bottom: 20px;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--border);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 0.96rem; }

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.4vw, 26px); }
.step {
  padding: 34px 28px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); position: relative; transition: transform 0.3s var(--ease), border-color 0.3s;
}
.step:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.step-num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  font-weight: 800; font-size: 1.2rem; color: #fff;
  background: var(--accent); box-shadow: 0 4px 12px -4px var(--glow);
}
.step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.96rem; }

/* ===== CTA ===== */
.cta {
  position: relative; text-align: center; padding: 64px 40px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 60, 110, 0.35), rgba(10, 30, 60, 0.25));
  border: 1px solid var(--border-strong);
}
.cta-glow {
  position: absolute; width: 600px; height: 600px; top: -50%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow), transparent 65%); opacity: 0.5; pointer-events: none;
}
.cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; position: relative; }
.cta p { color: var(--muted); font-size: 1.08rem; margin-bottom: 30px; position: relative; }
.cta .hero-actions { position: relative; }
.cta-note { display: block; margin-top: 22px; color: var(--muted); font-size: 13.5px; position: relative; }

/* ===== FAQ ===== */
.faq-wrap { max-width: 48rem; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 0 22px; transition: border-color 0.25s, background 0.25s;
}
.faq details[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.chev { width: 11px; height: 11px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq details[open] .chev { transform: rotate(-135deg); }
.faq details p { color: var(--muted); padding: 0 0 22px; font-size: 0.98rem; }

/* ===== Footer (also stacks over the last panel) ===== */
.footer {
  position: relative; z-index: 2;
  padding: 56px 0 40px;
  background: var(--bg-2);
  border-radius: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0 0;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.8);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-note { color: var(--muted); font-size: 13.5px; }
.footer-copy { color: var(--muted); font-size: 13.5px; }

/* =====================================================================
   STACKING PANELS
   Each section is full-height and pinned to the top. As you scroll, the
   next section slides up and stacks ON TOP of the previous one (later
   sections paint over earlier ones and have opaque backgrounds).
   ===================================================================== */
.hero, .section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Contain each panel's inner z-indexes so panels stack purely in DOM
     order (later = on top) without inner content bleeding across. */
  isolation: isolate;
  /* Extra flow length below each panel: it stays pinned and fully visible
     for this much scrolling before the next section slides up over it. */
  margin-bottom: 15vh;
}
/* The last panel has no following section to cover its hold margin, which
   would leave an empty band before the footer — so drop it there. */
.section:last-of-type { margin-bottom: 0; }
/* Hero keeps room for the fixed nav while staying centered. */
.hero { padding-top: 96px; padding-bottom: clamp(40px, 5vw, 80px); }

/* Stacking sections are opaque so they cover the panel beneath, with a
   rounded top lip + shadow so they read as sliding up over it. */
.section.panel {
  background: var(--bg-2);
  border-radius: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0 0;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
/* Remove excessive per-section glows */
.section.panel > .container { position: relative; z-index: 1; }

/* ===== Reveal animations (varied entrances as a panel enters) ===== */
.reveal {
  opacity: 0;
  transform: translateY(46px) scale(0.97);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease), filter 0.75s var(--ease);
  will-change: opacity, transform;
}
/* Directional / style variants (assigned in script.js) */
.reveal.r-left  { transform: translateX(-64px); }
.reveal.r-right { transform: translateX(64px); }
.reveal.r-up    { transform: translateY(72px); }
.reveal.r-zoom  { transform: scale(0.82); }
.reveal.r-blur  { transform: translateY(24px); filter: blur(14px); }
.reveal.r-rot   { transform: translateY(50px) rotate(-3deg) scale(0.96); transform-origin: bottom left; }
/* Settled state (must come last so it wins for every variant) */
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ===== Side-dot section navigation (visual only) ===== */
.snap-nav {
  position: fixed; right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px; pointer-events: none;
}
.snap-dot {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s;
}
.snap-dot.active {
  background: var(--accent);
  border-color: transparent; transform: scale(1.35);
  box-shadow: 0 0 8px var(--glow);
}

/* =====================================================================
   GLASS EFFECTS - Subtle and clean
   ===================================================================== */
.glass,
.card, .step, .cta, .stat, .faq details, .app-window, .chip, .badge {
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
}
/* Glossy hover state keeps the glass look (no flat fill) */
.card:hover, .step:hover, .stat:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.nav.scrolled {
  background: rgba(10, 15, 26, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}


/* ===== Hero: two-column ===== */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero-copy { text-align: left; }
.hero-copy .hero-actions { justify-content: flex-start; }
.stats { margin-top: clamp(44px, 5vw, 72px); }

/* ===== Hero metrics grid ===== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.metric-card {
  padding: 28px 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}

.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
}

.metric-icon svg {
  width: 22px;
  height: 22px;
}

.metric-value {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.metric-label {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.metric-change {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  width: fit-content;
}

.metric-change.positive {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}


/* ===== Benchmark ===== */
.bench {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.bench-copy .eyebrow { margin-bottom: 14px; }
.bench-copy h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; }
.bench-copy > p { color: var(--muted); font-size: 1.05rem; margin-bottom: 24px; }
.bench-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bench-list li { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 500; }
.tick { position: relative; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(47, 155, 255, 0.14); border: 1px solid var(--border); }
.tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(45deg); }
.bench-chart { padding: clamp(24px, 3vw, 38px); border-radius: 20px; }
.bar-row { margin-bottom: 22px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; font-size: 0.92rem; color: var(--muted); font-weight: 500; }
.bar-val { font-weight: 800; font-size: 1.15rem; color: var(--text); }
.grad-text { color: var(--accent-2); }
.bar-track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bar { height: 100%; width: 0; border-radius: 999px; transition: width 1.2s var(--ease); }
.bar.in { width: var(--w); }
.bar-before { background: linear-gradient(90deg, #3a5a82, #51789f); }
.bar-after { background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 16px -2px var(--glow); }
.bench-note { margin-top: 4px; color: var(--muted); font-size: 0.82rem; }

/* ===== Comparison table ===== */
.compare-table { border-radius: 20px; overflow: hidden; }
.ct-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; }
.ct-row + .ct-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ct-cell { padding: 18px 20px; text-align: center; color: var(--muted); font-size: 0.95rem; }
.ct-feature { text-align: left; color: var(--text); font-weight: 600; }
.ct-head .ct-cell { font-weight: 700; color: var(--text); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ct-brand { background: linear-gradient(180deg, rgba(47, 155, 255, 0.12), rgba(47, 155, 255, 0.03)); }
.ct-mark { font-weight: 800; font-size: 1.05rem; color: var(--accent-2); text-transform: none; letter-spacing: -0.01em; }
.ct-cell i { display: inline-block; width: 22px; height: 22px; position: relative; }
.yes { border-radius: 50%; background: rgba(40, 200, 120, 0.16); }
.yes::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border-right: 2px solid #4be0a0; border-bottom: 2px solid #4be0a0; transform: rotate(45deg); }
.no::before, .no::after { content: ""; position: absolute; top: 10px; left: 4px; width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 120, 120, 0.7); }
.no::before { transform: rotate(45deg); }
.no::after { transform: rotate(-45deg); }
.mid::after { content: ""; position: absolute; top: 10px; left: 4px; width: 14px; height: 2px; border-radius: 2px; background: var(--muted); }

/* ===== Reviews ===== */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 26px); }
.review { padding: 30px 28px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; transition: transform 0.3s var(--ease), border-color 0.3s; }
.review:hover { transform: translateY(-6px); border-color: rgba(120, 180, 255, 0.4); }
.stars { color: #ffc24b; letter-spacing: 2px; font-size: 1.05rem; }
.review blockquote { color: var(--text); font-size: 1rem; line-height: 1.6; }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--accent); flex-shrink: 0; }
.review figcaption span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.review figcaption strong { font-size: 0.95rem; }
.review figcaption small { color: var(--muted); font-size: 0.82rem; }

/* ===== FAQ two-column ===== */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-aside { position: sticky; top: 100px; }
.faq-aside .eyebrow { margin-bottom: 14px; }
.faq-aside h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; }
.faq-aside > p { color: var(--muted); font-size: 1.05rem; margin-bottom: 26px; }
.faq-help { padding: 26px; border-radius: 18px; }
.faq-help h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.faq-help p { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }

/* ===== Expanded footer ===== */
.footer-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(32px, 5vw, 80px); padding-bottom: 40px; }
.footer-brand p { color: var(--muted); font-size: 0.95rem; margin: 16px 0 20px; max-width: 34ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--muted); font-size: 0.94rem; padding: 6px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .bench, .faq-grid, .footer-top { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .reviews { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 80px); }
  .hero-copy { text-align: center; }
  .hero-copy .badge { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-actions { justify-content: center; }
  .metrics-grid { max-width: 500px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .grid, .steps { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .grid, .steps { grid-template-columns: 1fr; }
  .stat { min-width: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .ct-cell { padding: 13px 8px; font-size: 0.82rem; }
  .ct-feature { font-size: 0.84rem; }
  .ct-head .ct-cell { font-size: 0.72rem; }
  .metrics-grid { grid-template-columns: 1fr; }
}

/* Side-dot nav would crowd narrow screens; hide it there. */
@media (max-width: 820px) {
  .snap-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ===== Download Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  padding: 40px;
  position: relative;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s var(--ease);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-header {
  text-align: center;
  margin-bottom: 32px;
}

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--accent);
}

.modal-icon svg {
  width: 28px;
  height: 28px;
}

.modal-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.modal-header p {
  color: var(--muted);
  font-size: 0.98rem;
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.platform-option:not(.disabled):hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateX(4px);
}

.platform-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.platform-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
  flex-shrink: 0;
}

.platform-icon svg {
  width: 24px;
  height: 24px;
}

.platform-info {
  flex: 1;
}

.platform-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.platform-detail {
  font-size: 0.85rem;
  color: var(--muted);
}

.platform-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}

.platform-badge.disabled {
  background: var(--surface-2);
  color: var(--muted);
}

@media (max-width: 600px) {
  .modal {
    padding: 32px 24px;
  }
  
  .platform-option {
    padding: 16px;
  }
  
  .platform-icon {
    width: 40px;
    height: 40px;
  }
  
  .platform-badge {
    display: none;
  }
}