/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --void:#07090D;
  --surface-1:#0E121B;
  --surface-2:#161B27;
  --surface-3:#1D2433;
  --line:rgba(244,246,250,0.09);
  --line-strong:rgba(244,246,250,0.16);
  --azure:#3FA0FF;
  --azure-dim:rgba(63,160,255,0.14);
  --ember:#FF6B45;
  --ember-dim:rgba(255,107,69,0.14);
  --gold:#D4AF6A;
  --gold-dim:rgba(212,175,106,0.14);
  --ink-100:#F4F6FA;
  --ink-70:#B7BECC;
  --ink-50:#8C93A6;
  --ink-30:#5B6275;
  --grad-signature:linear-gradient(90deg,var(--azure),var(--ember));
  --grad-signature-soft:linear-gradient(90deg,rgba(63,160,255,0.5),rgba(255,107,69,0.5));
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --container:1280px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--ink-100);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

::selection{background:var(--azure); color:var(--void);}

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

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--azure);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   UTILITY / LAYOUT
   ============================================================ */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
section{position:relative; padding:140px 0;}
@media (max-width:900px){ section{padding:96px 0;} }
@media (max-width:600px){ section{padding:76px 0;} .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--azure);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--grad-signature);
  flex-shrink:0;
}
.eyebrow.ember{color:var(--ember);}
.eyebrow.gold{color:var(--gold);}

.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin-bottom:20px;
  max-width:780px;
}
.section-intro{
  color:var(--ink-70);
  font-size:17px;
  max-width:620px;
  margin-bottom:56px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head .section-title, .section-head .section-intro{margin-bottom:0;}

.divider-grad{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--azure) 18%, var(--ember) 82%, transparent);
  opacity:0.35;
}

.tag{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  padding:5px 11px;
  border-radius:20px;
  border:1px solid var(--line-strong);
  color:var(--ink-70);
  background:var(--surface-2);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.tag .dot{width:5px;height:5px;border-radius:50%;background:var(--azure);}
.tag.ember .dot{background:var(--ember);}
.tag.gold .dot{background:var(--gold);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  padding:14px 26px;
  border-radius:10px;
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary{
  background:var(--ink-100);
  color:var(--void);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(244,246,250,0.35);}
.btn-ghost{
  border:1px solid var(--line-strong);
  color:var(--ink-100);
  background:rgba(255,255,255,0.02);
}
.btn-ghost:hover{background:rgba(255,255,255,0.06); transform:translateY(-2px);}

.card{
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-signature);
  opacity:0.55;
}
.card.ember::before{background:linear-gradient(90deg,var(--ember),var(--gold));}
.card.gold::before{background:linear-gradient(90deg,var(--gold),var(--azure));}

.kpi{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,40px);
  font-weight:600;
  line-height:1;
  color:var(--ink-100);
}
.kpi-label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.05em;
  color:var(--ink-50);
  margin-top:8px;
  text-transform:uppercase;
}

.glass{
  background:rgba(14,18,27,0.6);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line);
}

.proof-frame{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  position:relative;
}
.proof-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.proof-cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-50);
  padding:10px 4px 0;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s cubic-bezier(.16,.84,.44,1), transform 0.8s cubic-bezier(.16,.84,.44,1);
}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:18px 0;
  transition:padding 0.3s ease, background 0.3s ease;
}
#nav .navbar{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#nav.scrolled{
  padding:10px 0;
  background:rgba(7,9,13,0.72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.logo-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark .mark{
  width:34px;height:34px;
  border-radius:9px;
  background:var(--grad-signature);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:14px;
  color:var(--void);
  font-weight:700;
}
.nav-links{
  display:flex;
  gap:30px;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-70);
}
.nav-links a{transition:color 0.2s ease; position:relative; padding:4px 0;}
.nav-links a:hover{color:var(--ink-100);}
.nav-cta{display:flex; align-items:center; gap:16px;}
#navToggle{display:none;}
@media (max-width:880px){
  .nav-links{display:none;}
  #navToggle{display:flex; width:38px;height:38px;border:1px solid var(--line-strong);border-radius:9px;align-items:center;justify-content:center;}
  .nav-cta .btn span{display:none;}
  .nav-cta .btn{padding:12px;}
}

#mobileMenu{
  position:fixed; inset:0; z-index:300;
  background:rgba(7,9,13,0.98);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column;
  padding:100px 32px 40px;
  gap:8px;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(.16,.84,.44,1);
}
#mobileMenu.open{transform:translateX(0);}
#mobileMenu a{font-family:var(--font-display); font-size:26px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:500;}
#mobileMenu .close{position:absolute; top:28px; right:28px; width:40px;height:40px;border:1px solid var(--line-strong);border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:20px;}

/* progress bar */
#scrollProgress{
  position:fixed; top:0; left:0; height:2px; background:var(--grad-signature);
  z-index:250; width:0%; transition:width 0.1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:140px;
  position:relative;
  overflow:hidden;
}
.hero-aurora{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(63,160,255,0.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 15% 80%, rgba(255,107,69,0.13), transparent 60%);
  animation:auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-2%,2%) scale(1.06);}
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:linear-gradient(rgba(244,246,250,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244,246,250,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:40px;
  align-items:center;
  width:100%;
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:56px;}
}
.hero-copy .eyebrow{font-size:13px;}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(44px,6.6vw,82px);
  line-height:0.99;
  letter-spacing:-0.015em;
}
.hero-title .grad{
  background:var(--grad-signature);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-role{
  font-family:var(--font-mono);
  font-size:clamp(14px,1.6vw,17px);
  color:var(--ink-70);
  margin-top:22px;
  height:26px;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-role .cursor{
  width:8px; height:18px; background:var(--azure); display:inline-block; animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0;}}
.hero-desc{
  margin-top:26px;
  color:var(--ink-70);
  font-size:17px;
  max-width:540px;
}
.hero-actions{
  margin-top:38px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-stats{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:36px;
}
@media (max-width:680px){
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:28px;}
}
.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
}
.portrait-frame{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:4/5;
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.7);
}
.portrait-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.portrait-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(63,160,255,0.22), transparent 45%, rgba(255,107,69,0.22));
  mix-blend-mode:overlay;
}
.portrait-frame::before{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(7,9,13,0.92), transparent);
  z-index:2;
}
.portrait-badge{
  position:absolute; bottom:20px; left:20px; right:20px; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.portrait-badge .name{font-family:var(--font-display); font-weight:600; font-size:18px;}
.portrait-badge .loc{font-family:var(--font-mono); font-size:11px; color:var(--ink-70); margin-top:3px;}
.portrait-orbit{
  position:absolute;
  border:1px solid var(--line);
  border-radius:50%;
  z-index:-1;
}
.scroll-cue{
  position:absolute; bottom:34px; left:32px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-50);
  letter-spacing:0.08em;
}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(to bottom, var(--ink-50), transparent); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{opacity:0.3;} 50%{opacity:1;}}
@media (max-width:680px){ .scroll-cue{display:none;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  overflow:hidden;
  background:var(--surface-1);
}
.marquee{
  display:flex;
  white-space:nowrap;
  gap:48px;
  animation:marquee 32s linear infinite;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.05em;
  color:var(--ink-50);
}
.marquee span{display:flex; align-items:center; gap:48px;}
.marquee b{color:var(--ink-100); font-weight:600;}
@keyframes marquee{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ============================================================
   EXEC PROFILE / ABOUT
   ============================================================ */
#about .about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:start;
}
@media (max-width:900px){ #about .about-grid{grid-template-columns:1fr;} }
.exec-card{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--surface-1);
}
.exec-photo{aspect-ratio:3/3.6; overflow:hidden;}
.exec-photo img{width:100%; height:100%; object-fit:cover;}
.exec-meta{padding:26px 26px 28px;}
.exec-meta .name{font-family:var(--font-display); font-size:22px; font-weight:600;}
.exec-meta .role{color:var(--azure); font-family:var(--font-mono); font-size:12.5px; margin-top:6px;}
.exec-facts{margin-top:20px; display:flex; flex-direction:column; gap:11px;}
.exec-facts .row{display:flex; justify-content:space-between; font-size:13px; padding-bottom:11px; border-bottom:1px solid var(--line);}
.exec-facts .row:last-child{border-bottom:none; padding-bottom:0;}
.exec-facts .row .k{color:var(--ink-50); font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em;}
.exec-facts .row .v{color:var(--ink-100); font-weight:500; text-align:right;}

.about-copy p{color:var(--ink-70); font-size:16.5px; margin-bottom:20px;}
.about-copy strong{color:var(--ink-100); font-weight:600;}
.pillar-row{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:36px;}
@media (max-width:560px){.pillar-row{grid-template-columns:1fr;}}
.pillar{
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  background:var(--surface-1);
}
.pillar .ic{font-size:20px;}
.pillar h4{font-family:var(--font-display); font-size:16px; margin:12px 0 6px; font-weight:600;}
.pillar p{font-size:13.5px; color:var(--ink-50); margin:0;}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{
  position:relative;
  margin-top:20px;
  padding-left:36px;
  border-left:1px solid var(--line-strong);
}
.t-item{position:relative; padding-bottom:56px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
  content:'';
  position:absolute; left:-42px; top:4px;
  width:13px; height:13px; border-radius:50%;
  background:var(--void);
  border:2px solid var(--azure);
}
.t-item.ember::before{border-color:var(--ember);}
.t-item .t-year{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--azure);
  letter-spacing:0.06em;
}
.t-item.ember .t-year{color:var(--ember);}
.t-item h4{
  font-family:var(--font-display);
  font-size:23px;
  font-weight:600;
  margin:10px 0 6px;
}
.t-item .t-org{color:var(--ink-50); font-size:13.5px; margin-bottom:14px;}
.t-item p.t-desc{color:var(--ink-70); font-size:15px; max-width:680px;}
.t-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}

/* ============================================================
   SKILLS
   ============================================================ */
.skill-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:980px){.skill-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.skill-grid{grid-template-columns:1fr;}}
.skill-card h4{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.skill-card .ic-dot{width:9px;height:9px;border-radius:3px;background:var(--azure);}
.skill-card.ember .ic-dot{background:var(--ember);}
.skill-card.gold .ic-dot{background:var(--gold);}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}

/* ============================================================
   PROJECT FEATURE (Flagship)
   ============================================================ */
.feature-card{
  border-radius:24px;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg, rgba(63,160,255,0.06), rgba(255,107,69,0.04));
  padding:48px;
  position:relative;
  overflow:hidden;
}
@media (max-width:700px){.feature-card{padding:30px;}}
.feature-card::before{
  content:'';
  position:absolute; top:-1px; left:0; right:0; height:2px;
  background:var(--grad-signature);
}
.feature-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
  margin-bottom:28px;
}
.feature-top h3{
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,36px);
  font-weight:600;
  max-width:620px;
}
.feature-meta-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin:32px 0 36px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (max-width:760px){.feature-meta-grid{grid-template-columns:repeat(2,1fr);}}
.feature-meta-grid .k{font-family:var(--font-mono); font-size:11px; color:var(--ink-50); text-transform:uppercase; letter-spacing:0.05em;}
.feature-meta-grid .v{font-family:var(--font-display); font-size:16.5px; margin-top:6px; font-weight:600;}
.feature-bullets{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px; margin-bottom:36px;}
@media (max-width:760px){.feature-bullets{grid-template-columns:1fr;}}
.feature-bullets li{display:flex; gap:12px; font-size:14.5px; color:var(--ink-70);}
.feature-bullets li::before{content:'';flex-shrink:0; width:6px;height:6px;border-radius:50%; margin-top:7px; background:var(--grad-signature);}
.feature-stats{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
@media (max-width:760px){.feature-stats{grid-template-columns:repeat(2,1fr);}}
.feature-proofs{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:36px;}
@media (max-width:680px){.feature-proofs{grid-template-columns:1fr;}}

/* ============================================================
   GENERIC PROJECT CARD GRID
   ============================================================ */
.proj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr;}}
.proj-card h4{font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:6px;}
.proj-card .proj-meta{font-family:var(--font-mono); font-size:11px; color:var(--ink-50); margin-bottom:16px; letter-spacing:0.03em;}
.proj-card p.desc{color:var(--ink-70); font-size:14.5px; margin-bottom:18px;}
.proj-card ul.bullets{display:flex; flex-direction:column; gap:9px; margin-bottom:18px;}
.proj-card ul.bullets li{font-size:13.5px; color:var(--ink-70); display:flex; gap:10px;}
.proj-card ul.bullets li::before{content:'';flex-shrink:0; width:5px;height:5px;border-radius:50%; margin-top:7px; background:var(--azure);}
.proj-card.ember ul.bullets li::before{background:var(--ember);}
.proj-stat-row{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}
.proj-stat-row .ps{display:flex; flex-direction:column;}
.proj-stat-row .ps b{font-family:var(--font-display); font-size:18px;}
.proj-stat-row .ps span{font-family:var(--font-mono); font-size:10px; color:var(--ink-50); text-transform:uppercase; margin-top:3px;}
.proj-shots{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px;}
.proj-shots.x4{grid-template-columns:repeat(4,1fr);}
@media (max-width:600px){.proj-shots.x4{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   APP SHOWCASE
   ============================================================ */
.app-showcase{
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--surface-1);
  padding:36px;
  margin-bottom:24px;
}
@media (max-width:600px){.app-showcase{padding:24px;}}
.app-head{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:24px;}
.app-head h4{font-family:var(--font-display); font-size:24px; font-weight:600;}
.app-head .app-stack{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-50); margin-top:8px;}
.phone-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:thin;
}
.phone-strip::-webkit-scrollbar{height:6px;}
.phone-strip::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:3px;}
.phone-strip .pframe{
  flex:0 0 auto;
  width:150px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line-strong);
}
.dash-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:760px){.dash-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   STATS / IMPACT
   ============================================================ */
.impact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
@media (max-width:860px){.impact-grid{grid-template-columns:repeat(2,1fr);}}
.impact-cell{
  background:var(--surface-1);
  padding:34px 28px;
}
.impact-cell .kpi{font-size:clamp(26px,3vw,38px);}

/* ============================================================
   CERTS
   ============================================================ */
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){.cert-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cert-grid{grid-template-columns:1fr;}}
.cert-card{border-radius:16px; overflow:hidden; border:1px solid var(--line-strong); background:var(--surface-1);}
.cert-card .shot{aspect-ratio:4/3; overflow:hidden; background:#fff;}
.cert-card .shot img{width:100%; height:100%; object-fit:contain;}
.cert-card .info{padding:16px 18px;}
.cert-card .info h5{font-family:var(--font-display); font-size:14.5px; font-weight:600;}
.cert-card .info span{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-50); display:block; margin-top:4px;}

.edu-row{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:32px;}
@media (max-width:700px){.edu-row{grid-template-columns:1fr;}}
.edu-card{display:flex; gap:18px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface-1);}
.edu-card .deg{font-family:var(--font-display); font-size:16.5px; font-weight:600;}
.edu-card .sch{color:var(--ink-50); font-size:13px; margin-top:4px;}
.edu-card .yr{font-family:var(--font-mono); font-size:11px; color:var(--azure); margin-top:8px;}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.gtab{
  font-family:var(--font-mono);
  font-size:12px;
  padding:9px 18px;
  border-radius:30px;
  border:1px solid var(--line-strong);
  color:var(--ink-50);
  transition:all 0.2s ease;
}
.gtab.active{background:var(--ink-100); color:var(--void); border-color:var(--ink-100);}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media (max-width:980px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gitem{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  cursor:pointer;
  position:relative;
  background:var(--surface-1);
  transition:transform 0.3s ease, border-color 0.3s ease;
}
.gitem:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.gitem .shot{aspect-ratio:4/3; overflow:hidden;}
.gitem .shot img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.gitem:hover .shot img{transform:scale(1.07);}
.gitem .gcap{padding:12px 14px; font-size:12px; color:var(--ink-70); font-weight:500;}
.gitem .gcat{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-50); text-transform:uppercase; letter-spacing:0.05em; padding:0 14px 12px;}
.gitem[data-cat] {display:block;}
.gitem.hidden{display:none;}

#lightbox{
  position:fixed; inset:0; background:rgba(4,5,8,0.92);
  display:none; align-items:center; justify-content:center; z-index:500;
  padding:40px; backdrop-filter:blur(6px);
}
#lightbox.open{display:flex;}
#lightbox img{max-width:90vw; max-height:85vh; border-radius:10px; border:1px solid var(--line-strong);}
#lightbox .lb-close{position:absolute; top:28px; right:32px; width:44px;height:44px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center;justify-content:center; font-size:18px;}

/* ============================================================
   RECOGNITION
   ============================================================ */
.recog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){.recog-grid{grid-template-columns:1fr;}}
.recog-card{padding:28px;}
.recog-card .q{font-size:30px; color:var(--azure); font-family:var(--font-display);}
.recog-card p{color:var(--ink-70); font-size:14.5px; margin-top:10px;}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
#contact{
  text-align:center;
  position:relative;
}
.contact-title{
  font-family:var(--font-display);
  font-size:clamp(36px,6vw,72px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.015em;
}
.contact-sub{
  color:var(--ink-70);
  font-size:17px;
  max-width:560px;
  margin:24px auto 44px;
}
.contact-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:64px;}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  max-width:920px;
  margin:0 auto;
}
@media (max-width:760px){.contact-grid{grid-template-columns:repeat(2,1fr);}}
.contact-cell{
  background:var(--surface-1);
  padding:26px 22px;
  text-align:left;
  transition:background 0.25s ease;
}
.contact-cell:hover{background:var(--surface-2);}
.contact-cell .k{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-50); text-transform:uppercase; letter-spacing:0.05em;}
.contact-cell .v{font-family:var(--font-display); font-size:14.5px; margin-top:8px; font-weight:500; word-break:break-word;}

footer{
  border-top:1px solid var(--line);
  padding:32px 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-30);
}

/* generic helper */
.cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){.cols-3{grid-template-columns:1fr;}}
.center-narrow{max-width:680px; margin:0 auto; text-align:center;}