:root{
  --bg:#0a0d14;
  --panel:#121827;
  --panel-2:#172033;
  --text:#f7f8fc;
  --muted:#c3cbda;
  --soft:#8d98ad;
  --line:rgba(255,255,255,.13);
  --accent:#d9436e;
  --accent-2:#6c63ff;
  --gold:#f1c77a;
  --glass:rgba(255,255,255,.065);
  --glass-strong:rgba(255,255,255,.105);
  --shadow:0 24px 80px rgba(0,0,0,.32);
  --shadow-hover:0 34px 95px rgba(0,0,0,.44);
  --radius:26px;
  --max:1160px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 5%,rgba(217,67,110,.2),transparent 34%),
    radial-gradient(circle at 80% 12%,rgba(108,99,255,.18),transparent 28%),
    radial-gradient(circle at 55% 92%,rgba(241,199,122,.09),transparent 30%),
    linear-gradient(180deg,#080b12,#101827 52%,#0b0f18);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 75%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{padding-left:1.2rem}
p{color:var(--muted)}
::selection{background:rgba(217,67,110,.45);color:#fff}

.container{width:min(100% - clamp(1rem,4vw,2rem),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;background:#fff;color:#111;padding:.65rem 1rem;border-radius:10px;z-index:999}
.skip-link:focus{left:8px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(8,11,18,.74);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.16);
}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800;letter-spacing:.02em;border-radius:18px;padding:.35rem .45rem;transition:transform .28s var(--ease),background .28s var(--ease)}
.brand:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.brand img{width:44px;height:44px;border-radius:15px;object-fit:cover;box-shadow:0 10px 30px rgba(217,67,110,.22)}
.brand small{display:block;color:var(--soft);font-weight:700;font-size:.78rem}
.nav-links{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.nav-links a{
  position:relative;
  padding:.7rem .9rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:750;
  border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:var(--line);
  color:var(--text);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.nav-cta{background:linear-gradient(135deg,rgba(217,67,110,.32),rgba(108,99,255,.24));border-color:rgba(255,255,255,.16)!important;color:var(--text)!important}

.section{padding:30px 0}
.section-lg{padding:42px 0 30px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:1rem;align-items:stretch}
.hero-copy,.hero-photo,.card,.skill,.job,.resume-card,.contact-grid{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  overflow:hidden;
}
.hero-copy::before,.card::before,.skill::before,.job::before,.resume-card::before,.contact-grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 36%);
  opacity:.55;
}
.hero-copy,.card,.skill,.job,.resume-card,.contact-grid{transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease),background .34s var(--ease)}
.card:hover,.skill:hover,.job:hover,.resume-card:hover,.contact-grid:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
}
.hero-copy{padding:clamp(1.4rem,3.2vw,3rem);display:flex;flex-direction:column;justify-content:center}
.eyebrow,.card-kicker{color:var(--gold);font-weight:850;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.hero h1{font-size:clamp(2.4rem,5.2vw,5rem);line-height:.95;letter-spacing:-.06em;margin:.75rem 0 1rem;max-width:11ch;text-wrap:balance}
.lead{font-size:clamp(1rem,1.6vw,1.1rem);max-width:68ch}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:.9rem 1.15rem;
  border-radius:16px;
  font-weight:850;
  border:1px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease),background .25s var(--ease);
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -70%;
  width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);
  transition:left .65s var(--ease);
}
.btn:hover::after{left:115%}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.28)}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:rgba(255,255,255,.22)}
.primary:hover{filter:saturate(1.15) brightness(1.06)}
.secondary{background:rgba(255,255,255,.065)}
.secondary:hover{background:rgba(255,255,255,.11)}
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.4rem}
.quick-stats div{padding:1rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.quick-stats div:hover{transform:translateY(-4px) scale(1.02);background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.22)}
.quick-stats dt{font-size:1.35rem;font-weight:900}
.quick-stats dd{color:var(--muted);font-size:.9rem}
.hero-photo{isolation:isolate}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.46));pointer-events:none;z-index:1}
.hero-photo img{width:100%;height:100%;min-height:600px;object-fit:cover;filter:saturate(1.02) contrast(1.03);transition:transform .7s var(--ease),filter .7s var(--ease)}
.hero-photo:hover img{transform:scale(1.045);filter:saturate(1.1) contrast(1.06)}
.hero-photo figcaption{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;padding:1rem;border-radius:18px;background:rgba(8,11,18,.72);border:1px solid var(--line);backdrop-filter:blur(12px);color:var(--text);font-weight:750}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{padding:1.35rem}
.card h2,.section-head h2,.contact-grid h2{font-size:clamp(1.55rem,3vw,2.35rem);letter-spacing:-.035em;margin:.2rem 0 .65rem;text-wrap:balance}
.accent-card{background:linear-gradient(135deg,rgba(217,67,110,.2),rgba(108,99,255,.13))}
.clean-list{display:grid;gap:.35rem;color:var(--muted);font-weight:720}
.section-head{margin-bottom:1rem}
.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.skill{padding:1.2rem}
.skill h3{margin-bottom:.35rem;transition:color .25s var(--ease)}
.skill:hover h3{color:var(--gold)}
.timeline{display:grid;gap:1rem}
.job{display:grid;grid-template-columns:190px 1fr;gap:1rem;padding:1.2rem}
.job-meta{border-right:1px solid var(--line);padding-right:1rem;color:var(--muted)}
.job-meta strong{display:block;color:var(--gold);font-size:1.05rem}
.job h3{margin-bottom:.45rem}
.resume-card{padding:1.3rem}
.compact p{max-width:70ch}
.ats-box{background:#fff;color:#101522;border-radius:18px;padding:1.15rem;margin-top:1rem;box-shadow:inset 0 0 0 1px rgba(16,21,34,.08)}
.ats-box p,.ats-box li{color:#202536}
.ats-box h3,.ats-box h4{margin:.65rem 0 .15rem;color:#101522}
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:1rem;padding:1.4rem;align-items:center}
.contact-actions{display:grid;gap:.75rem}
.contact-actions a{padding:1rem;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:16px;font-weight:800;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.contact-actions a:hover,.contact-actions a:focus-visible{transform:translateX(6px);background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.22)}
.footer{padding:35px 0 50px;color:var(--soft)}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1rem}

@media(max-width:950px){
  html{scroll-padding-top:130px}
  .hero-grid,.grid-2,.contact-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-photo img{min-height:clamp(340px,64vw,560px)}
  .job{grid-template-columns:1fr}
  .job-meta{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:.8rem}
  .quick-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  .site-header{position:relative}
  html{scroll-padding-top:20px}
  .nav{align-items:flex-start;flex-direction:column;padding:.8rem 0}
  .nav-links{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .nav-links a{text-align:center;padding:.72rem .7rem;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}
  .hero h1{font-size:clamp(2.25rem,11vw,3.2rem);max-width:12ch}
  .hero-actions{display:grid}
  .btn{width:100%}
  .quick-stats{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .section{padding:22px 0}
  .section-lg{padding-top:26px}
  .hero-copy,.card,.skill,.job,.resume-card,.contact-grid,.hero-photo{border-radius:20px}
  .contact-actions a:hover,.contact-actions a:focus-visible{transform:translateY(-3px)}
}

@media(max-width:430px){
  .container{width:min(100% - 1rem,var(--max))}
  .nav-links{grid-template-columns:1fr}
  .brand{align-items:flex-start}
  .brand img{width:40px;height:40px}
  .hero-copy,.card,.skill,.job,.resume-card,.contact-grid{padding:1rem}
  .hero-photo figcaption{left:.75rem;right:.75rem;bottom:.75rem;font-size:.92rem}
  .ats-box{padding:.9rem;font-size:.94rem;overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .hero-photo:hover img,.card:hover,.skill:hover,.job:hover,.resume-card:hover,.contact-grid:hover,.btn:hover,.quick-stats div:hover{transform:none!important}
}