 <style>
    :root{
      --bg:#0b1020;--panel:#0f1630;--panel-hover:#131d3d;--text:#e9ecf1;
      --muted:#b7c0d1;--brand:#6aa3ff;--brand-light:#d7e3ff;
      --border:rgba(255,255,255,.09);--success:#8fd3a6
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:radial-gradient(circle at top left,rgba(74,125,255,.12),transparent 28%),linear-gradient(180deg,#0b1020 0%,#0d1428 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
    a{color:inherit;text-decoration:none}
    a:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:8px}
    .wrap{width:min(1200px,calc(100% - 32px));margin:0 auto}
    header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);background:rgba(11,16,32,.88);backdrop-filter:blur(14px)}
    .header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
    .brand-mark{width:40px;height:40px;border-radius:12px;background:radial-gradient(70% 70% at 30% 30%,#7cc6ff 0%,#4a7dff 45%,#2e47b8 100%);box-shadow:0 10px 30px rgba(74,125,255,.35)}
    nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    nav a{color:var(--muted);font-weight:500}
    nav a:hover{color:var(--text)}
    main{padding:48px 0 56px}
    .hero{padding:44px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,rgba(106,163,255,.10),rgba(106,163,255,.03));box-shadow:0 18px 45px rgba(0,0,0,.28)}
    .eyebrow{margin:0 0 10px;color:var(--brand-light);font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
    .hero h1{max-width:850px;margin:0;font-size:clamp(2.15rem,5vw,4rem);line-height:1.08;letter-spacing:-.04em}
    .hero p{max-width:820px;margin:18px 0 0;color:var(--muted);font-size:1.08rem}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(106,163,255,.16);color:var(--text);font-weight:700;transition:transform .15s ease,background .15s ease}
    .btn:hover{transform:translateY(-2px);background:rgba(106,163,255,.24)}
    .btn.secondary{background:transparent;color:var(--muted)}
    .section{margin-top:46px}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}
    .section-heading h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
    .section-heading p{max-width:650px;margin:0;color:var(--muted)}
    .projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .project-card{display:flex;min-height:285px;flex-direction:column;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--panel);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
    .project-card:hover{transform:translateY(-4px);border-color:rgba(106,163,255,.42);background:var(--panel-hover);box-shadow:0 18px 38px rgba(0,0,0,.28)}
    .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .project-number{color:var(--brand);font-size:.84rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
    .status{padding:4px 8px;border:1px solid rgba(143,211,166,.28);border-radius:999px;background:rgba(143,211,166,.08);color:var(--success);font-size:.72rem;font-weight:700}
    .project-card h3{margin:14px 0 8px;font-size:1.15rem;line-height:1.3}
    .project-card p{margin:0;color:var(--muted);font-size:.95rem}
    .label{display:block;margin-top:15px;color:var(--brand-light);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
    .tech{margin-top:5px!important;color:var(--text)!important;font-size:.88rem!important}
    .card-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;color:var(--brand);font-weight:700}
    .card-link span{transition:transform .15s ease}
    .project-card:hover .card-link span{transform:translateX(4px)}
    .about{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
    .about-card{padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}
    .about-card h2,.about-card h3{margin-top:0}
    .about-card p{color:var(--muted)}
    .skills{display:flex;flex-wrap:wrap;gap:8px}
    .skill{padding:6px 10px;border:1px solid rgba(106,163,255,.25);border-radius:999px;background:rgba(106,163,255,.1);color:var(--brand-light);font-size:.82rem;font-weight:600}
    footer{padding:24px 0 34px;border-top:1px solid var(--border);color:var(--muted)}
    .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .footer-links{display:flex;gap:16px;flex-wrap:wrap}
    .footer-links a:hover{color:var(--text)}
    @media (max-width:980px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.about{grid-template-columns:1fr}}
    @media (max-width:680px){.header-inner{padding:14px 0;align-items:flex-start;flex-direction:column}nav{gap:12px}main{padding-top:28px}.hero{padding:26px}.section-heading{align-items:flex-start;flex-direction:column}.projects{grid-template-columns:1fr}}
  </style>