:root{
  --bg-deep:#150E2B;
  --bg-panel:#1F1640;
  --bg-panel-2:#271B4D;
  --coral:#FF6B6B;
  --amber:#FFC857;
  --cyan:#4CC9F0;
  --lilac:#C9B8FF;
  --paper:#F7F4FF;
  --paper-dim:#B8AEDA;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-deep);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  line-height:1.5;
}
h1,h2,h3,.display{
  font-family:'Bricolage Grotesque',sans-serif;
  letter-spacing:-0.02em;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
}
a{color:inherit;}
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 32px;
}
section{
  position:relative;
  padding:110px 0;
}

/* ---------- background texture ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size:22px 22px;
  opacity:0.5;
}

/* ---------- blob shapes ---------- */
.blob{
  border-radius:62% 38% 55% 45% / 45% 55% 45% 55%;
  animation:morph 14s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:62% 38% 55% 45% / 45% 55% 45% 55%;}
  33%{border-radius:45% 55% 40% 60% / 60% 40% 60% 40%;}
  66%{border-radius:55% 45% 65% 35% / 35% 65% 35% 65%;}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-16px);}
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  background:rgba(21,14,43,0.35);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.3s ease;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
}
.nav-logo img{height:26px; width:auto; display:block;}
.nav-logo span{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.82rem;
  letter-spacing:0.08em;
  color:var(--paper-dim);
}
.nav-links{
  display:flex; gap:26px;
  list-style:none;
}
.nav-links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover{color:var(--paper); border-color:var(--amber);}

/* ---------- nav dropdown ---------- */
.has-dropdown{position:relative;}
.dropdown-toggle{display:inline-flex; align-items:center; gap:4px;}
.dropdown-toggle .caret{font-size:0.6rem; transition:transform 0.2s ease;}
.has-dropdown:hover .dropdown-toggle .caret,
.has-dropdown:focus-within .dropdown-toggle .caret{transform:rotate(180deg);}
.dropdown-menu{
  list-style:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:14px;
  min-width:240px;
  padding:8px;
  background:rgba(21,14,43,0.96);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu li + li{margin-top:2px;}
.dropdown-menu a{
  display:block;
  padding:9px 12px;
  border-bottom:none !important;
  border-radius:7px;
  white-space:nowrap;
}
.dropdown-menu a:hover{background:rgba(255,255,255,0.07);}
.dropdown-link-disabled{
  display:block;
  padding:9px 12px;
  color:var(--paper-dim);
  opacity:0.55;
  cursor:not-allowed;
  white-space:nowrap;
}
.dropdown-link-disabled .wip-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.04em;
  margin-left:2px;
}

/* ================= SCROLL-DRIVEN SECTION FOCUS ================= */
/* Progressive enhancement: only hide sections once JS confirms it's driving the show */
.story-section{
  transition:opacity 0.9s cubic-bezier(.22,.9,.32,1), transform 0.9s cubic-bezier(.22,.9,.32,1);
  will-change:opacity, transform;
}
.js .story-section.out-focus[data-anim="fade"]{opacity:0;}
.js .story-section.out-focus[data-anim="zoom-in"]{opacity:0; transform:scale(0.86);}
.js .story-section.out-focus[data-anim="zoom-out"]{opacity:0; transform:scale(1.1);}
.js .story-section.out-focus[data-anim="fly-left"]{opacity:0; transform:translateX(-90px);}
.js .story-section.out-focus[data-anim="fly-right"]{opacity:0; transform:translateX(90px);}
.js .story-section.in-focus{opacity:1; transform:none;}

/* ---------- element-level reveal (staggered, inside sections) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.22,.9,.32,1), transform 0.7s cubic-bezier(.22,.9,.32,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .blob{animation:none;}
  .story-section, .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:90px;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:40px;
  align-items:center;
  z-index:2;
}
.hero-blob-a{
  position:absolute; top:-160px; right:-120px;
  width:520px; height:520px;
  background:linear-gradient(135deg, var(--coral), var(--amber));
  filter:blur(2px);
  opacity:0.9;
  z-index:0;
  animation:morph 14s ease-in-out infinite, amoeba-drift-a 24s ease-in-out infinite;
}
.hero-blob-b{
  position:absolute; bottom:-170px; right:20px;
  width:340px; height:340px;
  background:linear-gradient(160deg, var(--cyan), var(--lilac));
  filter:blur(1px);
  opacity:0.45;
  z-index:0;
  animation:morph 14s ease-in-out infinite, amoeba-drift-b 19s ease-in-out infinite;
  animation-delay:-6s, -3s;
}
@keyframes amoeba-drift-a{
  0%,100%{transform:translate(0,0) scale(1);}
  30%{transform:translate(-26px, 22px) scale(1.05);}
  60%{transform:translate(14px, -18px) scale(0.96);}
  85%{transform:translate(-10px, -8px) scale(1.02);}
}
@keyframes amoeba-drift-b{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(24px, -16px) scale(0.95);}
  55%{transform:translate(-18px, 20px) scale(1.06);}
  80%{transform:translate(10px, 10px) scale(0.98);}
}
@media (prefers-reduced-motion: reduce){
  .hero-blob-a, .hero-blob-b{animation:none;}
}
.hero-tag{
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight:800;
  line-height:1.02;
  color:var(--paper);
}
.hero h1 span{
  display:block;
  background:linear-gradient(100deg, var(--coral), var(--amber) 60%, var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lede{
  margin-top:26px;
  font-size:1.12rem;
  color:var(--paper-dim);
  max-width:46ch;
}
.hero-contacts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}
.chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.82rem;
  padding:9px 16px;
  border:1px solid rgba(247,244,255,0.18);
  border-radius:999px;
  color:var(--paper-dim);
  background:rgba(247,244,255,0.03);
}
.hero-figure{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  animation:float 7s ease-in-out infinite;
}
.photo-blob{
  position:relative;
  width:clamp(220px, 78vw, 340px);
  aspect-ratio:340 / 400;
}
.photo-blob .ring{
  position:absolute; inset:-14px;
  background:linear-gradient(135deg,var(--coral),var(--amber),var(--cyan));
  border-radius:62% 38% 55% 45% / 45% 55% 45% 55%;
  z-index:0;
}
.photo-blob img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:62% 38% 55% 45% / 45% 55% 45% 55%;
}
.badge-shape{
  position:absolute;
  left:clamp(-24px, -8vw, -38px); bottom:-24px;
  z-index:2;
  width:clamp(108px, 30vw, 150px);
  height:clamp(108px, 30vw, 150px);
  background:radial-gradient(circle at 32% 28%, var(--bg-panel-2), var(--bg-deep) 72%);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.badge-shape .num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.5rem, 5vw, 2.1rem);
  font-weight:800;
  background:linear-gradient(120deg,var(--amber),var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.badge-shape .cap{
  margin-top:6px;
  font-size:clamp(0.58rem, 1.8vw, 0.68rem);
  color:var(--paper-dim);
  max-width:16ch;
}

/* ================= CURRENT PRODUCT INITIATIVES ================= */
.initiative-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.initiative-card{
  padding:30px 26px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:28px 8px 28px 8px;
  transition:transform 0.3s ease, border-color 0.3s ease;
}
.initiative-card:hover{transform:translateY(-6px); border-color:rgba(255,255,255,0.18);}
.initiative-tag{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:10px;
}
.initiative-card h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.3rem;
  margin-bottom:10px;
  color:var(--paper);
}
.initiative-card p{color:var(--paper-dim); font-size:0.94rem; line-height:1.55;}
.initiative-card.has-demo{position:relative; padding-bottom:56px;}
.demo-btn{
  position:absolute;
  right:22px;
  bottom:22px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--bg-panel);
  background:linear-gradient(120deg, var(--amber), var(--coral));
  border-radius:20px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.demo-btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,200,87,0.35); border-color:transparent;}
@media (max-width:820px){
  .initiative-grid{grid-template-columns:1fr;}
}

/* ---------- neon frame: links the WIP tool's outputs to the initiative that built them ---------- */
.glow-wrap{position:relative; display:block; height:100%; transition:transform 0.35s ease;}
.glow-wrap > .highlight-card,
.glow-wrap > .initiative-card{height:100%;}
.glow-wrap:hover{transform:translateY(-8px) scale(1.015);}
/* the card's own hover-lift is cancelled here on purpose: the wrap above
   now carries the lift so the card and its neon frame move as one rigid
   unit and can never drift apart, no matter how the card is sized. */
.glow-wrap .highlight-card.pulse-connect:hover,
.glow-wrap .initiative-card.pulse-connect:hover{
  transform:none;
}
.neon-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:6;
}
.neon-frame .neon-base,
.neon-frame .neon-comet{fill:none; vector-effect:non-scaling-stroke;}
.neon-frame .neon-base{
  stroke:rgba(255,182,77,0.32);
  stroke-width:1.5;
  transition:stroke 0.3s ease;
}
.neon-frame .neon-comet{
  stroke:var(--amber);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:130 870;
  filter:
    drop-shadow(0 0 3px rgba(255,241,210,0.95))
    drop-shadow(0 0 8px rgba(255,182,77,0.9))
    drop-shadow(0 0 16px rgba(255,182,77,0.55));
  animation:neon-travel 3.4s linear infinite;
  transition:stroke-width 0.3s ease, filter 0.3s ease;
}
@keyframes neon-travel{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:-1000;}
}
/* react the same way the card itself reacts on hover: brighter, thicker, faster */
.glow-wrap:hover .neon-base{
  stroke:rgba(255,205,120,0.55);
}
.glow-wrap:hover .neon-comet{
  stroke-width:3.5;
  stroke-dasharray:180 820;
  animation-duration:1.4s;
  filter:
    drop-shadow(0 0 4px rgba(255,241,210,1))
    drop-shadow(0 0 12px rgba(255,182,77,1))
    drop-shadow(0 0 24px rgba(255,182,77,0.7));
}
@media (prefers-reduced-motion: reduce){
  .neon-frame .neon-comet{animation:none;}
  .glow-wrap:hover .neon-comet{animation:none;}
}

.highlight-card.velocity-card{border-color:rgba(255,200,87,0.28);}
.velocity-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:3px 9px;
  border-radius:20px;
  background:rgba(15,10,30,0.72);
  border:1px solid rgba(255,200,87,0.55);
  color:var(--amber);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  backdrop-filter:blur(3px);
}

/* ================= HIGHLIGHTED WORK ================= */
.highlight-group + .highlight-group{margin-top:52px;}
.highlight-sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(143px, 1fr));
  gap:22px;
}
.highlight-card{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
  background:var(--bg-panel);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  overflow:hidden;
  transition:transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.highlight-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(255,255,255,0.22);
  box-shadow:0 22px 40px -18px rgba(0,0,0,0.55);
}
.highlight-thumb{
  position:relative;
  aspect-ratio:16/10.3;
  overflow:hidden;
  background:var(--bg-panel-2);
}
.highlight-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  transition:transform 0.6s ease;
}
.highlight-card:hover .highlight-thumb img{transform:scale(1.08);}
.highlight-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,14,43,0) 55%, rgba(21,14,43,0.92) 100%);
  opacity:0;
  transition:opacity 0.35s ease;
}
.highlight-card:hover .highlight-thumb::after{opacity:1;}
.highlight-thumb::before{
  content:"View \2197";
  position:absolute;
  right:14px; bottom:14px;
  z-index:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.06em;
  color:var(--bg-deep);
  background:var(--amber);
  padding:6px 12px;
  border-radius:999px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.highlight-card:hover .highlight-thumb::before{opacity:1; transform:translateY(0);}
.highlight-meta{
  padding:16px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.highlight-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:1.05rem;
}
.highlight-tag{
  font-size:0.85rem;
  color:var(--paper-dim);
}

/* ================= VIDEO SHOWREEL (starry, full-width) ================= */
.showreel{
  position:relative;
  padding:100px 0 0;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, #241a48 0%, var(--bg-deep) 65%);
}
.stars-layer{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.star{
  position:absolute;
  border-radius:50%;
  background:var(--paper);
  opacity:0.8;
  animation:twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.star.big{box-shadow:0 0 6px 1px rgba(255,255,255,0.6);}
@keyframes twinkle{
  0%,100%{opacity:0.15; transform:scale(0.8);}
  50%{opacity:1; transform:scale(1.15);}
}
.shooting-star{
  position:absolute;
  width:2px; height:2px;
  background:var(--paper);
  border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,255,255,0.8);
  opacity:0;
  animation:shoot 7s linear infinite;
}
@keyframes shoot{
  0%{opacity:0; transform:translate(0,0);}
  2%{opacity:1;}
  12%{opacity:0; transform:translate(340px,170px);}
  100%{opacity:0;}
}
.showreel-inner{
  position:relative;
  z-index:1;
  padding-bottom:0;
}
.showreel-inner .sec-head{margin-bottom:36px;}
.showreel-video-wrap{
  position:relative;
  width:100%;
  line-height:0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:#000;
}
.showreel-video-wrap video{
  display:block;
  width:100%;
  height:auto;
  max-height:88vh;
  object-fit:cover;
  background:#000;
}
@media (max-width:820px){
  .showreel{padding-top:70px;}
  .showreel-video-wrap video{max-height:60vh;}
}

/* ================= GALLERY LIGHTBOX ================= */
.gallery-item{cursor:zoom-in;}
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  height:100vh;
  height:100dvh;
  padding:40px;
  background:rgba(10,6,24,0.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
}
.lightbox-content{
  position:relative;
  max-width:min(1100px, 92vw);
  max-height:88vh;
  max-height:88dvh;
  transform:scale(0.92);
  transition:transform 0.3s cubic-bezier(.22,.9,.32,1);
}
.lightbox.open .lightbox-content{transform:scale(1);}
.lightbox-content img{
  display:block;
  max-width:100%;
  max-height:88vh;
  max-height:88dvh;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-caption{
  margin-top:14px;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  color:var(--paper-dim);
}
.lightbox-close{
  position:absolute;
  top:-18px; right:-18px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:var(--bg-panel-2);
  color:var(--paper);
  font-size:1.1rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover{background:var(--coral); transform:scale(1.08);}
.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px;
  margin-bottom:48px;
}
.sec-head h2{
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-weight:700;
}
.sec-head .eyebrow{white-space:nowrap;}
.rule{
  flex:1;
  min-width:24px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.25), transparent);
}
@media (max-width:820px){
  .sec-head h2{flex:1 1 100%; font-size:clamp(1.5rem, 6vw, 2rem);}
}

/* ================= IMPACT STATS ================= */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.stat-card{
  position:relative;
  padding:30px 22px;
  background:var(--bg-panel);
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  transition:transform 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover{transform:translateY(-6px); border-color:rgba(255,255,255,0.18);}
.stat-card:nth-child(1){border-radius:38px 12px 38px 12px;}
.stat-card:nth-child(2){border-radius:12px 38px 12px 38px;}
.stat-card:nth-child(3){border-radius:38px 12px 38px 12px;}
.stat-card:nth-child(4){border-radius:12px 38px 12px 38px;}
.stat-card::before{
  content:"";
  position:absolute; width:90px; height:90px; border-radius:50%;
  top:-40px; right:-40px;
  background:var(--dot,var(--coral));
  opacity:0.25;
  filter:blur(6px);
}
.stat-card:nth-child(1){--dot:var(--coral);}
.stat-card:nth-child(2){--dot:var(--amber);}
.stat-card:nth-child(3){--dot:var(--cyan);}
.stat-card:nth-child(4){--dot:var(--lilac);}
.stat-card .val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.5rem, 6vw, 2.3rem);
  font-weight:800;
  white-space:nowrap;
}
.stat-card .lab{
  margin-top:6px;
  font-size:0.88rem;
  color:var(--paper-dim);
}

/* ================= SUMMARY ================= */
.summary-block{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
.summary-block p{
  font-size:1.08rem;
  color:var(--paper-dim);
}
.summary-block p + p{margin-top:16px;}
.pull{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.5rem;
  font-weight:600;
  line-height:1.35;
  color:var(--paper);
  border-left:3px solid var(--amber);
  padding-left:22px;
}

/* ================= SKILLS ================= */
.skill-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.skill-pill{
  padding:12px 20px;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:500;
  border:1px solid transparent;
  background:var(--bg-panel);
  transition:transform 0.25s ease, background 0.25s ease;
}
.skill-pill:hover{transform:translateY(-3px); background:var(--bg-panel-2);}
.skill-pill.c1{border-color:rgba(255,107,107,0.5); color:var(--paper);}
.skill-pill.c2{border-color:rgba(255,200,87,0.5); color:var(--paper);}
.skill-pill.c3{border-color:rgba(76,201,240,0.5); color:var(--paper);}

/* ================= TOOLS ================= */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 40px;
}
.tool-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.tool-name{font-size:0.98rem;}
.tool-level{
  display:flex;
  gap:6px;
  align-items:center;
}
.lvl-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.14);
}
.lvl-dot.on{background:var(--cyan);}
.lvl-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  color:var(--paper-dim);
  margin-left:8px;
  width:96px;
  text-align:right;
}

/* ================= GALLERY / WORK CAROUSEL ================= */
.gallery-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}
.gallery-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 26px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--bg-panel-2) transparent;
}
.gallery-track::-webkit-scrollbar{height:8px;}
.gallery-track::-webkit-scrollbar-track{background:transparent;}
.gallery-track::-webkit-scrollbar-thumb{background:var(--bg-panel-2); border-radius:4px;}
.gallery-item{
  position:relative;
  flex:0 0 auto;
  height:320px;
  width:260px; /* fallback before JS measures real aspect ratio */
  border-radius:20px;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--bg-panel);
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.6s ease, transform 0.6s ease;
  border:1px solid rgba(255,255,255,0.06);
}
.gallery-item.in{opacity:1; transform:scale(1);}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(10,6,24,0.85), transparent);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  line-height:1.4;
  color:var(--paper);
}
.gallery-nav{
  flex:0 0 auto;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.04);
  color:var(--paper);
  font-size:1.2rem;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
  display:flex; align-items:center; justify-content:center;
}
.gallery-nav:hover{background:var(--bg-panel-2); transform:scale(1.08);}
.gallery-nav:active{transform:scale(0.96);}
.gallery-hint{
  margin-top:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  color:var(--paper-dim);
  opacity:0.7;
}

/* ================= EXPERIENCE / RIVER TIMELINE ================= */
.timeline{
  position:relative;
  padding-left:70px;
}
.river-svg{
  position:absolute;
  left:0; top:0;
  width:70px; height:100%;
}
.tl-item{
  position:relative;
  padding-bottom:64px;
}
.tl-item:last-child{padding-bottom:0;}
.tl-node{
  position:absolute;
  left:-70px;
  top:2px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  font-weight:600;
  color:var(--bg-deep);
  transition:transform 0.3s ease;
}
.tl-node:hover{transform:scale(1.12);}
.tl-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;
  color:var(--amber);
  letter-spacing:0.04em;
}
.tl-item h3{
  font-size:1.3rem;
  margin-top:6px;
  font-weight:700;
}
.tl-item .org{
  color:var(--paper-dim);
  font-size:0.95rem;
  margin-top:2px;
}
.tl-item ul{
  margin-top:14px;
  padding-left:20px;
  color:var(--paper-dim);
  font-size:0.96rem;
}
.tl-item li + li{margin-top:8px;}
.tl-item.early .org, .tl-item.early p{color:var(--paper-dim);}

/* ================= ACHIEVEMENTS ================= */
.ach-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.ach-card{
  padding:28px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  border-radius:28px 8px 28px 8px;
  border:1px solid rgba(255,255,255,0.06);
  transition:transform 0.3s ease;
}
.ach-card:hover{transform:translateY(-5px) rotate(-0.4deg);}
.ach-card p{color:var(--paper-dim); font-size:0.98rem;}

/* ================= EDU / CERT ================= */
.edu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}
.edu-grid h3{
  font-size:1.05rem;
  color:var(--cyan);
  margin-bottom:18px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:500;
}
.edu-list li{
  list-style:none;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  font-size:0.98rem;
  color:var(--paper-dim);
}
.edu-list li strong{color:var(--paper); font-weight:600;}

/* ================= FOOTER ================= */
footer{
  padding:80px 0 60px;
  text-align:center;
  position:relative;
}
footer h2{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
}
footer .lede{
  color:var(--paper-dim);
  margin-top:14px;
}
.foot-links{
  margin-top:34px;
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}
.foot-links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.85rem;
  padding:12px 22px;
  border-radius:999px;
  background:linear-gradient(100deg,var(--coral),var(--amber));
  color:var(--bg-deep);
  font-weight:600;
  text-decoration:none;
}
.foot-links a.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:var(--paper-dim);
}
.foot-logo{
  margin-top:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  opacity:0.55;
}
.foot-logo img{height:20px; width:auto;}
.foot-logo span{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.1em;
  color:var(--paper-dim);
}

@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-figure{margin-top:56px; margin-bottom:24px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .summary-block{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}
  .ach-grid, .edu-grid{grid-template-columns:1fr;}
  .lvl-label{width:auto;}
  section{padding:70px 0;}
  .gallery-item{height:220px;}
  .gallery-nav{width:38px; height:38px; font-size:1rem;}
  .nav-links{display:none;}
  .hero-blob-a{width:340px; height:340px; top:-100px; right:-100px;}
  .hero-blob-b{width:220px; height:220px; bottom:-120px; right:-40px;}
  .timeline{padding-left:52px;}
  .river-svg{width:52px;}
  .tl-node{left:-52px; width:36px; height:36px; font-size:0.64rem;}
}

@media (max-width:480px){
  .nav{padding:14px 18px;}
  .nav-logo span{font-size:0.68rem; letter-spacing:0.04em;}
  .wrap{padding:0 20px;}
  .hero-contacts{gap:8px;}
  .chip{font-size:0.72rem; padding:7px 12px;}
  .gallery-nav{display:none;}
  .gallery-shell{gap:0;}
  .stat-grid{grid-template-columns:1fr;}
  .lightbox{padding:20px;}
  .lightbox-close{top:-14px; right:-6px; width:34px; height:34px;}
}

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