:root{
      --bg: #0f1724;
      --card: #0b1220;
      --muted: #94a3b8;
      --text: #e6eef8;
      --accent: #6ee7b7;
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --shadow: 0 6px 18px rgba(2,6,23,0.6);
      --radius: 12px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* light theme */
    :root[data-theme='light']{
      --bg: #f7fbff;
      --card: #ffffff;
      --text: #0b1220;
      --muted: #475569;
      --accent: #0ea5a4;
      --glass: rgba(11,18,32,0.03);
      --glass-2: rgba(11,18,32,0.02);
      --shadow: 0 10px 30px rgba(11,18,32,0.06);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(110,231,183,0.06), transparent 10%),
                  linear-gradient(180deg, var(--bg), var(--bg));
      color:var(--text);
      font-size:16px;
      line-height:1.45;
      -webkit-font-smoothing:antialiased;
      padding-bottom:40px;
    }

    a{color:inherit; text-decoration:none}
    img{display:block; max-width:100%; height:auto}

    /* container */
    .container{
      width: min(1100px, 92%);
      margin: 0 auto;
    }

    /* header */
    header{
      position:sticky;
      top:12px;
      z-index:40;
      backdrop-filter: blur(6px) saturate(1.2);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      padding:10px;
      border-radius:16px;
      margin:14px auto;
      box-shadow: var(--shadow);
    }
    nav{
      display:flex;
      align-items:center;
      gap:14px;
      justify-content:space-between;
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      font-weight:700;
      font-size:1rem;
    }
    .logo{
      width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--accent), #7dd3fc);
      display:grid; place-items:center; color:var(--bg); font-weight:800;
      box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    }

    .nav-links{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .nav-links a{
      padding:8px 10px;
      border-radius:10px;
      color:var(--muted);
      font-weight:600;
      font-size:0.95rem;
    }
    .nav-links a.active{ color:var(--accent); background:var(--glass); }

    .controls{ display:flex; gap:10px; align-items:center }

    /* hero */
    .hero{
      display:flex;
      gap:28px;
      align-items:center;
      padding:36px 0;
    } 

    h1{ margin:0 0 8px 0; font-size:clamp(1.6rem, 2.6vw, 2.2rem) }
    p.lead{ margin:0 0 18px 0; color:var(--muted); max-width:62ch }

    .cta{ display:flex; gap:12px; margin-top:10px }

    .btn{
      background:linear-gradient(90deg,var(--accent), #7dd3fc);
      color:var(--bg);
      padding:10px 14px;
      border-radius:12px;
      font-weight:700;
      box-shadow:0 8px 20px rgba(12,18,24,0.25);
    }
    .btn.ghost{
      background:transparent;
      color:var(--text);
      border:1px solid rgba(255,255,255,0.04);
      box-shadow:none;
      font-weight:600;
    }

    /* sections */
    section{ padding:28px 0 }
    .section-title{ font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:12px }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow);
    }

    /* projects grid */
    .projects-grid{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:16px;
    }
    .project{
      padding:14px;
      border-radius:12px;
      display:flex;
      flex-direction:column;
      gap:12px;
      transition: transform .35s ease, box-shadow .35s ease;
      background:linear-gradient(180deg,var(--card), var(--glass-2));
    }
    .project:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(2,6,23,0.45) }
    .project img{ border-radius:10px; min-height:140px; object-fit:cover; }
    .project h3{ margin:0; font-size:1.05rem }
    .project p{ margin:0; color:var(--muted); font-size:.95rem }
    .project .meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
    .project .meta a{ padding:8px 10px; border-radius:10px; font-weight:700; background:transparent; border:1px solid rgba(255,255,255,0.03) }

    /* skills */
    .skills-grid{
      display:grid;
      grid-template-columns: repeat(6, minmax(80px,1fr));
      gap:12px;
      align-items:center;
    }
    .skill{
      padding:12px; border-radius:10px; text-align:center;
      font-weight:700;
      background:linear-gradient(135deg,var(--accent), #7dd3fc);
      color:var(--bg);
    }

    /* contact */
    .contact-grid{ display:grid; grid-template-columns:1fr 360px; gap:16px }
    .contact-form input, .contact-form textarea{
      width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04);
      background:transparent; color:var(--text); resize:vertical;
    }
    /* .contact-form label{ color:var(--muted); font-size:.9rem; margin-bottom:6px; display:block } */

    footer{ margin-top:24px; text-align:center; color:var(--muted); font-size:.95rem }

    /* responsive */
    @media (max-width:980px){
      .projects-grid{ grid-template-columns: repeat(2,1fr) }
      .contact-grid{ grid-template-columns:1fr }
      .hero{ flex-direction:column-reverse; gap:18px }
      .hero-right{ width:100% }
    }
    @media (max-width:640px){
      .projects-grid{ grid-template-columns: 1fr }
      .skills-grid{ grid-template-columns: repeat(3,1fr) }
      .nav-links{ display:none }
      .mobile-nav-toggle{ display:inline-flex }
    }

    /* reveal animation */
    .reveal{
      opacity:0;
      transform: translateY(18px) scale(.995);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1);
    }
    .reveal.visible{ opacity:1; transform:none; }

    /* small utilities */
    .muted{ color:var(--muted) }
    .spacer{ height:6px }
    .small{ font-size:.9rem }
    .mobile-nav-toggle{ display:none; background:transparent; border:0; color:var(--muted); font-weight:700 }