:root{
  --dark:#07111f;
  --navy:#0b1b31;
  --black:#05070b;
  --yellow:#f5c542;
  --white:#fff;
  --muted:#cbd5e1;
  --line:rgba(255,255,255,.15);
  --card:rgba(255,255,255,.08);
  --shadow:0 28px 85px rgba(0,0,0,.35);
  --tab-section-width:1120px;
  --tab-section-height:430px;
  --tab-section-padding:42px;
  --tab-card-gap:22px;
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:0;
}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#020912;
  color:white;
  line-height:1.55;
  min-width:320px;
  overflow-x:hidden;
}
a{
  color:inherit;
  text-decoration:none;
}
.nav{
  position:fixed;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  gap:8px;
  padding:9px;
  border-radius:999px;
  background:rgba(7,17,31,.84);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  box-shadow:0 12px 36px rgba(0,0,0,.2);
}
.nav a{
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.nav a:hover{
  background:var(--yellow);
  color:#07111f;
}
.page{
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:118px 7vw 84px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#07111f,#0b1b31);
  border-bottom:none;
  box-shadow:none;
  padding-left:calc(7vw + 34px);
}
.kicker{
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:900;
}
h1{
  font-size:clamp(42px,6.2vw,92px);
  line-height:.95;
  letter-spacing:-.065em;
  margin:18px 0 24px;
  color:white;
  white-space:nowrap;
}
h2{
  font-size:clamp(34px,4.7vw,66px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0 0 22px;
  color:white;
}
h3{
  font-size:24px;
  margin:0 0 10px;
  color:white;
  letter-spacing:-.02em;
}
p{
  color:var(--muted);
  margin-top:0;
}
.lead{
  font-size:20px;
  max-width:900px;
  color:var(--muted);
  margin:0 0 24px;
}
.home{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:50px;
  align-items:center;
  background:transparent;
}
/* Image left, text right */
.home .hero-photo-col{ order:-1; }
.home #hero-text-container{ order:0; }

/* Glass card behind the hero photo */
.hero-photo-col{
  position:relative;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-glass-card{
  position:relative;
  width:min(380px,55%);
  padding:10px;
  border-radius:34px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:2px solid rgba(255,255,255,.22);
  box-shadow:
    0 34px 100px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.hero-glass-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:35px;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(245,197,66,.06) 40%,transparent 100%);
  pointer-events:none;
  z-index:0;
}
.hero-glass-card img{
  position:relative;
  z-index:1;
  width:100%;
  display:block;
  border-radius:24px;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:32% 15%;
  opacity:0.88;
  transition:opacity .4s ease;
}
.hero-glass-card:hover img{
  opacity:0.96;
}
/* Glass overlay shimmer on image */
.hero-glass-card::after{
  content:'';
  position:absolute;
  inset:10px 10px 8px;
  border-radius:24px;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.00) 40%,
    rgba(200,220,255,.04) 100%
  );
  pointer-events:none;
  z-index:2;
}
/* Glow ring behind card */
.hero-photo-col::after{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,197,66,.10) 0%,rgba(99,130,255,.06) 40%,transparent 70%);
  z-index:-1;
  pointer-events:none;
}
.btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
}
.btn{
  padding:14px 21px;
  border-radius:999px;
  font-weight:850;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:white;
}
.btn.primary{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
.floating-photo-card{
  width:min(520px,70%);
  justify-self:center;
  padding:10px;
  border-radius:34px;
  background:white;
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.25);
}
.floating-photo-card img{
  width:100%;
  display:block;
  border-radius:24px;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
}
.metric-strip{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:20px;
  background:rgba(255,255,255,.97);
  color:#101828;
  border-radius:13px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  overflow:hidden;
}
.metric{
  padding:34px 28px;
  text-align:center;
  border-right:1px solid rgba(16,24,40,.12);
  color:#ffffff;
}
.metric:last-child{
  border-right:0;
}
.metric .icon{
  color:#f5c542;
  font-size:30px;
}
.metric strong{
  display:block;
  margin-top:8px;
  font-size:28px;
  color:#101828;
}
.metric span{
  display:block;
  margin-top:6px;
  font-size:15px;
  color:#475467;
  font-weight:650;
  opacity:.88;
}
.section-grid{
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  gap:42px;
  align-items:start;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:30px;
  padding:30px;
  box-shadow:0 20px 58px rgba(0,0,0,.18);
}
#about h2{
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.02;
  color:#172118;
  letter-spacing:-.045em;
}
.about-title-photo{
  margin-top:20px;
  max-width:430px;
  padding:12px;
  border-radius:30px;
  background:white;
  box-shadow:var(--shadow);
}
.about-title-photo img{
  width:100%;
  display:block;
  border-radius:22px;
  aspect-ratio:4/5;
  object-fit:cover;
}
.pill-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
}
.pill-card{
  background:var(--black);
  border:1px solid rgba(245,197,66,.25);
  border-radius:28px;
  padding:30px;
  min-height:140px;
}
.pill-card h3,.tech-card h3,.course-card h3{
  color:var(--yellow);
  font-size:21px;
}
.pill-card p,.tech-card p,.course-card p{
  margin:0;
  font-size:15px;
  color:var(--muted);
}
.experience-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.face-card{
  min-height:245px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.35s ease;
}
.face-card:hover{
  transform:translateY(-14px) scale(1.035);
  box-shadow:0 34px 95px rgba(0,0,0,.36);
  border-color:rgba(245,197,66,.78);
  background:var(--black);
}
.logo-slot{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(245,197,66,.13);
  border:1px solid rgba(245,197,66,.28);
  color:var(--yellow);
  font-weight:950;
  font-size:18px;
  margin-bottom:18px;
}
.company{
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  font-size:12px;
}
.role-title{
  color:white;
  font-size:27px;
  font-weight:900;
  line-height:1.1;
  margin-top:10px;
}
.role-meta{
  color:var(--muted);
  font-weight:750;
  margin-top:16px;
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.image-card{
  min-height:340px;
  border-radius:34px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#05070b,#10243f);
  box-shadow:0 28px 80px rgba(0,0,0,.3);
  border:1px solid var(--line);
}
.image-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));
}
.project-visual{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:86px;
  color:rgba(245,197,66,.36);
  background:radial-gradient(circle at 22% 18%,rgba(245,197,66,.24),transparent 30%);
}
.image-card-content{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:1;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.chip{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(245,197,66,.12);
  border:1px solid rgba(245,197,66,.26);
  color:var(--yellow);
  font-size:12px;
  font-weight:850;
}
.image-card p{
  margin:0;
  color:var(--muted);
}
.tech-grid,.course-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.tech-card,.course-card{
  min-height:220px;
}
.tool-symbol{
  width:60px;
  height:60px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(245,197,66,.13);
  border:1px solid rgba(245,197,66,.28);
  color:var(--yellow);
  font-weight:950;
  font-size:24px;
  margin-bottom:18px;
}
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.contact-hero{
  background:var(--black);
  border:1px solid rgba(245,197,66,.25);
  border-radius:34px;
  padding:38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-hero h3{
  font-size:34px;
  color:var(--yellow);
}
.contact-links{
  display:grid;
  gap:18px;
}
.contact-links a{
  padding:24px 26px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:white;
  font-weight:900;
  font-size:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.contact-links a:hover{
  background:var(--yellow);
  color:#07111f;
}
.stack-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.stack-top{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:34px;
  align-items:center;
}
.stack-heading{
  text-align:center;
  margin-bottom:10px;
}
.stack-heading h2{
  text-align:center;
  margin-bottom:14px;
}
.stack-heading p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
}
.concept-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.concept-card{
  min-height:145px;
}
.concept-card h3{
  color:var(--yellow);
  font-size:22px;
}
.tools-panel{
  min-width:0;
}
.tools-title{
  text-align:center;
  margin-bottom:18px;
}
.tools-title h3{
  font-size:34px;
  color:white;
  margin:0;
}
.tools-title p{
  max-width:720px;
  margin:10px auto 0;
  color:var(--muted);
}
.marquee-shell{
  position:relative;
  overflow:hidden;
  padding:16px 0;
  margin-top:8px;
}
.marquee-shell:before,.marquee-shell:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:92px;
  z-index:2;
  pointer-events:none;
}
.marquee-shell:before{
  left:0;
  background:linear-gradient(90deg,#0b1b31,rgba(11,27,49,0));
}
.marquee-shell:after{
  right:0;
  background:linear-gradient(270deg,#0b1b31,rgba(11,27,49,0));
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:18px;
  animation:marqueeLeft 34s linear infinite;
}
.marquee-track.reverse{
  animation:marqueeRight 39s linear infinite;
  margin-top:18px;
}
.marquee-shell:hover .marquee-track{
  animation-play-state:paused;
}
.logo-card{
  min-width:172px;
  height:112px;
  border-radius:26px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--line);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  font-weight:900;
  color:white;
}
.logo-card span{
  display:block;
  color:var(--yellow);
  font-size:24px;
  margin-bottom:4px;
}
.logo-card small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.showcase-intro{
  text-align:center;
  max-width:860px;
  margin:0 auto 20px;
}
.showcase-intro h2{
  text-align:center;
}
.edu-marquee .logo-card{
  min-width:260px;
  height:142px;
  justify-items:start;
  text-align:left;
  place-items:center start;
}
.edu-marquee .logo-card span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.edu-marquee .logo-card strong{
  display:block;
  font-size:19px;
  line-height:1.15;
  margin:4px 0;
  color:white;
}
.edu-marquee .logo-card small{
  font-size:13px;
  line-height:1.35;
}
.stack-split{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:30px;
  min-height:calc(100vh - 250px);
}
.technologies-row{
  display:grid;
  grid-template-columns:.34fr .66fr;
  gap:34px;
  align-items:center;
}
.technology-heading h2{
  font-size:clamp(36px,4.8vw,64px);
  margin-bottom:14px;
}
.tech-card-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tech-mini-card{
  min-height:190px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:30px;
  padding:28px;
  box-shadow:0 20px 58px rgba(0,0,0,.18);
}
.tech-mini-card h3{
  color:var(--yellow);
  font-size:22px;
}
.tools-band{
  border-top:1px solid var(--line);
  padding-top:26px;
}
.tools-band .tools-title{
  text-align:center;
  margin-bottom:18px;
}
.tools-band .tools-title h3{
  font-size:36px;
  margin:0;
  color:white;
}
.tools-band .tools-title p{
  max-width:760px;
  margin:8px auto 0;
  color:var(--muted);
}
.logo-marquee{
  position:relative;
  overflow:hidden;
  padding:22px 0;
  width:100%;
}
.logo-marquee:before,.logo-marquee:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.logo-marquee:before{
  left:0;
  background:linear-gradient(90deg,#0b1b31,rgba(11,27,49,0));
}
.logo-marquee:after{
  right:0;
  background:linear-gradient(270deg,#0b1b31,rgba(11,27,49,0));
}
.logo-track{
  display:flex;
  gap:0;
  width:max-content;
  animation:logoLeft 42s linear infinite;
  animation-duration:28s;
}
.logo-track.reverse{
  animation:logoRight 48s linear infinite;
  margin-top:20px;
  animation-duration:32s;
}
.logo-marquee:hover .logo-track{
  animation-play-state:paused;
}
.tool-logo-card{
  width:180px;
  height:96px;
  flex:0 0 auto;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  color:#101828;
  font-weight:900;
  margin-right:18px;
}
.tool-logo-card span{
  display:block;
  color:#0b1b31;
  font-size:19px;
}
.tool-logo-card small{
  display:block;
  color:#667085;
  font-size:11px;
  margin-top:2px;
  font-weight:750;
}
.education-showcase{
  text-align:center;
  max-width:980px;
  margin:0 auto 26px;
}
.education-showcase h2{
  display:inline-block;
  background:rgba(245,197,66,.11);
  padding:0 10px;
  margin-bottom:12px;
}
.edu-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:26px 0 28px;
}
.edu-tab{
  padding:11px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.25s ease;
}
.edu-tab.active{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
.edu-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1120px;
  margin:0 auto;
  opacity:1;
  transition:opacity .2s ease;
}
.edu-logo-card{
  min-height:270px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(18,33,64,.96), rgba(8,19,42,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.30),
    0 0 0 1px rgba(245,197,66,.08) inset;
  padding:24px 24px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.edu-logo-card:hover{
  transform:translateY(-5px);
  border-color:rgba(245,197,66,.28);
  background:var(--black);
  box-shadow:0 24px 56px rgba(0,0,0,.38),
    0 0 22px rgba(19,74,189,.18);
}
.edu-logo-box{
  height:108px;
  border-radius:24px;
  background:rgba(245,247,251,.98);
  display:grid;
  place-items:center;
  color:#0b1730;
  font-weight:900;
  font-size:32px;
  margin-bottom:18px;
  letter-spacing:-.02em;
}
.edu-badge{
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(245,197,66,.14);
  color:#f5c542;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  margin-bottom:12px;
}
.edu-logo-card h3{
  font-size:28px;
  text-align:center;
  margin:0 0 10px 0;
  line-height:1.18;
  color:#ffffff;
}
.edu-logo-card p{
  text-align:center;
  margin:0;
  color:rgba(238,244,255,.82);
  font-size:18px;
  line-height:1.55;
}
.worked-band{
  margin-top:36px;
  border-top:1px solid var(--line);
  padding-top:28px;
}
.worked-band .kicker{
  text-align:center;
  display:block;
  margin-bottom:14px;
}
.stack-final{
  display:block;
  grid-template-columns:.36fr .64fr;
  gap:42px;
  align-items:center;
  min-height:calc(100vh - 260px);
}
.stack-copy h2{
  font-size:clamp(38px,5vw,68px);
  margin-bottom:18px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.stack-focus-grid{
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:26px;
}
.stack-focus-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  box-shadow:0 20px 58px rgba(0,0,0,.18);
}
.stack-focus-card h3{
  color:var(--yellow);
  font-size:22px;
}
.stack-tools{
  min-width:0;
  width:100%;
  margin-top:10px;
  position:relative;
  min-height:520px;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  display:none;
  place-items:center;
  overflow:hidden;
}
.stack-tools-title{
  text-align:center;
  margin-bottom:24px;
}
.stack-tools-title h3{
  font-size:42px;
  margin:0;
  color:white;
}
.stack-tools-title p{
  max-width:720px;
  margin:10px auto 0;
  color:var(--muted);
}
.education-final{
  text-align:center;
  max-width:1040px;
  margin:0 auto 34px;
}
.education-final h2{
  display:inline-block;
  background:rgba(245,197,66,.11);
  padding:0 12px;
  margin-bottom:12px;
  text-align:center;
}
.edu-tab:hover,.edu-tab.active{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
.edu-card-grid.fade{
  opacity:.2;
}
.stack-copy{
  display:block;
  grid-template-columns:.32fr .68fr;
  gap:34px;
  align-items:center;
  text-align:center;
  max-width:980px;
  margin:0 auto 32px;
}
.page-title-center{
  text-align:center;
  max-width:980px;
  margin:0 auto 34px;
}
.page-title-center h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.page-title-center .lead{
  margin-left:auto;
  margin-right:auto;
}
#experience .section-grid, #tech .stack-final{
  display:block;
}
#experience .section-grid > div:first-child{
  text-align:center;
  margin:0 auto 34px;
}
#experience .section-grid > div:first-child .kicker{
  display:none;
}
#experience .section-grid > div:first-child h2{
  text-align:center;
  margin:0 auto;
}
.stack-copy .kicker{
  display:none;
}
.stack-copy .lead{
  margin-left:auto;
  margin-right:auto;
}
.logo-icon{
  width:34px;
  height:34px;
  margin:0 auto 8px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0b1b31,#17385e);
  color:#f5c542;
  font-size:17px;
  font-weight:950;
}
.education-final .kicker{
  display:none;
}
.edu-photo-card{
  min-height:270px;
  overflow:hidden;
  padding:0;
}
.edu-photo-card .edu-photo{
  height:142px;
  width:100%;
  object-fit:cover;
  display:block;
  border-radius:28px 28px 0 0;
}
.edu-photo-card .edu-photo-body{
  padding:18px 20px 22px;
}
.edu-photo-card .edu-badge{
  margin-bottom:8px;
}
.edu-education-layout{
  display:grid;
  grid-template-columns:.46fr .54fr;
  gap:28px;
  max-width:1120px;
  margin:0 auto;
  align-items:center;
}
.edu-image-stack{
  position:relative;
  min-height:430px;
}
.edu-stack-img{
  position:absolute;
  width:58%;
  height:210px;
  object-fit:cover;
  border-radius:26px;
  border:6px solid rgba(255,255,255,.94);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.edu-stack-img:nth-child(1){
  left:0;
  top:0;
  z-index:5;
  transform:rotate(-4deg);
}
.edu-stack-img:nth-child(2){
  right:0;
  top:38px;
  z-index:4;
  transform:rotate(3deg);
}
.edu-stack-img:nth-child(3){
  left:8%;
  top:154px;
  z-index:6;
  transform:rotate(2deg);
}
.edu-stack-img:nth-child(4){
  right:6%;
  top:210px;
  z-index:3;
  transform:rotate(-3deg);
}
.edu-qualification-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.edu-qualification-card{
  min-height:180px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.edu-qualification-card h3{
  color:var(--yellow);
  font-size:25px;
  margin-bottom:10px;
}
.edu-qualification-card p{
  margin:0;
  color:var(--muted);
  font-size:16px;
}
.experience-showcase{
  text-align:center;
  max-width:1040px;
  margin:0 auto 24px;
}
.experience-showcase h2{
  display:inline-block;
  background:rgba(245,197,66,.11);
  padding:0 12px;
  margin-bottom:12px;
}
.exp-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 32px;
}
.exp-tab{
  border:1px solid var(--line);
  cursor:pointer;
  padding:11px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  transition:.25s ease;
}
.exp-tab:hover,.exp-tab.active{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
.exp-card-grid{
  display:grid;
  grid-template-columns:1.15fr 120px 1.3fr;
  gap:48px;
  max-width:1120px;
  margin:0 auto;
  opacity:1;
  transition:opacity .2s ease;
  position:relative;
  margin-top:32px;
}
.exp-card-grid.fade{
  opacity:.2;
}
.exp-logo-card{
  min-height:250px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.3s ease;
}
.exp-logo-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.72);
  background:var(--black);
}
.exp-logo-box{
  height:100px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  color:#0b1b31;
  font-weight:950;
  font-size:24px;
  margin-bottom:20px;
}
.exp-badge{
  align-self:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(245,197,66,.13);
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.exp-logo-card h3{
  font-size:18px;
  text-align:center;
  margin:0 0 6px;
}
.exp-logo-card p{
  text-align:center;
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.page:not(.home){
  background:linear-gradient(135deg,#07111f,#0b1b31);
  color:white;
}
.page:not(.home) h2, .page:not(.home) h3{
  color:white;
}
.page:not(.home) p, .page:not(.home) .lead{
  color:var(--muted);
}
.page:not(.home) .card, .page:not(.home) .edu-logo-card, .page:not(.home) .exp-logo-card, .page:not(.home) .stack-focus-card, .page:not(.home) .tech-mini-card, .page:not(.home) .pill-card{
  background:var(--card);
  border-color:var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  backdrop-filter:none;
}
.page:not(.home) .edu-logo-card:hover, .page:not(.home) .exp-logo-card:hover{
  background:var(--black);
}
.page:not(.home) .edu-logo-box, .page:not(.home) .exp-logo-box, .page:not(.home) .tool-logo-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);
}
.page:not(.home) .edu-tab, .page:not(.home) .exp-tab{
  background:rgba(255,255,255,.08);
  border-color:var(--line);
  color:var(--muted);
}
.page:not(.home) .edu-tab.active, .page:not(.home) .edu-tab:hover, .page:not(.home) .exp-tab.active, .page:not(.home) .exp-tab:hover{
  background:var(--yellow);
  color:#07111f;
}
.page:not(.home) .logo-marquee:before{
  background:linear-gradient(90deg,#0b1b31,rgba(11,27,49,0));
}
.page:not(.home) .logo-marquee:after{
  background:linear-gradient(270deg,#0b1b31,rgba(11,27,49,0));
}
.page:not(.home) .contact-menu{
  background:rgba(7,17,31,.92);
}
.page:not(.home) .contact-menu a{
  color:white;
  background:rgba(255,255,255,.08);
}
#tech .stack-tools{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
#tech .stack-tools-title h3{
  color:#07111f;
  font-size:clamp(32px,4vw,52px);
}
#tech .stack-tools-title p{
  color:#26384D;
}
#tech .logo-marquee:before{
  background:linear-gradient(90deg,#eaf6ff,rgba(234,246,255,0));
}
#tech .logo-marquee:after{
  background:linear-gradient(270deg,#eaf6ff,rgba(234,246,255,0));
}
#tech .tool-logo-card{
  background:#ffffff;
  border:1px solid rgba(7,17,31,.10);
}
#about{
  background:radial-gradient(circle at 14% 12%, rgba(245,197,66,.10), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(168,85,247,.10), transparent 22%),
    linear-gradient(135deg,#06101d 0%, #0b1b31 58%, #07111f 100%);
  color:#071B33;
  padding-top:58px;
}
#about:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background:repeating-radial-gradient(ellipse at 18% 30%, transparent 0 28px, rgba(245,197,66,.32) 29px, transparent 31px),
    repeating-radial-gradient(ellipse at 82% 70%, transparent 0 34px, rgba(245,197,66,.25) 35px, transparent 37px);
  mask-image:linear-gradient(135deg, rgba(0,0,0,.45), transparent 62%);
  display:none;
}
#about .section-grid{
  position:relative;
  z-index:1;
  align-items:start;
  grid-template-columns:.72fr 1.28fr;
  gap:34px;
}
#about .lead{
  color:#526154;
}
#about .kicker{
  color:#ffe59a;
}
#about .about-title-photo{
  max-width:455px;
  padding:0;
  border-radius:34px;
  background:transparent;
  box-shadow:none;
  position:relative;
  overflow:visible;
  isolation:isolate;
  margin-top:0;
  border:none;
}
#about .about-title-photo:before{
  content:"";
  position:absolute;
  inset:-20px -22px -34px -16px;
  border-radius:42px;
  background:radial-gradient(circle at 52% 40%, rgba(255,214,153,.10), transparent 34%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.10), transparent 30%),
    radial-gradient(circle at 40% 80%, rgba(142,180,220,.14), transparent 34%);
  filter:blur(24px);
  z-index:-2;
  right:-24px;
  bottom:-24px;
  width:74%;
  height:74%;
}
#about .about-title-photo:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:0 0 38px 38px;
  pointer-events:none;
  box-shadow:0 24px 40px rgba(5,12,20,.18);
  background:linear-gradient(180deg, rgba(6,16,29,0) 0%, rgba(6,16,29,.04) 28%, rgba(11,27,49,.26) 62%, rgba(11,27,49,.72) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(150,190,230,.12), rgba(150,190,230,0) 68%);
  display:none;
  left:-5%;
  right:-5%;
  bottom:-10%;
  height:30%;
  filter:blur(14px);
  z-index:2;
}
#about .about-title-photo img{
  border-radius:34px;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(.99) contrast(1.03) brightness(1.02);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.92) 84%, rgba(0,0,0,.66) 90%, rgba(0,0,0,.22) 96%, transparent 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.92) 84%, rgba(0,0,0,.66) 90%, rgba(0,0,0,.22) 96%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  height:auto;
  position:relative;
  z-index:1;
  box-shadow:0 22px 50px rgba(9,18,32,.14), 0 10px 20px rgba(9,18,32,.08);
}
#about .pill-card{
  background:linear-gradient(135deg, rgba(9,24,46,.96) 0%, rgba(6,18,38,.98) 100%);
  border:1px solid rgba(245,197,66,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 48px rgba(0,0,0,.16);
  border-color:rgba(7,27,51,.10);
  backdrop-filter:blur(10px);
  position:relative;
  padding:16px 20px;
  border-radius:18px;
  display:grid;
  grid-template-columns:54px 1px 1fr;
  align-items:center;
  gap:14px;
  min-height:92px;
}
#about .pill-card h3{
  color:#ffe59a !important;
  margin-top:0;
  grid-column:3;
  margin:0 0 3px;
  font-size:19px;
  line-height:1.18;
  margin-bottom:4px;
}
#about .pill-card p{
  color:#ffffff !important;
  margin-top:8px;
  grid-column:3;
  margin:0;
  font-size:14.5px;
  line-height:1.38;
}
.page:not(.home):nth-of-type(even) h2, .page:not(.home):nth-of-type(even) h3{
  color:#172118;
}
.page:not(.home):nth-of-type(even) p, .page:not(.home):nth-of-type(even) .lead{
  color:#526154;
}
.page:not(.home):nth-of-type(even) .card, .page:not(.home):nth-of-type(even) .edu-logo-card, .page:not(.home):nth-of-type(even) .exp-logo-card, .page:not(.home):nth-of-type(even) .stack-focus-card, .page:not(.home):nth-of-type(even) .tech-mini-card, .page:not(.home):nth-of-type(even) .pill-card{
  background:rgba(255,255,255,.62);
  border-color:rgba(245,197,66,.18);
  box-shadow:0 14px 34px rgba(70,91,66,.08);
}
.page:not(.home):nth-of-type(even) .edu-tab, .page:not(.home):nth-of-type(even) .exp-tab{
  background:rgba(255,255,255,.66);
  border-color:rgba(245,197,66,.20);
  color:#526154;
}
.page:not(.home):nth-of-type(even) .edu-tab.active, .page:not(.home):nth-of-type(even) .edu-tab:hover, .page:not(.home):nth-of-type(even) .exp-tab.active, .page:not(.home):nth-of-type(even) .exp-tab:hover{
  background:#f5c542;
  color:white;
  border-color:#f5c542;
}
.page:not(.home):nth-of-type(even) .kicker, .page:not(.home):nth-of-type(even) .company, .page:not(.home):nth-of-type(even) .edu-badge, .page:not(.home):nth-of-type(even) .exp-badge{
  color:#f5c542;
}
.page:not(.home):nth-of-type(even) .logo-marquee:before{
  background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,0));
}
.page:not(.home):nth-of-type(even) .logo-marquee:after{
  background:linear-gradient(270deg,#EAF4FF,rgba(234,244,255,0));
}
#experience h2,#courses h2,#tech h2,#about h2,#testimonials h2,.education-final h2,.experience-showcase h2,.stack-copy h2{
  background:transparent;
  display:block;
  font-size:clamp(38px,5vw,68px);
  line-height:.96;
  text-align:center;
  padding:0;
  margin-left:auto;
  margin-right:auto;
}
.edu-card-grid.list-mode{
  display:grid;
  max-width:1120px;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.edu-card-grid.list-mode .edu-logo-card{
  min-height:250px;
  display:flex;
  grid-template-columns:86px 1fr;
  gap:18px;
  align-items:center;
  padding:24px;
  margin-bottom:0;
  text-align:center;
  flex-direction:column;
  justify-content:space-between;
}
.edu-card-grid.list-mode .edu-logo-box{
  width:auto;
  height:100px;
  margin:0;
  border-radius:22px;
  font-size:24px;
  margin-bottom:20px;
}
.edu-card-grid.list-mode .edu-badge{
  align-self:center;
  justify-self:start;
  margin:0 0 6px;
  margin-bottom:10px;
}
.edu-card-grid.list-mode h3,.edu-card-grid.list-mode p{
  text-align:left;
}
.testimonials-layout{
  max-width:1120px;
  margin:0 auto;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px;
}
.testimonial-card{
  min-height:230px;
  border-radius:30px;
  padding:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.testimonial-card p{
  font-size:17px;
  line-height:1.6;
}
.testimonial-card strong{
  color:var(--yellow);
}
.media-strip{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.media-tile{
  height:150px;
  border-radius:26px;
  background:rgba(255,255,255,.12);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--yellow);
  font-weight:900;
}
.edu-card-grid.list-mode h3, .edu-card-grid.list-mode p{
  text-align:center;
}
#experience{
  background:radial-gradient(circle at 15% 12%,rgba(245,197,66,.10),transparent 25%),linear-gradient(135deg,#06101d,#0b1b31 58%,#07111f);
  color:white;
  padding-top:72px;
  padding-bottom:72px;
  overflow:hidden;
  padding-left:5vw;
  padding-right:5vw;
}
#experience .experience-showcase h2{
  color:white;
  text-align:center;
  background:transparent;
}
.exp-card-grid:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(1.15fr);
}
.timeline-line{
  grid-column:2;
  grid-row:1 / span 6;
  width:3px;
  height:100%;
  min-height:720px;
  justify-self:center;
  background:linear-gradient(180deg,rgba(168,85,247,.08),rgba(168,85,247,.9),rgba(168,85,247,.08));
  position:relative;
  border-radius:99px;
}
.timeline-dot{
  position:sticky;
  top:48vh;
  width:18px;
  height:18px;
  margin-left:-7.5px;
  border-radius:50%;
  background:#a855f7;
  box-shadow:0 0 28px #a855f7,0 0 55px rgba(168,85,247,.55);
}
.exp-timeline-item{
  display:contents;
}
.exp-left{
  grid-column:1;
  padding:8px 0 42px;
}
.exp-year{
  grid-column:2;
  font-size:48px;
  font-weight:900;
  line-height:1;
  color:#eeeaf5;
  padding-top:8px;
  text-align:center;
}
.exp-desc{
  grid-column:3;
  padding:14px 0 42px;
  color:#ddd8e7;
  font-size:16px;
  line-height:1.65;
}
.exp-left h3{
  color:#f3effa;
  font-size:32px;
  margin:0 0 8px;
}
.exp-left .exp-type{
  color:#c4a7ff;
  font-size:20px;
  font-weight:800;
}
.exp-desc p{
  color:#ddd8e7;
  margin:0;
}
.tech-concept-marquee{
  margin-top:26px;
  position:relative;
  overflow:hidden;
  padding:20px 0;
  margin:34px auto 0;
  max-width:100%;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.concept-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:conceptSlide 36s linear infinite;
}
.concept-track:hover{
  animation-play-state:paused;
}
.concept-pill{
  flex:0 0 auto;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);
  color:#07111f;
  font-weight:900;
  font-size:18px;
  width:210px;
  height:108px;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1.15;
}
.tools-orbit{
  width:min(560px,100%);
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
}
.tools-orbit:before, .tools-orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(245,197,66,.18);
}
.tools-orbit:before{
  inset:12%;
}
.tools-orbit:after{
  inset:26%;
}
.orbit-core{
  width:170px;
  height:170px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle,#f5c542,#b98918);
  color:#07111f;
  font-weight:950;
  font-size:26px;
  box-shadow:0 0 70px rgba(245,197,66,.28);
  z-index:3;
}
.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:orbitSpin 34s linear infinite;
}
.orbit-ring.reverse{
  inset:15%;
  animation:orbitSpinReverse 28s linear infinite;
}
.orbit-card{
  position:absolute;
  left:50%;
  top:50%;
  width:126px;
  height:76px;
  margin-left:-63px;
  margin-top:-38px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  color:#07111f;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:950;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.7);
}
.orbit-card small{
  display:block;
  color:#667085;
  font-size:10px;
  margin-top:2px;
}
.orbit-ring:hover, .orbit-ring.reverse:hover{
  animation-play-state:paused;
}
.orbit-ring .orbit-card:nth-child(1){
  transform:rotate(0deg) translateX(230px) rotate(0deg);
}
.orbit-ring .orbit-card:nth-child(2){
  transform:rotate(45deg) translateX(230px) rotate(-45deg);
}
.orbit-ring .orbit-card:nth-child(3){
  transform:rotate(90deg) translateX(230px) rotate(-90deg);
}
.orbit-ring .orbit-card:nth-child(4){
  transform:rotate(135deg) translateX(230px) rotate(-135deg);
}
.orbit-ring .orbit-card:nth-child(5){
  transform:rotate(180deg) translateX(230px) rotate(-180deg);
}
.orbit-ring .orbit-card:nth-child(6){
  transform:rotate(225deg) translateX(230px) rotate(-225deg);
}
.orbit-ring .orbit-card:nth-child(7){
  transform:rotate(270deg) translateX(230px) rotate(-270deg);
}
.orbit-ring .orbit-card:nth-child(8){
  transform:rotate(315deg) translateX(230px) rotate(-315deg);
}
.orbit-ring.reverse .orbit-card:nth-child(1){
  transform:rotate(0deg) translateX(145px) rotate(0deg);
}
.orbit-ring.reverse .orbit-card:nth-child(2){
  transform:rotate(60deg) translateX(145px) rotate(-60deg);
}
.orbit-ring.reverse .orbit-card:nth-child(3){
  transform:rotate(120deg) translateX(145px) rotate(-120deg);
}
.orbit-ring.reverse .orbit-card:nth-child(4){
  transform:rotate(180deg) translateX(145px) rotate(-180deg);
}
.orbit-ring.reverse .orbit-card:nth-child(5){
  transform:rotate(240deg) translateX(145px) rotate(-240deg);
}
.orbit-ring.reverse .orbit-card:nth-child(6){
  transform:rotate(300deg) translateX(145px) rotate(-300deg);
}
.exp-card-grid.cards-mode{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.exp-card-grid.timeline-mode{
  display:block;
}
.exp-logo-card h3, .exp-logo-card p{
  text-align:center;
}
.exp-timeline{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:10px 0 20px;
}
.exp-timeline:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:rgba(245,197,66,.20);
  display:none;
}
.exp-progress{
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:var(--progress, 0%);
  background:linear-gradient(180deg,var(--yellow),#a855f7);
  box-shadow:0 0 24px rgba(245,197,66,.55);
}
.exp-progress:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:17px;
  height:17px;
  transform:translate(-50%,50%);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 24px rgba(245,197,66,.75);
}
.timeline-row{
  display:grid;
  grid-template-columns:calc(50% - 45px) 90px calc(50% - 45px);
  gap:0;
  min-height:175px;
  align-items:start;
}
.timeline-role h3{
  color:white;
  font-size:24px;
  margin:0 0 8px;
}
.timeline-role span{
  color:#c7b5ff;
  font-weight:850;
  font-size:16px;
  display:block;
}
.timeline-year{
  color:#eeeaf5;
  font-size:42px;
  font-weight:950;
  text-align:right;
  z-index:1;
  grid-column:1;
  padding-right:54px;
  line-height:1;
}
.timeline-text p{
  color:#ddd8e7;
  margin:0;
  line-height:1.65;
  max-width:620px;
}
.timeline-role{
  text-align:right;
  display:none;
}
.timeline-text{
  grid-column:3;
  padding-left:54px;
}
.tech-concept-marquee:before, .tech-concept-marquee:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:100px;
  z-index:2;
  pointer-events:none;
}
.tech-concept-marquee:before{
  left:0;
  background:linear-gradient(90deg,#0b1b31,rgba(11,27,49,0));
}
.tech-concept-marquee:after{
  right:0;
  background:linear-gradient(270deg,#0b1b31,rgba(11,27,49,0));
}
.concept-pill::before{
  content:"✦";
  display:grid;
  width:34px;
  height:34px;
  margin:0 auto 8px;
  border-radius:12px;
  background:#07111f;
  color:var(--yellow);
  place-items:center;
  font-size:16px;
}
.timeline-year small{
  display:block;
  margin-top:12px;
  color:#c4a7ff;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
}
.tools-pyramid{
  margin-top:56px;
  padding:46px 24px;
  border-radius:34px;
  background:radial-gradient(circle at 50% 30%, rgba(245,197,66,.18), transparent 30%),
    radial-gradient(circle at 50% 55%, rgba(168,85,247,.26), transparent 38%),
    linear-gradient(135deg,#18062d,#351066 52%,#12051f);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
}
.tools-pyramid:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background:linear-gradient(110deg, transparent 0 48%, rgba(255,255,255,.24) 49%, transparent 50%),
    linear-gradient(70deg, transparent 0 48%, rgba(255,255,255,.18) 49%, transparent 50%);
  background-size:120px 120px;
}
.tools-title-pyramid{
  position:relative;
  z-index:1;
  text-align:center;
  margin-bottom:28px;
}
.tools-title-pyramid h3{
  color:white;
  font-size:clamp(32px,4vw,54px);
  margin:0;
}
.tools-title-pyramid p{
  color:rgba(255,255,255,.72);
  margin:10px auto 0;
  max-width:720px;
}
.tool-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:nowrap;
}
.tool-tile{
  width:82px;
  height:82px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  backdrop-filter:blur(10px);
  transition:.25s ease;
}
.tool-tile:hover{
  transform:translateY(-6px) scale(1.04);
  background:rgba(255,255,255,.18);
  border-color:rgba(245,197,66,.45);
}
.tool-tile img{
  width:30px;
  height:30px;
  object-fit:contain;
}
.tool-tile span{
  color:white;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
#stack{
  background:linear-gradient(135deg,#07111f,#0b1b31);
}
.stack-only{
  max-width:1320px;
  margin:0 auto;
  text-align:center;
}
.stack-only .lead{
  margin-left:auto;
  margin-right:auto;
}
#stack .tech-concept-marquee{
  max-width:110%;
  width:110%;
  margin-left:-5%;
  margin-right:-5%;
}
#tools{
  background:linear-gradient(135deg,#07111f,#0b1b31);
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:54px;
  padding-bottom:62px;
}
#tools:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0 48%, rgba(255,255,255,.18) 49%, transparent 50%),
    linear-gradient(70deg, transparent 0 48%, rgba(245,197,66,.14) 49%, transparent 50%);
  background-size:120px 120px;
  animation:bgDrift 22s linear infinite;
}
#tools:after{
  content:"";
  position:absolute;
  inset:-20%;
  opacity:.28;
  pointer-events:none;
  background:radial-gradient(circle at 30% 40%, rgba(168,85,247,.34), transparent 18%),
    radial-gradient(circle at 68% 52%, rgba(245,197,66,.20), transparent 20%),
    radial-gradient(circle at 50% 70%, rgba(147,197,253,.18), transparent 22%);
  filter:blur(28px);
  animation:bgFloat 16s ease-in-out infinite alternate;
}
#tools .tools-pyramid{
  position:relative;
  z-index:1;
  margin-top:0;
  background:radial-gradient(circle at 50% 45%, rgba(245,197,66,.18), transparent 20%),
    radial-gradient(circle at 18% 28%, rgba(147,197,253,.18), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(168,85,247,.18), transparent 25%),
    linear-gradient(135deg,#050816,#120627 48%,#07111f);
  backdrop-filter:blur(10px);
  overflow:hidden;
  border-radius:46px;
  padding:62px 34px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 100px rgba(0,0,0,.35);
}
#tools .tools-pyramid:before{
  display:block;
  content:"";
  position:absolute;
  inset:-20%;
  opacity:.30;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px) 0 0/42px 42px,
    radial-gradient(circle, rgba(245,197,66,.65) 0 1px, transparent 2px) 18px 24px/58px 58px;
  animation:starDrift 28s linear infinite;
}
#tools:before, #tools:after{
  display:none;
}
#tools .tools-pyramid:after{
  content:"";
  position:absolute;
  inset:-25%;
  opacity:.34;
  background:conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(147,197,253,.25) 70deg, transparent 140deg, rgba(168,85,247,.22) 220deg, transparent 360deg);
  filter:blur(28px);
  animation:nebulaSpin 34s linear infinite;
}
#tools .tools-title-pyramid, #tools .tool-row{
  position:relative;
  z-index:2;
}
#tools .tool-row{
  animation:floatRow 7s ease-in-out infinite;
}
#tools .tool-row:nth-of-type(odd){
  animation-delay:-2s;
}
#tools .tool-tile{
  width:76px;
  height:76px;
  border-radius:22px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
}
#tools .tool-tile:hover{
  transform:translateY(-8px) scale(1.08) rotate(1deg);
  background:rgba(255,255,255,.18);
  border-color:rgba(245,197,66,.55);
  box-shadow:0 0 34px rgba(245,197,66,.22);
}
#tools .tool-tile img{
  width:28px;
  height:28px;
}
#tools .tool-tile span{
  font-size:9.5px;
}
#about h2, #about h3{
  color:#071B33;
}
#about p, #about .lead{
  color:#26384D;
}
#about .kicker, #about .pill-card h3{
  color:#0B2A4A;
}
#about .tech-concept-marquee{
  max-width:110%;
  width:110%;
  margin-left:-5%;
  margin-right:-5%;
}
#about .tech-concept-marquee:before{
  background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,0));
}
#about .tech-concept-marquee:after{
  background:linear-gradient(270deg,#F7F7F5,rgba(247,247,245,0));
}
#about .concept-pill{
  width:210px;
  background:rgba(255,255,255,.82);
  color:#071B33;
  border-color:rgba(7,27,51,.12);
}
#experience .exp-tabs{
  display:none;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 36px;
}
.projects-showcase{
  max-width:980px;
  margin:0 auto 24px;
  text-align:center;
}
.projects-showcase h2{
  text-align:center;
  background:transparent;
}
.project-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 32px;
}
.project-tab{
  border:1px solid var(--line);
  cursor:pointer;
  padding:11px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  transition:.25s ease;
}
.project-tab:hover, .project-tab.active{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
.project-panel{
  display:none;
}
.project-panel.active{
  display:block;
}
.refined-tools{
  max-width:1120px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:46px;
  padding:54px 28px;
  background:radial-gradient(circle at 50% 45%, rgba(245,197,66,.18), transparent 20%),
    radial-gradient(circle at 18% 28%, rgba(147,197,253,.18), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(168,85,247,.18), transparent 25%),
    linear-gradient(135deg,#050816,#120627 48%,#07111f);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 100px rgba(0,0,0,.35);
}
.refined-tools:before{
  content:"";
  position:absolute;
  inset:-20%;
  opacity:.30;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px) 0 0/42px 42px,
    radial-gradient(circle, rgba(245,197,66,.65) 0 1px, transparent 2px) 18px 24px/58px 58px;
  animation:starDrift 28s linear infinite;
}
.refined-tools:after{
  content:"";
  position:absolute;
  inset:-25%;
  opacity:.34;
  background:conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(147,197,253,.25) 70deg, transparent 140deg, rgba(168,85,247,.22) 220deg, transparent 360deg);
  filter:blur(28px);
  animation:nebulaSpin 34s linear infinite;
}
.local-tool-cloud{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  max-width:900px;
  margin:28px auto 0;
}
.project-tool-tile{
  width:92px;
  height:92px;
  border-radius:24px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:white;
  font-weight:850;
  animation:toolFloat 6s ease-in-out infinite;
}
.project-tool-tile:nth-child(3n){
  animation-delay:-1.2s;
}
.project-tool-tile:nth-child(4n){
  animation-delay:-2.2s;
}
.project-tool-tile:hover{
  transform:translateY(-8px) scale(1.08);
  background:rgba(255,255,255,.18);
  border-color:rgba(245,197,66,.55);
  box-shadow:0 0 34px rgba(245,197,66,.22);
}
.local-logo{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#07111f;
  color:var(--yellow);
  font-weight:950;
  font-size:14px;
}
.project-tool-tile span{
  font-size:10px;
  text-align:center;
}
.project-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1120px;
  margin:0 auto;
}
.project-info-card{
  min-height:250px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.3s ease;
}
.project-info-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.72);
  background:var(--black);
}
.project-icon{
  height:100px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  color:#0b1b31;
  font-weight:950;
  font-size:22px;
  margin-bottom:20px;
}
.project-info-card h3, .project-info-card p{
  text-align:center;
}
.page:not(.home):nth-of-type(even) .project-tab{
  background:rgba(255,255,255,.72);
  border-color:rgba(7,17,31,.14);
  color:#071B33;
}
.page:not(.home):nth-of-type(even) .project-tab.active, .page:not(.home):nth-of-type(even) .project-tab:hover{
  background:#071B33;
  color:white;
  border-color:#071B33;
}
.page:not(.home):nth-of-type(even) .project-info-card{
  background:rgba(255,255,255,.72);
  border-color:rgba(7,17,31,.14);
  box-shadow:0 20px 52px rgba(12,36,66,.10);
}
.page:not(.home):nth-of-type(even) .project-info-card:hover{
  background:#FFFFFF;
}
#experience .exp-card-grid.cards-mode{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1120px;
  margin:0 auto;
}
#experience .exp-logo-card{
  min-height:250px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.3s ease;
}
#experience .exp-logo-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.72);
  background:var(--black);
}
#experience .exp-logo-box{
  height:100px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  color:#0b1b31;
  font-weight:950;
  font-size:24px;
  margin-bottom:20px;
}
#experience .exp-badge{
  align-self:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(245,197,66,.13);
  color:#ffe59a;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
#experience .exp-logo-card h3, #experience .exp-logo-card p{
  text-align:center;
}
#experience .exp-tab{
  border:1px solid var(--line);
  cursor:pointer;
  padding:11px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  transition:.25s ease;
}
#experience .exp-tab:hover, #experience .exp-tab.active{
  background:var(--yellow);
  color:#07111f;
  border-color:var(--yellow);
}
#experience .exp-card-grid{
  max-width:1180px;
  margin:0 auto;
}
#experience .exp-card-grid.timeline-mode{
  display:block;
  max-width:1180px;
  margin:0 auto;
  padding:0 2vw;
  width:100%;
  box-sizing:border-box;
  padding-left:5vw;
  padding-right:5vw;
  margin-left:auto;
  margin-right:auto;
}
.project-badge{
  align-self:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(245,197,66,.13);
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.contact-page-wrap{
  max-width:1160px;
  margin:0 auto;
}
.contact-title{
  text-align:center;
  margin-bottom:34px;
}
.contact-title h2{
  background:transparent;
  text-align:center;
}
.contact-layout{
  display:grid;
  grid-template-columns:1fr 84px;
  gap:26px;
  align-items:stretch;
}
.contact-form{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  border-radius:30px;
  padding:34px;
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}
.contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.contact-form label{
  display:grid;
  gap:9px;
  color:#cbd5e1;
  font-weight:750;
  margin-bottom:20px;
}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;
  border:0;
  outline:0;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  color:#ffffff;
  padding:15px 16px;
  font:inherit;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{
  color:#aab4c3;
}
.contact-form textarea{
  min-height:120px;
  resize:vertical;
}
.contact-form button{
  width:100%;
  border:0;
  border-radius:12px;
  padding:16px 20px;
  background:var(--yellow);
  color:#07111f;
  font-weight:950;
  font-size:16px;
  cursor:pointer;
}
.contact-form-status{
  min-height:18px;
  margin:10px 0 0;
  color:#ffe59a;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.contact-socials{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:24px;
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  border-radius:30px;
  padding:22px 12px;
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}
.contact-socials a{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:white;
  transition:.25s ease;
}
.contact-socials a:hover{
  background:rgba(245,197,66,.16);
  color:var(--yellow);
  transform:translateY(-4px);
}
.contact-socials svg{
  width:27px;
  height:27px;
  fill:currentColor;
}
#projects .project-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1120px;
  margin:0 auto;
}
#projects .project-info-card{
  min-height:250px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:0 20px 58px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.3s ease;
}
#projects .project-info-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.68);
  background:var(--black);
  box-shadow:0 22px 70px rgba(0,0,0,.24),0 0 34px rgba(245,197,66,.10);
}
#projects .project-icon{
  height:100px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  color:#07111f;
  font-weight:950;
  font-size:24px;
  margin-bottom:20px;
}
#projects .project-badge{
  align-self:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(245,197,66,.13);
  color:#f5c542;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
  border-color:rgba(245,197,66,.24);
}
#projects .project-info-card h3{
  color:white;
  font-size:18px;
  text-align:center;
  margin:0 0 6px;
}
#projects .project-info-card p{
  color:var(--muted);
  text-align:center;
  margin:0;
  font-size:14px;
}
.site-footer, .contact-fab, .contact-dot, .contact-menu{
  display:none;
}
#about .about-title-photo .portrait-bloom{
  display:none;
}
#about .pill-grid{
  gap:11px;
  display:grid;
  grid-template-columns:1fr;
  margin-top:24px;
  max-width:720px;
  margin-left:0;
}
#about .pill-icon-wrap{
  position:relative;
  width:60px;
  height:60px;
  margin-bottom:16px;
  margin:0;
  display:grid;
  place-items:center;
}
#about .pill-icon-glow{
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,66,.22) 0%, rgba(245,197,66,0) 72%);
  filter:blur(10px);
}
#about .pill-icon{
  position:relative;
  z-index:1;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--yellow);
  font-size:19px;
  font-weight:700;
  background:radial-gradient(circle at 30% 30%, rgba(17,42,79,.95), rgba(8,22,45,.98));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.16);
}
#about .kicker, #about h2, #about p, #about .lead{
  color:#ffffff;
}
#about .pill-card::after{
  content:"";
  grid-column:2;
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
}
#about .pill-card .pill-icon-wrap, #about .pill-card h3, #about .pill-card p{
  position:relative;
  z-index:1;
}
#experiment{
  position:relative;
  overflow:hidden;
}
#experiment .experiment-wrap{
  width:min(1120px, calc(100% - 64px));
  margin:0 auto;
  position:relative;
  z-index:1;
}
#experiment .experiment-intro{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
}
#experiment h2{
  margin:0 0 14px;
  color:#ffffff;
  text-align:center;
  white-space:nowrap;
}
#experiment h2 span{
  display:inline;
}
#experiment .lead{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  white-space:nowrap;
  color:rgba(234,246,255,.78);
}
#experiment .experiment-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  padding:6px 4px 0;
}
#experiment .experiment-card{
  min-height:210px;
  padding:26px 24px 24px;
  border-radius:22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028) 52%, rgba(255,255,255,.045)),
    rgba(7,16,34,.66);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:0;
  box-shadow:0 22px 56px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.025);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:box-shadow .35s ease, background .35s ease, transform .35s ease;
}
#experiment .experiment-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:21px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 32%, transparent 68%, rgba(255,255,255,.055));
  opacity:.42;
  pointer-events:none;
  z-index:0;
}
#experiment .experiment-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  z-index:1;
  background:
    conic-gradient(from 180deg at 46px 46px, rgba(245,197,66,.95), rgba(251,113,133,.86), rgba(168,85,247,.86), rgba(56,189,248,.92), transparent 0) top left / 46px 46px no-repeat,
    conic-gradient(from 0deg at 0 0, rgba(245,197,66,.95), rgba(251,113,133,.86), rgba(168,85,247,.86), rgba(56,189,248,.92), transparent 0) bottom right / 46px 46px no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 46px 2px no-repeat,
    linear-gradient(#000 0 0) top left / 2px 46px no-repeat,
    linear-gradient(#000 0 0) bottom right / 46px 2px no-repeat,
    linear-gradient(#000 0 0) bottom right / 2px 46px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left / 46px 2px no-repeat,
    linear-gradient(#000 0 0) top left / 2px 46px no-repeat,
    linear-gradient(#000 0 0) bottom right / 46px 2px no-repeat,
    linear-gradient(#000 0 0) bottom right / 2px 46px no-repeat;
}
#experiment .experiment-card > *{
  position:relative;
  z-index:2;
}
#experiment .experiment-card:hover{
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.034) 52%, rgba(255,255,255,.055)),
    rgba(8,18,38,.72);
  box-shadow:0 28px 72px rgba(0,0,0,.34), 0 0 34px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(-4px);
}
#experiment .experiment-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#experiment .experiment-card-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  color:#22c55e;
  background:transparent;
}
#experiment .experiment-card-icon svg{
  width:38px;
  height:38px;
  overflow:visible;
}
#experiment .experiment-card-icon .icon-line{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(34,197,94,.25));
}
#experiment .experiment-card-icon .icon-accent{
  fill:none;
  stroke:var(--yellow);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(245,197,66,.22));
}
#experiment .experiment-card-icon .icon-dot{
  fill:var(--yellow);
  filter:drop-shadow(0 0 8px rgba(245,197,66,.30));
}
#experiment .experiment-card:hover .icon-pulse{
  animation:experimentIconPulse 1.4s ease-in-out infinite;
}
#experiment .experiment-card:hover .icon-slide{
  animation:experimentIconSlide 1.55s ease-in-out infinite;
}
#experiment .experiment-card:hover .icon-spin-soft{
  transform-origin:20px 20px;
  animation:experimentIconSpin 2.4s linear infinite;
}
#experiment .experiment-card h3{
  margin:0;
  color:#ffe59a !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:18px !important;
  font-weight:800;
  line-height:1.25;
  letter-spacing:0;
}
#experiment .experiment-card p{
  margin:0;
  color:#ffffff !important;
  font-size:15px;
  line-height:1.5;
}
@media(max-width:980px){
  #experiment .lead{
    white-space:normal;
  }
  #experiment .experiment-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
#testimonials .testimonial-photo-gallery{
  max-width:980px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:20px;
}
#testimonials .testimonial-photo-tile{
  margin:0 0 18px 0;
  min-height:unset;
  border-radius:20px;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
  position:relative;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  display:inline-block;
  width:100%;
  break-inside:avoid;
  margin-bottom:14px;
}
#testimonials .testimonial-photo-tile:nth-child(1){
  grid-row:span 2;
}
#testimonials .testimonial-photo-tile:nth-child(6){
  grid-column:span 2;
}
#testimonials .testimonial-photo-tile:hover{
  transform:translateY(-6px);
  border-color:rgba(245,197,66,.48);
  box-shadow:0 24px 72px rgba(0,0,0,.30), 0 0 34px rgba(245,197,66,.10);
}
#testimonials .testimonial-photo-tile img{
  width:100%;
  height:auto;
  min-height:unset;
  object-fit:cover;
  display:block;
  filter:saturate(.98) contrast(1.02);
  border-radius:20px;
}
#testimonials .testimonial-photo-tile:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.16));
}
.page, .page.home, .page:not(.home), #about, #experiment, #experience, #projects, #courses, #testimonials, #contact{
  background:transparent;
  border:0;
  box-shadow:none;
  margin:0;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
  position:relative;
}
.page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.24;
  background:radial-gradient(circle at 12% 10%, rgba(245,197,66,.06), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(99,102,241,.10), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(14,165,233,.06), transparent 30%);
  animation:sectionNebulaFloat 18s ease-in-out infinite alternate;
}
.page > *{
  position:relative;
  z-index:1;
}
#testimonials .testimonial-photo-tile:nth-child(1), #testimonials .testimonial-photo-tile:nth-child(6){
  grid-column:auto;
  grid-row:auto;
}
.shooting-stars{
  position:fixed;
  inset:0;
  z-index:-6;
  pointer-events:none;
  overflow:hidden;
}
.shooting-stars span{
  position:absolute;
  width:170px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.95),
    rgba(245,197,66,.72),
    rgba(255,255,255,0)
  );
  filter:drop-shadow(0 0 12px rgba(255,255,255,.65));
  transform:rotate(-28deg);
  opacity:0;
  animation:shootingStar 8s linear infinite;
}
.shooting-stars span:nth-child(1){
  top:10%;
  left:82%;
  animation-delay:.4s;
}
.shooting-stars span:nth-child(2){
  top:32%;
  left:72%;
  animation-delay:2.7s;
  animation-duration:9s;
}
.shooting-stars span:nth-child(3){
  top:62%;
  left:88%;
  animation-delay:5.2s;
  animation-duration:8.5s;
}
.shooting-stars span:nth-child(4){
  top:24%;
  left:58%;
  animation-delay:6.9s;
  animation-duration:10s;
}
.shooting-stars span:nth-child(5){
  top:76%;
  left:70%;
  animation-delay:4.1s;
  animation-duration:11s;
}
.page + .page, section + section{
  margin-top:0;
}
hr, .section-divider{
  display:none;
}
.nav, .floating-header, .site-header, .top-header, .header, .navbar{
  display:none;
}
.side-nav{
  position:fixed;
  left:18px;
  top:0;
  bottom:0;
  width:54px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
  pointer-events:auto;
  background:transparent;
  border:0;
}
.side-mid{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}
.side-icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.54);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(10px);
  font-size:20px;
  font-weight:900;
  text-decoration:none;
  position:relative;
  transition:transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.side-icon:hover, .side-icon:focus{
  color:#07111f;
  background:var(--yellow);
  border-color:rgba(245,197,66,.8);
  box-shadow:0 0 30px rgba(245,197,66,.24);
  transform:translateX(8px) scale(1.08);
}
.side-icon::after{
  content:attr(data-label);
  position:absolute;
  left:52px;
  top:50%;
  transform:translateY(-50%) translateX(-6px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(7,17,31,.88);
  border:1px solid rgba(255,255,255,.10);
  color:white;
  font-size:12px;
  letter-spacing:.02em;
  font-weight:800;
  transition:.22s ease;
}
.side-icon:hover::after, .side-icon:focus::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.page h1, .page h2, .page h3, .page .role-title, .page .stack-tools-title h3{
  color:#ffffff;
}
.page p, .page .lead, .page .role-meta{
  color:#cbd5e1;
}
.card, .edu-logo-card, .exp-logo-card, .project-info-card, .pill-card, .testimonial-card, .contact-form, .contact-form-status{
  min-height:18px;
  margin:10px 0 0;
  color:#ffe59a;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.contact-socials{
  background:rgba(8, 18, 36, 0.68);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 20px 56px rgba(0,0,0,.26);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
}
.edu-logo-box, .exp-logo-box, .project-icon{
  background:rgba(255,255,255,.94);
  color:#07111f;
}
#testimonials{
  overflow:visible;
}
#testimonials .moments-layout{
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.48fr .52fr;
  gap:28px;
  align-items:start;
}
#testimonials .moments-testimonials{
  position:relative;
  top:auto;
  align-self:start;
}
#testimonials .page-title-center{
  text-align:left;
  margin:0 0 24px;
  max-width:none;
}
#testimonials .page-title-center h2{
  text-align:left;
  margin-left:0;
  margin-right:0;
}
#testimonials .page-title-center .lead{
  margin-left:0;
  margin-right:0;
  max-width:420px;
}
#testimonials .moments-testimonial-list{
  display:grid;
  gap:18px;
}
#testimonials .testimonial-card{
  min-height:unset;
  padding:22px;
  border-radius:24px;
  height:auto;
  break-inside:avoid;
}
#testimonials .testimonial-card p{
  font-size:15.5px;
  line-height:1.64;
  margin:0;
}
#testimonials .testimonial-card strong{
  color:var(--yellow);
  margin-top:16px;
  display:block;
}
#testimonials .moments-photo-panel{
  position:relative;
  min-height:760px;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 8px 26px 8px;
  border-radius:34px;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.45) transparent;
  background:transparent;
}
#testimonials .moments-photo-panel::-webkit-scrollbar{
  width:6px;
}
#testimonials .moments-photo-panel::-webkit-scrollbar-thumb{
  background:rgba(245,197,66,.45);
  border-radius:999px;
}
#testimonials .moments-photo-panel::before, #testimonials .moments-photo-panel::after{
  content:"";
  position:sticky;
  display:block;
  height:46px;
  z-index:3;
  pointer-events:none;
}
#testimonials .moments-photo-panel::before{
  top:0;
  margin-bottom:-46px;
  background:linear-gradient(180deg, rgba(2,6,23,.82), rgba(2,6,23,0));
}
#testimonials .moments-photo-panel::after{
  bottom:0;
  margin-top:-46px;
  background:linear-gradient(0deg, rgba(2,6,23,.82), rgba(2,6,23,0));
}
#testimonials .moments-masonry{
  column-count:2;
  column-gap:18px;
  padding-top:8px;
}
#testimonials .testimonial-photo-tile:nth-child(1) img{
  aspect-ratio:4/4.8;
}
#testimonials .testimonial-photo-tile:nth-child(2) img{
  aspect-ratio:3/4;
}
#testimonials .testimonial-photo-tile:nth-child(3) img{
  aspect-ratio:4/3;
}
#testimonials .testimonial-photo-tile:nth-child(4) img{
  aspect-ratio:3/3.8;
}
#testimonials .testimonial-photo-tile:nth-child(5) img{
  aspect-ratio:4/4.6;
}
#testimonials .testimonial-photo-tile:nth-child(6) img{
  aspect-ratio:4/3.2;
}
#testimonials .testimonial-photo-tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.14));
}
#testimonials .testimonial-scroll-panel, #testimonials .pinterest-scroll-panel{
  height:60vh;
  min-height:460px;
  max-height:620px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 10px 30px 4px;
  border-radius:30px;
  background:transparent;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.42) transparent;
  position:relative;
  overscroll-behavior:contain;
}
#testimonials .testimonial-scroll-panel::-webkit-scrollbar, #testimonials .pinterest-scroll-panel::-webkit-scrollbar{
  width:6px;
}
#testimonials .testimonial-scroll-panel::-webkit-scrollbar-track, #testimonials .pinterest-scroll-panel::-webkit-scrollbar-track{
  background:transparent;
}
#testimonials .testimonial-scroll-panel::-webkit-scrollbar-thumb, #testimonials .pinterest-scroll-panel::-webkit-scrollbar-thumb{
  background:rgba(245,197,66,.42);
  border-radius:999px;
}
#testimonials .testimonial-scroll-panel:before, #testimonials .pinterest-scroll-panel:before, #testimonials .testimonial-scroll-panel:after, #testimonials .pinterest-scroll-panel:after{
  content:"";
  position:sticky;
  display:block;
  height:38px;
  z-index:5;
  pointer-events:none;
}
#testimonials .testimonial-scroll-panel:before, #testimonials .pinterest-scroll-panel:before{
  top:0;
  margin-bottom:-38px;
  background:linear-gradient(180deg, rgba(2,6,23,.88), rgba(2,6,23,0));
}
#testimonials .testimonial-scroll-panel:after, #testimonials .pinterest-scroll-panel:after{
  bottom:0;
  margin-top:-38px;
  background:linear-gradient(0deg, rgba(2,6,23,.88), rgba(2,6,23,0));
}
#testimonials .testimonial-masonry{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding-top:8px;
}
#testimonials .testimonial-card:nth-child(2n){
  padding-top:34px;
  padding-bottom:34px;
}
#testimonials .testimonial-card:nth-child(3n){
  padding-top:20px;
  padding-bottom:46px;
}
#testimonials .pinterest-masonry{
  column-count:2;
  column-gap:14px;
  padding-top:8px;
  display:block;
}
#testimonials > .page-title-center{
  text-align:center;
  max-width:880px;
  margin:0 auto 36px;
}
#testimonials > .page-title-center h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
#testimonials > .page-title-center .lead{
  margin-left:auto;
  margin-right:auto;
  max-width:660px;
  text-align:center;
}
#testimonials .testimonial-scroll-panel{
  padding-right:10px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
#testimonials .pinterest-scroll-panel{
  max-width:520px;
  justify-self:end;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  border-radius:0;
  padding:0 4px 0 0;
}
#testimonials .pinterest-scroll-panel::before, #testimonials .pinterest-scroll-panel::after{
  display:none;
}
#testimonials .pinterest-masonry .testimonial-photo-tile:last-child{
  overflow:hidden;
}
#testimonials .pinterest-masonry .testimonial-photo-tile:last-child img{
  width:100%;
  height:100%;
  min-height:440px;
  object-fit:cover;
  object-position:center 18%;
  transform:scale(1.28);
  transform-origin:center center;
  display:block;
}
html, body{
  background:#030712;
  min-height:100%;
  margin:0;
  padding:0;
  background-color:#030712;
  scroll-snap-type:none;
}
.page, .page.home, .page:not(.home), section{
  background:transparent;
  border:0;
  box-shadow:none;
}
#testimonials .pinterest-masonry .testimonial-photo-tile:first-child{
  overflow:hidden;
}
#testimonials .pinterest-masonry .testimonial-photo-tile:first-child img{
  width:100%;
  height:auto;
  min-height:unset;
  object-fit:contain;
  object-position:center center;
  transform:none;
  transform-origin:center center;
  display:block;
  aspect-ratio:auto;
  border-radius:20px;
}
.page, .page.home, .page:not(.home), section, #home, #about, #experiment, #experience, #projects, #courses, #testimonials, #contact{
  background:transparent;
  border:0;
  box-shadow:none;
  margin:0;
  position:relative;
}
.page::before, .page::after, section::before, section::after{
  background:transparent;
  box-shadow:none;
}
.page p, .page .lead, .page .role-meta, .page li, .page span{
  color:#d9e4f2;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-8;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.8px) 0 0/54px 54px,
    radial-gradient(circle, rgba(245,197,66,.32) 0 1px, transparent 1.8px) 18px 30px/92px 92px,
    radial-gradient(circle, rgba(163,197,255,.24) 0 1px, transparent 1.8px) 8px 12px/122px 122px;
  opacity:.55;
}
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-7;
  pointer-events:none;
  opacity:.75;
  background:radial-gradient(circle at 20% 22%, rgba(245,197,66,.12), transparent 20%),
    radial-gradient(circle at 76% 20%, rgba(137,180,255,.16), transparent 24%),
    radial-gradient(circle at 55% 78%, rgba(87,129,197,.12), transparent 26%);
  animation:portfolioGlowFloat 16s ease-in-out infinite alternate;
  filter:blur(18px);
}
.page::before, section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 12% 18%, rgba(255,255,255,.03), transparent 18%),
    radial-gradient(circle at 86% 12%, rgba(245,197,66,.05), transparent 18%),
    radial-gradient(circle at 56% 84%, rgba(137,180,255,.05), transparent 22%);
  opacity:.9;
}
.page > *, section > *{
  position:relative;
  z-index:1;
}
.page h1, .page h2, .page h3, .page h4, .page .role-title, .page .stack-tools-title h3, section h1, section h2, section h3{
  color:#ffffff;
}
.page p, .page .lead, .page .role-meta, .page li, .page span, section p, section li{
  color:#d9e5f2;
}
#experience::before, #projects::before, #courses::before, #testimonials::before, #contact::before{
  content:"";
  position:absolute;
  inset:-6%;
  z-index:0;
  pointer-events:none;
  opacity:.74;
  background:radial-gradient(circle, rgba(255,255,255,.96) 0 1px, transparent 1.8px) 0 0/46px 46px,
    radial-gradient(circle, rgba(245,197,66,.50) 0 1px, transparent 1.8px) 24px 30px/82px 82px,
    radial-gradient(circle, rgba(147,197,253,.40) 0 1px, transparent 1.8px) 18px 10px/118px 118px;
  animation:sectionStarDrift 56s linear infinite;
}
#experience::after, #projects::after, #courses::after, #testimonials::after, #contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background:radial-gradient(circle at 12% 12%, rgba(245,197,66,.08), transparent 22%),
    radial-gradient(circle at 86% 18%, rgba(99,102,241,.10), transparent 24%),
    radial-gradient(circle at 52% 88%, rgba(14,165,233,.08), transparent 26%);
  filter:blur(8px);
}
#experiment > *, #experience > *, #projects > *, #courses > *, #testimonials > *, #contact > *{
  position:relative;
  z-index:1;
}
#experiment h1, #experiment h2, #experiment h3, #experiment h4, #experience h1, #experience h2, #experience h3, #experience h4, #projects h1, #projects h2, #projects h3, #projects h4, #courses h1, #courses h2, #courses h3, #courses h4, #testimonials h1, #testimonials h2, #testimonials h3, #testimonials h4, #contact h1, #contact h2, #contact h3, #contact h4{
  color:#ffffff;
}
#experiment p, #experiment li, #experiment span, #experience p, #experience li, #experience span, #projects p, #projects li, #projects span, #courses p, #courses li, #courses span, #testimonials p, #testimonials li, #testimonials span, #contact p, #contact li, #contact span{
  color:#dbe7f5;
}
#experience .card, #experience .edu-logo-card, #experience .exp-logo-card, #experience .project-info-card, #experience .pill-card, #projects .card, #projects .edu-logo-card, #projects .exp-logo-card, #projects .project-info-card, #projects .pill-card, #courses .card, #courses .edu-logo-card, #courses .exp-logo-card, #courses .project-info-card, #courses .pill-card, #testimonials .card, #testimonials .testimonial-card, #testimonials .testimonial-photo-tile, #contact .card, #contact .contact-form, #contact .contact-form-status{
  min-height:18px;
  margin:10px 0 0;
  color:#ffe59a;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.contact-socials{
  background:rgba(7,17,31,.68);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  backdrop-filter:blur(10px);
}
html::after, body::before, body::after{
  content:none;
  display:none;
}
main, .page, .page.home, .page:not(.home), section, section.page, #home, #about, #experiment, #experience, #projects, #courses, #testimonials, #contact{
  background:transparent;
  background-color:transparent;
  background-image:none;
  border:0;
  border-top:0;
  border-bottom:0;
  outline:0;
  box-shadow:none;
  margin-top:0;
  margin-bottom:0;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}
main::before, main::after, .page::before, .page::after, section::before, section::after, #home::before, #home::after, #about::before, #about::after, #experiment::before, #experiment::after, #experience::before, #experience::after, #projects::before, #projects::after, #courses::before, #courses::after, #testimonials::before, #testimonials::after, #contact::before, #contact::after{
  content:none;
  display:none;
  background:none;
  background-image:none;
  border:0;
  box-shadow:none;
}
hr, .divider, .separator, .section-divider, .page-break, [class*="divider"], [class*="separator"], [class*="page-break"]{
  display:none;
  height:0;
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.page + .page, section + section, .page + section, section + .page{
  margin-top:0;
  border-top:0;
  box-shadow:none;
  background:transparent;
}
.card, .edu-logo-card, .exp-logo-card, .project-info-card, .pill-card, .testimonial-card, .testimonial-photo-tile, .contact-form, .contact-socials, .stack-focus-card, .tech-mini-card, .course-card, .metric-strip, .metric, .tools-pyramid, .refined-tools{
  background:rgba(6,16,38,.72);
  background-color:rgba(6,16,38,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  backdrop-filter:blur(10px);
}
.edu-logo-box, .exp-logo-box, .project-icon, .tool-logo-card{
  background:rgba(255,255,255,.94);
  color:#07111f;
}
.page h1, .page h2, .page h3, .page h4, section h1, section h2, section h3, section h4, .role-title, .stack-tools-title h3{
  color:#ffffff;
}
.page p, .page .lead, .page .role-meta, .page li, .page span, section p, section li, section span{
  color:#dbe7f5;
}
.kicker, .company, .edu-badge, .exp-badge, .project-badge, .testimonial-card strong{
  color:var(--yellow);
}
#about h1, #about h2, #about .about-heading, #about .section-title{
  font-size:clamp(28px, 3.1vw, 46px);
  line-height:1.05;
}
#about .section-copy, #about .about-copy, #about .about-text{
  transform:translateX(18px);
}
#about .section-copy h2, #about .about-copy h2, #about .about-text h2, #about h2{
  font-size:clamp(28px, 3.1vw, 46px);
  line-height:1.05;
  max-width:620px;
  margin-left:18px;
}
#about .lead:first-of-type, #about .section-copy .lead:first-of-type, #about .about-copy .lead:first-of-type{
  font-size:clamp(20px, 2vw, 30px);
  line-height:1.25;
  max-width:620px;
  margin-left:18px;
}
#about .pill-icon-wrap, #about .pill-icon{
  width:44px;
  height:44px;
}
#about .about-column-heading{
  font-size:clamp(24px, 2.6vw, 38px);
  line-height:1.08;
  max-width:720px;
  margin:0 0 22px 0;
  color:#ffffff;
  letter-spacing:-.035em;
  text-align:left;
  display:none;
}
#about .section-grid > div:first-child > .kicker, #about .section-grid > div:first-child > h1, #about .section-grid > div:first-child > h2, #about .section-grid > div:first-child > h3, #about .section-grid > div:first-child > p:not(.lead){
  display:none;
}
#about .section-grid > div:last-child{
  padding-top:40px;
}
#about .portrait-heading{
  display:block;
  font-size:clamp(24px, 2.6vw, 38px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:#ffffff;
  margin:0 0 22px 0;
  max-width:560px;
  text-align:left;
  margin-bottom:60px;
}
.page, section.page, #home, #about, #experiment, #experience, #projects, #courses, #testimonials, #contact{
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding-top:72px;
  padding-bottom:56px;
  box-sizing:border-box;
}
.page-title-center, .projects-showcase, .experience-showcase, .contact-title{
  margin-bottom:22px;
}
.exp-tabs, .project-tabs, .edu-tabs{
  margin-top:16px;
  margin-bottom:24px;
}
#home{
  padding-top:64px;
  padding-bottom:60px;
}
#contact .contact-page-wrap{
  max-width:1260px;
  margin:0 auto;
}
#contact .contact-title{
  text-align:center;
  margin-bottom:18px;
}
#contact .contact-work-layout{
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
  width:100%;
}
#contact .contact-work-layout > *{ flex:none; }
#contact .contact-right-panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 68px;
  gap:16px;
  align-items:stretch;
  width:100%;
  max-width:840px;
}
#contact .contact-form{
  padding:22px 24px;
  border-radius:24px;
  background:rgba(7,17,31,.66);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}
#contact .contact-form input, #contact .contact-form select, #contact .contact-form textarea{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.08);
  padding:11px 13px;
}
#contact .contact-form label{
  gap:7px;
  margin-bottom:14px;
}
#contact .contact-form textarea{
  min-height:86px;
}
#contact .contact-form-status{
  min-height:18px;
  margin:10px 0 0;
  color:#ffe59a;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.contact-socials{
  border-radius:24px;
  background:rgba(7,17,31,.55);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.animated-workstation{
  min-height:540px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:34px;
  background:radial-gradient(circle at 66% 38%, rgba(124,58,237,.26), transparent 28%),
    radial-gradient(circle at 38% 55%, rgba(37,99,235,.18), transparent 30%),
    linear-gradient(135deg, rgba(8,13,28,.30), rgba(7,17,31,.08));
  border:0;
  outline:0;
  box-shadow:none;
  cursor:pointer;
  user-select:none;
  transition:transform .28s ease, filter .28s ease;
  perspective:1000px;
}
.animated-workstation:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.7px) 0 0/58px 58px;
  opacity:.24;
  animation:workStars 24s linear infinite;
}
.space-glow{
  position:absolute;
  width:370px;
  height:370px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.28), rgba(37,99,235,.10), transparent 68%);
  filter:blur(18px);
  animation:pulseGlow 5s ease-in-out infinite alternate;
}
.desk-scene{
  position:relative;
  width:520px;
  height:420px;
  transform:perspective(900px) rotateX(8deg) rotateY(-13deg);
  transform-style:preserve-3d;
}
.back-panel{
  position:absolute;
  left:34px;
  top:8px;
  width:310px;
  height:335px;
  border-radius:38px;
  background:linear-gradient(135deg, rgba(16,24,44,.96), rgba(69,28,118,.72));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.28);
  transform:translateZ(-70px);
}
.desk{
  position:absolute;
  left:105px;
  top:220px;
  width:315px;
  height:110px;
  border-radius:24px;
  background:linear-gradient(135deg,#f05d2f,#b7421e);
  transform:rotateX(58deg) rotateZ(-8deg);
  box-shadow:0 28px 40px rgba(0,0,0,.28);
}
.desk:before, .desk:after{
  content:"";
  position:absolute;
  bottom:-68px;
  width:12px;
  height:86px;
  border-radius:12px;
  background:#332447;
}
.desk:before{
  left:36px;
}
.desk:after{
  right:36px;
}
.monitor{
  position:absolute;
  left:170px;
  top:120px;
  width:130px;
  height:95px;
  transform:translateZ(64px);
  animation:floatMonitor 4.8s ease-in-out infinite;
}
.monitor-screen{
  width:130px;
  height:76px;
  border-radius:12px;
  background:linear-gradient(135deg,#0a1023,#2f1456);
  border:8px solid #493175;
  display:grid;
  align-content:center;
  gap:6px;
  padding:12px;
  box-shadow:0 0 26px rgba(168,85,247,.35);
}
.monitor-screen span{
  display:block;
  height:5px;
  border-radius:99px;
  background:linear-gradient(90deg,#f5c542,#60a5fa);
  opacity:.85;
  animation:codeBlink 2.6s ease-in-out infinite;
}
.monitor-screen span:nth-child(2){
  width:70%;
  animation-delay:.4s;
}
.monitor-screen span:nth-child(3){
  width:50%;
  animation-delay:.8s;
}
.monitor-stand{
  width:16px;
  height:34px;
  background:#493175;
  margin:0 auto;
  border-radius:0 0 10px 10px;
}
.lamp{
  position:absolute;
  right:105px;
  top:100px;
  width:94px;
  height:135px;
  transform:translateZ(70px);
  animation:lampHover 5.2s ease-in-out infinite;
}
.lamp-head{
  position:absolute;
  top:30px;
  left:10px;
  width:86px;
  height:72px;
  border-radius:24px;
  background:linear-gradient(135deg,#d6e8ff,#7c3aed);
  box-shadow:0 0 38px rgba(96,165,250,.52);
}
.lamp-glow{
  position:absolute;
  top:44px;
  left:-36px;
  width:154px;
  height:92px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.35),transparent 66%);
  filter:blur(10px);
  animation:lampGlow 3s ease-in-out infinite alternate;
}
.lamp-neck{
  position:absolute;
  right:0;
  top:0;
  width:14px;
  height:130px;
  border-radius:999px;
  background:linear-gradient(#d6e8ff,#7c3aed);
}
.keyboard{
  position:absolute;
  left:128px;
  top:48px;
  width:92px;
  height:36px;
  border-radius:10px;
  background:#1b1731;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  padding:7px;
}
.keyboard i{
  border-radius:4px;
  background:linear-gradient(135deg,#d8b4fe,#60a5fa);
  animation:keyGlow 2.2s ease-in-out infinite;
}
.keyboard i:nth-child(2n){
  animation-delay:.5s;
}
.mouse{
  position:absolute;
  right:80px;
  top:54px;
  width:34px;
  height:22px;
  border-radius:50%;
  background:#f6e8ff;
}
.coffee{
  position:absolute;
  left:94px;
  top:45px;
  width:22px;
  height:28px;
  border-radius:8px;
  background:#eee3d0;
}
.speaker{
  position:absolute;
  width:28px;
  height:54px;
  border-radius:10px;
  background:#351f47;
  top:30px;
}
.left-speaker{
  left:34px;
}
.right-speaker{
  right:32px;
}
.chair{
  position:absolute;
  right:92px;
  bottom:18px;
  width:130px;
  height:145px;
  transform:translateZ(42px);
}
.chair-back{
  width:74px;
  height:78px;
  border-radius:26px;
  background:linear-gradient(135deg,#201a39,#0f1326);
  margin-left:28px;
  box-shadow:inset 0 0 22px rgba(168,85,247,.22);
}
.chair-seat{
  width:112px;
  height:34px;
  border-radius:50%;
  background:#1b1731;
  margin-top:-7px;
}
.chair-leg{
  width:12px;
  height:48px;
  border-radius:999px;
  background:#322a4f;
  margin:0 auto;
}
.wheel{
  position:absolute;
  bottom:0;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#0f1326;
}
.w1{
  left:30px;
}
.w2{
  right:30px;
}
.floating-chip{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(245,197,66,.92);
  color:#07111f;
  font-weight:950;
  box-shadow:0 0 30px rgba(245,197,66,.24);
  animation:chipFloat 5s ease-in-out infinite;
}
.chip-one{
  left:92px;
  top:110px;
}
.chip-two{
  right:80px;
  top:60px;
  animation-delay:1s;
}
.chip-three{
  right:36px;
  bottom:148px;
  animation-delay:2s;
}
.animated-workstation:hover{
  transform:translateY(-4px) scale(1.01);
  filter:saturate(1.08) brightness(1.04);
}
.animated-workstation:active, .animated-workstation.clicked{
  transform:translateY(2px) scale(.985);
}
.animated-workstation .desk-scene{
  transition:transform .22s ease, filter .22s ease;
  width:560px;
  height:420px;
  transform:perspective(980px) rotateX(7deg) rotateY(-24deg);
  transform-origin:center center;
}
.animated-workstation.clicked .desk-scene{
  animation:deskSideClickBounce .62s cubic-bezier(.2,.8,.2,1);
}
.animated-workstation.clicked .monitor-screen span{
  animation:codeBurst .55s ease both;
}
.animated-workstation.clicked .lamp-glow{
  animation:lampClickFlash .7s ease both;
}
.animated-workstation.clicked .floating-chip{
  animation:chipPop .72s ease both;
}
#contact .contact-form, #contact .contact-socials, .animated-workstation, .desk-scene, .back-panel{
  border-color:transparent;
}
#contact .contact-form, #contact .contact-form-status{
  min-height:18px;
  margin:10px 0 0;
  color:#ffe59a;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.contact-socials{
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.animated-workstation::after{
  content:"Click the workspace";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(219,231,245,.72);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  opacity:.72;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.animated-workstation:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-3px);
}
.animated-workstation.clicked::after{
  content:"Workspace activated";
  color:var(--yellow);
}
.cpu-tower{
  position:absolute;
  left:82px;
  top:168px;
  width:52px;
  height:112px;
  border-radius:16px;
  background:linear-gradient(145deg,#151b32 0%,#22264a 58%,#0b1023 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    inset -8px -10px 18px rgba(0,0,0,.22),
    0 18px 32px rgba(0,0,0,.28),
    0 0 28px rgba(96,165,250,.12);
  border:1px solid rgba(255,255,255,.08);
  transform:translateZ(78px) rotateZ(-4deg);
  animation:cpuFloat 5.4s ease-in-out infinite;
  overflow:hidden;
}
.cpu-tower::before{
  content:"";
  position:absolute;
  inset:10px 11px auto;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(96,165,250,.22),rgba(168,85,247,.24));
  border:1px solid rgba(255,255,255,.07);
}
.cpu-tower::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  height:28px;
  border-radius:9px;
  background:repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.14) 0 2px,
      transparent 2px 6px
    );
  opacity:.7;
}
.cpu-glow{
  position:absolute;
  width:18px;
  height:18px;
  right:10px;
  top:18px;
  border-radius:50%;
  background:radial-gradient(circle,var(--yellow),rgba(245,197,66,.12),transparent 72%);
  box-shadow:0 0 18px rgba(245,197,66,.72);
  animation:cpuPulse 2.4s ease-in-out infinite;
}
.cpu-line{
  position:absolute;
  left:12px;
  top:58px;
  width:27px;
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,#60a5fa,#d8b4fe);
  opacity:.8;
}
.cpu-line.short{
  top:68px;
  width:19px;
  opacity:.55;
}
.cpu-button{
  position:absolute;
  right:12px;
  bottom:46px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#60a5fa;
  box-shadow:0 0 14px rgba(96,165,250,.75);
}
.animated-workstation.clicked .cpu-tower{
  animation:cpuRightClickPop .72s ease both;
}
.animated-workstation.clicked .cpu-glow{
  animation:cpuClickFlash .72s ease both;
}
.animated-workstation:hover .desk-scene{
  transform:perspective(980px) rotateX(6deg) rotateY(-20deg) translateY(-2px);
}
.animated-workstation .back-panel{
  left:42px;
  top:18px;
  width:330px;
  height:315px;
  transform:translateZ(-92px) rotateY(4deg);
  opacity:.92;
}
.animated-workstation .desk{
  left:106px;
  top:232px;
  width:365px;
  height:112px;
  transform:rotateX(60deg) rotateZ(-10deg) skewX(-3deg);
}
.animated-workstation .monitor{
  left:166px;
  top:120px;
  transform:translateZ(64px) rotateY(3deg);
}
.animated-workstation .lamp{
  right:58px;
  top:92px;
}
.animated-workstation .cpu-tower{
  left:auto;
  right:42px;
  top:182px;
  width:58px;
  height:124px;
  transform:translateZ(92px) rotateZ(3deg) rotateY(-8deg);
  animation:cpuFloatRight 5.4s ease-in-out infinite;
}
.animated-workstation .mouse{
  right:58px;
  top:52px;
  width:38px;
  height:24px;
  transform:rotateZ(6deg);
  box-shadow:0 0 16px rgba(255,255,255,.16);
}
.animated-workstation .keyboard{
  left:134px;
  top:48px;
}
.animated-workstation .left-speaker{
  left:34px;
  top:34px;
}
.animated-workstation .right-speaker{
  right:116px;
  top:26px;
}
.animated-workstation .chair{
  right:88px;
  bottom:12px;
}
.animated-workstation .coffee{
  left:82px;
  top:48px;
}
.premium-workstation{
  min-height:540px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  border:0;
  outline:0;
  box-shadow:none;
  background:radial-gradient(circle at 68% 34%, rgba(96,165,250,.22), transparent 26%),
    radial-gradient(circle at 36% 58%, rgba(168,85,247,.20), transparent 30%),
    linear-gradient(135deg, rgba(6,16,38,.16), rgba(7,17,31,.02));
  cursor:pointer;
}
.premium-workstation::after{
  content:none;
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(219,231,245,.72);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  opacity:.72;
  transition:.25s ease;
  pointer-events:none;
  display:none;
}
.premium-workstation:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-3px);
}
.premium-workstation.clicked::after{
  content:"Workspace activated";
  color:var(--yellow);
}
.workspace-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  filter:blur(.2px);
  opacity:.6;
}
.orbit-a{
  width:420px;
  height:180px;
  transform:rotate(-12deg);
  animation:orbitDriftA 12s ease-in-out infinite alternate;
}
.orbit-b{
  width:520px;
  height:230px;
  transform:rotate(18deg);
  animation:orbitDriftB 14s ease-in-out infinite alternate;
}
.premium-desk-scene{
  position:relative;
  width:560px;
  height:430px;
  transform:perspective(980px) rotateX(8deg) rotateY(-18deg);
  transform-style:preserve-3d;
  transition:transform .22s ease, filter .22s ease;
}
.premium-workstation:hover .premium-desk-scene{
  filter:saturate(1.05) brightness(1.03);
}
.room-panel{
  position:absolute;
  left:52px;
  top:18px;
  width:355px;
  height:310px;
  border-radius:38px;
  background:linear-gradient(135deg, rgba(10,18,36,.96), rgba(42,20,82,.62)),
    radial-gradient(circle at 70% 35%, rgba(96,165,250,.16), transparent 36%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 32px 80px rgba(0,0,0,.22);
  transform:translateZ(-92px);
}
.wall-shelf{
  position:absolute;
  left:282px;
  top:52px;
  width:132px;
  height:74px;
  transform:translateZ(-20px) rotateY(-6deg);
}
.wall-shelf::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
}
.wall-shelf span{
  position:absolute;
  bottom:8px;
  width:18px;
  height:48px;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#d8b4fe,#60a5fa);
  box-shadow:0 0 18px rgba(96,165,250,.18);
  animation:bookGlow 3s ease-in-out infinite alternate;
}
.wall-shelf span:nth-child(1){
  left:18px;
  height:42px;
}
.wall-shelf span:nth-child(2){
  left:46px;
  height:60px;
  animation-delay:.5s;
}
.wall-shelf span:nth-child(3){
  left:74px;
  height:50px;
  animation-delay:1s;
}
.main-monitor{
  position:absolute;
  left:134px;
  top:108px;
  width:176px;
  height:140px;
  transform:translateZ(80px);
  animation:monitorPremiumFloat 5.4s ease-in-out infinite;
}
.screen-glow{
  position:absolute;
  inset:-22px;
  border-radius:28px;
  background:radial-gradient(circle, rgba(96,165,250,.20), transparent 64%);
  filter:blur(10px);
}
.screen-content{
  position:relative;
  width:176px;
  height:102px;
  border-radius:18px;
  background:linear-gradient(135deg,#07111f,#1a1244);
  border:9px solid rgba(216,180,254,.44);
  box-shadow:0 0 32px rgba(168,85,247,.32);
  padding:14px;
  box-sizing:border-box;
}
.screen-topbar{
  width:44px;
  height:6px;
  border-radius:99px;
  background:rgba(245,197,66,.9);
  margin-bottom:10px;
}
.code-row{
  height:5px;
  border-radius:99px;
  background:linear-gradient(90deg,#60a5fa,#d8b4fe);
  margin-bottom:7px;
  animation:screenCodeMove 2.8s ease-in-out infinite;
}
.code-row.long{
  width:100%;
}
.code-row.mid{
  width:72%;
  animation-delay:.3s;
}
.code-row.short{
  width:50%;
  animation-delay:.6s;
}
.chart-bars{
  position:absolute;
  right:16px;
  bottom:14px;
  display:flex;
  gap:4px;
  align-items:end;
}
.chart-bars i{
  width:6px;
  border-radius:99px;
  background:var(--yellow);
  animation:barRise 1.8s ease-in-out infinite alternate;
}
.chart-bars i:nth-child(1){
  height:14px;
}
.chart-bars i:nth-child(2){
  height:24px;
  animation-delay:.2s;
}
.chart-bars i:nth-child(3){
  height:18px;
  animation-delay:.4s;
}
.chart-bars i:nth-child(4){
  height:30px;
  animation-delay:.6s;
}
.monitor-neck{
  width:18px;
  height:38px;
  border-radius:0 0 8px 8px;
  background:rgba(216,180,254,.44);
  margin:0 auto;
}
.monitor-base{
  width:70px;
  height:12px;
  border-radius:999px;
  background:rgba(216,180,254,.44);
  margin:-2px auto 0;
}
.side-tablet{
  position:absolute;
  right:96px;
  top:114px;
  width:88px;
  height:108px;
  border-radius:24px;
  background:linear-gradient(135deg,#dbeafe,#7c3aed);
  transform:translateZ(92px) rotateY(-18deg);
  box-shadow:0 0 40px rgba(96,165,250,.42);
  animation:tabletFloat 5s ease-in-out infinite;
}
.tablet-glow{
  position:absolute;
  inset:20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.8), transparent 66%);
  filter:blur(8px);
}
.tablet-line, .tablet-line.small{
  position:absolute;
  left:20px;
  right:20px;
  bottom:28px;
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.62);
}
.tablet-line.small{
  bottom:42px;
  right:34px;
}
.desk-surface{
  position:absolute;
  left:94px;
  top:230px;
  width:390px;
  height:120px;
  border-radius:28px;
  background:linear-gradient(135deg,#f9733d,#b8421e);
  transform:rotateX(60deg) rotateZ(-9deg) skewX(-3deg);
  box-shadow:0 30px 44px rgba(0,0,0,.30);
}
.desk-edge{
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:18px;
  border-radius:0 0 24px 24px;
  background:linear-gradient(135deg,#9d3418,#5b1a12);
}
.keyboard-premium{
  position:absolute;
  left:138px;
  top:48px;
  width:120px;
  height:40px;
  border-radius:12px;
  background:#151329;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  padding:8px;
}
.keyboard-premium i{
  border-radius:4px;
  background:linear-gradient(135deg,#d8b4fe,#60a5fa);
  animation:keyPremium 2s ease-in-out infinite;
}
.keyboard-premium i:nth-child(2n){
  animation-delay:.35s;
}
.mouse-premium{
  position:absolute;
  right:58px;
  top:52px;
  width:42px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,#fff,#dbeafe);
  box-shadow:0 0 16px rgba(255,255,255,.16);
  animation:mouseTap 3.2s ease-in-out infinite;
}
.notebook-premium{
  position:absolute;
  left:62px;
  top:56px;
  width:54px;
  height:40px;
  border-radius:8px;
  background:linear-gradient(135deg,#fef3c7,#f5c542);
  opacity:.9;
}
.coffee-premium{
  position:absolute;
  left:112px;
  top:34px;
  width:24px;
  height:30px;
  border-radius:9px;
  background:#eee3d0;
}
.coffee-premium::after{
  content:"";
  position:absolute;
  right:-10px;
  top:8px;
  width:11px;
  height:10px;
  border:3px solid #eee3d0;
  border-left:0;
  border-radius:0 10px 10px 0;
}
.mini-plant{
  position:absolute;
  right:116px;
  top:22px;
  width:28px;
  height:40px;
}
.mini-plant::after{
  content:"";
  position:absolute;
  bottom:0;
  left:6px;
  width:18px;
  height:16px;
  border-radius:5px;
  background:#5b341a;
}
.mini-plant span{
  position:absolute;
  bottom:14px;
  width:14px;
  height:24px;
  border-radius:14px 14px 0 14px;
  background:#34d399;
  transform-origin:bottom center;
  animation:leafSway 3.2s ease-in-out infinite;
}
.mini-plant span:nth-child(1){
  left:0;
  transform:rotate(-26deg);
}
.mini-plant span:nth-child(2){
  left:9px;
  transform:rotate(0deg);
  animation-delay:.35s;
}
.mini-plant span:nth-child(3){
  right:0;
  transform:rotate(26deg);
  animation-delay:.7s;
}
.cpu-premium{
  position:absolute;
  right:32px;
  top:188px;
  width:64px;
  height:130px;
  border-radius:20px;
  background:linear-gradient(145deg,#141b31,#25254b 58%,#0b1023);
  transform:translateZ(106px) rotateZ(3deg) rotateY(-10deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset -8px -10px 18px rgba(0,0,0,.22), 0 20px 34px rgba(0,0,0,.30);
  animation:cpuPremiumFloat 5.4s ease-in-out infinite;
  overflow:hidden;
}
.cpu-light{
  position:absolute;
  right:13px;
  top:18px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle,var(--yellow),rgba(245,197,66,.14),transparent 72%);
  box-shadow:0 0 18px rgba(245,197,66,.75);
  animation:cpuLightPulse 2.4s ease-in-out infinite;
}
.cpu-vents{
  position:absolute;
  left:13px;
  bottom:16px;
  display:grid;
  gap:5px;
}
.cpu-vents i{
  width:34px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.25);
}
.cpu-card{
  position:absolute;
  left:13px;
  top:48px;
  width:38px;
  height:30px;
  border-radius:9px;
  background:linear-gradient(135deg,rgba(96,165,250,.24),rgba(168,85,247,.28));
  border:1px solid rgba(255,255,255,.08);
}
.desk-leg{
  position:absolute;
  width:12px;
  height:96px;
  border-radius:99px;
  background:#332447;
  top:318px;
  transform:translateZ(12px);
}
.left-leg{
  left:142px;
}
.right-leg{
  right:104px;
}
.chair-premium{
  position:absolute;
  right:92px;
  bottom:12px;
  width:132px;
  height:150px;
  transform:translateZ(44px);
}
.chair-back-premium{
  width:78px;
  height:82px;
  border-radius:28px;
  background:linear-gradient(135deg,#201a39,#0f1326);
  margin-left:28px;
  box-shadow:inset 0 0 22px rgba(168,85,247,.22);
}
.chair-seat-premium{
  width:116px;
  height:36px;
  border-radius:50%;
  background:#1b1731;
  margin-top:-8px;
}
.chair-stem-premium{
  width:12px;
  height:48px;
  border-radius:999px;
  background:#322a4f;
  margin:0 auto;
}
.chair-base-premium{
  width:96px;
  height:14px;
  border-radius:999px;
  background:#201a39;
  margin:0 auto;
}
.floating-badge{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(245,197,66,.92);
  color:#07111f;
  font-weight:950;
  box-shadow:0 0 30px rgba(245,197,66,.24);
  animation:badgeFloat 5s ease-in-out infinite;
}
.badge-ai{
  left:88px;
  top:116px;
}
.badge-cv{
  right:72px;
  top:64px;
  animation-delay:1s;
}
.badge-ml{
  right:34px;
  bottom:150px;
  animation-delay:2s;
}
.premium-workstation.clicked .premium-desk-scene{
  animation:premiumDeskClick .65s cubic-bezier(.2,.8,.2,1);
}
.premium-workstation.clicked .cpu-premium{
  animation:cpuVisiblePop .72s ease both;
}
.project-tabs, .exp-tabs, .edu-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.project-tab, .exp-tab, .edu-tab{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#f4f7fb;
  border-radius:999px;
  padding:12px 22px;
  font-size:14px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.12);
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.project-tab:hover, .exp-tab:hover, .edu-tab:hover{
  transform:translateY(-2px);
  border-color:rgba(245,197,66,.50);
  color:#ffffff;
}
.project-tab.active, .project-tab[aria-selected="true"], .exp-tab.active, .exp-tab[aria-selected="true"], .edu-tab.active, .edu-tab[aria-selected="true"]{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#07111f;
  box-shadow:0 12px 28px rgba(245,197,66,.22);
}
#projects .project-tabs{
  margin-top:18px;
  margin-bottom:28px;
}
#projects .project-tab{
  min-width:132px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:#cbd5e1;
}
.card, .edu-logo-card, .exp-logo-card, .project-info-card, .pill-card, .testimonial-card, .contact-form, .contact-socials, .stack-focus-card, .tech-mini-card, .course-card, .metric-strip, .metric, .tools-pyramid, .refined-tools, .project-tool-tile, .local-tool-cloud, .testimonial-scroll-panel, .pinterest-scroll-panel{
  color:#f8fafc;
}
.card h1,.card h2,.card h3,.card h4, .edu-logo-card h1,.edu-logo-card h2,.edu-logo-card h3,.edu-logo-card h4, .exp-logo-card h1,.exp-logo-card h2,.exp-logo-card h3,.exp-logo-card h4, .project-info-card h1,.project-info-card h2,.project-info-card h3,.project-info-card h4, .pill-card h1,.pill-card h2,.pill-card h3,.pill-card h4, .testimonial-card h1,.testimonial-card h2,.testimonial-card h3,.testimonial-card h4, .contact-form h1,.contact-form h2,.contact-form h3,.contact-form h4, .contact-socials h1,.contact-socials h2,.contact-socials h3,.contact-socials h4, .stack-focus-card h1,.stack-focus-card h2,.stack-focus-card h3,.stack-focus-card h4, .tech-mini-card h1,.tech-mini-card h2,.tech-mini-card h3,.tech-mini-card h4, .course-card h1,.course-card h2,.course-card h3,.course-card h4, .metric h1,.metric h2,.metric h3,.metric h4{
  color:#ffffff;
}
.card p,.card li,.card span:not(.local-logo):not(.pill-icon), .edu-logo-card p,.edu-logo-card li,.edu-logo-card span:not(.local-logo):not(.pill-icon), .exp-logo-card p,.exp-logo-card li,.exp-logo-card span:not(.local-logo):not(.pill-icon), .project-info-card p,.project-info-card li,.project-info-card span:not(.local-logo):not(.pill-icon), .pill-card p,.pill-card li,.pill-card span:not(.local-logo):not(.pill-icon), .testimonial-card p,.testimonial-card li,.testimonial-card span:not(.local-logo):not(.pill-icon), .contact-form p,.contact-form li,.contact-form span:not(.local-logo):not(.pill-icon), .contact-socials p,.contact-socials li,.contact-socials span:not(.local-logo):not(.pill-icon), .stack-focus-card p,.stack-focus-card li,.stack-focus-card span:not(.local-logo):not(.pill-icon), .tech-mini-card p,.tech-mini-card li,.tech-mini-card span:not(.local-logo):not(.pill-icon), .course-card p,.course-card li,.course-card span:not(.local-logo):not(.pill-icon){
  color:#dbe7f5;
}
.edu-logo-box, .exp-logo-box, .project-icon, .tool-logo-card, .concept-pill, .local-logo, .orbit-core, .orbit-card, .metric .num, .hero-stat, input, select, textarea{
  color:#07111f;
}
.edu-logo-box *, .exp-logo-box *, .project-icon *, .tool-logo-card *, .concept-pill *, .local-logo *, .orbit-core *, .orbit-card *{
  color:#07111f;
}
.edu-badge, .exp-badge, .project-badge{
  color:var(--yellow);
}
.project-tab.active *, .exp-tab.active *, .edu-tab.active *{
  color:#07111f;
}
.premium-workstation .cpu-premium{
  left:34px;
  right:auto;
  top:auto;
  bottom:-20px;
  width:62px;
  height:126px;
  transform:translateZ(0px) rotateZ(-2deg) rotateY(8deg);
  z-index:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    inset -8px -10px 18px rgba(0,0,0,.22),
    0 20px 36px rgba(0,0,0,.36),
    0 0 20px rgba(96,165,250,.14);
  animation:cpuVisibleFloat 5.2s ease-in-out infinite;
}
.premium-workstation .pen-stand{
  position:absolute;
  left:286px;
  top:34px;
  width:30px;
  height:34px;
  border-radius:9px 9px 12px 12px;
  background:linear-gradient(180deg,#172038,#0f152b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 18px rgba(0,0,0,.22),
    0 0 18px rgba(96,165,250,.08);
  border:1px solid rgba(255,255,255,.08);
  overflow:visible;
}
.premium-workstation .pen-stand::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  height:2px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
}
.premium-workstation .pen{
  position:absolute;
  bottom:18px;
  width:5px;
  border-radius:6px 6px 2px 2px;
  transform-origin:bottom center;
  box-shadow:0 0 10px rgba(255,255,255,.08);
}
.premium-workstation .pen::before{
  content:"";
  position:absolute;
  top:-8px;
  left:0;
  right:0;
  height:10px;
  border-radius:6px 6px 2px 2px;
}
.premium-workstation .pen::after{
  content:"";
  position:absolute;
  top:-12px;
  left:1px;
  width:3px;
  height:5px;
  border-radius:3px;
  background:#dbe7f5;
}
.premium-workstation .pen-a{
  left:6px;
  height:34px;
  background:linear-gradient(180deg,#60a5fa,#1d4ed8);
  transform:rotate(-8deg);
}
.premium-workstation .pen-a::before{
  background:linear-gradient(180deg,#93c5fd,#60a5fa);
}
.premium-workstation .pen-b{
  left:13px;
  height:38px;
  background:linear-gradient(180deg,#f5c542,#ca8a04);
  transform:rotate(2deg);
}
.premium-workstation .pen-b::before{
  background:linear-gradient(180deg,#fde68a,#f5c542);
}
.premium-workstation .pen-c{
  left:20px;
  height:32px;
  background:linear-gradient(180deg,#d8b4fe,#9333ea);
  transform:rotate(10deg);
}
.premium-workstation .pen-c::before{
  background:linear-gradient(180deg,#e9d5ff,#d8b4fe);
}
.premium-workstation:hover .pen-stand{
  transform:translateY(-2px);
}
.premium-workstation.clicked .pen-stand{
  animation:penStandPop .68s ease both;
}
#contact select, .contact-form select, select{
  background:rgba(10, 18, 36, 0.92);
  color:#f8fafc;
  border:1px solid rgba(255,255,255,0.12);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
#contact select option, .contact-form select option, select option{
  background:#07111f;
  color:#f8fafc;
}
#contact select:focus, .contact-form select:focus, select:focus{
  outline:none;
  border-color:rgba(245,197,66,0.75);
  box-shadow:0 0 0 3px rgba(245,197,66,0.12);
}
#contact select optgroup, .contact-form select optgroup, select optgroup{
  background:#07111f;
  color:#f5c542;
}
.premium-workstation .desk-surface, .premium-workstation .desk-leg{
  z-index:3;
}
.premium-workstation .chair-premium, .premium-workstation .main-monitor, .premium-workstation .side-tablet{
  z-index:4;
}
.premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover .premium-workstation:hover /* subtle sparkle halo when each chip bursts */ .premium-workstation:hover .chip-1::after{
  animation-delay:.00s;
}
.premium-workstation:hover .chip-2::after{
  animation-delay:.10s;
}
.premium-workstation:hover .chip-3::after{
  animation-delay:.20s;
}
.premium-workstation:hover .chip-4::after{
  animation-delay:.30s;
}
.premium-workstation:hover .chip-5::after{
  animation-delay:.40s;
}
.premium-workstation:hover .chip-6::after{
  animation-delay:.50s;
}
.premium-workstation:hover .chip-7::after{
  animation-delay:.60s;
}
.premium-workstation:hover .chip-8::after{
  animation-delay:.70s;
}
.premium-workstation:hover .chip-9::after{
  animation-delay:.80s;
}
.premium-workstation:hover .chip-10::after{
  animation-delay:.90s;
}
.premium-workstation:not(:hover) /* ===== Final contrast + tab card styling updates ===== */ /* First page metric strip: make all text visible in white */ .metric-strip{
  background:linear-gradient(135deg, rgba(8,22,48,.94), rgba(5,16,38,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.metric strong, .metric span{
  color:#ffffff;
}
#project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card{
  min-height:290px;
  border-radius:30px;
  background:radial-gradient(circle at top left, rgba(82,105,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(18,27,60,.98), rgba(7,16,38,.97));
  border:1.4px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding:22px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#project-tab-projects .project-info-card:hover, #project-tab-publications .project-info-card:hover, #project-tab-conferences .project-info-card:hover{
  transform:translateY(-6px) rotate(-.2deg);
  border-color:rgba(167,192,255,.26);
  box-shadow:0 24px 60px rgba(0,0,0,.40),
    0 0 26px rgba(79,117,255,.16);
}
#project-tab-projects .project-icon, #project-tab-publications .project-icon, #project-tab-conferences .project-icon{
  height:116px;
  border-radius:24px;
  background:rgba(244,247,252,.98);
  color:#0a1630;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900;
  margin-bottom:18px;
  letter-spacing:-.03em;
}
#project-tab-projects .project-badge, #project-tab-publications .project-badge, #project-tab-conferences .project-badge{
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(245,197,66,.14);
  color:#f5c542;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  margin-bottom:12px;
}
#project-tab-projects .project-info-card h3, #project-tab-publications .project-info-card h3, #project-tab-conferences .project-info-card h3{
  margin:0 0 10px 0;
  font-size:27px;
  line-height:1.2;
  color:#ffffff;
}
#project-tab-projects .project-info-card p, #project-tab-publications .project-info-card p, #project-tab-conferences .project-info-card p{
  margin:0;
  color:rgba(236,242,255,.83);
  font-size:17px;
  line-height:1.56;
}
.edu-card-grid, #project-tab-projects .project-info-grid, #project-tab-publications .project-info-grid, #project-tab-conferences .project-info-grid{
  perspective:1200px;
  transform-style:preserve-3d;
}
.edu-logo-card, #project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card{
  position:relative;
  transform-style:preserve-3d;
  transform:none;
  transition:none;
  will-change:auto;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,33,64,.96), rgba(8,19,42,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.30);
  backdrop-filter:blur(10px);
  animation:none;
  translate:none;
  rotate:none;
  scale:none;
  filter:none;
}
.edu-logo-card::before, #project-tab-projects .project-info-card::before, #project-tab-publications .project-info-card::before, #project-tab-conferences .project-info-card::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-18px;
  height:28px;
  border-radius:inherit;
  background:radial-gradient(circle at 18% 8%, rgba(245,197,66,.22), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(245,197,66,.12), transparent 24%),
    linear-gradient(135deg, rgba(245,197,66,.16), transparent 32%, rgba(255,255,255,.035) 64%, rgba(245,197,66,.10));
  opacity:0;
  filter:blur(.2px);
  transform:translateZ(-1px) scale(.86);
  transition:opacity 620ms cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  inset:-1px;
  z-index:0;
}
.edu-logo-card:hover, #project-tab-projects .project-info-card:hover, #project-tab-publications .project-info-card:hover, #project-tab-conferences .project-info-card:hover{
  transform:translateY(-6px) scale(1.006);
  border-color:rgba(245,197,66,.30);
  filter:saturate(1.04) brightness(1.035);
  box-shadow:0 28px 72px rgba(0,0,0,.34),
    0 0 34px rgba(245,197,66,.095),
    inset 0 1px 0 rgba(255,255,255,.075);
  background:radial-gradient(circle at 18% 0%, rgba(245,197,66,.095), transparent 34%),
    linear-gradient(180deg, rgba(18,38,78,.82), rgba(8,20,46,.78));
  backdrop-filter:blur(12px);
}
.edu-logo-card:hover::before, #project-tab-projects .project-info-card:hover::before, #project-tab-publications .project-info-card:hover::before, #project-tab-conferences .project-info-card:hover::before{
  opacity:1;
  bottom:auto;
  transform:translateZ(-1px) scale(1.08);
}
.edu-logo-card .edu-logo-box, #project-tab-projects .project-icon, #project-tab-publications .project-icon, #project-tab-conferences .project-icon{
  transition:transform .42s cubic-bezier(.18,.84,.22,1), box-shadow .42s ease;
}
.edu-logo-card:hover .edu-logo-box, #project-tab-projects .project-info-card:hover .project-icon, #project-tab-publications .project-info-card:hover .project-icon, #project-tab-conferences .project-info-card:hover .project-icon{
  transform:translateY(-2px) scale(1.018);
  box-shadow:0 16px 34px rgba(0,0,0,.16),
    0 0 24px rgba(245,197,66,.13);
  background:radial-gradient(circle at 34% 22%, rgba(245,197,66,.12), transparent 34%),
    rgba(248,250,252,.98);
  filter:brightness(1.02);
}
.edu-logo-card:active, #project-tab-projects .project-info-card:active, #project-tab-publications .project-info-card:active, #project-tab-conferences .project-info-card:active{
  transform:translateY(-2px) scale(.998);
  box-shadow:0 4px 12px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition-duration:220ms;
}
.edu-logo-card:active::before, #project-tab-projects .project-info-card:active::before, #project-tab-publications .project-info-card:active::before, #project-tab-conferences .project-info-card:active::before{
  opacity:.86;
  bottom:-4px;
  transform:translateZ(-1px) scale(1.16);
}
.edu-card-grid .edu-logo-card:nth-child(2n), #project-tab-projects .project-info-card:nth-child(2n), #project-tab-publications .project-info-card:nth-child(2n), #project-tab-conferences .project-info-card:nth-child(2n){
  transform-origin:center 85%;
}
.edu-card-grid .edu-logo-card:nth-child(2n):hover, #project-tab-projects .project-info-card:nth-child(2n):hover, #project-tab-publications .project-info-card:nth-child(2n):hover, #project-tab-conferences .project-info-card:nth-child(2n):hover{
  transform:translateY(14px)
    rotateX(8deg)
    rotateY(3deg)
    scale(.985);
}
.edu-logo-card::after, #project-tab-projects .project-info-card::after, #project-tab-publications .project-info-card::after, #project-tab-conferences .project-info-card::after{
  content:"";
  position:absolute;
  top:-140%;
  left:-85%;
  width:70%;
  height:260%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.00) 34%,
    rgba(255,255,255,.10) 48%,
    rgba(245,197,66,.10) 52%,
    rgba(255,255,255,.00) 68%,
    transparent 100%
  );
  transform:translateX(0) rotate(8deg);
  transition:opacity 620ms cubic-bezier(.22,1,.36,1),
    transform 760ms cubic-bezier(.22,1,.36,1);
  z-index:1;
}
.edu-logo-card > *, #project-tab-projects .project-info-card > *, #project-tab-publications .project-info-card > *, #project-tab-conferences .project-info-card > *{
  position:relative;
  z-index:2;
}
.edu-logo-card:hover::after, #project-tab-projects .project-info-card:hover::after, #project-tab-publications .project-info-card:hover::after, #project-tab-conferences .project-info-card:hover::after{
  opacity:1;
  transform:translateX(250%) rotate(8deg);
}
.edu-logo-card .edu-logo-box, #project-tab-projects .project-info-card .project-icon, #project-tab-publications .project-info-card .project-icon, #project-tab-conferences .project-info-card .project-icon{
  transition:background 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  transform:none;
  animation:none;
}
.edu-logo-card h3, #project-tab-projects .project-info-card h3, #project-tab-publications .project-info-card h3, #project-tab-conferences .project-info-card h3{
  transition:color 620ms cubic-bezier(.22,1,.36,1);
}
.edu-logo-card:hover h3, #project-tab-projects .project-info-card:hover h3, #project-tab-publications .project-info-card:hover h3, #project-tab-conferences .project-info-card:hover h3{
  color:#ffffff;
}
.edu-logo-card:hover, .edu-logo-card:active, .edu-logo-card:focus, .edu-logo-card:focus-within, #project-tab-projects .project-info-card:hover, #project-tab-projects .project-info-card:active, #project-tab-projects .project-info-card:focus, #project-tab-projects .project-info-card:focus-within, #project-tab-publications .project-info-card:hover, #project-tab-publications .project-info-card:active, #project-tab-publications .project-info-card:focus, #project-tab-publications .project-info-card:focus-within, #project-tab-conferences .project-info-card:hover, #project-tab-conferences .project-info-card:active, #project-tab-conferences .project-info-card:focus, #project-tab-conferences .project-info-card:focus-within{
  transform:none;
  animation:none;
}
.edu-logo-card::before, .edu-logo-card::after, #project-tab-projects .project-info-card::before, #project-tab-projects .project-info-card::after, #project-tab-publications .project-info-card::before, #project-tab-publications .project-info-card::after, #project-tab-conferences .project-info-card::before, #project-tab-conferences .project-info-card::after{
  transform:none;
  transition:opacity 260ms ease;
  animation:none;
}
.edu-logo-card:hover .edu-logo-box, .edu-logo-card:active .edu-logo-box, #project-tab-projects .project-info-card:hover .project-icon, #project-tab-projects .project-info-card:active .project-icon, #project-tab-publications .project-info-card:hover .project-icon, #project-tab-publications .project-info-card:active .project-icon, #project-tab-conferences .project-info-card:hover .project-icon, #project-tab-conferences .project-info-card:active .project-icon{
  transform:none;
  animation:none;
}
.edu-logo-card:hover, .edu-logo-card:focus, .edu-logo-card:focus-within, .edu-logo-card:active, #project-tab-projects .project-info-card:hover, #project-tab-projects .project-info-card:focus, #project-tab-projects .project-info-card:focus-within, #project-tab-projects .project-info-card:active, #project-tab-publications .project-info-card:hover, #project-tab-publications .project-info-card:focus, #project-tab-publications .project-info-card:focus-within, #project-tab-publications .project-info-card:active, #project-tab-conferences .project-info-card:hover, #project-tab-conferences .project-info-card:focus, #project-tab-conferences .project-info-card:focus-within, #project-tab-conferences .project-info-card:active{
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  filter:none;
}
.edu-logo-card::before, .edu-logo-card::after, .edu-logo-card:hover::before, .edu-logo-card:hover::after, .edu-logo-card:active::before, .edu-logo-card:active::after, #project-tab-projects .project-info-card::before, #project-tab-projects .project-info-card::after, #project-tab-projects .project-info-card:hover::before, #project-tab-projects .project-info-card:hover::after, #project-tab-projects .project-info-card:active::before, #project-tab-projects .project-info-card:active::after, #project-tab-publications .project-info-card::before, #project-tab-publications .project-info-card::after, #project-tab-publications .project-info-card:hover::before, #project-tab-publications .project-info-card:hover::after, #project-tab-publications .project-info-card:active::before, #project-tab-publications .project-info-card:active::after, #project-tab-conferences .project-info-card::before, #project-tab-conferences .project-info-card::after, #project-tab-conferences .project-info-card:hover::before, #project-tab-conferences .project-info-card:hover::after, #project-tab-conferences .project-info-card:active::before, #project-tab-conferences .project-info-card:active::after{
  content:none;
  display:none;
  opacity:0;
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  box-shadow:none;
  filter:none;
}
.edu-logo-card *, #project-tab-projects .project-info-card *, #project-tab-publications .project-info-card *, #project-tab-conferences .project-info-card *{
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  will-change:auto;
}
.edu-logo-card:hover, .edu-logo-card:active, #project-tab-projects .project-info-card:hover, #project-tab-projects .project-info-card:active, #project-tab-publications .project-info-card:hover, #project-tab-publications .project-info-card:active, #project-tab-conferences .project-info-card:hover, #project-tab-conferences .project-info-card:active{
  background:linear-gradient(180deg, rgba(18,33,64,.96), rgba(8,19,42,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.30);
}
.edu-card-grid .edu-logo-card, .edu-card-grid .edu-logo-card:nth-child(1), .edu-card-grid .edu-logo-card:nth-child(2), .edu-card-grid .edu-logo-card:nth-child(3), .edu-card-grid .edu-logo-card:nth-child(4), .edu-card-grid .edu-logo-card:nth-child(5), .edu-card-grid .edu-logo-card:nth-child(6), .edu-card-grid .edu-logo-card:nth-child(2n), .edu-card-grid .edu-logo-card:nth-child(odd), .edu-card-grid .edu-logo-card:nth-child(even), .edu-card-grid .edu-logo-card:hover, .edu-card-grid .edu-logo-card:active, .edu-card-grid .edu-logo-card:focus, .edu-card-grid .edu-logo-card:nth-child(2n):hover, .edu-card-grid .edu-logo-card:nth-child(odd):hover, .edu-card-grid .edu-logo-card:nth-child(even):hover{
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  will-change:auto;
}
#project-tab-projects .project-info-grid .project-info-card, #project-tab-projects .project-info-grid .project-info-card:nth-child(1), #project-tab-projects .project-info-grid .project-info-card:nth-child(2), #project-tab-projects .project-info-grid .project-info-card:nth-child(3), #project-tab-projects .project-info-grid .project-info-card:nth-child(4), #project-tab-projects .project-info-grid .project-info-card:nth-child(2n), #project-tab-projects .project-info-grid .project-info-card:nth-child(odd), #project-tab-projects .project-info-grid .project-info-card:nth-child(even), #project-tab-projects .project-info-grid .project-info-card:hover, #project-tab-projects .project-info-grid .project-info-card:active, #project-tab-projects .project-info-grid .project-info-card:focus, #project-tab-projects .project-info-grid .project-info-card:nth-child(2n):hover, #project-tab-projects .project-info-grid .project-info-card:nth-child(odd):hover, #project-tab-projects .project-info-grid .project-info-card:nth-child(even):hover, #project-tab-publications .project-info-grid .project-info-card, #project-tab-publications .project-info-grid .project-info-card:nth-child(1), #project-tab-publications .project-info-grid .project-info-card:nth-child(2), #project-tab-publications .project-info-grid .project-info-card:nth-child(3), #project-tab-publications .project-info-grid .project-info-card:nth-child(2n), #project-tab-publications .project-info-grid .project-info-card:nth-child(odd), #project-tab-publications .project-info-grid .project-info-card:nth-child(even), #project-tab-publications .project-info-grid .project-info-card:hover, #project-tab-publications .project-info-grid .project-info-card:active, #project-tab-publications .project-info-grid .project-info-card:focus, #project-tab-publications .project-info-grid .project-info-card:nth-child(2n):hover, #project-tab-publications .project-info-grid .project-info-card:nth-child(odd):hover, #project-tab-publications .project-info-grid .project-info-card:nth-child(even):hover, #project-tab-conferences .project-info-grid .project-info-card, #project-tab-conferences .project-info-grid .project-info-card:nth-child(1), #project-tab-conferences .project-info-grid .project-info-card:nth-child(2), #project-tab-conferences .project-info-grid .project-info-card:nth-child(3), #project-tab-conferences .project-info-grid .project-info-card:nth-child(2n), #project-tab-conferences .project-info-grid .project-info-card:nth-child(odd), #project-tab-conferences .project-info-grid .project-info-card:nth-child(even), #project-tab-conferences .project-info-grid .project-info-card:hover, #project-tab-conferences .project-info-grid .project-info-card:active, #project-tab-conferences .project-info-grid .project-info-card:focus, #project-tab-conferences .project-info-grid .project-info-card:nth-child(2n):hover, #project-tab-conferences .project-info-grid .project-info-card:nth-child(odd):hover, #project-tab-conferences .project-info-grid .project-info-card:nth-child(even):hover{
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  will-change:auto;
}
.edu-card-grid .edu-logo-card *, .edu-card-grid .edu-logo-card:hover *, #project-tab-projects .project-info-grid .project-info-card *, #project-tab-projects .project-info-grid .project-info-card:hover *, #project-tab-publications .project-info-grid .project-info-card *, #project-tab-publications .project-info-grid .project-info-card:hover *, #project-tab-conferences .project-info-grid .project-info-card *, #project-tab-conferences .project-info-grid .project-info-card:hover *{
  transform:none;
  translate:none;
  rotate:none;
  scale:none;
  animation:none;
  transition:none;
  will-change:auto;
}
.edu-card-grid .edu-logo-card::before, .edu-card-grid .edu-logo-card::after, .edu-card-grid .edu-logo-card:hover::before, .edu-card-grid .edu-logo-card:hover::after, #project-tab-projects .project-info-grid .project-info-card::before, #project-tab-projects .project-info-grid .project-info-card::after, #project-tab-projects .project-info-grid .project-info-card:hover::before, #project-tab-projects .project-info-grid .project-info-card:hover::after, #project-tab-publications .project-info-grid .project-info-card::before, #project-tab-publications .project-info-grid .project-info-card::after, #project-tab-publications .project-info-grid .project-info-card:hover::before, #project-tab-publications .project-info-grid .project-info-card:hover::after, #project-tab-conferences .project-info-grid .project-info-card::before, #project-tab-conferences .project-info-grid .project-info-card::after, #project-tab-conferences .project-info-grid .project-info-card:hover::before, #project-tab-conferences .project-info-grid .project-info-card:hover::after{
  content:none;
  display:none;
  transform:none;
  animation:none;
  transition:none;
  opacity:0;
}
#eduCards, #eduCards.fade{
  transform:none;
  opacity:1;
  animation:none;
  transition:none;
}
.edu-card-grid .edu-logo-card{
  border:1.4px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:30px;
}
.edu-card-grid .edu-logo-box, #project-tab-projects .project-icon, #project-tab-publications .project-icon, #project-tab-conferences .project-icon{
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
    0 14px 28px rgba(0,0,0,.14);
  border-radius:24px;
}
#projects .project-panel:not(#project-tab-tools).active, #courses .edu-card-grid{
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  padding:22px;
  background:rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.edu-card-grid .edu-logo-card, .edu-card-grid .edu-logo-card:hover, #project-tab-projects .project-info-card, #project-tab-projects .project-info-card:hover, #project-tab-publications .project-info-card, #project-tab-publications .project-info-card:hover, #project-tab-conferences .project-info-card, #project-tab-conferences .project-info-card:hover{
  transform:none;
  animation:none;
  transition:none;
}
#courses .edu-card-grid{
  max-height:382px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:18px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.42) rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--tab-card-gap);
  align-items:start;
}
#project-tab-projects.project-panel, #project-tab-publications.project-panel, #project-tab-conferences.project-panel{
  max-height:408px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:18px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.42) rgba(255,255,255,.04);
}
#courses .edu-card-grid, #project-tab-projects .project-info-grid, #project-tab-publications .project-info-grid, #project-tab-conferences .project-info-grid{
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:28px;
}
#courses .edu-card-grid::-webkit-scrollbar, #project-tab-projects.project-panel::-webkit-scrollbar, #project-tab-publications.project-panel::-webkit-scrollbar, #project-tab-conferences.project-panel::-webkit-scrollbar{
  width:8px;
}
#courses .edu-card-grid::-webkit-scrollbar-track, #project-tab-projects.project-panel::-webkit-scrollbar-track, #project-tab-publications.project-panel::-webkit-scrollbar-track, #project-tab-conferences.project-panel::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:999px;
  margin-block:42px;
}
#courses .edu-card-grid::-webkit-scrollbar-thumb, #project-tab-projects.project-panel::-webkit-scrollbar-thumb, #project-tab-publications.project-panel::-webkit-scrollbar-thumb, #project-tab-conferences.project-panel::-webkit-scrollbar-thumb{
  background:rgba(245,197,66,.42);
  border-radius:999px;
}
#courses .edu-card-grid::-webkit-scrollbar-thumb:hover, #project-tab-projects.project-panel::-webkit-scrollbar-thumb:hover, #project-tab-publications.project-panel::-webkit-scrollbar-thumb:hover, #project-tab-conferences.project-panel::-webkit-scrollbar-thumb:hover{
  background:rgba(245,197,66,.62);
}
#courses .edu-card-grid, #project-tab-projects.project-panel, #project-tab-publications.project-panel, #project-tab-conferences.project-panel{
  mask-image:linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.35) 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.35) 100%);
  width:min(var(--tab-section-width), 100%);
  max-width:var(--tab-section-width);
  height:480px;
  max-height:480px;
  min-height:480px;
  margin-left:auto;
  margin-right:auto;
  padding:42px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable both-edges;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.45) rgba(255,255,255,.06);
}
#project-tab-projects .project-info-grid, #project-tab-publications .project-info-grid, #project-tab-conferences .project-info-grid{
  max-width:none;
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--tab-card-gap);
  align-items:start;
}
#courses .edu-logo-card, #project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card{
  width:100%;
  min-height:300px;
  height:300px;
  box-sizing:border-box;
  padding:24px;
  border-radius:28px;
  margin:0;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}
#courses .edu-logo-box, #project-tab-projects .project-icon, #project-tab-publications .project-icon, #project-tab-conferences .project-icon{
  width:100%;
  height:112px;
  box-sizing:border-box;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.20);
}
#courses .edu-logo-card h3, #project-tab-projects .project-info-card h3, #project-tab-publications .project-info-card h3, #project-tab-conferences .project-info-card h3{
  margin-top:0;
  margin-bottom:8px;
}
#courses .edu-logo-card p, #project-tab-projects .project-info-card p, #project-tab-publications .project-info-card p, #project-tab-conferences .project-info-card p{
  margin-bottom:0;
}
#contact .contact-socials a{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  color:#ffffff;
  background:rgba(255,255,255,.035);
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
#contact .contact-socials a:hover{
  background:rgba(255,255,255,.10);
  border-color:#ffffff;
  transform:translateY(-2px);
}
#home .metric-strip, .page.home .metric-strip, .home .metric-strip{
  background:rgba(255,255,255,.07);
  background-color:transparent;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  margin-top:16px;
}
#home .metric, .page.home .metric, .home .metric{
  background:transparent;
  background-color:transparent;
  color:#ffffff;
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  backdrop-filter:none;
  padding-top:14px;
  padding-bottom:14px;
}
#home .metric:last-child, .page.home .metric:last-child, .home .metric:last-child{
  border-right:none;
}
#home .metric .icon, .page.home .metric .icon, .home .metric .icon{
  color:#f5c542;
  font-size:26px;
  line-height:1;
}
#home .metric strong, .page.home .metric strong, .home .metric strong{
  color:#ffffff;
  margin-top:4px;
  font-size:20px;
  line-height:1.1;
}
#home .metric span, .page.home .metric span, .home .metric span{
  color:rgba(200,218,255,.70);
  margin-top:3px;
  font-size:12px;
  line-height:1.2;
}
#experience .exp-timeline{
  position:relative;
  display:grid;
  gap:0;
  padding:8px 0 18px;
  width:100%;
  max-width:1060px;
  margin:0 auto;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
#experience .timeline-row{
  display:grid;
  grid-template-columns:minmax(250px, 1.1fr) minmax(120px, .45fr) 70px minmax(360px, 1.35fr);
  gap:44px;
  align-items:center;
  min-height:128px;
  position:relative;
  column-gap:36px;
  padding:18px 0;
  margin:0;
  overflow:visible;
}
#experience .timeline-year{
  text-align:left;
  justify-self:start;
  width:auto;
  display:contents;
  grid-template-columns:1fr 180px 1.35fr;
  grid-column:1 / -1;
  align-items:center;
  gap:44px;
  position:static;
  transform:none;
}
#experience .timeline-year small{
  display:block;
  color:#ffe59a;
  font-size:16px;
  font-weight:900;
  line-height:1.42;
  letter-spacing:.01em;
  grid-column:1;
  grid-row:1;
  text-align:left;
  justify-self:start;
  align-self:center;
  max-width:340px;
  position:static;
  transform:none;
  width:auto;
  margin:0;
  text-shadow:0 0 18px rgba(245,197,66,.12);
}
#experience .timeline-role-label,
#experience .timeline-company-label{
  display:block;
}
#experience .timeline-role-label{
  color:#ffffff;
}
#experience .timeline-company-label{
  color:#ffe59a;
}
#experience .timeline-highlight{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:7px 0 6px;
  padding:5px 11px 5px 12px;
  color:rgba(234,246,255,.92);
  font-size:10.5px;
  font-weight:950;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
#experience .timeline-highlight::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:50%;
  background:#f5c542;
  box-shadow:0 0 12px rgba(245,197,66,.45);
}
#experience .timeline-highlight::after{
  content:none;
}
#experience .timeline-year > div{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  color:#ffffff;
  font-size:46px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.045em;
  text-align:center;
  align-self:center;
  margin:0;
  display:block;
  position:static;
  transform:none;
  width:auto;
}
#experience .timeline-text{
  grid-column:4;
  grid-row:1;
  align-self:center;
  position:static;
  transform:none;
  width:auto;
  justify-self:start;
  text-align:left;
  max-width:none;
  margin:0;
  padding:0;
}
#experience .timeline-text p{
  margin:0;
  color:#dbe7f5;
  font-size:15px;
  line-height:1.55;
  max-width:520px;
  font-weight:500;
  text-align:left;
}
#experience .timeline-row > div:nth-child(2):not(.timeline-year):not(.timeline-text){
  display:block;
  grid-column:3;
  grid-row:1;
  width:70px;
  height:1px;
  opacity:0;
}
#experience .timeline-row > .timeline-text{
  position:static;
  right:auto;
  top:auto;
  transform:none;
  width:calc(56% - 40px);
}
#experience .exp-timeline::before{
  content:"";
  position:absolute;
  top:28px;
  bottom:28px;
  left:calc(250px + 1.1fr);
  width:1px;
  background:linear-gradient(180deg, rgba(245,197,66,.10), rgba(245,197,66,.55), rgba(245,197,66,.10));
  opacity:0;
  display:block;
}
#experience .exp-progress{
  left:calc(50% + 16px);
  position:absolute;
  top:28px;
  width:3px;
  min-height:0;
  background:linear-gradient(
    180deg,
    rgba(245,197,66,.72) 0%,
    rgba(251,113,133,.58) 30%,
    rgba(168,85,247,.56) 62%,
    rgba(56,189,248,.58) 100%
  );
  border-radius:999px;
  transform:none;
  z-index:2;
  max-height:calc(100% - 56px);
  box-shadow:0 0 10px rgba(245,197,66,.28),
    0 0 18px rgba(168,85,247,.20),
    0 0 26px rgba(56,189,248,.16);
}
#experience .exp-timeline:after{
  content:"";
  position:absolute;
  top:36px;
  bottom:36px;
  left:calc(50% + 24px);
  width:1px;
  background:rgba(245,197,66,.20);
  border-radius:999px;
  z-index:0;
}
#experience .exp-progress::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 24px rgba(245,197,66,.70);
  transform:translateX(-50%);
}
#experience .timeline-row, #experience .timeline-year, #experience .timeline-text, #experience .timeline-text p{
  overflow:visible;
}
#experience .page-title-center, #experience .experience-showcase{
  margin-bottom:18px;
}
#experience .experience-showcase, #experience .page-title-center{
  max-width:1120px;
  margin:0 auto 18px;
  text-align:center;
  margin-bottom:34px;
}
#experience .exp-timeline::after{
  content:"";
  position:absolute;
  top:28px;
  bottom:28px;
  left:calc(50% + 16px);
  width:1px;
  background:rgba(245,197,66,.18);
  border-radius:999px;
  z-index:0;
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  max-width:1260px;
  margin-left:auto;
  margin-right:auto;
}
#experience .timeline-year small::first-line{
  color:#ffffff;
  font-size:19px;
  line-height:1.35;
  font-weight:950;
}
#projects .project-tabs, #courses .edu-tabs{
  margin-bottom:42px;
}
.bumblebee-ref-bot, .bee-bot, .pointer-doll{
  display:none;
}
#about .about-stack-strip, #about .tech-concept-marquee, #about .concept-track{
  display:none;
}
#about .refined-research-line{
  display:flex;
  align-items:baseline;
  justify-content:left;
  gap:10px;
  margin:10px auto 22px;
  min-height:36px;
  font-size:clamp(20px,2vw,30px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:650;
  color:#fff;
  text-align:left;
}
#about .refined-research-line .research-static{
  color:#fff;
  white-space:nowrap;
  font-weight:600;
  text-shadow:0 8px 24px rgba(0,0,0,.28);
}
#about .refined-research-line .research-word-wrap{
  position:relative;
  display:inline-block;
  min-width:140px;
  height:1.2em;
  overflow:hidden;
  vertical-align:baseline;
}
#about .refined-research-line .research-word{
  position:absolute;
  left:0;
  top:0;
  display:block;
  opacity:0;
  transform:translateY(115%);
  color:#ffe59a;
  background:linear-gradient(90deg,#ffe59a,#fff7d6,#ffe59a);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  will-change:transform,opacity;
  animation:aboutWordLift 12s infinite;
}
#about .research-support-text{
  max-width:720px;
  margin:22px 0 28px;
  text-align:justify;
  color:#ffffff !important;
  text-shadow:0 8px 22px rgba(0,0,0,.30);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  font-weight:500;
  text-align:center;
}
#experience .exp-progress:after{
  width:18px;
  height:18px;
  background:#f5c542;
  border:0;
  box-shadow:0 0 10px rgba(245,197,66,.42),
    0 0 20px rgba(245,197,66,.22);
  animation:experiencePointerPulseSoft 2.8s ease-in-out infinite;
}
#tools .tools-page-heading{
  text-align:center;
  max-width:980px;
  margin:0 auto 22px;
  position:relative;
  z-index:2;
}
#tools .tools-page-heading h2{
  background:transparent;
  display:block;
  text-align:center;
  font-size:clamp(34px,4.5vw,58px);
  line-height:.96;
  padding:0;
  margin:0 auto 10px;
  color:white;
}
#tools .tools-page-heading .lead{
  color:var(--muted);
  max-width:760px;
  margin:0 auto;
  line-height:1.4;
}
#tools .tools-split-layout{
  width:min(1180px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:310px 1fr;
  gap:28px;
  align-items:stretch;
}
#tools .stack-click-hint{
  display:none;
}
#tools .tools-concepts-panel, #tools .tools-hex-wrapper{
  height:560px;
  min-height:560px;
  max-height:560px;
}
#tools .tools-concepts-panel{
  overflow-y:hidden;
  overflow-x:hidden;
  align-self:stretch;
  display:block;
  padding:0;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.55) rgba(255,255,255,.08);
  mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
}
#tools .tools-concepts-panel:hover, #tools .tools-concepts-panel:focus-within, #tools .tools-concepts-panel:active{
  overflow-y:auto;
}
#tools .tools-concepts-panel::-webkit-scrollbar, #tools .tools-icon-mosaic::-webkit-scrollbar{
  width:7px;
}
#tools .tools-concepts-panel::-webkit-scrollbar-track, #tools .tools-icon-mosaic::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}
#tools .tools-concepts-panel::-webkit-scrollbar-thumb, #tools .tools-icon-mosaic::-webkit-scrollbar-thumb{
  background:rgba(245,197,66,.55);
  border-radius:999px;
}
#tools .concept-mini-list{
  position:relative;
  width:100%;
  min-height:max-content;
  padding:20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:stackCardsNoGap 26s linear infinite;
  will-change:transform;
}
#tools .tools-concepts-panel:focus-within .concept-mini-list, #tools .tools-concepts-panel:active .concept-mini-list{
  animation-play-state:paused;
}
#tools .concept-mini-card{
  flex:0 0 auto;
  padding:11px 13px;
  border-radius:15px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#dce6f5;
  font-size:12.5px;
  font-weight:850;
  line-height:1.15;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  cursor:pointer;
  transition:.25s ease;
}
#tools .concept-mini-card:hover, #tools .concept-mini-card.stack-active{
  background:rgba(255,255,255,.10);
  border-color:rgba(245,197,66,.78);
  color:#f8fafc;
  box-shadow:0 0 0 1px rgba(245,197,66,.18);
  transform:none;
}
#tools .tools-hex-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow:hidden;
  border-radius:34px;
  background:rgba(255,255,255,.042);
  box-shadow:0 0 90px rgba(245,197,66,.12),
    0 0 120px rgba(99,102,241,.15),
    0 28px 90px rgba(0,0,0,.26);
}
#tools .tools-icon-mosaic{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;
  max-height:100%;
  margin:0;
  display:grid;
  grid-template-columns:repeat(8,minmax(58px,1fr));
  gap:12px;
  align-items:center;
  justify-items:center;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.55) rgba(255,255,255,.08);
}
#tools .tools-icon-mosaic .project-tool-tile, #tools .hexagon-tool-grid .project-tool-tile{
  position:relative;
  left:auto;
  top:auto;
  right:auto;
  bottom:auto;
  transform:none;
  width:62px;
  height:62px;
  flex:0 0 auto;
  margin:0;
  border-radius:17px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  color:white;
  font-weight:850;
  animation:mosaicFloat 6s ease-in-out infinite;
}
#tools .tools-icon-mosaic .project-tool-tile:nth-child(odd){
  transform:translateY(6px);
}
#tools .tools-icon-mosaic .project-tool-tile:nth-child(3n){
  animation-delay:-1.2s;
}
#tools .tools-icon-mosaic .project-tool-tile:nth-child(4n){
  animation-delay:-2.2s;
}
#tools .tools-icon-mosaic .project-tool-tile:hover{
  transform:translateY(-7px) scale(1.08);
  background:rgba(255,255,255,.18);
  border-color:rgba(245,197,66,.58);
  box-shadow:0 0 34px rgba(245,197,66,.22);
}
#tools .tools-icon-mosaic .local-logo{
  width:28px;
  height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(7,17,31,.92);
  color:var(--yellow);
  font-weight:950;
  font-size:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.18);
}
#tools .tools-icon-mosaic .tool-logo-img{
  width:19px;
  height:19px;
  display:block;
  object-fit:contain;
}
#tools .tools-icon-mosaic .tool-logo-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius:inherit;
  color:#f5c542;
  background:linear-gradient(135deg, rgba(245,197,66,.16), rgba(56,189,248,.14));
  font-size:9px;
  line-height:1;
  font-weight:950;
}
#tools .tools-icon-mosaic .tool-logo-img + .tool-logo-fallback{
  display:none;
}
#tools .tools-icon-mosaic .project-tool-tile span{
  font-size:6.8px;
  line-height:1;
  text-align:center;
  color:white;
  max-width:54px;
}
#tools .tools-icon-mosaic.has-highlight .project-tool-tile, #tools .hexagon-tool-grid.has-highlight .project-tool-tile{
  opacity:.72;
  filter:none;
}
#tools .tools-icon-mosaic.has-highlight .project-tool-tile.tool-lit, #tools .hexagon-tool-grid.has-highlight .project-tool-tile.tool-lit{
  opacity:1;
  filter:none;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(245,197,66,.88);
  box-shadow:0 0 0 1px rgba(245,197,66,.16),0 14px 34px rgba(0,0,0,.20);
  transform:none;
}
#tools .tools-icon-mosaic.has-highlight .project-tool-tile.tool-lit .local-logo, #tools .hexagon-tool-grid.has-highlight .project-tool-tile.tool-lit .local-logo{
  background:#07111f;
  color:var(--yellow);
  box-shadow:none;
}
#tools .tools-icon-mosaic.has-highlight .project-tool-tile.tool-lit span, #tools .hexagon-tool-grid.has-highlight .project-tool-tile.tool-lit span{
  color:white;
  text-shadow:none;
}
#courses .edu-tab{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:#cbd5e1;
}
#courses .edu-tab:hover, #courses .edu-tab.active{
  background:#f5c542;
  border-color:#f5c542;
  color:#07111f;
  box-shadow:0 12px 30px rgba(245,197,66,.18);
}
#courses .edu-badge, #courses .course-badge, #courses .cert-badge, #courses .workshop-badge{
  background:rgba(245,197,66,.13);
  color:#f5c542;
  border-color:rgba(245,197,66,.24);
}
#courses .edu-logo-card:hover, #courses .course-card:hover, #courses .cert-card:hover, #courses .workshop-card:hover{
  border-color:rgba(245,197,66,.68);
  box-shadow:0 22px 70px rgba(0,0,0,.24),0 0 34px rgba(245,197,66,.10);
}
#courses .edu-logo-box, #courses .course-icon, #courses .cert-icon, #courses .workshop-icon{
  background:rgba(255,255,255,.96);
  color:#07111f;
}
#courses .edu-logo-box::after, #courses .course-icon::after, #courses .cert-icon::after, #courses .workshop-icon::after{
  background:#f5c542;
}
#courses a, #courses .edu-link{
  color:#f5c542;
}
#projects .project-tab:hover, #projects .project-tab.active{
  background:#f5c542;
  border-color:#f5c542;
  color:#07111f;
  box-shadow:0 12px 30px rgba(245,197,66,.18);
}
#projects .project-icon::after{
  background:#f5c542;
}
#projects a, #projects .project-link{
  color:#f5c542;
}
#testimonials .testimonial-photo-gallery .testimonial-photo-tile.graduation-first{
  grid-row:span 2;
  min-height:540px;
  border-color:rgba(245,197,66,.28);
}
#testimonials .testimonial-photo-gallery .testimonial-photo-tile.graduation-first img{
  object-position:center top;
}
#about .refined-research-line .research-word-1{
  animation-delay:0s;
}
#about .refined-research-line .research-word-2{
  animation-delay:2s;
}
#about .refined-research-line .research-word-3{
  animation-delay:4s;
}
#about .refined-research-line .research-word-4{
  animation-delay:6s;
}
#about .refined-research-line .research-word-5{
  animation-delay:8s;
}
#about .refined-research-line .research-word-6{
  animation-delay:10s;
}
#projects{
  padding-left:0;
  padding-right:0;
  overflow:hidden;
}
#projects .projects-showcase{
  max-width:980px;
  padding:0 7vw;
  margin:0 auto 30px;
  text-align:center;
}
#projects .project-tabs, #projects #project-tabs-container, #projects #project-panels-container{
  display:none !important;
}
#projects .project-marquee-shell{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:10px 0 34px;
  border:0;
  box-shadow:none;
  background:transparent;
}
#projects .project-marquee-shell::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
#projects .project-marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:none;
  will-change:transform;
}
#projects .project-marquee-shell:hover .project-marquee-track{
  animation-play-state:paused;
}
#projects .project-marquee-card{
  flex:0 0 calc((100vw - 48px) / 3);
  min-height:0;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  border:0;
  box-shadow:0 24px 72px rgba(0,0,0,.34);
  padding:0;
  display:grid;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  height:500px;
  overflow:hidden;
  grid-template-rows: 50% 6% 26% 18%;
  align-content:start;
}
#projects .project-marquee-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.50);
  box-shadow:0 32px 90px rgba(0,0,0,.44), 0 0 24px rgba(245,197,66,.10);
}
#projects .project-marquee-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
#projects .project-marquee-icon{
  height:128px;
  border-radius:24px;
  background:linear-gradient(135deg,#0b1b31,#05070b);
  color:rgba(245,197,66,.92);
  display:grid;
  place-items:center;
  font-size:clamp(38px,4.5vw,78px);
  font-weight:950;
  margin-bottom:22px;
}
#projects .project-marquee-badge{
  align-self:stretch;
  padding:0 18px;
  border-radius:0;
  background:rgba(245,197,66,.22);
  color:var(--yellow);
  font-size:clamp(7px,.65vw,9px);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin-bottom:12px;
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  border-top:1px solid rgba(245,197,66,.20);
  border-bottom:1px solid rgba(245,197,66,.14);
  line-height:1;
  grid-row:2;
  min-height:0;
  height:100%;
  overflow:hidden;
}
#projects .project-marquee-card h3{
  color:#fff;
  font-size:clamp(20px,1.65vw,27px);
  line-height:1.12;
  margin:0;
  margin-bottom: 10px
  align-self:center;
  padding:22px 22px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  grid-row:3;
}
#projects .project-marquee-card p{
  color:rgba(236,242,255,.84);
  font-size:15px;
  line-height:1.35;
  margin:0;
  align-self:start;
  padding:0 22px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  grid-row:4;
}
#projects .project-marquee-image{
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  background:radial-gradient(circle at 24% 18%, rgba(245,197,66,.34), transparent 32%),
    radial-gradient(circle at 76% 80%, rgba(147,197,253,.18), transparent 34%),
    linear-gradient(135deg,#0b1b31,#05070b);
}
#projects .project-marquee-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
#projects .project-image-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#0b1b31,#05070b);
}
#courses .education-final{
  margin-bottom:34px;
}
#courses .edu-tabs{
  margin:16px auto 30px;
  padding:0;
  max-width:1120px;
}
#courses .edu-card-grid, #courses .edu-card-grid.fade{
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  scrollbar-gutter:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  max-width:1120px;
  margin:0 auto;
  gap:20px;
}
#courses .edu-card-grid::-webkit-scrollbar{
  display:none;
}
#projects .project-marquee-image, #projects .project-marquee-icon{
  grid-row:1;
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
  overflow:hidden;
}

@keyframes marqueeLeft{
from{transform:translateX(0)}to{transform:translateX(-50%)}
}
@keyframes marqueeRight{
from{transform:translateX(-50%)}to{transform:translateX(0)}
}
@keyframes logoLeft{
from{transform:translateX(0)}to{transform:translateX(-50%)}
}
@keyframes logoRight{
from{transform:translateX(-50%)}to{transform:translateX(0)}
}
@keyframes conceptSlide{

  from{transform:translateX(0)}
  to{transform:translateX(-50%)}

}
@keyframes orbitSpin{
from{transform:rotate(0deg)}to{transform:rotate(360deg)}
}
@keyframes orbitSpinReverse{
from{transform:rotate(360deg)}to{transform:rotate(0deg)}
}
@keyframes bgDrift{

  from{background-position:0 0,0 0}
  to{background-position:240px 120px,-240px 120px}

}
@keyframes bgFloat{

  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2%,-1%,0) scale(1.04)}

}
@keyframes starDrift{

  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-80px,60px,0)}

}
@keyframes nebulaSpin{

  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1.08)}

}
@keyframes floatRow{

  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}

}
@keyframes toolFloat{

  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}

}
@keyframes sectionStarDrift{

  from{transform: translate3d(0,0,0);}
  to{transform: translate3d(-160px,110px,0);}

}
@keyframes workStars{

  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-90px,60px,0)}

}
@keyframes pulseGlow{

  from{transform:scale(.92); opacity:.7}
  to{transform:scale(1.08); opacity:1}

}
@keyframes floatMonitor{

  0%,100%{transform:translateZ(64px) translateY(0)}
  50%{transform:translateZ(64px) translateY(-8px)}

}
@keyframes codeBlink{

  0%,100%{opacity:.35}
  50%{opacity:1}

}
@keyframes lampHover{

  0%,100%{transform:translateZ(70px) translateY(0)}
  50%{transform:translateZ(70px) translateY(-6px)}

}
@keyframes lampGlow{

  from{opacity:.42}
  to{opacity:.9}

}
@keyframes keyGlow{

  0%,100%{opacity:.55}
  50%{opacity:1}

}
@keyframes chipFloat{

  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-14px) rotate(6deg)}

}
@keyframes deskClickBounce{

  0%{transform:perspective(900px) rotateX(8deg) rotateY(-13deg) translateY(0) scale(1)}
  35%{transform:perspective(900px) rotateX(5deg) rotateY(-8deg) translateY(-10px) scale(1.035)}
  70%{transform:perspective(900px) rotateX(9deg) rotateY(-15deg) translateY(3px) scale(.995)}
  100%{transform:perspective(900px) rotateX(8deg) rotateY(-13deg) translateY(0) scale(1)}

}
@keyframes codeBurst{

  0%{opacity:.45; transform:scaleX(.65)}
  45%{opacity:1; transform:scaleX(1.08)}
  100%{opacity:.78; transform:scaleX(1)}

}
@keyframes lampClickFlash{

  0%{opacity:.45; transform:scale(.9)}
  30%{opacity:1; transform:scale(1.25)}
  100%{opacity:.62; transform:scale(1)}

}
@keyframes chipPop{

  0%{transform:translateY(0) scale(1) rotate(-4deg)}
  45%{transform:translateY(-24px) scale(1.14) rotate(10deg)}
  100%{transform:translateY(0) scale(1) rotate(-4deg)}

}
@keyframes cpuFloat{

  0%,100%{transform:translateZ(78px) rotateZ(-4deg) translateY(0)}
  50%{transform:translateZ(78px) rotateZ(-4deg) translateY(-7px)}

}
@keyframes cpuPulse{

  0%,100%{opacity:.45; transform:scale(.92)}
  50%{opacity:1; transform:scale(1.15)}

}
@keyframes cpuClickPop{

  0%{transform:translateZ(78px) rotateZ(-4deg) translateY(0) scale(1)}
  45%{transform:translateZ(78px) rotateZ(-2deg) translateY(-18px) scale(1.08)}
  100%{transform:translateZ(78px) rotateZ(-4deg) translateY(0) scale(1)}

}
@keyframes cpuClickFlash{

  0%{opacity:.45; transform:scale(.9)}
  35%{opacity:1; transform:scale(1.45)}
  100%{opacity:.7; transform:scale(1)}

}
@keyframes cpuFloatRight{

  0%,100%{transform:translateZ(92px) rotateZ(3deg) rotateY(-8deg) translateY(0)}
  50%{transform:translateZ(92px) rotateZ(3deg) rotateY(-8deg) translateY(-7px)}

}
@keyframes deskSideClickBounce{

  0%{transform:perspective(980px) rotateX(7deg) rotateY(-24deg) translateY(0) scale(1)}
  35%{transform:perspective(980px) rotateX(5deg) rotateY(-18deg) translateY(-10px) scale(1.035)}
  70%{transform:perspective(980px) rotateX(8deg) rotateY(-26deg) translateY(3px) scale(.995)}
  100%{transform:perspective(980px) rotateX(7deg) rotateY(-24deg) translateY(0) scale(1)}

}
@keyframes cpuRightClickPop{

  0%{transform:translateZ(92px) rotateZ(3deg) rotateY(-8deg) translateY(0) scale(1)}
  45%{transform:translateZ(92px) rotateZ(5deg) rotateY(-5deg) translateY(-18px) scale(1.08)}
  100%{transform:translateZ(92px) rotateZ(3deg) rotateY(-8deg) translateY(0) scale(1)}

}
@keyframes orbitDriftA{

  from{transform:rotate(-12deg) translateY(0)}
  to{transform:rotate(-6deg) translateY(-12px)}

}
@keyframes orbitDriftB{

  from{transform:rotate(18deg) translateY(0)}
  to{transform:rotate(12deg) translateY(10px)}

}
@keyframes bookGlow{

  from{opacity:.65}
  to{opacity:1}

}
@keyframes monitorPremiumFloat{

  0%,100%{transform:translateZ(80px) translateY(0)}
  50%{transform:translateZ(80px) translateY(-8px)}

}
@keyframes screenCodeMove{

  0%,100%{opacity:.38; transform:scaleX(.82); transform-origin:left}
  50%{opacity:1; transform:scaleX(1)}

}
@keyframes barRise{

  from{transform:scaleY(.55); opacity:.55}
  to{transform:scaleY(1); opacity:1}

}
@keyframes tabletFloat{

  0%,100%{transform:translateZ(92px) rotateY(-18deg) translateY(0)}
  50%{transform:translateZ(92px) rotateY(-18deg) translateY(-7px)}

}
@keyframes keyPremium{

  0%,100%{opacity:.42}
  50%{opacity:1}

}
@keyframes mouseTap{

  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}

}
@keyframes leafSway{

  0%,100%{filter:brightness(.9)}
  50%{filter:brightness(1.2)}

}
@keyframes cpuPremiumFloat{

  0%,100%{transform:translateZ(106px) rotateZ(3deg) rotateY(-10deg) translateY(0)}
  50%{transform:translateZ(106px) rotateZ(3deg) rotateY(-10deg) translateY(-7px)}

}
@keyframes cpuLightPulse{

  0%,100%{opacity:.5; transform:scale(.92)}
  50%{opacity:1; transform:scale(1.15)}

}
@keyframes badgeFloat{

  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-14px) rotate(6deg)}

}
@keyframes premiumDeskClick{

  0%{transform:perspective(980px) rotateX(8deg) rotateY(-18deg) translateY(0) scale(1)}
  35%{transform:perspective(980px) rotateX(5deg) rotateY(-12deg) translateY(-12px) scale(1.035)}
  70%{transform:perspective(980px) rotateX(9deg) rotateY(-22deg) translateY(4px) scale(.995)}
  100%{transform:perspective(980px) rotateX(8deg) rotateY(-18deg) translateY(0) scale(1)}

}
@keyframes premiumCpuPop{

  0%{transform:translateZ(106px) rotateZ(3deg) rotateY(-10deg) translateY(0) scale(1)}
  45%{transform:translateZ(106px) rotateZ(5deg) rotateY(-6deg) translateY(-18px) scale(1.08)}
  100%{transform:translateZ(106px) rotateZ(3deg) rotateY(-10deg) translateY(0) scale(1)}

}
@keyframes cpuPremiumFloatLeft{

  0%,100%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0)}
  50%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(-5px)}

}
@keyframes premiumCpuPopLeft{

  0%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0) scale(1)}
  45%{transform:translateZ(18px) rotateZ(-1deg) rotateY(7deg) translateY(-16px) scale(1.08)}
  100%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0) scale(1)}

}
@keyframes penStandPop{

  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-10px) scale(1.05)}
  100%{transform:translateY(0) scale(1)}

}
@keyframes cpuPremiumFloatLeftAdjusted{

  0%,100%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0)}
  50%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(-4px)}

}
@keyframes premiumCpuPopLeftAdjusted{

  0%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0) scale(1)}
  45%{transform:translateZ(18px) rotateZ(-1deg) rotateY(7deg) translateY(-12px) scale(1.06)}
  100%{transform:translateZ(18px) rotateZ(-3deg) rotateY(10deg) translateY(0) scale(1)}

}
@keyframes cpuVisibleFloat{

  0%,100% { transform: translateZ(0px) rotateZ(-2deg) rotateY(8deg) translateY(0); }
  50% { transform: translateZ(0px) rotateZ(-2deg) rotateY(8deg) translateY(-4px); }

}
@keyframes cpuVisiblePop{

  0% { transform: translateZ(0px) rotateZ(-2deg) rotateY(8deg) translateY(0) scale(1); }
  45% { transform: translateZ(0px) rotateZ(0deg) rotateY(5deg) translateY(-10px) scale(1.06); }
  100% { transform: translateZ(0px) rotateZ(-2deg) rotateY(8deg) translateY(0) scale(1); }

}
@keyframes experiencePointerPulseSoft{

  0%,100%{transform:translate(-50%,50%) scale(1); filter:saturate(.92);}
  50%{transform:translate(-50%,50%) scale(1.06); filter:saturate(1.02);}

}
@keyframes stackCardsNoGap{

  from{transform:translateY(0);}
  to{transform:translateY(-33.333%);}

}
@keyframes experimentIconPulse{

  0%,100%{transform:scale(1); opacity:.82;}
  50%{transform:scale(1.08); opacity:1;}

}
@keyframes experimentIconSlide{

  0%,100%{transform:translateX(0);}
  50%{transform:translateX(4px);}

}
@keyframes experimentIconSpin{

  to{transform:rotate(360deg);}

}
@keyframes mosaicFloat{

  0%,100%{translate:0 0;}
  50%{translate:0 -4px;}

}
@keyframes aboutWordLift{

  0%{opacity:0; transform:translateY(115%);}
  6%{opacity:1; transform:translateY(0);}
  14%{opacity:1; transform:translateY(0);}
  20%{opacity:0; transform:translateY(-115%);}
  100%{opacity:0; transform:translateY(-115%);}

}
@keyframes projectCardsLeft{

  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 12px))}

}

@media(max-width:980px){
#projects .project-info-grid{
  grid-template-columns:1fr;
}
.contact-layout{
  grid-template-columns:1fr;
}
.contact-row{
  grid-template-columns:1fr;
}
.contact-socials{
  flex-direction:row;
}
.tool-pyramid-row{
  flex-wrap:wrap;
  max-width:100%;
}
.project-tool-tile{
  width:78px;
  height:78px;
  margin-left:0;
}
#experience .exp-card-grid.cards-mode{
  grid-template-columns:1fr;
}
.exp-progress{
  left:10px;
}
.timeline-row{
  grid-template-columns:1fr;
  min-height:auto;
  padding-left:32px;
  margin-bottom:28px;
  gap:8px;
}
.timeline-year{
  text-align:left;
  padding-right:0;
  font-size:26px;
}
.timeline-text{
  padding-left:0;
  margin-top:12px;
}
.project-info-grid{
  grid-template-columns:1fr;
}
.tool-row{
  flex-wrap:wrap;
}
.tool-tile{
  width:74px;
  height:74px;
}
.timeline-role{
  display:block;
  text-align:left;
}
.concept-pill{
  width:155px;
  height:96px;
  font-size:15px;
}
.stack-final{
  grid-template-columns:1fr;
}
.tools-orbit{
  transform:scale(.78);
}
.exp-card-grid.cards-mode{
  grid-template-columns:1fr;
}
.exp-timeline:before,.exp-progress{
  left:10px;
}
.edu-card-grid.list-mode{
  grid-template-columns:1fr;
}
.exp-card-grid{
  grid-template-columns:1fr;
  gap:18px;
}
.timeline-line,.exp-year{
  display:none;
}
.exp-timeline-item{
  display:block;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  margin-bottom:18px;
}
.exp-left,.exp-desc{
  padding:0;
}
.testimonial-grid,.media-strip{
  grid-template-columns:1fr;
}
.edu-card-grid.list-mode .edu-logo-card{
  grid-template-columns:1fr;
}
.edu-education-layout{
  grid-template-columns:1fr;
}
.edu-image-stack{
  min-height:520px;
}
.edu-stack-img{
  width:62%;
  height:190px;
}
.edu-photo-card .edu-photo{
  height:170px;
}
.stack-copy,.stack-focus-grid{
  grid-template-columns:1fr;
}
.tool-logo-card{
  width:138px;
}
.stack-final,.edu-card-grid{
  grid-template-columns:1fr;
}
.logo-marquee:before,.logo-marquee:after{
  width:55px;
}
.technologies-row,.tech-card-row,.edu-card-grid{
  grid-template-columns:1fr;
}
html{
  scroll-snap-type:none;
}
.nav{
  display:none;
}
.section-grid,.project-grid,.tech-grid,.course-grid,.experience-list,.pill-grid,.contact-wrap,.stack-top{
  grid-template-columns:1fr;
}
.home{
  grid-template-columns:.42fr .58fr;
  gap:32px;
}
.page{
  padding:96px 6vw 82px;
  min-height:auto;
  padding-left:6vw;
  padding-bottom:104px;
}
h1{
  white-space:normal;
}
.metric{
  border-right:0;
  border-bottom:1px solid rgba(16,24,40,.12);
}
#about .about-title-photo{
  margin:0 auto 12px;
  margin-top:0;
}
#about .about-title-photo:after{
  height:26%;
}
#about .section-grid{
  grid-template-columns:1fr;
}
#about .pill-card{
  grid-template-columns:62px 1px 1fr;
  padding:18px 18px;
}
#about .pill-card h3{
  font-size:20px;
}
#about .pill-card p{
  font-size:15px;
}
#testimonials .testimonial-photo-gallery{
  grid-template-columns:1fr;
}
#testimonials .testimonial-photo-tile:nth-child(1), #testimonials .testimonial-photo-tile:nth-child(6){
  grid-row:auto;
  grid-column:auto;
}
.side-nav{
  left:50%;
  top:auto;
  bottom:14px;
  transform:translateX(-50%);
  width:auto;
  height:54px;
  flex-direction:row;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(7,17,31,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
}
.side-mid{
  flex-direction:row;
  gap:10px;
}
.side-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  font-size:17px;
}
.side-icon:hover, .side-icon:focus{
  transform:translateY(-4px) scale(1.05);
}
.side-icon::after{
  display:none;
}
#testimonials .moments-layout{
  grid-template-columns:1fr;
  gap:30px;
  max-width:100%;
}
#testimonials .moments-testimonials{
  position:relative;
  top:auto;
}
#testimonials .page-title-center, #testimonials .page-title-center h2{
  text-align:center;
}
#testimonials .page-title-center .lead{
  margin-left:auto;
  margin-right:auto;
}
#testimonials .moments-photo-panel{
  max-height:none;
  overflow:visible;
  min-height:auto;
}
#testimonials .moments-masonry{
  column-count:1;
}
#testimonials .moments-photo-panel::before, #testimonials .moments-photo-panel::after{
  display:none;
}
#testimonials .testimonial-scroll-panel, #testimonials .pinterest-scroll-panel{
  height:auto;
  min-height:auto;
  max-height:none;
  overflow:visible;
  padding-right:0;
  max-width:none;
  justify-self:stretch;
}
#testimonials .testimonial-scroll-panel:before, #testimonials .pinterest-scroll-panel:before, #testimonials .testimonial-scroll-panel:after, #testimonials .pinterest-scroll-panel:after{
  display:none;
}
#testimonials .pinterest-masonry{
  column-count:1;
}
#about .section-copy, #about .about-copy, #about .about-text{
  transform:none;
}
#about .pill-grid, #about h2, #about .lead:first-of-type{
  margin-left:0;
}
#about .about-column-heading{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
html, body{
  scroll-snap-type:none;
}
.page, section.page, #home, #about, #experiment, #experience, #projects, #courses, #testimonials, #contact{
  scroll-snap-align:none;
  scroll-snap-stop:normal;
  padding-top:64px;
  padding-bottom:92px;
  min-height:auto;
}
#home{
  padding-top:54px;
}
#about{
  padding-top:50px;
}
#experiment .experiment-wrap{
  width:min(100%, calc(100% - 36px));
}
#experiment .experiment-card-grid{
  grid-template-columns:1fr;
}
#experiment .experiment-card{
  min-height:auto;
  padding:20px;
}
#experiment .experiment-card-top{
  align-items:flex-start;
}
#contact .contact-right-panel{
  grid-template-columns:1fr;
}
.animated-workstation{
  min-height:390px;
}
.desk-scene{
  transform:scale(.72) perspective(900px) rotateX(8deg) rotateY(-13deg);
}
.cpu-tower{
  left:82px;
  top:168px;
}
.animated-workstation .desk-scene{
  transform:scale(.72) perspective(980px) rotateX(7deg) rotateY(-24deg);
}
.premium-workstation{
  min-height:390px;
}
.premium-desk-scene{
  transform:scale(.70) perspective(980px) rotateX(8deg) rotateY(-18deg);
}
.premium-workstation .cpu-premium{
  left:18px;
  bottom:-12px;
  width:56px;
  height:118px;
}
.premium-workstation .pen-stand{
  left:274px;
  top:34px;
}
#experience .timeline-row{
  display:block;
  min-height:auto;
  padding:22px 0;
}
#experience .timeline-year{
  display:block;
}
#experience .timeline-year > div{
  text-align:left;
  font-size:34px;
  margin:8px 0 10px;
  display:block;
}
#experience .timeline-year small{
  font-size:15px;
  max-width:none;
  display:block;
}
#experience .timeline-row > .timeline-text{
  position:static;
  transform:none;
  width:auto;
  margin-top:12px;
}
#experience .exp-timeline::before, #experience .exp-progress{
  display:none;
}
#experience .timeline-text{
  margin-top:10px;
  display:block;
}
#experience .timeline-text p{
  max-width:none;
}
#experience .exp-progress, #experience .exp-progress::after, #experience .exp-timeline:after{
  display:none;
}
#experience{
  padding-top:64px;
  padding-bottom:92px;
  padding-left:6vw;
  padding-right:6vw;
}
#experience .exp-timeline::before, #experience .exp-timeline::after, #experience .exp-progress, #experience .exp-progress::after{
  display:none;
}
#experience .exp-tabs{
  display:none;
}
#experience .exp-card-grid.timeline-mode{
  padding-left:6vw;
  padding-right:6vw;
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  transform:none;
}
#projects .project-tabs, #courses .edu-tabs{
  margin-bottom:30px;
}
#courses .edu-card-grid, #project-tab-projects.project-panel, #project-tab-publications.project-panel, #project-tab-conferences.project-panel{
  padding:26px;
  height:500px;
  min-height:500px;
  max-height:500px;
}
#experience .timeline-year small::first-line{
  font-size:18px;
}
#about .refined-research-line{
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
}
#about .refined-research-line .research-word-wrap{
  min-width:120px;
}
#about .research-support-text{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
#tools{
  padding-top:48px;
  padding-bottom:96px;
}
#tools .tools-split-layout{
  grid-template-columns:1fr;
  gap:22px;
  width:min(94vw,720px);
}
#tools .tools-concepts-panel, #tools .tools-hex-wrapper{
  height:430px;
  min-height:430px;
  max-height:430px;
}
#tools .tools-hex-wrapper{
  padding:18px;
}
#tools .concept-mini-list{
  padding:18px 14px;
  gap:8px;
  animation-duration:18s;
}
#tools .concept-mini-card{
  font-size:11.5px;
  padding:9px 11px;
}
#tools .tools-icon-mosaic{
  grid-template-columns:repeat(5,minmax(48px,1fr));
  gap:9px;
  padding:4px 8px;
}
#tools .tools-icon-mosaic .project-tool-tile{
  width:50px;
  height:50px;
  border-radius:14px;
}
#tools .tools-icon-mosaic .local-logo{
  width:19px;
  height:19px;
  font-size:7px;
}
#tools .tools-icon-mosaic .project-tool-tile span{
  font-size:5.8px;
  max-width:44px;
}
#projects .project-marquee-track{
  gap:18px;
}
#projects .project-marquee-card{
  flex-basis:calc((100vw - 18px) / 2);
  min-height:330px;
  height:420px;
}
}
@media (max-width: 900px){
.edu-logo-card h3, #project-tab-projects .project-info-card h3, #project-tab-publications .project-info-card h3, #project-tab-conferences .project-info-card h3{
  font-size:22px;
}
.edu-logo-card p, #project-tab-projects .project-info-card p, #project-tab-publications .project-info-card p, #project-tab-conferences .project-info-card p{
  font-size:15px;
}
}
@media (prefers-reduced-motion: reduce){
.edu-logo-card, #project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card{
  transition:none;
}
.edu-logo-card:hover, #project-tab-projects .project-info-card:hover, #project-tab-publications .project-info-card:hover, #project-tab-conferences .project-info-card:hover{
  transform:none;
}
.edu-logo-card, #project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card, .edu-logo-card::before, .edu-logo-card::after, #project-tab-projects .project-info-card::before, #project-tab-projects .project-info-card::after, #project-tab-publications .project-info-card::before, #project-tab-publications .project-info-card::after, #project-tab-conferences .project-info-card::before, #project-tab-conferences .project-info-card::after{
  transition:none;
}
}
@media (max-width: 980px){
#courses .edu-card-grid, #project-tab-projects .project-info-grid, #project-tab-publications .project-info-grid, #project-tab-conferences .project-info-grid{
  grid-template-columns:1fr;
}
#courses .edu-card-grid, #project-tab-projects.project-panel, #project-tab-publications.project-panel, #project-tab-conferences.project-panel{
  max-height:430px;
}
:root{
  --tab-section-height:470px;
  --tab-section-padding:18px;
  --tab-card-gap:18px;
}
#courses .edu-logo-card, #project-tab-projects .project-info-card, #project-tab-publications .project-info-card, #project-tab-conferences .project-info-card{
  height:auto;
  min-height:280px;
}
}
@media(min-width:981px){
#experience .timeline-row{
  grid-template-columns:21% 12% 8% 59%;
  column-gap:50px;
  min-height:154px;
  padding-top:24px;
  padding-bottom:24px;
}
#experience .exp-timeline::after, #experience .exp-progress{
  left:calc(21% + 12% + 4% + 50px);
}
#experience .timeline-year small{
  max-width:280px;
  font-size:17.5px;
  padding-bottom:10px;
  line-height:1.45;
}
#experience .timeline-text p{
  max-width:780px;
  font-size:15.8px;
  line-height:1.62;
  width:100%;
  text-align:justify;
  text-justify:inter-word;
}
#experience .timeline-year > div{
  font-size:44px;
  justify-self:center;
}
#experience .timeline-text{
  width:100%;
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  transform:translateX(34px);
}
}
@media(min-width:1200px){
#experience{
  padding-left:2.6vw;
  padding-right:2.6vw;
}
#experience .timeline-row{
  column-gap:36px;
  grid-template-columns:22% 12% 7% 59%;
}
#experience .exp-timeline::after, #experience .exp-progress{
  left:calc(22% + 12% + 3.5% + 36px);
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  max-width:1420px;
}
#experience .timeline-text p{
  max-width:820px;
}
}
@media(min-width:1500px){
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  max-width:1500px;
}
#experience .timeline-row{
  grid-template-columns:21% 12% 7% 60%;
  column-gap:38px;
}
#experience .timeline-text p{
  max-width:900px;
}
#experience .exp-timeline::after, #experience .exp-progress{
  left:calc(21% + 12% + 3.5% + 38px);
}
}
@media(min-width:1300px){
#experience .exp-card-grid.timeline-mode{
  max-width:1240px;
  padding-left:4vw;
  padding-right:4vw;
}
#experience .exp-timeline{
  max-width:1120px;
}
#experience .timeline-row{
  grid-template-columns:20% 11% 8% 61%;
  column-gap:54px;
  min-height:158px;
}
#experience .timeline-text p{
  max-width:860px;
}
#experience .exp-timeline::after, #experience .exp-progress{
  left:calc(20% + 11% + 4% + 54px);
}
#experience{
  padding-left:4vw;
  padding-right:4vw;
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  max-width:1360px;
  transform:translateX(42px);
}
}
@media(min-width:1600px){
#experience{
  padding-left:4vw;
  padding-right:4vw;
}
#experience .exp-card-grid.timeline-mode, #experience .exp-timeline{
  max-width:1460px;
  transform:translateX(50px);
}
#experience .timeline-row{
  grid-template-columns:19% 10% 8% 63%;
  column-gap:58px;
  min-height:162px;
}
#experience .timeline-text p{
  max-width:960px;
}
#experience .exp-timeline::after, #experience .exp-progress{
  left:calc(19% + 10% + 4% + 58px);
}
}
@media(max-width:1180px){
#tools .tools-icon-mosaic{
  grid-template-columns:repeat(7,minmax(54px,1fr));
  gap:10px;
}
#tools .tools-icon-mosaic .project-tool-tile{
  width:58px;
  height:58px;
}
}
@media(max-width:640px){
#projects .project-marquee-track{
  gap:16px;
}
#projects .project-marquee-card{
  flex-basis:calc(100vw - 32px);
  min-height:320px;
  height:400px;
}
}
/* All sections transparent — starfield canvas shows through */
#home,#about,#experiment,#experience,#projects,#tools,#courses,#testimonials,#contact{background:transparent;}
/* -- Now Exploring cards ----------------------------------- */
#exploring{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  color:#fff;
}
#exploring h2,
#exploring h3,
#exploring p,
#exploring span,
#exploring .lead,
#exploring .explore-card-top h3,
#exploring .explore-progress-meta,
#exploring .explore-stat-val,
#exploring .explore-stat-lbl,
#exploring .explore-tag,
#exploring .explore-status{
  color:#fff !important;
}
.explore-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  width:100%;
  max-width:1100px;
  max-height:calc(100vh - 260px);
  overflow-y:auto;
  padding:4px 2px 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.4) rgba(255,255,255,.06);
}
.explore-grid::-webkit-scrollbar{ width:6px; }
.explore-grid::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:999px; }
.explore-grid::-webkit-scrollbar-thumb{ background:rgba(245,197,66,.4); border-radius:999px; }
/* 2 cards ? center them */
.explore-grid:has(> :nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(0,420px));
  justify-content:center;
}
.explore-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:border-color .3s, background .3s, transform .3s;
  box-shadow:0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
}
.explore-card:hover{
  border-color:rgba(245,197,66,.35);
  background:rgba(255,255,255,.08);
  transform:translateY(-4px);
}
/* Card header */
.explore-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.explore-card-top h3{
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  margin:0;
  letter-spacing:-.015em;
}
.explore-tag{
  flex-shrink:0;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(245,197,66,.12);
  border:1px solid rgba(245,197,66,.22);
  color:var(--yellow);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Status badge */
.explore-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:rgba(74,222,128,1);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.explore-status::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(74,222,128,1);
  box-shadow:0 0 6px rgba(74,222,128,.7);
  animation:pulse-green .9s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse-green{
  0%,100%{ box-shadow:0 0 6px rgba(74,222,128,.7); }
  50%     { box-shadow:0 0 14px rgba(74,222,128,1); }
}
/* Progress bar */
.explore-progress-wrap{ display:flex; flex-direction:column; gap:7px; }
.explore-progress-bar{
  width:100%;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.explore-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow:0 0 8px rgba(74,222,128,.5);
  transition:width .8s ease;
  min-width:4px;
}
.explore-progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  color:rgba(200,220,255,.65);
}
/* Stats row */
.explore-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:16px;
}
.explore-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
}
.explore-stat-val{
  font-size:26px;
  font-weight:900;
  color:#fff;
  line-height:1;
  letter-spacing:-.03em;
}
.explore-stat-val.infinity{ font-size:30px; }
.explore-stat-lbl{
  font-size:11px;
  color:rgba(200,220,255,.55);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
@media(max-width:900px){
  .explore-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
  .explore-grid{ grid-template-columns:1fr; }
}

/* -- Space Communication Scene (Contact page) ------------- */
.space-comm-scene{
  position:relative;
  width:100%;
  min-height:480px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:32px;
  background:radial-gradient(circle at 50% 50%, rgba(28,58,140,.22) 0%, transparent 65%),
    linear-gradient(135deg, rgba(8,20,48,.9), rgba(4,11,28,.95));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
/* Orbit rings */
.sc-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(245,197,66,.18);
  animation:sc-spin 18s linear infinite;
}
.sc-ring-a{
  width:320px; height:320px;
  animation-duration:22s;
}
.sc-ring-b{
  width:210px; height:210px;
  border-color:rgba(147,197,253,.14);
  animation-duration:15s;
  animation-direction:reverse;
}
@keyframes sc-spin{ to{ transform:rotate(360deg); } }

/* Central hub */
.sc-hub{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  z-index:2;
}
/* Satellite dish */
.sc-dish{
  position:relative;
  width:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:sc-tilt 6s ease-in-out infinite;
}
@keyframes sc-tilt{
  0%,100%{ transform:rotate(-8deg); }
  50%     { transform:rotate(8deg); }
}
.sc-dish-arm{
  width:4px; height:28px;
  background:rgba(147,197,253,.7);
  border-radius:2px;
  margin-bottom:2px;
}
.sc-dish-bowl{
  width:72px; height:36px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(180deg, rgba(100,170,255,.25) 0%, rgba(50,100,200,.45) 100%);
  border:2px solid rgba(147,197,253,.55);
  border-bottom:none;
  box-shadow:0 0 18px rgba(147,197,253,.20);
}
.sc-dish-feed{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--yellow);
  margin-top:-4px;
  box-shadow:0 0 10px rgba(245,197,66,.8);
  animation:sc-feed-pulse 1.4s ease-in-out infinite;
}
@keyframes sc-feed-pulse{
  0%,100%{ box-shadow:0 0 10px rgba(245,197,66,.8); }
  50%     { box-shadow:0 0 22px rgba(245,197,66,1), 0 0 40px rgba(245,197,66,.4); }
}
/* Satellite body & panels */
.sc-body{
  display:flex;
  align-items:center;
  gap:10px;
}
.sc-panel-l,.sc-panel-r{
  width:38px; height:18px;
  border-radius:4px;
  background:linear-gradient(90deg, rgba(50,100,200,.5), rgba(100,160,255,.35));
  border:1px solid rgba(147,197,253,.35);
  animation:sc-panel-glow 3s ease-in-out infinite;
}
.sc-panel-r{ animation-delay:1.5s; }
@keyframes sc-panel-glow{
  0%,100%{ opacity:.7; }
  50%     { opacity:1; box-shadow:0 0 8px rgba(147,197,253,.4); }
}
.sc-core{
  width:28px; height:28px;
  border-radius:6px;
  background:linear-gradient(135deg, rgba(28,58,140,.9), rgba(8,20,48,.95));
  border:1px solid rgba(245,197,66,.4);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sc-pulse{
  position:absolute;
  width:100%; height:100%;
  border-radius:6px;
  border:1px solid rgba(245,197,66,.5);
  animation:sc-pulse-ring 2.4s ease-out infinite;
}
.sc-pulse-b{ animation-delay:1.2s; }
@keyframes sc-pulse-ring{
  0%  { transform:scale(1);   opacity:.8; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* Signal waves */
.sc-wave{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(245,197,66,.22);
  animation:sc-wave-expand 3.5s ease-out infinite;
  pointer-events:none;
}
.sc-wave-1{ width:60px; height:60px; animation-delay:0s; }
.sc-wave-2{ width:60px; height:60px; animation-delay:1.2s; }
.sc-wave-3{ width:60px; height:60px; animation-delay:2.4s; }
@keyframes sc-wave-expand{
  0%  { width:60px;  height:60px;  opacity:.7; }
  100%{ width:260px; height:260px; opacity:0; }
}

/* Floating tag labels */
.sc-tag{
  position:absolute;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(8,20,48,.82);
  border:1px solid rgba(245,197,66,.30);
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.sc-tag-1{ top:18%;  left:8%;  animation:sc-float-a 5s ease-in-out infinite; }
.sc-tag-2{ top:15%;  right:10%; animation:sc-float-b 6s ease-in-out infinite; }
.sc-tag-3{ bottom:22%; left:6%;  animation:sc-float-c 7s ease-in-out infinite; }
.sc-tag-4{ bottom:20%; right:8%; animation:sc-float-a 5.5s ease-in-out infinite; animation-delay:1s; }
@keyframes sc-float-a{
  0%,100%{ transform:translateY(0px); }
  50%    { transform:translateY(-10px); }
}
@keyframes sc-float-b{
  0%,100%{ transform:translateY(-6px); }
  50%    { transform:translateY(6px); }
}
@keyframes sc-float-c{
  0%,100%{ transform:translateY(4px); }
  50%    { transform:translateY(-8px); }
}

/* Tiny orbiting dots */
.sc-dot{
  position:absolute;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 8px rgba(245,197,66,.8);
}
.sc-dot-a{
  animation:sc-orbit-a 8s linear infinite;
  transform-origin:160px 0;
}
.sc-dot-b{
  background:rgba(147,197,253,.9);
  box-shadow:0 0 8px rgba(147,197,253,.8);
  animation:sc-orbit-b 12s linear infinite;
  transform-origin:105px 0;
}
.sc-dot-c{
  animation:sc-orbit-a 10s linear infinite reverse;
  transform-origin:150px 0;
  animation-delay:-4s;
}
@keyframes sc-orbit-a{
  from{ transform:rotate(0deg) translateX(160px) rotate(0deg); }
  to  { transform:rotate(360deg) translateX(160px) rotate(-360deg); }
}
@keyframes sc-orbit-b{
  from{ transform:rotate(0deg) translateX(105px) rotate(0deg); }
  to  { transform:rotate(360deg) translateX(105px) rotate(-360deg); }
}

/* -- Education glass cards ---------------------------------- */
.edu-glass-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
  box-shadow:0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.edu-glass-card:hover{
  border-color:rgba(245,197,66,.32);
  background:rgba(255,255,255,.08);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
}
.edu-card-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--yellow);
  display:block;
  box-shadow:0 0 6px rgba(245,197,66,.55);
  margin-bottom:4px;
}
.edu-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.edu-glass-card .edu-badge{
  display:inline-flex;
  align-self:flex-start;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(245,197,66,.12);
  border:1px solid rgba(245,197,66,.22);
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.edu-glass-card .edu-year{
  display:inline-flex;
  align-self:flex-start;
  margin-left:auto;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(234,246,255,.92);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
.edu-logo-card .edu-year{
  display:inline-flex;
  width:max-content;
  margin-left:auto;
  margin-top:0;
  margin-bottom:10px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(234,246,255,.92);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
.edu-glass-card h3{
  color:#ffffff;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  margin:0;
  letter-spacing:-.015em;
}
.edu-glass-card p{
  color:rgba(200,218,255,.70);
  font-size:13.5px;
  line-height:1.5;
  margin:0;
}
#eduCards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
  max-height:calc(100vh - 280px);
  overflow-y:auto;
  padding:4px 2px 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.4) rgba(255,255,255,.06);
}
#eduCards::-webkit-scrollbar{ width:6px; }
#eduCards::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:999px; }
#eduCards::-webkit-scrollbar-thumb{ background:rgba(245,197,66,.4); border-radius:999px; }
@media(max-width:900px){
  #eduCards{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
  #eduCards{ grid-template-columns:1fr; }
}

/* About page — content left, image right, image vertically centred */
#about .section-grid{
  grid-template-columns: 56% 34% !important;
  align-items:stretch !important;
  gap:28px !important;
  min-height:0 !important;
}
#about .section-grid > div:first-child{
  order:2;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  align-self:stretch;
  padding-left:0;
}
#about .section-grid > div:nth-child(2){ order:1; }

/* -- Hero greeting + typewriter ------------------------------- */
.hero-greeting{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:8px;
  letter-spacing:.01em;
}
.hero-wave{
  font-size:26px;
  display:inline-block;
  animation:wave-hand 2s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes wave-hand{
  0%,60%,100%{ transform:rotate(0deg); }
  10%         { transform:rotate(18deg); }
  20%         { transform:rotate(-8deg); }
  30%         { transform:rotate(18deg); }
  40%         { transform:rotate(-4deg); }
  50%         { transform:rotate(12deg); }
}
.hero-typewriter{
  margin-bottom:16px;
  font-size:20px;
  font-family:'Playwrite US Modern', cursive;
  font-weight:400;
  color:var(--yellow);
  letter-spacing:.02em;
  min-height:30px;
  display:flex;
  align-items:center;
  gap:3px;
}
.hero-typewriter .tw-text{ color:var(--yellow); }
.hero-typewriter .tw-cursor{
  display:inline-block;
  width:2px;
  height:1.1em;
  background:var(--yellow);
  border-radius:1px;
  vertical-align:middle;
  margin-left:1px;
  animation:tw-blink .65s step-end infinite;
}
@keyframes tw-blink{ 50%{ opacity:0; } }

/* Contact icon pinned to top-right corner */
.side-icon.bottom-icon{
  position:fixed !important;
  top:18px !important;
  right:22px !important;
  left:auto !important;
  bottom:auto !important;
  z-index:10000 !important;
}
.side-icon.bottom-icon::after{
  left:auto !important;
  right:52px;
  transform:translateY(-50%) translateX(6px);
}
.side-icon.bottom-icon:hover::after{
  transform:translateY(-50%) translateX(0);
}
.side-icon.bottom-icon:hover{
  transform:translateX(-8px) scale(1.08) !important;
}

/* About image — full image visible, naturally proportioned */
#about .about-title-photo{
  max-width:100% !important;
  width:100%;
  margin:auto 0;
  background:transparent;
  box-shadow:none;
  padding:0;
  border-radius:22px;
  overflow:hidden;
  align-self:center;
}
#about .about-title-photo img{
  border-radius:22px;
  width:100%;
  height:auto;
  display:block;
  opacity:1.0;
}
#about .section-grid > div:first-child{
  padding-left:0 !important;
}

/* -- Courses tab – 2-row horizontal scroll grid ------------ */
#eduCards.hscroll-mode{
  display:block !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
}
.edu-hscroll-track{
  /* 2 rows, auto-fill columns, flows left-to-right */
  display:grid;
  grid-template-rows:repeat(2, auto);
  grid-auto-flow:column;
  /* each column = exactly 1/3 of the visible container */
  grid-auto-columns:calc((100% - 2 * 18px) / 3);
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:6px 4px 18px;
  overscroll-behavior-x:contain;
  cursor:grab;
  /* visible styled scrollbar */
  scrollbar-width:thin;
  scrollbar-color:rgba(245,197,66,.55) rgba(255,255,255,.08);
}
.edu-hscroll-track:active{ cursor:grabbing; }
.edu-hscroll-track::-webkit-scrollbar{
  height:6px;
  display:block;
}
.edu-hscroll-track::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:999px;
  margin:0 4px;
}
.edu-hscroll-track::-webkit-scrollbar-thumb{
  background:rgba(245,197,66,.55);
  border-radius:999px;
}
.edu-hscroll-track::-webkit-scrollbar-thumb:hover{
  background:rgba(245,197,66,.85);
}
/* Cards fill their grid cell */
.edu-hscroll-track .edu-glass-card{
  min-width:0;
  width:100%;
}

/* -- Contact page background image ------------------------ */
#contact{
  background:url('images/contact-bg.png') center center / cover no-repeat !important;
  position:relative !important;
}
#contact::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(2,9,18,.52);
  pointer-events:none;
  z-index:0;
}
#contact > *{
  position:relative;
  z-index:1;
}

/* Starfield sits between body bg (z:0) and section content (z:1) */
.page{position:relative;z-index:1;}

/* -- Pure CSS starfield -------------------------------------- */
.starfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    /* small stars — 18 total, bright */
    radial-gradient(circle 1px at  8% 12%, rgba(230,245,255,.78) 0%,transparent 100%),
    radial-gradient(circle 1px at 22% 38%, rgba(230,245,255,.70) 0%,transparent 100%),
    radial-gradient(circle 1px at 37%  7%, rgba(230,245,255,.82) 0%,transparent 100%),
    radial-gradient(circle 1px at 51% 22%, rgba(230,245,255,.75) 0%,transparent 100%),
    radial-gradient(circle 1px at 65% 14%, rgba(230,245,255,.80) 0%,transparent 100%),
    radial-gradient(circle 1px at 78% 42%, rgba(230,245,255,.72) 0%,transparent 100%),
    radial-gradient(circle 1px at 91%  9%, rgba(230,245,255,.78) 0%,transparent 100%),
    radial-gradient(circle 1px at  4% 58%, rgba(230,245,255,.75) 0%,transparent 100%),
    radial-gradient(circle 1px at 18% 72%, rgba(230,245,255,.70) 0%,transparent 100%),
    radial-gradient(circle 1px at 33% 55%, rgba(230,245,255,.78) 0%,transparent 100%),
    radial-gradient(circle 1px at 47% 80%, rgba(230,245,255,.72) 0%,transparent 100%),
    radial-gradient(circle 1px at 61% 65%, rgba(230,245,255,.75) 0%,transparent 100%),
    radial-gradient(circle 1px at 74% 88%, rgba(230,245,255,.70) 0%,transparent 100%),
    radial-gradient(circle 1px at 87% 62%, rgba(230,245,255,.80) 0%,transparent 100%),
    radial-gradient(circle 1px at 13% 45%, rgba(230,245,255,.72) 0%,transparent 100%),
    radial-gradient(circle 1px at 55% 50%, rgba(230,245,255,.76) 0%,transparent 100%),
    radial-gradient(circle 1px at 29% 92%, rgba(230,245,255,.70) 0%,transparent 100%),
    radial-gradient(circle 1px at 96% 35%, rgba(230,245,255,.76) 0%,transparent 100%),
    /* medium stars — 7 total, very bright */
    radial-gradient(circle 1.5px at 16% 28%, rgba(245,252,255,.88) 0%,transparent 100%),
    radial-gradient(circle 1.5px at 44% 48%, rgba(245,252,255,.84) 0%,transparent 100%),
    radial-gradient(circle 1.5px at 71% 22%, rgba(245,252,255,.90) 0%,transparent 100%),
    radial-gradient(circle 1.5px at 85% 75%, rgba(245,252,255,.84) 0%,transparent 100%),
    radial-gradient(circle 1.5px at  9% 82%, rgba(245,252,255,.88) 0%,transparent 100%),
    radial-gradient(circle 1.5px at 58% 92%, rgba(245,252,255,.82) 0%,transparent 100%),
    radial-gradient(circle 1.5px at 38% 18%, rgba(245,252,255,.86) 0%,transparent 100%),
    /* accent stars — 6 total, strong glow */
    radial-gradient(circle 2.5px at 25% 15%, rgba(255,255,255,1)   0%,rgba(210,228,255,.40) 50%,transparent 100%),
    radial-gradient(circle 2.5px at 72% 35%, rgba(255,255,255,.96) 0%,rgba(210,228,255,.38) 50%,transparent 100%),
    radial-gradient(circle 2.5px at 90% 58%, rgba(255,255,255,1)   0%,rgba(210,228,255,.40) 50%,transparent 100%),
    radial-gradient(circle 2.5px at 42% 78%, rgba(255,255,255,.94) 0%,rgba(210,228,255,.35) 50%,transparent 100%),
    radial-gradient(circle 2.5px at  6% 32%, rgba(255,255,255,.96) 0%,rgba(210,228,255,.38) 50%,transparent 100%),
    radial-gradient(circle 2.5px at 62% 10%, rgba(255,255,255,1)   0%,rgba(210,228,255,.40) 50%,transparent 100%);
  background-size: 100% 100%;
  background-color: transparent;
}