/* ============================================================
   THE INFERENCE ENGINE — Varamal Devraj Kheraj
   ============================================================ */

:root{
  --ink:#08080A;
  --ink2:#0E0E12;
  --ink3:#15151B;
  --bone:#EDEAE3;
  --dim:rgba(237,234,227,.52);
  --dim2:rgba(237,234,227,.30);
  --line:rgba(237,234,227,.11);
  --acid:#C9F24E;
  --ember:#FF5C38;

  --display:'Instrument Serif',ui-serif,Georgia,serif;
  --ui:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --pad:clamp(20px,5vw,84px);
  --r:14px;
  --e:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background: var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acid);color:#0A0A0A}

.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.dim{color:var(--dim)}
.acid{color:var(--acid)}
.serif{font-family:var(--display);font-style:italic;font-weight:400}

.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--acid);color:#000;padding:12px 18px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-2%,1%)}100%{transform:translate(1%,-2%)}}

/* ---------- preloader ---------- */
.boot{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center}
.boot__inner{width:min(560px,82vw)}
.boot__log{font-family:var(--mono);font-size:.7rem;line-height:2;color:var(--dim);min-height:150px}
.boot__log b{color:var(--acid);font-weight:400}
.boot__meter{height:1px;background:var(--line);margin:22px 0 12px;overflow:hidden}
.boot__meter span{display:block;height:100%;width:0;background:var(--acid)}
.boot__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim)}
.boot__count em{font-style:normal;opacity:.4}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;mix-blend-mode:difference}
.cur__dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--bone);transform:translate(-50%,-50%)}
.cur__ring{position:absolute;width:38px;height:38px;border:1px solid rgba(237,234,227,.5);border-radius:50%;transform:translate(-50%,-50%)}
.cur__label{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);opacity:0;white-space:nowrap}
@media (hover:none),(max-width:860px){.cur{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:24px;
  padding:16px var(--pad);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(8,8,10,.86),rgba(8,8,10,.1));
  border-bottom:1px solid transparent;transition:border-color .4s
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__id{display:flex;flex-direction:column;line-height:1}
.nav__glyph{font-family:var(--display);font-size:1.4rem;letter-spacing:.02em}
.nav__meta{font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;color:var(--dim)}
.nav__links{margin-left:auto;display:flex;gap:26px}
.nav__links a{font-family:var(--mono);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);position:relative;padding:12px 14px;transition:color .3s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--acid);transition:width .45s var(--e)}
.nav__links a:hover,.nav__links a.is-on{color:var(--bone)}
.nav__links a:hover::after,.nav__links a.is-on::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .35s,background .35s}
.nav__cta:hover{border-color:var(--acid);background:rgba(201,242,78,.07)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 rgba(201,242,78,.7);animation:pulse 2.1s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(201,242,78,0)}100%{box-shadow:0 0 0 0 rgba(201,242,78,0)}}
.nav__prog{position:absolute;left:0;bottom:0;width:100%;height:1px;background:transparent}
.nav__prog span{display:block;height:100%;width:0;background:var(--acid)}
@media(max-width:1020px){
  .nav__links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-top: 10px;
    justify-content: flex-start;
  }
  .nav {
    flex-wrap: wrap;
  }
}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:100px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;overflow:hidden;border:1px solid transparent;transition:color .4s}
.btn span{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--e)}
.btn:hover::before{transform:translateY(0)}
.btn--acid{background:var(--acid);color:#0A0A0A}
.btn--acid::before{background:var(--bone)}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:#0A0A0A;border-color:var(--bone)}

/* ---------- sections ---------- */
section{position:relative}
.sec__head{padding:clamp(80px,11vw,150px) var(--pad) clamp(38px,5vw,64px)}
.sec__head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec__idx{color:var(--acid);margin:0 0 20px}
.sec__title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.018em;margin:0;max-width:19ch}
.sec__sub{max-width:34ch;color:var(--dim);line-height:2}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(24px,3vw,40px);overflow:hidden;position:relative}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/bg_ai.png');
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, var(--ink) 95%);
  pointer-events: none;
  z-index: 0;
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0}
.hero__grid{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}
.hero__grid span{border-left:1px solid rgba(237,234,227,.045)}
.hero__body{position:relative;z-index:3;padding-top:20vh}
.hero__kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 clamp(22px,3vw,36px)}
.hero__kicker em{font-style:normal;color:var(--bone)}

.hero__title{margin:0;font-weight:400;letter-spacing:-.035em;line-height:.86;
  font-size:clamp(3.1rem,12.5vw,11.5rem);font-family:var(--ui);text-transform:uppercase}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:0.15em;margin-bottom:-0.15em}
.hero__title .serif{font-family:var(--display);text-transform:none;letter-spacing:-.02em;color:var(--acid);font-size:1.02em}
.hero__word{display:inline-block;will-change:transform}
.hero__word .char{display:inline-block;will-change:transform}

.hero__strip{display:flex;gap:clamp(24px,5vw,80px);align-items:flex-start;flex-wrap:wrap;margin:clamp(30px,4vw,52px) 0 clamp(28px,4vw,44px);padding-top:26px;border-top:1px solid var(--line)}
.hero__role{min-width:230px}
.hero__role strong{display:inline;font-family:var(--mono);font-size:clamp(.8rem,1.3vw,1rem);letter-spacing:.08em;color:var(--acid);margin-top:8px}
.hero__lede{max-width:52ch;margin:0;color:var(--dim);font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.72}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap}

.hero__foot{position:relative;z-index:3;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(40px,6vw,74px);padding-top:18px;border-top:1px solid var(--line)}
.hero__stage{margin-left:auto;color:var(--acid)!important}
.scrollcue{width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.scrollcue span{position:absolute;top:0;left:0;width:100%;height:40%;background:var(--acid);animation:cue 1.9s var(--e) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);padding:0;overflow:hidden;background:var(--ink2)}
.ticker__row{display:flex;gap:30px;align-items:center;white-space:nowrap;padding:16px 0;font-family:var(--mono);font-size:clamp(.7rem,1.1vw,.86rem);letter-spacing:.2em;will-change:transform}
.ticker__row i{color:var(--acid);font-style:normal}
.ticker__row--alt{border-top:1px solid var(--line);color:var(--dim)}

/* ---------- thesis ---------- */
.thesis{height:230vh}
.thesis__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.thesis__text{margin:0;max-width:24ch;font-family:var(--display);font-weight:400;
  font-size:clamp(1.65rem,4.6vw,4rem);line-height:1.14;letter-spacing:-.02em;color:rgba(237,234,227,.16)}
.thesis__text .w{transition:none}
.thesis__text b{font-weight:400;font-style:italic;color:inherit}
.thesis__rail{margin-top:clamp(30px,5vw,56px);height:1px;background:var(--line)}
.thesis__rail span{display:block;height:100%;width:0;background:var(--acid)}

/* ---------- stats ---------- */
.stats{padding:clamp(70px,9vw,130px) var(--pad)}
.stats__wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink);padding:clamp(24px,3vw,40px)}
.stat__n{display:block;font-family:var(--display);font-size:clamp(3rem,7vw,6rem);line-height:.9;letter-spacing:-.04em}
.stat__l{margin:16px 0 0;font-family:var(--mono);font-size:.85rem;letter-spacing:.05em;line-height:1.9}
.stat__l em{display:block;font-style:normal;color:var(--dim2);letter-spacing:.02em;margin-top:6px;font-size:.8rem}
.stats__note{margin:26px 0 0;color:var(--dim2);max-width:80ch;line-height:2;font-size:.85rem}

/* ---------- bento (List Cards) ---------- */
.bento{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  padding:0 var(--pad) clamp(60px,8vw,110px);
}
.cell{
  position:relative;
  background:var(--ink2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(22px,2.4vw,34px);
  overflow:hidden;
  min-height:230px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:stretch;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s, background 0.5s;
  will-change:transform;
}
.cell__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}
.cell__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  margin-left: 20px;
  padding-left: 0;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s, padding 0.6s;
  z-index: 2;
}
.cell__preview span {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--dim);
  white-space: nowrap;
}
.cell__arrow {
  position: absolute;
  bottom: clamp(22px,2.4vw,34px);
  right: clamp(22px,2.4vw,34px);
  font-family: var(--ui);
  font-size: 1.2rem;
  color: var(--dim);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s;
  z-index: 2;
}
.cell::after{
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  left:var(--mouse-x,50%);
  top:var(--mouse-y,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(201,242,78,.13),transparent 66%);
  opacity:0;
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events:none;
  z-index: 1;
}
.cell:hover{
  border-color:rgba(201,242,78,.36);
  background:var(--ink3);
  transform: translateY(-6px);
  z-index: 10;
}
.cell:hover::after{
  opacity:1;
}
.cell:hover .cell__preview {
  width: 140px;
  opacity: 1;
  padding-left: 20px;
}
.cell:hover .cell__arrow {
  transform: translate(4px, -4px) rotate(45deg);
  color: var(--acid);
}

/* Capability Previews SVG Animations */
@keyframes dash-flow {
  to { stroke-dashoffset: -20; }
}
@keyframes spin-loop {
  to { transform: rotate(360deg); }
}
@keyframes pulse-node {
  0%, 100% { r: 3; opacity: 0.6; }
  50% { r: 5; opacity: 1; fill: var(--acid); }
}
@keyframes block-stack {
  0% { transform: translateY(10px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.anim-flow { animation: dash-flow 1s linear infinite; }
.anim-spin { animation: spin-loop 3s linear infinite; transform-origin: center; }
.anim-pulse { animation: pulse-node 1.5s ease-in-out infinite; }
.anim-pulse:nth-child(2) { animation-delay: 0.2s; }
.anim-pulse:nth-child(3) { animation-delay: 0.4s; }
.anim-block { animation: block-stack 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate; }
.anim-block:nth-child(2) { animation-delay: 0.2s; }
.anim-block:nth-child(3) { animation-delay: 0.4s; }

.svg-preview {
  width: 100px;
  height: 60px;
  stroke: var(--dim2);
  fill: none;
  stroke-width: 1.5;
}
.svg-preview .hl { stroke: var(--acid); }
.cell:hover .svg-preview { stroke: var(--dim); }

.cell__no{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--acid)}
.cell__h{font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.1;margin:14px 0 10px;letter-spacing:-.015em}
.cell__p{margin:0;color:var(--dim);font-size:.92rem;line-height:1.66; flex: 1;}
.cell__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.cell__tags b{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;padding:5px 9px;border:1px solid var(--line);border-radius:100px;color:var(--dim)}

@media(max-width:900px){
  .bento{
    grid-template-columns:1fr;
  }
  .cell {
    position: sticky;
    top: 100px; /* Provides a subtle stacking effect on scroll */
  }
  .cell__preview {
    display: none;
  }
}

/* ---------- systems ---------- */
.sys__list{padding:0 var(--pad) clamp(70px,9vw,120px);border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:78px 1.15fr 1fr auto;gap:clamp(16px,3vw,44px);align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line);transition:border-color .4s}
.row__no{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--dim2)}
.row__name{margin:0;font-family:var(--display);font-size:clamp(1.4rem,3.1vw,2.7rem);line-height:1.04;letter-spacing:-.02em}
.row__desc{margin:0;color:var(--dim);font-size:.93rem;line-height:1.65;max-width:44ch}
.row__meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.row__lang{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--acid)}
.row__tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}
.row__tags b{font-family:var(--mono);font-size:.53rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--dim2);border:1px solid var(--line);padding:4px 8px;border-radius:100px;transition: border-color .3s, background .3s, color .3s;}
.row__tags b:hover{background:var(--acid);color:#000;border-color:var(--acid);cursor:pointer;}
.row__go{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}
.row__go i{font-style:normal;transition:transform .45s var(--e);display:inline-block}
.row:hover .row__go i{transform:translate(5px,-5px)}
.row__bg{position:absolute;inset:0 calc(var(--pad) * -1);z-index:-1;background:var(--ink2);opacity:0;transition:opacity .45s}
.row:hover .row__bg{opacity:1}
.row:hover .row__name{color:var(--acid)}
@media(max-width:1000px){
  .row{grid-template-columns:52px 1fr;gap:14px 16px}
  .row__desc{grid-column:2}
  .row__meta{grid-column:2;align-items:flex-start}
  .row__tags{justify-content:flex-start}
}

/* ---------- arc (03 SYSTEMS) ---------- */
.arc__pin{height:100svh;display:flex;flex-direction:column;overflow:hidden}
.arc__stage{position:relative;flex:1;width:100%;min-height:0;overflow:hidden}
.arc__orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.arc__orbit path{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.arc__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad) 18px;border-top:1px solid var(--line);flex:0 0 auto}
.arc__btns{display:flex;gap:10px}
.arc__meta{margin:0;color:var(--dim)}
#arcCount{color:var(--acid)}
.arc__swiper{width:100%;padding:0 0 26px}
#arcSwiper[hidden],.arc__pagination[hidden]{display:none!important}
.arc.is-fallback .arc__pin{height:auto;overflow:visible}
.arc.is-fallback .arc__stage{display:none}
.proj{width:clamp(300px,26vw,380px);position:absolute;left:0;top:0;will-change:transform;pointer-events:none}
.proj.is-focus{pointer-events:auto}
.proj__bank{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .4s;will-change:transform}
.proj.is-focus .proj__bank{border-color:rgba(201,242,78,.4)}
.proj__img{display:block;aspect-ratio:16/11;background:linear-gradient(140deg,var(--ink3),var(--ink2));position:relative;overflow:hidden}
.proj__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.45) contrast(1.05);transition:filter .6s,transform .8s var(--e)}
.proj:hover .proj__img img,.proj.is-focus .proj__img img{filter:none;transform:scale(1.035)}
.arc__swiper .proj{position:relative;left:auto;top:auto;width:auto;pointer-events:auto}
.proj__fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:26px;gap:8px}
.proj__fb b{font-family:var(--display);font-size:1.5rem;font-weight:400;line-height:1.1}
.proj__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px}
.proj__tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.proj__n{margin:0;font-size:1rem;line-height:1.38;font-weight:500}
.proj__desc{margin:0;color:var(--dim);font-size:.93rem;line-height:1.65}
.proj__tags{display:flex;gap:5px;flex-wrap:wrap}
.proj__tags b{font-family:var(--mono);font-size:.53rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--dim2);border:1px solid var(--line);padding:4px 8px;border-radius:100px}
.proj__links{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}

/* ---------- loop (horizontal pin) ---------- */
.loop{background:var(--ink2);border-block:1px solid var(--line)}
.loop__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.loop__head{padding:0 var(--pad) clamp(28px,4vw,48px)}
.loop__title{margin:0;font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.8rem);letter-spacing:-.02em;font-weight:400}
.loop__track{display:flex;gap:18px;padding:0 var(--pad);will-change:transform}
.step{flex:0 0 clamp(320px,30vw,420px);background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,32px);min-height:clamp(360px,40vh,460px);display:flex;flex-direction:column;position:relative;transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s, background 0.5s;will-change:transform;transform-style: preserve-3d;}
.step:hover{border-color:rgba(201,242,78,.36);background:var(--ink3);transform: scale(1.02) perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg);z-index: 10;}
.step__no{font-family:var(--display);font-size:3.3rem;line-height:1;color:var(--acid);opacity:.32}
.step__h{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.55rem);margin:auto 0 12px;letter-spacing:-.01em}
.step__p{margin:0;color:var(--dim);font-size:.9rem;line-height:1.7}

/* ---------- credentials ---------- */
.creds{padding-bottom:clamp(70px,9vw,120px);overflow-x:hidden}
.creds__nav{display:flex;align-items:center;gap:16px}
.cbtn{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:border-color .35s,background .35s,color .35s}
.cbtn:hover{border-color:var(--acid);background:var(--acid);color:#0A0A0A}
.creds__swiper{width:100%;padding:0 0 26px}
.cert{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .4s}
.cert:hover{border-color:rgba(201,242,78,.4)}
.cert__img{aspect-ratio:16/11;background:linear-gradient(140deg,var(--ink3),var(--ink2));position:relative;overflow:hidden}
.cert__img img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.45) contrast(1.05);transition:filter .6s,transform .8s var(--e)}
.cert:hover .cert__img img{filter:none;transform:scale(1.035)}
.cert__fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:26px;gap:8px}
.cert__fb b{font-family:var(--display);font-size:1.5rem;font-weight:400;line-height:1.1}
.cert__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px}
.cert__top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.cert__top em{font-style:normal;color:var(--acid)}
.cert__name{margin:0;font-size:1rem;line-height:1.38;font-weight:500}
.cert__f{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.cert__f a{color:var(--acid)}
swiper-container::part(bullet){background:var(--dim2);opacity:1}
swiper-container::part(bullet-active){background:var(--acid)}
.creds__detail{padding:0 var(--pad);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- orb ---------- */
.orb{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(80px,10vw,140px) var(--pad);border-top:1px solid var(--line)}
.orb__lede{max-width:40ch;color:var(--dim);margin:22px 0 0;line-height:1.7}
.orb__legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.orb__legend b{font-family:var(--mono);font-size:.56rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line);border-radius:100px;color:var(--dim);cursor:pointer;transition:all .3s}
.orb__legend b.is-on{border-color:var(--acid);color:var(--acid)}
.orb__stage{position:relative;height:clamp(360px,54vw,600px);display:grid;place-items:center;cursor:grab;touch-action:pan-y}
.orb__stage:active{cursor:grabbing}
.orb__sphere{position:absolute;inset:0}
.orb__sphere b{position:absolute;left:50%;top:50%;font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;font-weight:400;white-space:nowrap;color:var(--bone);will-change:transform,opacity;transition:color .3s}
.orb__sphere b.hot{color:var(--acid)}
.orb__ring{position:absolute;width:min(78%,480px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;pointer-events:none}
@media(max-width:940px){.orb{grid-template-columns:1fr}}

/* ---------- terminal ---------- */
.term{padding-bottom:clamp(70px,9vw,120px)}
.term__win{margin:0 var(--pad);background:#060608;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.term__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--ink2)}
.term__bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.term__bar i:first-child{background:var(--ember)}
.term__bar i:nth-child(2){background:#E8C547}
.term__bar i:nth-child(3){background:var(--acid)}
.term__bar span{margin-left:10px;color:var(--dim2)}
.term__body{margin:0;padding:clamp(20px,3vw,34px);font-family:var(--mono);font-size:clamp(.66rem,.92vw,.8rem);line-height:2.15;overflow-x:auto;white-space:pre-wrap;color:var(--dim)}
.term__body .ok{color:var(--acid)}
.term__body .k{color:var(--bone)}
.term__body .t{color:var(--dim2)}
.term__body .l{display:block;opacity:0}

/* ---------- cta ---------- */
.cta{padding:clamp(90px,12vw,170px) var(--pad);border-top:1px solid var(--line)}
.cta__big{margin:24px 0 clamp(50px,7vw,86px);font-weight:400;text-transform:uppercase;font-family:var(--ui);
  font-size:clamp(2.6rem,10.5vw,9rem);line-height:.88;letter-spacing:-.035em}
.cta__big .ln{display:block;overflow:hidden;padding-bottom:0.15em;margin-bottom:-0.15em}
.cta__big .serif{font-family:var(--display);text-transform:none;color:var(--acid);letter-spacing:-.02em}
.cta__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(26px,4vw,56px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,46px)}
.cta__col p.mono{margin:0 0 18px;color:var(--acid)}
.cta__link{display:block;font-size:clamp(.95rem,1.3vw,1.14rem);padding:10px 0;border-bottom:1px solid var(--line);position:relative;transition:color .35s,padding-left .4s var(--e)}
.cta__link:hover{color:var(--acid);padding-left:12px}
.cta__terms{margin:0;padding:0;list-style:none;color:var(--dim);font-size:.9rem;line-height:2.1}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);overflow:hidden}
.foot__mark{display:flex;gap:30px;align-items:center;white-space:nowrap;padding:clamp(24px,3vw,40px) 0;
  font-family:var(--display);font-size:clamp(2.2rem,7vw,6rem);letter-spacing:-.02em;color:rgba(237,234,227,.09);will-change:transform;text-transform:capitalize}
.foot__mark i{color:rgba(201,242,78,.3);font-style:normal;font-size:.4em}
.foot__row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px var(--pad) 26px;border-top:1px solid var(--line)}
.foot__row a{color:var(--acid)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{display:none}
  .hero__gl{opacity:.5!important}
  .thesis{height:auto}.thesis__pin{height:auto;padding-block:120px}
  .thesis__text{color:var(--bone)}
  .loop__pin{height:auto;padding-block:90px}
  .loop__track{overflow-x:auto;flex-wrap:nowrap}
  .arc__pin{height:auto;padding-block:90px}
  .arc__stage{display:none}
}
/* ============================================================
   10. STACK
   ============================================================ */

.stack {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 160px var(--pad) 80px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.stack__head {
  max-width: 580px;
}
.stack__note {
  margin-top: 32px;
  color: var(--bone);
  opacity: 0.7;
  font-size: var(--step-0);
  line-height: 1.5;
  text-wrap: pretty;
}

.stack__body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink2);
}

.stack__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--ink2);
  align-items: start;
}

.stack__k {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.5;
}

.stack__v {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stack__v span {
  font-size: var(--step-0);
  padding: 8px 16px;
  border-radius: 40px;
  background: var(--ink2);
  border: 1px solid rgba(237,234,227, 0.05);
  color: var(--bone);
  white-space: nowrap;
  transition: border-color .3s, background .3s, color .3s;
}
.stack__v span:hover {
  background: var(--acid);
  color: #000;
  border-color: var(--acid);
  cursor: pointer;
}

@media (max-width: 768px) {
  .stack__row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }
}

/* ============================================================
   11. LIGHTBOX
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8,8,10,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

.lb[hidden] {
  display: none !important;
}

.lb__x {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink2);
  border: 1px solid rgba(237,234,227, 0.1);
  color: var(--bone);
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s;
}

.lb__x:hover {
  background: var(--bone);
  color: var(--ink);
  transform: scale(1.05);
}

.lb__fig {
  position: relative;
  max-width: 1400px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lb__fig img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

.lb__fig figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--bone);
  opacity: 0.6;
}

/* Usability Fixes Additions */
.thesis__tags {
  list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 12px;
}
.thesis__tags li {
  font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.05em; color: var(--dim); display: flex; align-items: center; gap: 12px;
}
.thesis__tags li::before {
  content: '✦'; color: var(--acid); font-size: 0.8em;
}
.creds__pagination {
  text-align: right; font-family: var(--mono); font-size: 0.85rem; color: var(--dim2); letter-spacing: 0.1em; padding-right: var(--pad);
}
.creds__btns {
  display: flex; flex-direction: row; gap: 8px; /* Horizontal layout */
}
.term__body {
  padding: 32px clamp(16px, 4vw, 40px) !important;
  font-family: var(--mono) !important;
  font-size: 0.85rem !important;
}
#training .sec__title {
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important; /* Fix hierarchy inversion */
}

.term__body.is-done .acid:last-child {
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.creds__hint {
  padding: 30px var(--pad) 0;
  color: var(--dim);
  font-size: 0.75rem;
  text-align: center;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
@media(max-width: 768px) { .term__body { font-size: 0.6rem !important; padding: 16px !important; line-height: 1.6 !important; white-space: pre !important; max-height: 350px !important; overflow-y: auto !important; } }

.term__row { display: flex; gap: 12px; margin-bottom: 8px; }
.term__d { min-width: 100px; }
.term__t { min-width: 180px; }
@media (max-width: 768px) {
  .term__row { flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .term__s { flex-basis: 100%; padding-left: 20px; color: var(--dim); margin-top: 2px; }
}

#roleSwap::after { content: "\00A0\258A"; font-size:clamp(.8rem,1.3vw,1rem); font-family: var(--mono); font-weight: bold; color: var(--acid);  }
#roleSwap.blink::after { animation: blink 1s step-end infinite; }

.hero__role span.mono.dim { display: block; margin-bottom: 8px; }

/* ============================================================
   PROJECTS GRID — all nine systems visible at once.
   Static flow layout: no pin, no scrub, no scroll hijack.
   ============================================================ */
.projgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:10px var(--pad) 30px;max-width:1600px;margin:0 auto}
.projgrid .proj{position:relative;left:auto;top:auto;width:auto;pointer-events:auto;will-change:auto}
.projgrid .proj__bank{height:100%;display:flex;flex-direction:column}
.projgrid .proj__body{flex:1}
.projgrid .proj__links{margin-top:auto}
.projgrid .proj:hover .proj__bank{border-color:rgba(201,242,78,.4)}
@media(max-width:1100px){.projgrid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:640px){.projgrid{grid-template-columns:1fr;gap:18px}.projgrid .proj__img{aspect-ratio:16/10}}


/* ============================================================
   SCROLL CHOREOGRAPHY POLISH — motion only.
   No layout, content or section order changes.
   ============================================================ */
section[id]{scroll-margin-top:84px}
.is-motion{transition:none!important}

/* Chapter labels get a short acid rule that draws as the section arrives. */
.sec__idx{display:inline-flex;align-items:center;gap:14px}
.sec__idx::after{
  content:'';width:46px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--acid),transparent);
  transform:scaleX(0);transform-origin:left center;opacity:.9
}
.sec__idx.is-inview::after{transform:scaleX(1);transition:transform .95s var(--e) .12s}

/* Project cards lift as one polished surface; the reveal itself is GSAP transform/opacity. */
.projgrid .proj__bank{position:relative;transition:transform .65s var(--e),border-color .45s,background .45s}
@media (hover:hover) and (pointer:fine){
  .projgrid .proj:hover .proj__bank,
  .projgrid .proj:focus-within .proj__bank{transform:translateY(-6px);background:var(--ink3)}
}
@media (hover:none){
  .projgrid .proj:active .proj__bank{transform:scale(.99)}
}

/* Stack rows draw a fine progress-like rule after they reveal. */
.stack__row{position:relative}
.stack__row::after{
  content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(201,242,78,.75),transparent);
  transform:scaleX(0);transform-origin:left center;opacity:.6;pointer-events:none
}
.stack__row.is-inview::after{transform:scaleX(1);transition:transform 1s var(--e) .1s}

@media (prefers-reduced-motion:reduce){
  .sec__idx::after,.stack__row::after{transform:scaleX(1)!important;transition:none!important}
  .projgrid .proj__bank{transition:none!important}
}

/* ============================================================
   PROJECTS ARC — 180° rotating wheel (desktop fine-pointer).
   Activated by JS (.sys--arc on #systems). Everywhere else the
   static grid above remains exactly as-is.
   ============================================================ */
.projarc__meta{display:none}
.sys--arc .projgrid{
  display:block;position:relative;max-width:none;
  height:clamp(520px,78svh,700px);
  padding:0;overflow:hidden;
}
.sys--arc .projgrid .proj{
  position:absolute;left:0;top:0;
  width:clamp(300px,26vw,380px);
  pointer-events:none;will-change:transform,opacity;
}
.sys--arc .projgrid .proj__bank{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sys--arc .projarc__meta{
  display:flex;justify-content:center;gap:6px;
  padding:4px var(--pad) 30px;color:var(--dim)
}
.sys--arc .projarc__meta #projArcCount{color:var(--acid)}

/* ============================================================
   ARC ON EVERY SCREEN + RESPONSIVE HARDENING
   (Awwwards QA widths: 390 / 768 / 1024 / 1440 / 1920)
   ============================================================ */
img,video,svg{max-width:100%}
.bento,.projgrid,.cta__grid,.stack__body{min-width:0}
.bento>*,.projgrid>*,.cta__grid>*,.stack__row>*{min-width:0}

@media(max-width:719px){
  /* Compact arc header so the wheel gets the phone's height */
  .sys--arc .sec__head{padding-top:104px;padding-bottom:8px}
  .sys--arc .sec__sub{display:none}
  .sys--arc .projgrid{height:clamp(480px,64svh,620px)}
  .sys--arc .projgrid .proj{width:min(80vw,330px)}
  /* Touch targets and chip overflow */
  .creds__btns .cbtn{width:48px;height:48px}
  .stack__v span{white-space:normal;overflow-wrap:anywhere}
  .hero__acts .btn{padding:14px 20px}
}
/* Notched-phone safe areas for the fixed nav */
.nav{
  padding-left:calc(var(--pad) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--pad) + env(safe-area-inset-right, 0px));
}

/* ============================================================
   ARC CARDS v10 — lighter paint, richer focus card
   ============================================================ */
.sys--arc .projgrid .proj{will-change:transform;cursor:pointer}
.sys--arc .projgrid .proj.is-focus{cursor:default}
.sys--arc .projgrid .proj__bank{box-shadow:0 14px 34px rgba(0,0,0,.32)}
.sys--arc .projgrid .proj.is-focus .proj__bank{
  border-color:rgba(198,242,78,.5);
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 0 1px rgba(198,242,78,.28),0 18px 50px rgba(198,242,78,.07);
}
.sys--arc .projgrid .proj.is-focus .proj__img img{filter:none}
.sys--arc .projgrid .proj.is-focus .proj__name{color:var(--acid)}

/* ============================================================
   PERF v11 — paint diet (60fps + gsap-performance skills)
   ============================================================ */
/* Arc cards: no blanket layer promotion from CSS; JS grants
   will-change only to the focus/near cards, per frame budget. */
.sys--arc .projgrid .proj{will-change:auto;contain:layout paint}
/* Card zoom is a discrete, compositor-transitioned CSS scale on
   the bank — never a per-frame matrix scale (re-raster churn). */
.sys--arc .projgrid .proj__bank{transition:scale .45s cubic-bezier(.22,1,.36,1)}
@media(max-width:719px){
  /* Animated full-viewport grain = a repaint on every frame of
     every scroll. On phones it stays as a still texture. */
  body::after{animation:none}
  /* Lighter fixed-nav blur on phones: same look, less composite cost. */
  .nav{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
}

/* ============================================================
   ARC v12 — spacing, solidity, readability
   ============================================================ */
.sys--arc .projgrid{height:clamp(560px,82svh,740px)}
.sys--arc .projgrid .proj{width:clamp(320px,29vw,430px)}
/* Near-solid card bodies: the wheel reads as real cards, not glass */
.sys--arc .projgrid .proj__bank{background:rgba(13,16,23,.92)}
.sys--arc .projgrid .proj.is-focus .proj__bank{background:rgba(13,16,23,.985)}
/* Readability at the bigger size */
.sys--arc .proj__name{font-size:1.14rem}
.sys--arc .proj__desc{font-size:1rem;line-height:1.62}
.sys--arc .proj__tag{font-size:.68rem}
@media(max-width:719px){
  .sys--arc .projgrid{height:clamp(500px,66svh,640px)}
  .sys--arc .projgrid .proj{width:min(84vw,350px)}
}

/* ============================================================
   PROJECTS v13 — Swiper coverflow stage (flat, horizontal)
   ============================================================ */
.projswiper{display:none}
.sys--arc .projswiper{display:block}
.sys--arc .projgrid{display:none}
.sys--arc #projSwiper{padding:30px 0 46px;overflow:hidden}
.sys--arc #projSwiper swiper-slide{width:min(84vw,350px);height:auto}
.sys--arc #projSwiper .proj{position:relative;width:100%;height:100%;cursor:pointer}
.sys--arc #projSwiper .proj.is-focus{cursor:default}
.sys--arc #projSwiper .proj__bank{height:100%;background:rgba(13,16,23,.92)}
.sys--arc #projSwiper .proj.is-focus .proj__bank{
  background:rgba(13,16,23,.985);border-color:rgba(198,242,78,.5);
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 0 1px rgba(198,242,78,.28),0 18px 50px rgba(198,242,78,.07);
}
.sys--arc #projSwiper .proj__n{font-size:1.14rem}
.sys--arc #projSwiper .proj.is-focus .proj__n{color:var(--acid)}
.sys--arc #projSwiper .proj__desc{font-size:1rem;line-height:1.62}
@media(min-width:720px){
  .sys--arc #projSwiper swiper-slide{width:440px}
}
@media(max-width:719px){
  .sys--arc #projSwiper{padding:20px 0 34px}
}

/* ============================================================
   v14 — certs go horizontal (Loop pattern), glow, gap fix
   ============================================================ */
/* The black void between Systems and Credentials was stacked
   section padding on both sides of the border. Tighten the seam. */
#systems{padding-bottom:clamp(36px,5vw,64px)}
#credentials{padding-top:clamp(40px,6vw,72px)}

/* Ambient glow behind the projects, tinted by the centred card */
#systems{overflow:hidden}
#systems .sec__head,#systems .projgrid,#systems .projswiper,#systems .projarc__meta{position:relative;z-index:1}
.sysglow{position:absolute;inset:0;z-index:0;pointer-events:none}
.sysglow i{position:absolute;inset:-10%;filter:blur(60px);opacity:0;transition:opacity 1.2s ease}
.sysglow i.on{opacity:.16}

/* Certificates: horizontal track under a pin */
.certscroll{overflow:hidden}
.certscroll__track{display:flex;gap:22px;width:max-content;padding:14px var(--pad) 30px;will-change:transform}
.cred__card{width:min(400px,82vw);flex:0 0 auto;background:rgba(13,16,23,.92);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.cred__img{position:relative;aspect-ratio:4/2.6;overflow:hidden;cursor:zoom-in;background:#0d1017}
.cred__img img{width:100%;height:100%;object-fit:cover;display:block}
.cred__zoom{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(10,12,16,.65);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.cred__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.cred__tag{color:var(--acid);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.cred__n{font-size:1.08rem;line-height:1.3}
.cred__org{color:var(--dim);font-size:.92rem}
.cred__links{margin-top:auto;padding-top:10px}
@media (prefers-reduced-motion: reduce){
  .certscroll{overflow-x:auto}
}

/* ============================================================
   v15 — MOBILE: no pins, native patterns (matchMedia split)
   ============================================================ */
.cert--native .certscroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cert--native .certscroll::-webkit-scrollbar{display:none}
.cert--native .cred__card{scroll-snap-align:center}
/* Stack -> Training seam: same stacked-padding void, tightened */
#stack{padding-bottom:clamp(48px,7vw,90px)}
#training{padding-top:clamp(48px,7vw,90px)}
@media(max-width:719px){
  /* v28 — thesis mobile override removed: the section is 230vh and the
     pin 100svh again, exactly as 10 days ago. Only the nav line stays. */
  .nav{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}

/* ============================================================
   v18 — RESPONSIVE RESCUE (device-matrix verified)
   ============================================================ */
/* Nav under 1024px: links get their own swipeable row. Before this
   the single flex row overflowed the screen by up to 415px —
   Credentials / Contact / Resume were off-canvas on every phone. */
@media(max-width:1023px){
  .nav{flex-wrap:wrap;gap:2px 14px;padding-top:10px;padding-bottom:8px}
  .nav__links{order:3;flex:1 1 100%;margin-left:0;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,#000 93%,transparent)}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap;padding:9px 10px}
}
/* Pinned stages must FIT inside the viewport while pinned. The
   generic section head spends up to 150px of top padding before
   the stage even starts; on 700-768px-tall laptops the carousels
   sat hundreds of px below the fold for the whole pin. Reclaim
   the head, then step card sizes down as height shrinks. */
@media(min-width:720px){
  .sys--arc .sec__head{padding-top:88px;padding-bottom:16px}
}
@media(min-width:720px) and (max-width:1023px){
  .sys--arc .sec__head{padding-top:126px}
}
@media(min-width:720px) and (max-height:880px){
  .sys--arc .sec__title{font-size:clamp(1.8rem,3.2vw,2.5rem)}
  .sys--arc #projSwiper{padding:10px 0 18px}
  .sys--arc #projSwiper swiper-slide{width:342px}
  .cred__card{width:336px}
  .cred__img{aspect-ratio:4/2.15}
  .certscroll__track{padding-top:8px;padding-bottom:18px}
}
@media(min-width:720px) and (max-height:740px){
  .sys--arc #projSwiper swiper-slide{width:296px}
  .sys--arc .sec__head{padding-bottom:8px}
  .sys--arc .projarc__meta{padding-bottom:12px}
  .cred__card{width:298px}
  .cred__img{aspect-ratio:4/1.85}
}

/* v18 fit pass 2 — measured boxes at 1366x768: systems section was
   1020px tall in a 768px viewport, credentials 1154px. Cut the
   stacked top padding and the preview-image height at short
   viewports; cards stay fully readable, only air is removed. */
@media(min-width:720px) and (min-height:600px) and (hover:hover) and (pointer:fine){
  #credentials{padding-top:24px}
}
@media(min-width:720px) and (max-height:880px){
  .sys--arc .proj__img{aspect-ratio:16/9}
  .sys--arc #projSwiper swiper-slide{width:320px}
  .creds .sec__title{font-size:clamp(1.8rem,3.2vw,2.5rem)}
  #credentials .sec__head{padding-top:96px;padding-bottom:20px}
  .cred__card{width:320px}
  .cred__img{aspect-ratio:4/1.95}
}
@media(min-width:720px) and (max-width:1023px) and (max-height:880px){
  #credentials .sec__head{padding-top:128px}
}
@media(min-width:720px) and (max-height:740px){
  .sys--arc .proj__img{aspect-ratio:16/8.4}
  .sys--arc #projSwiper swiper-slide{width:300px}
}

/* v18 fit pass 3 — the card BODY is the tall part at short
   viewports (long descriptions, wrapping tag rows). Clamp those
   inside the pinned carousel only; the grid keeps full text. */
@media(min-width:720px) and (max-height:880px){
  .sys--arc .proj__img{aspect-ratio:16/8}
  .sys--arc .proj__body{padding-top:16px;padding-bottom:16px}
  .sys--arc .proj__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .sys--arc .proj__tags{flex-wrap:nowrap;overflow:hidden}
}
@media(min-width:720px) and (max-height:740px){
  .sys--arc .proj__img{aspect-ratio:16/7.6}
  .sys--arc #projSwiper swiper-slide{width:282px}
  .sys--arc .sec__head{padding-bottom:6px}
  .sys--arc #projSwiper{padding-bottom:10px}
}

/* v21 — while the mobile scroll drive owns the cert row, suspend
   scroll-snap so it never yanks the row back after a programmatic set. */
.cert--native .certscroll.cert--driven{scroll-snap-type:none}