/* ============================================================
   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}
}

/* ---------- 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}
}
/* ============================================================
   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; }