/* ------- Design tokens ------- */
    :root{
      --bg: #0b1020;
      --surface: #0f172a;
      --muted: #94a3b8;
      --text: #e2e8f0;
      --brand: #0ea5e9;
      --brand-2: #22d3ee;
      --ring: rgba(34,211,238,.35);
      --card: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      --radius: 16px;
      --shadow: 0 10px 30px rgba(2,6,23,.35);
      --grad: linear-gradient(135deg, var(--brand), var(--brand-2), #3b82f6);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --muted: #475569; --ring: rgba(14,165,233,.2);
        --card: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));
        --shadow: 0 10px 30px rgba(2,6,23,.08);
      }
    }

    /* ------- Base ------- */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font:400 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.15), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(14,165,233,.20), transparent 60%),
        var(--bg);
      color:var(--text)
    }
    a{color:inherit}
    img{max-width:100%; height:auto}
    .container{max-width:1350px; margin-inline:auto; padding:24px}
    .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

    /* ------- Header / Nav ------- */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(140%) blur(8px);
      background:color-mix(in oklab, var(--surface) 80%, transparent);
      border-bottom:1px solid rgba(148,163,184,.15)
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
    .logo{width:40px; height:40px; border-radius:12px; background:conic-gradient(from 45deg, var(--brand), var(--brand-2)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
    .brand h1{font-size:18px; margin:0; letter-spacing:.3px}
    .menu{display:flex; gap:10px}
    .menu a{padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--text); border:1px solid transparent; transition:.25s}
    .menu a:hover{border-color:rgba(148,163,184,.25); background:rgba(148,163,184,.06)}
    .menu-btn{display:none}
    @media (max-width: 1024px){
      .menu{display:none}
      .menu.open{display:flex; flex-direction:column; position:absolute; top:64px; width: 50%; right:16px; background:var(--surface); border:1px solid rgba(148,163,184,.2); padding:10px; border-radius:14px; box-shadow:var(--shadow)}
      .menu-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(148,163,184,.25); background:var(--surface)}
    }

    /* ------- Section base ------- */
    section{padding-block:52px}
    .section-title{font-size:22px; margin:0 0 16px; display:flex; align-items:center; gap:10px}
    .section-title::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px var(--ring)}

    .grid1{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
    .col-4{grid-column:span 4}
    .col-6{grid-column:span 6}
    .col-8{grid-column:span 8}
    .col-12{grid-column:span 12}
    @media (max-width: 980px){ .col-4,.col-6,.col-8{grid-column:span 12} }

    .card{background:var(--card); border:1px solid rgba(148,163,184,.18); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease}
    .card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,.35)}

    .badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.2); font-size:14px}
    .chips{display:flex; flex-wrap:wrap; gap:10px}
    .chip{padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.2); background:rgba(148,163,184,.06); font-weight:600; font-size:14px; transition:transform .25s}
    .chip:hover{transform:translateY(-2px)}

    /* ------- Hero ------- */
    .hero{
      display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:32px; padding:48px;
      background:var(--grad); border-radius:24px; margin-top:20px; box-shadow:var(--shadow); overflow:hidden; position:relative
    }
    .hero::after{
      content:""; position:absolute; inset:0;
      background: radial-gradient(600px 300px at 90% -10%, rgba(255,255,255,.18), transparent 60%);
      pointer-events:none
    }
    .kicker{display:inline-flex; align-items:center; gap:8px; color:#dbf4ff; font-weight:700; letter-spacing:.3px}
    .kicker .dot{width:8px; height:8px; border-radius:999px; background:#001018; box-shadow:0 0 0 6px rgba(255,255,255,.25)}
    .hero h2{font-size:clamp(28px,4vw,44px); line-height:1.1; margin:12px 0 8px; color:#001018}
    .hero p{color:#001018; opacity:.9; margin:0 0 18px}
    .actions{display:flex; flex-wrap:wrap; gap:12px}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.15); text-decoration:none; font-weight:700; color:#001018; backdrop-filter: blur(6px); transition:.25s}
    .btn:hover{background:#fff}
    .btn.primary{background:#fff}

    .hero-profile{ text-align:center; z-index:1 }
    .profile-wrap{ display:inline-grid; place-items:center; padding:14px; border-radius:20px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow) }
    .profile-pic{ width:200px; height:200px; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 8px 40px rgba(0,0,0,.35) }
    .availability{ margin-top:12px }

    /* ------- Timelines / Items ------- */
    .timeline{display:grid; gap:12px}
    .item{padding:16px; position:relative}
    .item h4{margin:0 0 6px; font-size:18px}
    .item .meta{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px}

    /* ------- Projects ------- */
    .projects{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
    .project{grid-column:span 6; padding:16px}
    .project h5{margin:10px 0 8px; font-size:16px}
    .project p{margin:0; color:var(--muted)}
    @media (max-width: 900px){ .project{grid-column:span 12} }

    /* ------- Contact ------- */
    .contact-card{padding:18px}
    form{display:grid; gap:12px}
    input, textarea {width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(148,163,184,.25); background:var(--surface); color:var(--text)}
    textarea{min-height:120px; resize:vertical}

    /* ------- Footer ------- */
    footer{padding:30px 24px; color:var(--muted); border-top:1px solid rgba(148,163,184,.15); text-align:center}

    /* ------- Shine effect ------- */
    .shine{position:relative; isolation:isolate}
    .shine::after{content:""; position:absolute; inset:-1px; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.11) 15%, transparent 30%); transform:translateX(-120%); border-radius:inherit; animation:shine 6s infinite}
    @keyframes shine{ 50%{ transform:translateX(120%) } }

    /* ------- Scroll reveal ------- */
    .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
    .reveal.show{opacity:1; transform:none}
    
  /* ------- Existing styles (unchanged from your code) ------- */

  /* ------- Responsive Fixes ------- */
  @media (max-width: 1200px){
    .container{padding:16px}
  }

  @media (max-width: 980px){
    .hero{grid-template-columns:1fr; text-align:center; padding:32px 20px}
    .hero > div:first-child{order:1}
    .hero-profile{order:2}
    .hero-quick{grid-template-columns:1fr !important; margin-top:20px}
  }

  @media (max-width: 760px){
    .actions{flex-direction:column; align-items:center}
    .btn{width:100%; justify-content:center}
    .chips{justify-content:center}
    .grid{gap:12px}
    .section-title{justify-content:center; text-align:center}

    .grid1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
}
  }

  @media (max-width: 480px){
    .hero h2{font-size:24px}
    .hero p{font-size:14px}
    .profile-pic{width:160px; height:160px}
    .card{padding:12px}
    input, textarea {font-size:14px}
  }