/* Base & variables */
:root{
    --bg:#0b0c10;          /* dark background */
    --panel:#111319;
    --text:#e6e6e6;
    --muted:#a6acb6;
    --brand:#6cf;          /* accent */
    --max:980px;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{
    margin:0;
    color:var(--text);
    background:radial-gradient(1200px 600px at 70% -10%, #20232b 0%, #0b0c10 55%);
    font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  .container{ width:min(100%, var(--max)); margin-inline:auto; padding:0 20px }
  .section{ padding:64px 0 }
  .section h2{ font-size:28px; margin:0 0 6px }
  .section-sub{ color:var(--muted); margin:0 0 24px }
  
  /* Header/Nav */
  .site-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(120%) blur(8px);
    background:rgba(11,12,16,.6);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
  .brand{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:var(--brand); color:#002; font-weight:700; text-decoration:none;
    box-shadow:0 4px 20px rgba(102,204,255,.45);
  }
  .menu{ display:flex; gap:18px; align-items:center }
  .menu a{ color:var(--text); text-decoration:none }
  .menu a:hover{ color:var(--brand) }
  .nav-toggle{ display:none; background:none; border:0; color:var(--text); font-size:20px }
  
  /* Hero */
  .hero{
    display:grid; gap:28px; align-items:center;
    grid-template-columns: 1.2fr .8fr;
    padding:72px 0 40px;
  }
  .hero h1{ font-size:44px; line-height:1.1; margin:0 0 12px }
  .lead{ color:#cfd6df; font-size:18px; margin:0 0 10px }
  .hero-media img{
    width:220px; height:220px; object-fit:cover; border-radius:50%;
    border:4px solid rgba(255,255,255,.06);
    box-shadow:var(--shadow);
  }
  .cta-row{ display:flex; gap:12px; margin-top:16px }
  
  /* Buttons & chips */
  .btn{
    display:inline-block; padding:10px 16px; border-radius:999px;
    background:var(--brand); color:#002; font-weight:600; text-decoration:none;
  }
  .btn:hover{ filter:brightness(1.05) }
  .btn-secondary{ background:transparent; color:var(--brand); border:1px solid rgba(102,204,255,.4) }
  .btn-ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12) }
  .btn-small{ padding:8px 12px; font-size:14px }
  
  .chip{
    display:inline-block; padding:6px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,.15); color:var(--text); text-decoration:none;
  }
  .inline-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
  
  /* Cards / Grid */
  .grid{
    display:grid; gap:16px;
    grid-template-columns: repeat(12, 1fr);
  }
  .cards > .card{
    grid-column: span 12;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  @media(min-width:780px){
    .cards > .card{ grid-column: span 6 }
  }
  .card-body{ padding:18px 18px 8px }
  .card-actions{ padding:0 18px 16px }
  .card h3{ margin:0 0 6px }
  .meta{ list-style:none; padding:0; margin:10px 0 0; display:flex; gap:12px; color:var(--muted); font-size:14px }
  
  .about{ display:grid; grid-template-columns: 1fr; gap:18px }
  
  /* Contact panel */
  .contact{
    display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  }
  .contact h3{ margin:0 0 6px }
  
  /* Footer */
  .site-footer{ padding:32px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted) }
  .site-footer p{ margin:0 }
  
  /* Utilities */
  .fade-in{ opacity:0; transform:translateY(8px); animation:fadeIn .7s ease forwards }
  @keyframes fadeIn{ to{ opacity:1; transform:none } }
  
  /* Responsive */
  @media(max-width:900px){
    .hero{ grid-template-columns:1fr; text-align:left }
    .hero-media{ order:-1 }
  }
  @media(max-width:760px){
    .menu{ display:none }
    .nav-toggle{ display:inline-block }
    .contact{ grid-template-columns:1fr }
  }