:root {
      --bg: #0b0b0c;
      --bg-soft: #111114;
      --card: #141419;
      --text: #eaeaf0;
      --muted: #a8acb3;
      --brand: #7c5cff;
      --brand-2: #00d4ff;
      --ring: 0 0 0 2px color-mix(in oklab, var(--brand) 30%, transparent);
      --radius: 18px;
      --maxw: 1100px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; scroll-behavior: smooth; }
    body {
      margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(1200px 600px at 80% -10%, #1a1730 0%, transparent 60%),
                  radial-gradient(900px 600px at -10% -10%, #0a2a35 0%, transparent 60%),
                  var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }

    /* ===== Top Nav ===== */
    .nav {
      position: fixed; top: 0; z-index: 40; width: 100%;
      backdrop-filter: blur(8px);
      background: color-mix(in oklab, var(--bg) 70%, transparent);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-evenly; }
    
    .brand { font-weight: 800; letter-spacing: 0.2px; display: flex; align-items: center; gap: 10px; }
    .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 22px #7c5cff55; }
    .nav ul { display: flex; list-style: none; gap: 14px; margin: 0; padding: 0; }
    .nav a { padding: 10px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; }
    .nav a.active, .nav a:hover { color: var(--text); background: #ffffff0e; }

    /* ===== Hero ===== */
    .hero { min-height: 90vh; display: grid; place-items: center; text-align: center; padding: 80px 20px 40px; }
    .hero h1 { font-size: clamp(34px, 6vw, 64px); margin: 0 0 18px; letter-spacing: -0.5px; }
    .hero p { margin: 0 auto; max-width: 800px; color: var(--muted); font-size: clamp(16px, 2.2vw, 20px); }
    .hero .cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn { border: 1px solid #ffffff22; background: #ffffff10; color: var(--text); padding: 10px 16px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
    .btn:hover { border-color: #ffffff44; box-shadow: var(--ring); }
    .btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; }

    /* ===== Zoom sections (About + Experience) ===== */
    .zoom-section { min-height: 100vh; padding: 80px 20px; display: grid; place-items: center; position: relative; overflow: hidden; }
    .zoom-content { font-weight: 800; letter-spacing: -1px; transition: transform 0.25s ease-out; will-change: transform; }
    .zoom-content.big { font-size: clamp(40px, 12vw, 128px); opacity: 0.9; text-align: center; line-height: 1; }

#about { margin-bottom: 14vh; }

    /* ===== About content card layered under the big word ===== */
    .about-card { position: static; margin: 28px auto 0; width: min(92%, var(--maxw)); background: var(--card); border: 1px solid #ffffff10; border-radius: var(--radius); padding: 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; box-shadow: 0 10px 50px #0008; }
    .about-card p { margin: 0; color: var(--muted); line-height: 1.6; }
    .about-pill { display: flex; gap: 8px; flex-wrap: wrap; }
    .pill { font-size: 12px; color: #dfe3ea; background: #ffffff12; border: 1px solid #ffffff1f; padding: 6px 10px; border-radius: 999px; }
    @media (max-width: 860px){ .about-card{ grid-template-columns: 1fr; }

      .nav {position: sticky !important;}
    } 

    /* ===== Experience ===== */
    .section { padding: 80px 20px; }
    .section .inner { max-width: var(--maxw); margin: 0 auto; }
    .section h2 { font-size: clamp(26px, 4.6vw, 42px); margin: 0 0 16px; letter-spacing: -0.3px; }
    .muted { color: var(--muted); }

    .exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .card { background: var(--card); border: 1px solid #ffffff12; border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px #0007; }
    .card h3 { margin: 0 0 6px; font-size: 18px; }
    .card .sub { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
    .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .badge { font-size: 12px; padding: 6px 8px; border: 1px dashed #ffffff2a; border-radius: 999px; color: #dbe0e8; }

    @media (max-width: 980px){ .exp-grid{ grid-template-columns: 1fr; } }

    /* ===== Projects ===== */
    .projects { padding: 80px 20px 100px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .project { background: linear-gradient(180deg, #171721, #121217); border: 1px solid #ffffff10; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 220px; }
    .project .cover { aspect-ratio: 16/9; background: radial-gradient(circle at 70% 30%, #2b2a48 0, transparent 60%), radial-gradient(circle at 30% 60%, #0b3a45 0, transparent 55%); border-bottom: 1px solid #ffffff12; }
    .project .content { padding: 16px; display: grid; gap: 8px; }
    .project h3 { margin: 0; font-size: 18px; }
    .project .tools { display: flex; gap: 8px; flex-wrap: wrap; }
    .project .tools span { font-size: 11px; background: #ffffff12; border: 1px solid #ffffff1f; padding: 4px 8px; border-radius: 999px; }
    .project .links { margin-top: auto; padding: 14px 16px; display: flex; gap: 10px; }

    @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

    /* ===== Fun / Resume / Footer ===== */
    .list { display: grid; gap: 10px; }
    .list li { list-style: none; background: #ffffff0b; border: 1px solid #ffffff17; padding: 10px 12px; border-radius: 10px; color: #dfe2ea; }

    footer { padding: 40px 20px 80px; text-align: center; color: var(--muted); }

    /* ===== Reveal animation ===== */
    .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
    .reveal.on { opacity: 1; transform: none; }

    /* ===== Reduced motion ===== */
    @media (prefers-reduced-motion: reduce){
      * { transition: none !important; animation: none !important; }
      .zoom-content { transform: none !important; }
    }