:root{
      --bg:#071017;
      --panel:#0f1720;
      --muted:#9aa5b1;
      --accent:#8be9fd;
      --glass: rgba(255,255,255,0.03);
      --radius:14px;
      --max-width:1100px;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
      background:var(--bg);
      color:#e6f0f2;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
      line-height:1.4;
    }
    a{color:var(--accent);text-decoration:none}
    .wrap{max-width:var(--max-width);margin:0 auto;padding:48px 24px}

    /* NAV */
    header{position:fixed;left:0;right:0;top:18px;z-index:40;pointer-events:none}
    .nav-inner{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:46px;height:46px;display:grid;place-items:center}
    .logo svg{display:block;width:36px;height:36px}
    nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;align-items:center}
    nav a{font-weight:500;opacity:0.85;padding:6px 10px;border-radius:8px}

    /* HERO */
    .hero{min-height:100vh;display:grid;place-items:center}
    .hero-card{width:100%;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:20px;padding:64px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(3,6,10,0.6)}
    .name{font-weight:800;font-size:clamp(36px,7vw,68px);letter-spacing:-1px;margin:0}
    .byline{margin-top:10px;color:var(--muted);font-weight:400;font-size:18px}
    .cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
    .btn{padding:12px 18px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,0.04);cursor:pointer}

    /* Sections */
    section{padding:90px 0}
    h2.section-title{font-size:20px;margin:0 0 18px 0}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);min-height:120px}
    .card h3{margin:0 0 8px 0}
    .card p{margin:0;color:var(--muted);font-size:14px}

    /* Footer */
    footer{text-align:center;padding:36px 0;color:var(--muted);font-size:13px}

    /* Responsive */
    @media (max-width:900px){
      .grid{grid-template-columns:repeat(2,1fr)}
      .hero-card{padding:40px}
    }
    @media (max-width:560px){
      .grid{grid-template-columns:1fr}
      header{top:12px}
      .hero-card{padding:28px}
    }

    /* Utility: hide until animated */
    .pre-animate{opacity:0;transform:translateY(12px)}

    /* small accent underline used on hero */
    .accent-line{height:4px;width:84px;border-radius:8px;background:linear-gradient(90deg,var(--accent), rgba(139,233,253,0.2));margin-top:18px}