/* ===== CSS Variables ===== */
:root{
    --bg: #0f1221;
    --text: #e9ecf1;
    --muted: #b7c0d1;
    --surface: #171a2e;
    --card: #111427;
    --brand1: #4a90e2;   /* azure blue */
    --brand2: #50e3c2;   /* teal */
    --brand3: #a16eff;   /* violet accent */
    --shadow: rgba(0,0,0,.25);
  }
  
  /* ===== Reset & Base ===== */
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(80,227,194,.15), transparent 60%),
               radial-gradient(1200px 600px at 110% 0%, rgba(74,144,226,.12), transparent 60%),
               var(--bg);
    line-height: 1.6;
  }
  
  .container{ width:min(1100px, 92%); margin-inline:auto; }
  .section{ padding: 96px 0; }
  .section-title{
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing:.3px;
    margin-bottom: 24px;
  }
  
  /* ===== Nav ===== */
  #navbar{
    position: sticky; top:0; z-index: 1000;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(15,18,33,.75), rgba(15,18,33,.35));
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
  .brand{
    color: white; text-decoration:none; font-weight: 800; letter-spacing:.6px;
    display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    box-shadow: 0 10px 20px var(--shadow);
  }
  .nav-links{ list-style:none; display:flex; gap:24px; }
  .nav-links a{
    color: var(--muted); text-decoration:none; font-weight:600;
    padding:8px 4px; border-radius:8px; transition: color .2s, transform .2s;
  }
  .nav-links a:hover{ color: var(--text); transform: translateY(-2px); }
  
  /* Mobile menu */
  .hamburger{ display:none; background:none; border:none; cursor:pointer; }
  .hamburger span{ display:block; width:24px; height:2px; background:var(--muted); margin:5px 0; transition:.2s; }
  .nav-menu{ display:none; }
  .nav-menu ul{ list-style:none; display:grid; gap:12px; padding:16px 0 20px; }
  .nav-menu a{ color: var(--text); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:8px; background: rgba(255,255,255,.04); }
  
  /* ===== Hero ===== */
  .hero{
    background: linear-gradient(135deg, rgba(74,144,226,.18), rgba(80,227,194,.12)),
                radial-gradient(800px 300px at 60% 10%, rgba(161,110,255,.12), transparent 60%);
    text-align:center;
  }
  .hero-inner{ padding-top:32px; }
  .hero-title{ font-size: clamp(34px, 7vw, 56px); font-weight: 900; letter-spacing:.5px; }
  .hero-subtitle{ font-size: clamp(16px, 3.5vw, 22px); color: var(--muted); margin-top: 8px; }
  .hero-blurb{ max-width: 800px; margin: 18px auto 26px; color: #d8deeb; }
  .hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  
  .btn{
    display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  }
  .btn.primary{
    color:#0c1220; background: linear-gradient(135deg, var(--brand1), var(--brand2));
    box-shadow: 0 12px 24px var(--shadow);
  }
  .btn.ghost{
    color: var(--text); border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.02);
  }
  .btn:hover{ transform: translateY(-3px); }
  
  /* ===== Pill lists (Skills) ===== */
  .group-title{ margin-top: 18px; margin-bottom: 10px; color: var(--muted); font-weight:700; letter-spacing:.3px; }
  .pill-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
  .pill-list li{
    padding:10px 14px; border-radius:999px; font-weight:700; font-size:14px;
    color:#0c1220;
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .pill-list li:hover{ transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0,0,0,.35); }
  
  /* ===== Cards (Projects, Education) ===== */
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 12px 28px var(--shadow);
  }
  .card + .card{ margin-top: 16px; }
  .card-body{ padding: 20px; }
  .card-title{ font-size: 20px; font-weight:800; margin-bottom:6px; }
  .card-text{ color: #d9dfec; }
  
  /* Project grid (stacked on mobile, roomy on desktop) */
  #projects .container{ display:grid; gap:16px; }
  @media (min-width: 780px){
    #projects .container{ grid-template-columns: 1fr; }
    .project{ transition: transform .25s ease, box-shadow .25s ease; }
    .project:hover{ transform: translateY(-6px); box-shadow: 0 18px 32px var(--shadow); }
  }
  
  /* ===== Timeline (Experience) ===== */
  .timeline{ display:grid; gap:18px; }
  .tl-item{ background: var(--card); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:18px; }
  .tl-role{ font-weight:800; margin-bottom:4px; }
  .tl-meta{ color: var(--muted); margin-bottom:10px; }
  .tl-points{ padding-left: 18px; display:grid; gap:8px; }
  .tl-points li{ list-style: disc; }
  
  /* ===== Contact ===== */
  .contact-grid{
    display:grid; gap:12px;
    grid-template-columns: 1fr; 
  }
  @media (min-width: 640px){ .contact-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px){ .contact-grid{ grid-template-columns: repeat(4, 1fr); } }
  
  .contact-card{
    display:flex; flex-direction:column; gap:4px; text-decoration:none;
    background: linear-gradient(135deg, rgba(74,144,226,.15), rgba(80,227,194,.12));
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:16px;
    color: var(--text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .contact-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 26px var(--shadow); border-color: rgba(255,255,255,.22); }
  .contact-label{ font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:.4px; }
  .contact-value{ font-weight:800; word-break: break-word; }
  
  /* ===== Footer & Back to Top ===== */
  .footer{ padding: 28px 0 48px; color: var(--muted); text-align:center; }
  .to-top{
    position: fixed; right: 16px; bottom: 16px; width:44px; height:44px; border-radius:12px;
    border:none; cursor:pointer; font-weight:900; font-size:18px; color:#0c1220;
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    box-shadow: 0 10px 18px var(--shadow);
    opacity:0; pointer-events:none; transform: translateY(8px); transition: opacity .2s, transform .2s;
  }
  .to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
  
  /* ===== Appear on Scroll ===== */
  .fade-in{ opacity:0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
  .fade-in.show{ opacity:1; transform: none; }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .btn, .pill-list li, .project, .contact-card, .to-top, .fade-in{ transition: none!important; }
  }
  
  /* ===== Mobile Nav ===== */
  @media (max-width: 860px){
    .nav-links{ display:none; }
    .hamburger{ display:block; }
    .nav-menu{ display:none; }
    .nav-menu.open{ display:block; }
  }