/* ============ TOKENS ============ */
:root{
  --ink:#0B0F17;
  --surface:#121926;
  --surface-2:#182233;
  --hairline:#232C3D;
  --text:#E8ECF2;
  --text-muted:#8996A8;
  --amber:#F0A93C;
  --amber-dim:#8a6224;
  --teal:#4FD1C5;
  --radius:14px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --max:1180px;
  --ease:cubic-bezier(.22,.9,.32,1);
}

html[data-theme="light"]{
  --ink:#F5F6F8;
  --surface:#FFFFFF;
  --surface-2:#EEF1F5;
  --hairline:#DDE3EB;
  --text:#111722;
  --text-muted:#5B6675;
  --amber:#B9701E;
  --teal:#0E8C80;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--amber);color:var(--ink);
  padding:.6rem 1rem;z-index:999;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

/* ============ PROGRESS BAR ============ */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--amber),var(--teal));
  z-index:1001;transition:width .1s linear;
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav__inner{
  max-width:var(--max);margin:0 auto;padding:.9rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.nav__brand{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;letter-spacing:.02em;}
.nav__brand-dot{color:var(--amber);}
.nav__links{display:flex;gap:1.8rem;font-size:.92rem;color:var(--text-muted);}
.nav__links a{transition:color .2s;}
.nav__links a:hover{color:var(--text);}
.nav__actions{display:flex;align-items:center;gap:.9rem;}
.theme-toggle{
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--text);
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s;
}
.theme-toggle:hover{border-color:var(--amber);}
.icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:none;}
html[data-theme="light"] .icon-moon{display:block;}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav__burger span{width:22px;height:2px;background:var(--text);display:block;transition:transform .25s,opacity .25s;}
.nav__mobile{
  display:none;flex-direction:column;gap:0;background:var(--surface);
  border-top:1px solid var(--hairline);
}
.nav__mobile a{padding:1rem 1.5rem;border-bottom:1px solid var(--hairline);font-size:.95rem;}
.nav__mobile.open{display:flex;}

@media (max-width:860px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .nav__actions .btn{display:none;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:999px;font-size:.92rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s;
  font-family:var(--font-body);
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--amber);color:#1a1204;}
.btn--primary:hover{background:#f5b552;}
.btn--ghost{background:transparent;border-color:var(--hairline);color:var(--text);}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);}
.btn--small{padding:.5rem 1.1rem;font-size:.85rem;}

/* ============ LAYOUT ============ */
.section__inner{max-width:var(--max);margin:0 auto;padding:6rem 1.5rem;}
.section{position:relative;}
.section--alt{background:var(--surface);}
.eyebrow{
  font-family:var(--font-mono);color:var(--teal);font-size:.85rem;
  margin-bottom:1rem;letter-spacing:.02em;
}
.eyebrow--sm{margin-bottom:.5rem;font-size:.78rem;}
.section__title{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:.75rem;}
.section__sub{color:var(--text-muted);max-width:640px;margin-bottom:3rem;font-size:1.05rem;}

/* ============ HERO ============ */
.hero{position:relative;padding-top:6rem;overflow:hidden;min-height:92vh;display:flex;flex-direction:column;justify-content:center;}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 10%,transparent 75%);
  opacity:.5;
}
.hero__glow{
  position:absolute;top:-10%;right:-10%;width:60%;height:60%;
  background:radial-gradient(circle,color-mix(in srgb,var(--amber) 35%,transparent) 0%,transparent 70%);
  filter:blur(40px);
}
.hero__inner{position:relative;z-index:1;padding-top:2rem;padding-bottom:3rem;}
.hero__layout{display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap;}
.hero__copy{flex:1 1 420px;min-width:0;}
.hero__media{flex:0 0 auto;display:flex;justify-content:center;}
@media (max-width:900px){
  .hero__layout{flex-direction:column-reverse;text-align:center;}
  .hero__cta{justify-content:center;}
}
.hero__title{font-size:clamp(2.6rem,7vw,4.6rem);margin-bottom:.5rem;}
.hero__role{
  font-family:var(--font-mono);font-size:clamp(1rem,2vw,1.3rem);color:var(--amber);
  margin-bottom:1.5rem;min-height:1.8rem;
}
.typing-cursor{animation:blink 1s step-start infinite;color:var(--teal);}
@keyframes blink{50%{opacity:0;}}
.hero__desc{max-width:600px;color:var(--text-muted);font-size:1.08rem;margin-bottom:2.2rem;}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;}

.kpi-strip{
  position:relative;z-index:1;border-top:1px solid var(--hairline);
  background:color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter:blur(6px);
}
.kpi-strip__inner{
  max-width:var(--max);margin:0 auto;padding:2rem 1.5rem;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
}
.kpi{display:flex;flex-direction:column;gap:.3rem;text-align:center;}
.kpi__value{font-family:var(--font-mono);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;color:var(--amber);}
.kpi__label{font-size:.78rem;color:var(--text-muted);}
@media (max-width:860px){
  .kpi-strip__inner{grid-template-columns:repeat(2,1fr);}
}

/* ============ PHOTO FRAME ============ */
.photo-frame{
  position:relative;
  border-radius:28px;
  padding:4px;
  background:linear-gradient(135deg,var(--amber),var(--teal));
  box-shadow:0 20px 55px -18px rgba(0,0,0,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.photo-frame img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:24px;background:var(--surface-2);
}
.photo-frame::before{
  content:"";position:absolute;inset:-16px;z-index:-1;border-radius:40px;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--amber) 32%,transparent),transparent 70%);
  filter:blur(20px);opacity:.75;
}
.photo-frame:hover{transform:translateY(-6px) scale(1.015);}

.photo-frame--hero{
  width:300px;height:300px;border-radius:50%;
  animation:photoFloat 6s ease-in-out infinite;
}
.photo-frame--hero img{border-radius:50%;}
.photo-frame--hero::before{border-radius:50%;}
.photo-frame--hero:hover{animation-play-state:paused;}
@media (max-width:760px){.photo-frame--hero{width:220px;height:220px;}}

.photo-frame--about{
  width:150px;height:150px;border-radius:50%;padding:3px;align-self:flex-start;
}
.photo-frame--about img{border-radius:50%;}
.photo-frame--about::before{border-radius:50%;inset:-10px;}

.photo-frame--contact{
  width:64px;height:64px;border-radius:50%;padding:2px;flex:0 0 auto;
}
.photo-frame--contact img{border-radius:50%;}
.photo-frame--contact::before{border-radius:50%;inset:-6px;opacity:.5;}
.photo-frame--contact:hover{transform:translateY(-2px);}

.contact__intro{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.5rem;}
.contact__intro .section__title{margin-bottom:.3rem;}
.contact__intro .section__sub{margin-bottom:0;}

@keyframes photoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media (prefers-reduced-motion:reduce){.photo-frame--hero{animation:none;}}

/* ============ ABOUT ============ */
.about__grid{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:2.5rem;}
.about__text{color:var(--text-muted);font-size:1.02rem;}
.about__text strong{color:var(--text);}
.about__aside{display:flex;flex-direction:column;gap:1.5rem;border-left:1px solid var(--hairline);padding-left:1.5rem;}
.about__facts{display:flex;flex-direction:column;gap:1rem;}
.fact{display:flex;flex-direction:column;gap:.15rem;}
.fact__k{font-family:var(--font-mono);font-size:.75rem;color:var(--teal);}
.fact__v{font-size:.95rem;}
@media (max-width:960px){
  .about__grid{grid-template-columns:1fr;}
  .about__aside{border-left:none;padding-left:0;border-top:1px solid var(--hairline);padding-top:1.5rem;}
  .about__facts{flex-direction:row;flex-wrap:wrap;gap:1.5rem;}
}

/* ============ TIMELINE ============ */
.timeline__role{margin-bottom:2.5rem;}
.timeline__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-bottom:.5rem;}
.timeline__head h3{font-size:1.4rem;}
.timeline__meta{font-family:var(--font-mono);color:var(--teal);font-size:.85rem;}
.timeline__context{color:var(--text-muted);max-width:640px;}
.timeline__list{list-style:none;margin:0;padding:0;border-left:2px solid var(--hairline);}
.timeline__item{position:relative;padding:0 0 1.6rem 2rem;max-width:760px;}
.timeline__item p{color:var(--text-muted);}
.timeline__item strong{color:var(--text);}
.timeline__dot{
  position:absolute;left:-7px;top:.35rem;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--amber);
}

/* ============ PROJECTS / CASES ============ */
.cases{display:flex;flex-direction:column;gap:2rem;}
.case{
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:2rem;transition:border-color .25s;
}
.case:hover{border-color:var(--amber);}
.case__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;border-bottom:1px solid var(--hairline);padding-bottom:1.5rem;margin-bottom:1.5rem;}
.case__tag{font-family:var(--font-mono);font-size:.78rem;color:var(--teal);}
.case__head h3{font-size:1.5rem;margin:.4rem 0;}
.case__summary{color:var(--text-muted);max-width:520px;}
.case__kpis{display:flex;gap:1.5rem;align-items:flex-start;}
.case__kpis div{display:flex;flex-direction:column;text-align:right;}
.case__kpis strong{font-family:var(--font-mono);font-size:1.3rem;color:var(--amber);}
.case__kpis span{font-size:.72rem;color:var(--text-muted);}
.case__body{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.case__body--compact{grid-template-columns:1fr 1fr;}
.case__col h4{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;margin-top:1.2rem;}
.case__col h4:first-child{margin-top:0;}
.case__col p{color:var(--text-muted);font-size:.95rem;}
.case__col p strong{color:var(--text);}
.case__stack{display:flex;flex-wrap:wrap;gap:.4rem;}
.case__stack span{background:var(--surface);border:1px solid var(--hairline);padding:.2rem .6rem;border-radius:6px;font-family:var(--font-mono);font-size:.75rem;}
@media (max-width:900px){.case__body,.case__body--compact{grid-template-columns:1fr;}}

/* ============ SKILLS ============ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skills__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;}
.skill-group h3{font-size:1.05rem;margin-bottom:1rem;color:var(--teal);}
@media (max-width:760px){.skills__grid{grid-template-columns:1fr;}}

.skill-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.75rem;}
.skill-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:12px;
  padding:1rem .5rem;text-align:center;cursor:default;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.skill-card:hover,.skill-card:focus-visible{
  transform:translateY(-6px);border-color:var(--amber);
  box-shadow:0 14px 28px -16px rgba(240,169,60,.45);
}
.skill-card__icon{
  width:26px;height:26px;color:var(--teal);flex:0 0 auto;
  transition:transform .25s var(--ease),color .25s var(--ease);
}
.skill-card:hover .skill-card__icon,.skill-card:focus-visible .skill-card__icon{
  transform:scale(1.08);color:var(--amber);
}
.skill-card span{font-size:.8rem;font-weight:500;color:var(--text);line-height:1.25;}
@media (max-width:600px){
  .skill-cards{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.6rem;}
  .skill-card{padding:.8rem .4rem;}
}

/* ============ CERTIFICATIONS ============ */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:3.5rem;align-items:stretch;}
.cert{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.cert:hover,.cert:focus-visible{
  transform:translateY(-6px);border-color:var(--amber);
  box-shadow:0 22px 45px -20px rgba(0,0,0,.55);
}
.cert__media{
  position:relative;aspect-ratio:4/2.55;overflow:hidden;background:#fff;
}
.cert__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .5s var(--ease);
}
.cert:hover .cert__media img{transform:scale(1.06);}
.cert__media--placeholder{
  display:flex;align-items:center;justify-content:center;background:var(--surface);
}
.cert__media--placeholder svg{width:48px;height:48px;color:var(--hairline);}
.cert__body{padding:.9rem 1.1rem 1.1rem;flex:1;display:flex;flex-direction:column;gap:.2rem;}
.cert__code{font-family:var(--font-mono);color:var(--amber);font-size:.8rem;}
.cert h3{font-size:.98rem;margin:.35rem 0 0;line-height:1.3;}
@media (max-width:960px){.cert-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cert-grid{grid-template-columns:1fr;}}

.edu-achieve{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid var(--hairline);padding-top:2.5rem;}
.edu h3{font-size:1.1rem;margin:.3rem 0;}
.edu p{color:var(--text-muted);font-size:.92rem;}
@media (max-width:700px){.edu-achieve{grid-template-columns:1fr;}}

/* ============ CONTACT ============ */
.contact__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.contact__card{
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:1.4rem;display:flex;flex-direction:column;gap:.4rem;transition:transform .2s var(--ease),border-color .2s;
}
.contact__card:hover{transform:translateY(-4px);border-color:var(--teal);}
.contact__label{font-family:var(--font-mono);font-size:.75rem;color:var(--teal);}
.contact__value{font-size:.98rem;word-break:break-word;}
@media (max-width:860px){.contact__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.contact__grid{grid-template-columns:1fr;}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--hairline);}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:2rem;padding-bottom:2rem;font-size:.85rem;color:var(--text-muted);}
.back-to-top{
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--text);
  width:38px;height:38px;border-radius:50%;cursor:pointer;transition:border-color .2s,transform .2s;
}
.back-to-top:hover{border-color:var(--amber);transform:translateY(-3px);}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}