/* styles.css - simple, modern, responsive (no JS required) */
/* Root variables */
:root{
    --bg:#0b1220;
    --card:#0f1724;
    --muted:#9aa5b1;
    --accent:#0ea5a3;
    --text:#e6eef3;
    --max-width:1100px;
    --radius:12px;
    --gap:1.25rem;
    --container-pad:1rem;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:linear-gradient(180deg,#07101a 0%, #08111a 100%);
    color:var(--text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* layout */
  .container{
    max-width:var(--max-width);
    margin:0 auto;
    padding:calc(var(--container-pad) + 0.5rem);
  }
  
  /* header */
  .site-header{
    border-bottom:1px solid rgba(255,255,255,0.03);
    background:transparent;
    position:sticky;
    top:0;
    backdrop-filter: blur(6px);
    z-index:40;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
  }
  .brand .logo{
    font-size:1.15rem;
    margin:0;
    letter-spacing:0.4px;
  }
  .tagline{margin:0;font-size:0.8rem;color:var(--muted)}
  
  /* nav */
  .main-nav a{
    color:var(--muted);
    text-decoration:none;
    margin-left:1rem;
    font-size:0.95rem;
  }
  .main-nav a:hover{color:var(--text)}
  
  /* hero */
  .hero{
    padding:3.25rem 0;
    text-align:center;
  }
  .hero .lead{
    max-width:720px;
    margin:0.75rem auto 1.2rem;
    color:var(--muted);
    font-size:1.05rem;
  }
  .btn{
    display:inline-block;
    background:var(--accent);
    color:#042022;
    padding:0.65rem 1rem;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
  }
  .btn:hover{opacity:0.95}
  
  /* sections */
  .section{padding:1.6rem 0;border-top:1px solid rgba(255,255,255,0.02)}
  .section h3{margin-top:0}
  
  /* grid of cards */
  .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
  }
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:10px;
    padding:1rem;
    box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  }
  
  /* experience list */
  .experience-list{list-style:none;padding:0;margin:0}
  .experience-list li{padding:0.3rem 0;color:var(--muted)}
  
  /* contact */
  .contact-section .contact-list{list-style:none;padding:0;margin:0}
  .contact-list li{padding:0.25rem 0}
  
  /* footer */
  .site-footer{
    padding:1rem 0;
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.02);
    color:var(--muted);
    font-size:0.9rem;
  }
  
  /* utilities */
  .small{font-size:0.92rem;color:var(--muted)}
  .note{margin-top:0.6rem}
  
  /* responsive */
  @media(min-width:700px){
    .grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(min-width:980px){
    .grid{grid-template-columns:repeat(4,1fr)}
    .header-inner{gap:2rem}
  }