@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

    html { font-family: 'Geist', system-ui, sans-serif; font-size: 15px; }

    /* ─── Theme Variables ──────────────────────────────────────── */
    html[data-theme="dark"] {
      --bg: #0f1117; --bg-el: rgba(255,255,255,0.02); --bg-el2: rgba(255,255,255,0.03);
      --border: rgba(255,255,255,0.06); --border-s: rgba(255,255,255,0.04);
      --text: #eceef2; --text2: #8593ab; --text3: #667691; --text4: #515e78; --heading: #fff;
      --nav-bg: rgba(15,17,23,0.80); --nav-b: rgba(255,255,255,0.05);
      --glow: rgba(37,99,235,0.12); --grid: rgba(37,99,235,0.2);
      --shadow: rgba(0,0,0,0.15); --cta-from: rgba(37,99,235,0.20);
      --grain: 0.025; --icon-sun: none; --icon-moon: block;
      --problem-bg: rgba(239,68,68,0.06); --problem-border: rgba(239,68,68,0.12);
      --solution-bg: rgba(34,197,94,0.06); --solution-border: rgba(34,197,94,0.12);
    }
    html[data-theme="light"] {
      --bg: #f8f9fb; --bg-el: rgba(0,0,0,0.015); --bg-el2: rgba(0,0,0,0.025);
      --border: rgba(0,0,0,0.08); --border-s: rgba(0,0,0,0.05);
      --text: #333a47; --text2: #515e78; --text3: #667691; --text4: #b0b8c9; --heading: #0f1117;
      --nav-bg: rgba(255,255,255,0.85); --nav-b: rgba(0,0,0,0.06);
      --glow: rgba(37,99,235,0.06); --grid: rgba(37,99,235,0.05);
      --shadow: rgba(0,0,0,0.06); --cta-from: rgba(37,99,235,0.06);
      --grain: 0.012; --icon-sun: block; --icon-moon: none;
      --problem-bg: rgba(239,68,68,0.04); --problem-border: rgba(239,68,68,0.10);
      --solution-bg: rgba(34,197,94,0.04); --solution-border: rgba(34,197,94,0.10);
    }

    body { background-color: var(--bg); color: var(--text); transition: background-color .35s, color .35s; }
    body::before { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:var(--grain); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

    .logo svg { width: 130px; height: auto; }
    .th-nav { background:var(--nav-bg); border-bottom:1px solid var(--nav-b); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:background .35s, border-color .35s; }
    .h { color:var(--heading); transition:color .35s; }
    .t1 { color:var(--text); transition:color .35s; }
    .t2 { color:var(--text2); transition:color .35s; }
    .t3 { color:var(--text3); transition:color .35s; }
    .t4 { color:var(--text4); transition:color .35s; }
    .card { background:var(--bg-el); border:1px solid var(--border); transition:transform .25s,box-shadow .25s,border-color .25s,background .35s; }
    .card:hover { transform:translateY(-2px); box-shadow:0 16px 48px -12px var(--shadow); border-color:rgba(37,99,235,0.3); }
    .card-s { background:var(--bg-el); border:1px solid var(--border); transition:background .35s,border-color .35s; }
    .card-i { background:var(--bg-el2); border:1px solid var(--border); transition:background .35s,border-color .35s; }
    .bt { border-top:1px solid var(--border-s); transition:border-color .35s; }
    .grid-bg { background-size:60px 60px; background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px); }
    .glow { background:radial-gradient(ellipse 600px 300px at 50% 0%,var(--glow),transparent); }

    .code-block { background:linear-gradient(145deg,#0c1222,#0f1117); border:1px solid rgba(37,99,235,0.15); }
    .code-block .kw { color:#c084fc; } .code-block .str { color:#34d399; } .code-block .cmt { color:#475569; font-style:italic; } .code-block .fn { color:#60a5fa; } .code-block .pr { color:#f9a8d4; }

    .th-cta { background:linear-gradient(135deg,var(--cta-from),var(--bg),var(--bg)); border:1px solid rgba(37,99,235,0.10); transition:background .35s; }

    .theme-toggle { width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; outline:none; }
    .theme-toggle:hover {  transform:scale(1.05); }
    .theme-toggle:active { transform:scale(0.95); }
    .theme-toggle svg { width:18px; height:18px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
    .theme-toggle:hover svg { transform:rotate(15deg); }
    .theme-toggle .i-sun { display:var(--icon-sun); color:#f59e0b; }
    .theme-toggle .i-moon { display:var(--icon-moon); color:#8593ab; }

    .fade-in { animation:fadeUp .6s ease-out both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    .fd1{animation-delay:.1s} .fd2{animation-delay:.2s} .fd3{animation-delay:.3s} .fd4{animation-delay:.4s}
    .pi { transition:transform .2s,box-shadow .2s; }
    .pi:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 12px 32px -8px rgba(37,99,235,0.25); }
    .reveal { opacity:0; transform:translateY(30px); transition:opacity .7s,transform .7s; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    @keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
    .pulse-dot { animation:pulse-ring 2s ease-out infinite; }

    /* Problem/Solution cards */
    .problem-card { background:var(--problem-bg); border:1px solid var(--problem-border); transition:background .35s,border-color .35s; }
    .solution-card { background:var(--solution-bg); border:1px solid var(--solution-border); transition:background .35s,border-color .35s; }

    /* Comparison table */
    .comp-row { border-bottom:1px solid var(--border); transition:border-color .35s; }
    .comp-row:last-child { border-bottom:none; }