/* Core theme */
:root{
  --bg:#070708;
  --bg-2:#0b0c0f;
  --panel:#0f1116;
  --text:#e8e9eb;
  --muted:#a3a6ad;
  --line:#1b1f28;
  --accent:#3b82f6;

  --shadow:0 14px 40px rgba(0,0,0,.55);
  --radius:16px;
  --max:1120px;

  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:radial-gradient(1000px 700px at 20% 10%, rgba(59,130,246,.08), transparent 60%),
             radial-gradient(1200px 900px at 85% 40%, rgba(59,130,246,.06), transparent 55%),
             var(--bg);
  line-height:1.55;
}

body.home-neo{
  --accent:#22d3ee;
  background:radial-gradient(900px 700px at 15% 5%, rgba(34,211,238,.09), transparent 58%),
             radial-gradient(900px 700px at 85% 40%, rgba(168,85,247,.06), transparent 62%),
             radial-gradient(1200px 900px at 55% 85%, rgba(34,211,238,.05), transparent 60%),
             var(--bg);
}

body.about-luxe{
  --accent:#7c3aed;
  background:radial-gradient(1000px 780px at 18% 8%, rgba(124,58,237,.08), transparent 60%),
             radial-gradient(900px 700px at 78% 36%, rgba(59,130,246,.05), transparent 58%),
             var(--bg);
}

body.projects-lab{
  --accent:#38bdf8;
  background:radial-gradient(1000px 780px at 16% 10%, rgba(56,189,248,.08), transparent 60%),
             radial-gradient(1000px 780px at 84% 34%, rgba(59,130,246,.06), transparent 62%),
             var(--bg);
}

body.skills-matrix{
  --accent:#a855f7;
  background:radial-gradient(1000px 780px at 16% 10%, rgba(168,85,247,.08), transparent 60%),
             radial-gradient(1000px 780px at 84% 34%, rgba(56,189,248,.06), transparent 62%),
             var(--bg);
}

body.contact-signal{
  --accent:#22d3ee;
  background:radial-gradient(1000px 780px at 16% 10%, rgba(34,211,238,.08), transparent 60%),
             radial-gradient(1000px 780px at 84% 34%, rgba(168,85,247,.06), transparent 62%),
             var(--bg);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(15,17,22,.95);
  a{color:var(--accent); text-decoration:none; transition:color .18s ease, text-decoration .18s ease}
  a:hover{color:rgba(124,58,237,.84); text-decoration:underline}
  transform:translateY(-140%);
  transition:transform .18s ease;
  border-radius:12px;
  z-index:1000;
}
.skip-link:focus{transform:translateY(0)}

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

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,7,8,.72);
  border-bottom:1px solid rgba(27,31,40,.6);
  backdrop-filter:blur(10px);
}

body.home-neo .site-header{
  background:rgba(7,7,8,.62);
  border-bottom:1px solid rgba(34,211,238,.18);
}
body.projects-lab .site-header{
  background:rgba(7,7,8,.62);
  border-bottom:1px solid rgba(56,189,248,.18);
}
body.skills-matrix .site-header{
  background:rgba(7,7,8,.62);
  border-bottom:1px solid rgba(168,85,247,.18);
}
body.contact-signal .site-header{
  background:rgba(7,7,8,.62);
  border-bottom:1px solid rgba(34,211,238,.18);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
}
.brand-avatar{
  width:28px;
  height:28px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(15,17,22,.75);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  flex:0 0 auto;
}
.brand-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brand-mark{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(232,233,235,.82);
}
.brand-name{
  font-size:16px;
  letter-spacing:.02em;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:rgba(232,233,235,.82);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 10px;
  border-radius:12px;
  transition:background .18s ease, color .18s ease;
}
.nav a:hover{background:rgba(15,17,22,.75); color:var(--text)}
.nav a[aria-current="page"]{
  background:rgba(59,130,246,.12);
  color:var(--text);
  border:1px solid rgba(59,130,246,.26);
}

body.projects-lab .nav a[aria-current="page"]{background:rgba(56,189,248,.10); border-color:rgba(56,189,248,.22)}
body.skills-matrix .nav a[aria-current="page"]{background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.22)}
body.contact-signal .nav a[aria-current="page"]{background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.22)}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:rgba(15,17,22,.7);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
}

main{padding:48px 0 72px}

body.home-neo main{padding:0 0 72px}

.section{padding:34px 0}
.section-header{margin-bottom:18px}

body.about-luxe .section{padding:44px 0}
body.about-luxe .section-header{margin-bottom:22px}

body.about-luxe .section-header h1{
  letter-spacing:-.04em;
  line-height:1.02;
  margin:8px 0 10px;
}
body.about-luxe .section-header h2{letter-spacing:-.03em}
body.about-luxe .section-header p{max-width:72ch}
body.about-luxe .section-header .lead{max-width:68ch}

body.about-luxe .section-header{
  position:relative;
}
body.about-luxe .section-header::after{
  content:"";
  display:block;
  height:1px;
  width:min(560px, 100%);
  margin-top:18px;
  background:linear-gradient(90deg, rgba(124,58,237,.28), rgba(59,130,246,.12), rgba(0,0,0,0));
}

body.about-luxe .about-hero{
  position:relative;
}
body.about-luxe .about-hero::before{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(124,58,237,.12), transparent 58%),
    radial-gradient(520px 320px at 72% 32%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(15,17,22,.42), transparent 70%);
  pointer-events:none;
  z-index:-1;
}

body.about-luxe .about-hero-grid{
  align-items:stretch;
  gap:22px;
}
body.about-luxe .about-hero-copy{align-self:end}
body.about-luxe .about-hero-visual{align-self:end}
body.about-luxe .about-hero::after{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    linear-gradient(rgba(27,31,40,.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.58) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.12;
  pointer-events:none;
  z-index:-1;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(232,233,235,.78);
}
.kicker::before{
  content:"";
  width:14px;
  height:1px;
  background:rgba(59,130,246,.65);
}

h1,h2,h3{margin:0 0 10px}
h1{
  font-size:clamp(34px, 4.2vw, 56px);
  letter-spacing:-.03em;
  line-height:1.04;
}
h2{
  font-size:clamp(22px, 2.2vw, 28px);
  letter-spacing:-.02em;
}
h3{font-size:16px; letter-spacing:.01em}

p{margin:0 0 14px; color:rgba(232,233,235,.86)}
small{color:rgba(232,233,235,.72)}

hr{
  border:0;
  border-top:1px solid rgba(27,31,40,.8);
  margin:26px 0;
}

/* Hero */
.hero{
  padding:18px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:26px;
  align-items:start;
}
.hero-headline{
  display:block;
}
.hero-headline .accent{
  display:inline-block;
  position:relative;
  color:var(--text);
}
.hero-headline .accent::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0));
}

.lead{
  font-size:16px;
  color:rgba(232,233,235,.82);
  max-width:62ch;
}

.hero-card{
  background:linear-gradient(180deg, rgba(15,17,22,.78), rgba(15,17,22,.55));
  border:1px solid rgba(27,31,40,.9);
  border-radius:var(--radius);
  padding:18px 18px;
  box-shadow:var(--shadow);
}
.hero-visual{
  position:relative;
  height:260px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.85);
  background:rgba(7,7,8,.35);
  margin-bottom:14px;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(rgba(27,31,40,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.75) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.22;
  pointer-events:none;
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(560px 320px at 20% 10%, rgba(59,130,246,.16), transparent 55%),
             radial-gradient(460px 340px at 90% 70%, rgba(59,130,246,.10), transparent 60%),
             rgba(7,7,8,.22);
  pointer-events:none;
}
.portrait-frame{
  position:absolute;
  right:-18px;
  top:18px;
  width:62%;
  height:86%;
  border-radius:20px;
  overflow:hidden;
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) skewX(-6deg);
  box-shadow:0 18px 46px rgba(0,0,0,.62);
  border:1px solid rgba(27,31,40,.95);
  transition:transform .22s ease, box-shadow .22s ease;
}
.portrait-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:skewX(6deg) scale(1.03);
  display:block;
}
.portrait-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(7,7,8,.18);
}
.hero-card:hover .portrait-frame{
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) skewX(-6deg) translateY(-2px) scale(1.01);
  box-shadow:0 18px 52px rgba(0,0,0,.72), 0 0 0 1px rgba(59,130,246,.12);
}

.ui-shape{
  position:absolute;
  left:14px;
  bottom:14px;
  width:84px;
  height:84px;
  border-radius:18px;
  border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.06);
  transform:rotate(12deg);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.ui-divider{
  position:absolute;
  left:14px;
  top:18px;
  right:34%;
  height:1px;
  background:linear-gradient(90deg, rgba(59,130,246,.65), rgba(59,130,246,0));
  opacity:.7;
}

/* UI-integrated image variant (for About) */
.ui-photo{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(7,7,8,.35);
  height:320px;
}
.ui-photo::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(rgba(27,31,40,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.75) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.18;
  pointer-events:none;
}
.ui-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(620px 360px at 30% 10%, rgba(59,130,246,.14), transparent 55%),
             rgba(7,7,8,.18);
  pointer-events:none;
}
.ui-photo img{
  position:absolute;
  right:-10px;
  bottom:-14px;
  width:78%;
  height:110%;
  object-fit:cover;
  border-top-left-radius:22px;
  border:1px solid rgba(27,31,40,.95);
  box-shadow:0 18px 52px rgba(0,0,0,.65);
}
.ui-photo .shape-a{
  position:absolute;
  left:14px;
  top:14px;
  width:110px;
  height:110px;
  border-radius:22px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(59,130,246,.05);
  transform:rotate(-8deg);
}
.ui-photo .shape-b{
  position:absolute;
  left:24px;
  bottom:18px;
  width:64px;
  height:64px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.04);
}

/* About visual story */
.about-story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.about-media{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:12px;
  padding:12px;
  border-radius:var(--radius);
  border:1px solid rgba(27,31,40,.9);
  background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.42));
}
.about-media::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:calc(var(--radius) - 8px);
  background:
    linear-gradient(rgba(27,31,40,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.75) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.10;
  pointer-events:none;
}

.photo-card{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.3);
  box-shadow:0 16px 52px rgba(0,0,0,.62);
  transition:transform .18s ease, box-shadow .18s ease;
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0);
}
.photo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(7,7,8,.22);
  pointer-events:none;
}
.about-luxe .photo-card::after{
  background:linear-gradient(180deg, rgba(7,7,8,.10), rgba(7,7,8,.46));
}
.photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-card:hover{
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) translateY(-2px) scale(1.01);
  box-shadow:0 18px 60px rgba(0,0,0,.72), 0 0 0 1px rgba(59,130,246,.12);
}
.about-luxe .photo-card:hover{
  box-shadow:0 22px 76px rgba(0,0,0,.74), 0 0 0 1px rgba(124,58,237,.16);
}
.photo-card figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,233,235,.78);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(27,31,40,.85);
  background:rgba(7,7,8,.55);
  backdrop-filter:blur(8px);
}
.about-luxe .photo-card figcaption{
  border-color:rgba(124,58,237,.16);
  background:rgba(7,7,8,.62);
  color:rgba(232,233,235,.84);
}

.photo-card.primary{
  grid-column:1 / span 8;
  height:420px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) skewX(-4deg);
}
.photo-card.primary img{transform:skewX(4deg) scale(1.02)}

.photo-card.primary:hover{
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) skewX(-4deg) translateY(-2px) scale(1.01);
}

body.home-neo .signature{
  min-height:calc(100vh - 72px);
  padding:64px 0 34px;
  position:relative;
}
body.home-neo .signature-inner{padding-top:10px}
body.home-neo .signature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
body.home-neo .signature-copy{align-self:start; max-width:68ch}
body.home-neo .signature-visual{
  align-self:end;
  margin-top:22px;
}
body.home-neo .signature-copy h1{
  margin:10px 0 12px;
  letter-spacing:-.02em;
  line-height:1.06;
}
body.home-neo .signature-copy .lead{max-width:64ch}

body.home-neo .name-display{
  position:relative;
  padding:8px 0 10px;
}
body.home-neo .name-ghost{
  position:absolute;
  left:-2px;
  top:-10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(26px, 4.6vw, 56px);
  color:rgba(232,233,235,.06);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
body.home-neo .name-top,
body.home-neo .name-bottom{
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1;
}
body.home-neo .name-top{font-size:clamp(34px, 6.2vw, 74px); color:rgba(34,211,238,.92)}
body.home-neo .name-bottom{font-size:clamp(28px, 5.0vw, 58px); color:rgba(232,233,235,.92)}

body.home-neo .name-rule{
  height:1px;
  width:min(420px, 92%);
  margin:10px 0 10px;
  background:linear-gradient(90deg, rgba(34,211,238,.9), rgba(34,211,238,.0));
}

body.home-neo .name-word{display:inline-block}
body.home-neo .name-word .char{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .42s ease, transform .42s ease, text-shadow .42s ease;
  transition-delay:calc(var(--i) * 22ms);
}
body.home-neo .name-display.is-visible .name-word .char{
  opacity:1;
  transform:translateY(0);
}

body.home-neo .name-display:hover .name-word .char{
  transform:translateY(-1px);
  text-shadow:0 0 16px rgba(34,211,238,.10);
}

@media (max-width: 560px){
  body.home-neo .name-ghost{white-space:normal}
}
body.home-neo .signature-facts{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
body.home-neo .signature-facts .fact{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(27,31,40,.88);
  background:rgba(7,7,8,.20);
}
body.home-neo .signature-facts .fact span{color:rgba(232,233,235,.72); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
body.home-neo .signature-facts .fact strong{font-family:var(--mono); font-size:12px; color:rgba(232,233,235,.9)}

body.home-neo .signature-visual{
  position:relative;
  border-radius:var(--radius);
  border:1px solid rgba(27,31,40,.9);
  background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.42));
  padding:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:560px;
}

body.home-neo .neon-lines{
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(rgba(27,31,40,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.75) 1px, transparent 1px);
  background-size:54px 54px;
  opacity:.18;
}
@media (prefers-reduced-motion: no-preference){
  body.home-neo .neon-lines{animation:neoShift 22s linear infinite}
}
@keyframes neoShift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(32px,18px,0)}
}

body.home-neo .portrait-slab{
  position:absolute;
  right:18px;
  top:18px;
  width:min(320px, 44%);
  height:380px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.25);
  box-shadow:0 22px 70px rgba(0,0,0,.65);
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) rotate(.8deg);
}
body.home-neo .portrait-slab img{width:100%; height:100%; object-fit:cover; display:block}
body.home-neo .portrait-slab::after{content:""; position:absolute; inset:0; background:rgba(7,7,8,.18)}

body.home-neo .terminal{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.45);
  box-shadow:0 18px 64px rgba(0,0,0,.7);
  overflow:hidden;
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0);
}
body.home-neo .terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(27,31,40,.85);
  background:rgba(15,17,22,.55);
}
body.home-neo .terminal-title{
  margin-left:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,233,235,.68);
}
body.home-neo .dot{width:8px; height:8px; border-radius:999px; display:inline-block; border:1px solid rgba(27,31,40,.9)}
body.home-neo .dot.d1{background:rgba(255,100,100,.55)}
body.home-neo .dot.d2{background:rgba(255,210,80,.55)}
body.home-neo .dot.d3{background:rgba(34,211,238,.45)}
body.home-neo .terminal-body{
  margin:0;
  padding:12px 12px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color:rgba(232,233,235,.82);
  white-space:pre-wrap;
}

body.projects-lab .terminal{
  border-radius:18px;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.42);
  box-shadow:0 18px 64px rgba(0,0,0,.7);
  overflow:hidden;
}
body.projects-lab .terminal-bar{background:rgba(15,17,22,.55)}
body.projects-lab .terminal-title{color:rgba(232,233,235,.68)}
body.projects-lab .dot.d3{background:rgba(56,189,248,.45)}
body.projects-lab .terminal-body{
  margin:0;
  padding:12px 12px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color:rgba(232,233,235,.82);
}

body.projects-lab .projects-hero{padding:54px 0 16px; position:relative}
body.projects-lab .projects-hero::before{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    radial-gradient(540px 360px at 16% 18%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(540px 360px at 78% 32%, rgba(59,130,246,.08), transparent 62%),
    linear-gradient(180deg, rgba(15,17,22,.42), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
body.projects-lab .projects-hero::after{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    linear-gradient(rgba(27,31,40,.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.58) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.12;
  pointer-events:none;
  z-index:-1;
}
body.projects-lab .projects-hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start}
body.projects-lab .projects-hero-copy p{max-width:72ch}
body.projects-lab .projects-hero-panel{align-self:end}

body.projects-lab .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
body.projects-lab .chip{
  appearance:none;
  border:1px solid rgba(27,31,40,.9);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(7,7,8,.22);
  color:rgba(232,233,235,.82);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
body.projects-lab .chip:hover{border-color:rgba(56,189,248,.20); transform:translateY(-1px)}
body.projects-lab .chip[aria-pressed="true"]{border-color:rgba(56,189,248,.30); background:rgba(56,189,248,.08)}

body.projects-lab .projects-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
body.projects-lab .project-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
body.projects-lab .project-title{margin:0; letter-spacing:-.02em}
body.projects-lab .project-sub{margin:6px 0 0; color:rgba(232,233,235,.78)}
body.projects-lab .project-rail{
  height:1px;
  width:min(420px, 92%);
  margin:12px 0 10px;
  background:linear-gradient(90deg, rgba(56,189,248,.30), rgba(59,130,246,.12), rgba(0,0,0,0));
}

body.projects-lab .process-rail{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px}
body.projects-lab .process-step{position:relative}

body.projects-lab .milestone-strip{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}

@media (max-width: 980px){
  body.projects-lab .projects-hero-inner{grid-template-columns:1fr}
  body.projects-lab .projects-grid{grid-template-columns:1fr}
  body.projects-lab .process-rail{grid-template-columns:1fr}
  body.projects-lab .milestone-strip{grid-template-columns:1fr}
}

body.skills-matrix .terminal{
  border-radius:18px;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.42);
  box-shadow:0 18px 64px rgba(0,0,0,.7);
  overflow:hidden;
}
body.skills-matrix .terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(27,31,40,.85);
  background:rgba(15,17,22,.55);
}
body.skills-matrix .terminal-title{
  margin-left:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,233,235,.68);
}
body.skills-matrix .dot{width:8px; height:8px; border-radius:999px; display:inline-block; border:1px solid rgba(27,31,40,.9)}
body.skills-matrix .dot.d1{background:rgba(255,100,100,.55)}
body.skills-matrix .dot.d2{background:rgba(255,210,80,.55)}
body.skills-matrix .dot.d3{background:rgba(168,85,247,.45)}
body.skills-matrix .terminal-body{white-space:pre-wrap}

body.skills-matrix .skills-hero{padding:54px 0 16px; position:relative}
body.skills-matrix .skills-hero::before{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    radial-gradient(540px 360px at 16% 18%, rgba(168,85,247,.12), transparent 60%),
    radial-gradient(540px 360px at 78% 32%, rgba(56,189,248,.08), transparent 62%),
    linear-gradient(180deg, rgba(15,17,22,.42), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
body.skills-matrix .skills-hero::after{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    linear-gradient(rgba(27,31,40,.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.58) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.12;
  pointer-events:none;
  z-index:-1;
}
body.skills-matrix .skills-hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
body.skills-matrix .skills-hero-copy p{max-width:72ch}
body.skills-matrix .skills-hero-panel{align-self:end}

body.skills-matrix .skills-jump{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
body.skills-matrix .skills-jump .chip{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(27,31,40,.9);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(7,7,8,.22);
  color:rgba(232,233,235,.82);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
body.skills-matrix .skills-jump .chip:hover{border-color:rgba(168,85,247,.20); transform:translateY(-1px)}

body.skills-matrix .skills-overview .meter{margin-top:12px}

body.skills-matrix .meter > span{background:rgba(168,85,247,.75)}

body.skills-matrix .skill-track:hover{border-color:rgba(168,85,247,.20)}
body.skills-matrix .skill-item:hover{border-color:rgba(168,85,247,.18)}

body.skills-matrix .skill-heading{margin:18px 0 12px; letter-spacing:-.02em}
body.skills-matrix .skill-strip{
  display:flex;
  gap:14px;
  overflow:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.skills-matrix .skill-item{min-width:min(420px, 88vw); scroll-snap-align:start}

@media (max-width: 980px){
  body.skills-matrix .skills-hero-inner{grid-template-columns:1fr}
}

body.contact-signal .terminal{
  border-radius:18px;
  border:1px solid rgba(27,31,40,.92);
  background:rgba(7,7,8,.42);
  box-shadow:0 18px 64px rgba(0,0,0,.7);
  overflow:hidden;
}
body.contact-signal .terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(27,31,40,.85);
  background:rgba(15,17,22,.55);
}
body.contact-signal .terminal-title{
  margin-left:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,233,235,.68);
}
body.contact-signal .dot{width:8px; height:8px; border-radius:999px; display:inline-block; border:1px solid rgba(27,31,40,.9)}
body.contact-signal .dot.d1{background:rgba(255,100,100,.55)}
body.contact-signal .dot.d2{background:rgba(255,210,80,.55)}
body.contact-signal .dot.d3{background:rgba(34,211,238,.45)}
body.contact-signal .terminal-body{white-space:pre-wrap}

body.contact-signal .contact-hero{padding:54px 0 16px; position:relative}
body.contact-signal .contact-hero::before{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    radial-gradient(540px 360px at 16% 18%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(540px 360px at 78% 32%, rgba(168,85,247,.08), transparent 62%),
    linear-gradient(180deg, rgba(15,17,22,.42), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
body.contact-signal .contact-hero::after{
  content:"";
  position:absolute;
  inset:-10px -10px auto -10px;
  height:360px;
  border-radius:28px;
  background:
    linear-gradient(rgba(27,31,40,.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.58) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.12;
  pointer-events:none;
  z-index:-1;
}
body.contact-signal .contact-hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
body.contact-signal .contact-hero-copy p{max-width:72ch}
body.contact-signal .contact-hero-panel{align-self:end}
body.contact-signal .contact-quick{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

body.contact-signal .contact-card:hover{border-color:rgba(34,211,238,.20)}

body.contact-signal .contact-form-grid{display:grid; grid-template-columns:1fr .9fr; gap:14px; align-items:start}

@media (max-width: 980px){
  body.contact-signal .contact-hero-inner{grid-template-columns:1fr}
  body.contact-signal .contact-form-grid{grid-template-columns:1fr}
}

body.home-neo .signature-visual .terminal{
  position:absolute;
  left:14px;
  bottom:14px;
  width:min(520px, calc(100% - 28px));
}

body.home-neo .hscroll{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:4px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.home-neo .hitem{
  min-width:280px;
  scroll-snap-align:start;
}

body.home-neo .stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
body.home-neo .stat-k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,233,235,.68)}
body.home-neo .stat-v{font-size:clamp(28px, 3.2vw, 38px); letter-spacing:-.03em; margin-top:10px}
body.home-neo .stat-d{margin-top:8px; color:rgba(232,233,235,.78)}

@media (max-width: 980px){
  body.home-neo .signature-grid{grid-template-columns:1fr}
  body.home-neo .signature-copy{max-width:none}
  body.home-neo .signature-visual{min-height:560px}
  body.home-neo .portrait-slab{width:min(380px, 70%)}
  body.home-neo .stats{grid-template-columns:1fr}
}

@media (max-width: 560px){
  body.home-neo .signature{min-height:auto}
  body.home-neo .portrait-slab{position:relative; right:auto; top:auto; width:100%; height:280px; margin-bottom:10px}
  body.home-neo .signature-visual .terminal{position:relative; left:auto; bottom:auto; width:100%}
}

.photo-card.secondary{
  height:190px;
}
.photo-card.secondary.s1{grid-column:9 / span 4}
.photo-card.secondary.s2{grid-column:6 / span 7}

.about-copy{display:grid; gap:14px}

/* About hero */
.about-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.about-hero-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(7,7,8,.28);
  box-shadow:var(--shadow);
  height:520px;
}
.about-hero-frame img{width:100%; height:100%; object-fit:cover; display:block}
.about-hero-frame::after{content:""; position:absolute; inset:0; background:rgba(7,7,8,.20); pointer-events:none}
.about-hero-lines{
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(rgba(27,31,40,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,31,40,.75) 1px, transparent 1px);
  background-size:52px 52px;
  opacity:.14;
  pointer-events:none;
}
.about-hero-shape{
  position:absolute;
  left:16px;
  bottom:16px;
  width:96px;
  height:96px;
  border-radius:22px;
  border:1px solid rgba(59,130,246,.24);
  background:rgba(59,130,246,.06);
  transform:rotate(10deg);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}

body.about-luxe .about-hero-frame{
  background:linear-gradient(180deg, rgba(15,17,22,.70), rgba(15,17,22,.40));
}
body.about-luxe .about-hero-lines{opacity:.12}
body.about-luxe .about-hero-shape{
  border-color:rgba(124,58,237,.26);
  background:rgba(124,58,237,.06);
}

body.about-luxe .about-hero-frame{
  box-shadow:0 26px 90px rgba(0,0,0,.62);
}
body.about-luxe .about-hero-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(0,0,0,.42) 100%);
  pointer-events:none;
}
body.about-luxe .about-hero-frame img{transform:scale(1.02)}

body.about-luxe .about-hero-shape{
  filter:drop-shadow(0 18px 44px rgba(124,58,237,.08));
}

/* About name display (hero) */
body.about-luxe .about-name-display{
  position:relative;
  margin:10px 0 10px;
  padding:6px 0 6px;
}
body.about-luxe .about-name-ghost{
  position:absolute;
  left:-2px;
  top:-12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(22px, 3.6vw, 40px);
  color:rgba(232,233,235,.06);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
body.about-luxe .about-name-top,
body.about-luxe .about-name-bottom{
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1;
}
body.about-luxe .about-name-top{font-size:clamp(30px, 4.8vw, 56px); color:rgba(124,58,237,.92)}
body.about-luxe .about-name-bottom{font-size:clamp(24px, 4.1vw, 46px); color:rgba(232,233,235,.92)}
body.about-luxe .about-name-rule{
  height:1px;
  width:min(360px, 92%);
  margin:10px 0 10px;
  background:linear-gradient(90deg, rgba(124,58,237,.9), rgba(124,58,237,0));
}
body.about-luxe .about-name-word{display:inline-block}
body.about-luxe .about-name-word .char{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .42s ease, transform .42s ease, text-shadow .42s ease;
  transition-delay:calc(var(--i) * 20ms);
}
body.about-luxe .about-name-display.is-visible .about-name-word .char{opacity:1; transform:translateY(0)}
body.about-luxe .about-name-display:hover .about-name-word .char{transform:translateY(-1px); text-shadow:0 0 16px rgba(124,58,237,.10)}

@media (max-width: 560px){
  body.about-luxe .about-name-ghost{white-space:normal}
}

/* Certificates strip */
.cert-strip{
  display:flex;
  gap:14px;
  overflow:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cert-wide{min-width:min(520px, 92vw); scroll-snap-align:start}

body.about-luxe .cert-strip{gap:16px; padding:6px 2px 14px}
body.about-luxe .cert-wide{min-width:min(560px, 92vw)}
body.about-luxe .cert-thumb{height:170px}

body.about-luxe .cert{
  background:linear-gradient(180deg, rgba(15,17,22,.70), rgba(15,17,22,.42));
}
body.about-luxe .cert-top{align-items:flex-start}
body.about-luxe .cert-title{letter-spacing:-.02em}
body.about-luxe .cert-meta{color:rgba(232,233,235,.68)}

body.about-luxe .timeline::before{background:rgba(27,31,40,.9)}
body.about-luxe .t-item::before{border-color:rgba(124,58,237,.45); background:rgba(124,58,237,.12)}

@media (max-width: 880px){
  .about-hero-grid{grid-template-columns:1fr}
  .about-hero-frame{height:420px}
}

@media (max-width: 880px){
  .about-story{grid-template-columns:1fr}
  .photo-card.primary{grid-column:1 / -1; height:380px}
  .photo-card.secondary.s1{grid-column:1 / span 6}
  .photo-card.secondary.s2{grid-column:7 / span 6}
}

@media (max-width: 540px){
  .photo-card.secondary.s1{grid-column:1 / -1; height:180px}
  .photo-card.secondary.s2{grid-column:1 / -1; height:180px}
}
.hero-meta{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(27,31,40,.8);
  border-radius:14px;
  background:rgba(7,7,8,.35);
}
.meta-row span{color:rgba(232,233,235,.72); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.meta-row strong{font-family:var(--mono); font-size:12px; color:rgba(232,233,235,.9)}

/* Fact list (used on homepage + elsewhere) */
.facts{
  list-style:none;
  padding:0;
  margin:14px 0;
  display:grid;
  gap:10px;
}
.facts li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(27,31,40,.85);
  border-radius:14px;
  background:rgba(7,7,8,.22);
}
.facts li span{color:rgba(232,233,235,.72); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.facts li strong{font-family:var(--mono); font-size:12px; color:rgba(232,233,235,.9)}

body.about-luxe .about-me{position:relative}
body.about-luxe .about-me-grid{align-items:start; gap:16px}
body.about-luxe .about-me-card{background:linear-gradient(180deg, rgba(15,17,22,.72), rgba(15,17,22,.44))}
body.about-luxe .about-me-timeline{background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.40))}

.about-me-highlights{
  list-style:none;
  padding:0;
  margin:14px 0;
  display:grid;
  gap:10px;
}
.about-me-highlights li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(27,31,40,.85);
  border-radius:14px;
  background:rgba(7,7,8,.22);
}
.about-me-highlights li span{color:rgba(232,233,235,.72); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.about-me-highlights li strong{font-family:var(--mono); font-size:12px; color:rgba(232,233,235,.9)}

@media (max-width: 880px){
  body.about-luxe .about-me-grid{grid-template-columns:1fr}
}

/* Buttons */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(27,31,40,.95);
  background:rgba(15,17,22,.65);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .18s ease, border-color .18s ease, filter .18s ease;
  user-select:none;
  will-change:transform;
}
.btn:hover{background:rgba(15,17,22,.9); border-color:rgba(59,130,246,.3)}
.btn.primary{border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.11)}
.btn.primary:hover{background:rgba(59,130,246,.16)}

/* Cards / grids */
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0, 1fr))}

.card{
  border:1px solid rgba(27,31,40,.9);
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.42));
  transition:border-color .18s ease, background .18s ease;
}
.card:hover{border-color:rgba(59,130,246,.28); background:linear-gradient(180deg, rgba(15,17,22,.72), rgba(15,17,22,.46))}

body.about-luxe .card{
  box-shadow:0 18px 54px rgba(0,0,0,.48);
}
body.about-luxe .card:hover{
  border-color:rgba(124,58,237,.22);
}

body.about-luxe .card{padding:18px}
body.about-luxe .card:hover{box-shadow:0 22px 70px rgba(0,0,0,.56)}

.card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(232,233,235,.72);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(27,31,40,.85);
  background:rgba(7,7,8,.25);
}

.tech{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.pill{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(232,233,235,.78);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(27,31,40,.85);
  background:rgba(7,7,8,.18);
}

body.home-neo .btn.primary{border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.10)}
body.home-neo .btn.primary:hover{background:rgba(34,211,238,.14)}
body.home-neo .btn:hover{border-color:rgba(34,211,238,.28)}
body.home-neo .nav a[aria-current="page"]{background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.24)}

/* Timeline */
.timeline{position:relative; padding-left:18px}
.timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  bottom:6px;
  width:1px;
  background:rgba(27,31,40,.95);
}
.t-item{position:relative; padding:10px 0 10px 16px}
.t-item::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.55);
}
.t-item time{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,233,235,.68);
  margin-bottom:6px;
}

.timeline.compact .t-item{padding:8px 0 8px 16px}

/* Proof of growth */
.proof{display:grid; gap:18px}
.proof-block{
  border:1px solid rgba(27,31,40,.9);
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.42));
}
.proof-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.proof-narrative{display:grid; gap:18px}
.proof-primary{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:start;
  border:1px solid rgba(27,31,40,.9);
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(15,17,22,.42));
}
.proof-note{align-self:stretch}
.proof-note p{color:rgba(232,233,235,.84)}

.proof-secondary .proof-block{padding:16px}
.context-group{display:grid; gap:10px}
.context-line{
  margin:0;
  color:rgba(232,233,235,.78);
  font-size:13px;
  max-width:66ch;
}

.mosaic{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:12px;
}
.tile{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(7,7,8,.35);
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .18s ease;
  --parallax-x:0px;
  --parallax-y:0px;
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0);
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(7,7,8,.24);
  pointer-events:none;
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tile:hover{
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0) translateY(-2px) scale(1.01);
  box-shadow:0 18px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(59,130,246,.14);
}

.mosaic-personal .p1{grid-column:1 / span 7; height:260px}
.mosaic-personal .p2{grid-column:8 / span 5; height:180px}
.mosaic-personal .p3{grid-column:8 / span 5; height:220px}
.mosaic-personal .p4{grid-column:1 / span 7; height:160px}

.mosaic-context .c1{grid-column:1 / span 7; height:240px}
.mosaic-context .c2{grid-column:8 / span 5; height:150px}
.mosaic-context .c3{grid-column:8 / span 5; height:210px}

/* Certificates */
.cert{padding:14px}
.cert-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.cert-title{margin:0 0 6px; font-size:15px}
.cert-meta{margin:0; color:rgba(232,233,235,.72); font-size:13px}
.cert-thumb{margin-top:14px; border-radius:14px; overflow:hidden; border:1px solid rgba(27,31,40,.85); background:rgba(0,0,0,.18); height:150px}
.cert-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cert-thumb .cert-pdf{width:100%; height:100%; border:0; display:block; background:rgba(0,0,0,.18)}

/* CV + YouTube */
.list{margin:10px 0 0; padding-left:18px; color:rgba(232,233,235,.84)}
.list li{margin:6px 0}
.cv .cv-block h2{margin:0}
.cv .cv-block h3{margin:12px 0 8px}

.cv-page .resume-head{display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:start}
.cv-page .resume-identity{display:flex; gap:14px; align-items:center}
.cv-page .resume-photo{width:96px; height:96px; border-radius:18px; overflow:hidden; border:1px solid rgba(27,31,40,.9); background:rgba(7,7,8,.25)}
.cv-page .resume-photo img{width:100%; height:100%; object-fit:cover; display:block}
.cv-page .resume-sub{margin:8px 0 0; color:rgba(232,233,235,.72)}

.cv-page .resume-contact-grid{display:grid; gap:10px; margin-top:10px}
.cv-page .rc{display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(27,31,40,.85); background:rgba(7,7,8,.18)}
.cv-page .rc-k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,233,235,.68)}
.cv-page .rc-v{color:rgba(232,233,235,.92); text-decoration:none; transition:color .18s ease, text-decoration .18s ease}
.cv-page .rc-v:hover{color:rgba(124,58,237,.84); text-decoration:underline}

.yt-page .yt-head{display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:start}
.yt-page .yt-note{margin:10px 0 0; color:rgba(232,233,235,.74)}
.yt-page .card .actions{margin-top:10px}
.yt-page .card .actions a.btn{transition:background .18s ease, border-color .18s ease, transform .18s ease}
.yt-page .card .actions a.btn:hover{transform:translateY(-1px)}
.yt-page .video-thumb{display:block; position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(27,31,40,.85); background:rgba(0,0,0,.25)}
.yt-page .video-thumb::before{content:""; display:block; padding-top:56.25%}
.yt-page .video-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95) contrast(1.02)}
.yt-page .yt-email-line{margin:10px 0; font-size:16px; font-weight:500; letter-spacing:-.01em}
.yt-page .yt-email-line a{color:rgba(34,211,238,.88); text-decoration:none; transition:color .18s ease, text-decoration .18s ease}
.yt-page .yt-email-line a:hover{color:rgba(34,211,238,.96); text-decoration:underline}

.cv-page .section-header p{max-width:76ch}
.cv-page h1{letter-spacing:-.02em}
.cv-page .resume-title .lead{margin-top:10px}
.cv-page .resume-title .resume-sub{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,233,235,.68)}

.cv-page .resume-photo{box-shadow:0 18px 56px rgba(0,0,0,.55)}
.cv-page .resume-contact{position:relative}
.cv-page .resume-contact::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(124,58,237,.10) inset;
}

.cv-page .rc{transition:border-color .18s ease, background .18s ease, transform .18s ease}
.cv-page .rc:hover{border-color:rgba(124,58,237,.22); background:rgba(7,7,8,.26)}

.cv-page .skill{transition:border-color .18s ease, background .18s ease}
.cv-page .skill:hover{border-color:rgba(124,58,237,.20); background:rgba(7,7,8,.28)}
.cv-page .meter{background:rgba(27,31,40,.95)}
.cv-page .meter > span{background:rgba(124,58,237,.72)}

.cv-page .card .tech{margin-top:10px}
.cv-page .card p{max-width:72ch}

.yt-page .section-header p{max-width:76ch}
.yt-page h1{letter-spacing:-.02em}

.yt-page .yt-links{position:relative}
.yt-page .yt-links::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(34,211,238,.08) inset;
}

.yt-page .video-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px}
.yt-page .video-grid.compact{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
.yt-page .video-card{padding:14px}
.yt-page .video-grid.compact .video-card{padding:10px}
.yt-page .video-title{margin:12px 0 6px; font-size:15px}
.yt-page .video-grid.compact .video-title{margin:8px 0 4px; font-size:14px}
.yt-page .video-thumb{transition:transform .18s ease, border-color .18s ease, filter .18s ease}
.yt-page .video-thumb::before{content:""; display:block; padding-top:56.25%}
.yt-page .video-grid.compact .video-thumb::before{padding-top:56.25%}
.yt-page .video-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95) contrast(1.02)}
.yt-page .video-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.35)); opacity:.0; transition:opacity .18s ease}
.yt-page .video-card:hover .video-thumb{transform:translateY(-2px) scale(1.01); border-color:rgba(34,211,238,.18)}
.yt-page .video-grid.compact .video-card:hover .video-thumb{transform:translateY(-1px) scale(1.005)}
.yt-page .video-card:hover .video-thumb::after{opacity:1}
.yt-page .video-card:hover{border-color:rgba(34,211,238,.16)}

@media (max-width: 760px){
  .yt-page .video-grid{grid-template-columns:1fr}
  .yt-page .video-grid.compact{grid-template-columns:1fr}
}

@media (max-width: 980px){
  .cv-page .resume-head{grid-template-columns:1fr}
  .yt-page .yt-head{grid-template-columns:1fr}
}

.cv-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start}
.cv-meta{margin-top:14px; display:grid; gap:10px; max-width:70ch}
.cv-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid rgba(27,31,40,.85); border-radius:14px; background:rgba(7,7,8,.18)}
.cv-k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,233,235,.68)}
.cv-v{font-weight:600; color:rgba(232,233,235,.92)}
.cv-note{margin:0 0 10px; color:rgba(232,233,235,.78)}

.yt-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start}
.yt-note{margin:0 0 10px; color:rgba(232,233,235,.78)}

.video-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.video-frame{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(27,31,40,.85); background:rgba(0,0,0,.25)}
.video-frame::before{content:""; display:block; padding-top:56.25%}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-title{margin:12px 0 6px; font-size:14px; letter-spacing:-.01em}
.video-caption{margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,233,235,.68)}

.video-playlist-container{margin:20px 0}
.video-playlist-container .video-wrapper{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(27,31,40,.85); background:rgba(0,0,0,.25); box-shadow:0 4px 20px rgba(0,0,0,.3)}
.video-playlist-container .video-wrapper::before{content:""; display:block; padding-top:56.25%}
.video-playlist-container .video-wrapper iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:14px}
.video-playlist-container .video-wrapper:hover{border-color:rgba(56,189,248,.3); box-shadow:0 6px 25px rgba(56,189,248,.15)}

@media (max-width: 980px){
  .cv-hero{grid-template-columns:1fr}
  .yt-hero{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
}

/* Milestones */
.milestone{padding:16px}
.milestone-k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,233,235,.68)}
.milestone-v{font-size:18px; letter-spacing:-.01em; margin-top:8px}
.milestone-d{margin-top:8px; color:rgba(232,233,235,.78)}

/* Modal */
.modal[hidden]{display:none}
.modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
}
.modal-panel{
  position:relative;
  width:min(980px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(27,31,40,.95);
  background:rgba(7,7,8,.88);
  box-shadow:0 24px 70px rgba(0,0,0,.75);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(27,31,40,.85);
}
.modal-actions{display:flex; align-items:center; gap:10px}
.modal-title{margin:0; font-size:14px; letter-spacing:.02em}
.modal-close{
  border:1px solid rgba(27,31,40,.95);
  background:rgba(15,17,22,.6);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
}
.modal-body{padding:14px}
.modal-media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(0,0,0,.25);
}
.modal-media img{width:100%; height:auto; display:block}
.modal-media iframe{width:100%; height:min(74vh, 860px); border:0; display:block; background:rgba(0,0,0,.22)}

/* CV + YouTube */
.list{margin:10px 0 0; padding-left:18px; color:rgba(232,233,235,.84)}
.list li{margin:6px 0}
.cv .cv-block h2{margin:0}
.cv .cv-block h3{margin:12px 0 8px}

.video-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.video-frame{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(27,31,40,.85); background:rgba(0,0,0,.25)}
.video-frame::before{content:""; display:block; padding-top:56.25%}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-caption{margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,233,235,.68)}

@media (max-width: 980px){
  .video-grid{grid-template-columns:1fr}
}

/* Skills */
.skill-group{display:grid; gap:10px}
.skill{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(27,31,40,.9);
  background:rgba(7,7,8,.2);
}
.skill .name{font-size:14px}
.skill .level{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,233,235,.72)}
.meter{
  grid-column:1 / -1;
  height:8px;
  border-radius:999px;
  background:rgba(27,31,40,.95);
  overflow:hidden;
}
.meter > span{
  display:block;
  height:100%;
  width:0;
  background:rgba(59,130,246,.75);
  transition:width .9s ease;
}

/* Form */
.form{
  display:grid;
  gap:12px;
}
.field{display:grid; gap:8px}
label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,233,235,.78)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(27,31,40,.95);
  background:rgba(15,17,22,.55);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
}
textarea{min-height:140px; resize:vertical}
input[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:rgba(255,80,80,.65)}
.error{color:rgba(255,160,160,.88); font-size:12px}
.status{padding:12px 12px; border-radius:14px; border:1px solid rgba(27,31,40,.9); background:rgba(7,7,8,.25)}

/* Footer */
.site-footer{
  border-top:1px solid rgba(27,31,40,.8);
  padding:22px 0;
  color:rgba(232,233,235,.72);
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.footer-note{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible{opacity:1; transform:translateY(0)}

/* Custom cursor */
.cursor-dot, .cursor-ring{position:fixed; left:0; top:0; pointer-events:none; z-index:9999; opacity:0}
.cursor-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
}
.cursor-ring{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
  background:rgba(0,0,0,.04);
}

@media (pointer:fine){
  body:not(.no-custom-cursor){cursor:none}
  body:not(.no-custom-cursor) .cursor-dot,
  body:not(.no-custom-cursor) .cursor-ring{opacity:1}
}

.no-custom-cursor .cursor-dot,
.no-custom-cursor .cursor-ring{opacity:0}

body.cursor-hover .cursor-ring{transform:scale(1.25)}

/* Responsive */
@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}

  .hero-visual{height:300px}
  .portrait-frame{right:-10px; width:70%}
}

@media (max-width: 720px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .nav.nav-open{
    display:flex;
    position:absolute;
    right:20px;
    top:58px;
    flex-direction:column;
    padding:12px;
    background:rgba(7,7,8,.92);
    border:1px solid rgba(27,31,40,.9);
    border-radius:16px;
    width:min(280px, calc(100vw - 40px));
  }
  .grid.two{grid-template-columns:1fr}

  .hero-visual{height:320px}
  .portrait-frame{
    right:-14px;
    top:16px;
    width:78%;
    height:88%;
  }
  .ui-photo{height:340px}
  .ui-photo img{width:86%}

  .mosaic{grid-template-columns:repeat(6, minmax(0, 1fr))}
  .mosaic-personal .p1{grid-column:1 / -1; height:240px}
  .mosaic-personal .p2{grid-column:1 / span 3; height:160px}
  .mosaic-personal .p3{grid-column:4 / span 3; height:160px}
  .mosaic-personal .p4{grid-column:1 / -1; height:180px}

  .mosaic-context .c1{grid-column:1 / -1; height:220px}
  .mosaic-context .c2{grid-column:1 / span 3; height:150px}
  .mosaic-context .c3{grid-column:4 / span 3; height:150px}

  .proof-primary{grid-template-columns:1fr}
}