@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #050510;
  --bg2: #0c0c1d;
  --surface: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);
  --text: #ffffff;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.4);
  --blue: #2563EB;
  --purple: #7C3AED;
  --cyan: #06B6D4;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;
  --radius: 16px;
}

body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden; height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* === SLIDE ENGINE === */
.deck { width:100vw; height:100vh; position:relative; }
.s {
  width:100vw; height:100vh;
  position:absolute; top:0; left:0;
  display:none !important;
  overflow:hidden;
}
.s.active { display:flex !important; animation:fadeUp .5s cubic-bezier(.22,1,.36,1); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px) scale(0.995); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* === TYPOGRAPHY === */
.hero-title {
  font-family:'Plus Jakarta Sans';
  font-size:clamp(48px,5vw,72px); font-weight:800;
  line-height:1.05; letter-spacing:-3px;
}
.section-title {
  font-family:'Plus Jakarta Sans';
  font-size:clamp(36px,3.5vw,52px); font-weight:700;
  line-height:1.1; letter-spacing:-1.5px;
}
.card-title {
  font-size:18px; font-weight:600; line-height:1.3;
  color:var(--text);
}
.lead { font-size:20px; line-height:1.7; color:var(--text-secondary); }
.body { font-size:16px; line-height:1.7; color:var(--text-secondary); }
.small { font-size:14px; line-height:1.6; color:var(--text-muted); }
.tiny { font-size:12px; line-height:1.5; color:var(--text-muted); }
.overline {
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--text-muted);
}
.grad {
  background:linear-gradient(135deg,#3B82F6,#8B5CF6,#06B6D4);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.highlight { color:#60A5FA; font-weight:600; }

/* === LAYOUT === */
.pad { padding:80px 100px; }
.col { flex-direction:column; }
.row { flex-direction:row; align-items:center; }
.center { align-items:center; justify-content:center; text-align:center; }
.g-16 { gap:16px; } .g-20 { gap:20px; } .g-24 { gap:24px; }
.g-32 { gap:32px; } .g-40 { gap:40px; } .g-48 { gap:48px; }
.flex { display:flex; } .flex-1 { flex:1; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; }
.mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; }
.mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; } .mt-40 { margin-top:40px; }
.mb-8 { margin-bottom:8px; } .mb-12 { margin-bottom:12px; }
.mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }

/* === BACKGROUNDS === */
.bg-mesh {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(37,99,235,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(124,58,237,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(6,182,212,0.04) 0%, transparent 50%),
    var(--bg);
}
.bg-hero {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(37,99,235,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(124,58,237,0.08) 0%, transparent 50%),
    var(--bg);
}
.grid-pattern {
  position:absolute; inset:0; pointer-events:none;
  opacity:0.025;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size:80px 80px;
}
.glow {
  position:absolute; border-radius:50%;
  filter:blur(100px); pointer-events:none; opacity:0.6;
}

/* === COMPONENTS === */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase;
  background:rgba(37,99,235,0.12); color:#60A5FA;
  border:1px solid rgba(37,99,235,0.15);
}
.badge-purple { background:rgba(124,58,237,0.12); color:#A78BFA; border-color:rgba(124,58,237,0.15); }
.badge-green { background:rgba(16,185,129,0.12); color:#34D399; border-color:rgba(16,185,129,0.15); }
.badge-red { background:rgba(239,68,68,0.12); color:#F87171; border-color:rgba(239,68,68,0.15); }
.badge-amber { background:rgba(245,158,11,0.12); color:#FBBF24; border-color:rgba(245,158,11,0.15); }

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px; transition:all .3s;
}
.card:hover { border-color:rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); }
.card-accent { border-left:3px solid var(--blue); }
.card-top-blue { border-top:2px solid #3B82F6; }
.card-top-purple { border-top:2px solid #8B5CF6; }
.card-top-green { border-top:2px solid #10B981; }
.card-top-amber { border-top:2px solid #F59E0B; }
.card-top-cyan { border-top:2px solid #06B6D4; }
.card-top-red { border-top:2px solid #EF4444; }

.card-featured {
  background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(124,58,237,0.05));
  border:1px solid rgba(37,99,235,0.15);
  border-radius:var(--radius); padding:28px;
}

.icon-wrap {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.iw-blue { background:rgba(37,99,235,0.12); }
.iw-purple { background:rgba(124,58,237,0.12); }
.iw-green { background:rgba(16,185,129,0.12); }
.iw-cyan { background:rgba(6,182,212,0.12); }
.iw-amber { background:rgba(245,158,11,0.12); }
.iw-red { background:rgba(239,68,68,0.12); }

.step-num {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; flex-shrink:0; color:#fff;
}

.stat { font-family:'Plus Jakarta Sans'; font-size:48px; font-weight:800; line-height:1; }
.stat-sm { font-family:'Plus Jakarta Sans'; font-size:36px; font-weight:800; line-height:1; }

.timeline-bar {
  width:3px; border-radius:2px; flex-shrink:0; align-self:stretch; min-height:20px;
}

.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

.quote-block {
  position:relative;
  padding:24px 32px 24px 40px;
  border-left:2px solid rgba(139,92,246,0.3);
  background:linear-gradient(135deg,rgba(139,92,246,0.04),transparent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;
}
.quote-block .q-text {
  font-family:'Plus Jakarta Sans';
  font-size:18px; line-height:1.6; font-weight:500;
  color:var(--text); letter-spacing:-0.3px;
}
.quote-block .q-author {
  font-size:13px; font-weight:600; color:var(--text-muted);
  font-style:normal; margin-top:12px; letter-spacing:0.5px;
}

/* === NAV === */
.nav {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:6px 14px;
  background:rgba(12,12,29,0.92);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:100px;
  backdrop-filter:blur(24px);
  z-index:999; transition:opacity .3s;
}
.nav.hidden { opacity:0; pointer-events:none; }
.nav-btn {
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.6);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all .2s;
}
.nav-btn:hover { background:var(--blue); color:#fff; }
.nav-count {
  font-size:12px; font-weight:500; color:rgba(255,255,255,0.35);
  min-width:48px; text-align:center; font-variant-numeric:tabular-nums;
}
.progress-bar {
  position:fixed; top:0; left:0; height:2px; z-index:999;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan));
  transition:width .4s cubic-bezier(.22,1,.36,1);
}

/* === LIGHT MODE === */
[data-theme="light"] {
  --bg: #FAFBFC;
  --bg2: #F1F5F9;
  --surface: rgba(0,0,0,0.02);
  --border: rgba(0,0,0,0.06);
  --text: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
}
[data-theme="light"] .bg-mesh,
[data-theme="light"] .bg-hero {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(37,99,235,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(124,58,237,0.03) 0%, transparent 50%),
    #FFFFFF !important;
}
[data-theme="light"] .grid-pattern {
  opacity:0.035;
  background-image:
    linear-gradient(rgba(0,0,0,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.4) 1px, transparent 1px) !important;
}
[data-theme="light"] .glow { opacity:0.25; }
[data-theme="light"] .badge { background:rgba(37,99,235,0.08); color:#2563EB; border-color:rgba(37,99,235,0.12); }
[data-theme="light"] .badge-purple { background:rgba(124,58,237,0.08); color:#7C3AED; border-color:rgba(124,58,237,0.12); }
[data-theme="light"] .badge-green { background:rgba(16,185,129,0.08); color:#059669; border-color:rgba(16,185,129,0.12); }
[data-theme="light"] .badge-red { background:rgba(239,68,68,0.08); color:#DC2626; border-color:rgba(239,68,68,0.12); }
[data-theme="light"] .badge-amber { background:rgba(245,158,11,0.08); color:#D97706; border-color:rgba(245,158,11,0.12); }
[data-theme="light"] .card { background:rgba(255,255,255,0.8); border-color:rgba(0,0,0,0.06); box-shadow:0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .card:hover { background:rgba(255,255,255,1); border-color:rgba(0,0,0,0.1); }
[data-theme="light"] .card-featured { background:linear-gradient(135deg,rgba(37,99,235,0.04),rgba(124,58,237,0.03)); border-color:rgba(37,99,235,0.1); }
[data-theme="light"] .highlight { color:#2563EB; }
[data-theme="light"] .nav { background:rgba(255,255,255,0.95); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 16px rgba(0,0,0,0.06); }
[data-theme="light"] .nav-btn { background:rgba(0,0,0,0.04); color:#475569; }
[data-theme="light"] .nav-btn:hover { background:var(--blue); color:#fff; }
[data-theme="light"] .nav-count { color:#94A3B8; }
[data-theme="light"] .grad { background:linear-gradient(135deg,#2563EB,#7C3AED,#0891B2); -webkit-background-clip:text; background-clip:text; }