:root{
  --bg:#0b0b0d;
  --panel:#0f1013;
  --glass:rgba(255,255,255,.04);
  --border:1px solid rgba(255,255,255,.06);
  --text:#e6e8ef;
  --muted:#9aa3b2;
  --accent:#8ab4ff;
  --accent2:#b388ff;
  --radius:18px;
  --radius-lg:22px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.32);
  --shadow-lift:0 18px 60px rgba(0,0,0,.44);
  --glow:0 0 110px rgba(138,180,255,.12), 0 0 60px rgba(179,136,255,.08);
  --speed:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,Noto Sans;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/26px 26px;
  opacity:.55;
  z-index:-1;
}

body::after{
  content:"";
  position:fixed;
  inset:-20vmax;
  pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 15% 20%, rgba(138,180,255,.08), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 10%, rgba(179,136,255,.06), transparent 60%),
    radial-gradient(40vmax 40vmax at 50% 110%, rgba(255,255,255,.04), transparent 60%);
  filter:blur(2px);
  z-index:-1;
}

.container{width:min(1160px,92%);margin-inline:auto}
.section{padding:96px 0;position:relative}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 8px;letter-spacing:.2px}
.section-sub{margin:0 0 18px;color:var(--muted)}

.navbar{position:sticky;top:0;backdrop-filter:blur(8px);background:linear-gradient(to bottom, rgba(11,11,13,.72), rgba(11,11,13,.38));border-bottom:var(--border);z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.6px;font-size:1.05rem;padding:8px 12px;border-radius:12px;background:linear-gradient(135deg, rgba(138,180,255,.14), rgba(179,136,255,.12));border:1px solid rgba(255,255,255,.06);box-shadow:var(--glow);position:relative;overflow:hidden}
.logo::after{content:"";position:absolute;inset:-100% -40%;transform:translateX(-120%) rotate(12deg);background:linear-gradient(90deg, transparent 0 45%, rgba(255,255,255,.36) 50%, transparent 55% 100%);transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.logo:hover::after{transform:translateX(60%) rotate(12deg)}

.nav{display:flex;align-items:center;gap:14px}
.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;color:var(--muted);text-decoration:none;border-radius:12px;transition:color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);position:relative;isolation:isolate}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--speed) var(--ease);background:linear-gradient(90deg, var(--accent), var(--accent2));opacity:.8;z-index:-1}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.04);transform:translateY(-1px)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--text);background:rgba(255,255,255,.05)}

.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.nav-toggle .line{width:18px;height:2px;background:var(--text);display:block;margin:2px 0;border-radius:2px;transition:transform var(--speed) var(--ease)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,6vw,54px);align-items:center;min-height:72vh;padding-top:24px}
.hero-text h1{font-size:clamp(2.25rem,4.5vw,4rem);line-height:1.05;margin:0 0 14px;letter-spacing:-.5px;text-wrap:balance}
.hero-text .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65);text-shadow:0 10px 40px rgba(0,0,0,.44)}
.hero-text p{margin:0 0 28px;color:var(--muted);max-width:64ch}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap}
.stat{display:grid;gap:4px;padding:12px 16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:var(--border);border-radius:14px;box-shadow:var(--shadow-soft)}
.stat strong{font-size:1.1rem;letter-spacing:.2px}
.stat span{color:var(--muted);font-size:.85rem;letter-spacing:.3px}

.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;color:var(--text);text-decoration:none;background:linear-gradient(180deg, rgba(138,180,255,.2), rgba(179,136,255,.18));border:1px solid rgba(255,255,255,.08);box-shadow:var(--glow);transition:transform var(--speed) var(--ease), filter var(--speed) var(--ease)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.1));color:var(--text)}

.hero-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:var(--border);border-radius:var(--radius-lg);padding:30px 24px 26px;box-shadow:var(--shadow-lift), var(--glow);overflow:hidden;transform:translateZ(0)}
.hero-card::before{content:"";position:absolute;width:420px;height:420px;background:radial-gradient(50% 50% at 50% 50%, rgba(138,180,255,.09), transparent 60%);border-radius:50%;filter:blur(8px);right:-140px;top:-160px;pointer-events:none}
.profile-pic{width:112px;height:112px;border-radius:50%;margin:4px auto 12px;background:#14161b center/cover no-repeat;border:2px solid rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(255,255,255,.02), var(--glow);position:relative;isolation:isolate;overflow:hidden}
.profile-pic::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;right:6px;bottom:6px;background:radial-gradient(circle at 35% 35%, #6b7280 25%, #3b3f46 60%, #2b2f36 100%);border:2px solid #0f1013;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.profile-pic::before{content:"";position:absolute;inset:-50%;transform:translateX(-140%) rotate(18deg);background:linear-gradient(90deg, transparent 0 45%, rgba(255,255,255,.32) 50%, transparent 55% 100%);transition:transform 1.2s cubic-bezier(.2,.7,.1,1);mix-blend-mode:screen}
.profile-pic:hover::before{transform:translateX(60%) rotate(18deg)}
.hero-card h2{text-align:center;margin:8px 0 2px;letter-spacing:.4px}
.hero-card .status{text-align:center;margin:0;color:var(--muted);font-size:.9rem}
.badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.85rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:22px}
.skills-grid .skill{grid-column:span 3;min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-radius:16px;border:var(--border);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));box-shadow:var(--shadow-soft);position:relative;overflow:hidden;transition:transform var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease)}
.skills-grid .skill:hover{transform:translateY(-2px);border-color:rgba(138,180,255,.32);background:linear-gradient(180deg, rgba(138,180,255,.08), rgba(179,136,255,.06))}
.skills-grid .skill .name{font-weight:600}
.skills-grid .skill .lvl{color:var(--muted);font-size:.85rem}
.skills-grid .skill::after{content:"";position:absolute;inset:-120% -40%;transform:translateX(-130%) rotate(10deg);background:linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.28) 50%, transparent 54% 100%);transition:transform 1.1s cubic-bezier(.2,.7,.1,1);pointer-events:none}
.skills-grid .skill:hover::after{transform:translateX(65%) rotate(10deg)}

.contact-card{display:grid;gap:14px;padding:22px;border-radius:16px;border:var(--border);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));box-shadow:var(--shadow-soft);max-width:720px}
.field{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.08)}
.field .key{color:var(--muted)}
.field .value a{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(138,180,255,.35);transition:opacity var(--speed) var(--ease)}
.field .value a:hover{opacity:.85}
.hint{color:var(--muted);font-size:.9rem}

.footer{padding:36px 0 48px;color:var(--muted);text-align:center;border-top:var(--border);background:linear-gradient(to top, rgba(255,255,255,.03), transparent)}

.sweep{position:relative;overflow:hidden;isolation:isolate}
.sweep::after{content:"";position:absolute;inset:-100% -50%;transform:translateX(-120%) rotate(14deg);background:linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.28) 50%, transparent 56% 100%);transition:transform 1.15s cubic-bezier(.2,.7,.1,1);mix-blend-mode:screen;pointer-events:none}
.sweep:hover::after{transform:translateX(70%) rotate(14deg)}

.reveal{opacity:0;transform:translateY(12px) scale(.98);transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease)}
.reveal.reveal-in{opacity:1;transform:none}

.mt-1{margin-top:6px}
.mt-2{margin-top:12px}
.mt-3{margin-top:18px}
.mt-4{margin-top:24px}
.mt-6{margin-top:36px}
.mt-8{margin-top:48px}
.mt-10{margin-top:64px}

.section .line{position:absolute;inset:auto 0 0 0;height:1px;opacity:.25;background:linear-gradient(90deg, transparent, rgba(138,180,255,.45), transparent)}

.no-focus-outline:focus{outline:none}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-card{order:-1}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:64px;right:16px;flex-direction:column;background:rgba(15,16,19,.9);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:var(--shadow-lift);padding:8px;transform-origin:top right;transform:scale(.98);opacity:0;pointer-events:none;transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease)}
  .nav-links a{padding:10px 12px;border-radius:10px}
  .nav.open .nav-links{opacity:1;transform:scale(1);pointer-events:auto}
}

@media (max-width:720px){
  .hero-text h1{letter-spacing:-.3px}
  .grid{grid-template-columns:repeat(6,1fr)}
  .skills-grid .skill{grid-column:span 3}
}

@media (max-width:520px){
  .logo{display:none}
  .grid{grid-template-columns:repeat(4,1fr)}
  .skills-grid .skill{grid-column:span 4}
  .stat{width:100%}
}

@keyframes floatUp{from{transform:translateY(6px);opacity:.85}to{transform:translateY(0);opacity:1}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(138,180,255,0), var(--glow)}50%{box-shadow:0 0 0 6px rgba(138,180,255,.04), var(--glow)}}
h1,h2,h3,h4{font-weight:800}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p.lead{font-size:1.05rem;color:var(--muted);max-width:65ch}
a{color:inherit}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));border:var(--border);border-radius:16px;box-shadow:var(--shadow-soft)}
.card.pad{padding:22px}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 0;min-width:240px}

.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:.85rem;color:var(--muted)}

.kbd{display:inline-block;padding:2px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:.85rem}

table{width:100%;border-collapse:separate;border-spacing:0 10px}
th,td{text-align:left;padding:12px 14px}
thead th{color:var(--muted);font-weight:600}
tbody tr{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
tbody tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
tbody tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

input,textarea{width:100%;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);outline:none;transition:border-color var(--speed) var(--ease), background var(--speed) var(--ease)}
input:focus,textarea:focus{border-color:rgba(138,180,255,.4);background:rgba(255,255,255,.05)}

.form{display:grid;gap:12px;max-width:720px}

.badge.blue{background:rgba(138,180,255,.14);border-color:rgba(138,180,255,.28);color:#dce7ff}
.badge.purple{background:rgba(179,136,255,.14);border-color:rgba(179,136,255,.28);color:#ece4ff}

.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(180deg, rgba(50,120,255,.35), rgba(120,50,255,.25))}
.btn.block{display:flex;justify-content:center;width:100%}

.shadow-sm{box-shadow:0 6px 18px rgba(0,0,0,.22)}
.shadow-md{box-shadow:0 12px 36px rgba(0,0,0,.32)}
.shadow-lg{box-shadow:0 18px 60px rgba(0,0,0,.44)}

.round-sm{border-radius:10px}
.round{border-radius:14px}
.round-lg{border-radius:22px}

.text-muted{color:var(--muted)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-balance{text-wrap:balance}

.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-6{gap:24px}
.p-2{padding:8px}
.p-3{padding:12px}
.p-4{padding:16px}
.p-6{padding:24px}
.px-2{padding-left:8px;padding-right:8px}
.px-3{padding-left:12px;padding-right:12px}
.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.m-0{margin:0}
.mb-1{margin-bottom:6px}
.mb-2{margin-bottom:12px}
.mb-3{margin-bottom:18px}
.mb-4{margin-bottom:24px}
.mb-6{margin-bottom:36px}
.mb-8{margin-bottom:48px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}

.link{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(138,180,255,.35);transition:opacity var(--speed) var(--ease)}
.link:hover{opacity:.85}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);padding:10px 14px;border-radius:12px;background:rgba(15,16,19,.9);color:var(--text);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity var(--speed) var(--ease)}
.toast.show{opacity:1}

.progress{height:8px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg, var(--accent), var(--accent2));transition:width 900ms var(--ease)}

.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:.8rem}

.hero .cta .btn{min-width:120px}

.breathe{animation:softPulse 2600ms ease-in-out infinite}
.float{animation:floatUp 800ms var(--ease) both}

kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

.avatar{width:40px;height:40px;border-radius:50%;background:#14161b center/cover no-repeat;border:1px solid rgba(255,255,255,.08)}

.header-spacer{height:64px}

hr.sep{height:1px;border:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent)}

.color-1{color:#dfe9ff}
.color-2{color:#f0e8ff}
.bg-1{background:rgba(138,180,255,.06)}
.bg-2{background:rgba(179,136,255,.06)}

@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .row{gap:10px}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .btn.block{width:100%}
}

@media (prefers-reduced-motion: no-preference) {
  :root{
    --hover-lift:-4px;
    --hover-rotate:.6deg;
    --shine:linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.22) 50%, transparent 54% 100%);
  }

  a, button, .btn, .card, .skill, .stat, .field, .badge, .contact-card, .nav-links a, .profile-pic, .logo, .tag, .pill {
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), opacity var(--speed) var(--ease), filter var(--speed) var(--ease);
    will-change: transform, box-shadow;
  }

  .btn, .card, .skill, .stat, .field, .badge { transform: translate3d(var(--mx,0), var(--my,0), 0); }

  .card:hover, .skill:hover, .stat:hover, .field:hover, .badge:hover, .contact-card:hover {
    transform: translate3d(var(--mx,0), var(--my,0), 0) translateY(var(--hover-lift)) rotate(var(--hover-rotate));
    box-shadow: var(--shadow-lift), var(--glow);
    border-color: rgba(138,180,255,.32);
    background: linear-gradient(180deg, rgba(138,180,255,.08), rgba(179,136,255,.06));
  }

  .btn:hover { transform: translate3d(var(--mx,0), var(--my,0), 0) translateY(-3px) scale(1.02); filter: brightness(1.06); }
  .btn:active { transform: translate3d(var(--mx,0), var(--my,0), 0) translateY(0) scale(.98); }

  .card, .skill, .contact-card, .btn { position: relative; overflow: hidden; }
  .card::after, .skill::after, .contact-card::after, .btn::before {
    content:""; position:absolute; inset:-120% -40%;
    transform: translateX(-130%) rotate(10deg);
    background: var(--shine);
    transition: transform 1.05s cubic-bezier(.2,.7,.1,1);
    pointer-events:none; mix-blend-mode:screen;
  }
  .card:hover::after, .skill:hover::after, .contact-card:hover::after, .btn:hover::before { transform: translateX(65%) rotate(10deg); }

  @keyframes ringPulse2 { 0%,100%{box-shadow:0 0 0 0 rgba(138,180,255,0), var(--glow)} 50%{box-shadow:0 0 0 8px rgba(138,180,255,.06), var(--glow)} }
  .profile-pic:hover { animation: ringPulse2 1600ms ease-in-out infinite; }

  .section-title:hover, h2:hover { text-shadow:0 0 14px rgba(138,180,255,.35); }

  .nav-toggle { transition: background var(--speed) var(--ease), transform var(--speed) var(--ease); }
  .nav-toggle:hover { transform: translateY(-2px); }
  .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.08); }
  .nav-toggle[aria-expanded="true"] .line:nth-child(1){ transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .line:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .line:nth-child(3){ transform: translateY(-4px) rotate(-45deg); }

  .reveal { will-change: transform, opacity; }
  .reveal.reveal-in { transition-delay:.04s; }
  .skills-grid .skill.reveal-in:nth-child(3n+1){ transition-delay:.05s; }
  .skills-grid .skill.reveal-in:nth-child(3n+2){ transition-delay:.10s; }
  .skills-grid .skill.reveal-in:nth-child(3n){ transition-delay:.15s; }

  input:hover, textarea:hover { border-color: rgba(138,180,255,.28); background: rgba(255,255,255,.05); }
  input:focus, textarea:focus { box-shadow:0 0 0 3px rgba(138,180,255,.18); }

  .footer:hover { background: linear-gradient(to top, rgba(255,255,255,.06), transparent); }
}