/* ===== HOMEPAGE HERO BACKGROUND PHOTO ===== */
.hero{
  position:relative;
  background-image:url("assets/images/hero-bg.jpg");
  background-image:-webkit-image-set(url("assets/images/hero-bg.webp") 1x);
  background-image:image-set(url("assets/images/hero-bg.webp") type("image/webp"));
  background-size:cover;background-position:top center;background-attachment:fixed;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(19,25,36,.55);
}
.hero .hero-inner{position:relative;z-index:2;}
@supports (-webkit-touch-callout: none){
  .hero{background-attachment:scroll;}
}

/* ===== INTRO PHOTO (homepage) ===== */
.about-photo{position:relative;}
.about-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, var(--bg-alt) 0%, transparent 16%, transparent 84%, var(--bg-alt) 100%),
    linear-gradient(to right, var(--bg-alt) 0%, transparent 16%, transparent 84%, var(--bg-alt) 100%);
}

/* ===== ANIMATED CHARACTER (homepage intro) ===== */
.character-stage{
  cursor:pointer;outline:none;position:relative;
}
.character-stage::after{display:none;}
.character-stage:focus-visible{box-shadow:0 0 0 3px var(--accent);border-radius:14px;}
/* higher specificity than the generic .about-photo card rule (defined later in this file)
   so the character photo floats free with no card chrome, no clipping box, and a height
   that hugs the avatar instead of a tall 4:5 card , keeps it visually attached to the text */
.about-photo.character-stage{
  background:none;border:none;box-shadow:none;border-radius:0;
  overflow:visible;aspect-ratio:auto;height:260px;margin-bottom:0;
}
.character-scene{position:relative;width:100%;height:100%;overflow:visible;}
.walker{
  position:absolute;left:50%;bottom:10%;width:52%;max-width:210px;
  transform:translate(-50%,0);
}
.avatar-photo{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:4px solid var(--accent);box-shadow:0 16px 34px -10px rgba(0,0,0,.55), 0 0 0 6px rgba(94,234,212,.12);
  background:var(--surface);
}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* speech bubble is a direct child of .character-stage (not .character-scene, which clips
   horizontally for the walk-in slide) and anchored by the SAME bottom + height math as
   .walker, so it always sits right on top of the photo , connected, not floating loose */
.speech-bubble{
  position:absolute;left:50%;bottom:calc(10% + 210px + 14px);max-width:230px;text-align:center;
  transform:translateX(-50%) translateY(6px) scale(.9);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;font-family:var(--font-mono);font-size:.82rem;color:var(--heading);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:6;
}
.speech-bubble::after{
  content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:var(--surface);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
}
.speech-bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}

/* ===== CERTIFICATIONS , 3-COLUMN VERTICAL MARQUEE (homepage) ===== */
.cert-columns{
  display:flex;gap:24px;max-width:var(--maxw);margin:24px auto 0;height:620px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.cert-col-wrapper{flex:1;min-width:0;height:100%;overflow:hidden;}
.cert-col{display:flex;flex-direction:column;gap:16px;}
.cert-col-up{animation:scrollColUp 26s linear infinite;}
.cert-col-down{animation:scrollColDown 26s linear infinite;}
.cert-col-wrapper:hover .cert-col-up,
.cert-col-wrapper:hover .cert-col-down{animation-play-state:paused;}
@keyframes scrollColUp{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes scrollColDown{from{transform:translateY(-50%);}to{transform:translateY(0);}}

.cert-preview-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:border-color .2s,transform .2s;
}
.cert-preview-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.cert-preview-thumb{
  width:100%;height:110px;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.cert-preview-thumb img{width:100%;height:100%;object-fit:cover;}
.cert-mono{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:800;font-size:1.4rem;letter-spacing:.04em;
}
.cert-preview-info{padding:14px 16px;}
.cert-preview-badge{
  display:inline-block;font-family:var(--font-mono);font-size:.65rem;color:var(--accent);
  border:1px solid var(--accent);padding:2px 9px;border-radius:999px;margin-bottom:8px;
}
.cert-preview-name{font-size:.9rem;font-weight:700;color:var(--heading);margin:0 0 4px;}
.cert-preview-issuer{font-size:.75rem;color:var(--text-dim);margin:0 0 10px;}

/* ===== CTA , angled banners + typewriter (homepage) ===== */
.cta-hero-section{position:relative;overflow:hidden;padding:130px 20px;background:var(--bg);}
.cta-diag-banner{
  position:absolute;width:200%;left:-50%;font-weight:800;font-size:1rem;letter-spacing:.15em;
  padding:14px 0;white-space:nowrap;overflow:hidden;z-index:1;font-family:var(--font-mono);
}
.cta-diag-1{top:48%;transform:rotate(-9deg);background:var(--accent);color:#06121a;}
.cta-diag-2{top:48%;transform:rotate(9deg);background:rgba(94,234,212,.08);color:var(--text-dim);}
.cta-diag-1 .diag-track{display:inline-block;animation:scrollLeftDiag 18s linear infinite;}
.cta-diag-2 .diag-track{display:inline-block;animation:scrollRightDiag 22s linear infinite;}
@keyframes scrollLeftDiag{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes scrollRightDiag{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.cta-hero-card{
  position:relative;z-index:10;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:52px 48px;max-width:680px;margin:0 auto;text-align:center;
  box-shadow:0 0 80px rgba(94,234,212,.08);
}
.cta-hero-card h2{
  font-family:var(--font-mono);font-size:clamp(1.5rem,4vw,3rem);color:var(--heading);
  line-height:1.2;margin-bottom:20px;
}
.cta-typewriter{color:var(--accent);}

/* ===== ABOUT HERO (full-bleed photo) ===== */
.about-hero-full{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center;}
.about-hero-full .about-hero-bg-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;
}
.about-hero-full .about-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right, rgba(19,25,36,.8) 0%, rgba(19,25,36,.58) 50%, rgba(19,25,36,.3) 100%);
}
.about-hero-full .about-hero-content{position:relative;z-index:2;max-width:680px;padding:0 60px;}
.about-hero-full .page-hero-num{display:block;}
.about-hero-full h1{
  font-family:var(--font-mono);font-weight:700;color:var(--heading);
  font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.15;margin:14px 0 20px;
}
.about-hero-full p{color:var(--text-dim);font-size:1.05rem;line-height:1.7;margin-bottom:30px;}

/* ===== JOURNEY , overlapping card ===== */
.journey-section{background:var(--bg);padding:80px 24px;}
.journey-grid{max-width:1100px;margin:0 auto;display:flex;align-items:center;}
.journey-image-wrap{width:55%;flex-shrink:0;position:relative;z-index:1;overflow:hidden;border-radius:16px;}
.journey-image-wrap img{width:100%;height:480px;object-fit:cover;object-position:center 60%;border-radius:16px;display:block;}
.journey-card{
  width:45%;margin-left:-80px;align-self:center;position:relative;z-index:2;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.journey-card h2{font-family:var(--font-mono);color:var(--heading);margin-bottom:16px;}
.journey-card p{color:var(--text-dim);font-size:.95rem;margin-bottom:14px;}
.journey-card p:last-child{margin-bottom:0;}

/* ===== CINEMATIC BANNER ===== */
.cinematic-banner{position:relative;width:100%;overflow:hidden;background:var(--bg);}
.cinematic-overlay{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:90px 24px;text-align:center;
}
.cinematic-quote{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(1.2rem,3vw,2.4rem);color:#fff;max-width:700px;line-height:1.5;margin:0;}
.cinematic-line{width:60px;height:2px;background:var(--accent);margin:20px auto 0;}

/* ===== NUMBERS SECTION ===== */
.numbers-section{background:var(--bg);padding:80px 24px;text-align:center;}
.numbers-section h2{font-family:var(--font-mono);font-size:1.85rem;color:var(--heading);margin-bottom:40px;}
.numbers-grid{
  display:grid;grid-template-columns:repeat(4,1fr);max-width:1040px;margin:0 auto;
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);border-radius:20px;padding:36px 10px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.number-card{
  background:none;border:none;border-radius:0;padding:12px 18px;text-align:center;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:130px;
}
.number-card:not(:last-child)::after{
  content:'';position:absolute;right:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(to bottom, transparent, var(--border), transparent);
}
.number-value{
  display:block;font-size:3rem;font-weight:700;font-family:var(--font-mono);line-height:1;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.number-label{color:var(--text-dim);margin-top:10px;font-size:.85rem;}
.number-card-icon{display:block;font-size:2rem;margin-bottom:6px;}
.number-card-stat{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--heading);font-size:1.1rem;}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;animation:pulseDot 1.6s ease infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(94,234,212,.5);}70%{box-shadow:0 0 0 10px rgba(94,234,212,0);}100%{box-shadow:0 0 0 0 rgba(94,234,212,0);}}
@media (max-width:720px){
  .numbers-grid{grid-template-columns:repeat(2,1fr);row-gap:28px;}
  .number-card:nth-child(2)::after{display:none;}
  .number-card:not(:nth-child(2n))::after{display:block;}
  .number-card{padding:8px 14px;}
}

/* ===== MINI PORTRAITS + POSTCARD (homepage photo , "what's going on in my head") ===== */
.floating-icons{position:absolute;inset:0;z-index:5;pointer-events:none;}
.float-icon{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(145deg, var(--surface-2), var(--surface));border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;cursor:pointer;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.5);pointer-events:auto;
  opacity:0;
}
.float-icon:hover{border-color:var(--accent-2);}
.float-icon:nth-of-type(1){top:4%;left:4%;}
.float-icon:nth-of-type(2){top:0%;right:6%;}
.float-icon:nth-of-type(3){top:38%;left:-2%;}
.float-icon:nth-of-type(4){top:34%;right:-2%;}
.float-icon:nth-of-type(5){bottom:8%;left:8%;}
.polaroid{
  position:absolute;top:50%;left:50%;z-index:7;
  background:#f4f1ea;border-radius:6px;padding:14px 14px 20px;width:78%;max-width:260px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.65), 0 4px 0 rgba(0,0,0,.05);
  transform:translate(-50%,-50%) rotate(-2.5deg) scale(.85);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.polaroid.show{opacity:1;pointer-events:auto;}
.polaroid-close{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.08);border:none;color:#1c1f26;font-size:1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.polaroid-close:hover{background:rgba(0,0,0,.16);}
.polaroid-photo{
  width:100%;aspect-ratio:1/1;border-radius:2px;background:linear-gradient(145deg, var(--surface-2), var(--surface));
  display:flex;align-items:center;justify-content:center;font-size:3.6rem;
  border:1px solid rgba(0,0,0,.08);
}
.polaroid-caption{padding-top:14px;}
.polaroid-caption h3{
  font-family:var(--font-mono);color:#1c1f26;font-size:.95rem;margin-bottom:8px;font-weight:700;
}
.polaroid-caption p{color:#4a4f5c;font-size:.8rem;line-height:1.5;font-family:var(--font-body);}
@media (max-width:900px){
  .float-icon{width:40px;height:40px;font-size:1.15rem;}
  .float-icon:nth-of-type(1){left:-2%;}
  .float-icon:nth-of-type(2){right:0%;}
  .float-icon:nth-of-type(3){left:-6%;}
  .float-icon:nth-of-type(4){right:-4%;}
  .float-icon:nth-of-type(5){left:-2%;}
}

/* ===== LOADER ===== */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:#080b11;
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s cubic-bezier(.76,0,.24,1), opacity .6s ease;
}
.loader.loader-exit{
  transform:translateY(-100%);
}
body.loaded .loader{display:none;}
.loader-stage{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translateY(0);
}
.loader-name-wrap{
  position:relative;display:inline-block;
}
.loader-name{
  font-family:'Fraunces',serif;font-weight:900;font-style:italic;
  font-size:clamp(2rem,7.5vw,4.6rem);line-height:1;color:var(--accent);
  white-space:nowrap;letter-spacing:-1px;
}
.loader-name-ghost{
  opacity:0;pointer-events:none;visibility:hidden;
}
.loader-name-mask{
  position:absolute;top:0;left:0;height:100%;width:0;overflow:hidden;
}
.loader-name-mask .loader-name{white-space:nowrap;}

.loader-char{
  position:absolute;top:50%;left:0;
  transform:translate(-50%,-62%);
  animation:botBob .5s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.bot-shadow{fill:rgba(0,0,0,.25);}
.bot-body{fill:var(--surface-2);stroke:var(--accent);stroke-width:2;}
.bot-panel{fill:#0a0e14;}
.bot-light{fill:var(--accent);animation:blink 1.1s step-end infinite;}
.bot-light:nth-child(6){animation-delay:.2s;}
.bot-head{fill:var(--surface-2);stroke:var(--accent);stroke-width:2;}
.bot-eye{fill:var(--accent);}
.bot-antenna{stroke:var(--accent);stroke-width:2;}
.bot-antenna-tip{fill:var(--accent-2);animation:blink .8s step-end infinite;}
.bot-leg rect,.bot-arm rect{fill:var(--surface-2);stroke:var(--border);stroke-width:1.5;}
.bot-leg-back{transform-origin:58px 108px;animation:legSwingBack .42s ease-in-out infinite;}
.bot-leg-front{transform-origin:81px 108px;animation:legSwingFront .42s ease-in-out infinite;}
.bot-arm-back{transform-origin:34px 62px;animation:armSwingFront .42s ease-in-out infinite;}
.bot-arm-front{transform-origin:106px 62px;animation:armSwingBack .42s ease-in-out infinite;}
@keyframes botBob{0%,100%{transform:translate(-50%,-62%);}50%{transform:translate(-50%,-68%);}}
@keyframes legSwingBack{0%,100%{transform:rotate(22deg);}50%{transform:rotate(-22deg);}}
@keyframes legSwingFront{0%,100%{transform:rotate(-22deg);}50%{transform:rotate(22deg);}}
@keyframes armSwingFront{0%,100%{transform:rotate(-26deg);}50%{transform:rotate(26deg);}}
@keyframes armSwingBack{0%,100%{transform:rotate(26deg);}50%{transform:rotate(-26deg);}}

.loader-tagline{
  font-family:'Space Grotesk',monospace;font-size:.8rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--text-dim);margin-top:22px;
  opacity:0;transition:opacity .5s ease;
}
.loader-tagline.visible{opacity:1;}

.loader-progress{
  width:180px;height:2px;background:rgba(255,255,255,.08);margin-top:20px;
  overflow:hidden;border-radius:2px;
}
.loader-progress span{
  display:block;height:100%;width:0%;background:var(--accent);
}

:root{
  --bg:#131924;
  --bg-alt:#161d2a;
  --surface:#1c2536;
  --surface-2:#232e44;
  --border:#324564;
  --text:#dbe3f0;
  --text-dim:#9fb1c9;
  --heading:#f6f9fc;
  --accent:#5eead4;
  --accent-2:#7c9cff;
  --font-mono:'Space Grotesk',ui-monospace,monospace;
  --font-body:'Inter',system-ui,sans-serif;
  --maxw:1100px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body:not(.loaded){overflow:hidden;height:100vh;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,0.04) 1px, transparent 1px);
  background-size:48px 48px;
}
/* NAV */
#navbar{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
  background:#0a0e14;
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
#navbar.scrolled{
  border-bottom-color:var(--border);
}
.nav-inner{
  width:100%;padding:18px 32px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--heading);letter-spacing:1px;}
.logo span{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:32px;font-family:var(--font-mono);font-size:.88rem;}
.nav-links a{color:var(--text-dim);transition:color .2s;position:relative;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{
  border:1px solid var(--accent);color:var(--accent) !important;
  padding:8px 16px;border-radius:6px;
}
.nav-cta:hover{background:rgba(94,234,212,0.1);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;z-index:110;}
.nav-toggle span{width:24px;height:2px;background:var(--heading);transition:.3s;}

.nav-right{display:flex;align-items:center;gap:24px;}
.lang-toggle{
  display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:6px;
  padding:2px;
}
.lang-btn{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:1px;padding:5px 10px;border-radius:4px;
  background:transparent;border:0;color:var(--text-dim);cursor:pointer;transition:.2s;
}
.lang-btn:hover{color:var(--heading);}
.lang-btn.active{background:var(--accent);color:#06121a;}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  width:100%;position:relative;z-index:2;
}
.hero-inner{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 24px;}
.hero-inner > *{max-width:720px;}
.hero-eyebrow{
  font-family:var(--font-mono);color:var(--accent);font-size:1rem;margin-bottom:16px;
}
.hero h1{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(2.4rem,7vw,4.6rem);
  color:var(--heading);line-height:1.05;margin-bottom:8px;
}
.hero-role{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(1.4rem,4vw,2.6rem);color:var(--text-dim);margin-bottom:24px;min-height:1.3em;
}
.cursor-blink{color:var(--accent);animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.hero-desc{max-width:560px;color:var(--text-dim);font-size:1.05rem;margin-bottom:36px;}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.hero-socials{display:flex;gap:24px;font-family:var(--font-mono);font-size:.85rem;}
.hero-socials a{color:var(--text-dim);border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;}
.hero-socials a:hover{color:var(--accent);border-color:var(--accent);}

.btn{
  display:inline-block;padding:14px 28px;border-radius:6px;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#06121a;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(94,234,212,0.4);}
.btn-outline{border:1px solid var(--accent);color:var(--accent);}
.btn-outline:hover{background:rgba(94,234,212,0.08);transform:translateY(-3px);}
.btn.small{padding:10px 20px;font-size:.82rem;}
.btn.large{padding:18px 40px;font-size:1rem;}

/* SECTIONS */
.section{position:relative;z-index:2;padding:clamp(64px,8vw,96px) 0;}
.section.alt{background:var(--bg);}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section-title{
  font-family:var(--font-mono);font-size:clamp(1.6rem,4vw,2.2rem);
  color:var(--heading);margin-bottom:48px;display:flex;align-items:baseline;gap:12px;
}
.section-num{color:var(--accent);font-size:1.1rem;}

.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;}
.about-photo{
  width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;margin-bottom:16px;
  border:1px solid var(--border);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-text p{color:var(--text-dim);margin-bottom:18px;}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.skill-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;
  transition:transform .25s, border-color .25s;
}
.skill-card:hover{transform:translateY(-6px);border-color:var(--accent);}
.skill-card h3{font-family:var(--font-mono);color:var(--heading);font-size:1rem;margin-bottom:16px;}

/* ===== ROADMAP WAVE (About page skills) ===== */
.roadmap-wave{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  width:100%;margin:56px 0 24px;padding:0 32px;box-sizing:border-box;
}
.roadmap-wave-line{
  position:absolute;top:34px;left:0;width:100%;height:72px;z-index:0;pointer-events:none;
}
.roadmap-wave-line path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:7 9;opacity:.45;}
.roadmap-stop{position:relative;z-index:1;flex:1;text-align:center;padding:0 14px;max-width:220px;margin:0 auto;}
.roadmap-stop-up{margin-top:0;}
.roadmap-stop-down{margin-top:70px;}
.roadmap-node{
  width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 14px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
}
.roadmap-stop h2{font-family:var(--font-mono);color:var(--heading);font-size:.88rem;margin-bottom:6px;font-weight:600;}
.roadmap-stop p{color:var(--text-dim);font-size:.78rem;line-height:1.5;}
@media (max-width:720px){
  .roadmap-wave{flex-direction:column;gap:36px;padding:0 8px;}
  .roadmap-wave-line{display:none;}
  .roadmap-stop-up,.roadmap-stop-down{margin-top:0;}
  .roadmap-stop{padding:0 8px;}
  .roadmap-stop:not(:last-child)::after{
    content:'';position:absolute;left:50%;bottom:-24px;width:2px;height:24px;
    background:repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 8px);
    transform:translateX(-50%);opacity:.5;
  }
}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.tag-list li{
  font-size:.8rem;color:var(--text-dim);background:var(--surface-2);
  border:1px solid var(--border);padding:5px 12px;border-radius:20px;
}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.project-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:28px;display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.project-card:hover{transform:translateY(-8px);border-color:var(--accent-2);box-shadow:0 20px 40px -20px rgba(124,156,255,.35);}
.project-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.project-icon{
  width:42px;height:42px;border-radius:8px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--font-mono);font-weight:700;
}
.project-links{display:flex;gap:14px;}
.project-links a{color:var(--text-dim);font-size:.8rem;font-family:var(--font-mono);border-bottom:1px solid transparent;}
.project-links a:hover{color:var(--accent);border-color:var(--accent);}
.project-card h2{font-family:var(--font-mono);color:var(--heading);font-size:1.15rem;font-weight:600;margin-bottom:10px;}
.project-card p{color:var(--text-dim);font-size:.92rem;margin-bottom:18px;flex-grow:1;}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);}
.project-tags span{font-size:.72rem;color:var(--accent-2);}

/* TIMELINE */
.timeline{position:relative;padding-left:32px;border-left:2px solid var(--border);}
.timeline-item{position:relative;padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:'';position:absolute;left:-38px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(94,234,212,.15);
}
.timeline-date{font-family:var(--font-mono);color:var(--accent);font-size:.82rem;margin-bottom:6px;}
.timeline-item h2{color:var(--heading);font-size:1.1rem;font-weight:600;margin-bottom:4px;}
.timeline-org{color:var(--text-dim);font-size:.88rem;margin-bottom:10px;font-style:italic;}
.timeline-item ul:not(.tag-list){color:var(--text-dim);font-size:.92rem;}
.timeline-item ul:not(.tag-list) li{margin-bottom:6px;padding-left:18px;position:relative;}
.timeline-item ul:not(.tag-list) li::before{content:'▹';position:absolute;left:0;color:var(--accent);}

/* CERTIFICATIONS */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.cert-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.cert-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.cert-card-badge{align-items:stretch;}
.cert-badge{width:100%;height:170px;object-fit:cover;object-position:top center;border-radius:0;background:#fff;flex-shrink:0;display:block;}
.cert-card > div{padding:16px 18px;}
.cert-name{color:var(--heading);font-size:.92rem;font-weight:500;}
.cert-issuer{color:var(--text-dim);font-size:.78rem;font-family:var(--font-mono);margin-top:2px;}
.cert-date{color:var(--accent);font-family:var(--font-mono);font-size:.78rem;white-space:nowrap;}

/* CONTACT */
.contact-section{text-align:center;}
.contact-inner{max-width:640px;}
.contact-title{
  font-family:var(--font-mono);font-size:clamp(2rem,6vw,3.2rem);color:var(--heading);margin-bottom:24px;
}
.contact-desc{color:var(--text-dim);margin-bottom:40px;}

/* FOOTER */
/* footer styles live in the SITE FOOTER block at the end of this file */

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(24px);animation:revealUp .8s ease forwards;}
.reveal:nth-child(1){animation-delay:.05s;}
.reveal:nth-child(2){animation-delay:.15s;}
.reveal:nth-child(3){animation-delay:.25s;}
.reveal:nth-child(4){animation-delay:.35s;}
.reveal:nth-child(5){animation-delay:.45s;}
@keyframes revealUp{to{opacity:1;transform:translateY(0);}}

.fade-in-section{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;}
.fade-in-section.visible{opacity:1;transform:translateY(0);}

/* ===== NAV ACTIVE STATE ===== */
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);
}
.nav-links li{position:relative;}

/* ===== PAGE HERO (subpage header) ===== */
.page-hero{
  padding:150px 24px 36px;max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;
}
/* The section immediately after a subpage hero should sit close to it, not use the
   full inter-section rhythm meant for spacing distinct blocks further down the page. */
.page-hero + main > .section:first-child,
.page-hero-matrix + main > .section:first-child{
  padding-top:44px;
}
.page-hero-num{
  font-family:var(--font-mono);color:var(--accent);font-size:1rem;margin-bottom:10px;display:block;
}
.page-hero h1{
  font-family:var(--font-mono);font-weight:700;color:var(--heading);
  font-size:clamp(2rem,6vw,3.4rem);margin-bottom:10px;
}
.page-hero p{color:var(--text-dim);font-size:1.05rem;max-width:560px;}
.page-hero-count{
  font-family:var(--font-mono);color:var(--text-dim);font-size:.85rem;margin-top:18px;
}
.page-hero-count strong{color:var(--accent);}

/* Matrix digital-rain background, full-bleed behind the Projects page hero */
.page-hero-matrix{position:relative;overflow:hidden;width:100%;}
.page-hero-matrix .page-hero{position:relative;z-index:2;}
.matrix-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.75;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}
.page-hero-matrix::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(19,25,36,.22) 0%, rgba(19,25,36,.4) 55%, var(--bg) 100%);
}

.page-hero-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
.page-hero-flex .page-hero-text{flex:1;min-width:280px;}
.page-hero-photo{
  width:220px;height:280px;border-radius:16px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--border);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.page-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}

.about-hero-bg{position:relative;overflow:hidden;border-radius:0 0 20px 20px;}
.about-hero-bg-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.about-hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(19,25,36,.45) 0%, rgba(19,25,36,.8) 75%, var(--bg) 100%);
}

.journey-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 8px;max-width:600px;}
.journey-photos figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.journey-photos img{width:100%;height:220px;object-fit:cover;display:block;}
.journey-photos figcaption{
  font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim);padding:8px 10px;background:var(--surface);
}

/* ===== STATS ROW ===== */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:48px 0;}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:24px 20px;text-align:center;
}
.stat-num{
  font-family:var(--font-mono);font-weight:700;font-size:2.2rem;color:var(--accent);display:block;
}
.stat-label{color:var(--text-dim);font-size:.82rem;margin-top:6px;display:block;}

/* ===== MARQUEE =====
   width:max-content keeps the two duplicated halves from ever being squeezed or
   reflowed by their parent at any viewport size, and translateZ(0) forces GPU
   compositing so the scroll stays smooth (no stutter/seam) on mobile Safari too. */
.marquee{
  overflow:hidden;white-space:nowrap;padding:10px 0;width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track{
  display:inline-flex;align-items:center;gap:14px;width:max-content;
  animation:marqueeScroll 30s linear infinite;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
}
.marquee.reverse{margin-top:14px;}
.marquee.reverse .marquee-track{animation-direction:reverse;}
.tech-pill{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:10px 22px;font-family:var(--font-mono);font-size:.9rem;color:var(--text-dim);
  white-space:nowrap;
}
.tech-pill .tech-emoji{font-size:1.05rem;line-height:1;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:720px){
  .tech-pill{padding:8px 16px;font-size:.82rem;gap:7px;}
  .tech-pill .tech-emoji{font-size:.95rem;}
  .marquee-track{gap:10px;}
}

/* ===== FILTER TABS ===== */
.filter-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-tab{
  font-family:var(--font-mono);font-size:.82rem;padding:8px 18px;border-radius:20px;
  border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:transparent;transition:.2s;
}
.filter-tab:hover{border-color:var(--accent);color:var(--heading);}
.filter-tab.active{background:var(--accent);border-color:var(--accent);color:#06121a;}
.project-card[hidden],.cert-card[hidden]{display:none;}

/* ===== PROJECT LINKS EXTRA ===== */
.project-links a.disabled{opacity:.35;pointer-events:none;}

/* ===== CONTACT PAGE ===== */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px;}
.contact-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;
  display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s;
}
.contact-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.contact-card-label{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:1px;}
.contact-card-value{color:var(--heading);font-size:1rem;font-weight:500;word-break:break-word;}
.contact-availability{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.85rem;
  color:var(--accent);border:1px solid var(--accent);padding:8px 16px;border-radius:20px;margin-bottom:24px;
}
.contact-availability::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.4s ease-in-out infinite;}

/* ===== EDUCATION PAGE ===== */
.edu-meta{color:var(--text-dim);font-size:.82rem;font-family:var(--font-mono);margin-bottom:16px;margin-top:6px;}

/* RESPONSIVE */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .journey-grid{flex-direction:column;}
  .journey-image-wrap{width:100%;}
  .journey-image-wrap img{width:100%;height:340px;}
  .journey-card{width:100%;margin-left:0;margin-top:-60px;max-width:90%;}
  .numbers-grid{grid-template-columns:repeat(2,1fr);}
  .cert-columns{height:520px;gap:14px;}
}
@media (max-width:720px){
  .page-hero-flex{flex-direction:column-reverse;align-items:flex-start;}
  .page-hero-photo{width:160px;height:200px;}
  .about-hero-full{height:auto;min-height:520px;padding:120px 0 40px;}
  .about-hero-full .about-hero-content{padding:0 24px;}
  .about-hero-full .about-hero-overlay{background:linear-gradient(180deg, rgba(19,25,36,.45) 0%, rgba(19,25,36,.85) 70%, var(--bg) 100%);}
  .about-hero-full .about-hero-bg-img{object-position:78% 28%;}
  .cta-hero-section{padding:48px 16px;}
  .cta-hero-card{padding:28px 20px;border-radius:16px;}
  .cta-hero-card h2{font-size:1.35rem;margin-bottom:14px;}
  .cta-hero-card .contact-desc{font-size:.85rem;line-height:1.6;margin-bottom:20px;}
  .cta-hero-card .hero-buttons{margin-bottom:0;gap:10px;align-items:center;}
  .cta-hero-card .btn.large{padding:12px 24px;font-size:.88rem;}
  .numbers-grid{grid-template-columns:1fr 1fr;}
  .nav-inner{justify-content:flex-start;gap:14px;}
  .logo{margin-right:auto;}
  .nav-toggle{display:flex;order:3;}
  .nav-right{order:2;gap:14px;}
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);
    background:var(--surface);flex-direction:column;justify-content:center;align-items:flex-start;
    padding:40px;gap:28px;transform:translateX(100%);transition:transform .35s ease;
    border-left:1px solid var(--border);
  }
  .nav-links.open{transform:translateX(0);}
  .skills-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .hero-buttons{flex-direction:column;align-items:flex-start;}
}


/* ===================================================================
   DESIGN PASS (Oct 2026): icons, footer, motion, accessibility
   =================================================================== */

html{overflow-x:clip;}

/* Inline SVG icons (Phosphor, regular weight) */
.i{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;}
.btn .i{width:1.15em;height:1.15em;}
.float-icon .i{width:22px;height:22px;color:var(--accent);}
.polaroid-photo .i{width:42%;height:42%;color:var(--accent);}
.roadmap-node .i{width:24px;height:24px;color:var(--accent);}
.number-card-icon .i{width:34px;height:34px;color:var(--accent);margin:0 auto;display:block;}

/* Keyboard focus, visible everywhere */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* Former inline styles */
.section-center{text-align:center;}
.section-center .section-title{justify-content:center;}
.section-lede{color:var(--text-dim);max-width:60ch;margin:0 auto 32px;}
.cert-cta{margin-bottom:64px;}
.hero-buttons-center{justify-content:center;}
.notfound-hero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;}
.notfound-code{font-size:clamp(3rem,10vw,6rem);}
.notfound-btn{margin-top:24px;align-self:flex-start;}
.contact-preferred{color:var(--accent);}
.contact-card-wide{grid-column:1/-1;}
.contact-note{color:var(--text-dim);max-width:62ch;margin-top:36px;}
.contact-say-hello{margin-top:20px;}
.cert-tags{margin-top:8px;}
.project-category{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.project-private{color:var(--text-dim);font-size:.75rem;}
.tag-list-spaced{margin-top:10px;}
.section-title-gap{margin-top:56px;}

/* Comfortable reading width for long bullet copy */
.timeline-item ul:not(.tag-list) li,
.timeline-item p{max-width:75ch;}

/* Tech pills are text-only now */
.tech-pill{gap:0;}

/* Reading progress bar under the nav (added by script when Motion is available) */
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}

/* With Motion running, JS drives the entrance animations */
.has-motion .fade-in-section{transition:none;}
.has-motion .hero .reveal{animation:none;opacity:0;transform:none;}
.has-motion .hero .reveal.revealed{opacity:1;}
.has-motion .spring-hover:hover{transform:none;}

/* ===== SITE FOOTER ===== */
.site-footer{
  position:relative;z-index:2;border-top:1px solid var(--border);
  background:#161c27;
}
.footer-wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);padding:clamp(44px,5vw,64px) 0 clamp(36px,4vw,52px);
}
.footer-brand .logo{display:inline-block;font-size:1.35rem;margin-bottom:14px;}
.footer-tagline{color:var(--text-dim);font-size:.92rem;line-height:1.6;max-width:44ch;margin-bottom:14px;}
.footer-status{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:.85rem;color:var(--text-dim);}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:pulseDot 1.8s ease infinite;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.footer-social a:hover{color:var(--accent);border-color:var(--accent);background:rgba(94,234,212,.06);}
.footer-social .i{width:18px;height:18px;}
.footer-heading{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--heading);margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.footer-col a{
  display:inline;color:var(--text-dim);font-size:.9rem;line-height:1.4;
  transition:color .2s ease;
}
.footer-col a:hover{color:var(--heading);}
.footer-col .i-ext{width:12px;height:12px;margin-left:5px;vertical-align:-1px;opacity:.55;transition:transform .2s ease,opacity .2s ease;}
.footer-col a:hover .i-ext{opacity:1;transform:translate(2px,-2px);}
.footer-bottom{border-top:1px solid rgba(50,69,100,.55);}
.footer-bottom-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;padding-bottom:22px;font-size:.82rem;color:var(--text-dim);
}
.footer-top-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);transition:color .2s ease;}
.footer-top-link:hover{color:var(--accent);}
.footer-top-link .i{width:15px;height:15px;transition:transform .25s ease;}
.footer-top-link:hover .i{transform:translateY(-3px);}

@media (max-width:900px){
  .footer-wrap{padding:0 24px;}
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;}
}

/* ===== Reduced motion: everything readable, nothing loops ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .marquee-track,.diag-track,.cert-col{animation:none !important;transform:none !important;}
  .reveal,.fade-in-section{opacity:1 !important;transform:none !important;}
  .status-dot,.pulse-dot,.cursor-blink{animation:none !important;}
}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* Credential verification link on certificate cards */
.cert-verify{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
  border-bottom:1px solid rgba(94,234,212,.35);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.cert-verify:hover{color:var(--heading);border-color:var(--accent);}
.cert-verify .i{width:12px;height:12px;transition:transform .2s ease;}
.cert-verify:hover .i{transform:translate(2px,-2px);}

/* Links under an experience entry */
.timeline-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:4px;}

/* Brand logos in the tech stack marquee (Simple Icons, CC0) */
.tech-pill{display:inline-flex;align-items:center;gap:10px;}
.tech-logo{width:18px;height:18px;flex:none;display:block;}
.tech-pill:hover .tech-logo{transform:scale(1.12);}
.tech-logo{transition:transform .2s ease;}
@media (max-width:720px){.tech-pill{gap:8px;}.tech-logo{width:16px;height:16px;}}

.number-link{color:var(--accent);border-bottom:1px solid rgba(94,234,212,.35);}
.number-link:hover{color:var(--heading);border-color:var(--accent);}