*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --ink:    #101821;
  --paper:  #ECE7DC;
  --yellow: #A9D86D;
  /* --yellow: #95be60; */
  --red:    #C76767;
  --blue:   #1F4658;
  --green:  #6DAE98;
  --dark:   #0D141B;
  --f-d:    'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --f-b:    'Syne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-m:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --eout:   cubic-bezier(0.16, 1, 0.3, 1);
  --esnap:  cubic-bezier(0.77, 0, 0.175, 1);
  --ebook:  cubic-bezier(.4,0,0,1);
  --panel-count: 6;
  --nav-fg: #f0ebe0;
  --nav-accent: var(--yellow);
  --nav-muted: rgba(255,255,255,.45);
  --nav-control-bg: rgba(255,255,255,.07);
  --nav-control-border: rgba(255,255,255,.14);
  --nav-control-gloss: rgba(255,255,255,.18);
  --nav-arrow-bg: rgba(11,11,10,.65);
  --nav-arrow-fg: rgba(255,255,255,.65);
  --nav-arrow-border: rgba(255,255,255,.1);
  --y-bg: #0B0C0A;
  --y-bg-2: #111310;
  --y-bg-3: #171915;
  --y-surface: #1A1C18;
  --y-border: rgba(255,255,255,.09);
  --y-border-2: rgba(255,255,255,.14);
  --y-text: #D8D4CA;
  --y-muted: #6A6660;
  --y-white: #F0EBE0;
  --y-green: rgb(105,157,139);
  --y-green-soft: rgba(105,157,139,.14);
  --y-amber: #E8993A;
  --y-amber-soft: rgba(232,153,58,.18);
  --surface-bg: rgba(18, 15, 15, 0.78);
  --surface-bg-soft: rgba(255,255,255,.025);
  --surface-border: rgba(255,255,255,.09);
  --surface-border-strong: rgba(255,255,255,.14);
  --surface-accent: var(--yellow);
  --surface-accent-soft: rgba(169,216,109,.08);
  --surface-accent-border: rgba(169,216,109,.28);
}

html,body{
  width:100%;height:100%;overflow:hidden;
  background-color:var(--y-bg);
  font-family:var(--f-b);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body{
  position:relative;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(11,12,10,.58),rgba(11,12,10,.58)),
    url("../silos-acatlan-trace.png");
  background-size:auto,min(72vw,980px) auto;
  background-position:0 0,calc(100% + 3vw) 74%;
  background-repeat:no-repeat,no-repeat;
}
body[data-nav="light"]{
  --nav-fg: var(--ink);
  --nav-accent: var(--yellow);
  --nav-muted: rgba(0,0,0,.48);
  --nav-control-bg: rgba(0,0,0,.06);
  --nav-control-border: rgba(0,0,0,.12);
  --nav-control-gloss: rgba(255,255,255,.32);
  --nav-arrow-bg: rgba(255,255,255,.72);
  --nav-arrow-fg: rgba(11,11,10,.72);
  --nav-arrow-border: rgba(0,0,0,.12);
}
body[data-nav="yellow"]{
  --nav-fg: var(--ink);
  --nav-accent: var(--ink);
  --nav-muted: rgba(0,0,0,.5);
  --nav-control-bg: rgba(0,0,0,.08);
  --nav-control-border: rgba(0,0,0,.14);
  --nav-control-gloss: rgba(255,255,255,.2);
  --nav-arrow-bg: rgba(11,11,10,.78);
  --nav-arrow-fg: rgba(169,216,109,.78);
  --nav-arrow-border: rgba(0,0,0,.18);
}
body[data-nav="silo"]{
  --nav-fg: var(--paper);
  --nav-accent: var(--yellow);
  --nav-muted: rgba(236,231,220,.45);
  --nav-control-bg: rgba(169,216,109,.08);
  --nav-control-border: rgba(169,216,109,.22);
  --nav-control-gloss: rgba(236,231,220,.18);
  --nav-arrow-bg: rgba(11,12,10,.72);
  --nav-arrow-fg: rgba(236,231,220,.7);
  --nav-arrow-border: rgba(169,216,109,.18);
}
body[data-nav="yemaka"]{
  --nav-fg: var(--y-white);
  --nav-accent: var(--y-green);
  --nav-muted: rgba(216,212,202,.45);
  --nav-control-bg: rgba(105,157,139,.08);
  --nav-control-border: rgba(105,157,139,.22);
  --nav-control-gloss: rgba(240,235,224,.18);
  --nav-arrow-bg: rgba(11,12,10,.72);
  --nav-arrow-fg: rgba(216,212,202,.7);
  --nav-arrow-border: rgba(105,157,139,.18);
}
a,button{font:inherit;}
button{appearance:none;-webkit-appearance:none;}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:4px;
}

/* ─── PROGRESS BAR ─── */
#prog{
  position:fixed;top:0;left:0;height:2px;
  background:var(--yellow);width:calc(100% / var(--panel-count));
  transition:width .6s var(--esnap);z-index:300;
}
body[data-nav="yellow"] #prog{background:var(--ink);}
body[data-nav="silo"] #prog{background:var(--yellow);}
body[data-nav="yemaka"] #prog{background:var(--y-green);}

/* ─── TOPBAR ─── */
#topbar{
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    pointer-events: none;
}
#logo{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-m);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;color:var(--nav-fg);text-transform:uppercase;
  pointer-events:auto;line-height:1;transition:color .25s var(--eout);
}
.brand-mark{width:24px;height:24px;flex:0 0 24px;}
#logo:hover{opacity:.82;}
#build-tag{
      font-family: var(--f-m);
    font-size: .57rem;
    letter-spacing: .22em;
    color: var(--nav-muted);
    text-transform: uppercase;
    transition: color .25s var(--eout);
}
#sctr{
  grid-column:3;
  justify-self:end;
  font-family:var(--f-m);font-size:.6rem;
  color:var(--nav-muted);letter-spacing:.1em;
  transition:color .25s var(--eout);
}

/* ─── BOTTOM NAV ─── */
#bnav{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:200;
  transition:opacity .22s var(--eout),transform .22s var(--eout);
}
.ns{
  --dot-accent:var(--yellow);
  --dot-rgb:169,216,109;
  --dot-fill-alpha:.06;
  --dot-border-alpha:.22;
  width:44px;height:44px;border-radius:50%;
  cursor:pointer;position:relative;
  border:2px solid rgba(var(--dot-rgb),var(--dot-border-alpha));
  background:rgba(var(--dot-rgb),var(--dot-fill-alpha));
  transition:background .34s var(--eout),border-color .34s var(--eout),box-shadow .34s var(--eout),transform .34s var(--eout);
  flex-shrink:0;
}
body:not(.nav-ready) .ns{
  transition:none;
}
.ns:focus-visible,.arr:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:4px;
}
.ns::before{
  content:'';position:absolute;
  top:11px;left:12px;width:15px;height:11px;
  border-radius:50%;background:var(--nav-control-gloss);
  transform:rotate(-25deg);transition:opacity .3s;
}
.ns.complete{
  box-shadow:0 0 0 3px rgba(var(--dot-rgb),.08);
}
.ns.complete::before{
  background:rgba(255,255,255,.28);
}
.ns.active{
  background:var(--dot-accent);border-color:rgba(0,0,0,.22);
  transform:scale(1.15);
  box-shadow:0 0 0 5px rgba(var(--dot-rgb),.18);
}
.ns.active::before{background:rgba(255,255,255,.4);}
body[data-nav="yellow"] .ns.active{
  background:var(--ink);border-color:rgba(0,0,0,.3);
  box-shadow:0 0 0 5px rgba(0,0,0,.16);
}
body[data-nav="silo"] .ns.active{
  background:var(--dot-accent);border-color:rgba(0,0,0,.22);
  box-shadow:0 0 0 5px rgba(var(--dot-rgb),.2);
}
body[data-nav="yemaka"] .ns.active{
  background:var(--dot-accent);border-color:rgba(0,0,0,.22);
  box-shadow:0 0 0 5px rgba(var(--dot-rgb),.2);
}

/* ─── ARROWS ─── */
.arr{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:200;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:var(--nav-arrow-bg);
  border:1.5px solid var(--nav-arrow-border);
  color:var(--nav-arrow-fg);font-family:var(--f-m);
  font-size:.85rem;backdrop-filter:blur(8px);
  transition:all .2s var(--eout);
}
.arr:hover{
  background:var(--yellow);color:var(--ink);
  border-color:var(--yellow);
  transform:translateY(-50%) scale(1.06);
}
body[data-nav="yellow"] .arr:hover{
  background:var(--ink);color:var(--yellow);border-color:var(--ink);
}
body[data-nav="silo"] .arr:hover{
  background:var(--yellow);color:var(--ink);border-color:var(--yellow);
}
body[data-nav="yemaka"] .arr:hover{
  background:var(--y-green);color:var(--y-bg);border-color:var(--y-green);
}
#arrl{left:1.5rem;}
#arrr{right:1.5rem;}
.arr.gone{opacity:0;pointer-events:none;}
.arr:disabled{opacity:0;pointer-events:none;}

/* ─── VIEWPORT / TRACK ─── */
#vp{
  width:100vw;height:100vh;height:100dvh;overflow:hidden;position:relative;z-index:1;
  perspective:2200px;perspective-origin:50% 50%;
}
#track{
  display:flex;height:100%;position:relative;z-index:2;
  transition:none;
  transform-style:preserve-3d;
}
.panel{
  --panel-bg:rgba(11,12,10,.7);
  --panel-border:rgba(255,255,255,.045);
  width:100vw;height:100%;flex-shrink:0;
  position:relative;overflow-x:hidden;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  padding:5rem 4.5rem 4rem;
  background:var(--panel-bg);
  box-shadow:inset 0 0 0 1px var(--panel-border);
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  contain:layout paint;
}
.panel::before{
  display:none;
}
.panel::after{
  display:none;
}
.p1-wrap,.p2-wrap,.p3-wrap,.yemaka-wrap,.p4-wrap,.p5-wrap{
  position:relative;z-index:1;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.panel.active{z-index:2;}
#content-flip-stage{
  position:fixed;inset:0;z-index:90;
  pointer-events:none;overflow:hidden;
  perspective:2200px;perspective-origin:50% 50%;
}
.flip-content-clone{
  position:fixed!important;
  margin:0!important;
  max-width:none!important;
  z-index:90;
  contain:layout paint;
  pointer-events:none;
}
.is-flipping{
  will-change:transform,filter,opacity;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  isolation:isolate;
}
.is-flipping::after{
  content:'';position:absolute;top:-1.2rem;bottom:-1.2rem;
  width:38px;z-index:30;pointer-events:none;
  opacity:0;filter:blur(.4px);
}
.flip-current-forward{
  transform-origin:left center;
  animation:pageFlipOpenOut 1.08s var(--ebook) both;
}
.flip-next-forward{
  transform-origin:right center;
  animation:pageFlipOpenIn 1.08s var(--ebook) both;
}
.flip-current-back{
  transform-origin:right center;
  animation:bookFlipCloseOut 1.08s var(--ebook) both;
}
.flip-next-back{
  transform-origin:left center;
  animation:bookFlipCloseIn 1.08s var(--ebook) both;
}
.flip-current-forward::after,.flip-next-back::after{
  left:-18px;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(236,231,220,.16),transparent);
  animation:flipEdge 1.08s var(--ebook) both;
}
.flip-current-back::after,.flip-next-forward::after{
  right:-18px;
  background:linear-gradient(270deg,rgba(0,0,0,.34),rgba(236,231,220,.16),transparent);
  animation:flipEdge 1.08s var(--ebook) both;
}
#p1{--panel-bg:rgba(11,12,10,.7);}
#p2{--panel-bg:rgba(11,12,10,.7);}
#p3{--panel-bg:rgba(11,12,10,.68);}
#p4{--panel-bg:rgba(11,12,10,.7);}
#p5{
  --panel-bg:rgba(11,12,10,.72);
}
#p6{
  --panel-bg:rgba(11,12,10,.68);
}

@keyframes pageFlipOpenOut{
  0%{transform:translate3d(0,0,0) rotateY(0deg) scale(1);filter:brightness(1) saturate(1);opacity:1;}
  56%{opacity:.58;}
  100%{transform:translate3d(-10px,0,-42px) rotateY(-24deg) scale(.992);filter:brightness(.9) saturate(.98);opacity:0;}
}
@keyframes pageFlipOpenIn{
  0%{transform:translate3d(10px,0,-46px) rotateY(16deg) scale(.992);filter:brightness(.84) saturate(.96);opacity:0;}
  32%{opacity:.42;}
  100%{transform:translate3d(0,0,0) rotateY(0deg) scale(1);filter:brightness(1) saturate(1);opacity:1;}
}
@keyframes bookFlipCloseOut{
  0%{transform:translate3d(0,0,0) rotateY(0deg) scale(1);filter:brightness(1) saturate(1);opacity:1;}
  56%{opacity:.58;}
  100%{transform:translate3d(10px,0,-42px) rotateY(24deg) scale(.992);filter:brightness(.9) saturate(.98);opacity:0;}
}
@keyframes bookFlipCloseIn{
  0%{transform:translate3d(-10px,0,-46px) rotateY(-16deg) scale(.992);filter:brightness(.84) saturate(.96);opacity:0;}
  32%{opacity:.42;}
  100%{transform:translate3d(0,0,0) rotateY(0deg) scale(1);filter:brightness(1) saturate(1);opacity:1;}
}
@keyframes flipEdge{
  0%{opacity:0;transform:scaleX(.7);}
  24%{opacity:.52;}
  76%{opacity:.28;}
  100%{opacity:0;transform:scaleX(1.2);}
}

/* ─── ANIMATION ENGINE ─── */
@keyframes slideUp{
  from{transform:translateY(18px);opacity:1;}
  to{transform:translateY(0);opacity:1;}
}
@keyframes slideIn{
  from{transform:translateX(16px);opacity:1;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes scIn{
  from{transform:scale(.96);opacity:1;}
  to{transform:scale(1);opacity:1;}
}

.panel.active .r{
  animation:slideUp .55s var(--eout) both;
  animation-delay:calc(var(--i,0)*65ms + 80ms);
}
.panel.active .ri{
  animation:slideIn .55s var(--eout) both;
  animation-delay:calc(var(--i,0)*65ms + 120ms);
}
.panel.active .rs{
  animation:scIn .5s var(--eout) both;
  animation-delay:calc(var(--i,0)*65ms + 80ms);
}
.panel.content-sheet-ready .r,
.panel.content-sheet-ready .ri,
.panel.content-sheet-ready .rs{
  animation:none!important;
}


/* ════════════════════════════════
   PANEL 1 — WELCOME
════════════════════════════════ */
.p1-bar{
  position:absolute;top:0;left:0;
  width:2px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--yellow) 18%,rgba(169,216,109,.18) 72%,transparent);
  z-index:2;
}
.p1-wrap{
  width:100%;max-width:1060px;
  display:grid;grid-template-columns:1fr .9fr;
  gap:4rem;align-items:center;
  position:relative;z-index:1;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-m);font-size:.57rem;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,231,220,.7);margin-bottom:1.4rem;
}
.eyebrow-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--yellow);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(169,216,109,.18);
}
.p1-title{
  font-family:var(--f-d);
  font-size:clamp(4.7rem,9.8vw,8.7rem);
  line-height:.9;color:var(--paper);letter-spacing:.02em;
}
.p1-title-hi{
  display:inline-block;
  background:transparent;color:var(--yellow);
  padding:0;
}
.p1-tagline{
  margin-top:1.8rem;
  font-family:var(--f-m);font-size:.63rem;
  line-height:2;color:rgba(236,231,220,.62);
  letter-spacing:.04em;
  border-left:3px solid var(--yellow);padding-left:1rem;
}
.p1-cta{
  margin-top:2rem;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-m);font-size:.61rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--surface-bg);color:var(--paper);
  border:1.5px solid var(--surface-border-strong);padding:.78rem 1.7rem;
  cursor:pointer;transition:all .2s var(--eout);text-decoration:none;
}
.p1-cta:hover{background:var(--surface-accent);color:var(--ink);border-color:var(--surface-accent);}
.p1-cta:focus-visible{outline-color:var(--yellow);}
.cta-arr{transition:transform .2s;}
.p1-cta:hover .cta-arr{transform:translateX(4px);}
.p1-right{
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
}
/* spec brick with stud top */
.sb{
  --sb-accent:rgba(236,231,220,.28);
  --sb-bg:var(--surface-bg);
  --sb-ink:var(--paper);
  border:1.5px solid var(--surface-border-strong);
  padding:1.35rem 1.1rem 1.1rem;
  position:relative;
  background:
    linear-gradient(145deg,rgba(169,216,109,.045),transparent 42%),
    var(--sb-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 30px 80px rgba(0,0,0,.26);
  transition:transform .2s var(--eout),border-color .2s,box-shadow .2s;
  contain:layout paint;
}
.sb:hover{
  transform:translateY(-2px);
  border-color:var(--surface-accent-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 34px 84px rgba(0,0,0,.32);
}
.sb::before{
  content:'';position:absolute;top:0;left:0;right:0;
  width:auto;height:1px;border:0;
  background:linear-gradient(90deg,var(--sb-accent),transparent 70%);
}
.sb::after{
  content:'';position:absolute;inset:0 auto 0 0;width:2px;
  background:var(--sb-accent);
}
.sb-y{--sb-accent:var(--yellow);--sb-bg:rgba(17,19,16,.82);--sb-ink:var(--yellow);}
.sb-k{--sb-accent:#8EA1B1;--sb-bg:rgba(17,19,16,.82);}
.sb-w{--sb-accent:rgba(236,231,220,.68);--sb-bg:rgba(17,19,16,.82);}
.sb-r{--sb-accent:var(--red);--sb-bg:rgba(17,19,16,.82);--sb-ink:#F0C4C4;}
.sb-n{display:block;font-family:var(--f-d);font-size:2.8rem;line-height:1;}
.sb .sb-n{color:var(--sb-ink);}
.sb-l{
  display:block;margin-top:.4rem;
  font-family:var(--f-m);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,231,220,.58);
}


/* ════════════════════════════════
   PANEL 2 — ABOUT
════════════════════════════════ */
.p2-wrap{
  width:100%;max-width:1060px;
  display:grid;grid-template-columns:.9fr 1.2fr;
  gap:3.5rem;align-items:start;
}
.seye{
  font-family:var(--f-m);font-size:.57rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:1.2rem;
  display:flex;align-items:center;gap:10px;
}
.seye::before{
  content:'';display:block;
  width:28px;height:1.5px;background:var(--yellow);
}
.p2-title{
  font-family:var(--f-d);
  font-size:clamp(3.5rem,7vw,6.5rem);
  line-height:.92;color:#f0ebe0;letter-spacing:.02em;
}
.p2-body{
  margin-top:1.6rem;
  font-family:var(--f-b);font-size:.81rem;
  font-weight:400;line-height:1.85;
  color:rgba(255,255,255,.62);max-width:360px;
}
.p2-body strong{color:rgba(255,255,255,.82);font-weight:600;}
.p2-div{
  margin:1.6rem 0;height:1px;
  background:rgba(255,255,255,.09);
}
.p2-attrs{display:flex;flex-direction:column;gap:.75rem;}
.p2-attr{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--f-m);font-size:.59rem;
  letter-spacing:.08em;color:rgba(255,255,255,.58);
  text-transform:uppercase;transition:color .2s;
}
.p2-attr:hover{color:rgba(255,255,255,.75);}
.astud{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  position:relative;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.2),
             inset 0 -2px 3px rgba(0,0,0,.4);
}
.astud::before{
  content:'';position:absolute;
  top:3px;left:4px;width:7px;height:5px;
  border-radius:50%;background:rgba(255,255,255,.25);
  transform:rotate(-20deg);
}
.p2-right{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;padding-top:.5rem;
}
.pbrick{
  border:1.5px solid var(--surface-border-strong);
  padding:1.25rem 1.2rem 1.15rem;position:relative;overflow:hidden;
  background:var(--surface-bg);
  box-shadow:0 30px 80px rgba(0,0,0,.24);
  transition:border-color .25s,transform .2s var(--eout),box-shadow .2s;
  cursor:default;
  contain:layout paint;
}
.pbrick:hover{
  border-color:var(--surface-accent-border);
  transform:translateY(-2px);
  box-shadow:0 34px 84px rgba(0,0,0,.3);
}
.pbrick::before{
  content:'';position:absolute;top:0;left:0;bottom:0;
  width:2px;background:var(--pc,var(--yellow));
}
.pbrick::after{
  display:none;
}
.pb-head{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem;
  position:relative;z-index:1;
}
.pb-icon{
  width:32px;height:32px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--surface-border);
  background:var(--surface-bg-soft);
  color:var(--pc,var(--yellow));
  font-family:var(--f-d);font-size:1.05rem;line-height:1;
}
.pb-idx{
  font-family:var(--f-m);font-size:.54rem;
  letter-spacing:.2em;color:rgba(255,255,255,.5);margin-bottom:.25rem;
}
.pb-name{
  font-family:var(--f-d);font-size:1.22rem;
  letter-spacing:.04em;color:#f0ebe0;line-height:1.1;margin-bottom:.4rem;
}
.pb-text{
  font-family:var(--f-b);font-size:.64rem;
  line-height:1.7;color:rgba(255,255,255,.6);
  position:relative;z-index:1;
}
/* ════════════════════════════════
   PANEL 3 — BUILT
════════════════════════════════ */
.p3-wrap{
  width:100%;max-width:1060px;
  display:flex;flex-direction:column;
}
.built-header{
  display:flex;align-items:baseline;
  justify-content:space-between;
  padding-top:.5rem;margin-bottom:2rem;
  width:100%;
}
.section-tag-light{
  font-family:var(--f-m);font-size:.57rem;
  letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--yellow);
  display:flex;align-items:center;gap:10px;
}
.section-tag-light::before{
  content:'';display:block;
  width:28px;height:1.5px;background:var(--yellow);
}
.section-title{
  font-family:var(--f-d);
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.95;
  color:var(--paper);
  letter-spacing:.02em;
  margin-top:.6rem;
}
.built-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
  width:100%;
}
.project-brick{
  display:block;
  border:1.5px solid var(--surface-border-strong);
  padding:1.4rem 1.2rem;
  position:relative;
  overflow:hidden;
  background:var(--surface-bg);
  box-shadow:0 30px 80px rgba(0,0,0,.24);
  transition:transform .15s,box-shadow .15s,border-color .15s;
  color:inherit;
  text-align:left;
  text-decoration:none;
  contain:layout paint;
}
.project-brick:hover{
  transform:translateY(-2px);
  box-shadow:0 34px 84px rgba(0,0,0,.3);
  border-color:var(--surface-accent-border);
}
.project-brick[data-go]{cursor:pointer;}
.project-brick[data-go]:focus-visible{outline-color:var(--yellow);}
.project-brick::after{
  display:none;
}
.project-brick.open{
  background:var(--surface-accent-soft);
  border-color:var(--surface-accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.26);
}
.proj-tag{
  font-family:var(--f-m);font-size:.53rem;
  letter-spacing:.15em;text-transform:uppercase;
  padding:3px 8px;border:1.5px solid;
  display:inline-block;line-height:1.4;margin-bottom:.8rem;
  font-weight:700;
}
.proj-tag.t-yellow{color:var(--yellow);border-color:var(--yellow);}
.proj-tag.t-red{color:#c76767;border-color:#c76767;}
.proj-tag.t-blue{color:#1F4658;border-color:#1F4658;}
.proj-tag.t-green{color:#5DBD8A;border-color:#5DBD8A;}
.proj-tag.t-orange{color:#E87722;border-color:#E87722;}
.proj-name{
  font-family:var(--f-d);
  font-size:1.7rem;
  line-height:1;
  color:var(--paper);
  margin-bottom:.5rem;
  letter-spacing:.04em;
}
.proj-desc{
  font-family:var(--f-b);font-size:.59rem;
  color:rgba(255,255,255,.64);line-height:1.65;
}
.proj-status{
  margin-top:.9rem;
  display:flex;align-items:center;gap:7px;
  font-family:var(--f-m);font-size:.54rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.58);
}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}
.s-live{background:#4EBF89;box-shadow:0 0 0 3px rgba(78,191,137,.18);}
.s-beta{background:#5B9DE8;box-shadow:0 0 0 3px rgba(91,157,232,.18);}
.s-dev {background:var(--yellow);box-shadow:0 0 0 3px rgba(169,216,109,.18);}


/* ════════════════════════════════
   PANEL 6 — YEMAKA
════════════════════════════════ */
#p6{color:var(--y-text);}
.yemaka-wrap{
  width:100%;max-width:1060px;
  display:grid;grid-template-columns:.95fr 1.2fr;
  gap:4rem;align-items:center;
  position:relative;z-index:1;
}
.yemaka-mark{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--f-m);font-size:.57rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--y-green);margin-bottom:1.2rem;
}
.yemaka-mark::before{
  content:'';width:24px;height:24px;border-radius:50%;
  background:var(--y-green);box-shadow:0 0 16px rgba(105,157,139,.32);
}
.yemaka-title{
  font-family:var(--f-d);
  font-size:clamp(4rem,9vw,8rem);
  line-height:.88;letter-spacing:.02em;color:var(--y-white);
}
.yemaka-sub{
  margin-top:1.4rem;
  font-family:var(--f-b);font-size:.78rem;
  line-height:1.85;color:var(--y-muted);
  max-width:360px;
}
.yemaka-actions{position:relative;z-index:2;display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem;}
.yemaka-btn{
  position:relative;z-index:2;pointer-events:auto;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-m);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.78rem 1.35rem;border:1.5px solid var(--y-green);
  cursor:pointer;transition:all .2s var(--eout);text-decoration:none;
}
.yemaka-btn.primary{background:var(--y-green);color:var(--y-bg);}
.yemaka-btn.secondary{background:transparent;color:var(--y-green);}
.yemaka-btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.28);}
.yemaka-board{
  border:1.5px solid var(--y-border-2);
  background:rgba(17,19,16,.78);
  box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 70px rgba(105,157,139,.045);
  position:relative;overflow:hidden;
}
.ytab-input{
  position:absolute;inline-size:1px;block-size:1px;
  opacity:0;pointer-events:none;clip-path:inset(50%);
}
.ytab-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1.5px solid var(--y-border);
}
.ytab{
  min-height:46px;
  display:flex;align-items:center;justify-content:center;
  border-right:1.5px solid var(--y-border);
  font-family:var(--f-m);font-size:.52rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--y-muted);
  cursor:pointer;transition:all .2s var(--eout);
  background:rgba(255,255,255,.018);
}
.ytab:last-child{border-right:none;}
.ytab:hover{color:var(--y-text);background:rgba(255,255,255,.045);}
.ytab:focus-visible{outline:2px solid var(--y-green);outline-offset:-4px;}
#yt-models:checked ~ .ytab-list label[for="yt-models"],
#yt-memory:checked ~ .ytab-list label[for="yt-memory"],
#yt-tools:checked ~ .ytab-list label[for="yt-tools"],
#yt-surfaces:checked ~ .ytab-list label[for="yt-surfaces"]{
  color:var(--y-bg);background:var(--y-green);
}
.ytab-panels{position:relative;min-height:292px;}
.ytab-panel{
  display:none;
  grid-template-columns:.95fr 1fr;
  gap:1.2rem;
  padding:1.3rem;
}
#yt-models:checked ~ .ytab-panels #yp-models,
#yt-memory:checked ~ .ytab-panels #yp-memory,
#yt-tools:checked ~ .ytab-panels #yp-tools,
#yt-surfaces:checked ~ .ytab-panels #yp-surfaces{
  display:grid;
}
.yp-k{
  font-family:var(--f-m);font-size:.52rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--y-green);margin-bottom:.55rem;
}
.yp-title{
  font-family:var(--f-d);font-size:2rem;
  line-height:.94;color:var(--y-white);letter-spacing:.04em;margin-bottom:.8rem;
}
.yp-text{
  font-family:var(--f-b);font-size:.67rem;
  line-height:1.72;color:var(--y-muted);
}
.yp-list{display:flex;flex-direction:column;gap:.55rem;}
.yp-chip{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  border:1.5px solid var(--y-border);
  background:rgba(255,255,255,.025);
  padding:.7rem .75rem;
}
.yp-chip strong{
  font-family:var(--f-m);font-size:.54rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--y-white);
}
.yp-chip span{
  font-family:var(--f-m);font-size:.5rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--y-muted);
  text-align:right;
}
.yemaka-flow{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.5rem;margin-top:0;
  padding:0 1.3rem 1.3rem;
}
.flow-step{
  border:1.5px solid var(--y-border);
  padding:.75rem .65rem;
  font-family:var(--f-m);font-size:.5rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--y-muted);
  text-align:center;
  background:rgba(255,255,255,.025);
}
.flow-step.hot{color:var(--y-green);border-color:rgba(105,157,139,.34);}
.flow-step:nth-child(4){color:var(--y-amber);border-color:var(--y-amber-soft);}


/* ════════════════════════════════
   PANEL 4 — JOIN
════════════════════════════════ */
.p4-wrap{
  width:100%;max-width:1060px;
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:4rem;align-items:center;
}
.p4-title{
  font-family:var(--f-d);
  font-size:clamp(3.8rem,8vw,7rem);
  line-height:.9;color:#f0ebe0;letter-spacing:.02em;
  margin-top:.8rem;margin-bottom:1.5rem;
}
.p4-sub{
  font-family:var(--f-b);font-size:.7rem;
  line-height:1.85;color:rgba(255,255,255,.74);
  max-width:290px;margin-bottom:2rem;
}
.p4-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-m);font-size:.61rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--surface-bg);color:var(--surface-accent);
  padding:.8rem 1.8rem;border:1.5px solid var(--surface-accent);
  cursor:pointer;transition:all .2s var(--eout);text-decoration:none;
}
.p4-cta:hover{background:var(--surface-accent);color:var(--ink);}
.p4-steps{display:flex;flex-direction:column;gap:0;}
.step{
  display:grid;grid-template-columns:3.5rem 1fr;
  gap:1rem;align-items:stretch;
}
.step-sp{
  display:flex;flex-direction:column;align-items:center;
}
.step-nb{
  width:44px;height:44px;
  background:var(--surface-bg);
  border:1.5px solid var(--surface-border-strong);
  /* border-radius:4px; */
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-size:1.6rem;
  color:var(--yellow);flex-shrink:0;
  position:relative;z-index:1;
}
.step-ln{
  flex:1;width:1.5px;background:var(--surface-border);margin:4px 0;
}
.step:last-child .step-ln{display:none;}
.step-c{padding:.2rem 0 1.4rem;}
.step-lbl{
  font-family:var(--f-b);font-size:.74rem;
  font-weight:700;color:#f0ebe0;margin-bottom:.3rem;
}
.step-txt{
  font-family:var(--f-b);font-size:.62rem;
  line-height:1.65;color:rgba(255,255,255,.74);
}
.p4-cards{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem;}
.ccard{
  background:var(--surface-bg);
  border:1.5px solid var(--surface-border-strong);
  padding:.95rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
  transition:background .2s;
}
.ccard:hover{background:var(--surface-accent-soft);border-color:var(--surface-accent-border);}
.cc-st{
  width:22px;height:22px;border-radius:50%;
  background:var(--yellow);flex-shrink:0;position:relative;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.35),
             inset 0 -2px 3px rgba(0,0,0,.2);
}
.cc-st::before{
  content:'';position:absolute;top:4px;left:5px;
  width:9px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.4);transform:rotate(-20deg);
}
.cc-txt{
  font-family:var(--f-b);font-size:.63rem;
  color:rgba(255,255,255,.76);line-height:1.4;
}
.cc-txt strong{color:#f0ebe0;font-weight:600;}


/* ════════════════════════════════
   PANEL 5 — CONTACT
════════════════════════════════ */
.p5-bar{
  position:absolute;top:0;right:0;
  width:2px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--surface-accent) 18%,rgba(169,216,109,.18) 72%,transparent);
}
.p5-wrap{
  width:100%;max-width:1060px;
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:4.5rem;align-items:center;
  position:relative;z-index:1;
}
.p5-title{
  font-family:var(--f-d);
  font-size:clamp(4rem,9vw,8rem);
  line-height:.88;color:var(--y-white);letter-spacing:.02em;margin-top:.9rem;
}
.p5-sub{
  margin-top:1.4rem;
  font-family:var(--f-m);font-size:.63rem;
  line-height:2;color:var(--y-muted);
  border-left:3px solid var(--surface-accent);padding-left:1rem;
  max-width:280px;
}
.clinks{display:flex;flex-direction:column;gap:.85rem;}
.clink{
  display:grid;grid-template-columns:3rem 1fr;
  align-items:center;gap:.8rem;
  background:var(--surface-bg);border:1.5px solid var(--surface-border-strong);
  padding:1rem 1.2rem;
  text-decoration:none;color:inherit;
  box-shadow:none;
  transition:all .2s var(--eout);
}
.clink:hover{
  background:var(--surface-accent-soft);transform:translateY(-2px);
  border-color:var(--surface-accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.26);
}
.cl-ico{
  font-family:var(--f-d);font-size:1.5rem;
  color:var(--surface-accent);line-height:1;text-align:center;
  transition:color .2s;
}
.clink:hover .cl-ico{color:var(--y-white);}
.cl-type{
  font-family:var(--f-m);font-size:.53rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--y-muted);margin-bottom:.15rem;
  transition:color .2s;
}
.cl-val{
  font-family:var(--f-m);font-size:.7rem;
  font-weight:500;color:var(--y-white);transition:color .2s;
  overflow-wrap:anywhere;
}
.clink:hover .cl-type{color:rgba(169,216,109,.72);}
.clink:hover .cl-val{color:var(--surface-accent);}
.clink:focus-visible{outline-color:var(--surface-accent);}


/* ─── RESPONSIVE ─── */
@media(max-width:820px){
  #topbar{height:52px;padding:0 1.1rem;}
  #logo{font-size:.66rem;gap:.45rem;}
  .brand-mark{width:21px;height:21px;flex-basis:21px;}
  #sctr{font-size:.55rem;}
  #build-tag{display:none;}
  #arrl{left:.75rem;}
  #arrr{right:.75rem;}
  .arr{display:none;}
  #bnav{
    top:auto;right:auto;bottom:.35rem;left:50%;
    transform:translateX(-50%);
    flex-direction:row;gap:5px;
    padding:.25rem .35rem;
    background:rgba(11,12,10,.5);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    z-index:500;
  }
  .ns{width:20px;height:20px;border-width:1.25px;}
  .ns::before{top:5px;left:5px;width:7px;height:5px;}
  .ns.active{transform:scale(1.06);}
  #vp{height:100dvh;}
  .panel{
    height:100dvh;align-items:flex-start;justify-content:flex-start;
    padding:4.5rem 1.25rem 7.25rem;
  }
  body::before{
    background-size:auto,132vw auto;
    background-position:0 0,64% 70%;
  }
  .p1-wrap,.p2-wrap,.p4-wrap,.p5-wrap,.yemaka-wrap{grid-template-columns:1fr;gap:1.45rem;max-width:100%;}
  .p1-title{font-size:5.15rem;line-height:.9;}
  .p2-title,.p4-title,.p5-title{font-size:4.45rem;line-height:.88;}
  .section-title{font-size:3.55rem;}
  .yemaka-title{font-size:5rem;line-height:.9;}
  .p1-tagline,.p2-body,.p4-sub,.p5-sub,.yemaka-sub{font-size:.7rem;line-height:1.75;max-width:36rem;}
  .p1-cta,.p4-cta{width:100%;max-width:18rem;justify-content:center;}
  .p1-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;}
  .p2-right{grid-template-columns:1fr;gap:.85rem;}
  .p3-wrap{max-width:100%;}
  .built-header{display:block;margin-bottom:1rem;}
  .built-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .yemaka-board{grid-template-columns:1fr;}
  .yemaka-board,.ytab-panel,.yp-chip{min-width:0;}
  .ytab-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ytab:nth-child(2){border-right:none;}
  .ytab:nth-child(1),.ytab:nth-child(2){border-bottom:1.5px solid rgba(255,255,255,.08);}
  .ytab-panels{min-height:auto;}
  .ytab-panel{grid-template-columns:1fr;padding:1rem;}
  .yp-title{font-size:1.7rem;}
  .yp-text{font-size:.63rem;line-height:1.65;}
  .yp-chip{padding:.6rem .65rem;}
  .yp-chip strong{font-size:.5rem;}
  .yp-chip span{font-size:.46rem;line-height:1.35;overflow-wrap:anywhere;}
  .yemaka-flow{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 1rem 1rem;}
  .flow-step{font-size:.44rem;padding:.55rem .35rem;}
  .p4-wrap{gap:1.35rem;}
  .step{grid-template-columns:3rem 1fr;}
  .step-nb{width:40px;height:40px;font-size:1.35rem;}
  .step-c{padding-bottom:1rem;}
}
@media(max-width:820px), (max-height:700px){
  #bnav{
    bottom:.35rem;left:50%;
    transform:translateX(-50%);
    gap:5px;
    padding:.25rem .35rem;
    background:rgba(11,12,10,.5);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    z-index:500;
  }
  .ns{width:20px;height:20px;border-width:1.25px;}
  .ns::before{top:5px;left:5px;width:7px;height:5px;}
  .ns.active{transform:scale(1.06);}
  #bnav{z-index:500;}
}
@media(max-height:520px){
  #bnav{bottom:.2rem;gap:4px;padding:.15rem .25rem;background:rgba(11,12,10,.35);}
  .ns{width:14px;height:14px;border-width:1px;}
  .ns::before{top:3px;left:3px;width:5px;height:4px;}
  .ns.active{transform:scale(1.04);}
  .panel{padding-bottom:3rem;}
}
@media(max-width:520px){
  .panel{padding:4.35rem 1.25rem 7.35rem;}
  .eyebrow,.seye,.section-tag-light,.yemaka-mark{font-size:.5rem;letter-spacing:.17em;}
  .p1-title{font-size:4.25rem;}
  .p2-title,.p4-title,.p5-title{font-size:3.65rem;}
  .section-title{font-size:3rem;}
  .yemaka-title{font-size:4rem;}
  .p1-tagline,.p2-body,.p4-sub,.p5-sub,.yemaka-sub{font-size:.66rem;line-height:1.7;}
  .yemaka-actions{gap:.6rem;margin-top:1.2rem;}
  .yemaka-btn{font-size:.54rem;padding:.68rem .85rem;}
  .ytab{min-height:42px;font-size:.49rem;}
  .ytab-panel{padding:.9rem;gap:.85rem;}
  .yp-title{font-size:1.55rem;line-height:1;}
  .yp-list{gap:.5rem;}
  .yp-chip{grid-template-columns:1fr;gap:.24rem;align-items:start;}
  .yp-chip span{text-align:left;overflow-wrap:anywhere;}
  .yemaka-flow{display:none;}
  .built-grid{grid-template-columns:1fr;gap:.85rem;}
  .project-brick,.pbrick{padding:1rem;}
  .pb-name{font-size:1.05rem;}
  .p1-right{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sb{min-height:88px;padding:.9rem;}
  .sb-n{font-size:2rem;}
  .sb-l{font-size:.48rem;}
  .p4-cards{display:none;}
  .step{grid-template-columns:2.75rem 1fr;}
  .step-nb{width:38px;height:38px;font-size:1.25rem;}
  .step-lbl{font-size:.7rem;}
  .step-txt{font-size:.6rem;}
  .clink{grid-template-columns:2.3rem 1fr;padding:.9rem 1rem;}
}
@media(max-width:380px){
  .panel{padding-left:1rem;padding-right:1rem;}
  .p1-title{font-size:3.85rem;}
  .p2-title,.p4-title,.p5-title{font-size:3.25rem;}
  .section-title{font-size:2.75rem;}
  .yemaka-title{font-size:3.55rem;}
  .p1-right{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
  .sb{min-height:78px;padding:.75rem;}
  .sb-n{font-size:1.7rem;}
  .sb-l{font-size:.44rem;}
  #bnav{bottom:.3rem;gap:5px;padding:.22rem .32rem;}
  .ns{width:18px;height:18px;}
  .ns::before{top:4px;left:4px;width:7px;height:5px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}