/* Hexode site v2 (operations positioning): blocks on top of site.css */
.nav-links{gap:22px}
.nav-links a{font-size:13.5px}

/* hero */
.hero .title{max-width:18ch}
.hero .lead{max-width:50ch}
.hero .lead b.w{color:var(--hx-text);font-weight:500}
.lead-2{margin-top:12px}
.gains{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gains li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg);box-shadow:var(--glass-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;color:var(--hx-text)}
.gains li::before{content:"";width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,var(--hx-blue-light) 0 3px,rgb(37 64 230/.35) 4px 100%)}
.tags{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:20px}
.hero-in{padding-top:110px}

/* shared */
.say{font:500 clamp(20px,1.9vw,26px)/1.3 var(--hx-display);letter-spacing:-.015em;color:var(--hx-text);margin:24px 0;max-width:34ch}
.say-wide{grid-column:1/11;max-width:46ch;margin:56px 0 0}
.scroll-x{overflow-x:auto;scrollbar-width:none}

/* 01 problem: stalled work list + relay figure */
.stalls{grid-column:1/7;list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.stalls li{position:relative;display:grid;grid-template-columns:112px 1fr 26px;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass-bg);box-shadow:var(--glass-hi);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.stalls p{margin:0;color:var(--hx-text);font-size:16px;line-height:1.45}
.st-tag{font:500 11px/1 var(--hx-mono);letter-spacing:.08em;text-transform:uppercase;color:#FFB4AC;padding:6px 8px;border-radius:6px;background:rgb(255 138 128/.1);border:1px solid rgb(255 138 128/.25);justify-self:start}
.st-clock{width:22px;height:22px;border-radius:50%;border:1.5px solid rgb(255 138 128/.5);position:relative}
.st-clock::after{content:"";position:absolute;left:50%;top:3px;width:1.5px;height:8px;margin-left:-.75px;background:#FFB4AC;transform-origin:50% 100%;animation:clock 4s linear infinite}
.stalls li:nth-child(2) .st-clock::after{animation-duration:5.5s}.stalls li:nth-child(3) .st-clock::after{animation-duration:3.2s}.stalls li:nth-child(4) .st-clock::after{animation-duration:6s}.stalls li:nth-child(5) .st-clock::after{animation-duration:4.6s}
@keyframes clock{to{transform:rotate(360deg)}}
.prob-copy{grid-column:8/13;align-self:center}
.prob-copy p{color:var(--hx-text-2);margin:0 0 14px}
.prob-copy .say{margin:8px 0 18px;color:var(--hx-text)}
.prob-copy-2{grid-column:1/8;margin-top:40px}
.relay-box{grid-column:1/13;margin:56px 0 0;padding:28px 28px 20px}
.relay{display:block;width:100%;min-width:720px;height:auto;font-family:var(--hx-sans)}
.rl-path{fill:none;stroke:rgb(201 206 214/.25);stroke-width:2;stroke-dasharray:4 6}
.rl-ring{fill:rgb(255 255 255/.03);stroke:rgb(255 255 255/.16)}
.rl-core{fill:rgb(201 206 214/.6)}
.rl-halo{fill:none;stroke:#FF8A80;stroke-width:2;filter:drop-shadow(0 0 8px #FF8A80)}
.rl-name{font-size:15px;font-weight:500;fill:var(--hx-text)}
.rl-wait{font:500 12px var(--hx-mono);letter-spacing:.04em;fill:#FFB4AC}
.rl-token circle{filter:drop-shadow(0 0 8px rgb(255 255 255/.7))}
.quote{margin-top:72px}

/* 02 levels */
.abord-copy{grid-column:1/9}
.abord-copy p:not(.lead):not(.say){color:var(--hx-text-2)}
.levels{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:48px}
.lv-cards{grid-column:1/6;display:grid;gap:12px}
.lv-card{position:relative;overflow:hidden;text-align:left;padding:22px 22px 24px;color:var(--hx-text);font:inherit;cursor:pointer;opacity:.55;transition:opacity .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.lv-card b{display:block;font:500 20px/1.25 var(--hx-display);margin-top:10px}
.lv-card p{margin:8px 0 0;color:var(--hx-text-2);font-size:15px;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.16,1,.3,1)}
.lv-card[aria-selected=true]{opacity:1;border-color:rgb(142 162 255/.45)!important}
.lv-card[aria-selected=true] p{max-height:160px}
.lv-card:hover{opacity:1}
.lv-card:focus-visible{outline:2px solid var(--hx-blue-light);outline-offset:2px}
.lv-here{display:inline-block;margin-top:12px;font:500 11px/1 var(--hx-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--hx-key);padding:6px 9px;border-radius:999px;box-shadow:0 0 18px rgb(37 64 230/.7)}
.lv-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--hx-key),var(--hx-blue-light));transform:scaleX(0);transform-origin:left}
.levels.is-auto .lv-card[aria-selected=true] .lv-bar{animation:lvbar 6s linear forwards}
@keyframes lvbar{to{transform:scaleX(1)}}
.lv-fig{grid-column:6/13;margin:0;padding:24px 24px 18px;align-self:start;position:sticky;top:96px}
.lv{display:block;width:100%;min-width:560px;height:auto;font-family:var(--hx-sans)}
.lv-line{fill:none;stroke:rgb(201 206 214/.25);stroke-width:2;stroke-dasharray:4 6;transition:opacity .5s}
.lv-person circle{fill:rgb(201 206 214/.6)}
.lv-person path{fill:none;stroke:rgb(201 206 214/.6);stroke-width:2}
.lv-spark path{fill:var(--hx-blue-light)}
.lv-agent{fill:var(--hx-key);stroke:#B9C6FF;stroke-width:1.5;filter:drop-shadow(0 0 8px rgb(37 64 230/.9))}
.lv-tok{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.lv-tok.blue{fill:var(--hx-blue-light);filter:drop-shadow(0 0 6px #8EA2FF)}
.lv-up{fill:#fff}
.lv-cap{font:500 12px var(--hx-mono);letter-spacing:.04em;fill:var(--hx-text-3)}
.lv .lv-spark,.lv .lv-agent,.lv .l3,.lv .g2,.lv .g3,.lv .l2x{opacity:0;transition:opacity .5s}
.lv .g1,.lv .l12,.lv .l1x{transition:opacity .5s}
.lv[data-level="2"] .lv-spark,.lv[data-level="2"] .g2,.lv[data-level="2"] .l2x{opacity:1}
.lv[data-level="2"] .g1,.lv[data-level="2"] .l1x{opacity:0}
.lv[data-level="3"] .lv-agent,.lv[data-level="3"] .l3,.lv[data-level="3"] .g3{opacity:1}
.lv[data-level="3"] .g1,.lv[data-level="3"] .l1x,.lv[data-level="3"] .l12{opacity:0}
.lv[data-level="3"] .lv-person{opacity:.55}
.lv-person{transition:opacity .5s}

/* 03 chains */
.chains-box{grid-column:1/13;margin:0;padding:28px 28px 20px}
.chains{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:0;row-gap:10px}
.chain>span{position:relative;padding:10px 14px;border-radius:10px;font-size:14px;white-space:nowrap}
.ch-trig{background:rgb(37 64 230/.2);border:1px solid rgb(142 162 255/.5);color:#fff;font-weight:500}
.ch-step{margin-left:44px;border:1px solid var(--glass-line);background:rgb(255 255 255/.03);color:var(--hx-text-3);animation:chstep 6s var(--d) infinite}
.ch-step::before{content:"";position:absolute;right:100%;top:50%;width:44px;height:1.5px;background:linear-gradient(90deg,rgb(142 162 255/.15),rgb(142 162 255/.5))}
.ch-step::after{content:"";position:absolute;right:calc(100% + 40px);top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px #8EA2FF;opacity:0;animation:chdot 6s calc(var(--d) - .5s) infinite}
@keyframes chstep{0%,4%{color:var(--hx-text-3);border-color:var(--glass-line);background:rgb(255 255 255/.03)}10%,70%{color:#fff;border-color:rgb(142 162 255/.55);background:rgb(37 64 230/.16)}85%,100%{color:var(--hx-text-3);border-color:var(--glass-line);background:rgb(255 255 255/.03)}}
@keyframes chdot{0%{opacity:0;transform:translateX(0)}2%{opacity:1}8%{opacity:1;transform:translateX(37px)}9%,100%{opacity:0;transform:translateX(37px)}}
.camada-copy{grid-column:1/9;margin-top:24px}
.rules{grid-column:1/13;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.rules li{padding:22px;font:500 18px/1.35 var(--hx-display);color:var(--hx-text)}
.rules span{display:block;font-size:12px;color:var(--hx-blue-light);margin-bottom:28px}

/* 04 applications */
.apps{grid-column:1/13;display:grid;grid-template-columns:300px 1fr;gap:0;padding:0;overflow:hidden}
.apps-tabs{display:flex;flex-direction:column;padding:12px;border-right:1px solid var(--glass-line)}
.apps-tabs button{display:flex;gap:12px;align-items:center;text-align:left;padding:13px 14px;border:0;border-radius:10px;background:transparent;color:var(--hx-text-3);font:500 15px var(--hx-sans);cursor:pointer;position:relative;transition:background .3s,color .3s}
.apps-tabs button span{font-size:11px;color:var(--hx-text-3)}
.apps-tabs button:hover{color:var(--hx-text)}
.apps-tabs button[aria-selected=true]{background:rgb(37 64 230/.16);color:#fff}
.apps-tabs button[aria-selected=true] span{color:var(--hx-blue-light)}
.apps-tabs button:focus-visible{outline:2px solid var(--hx-blue-light);outline-offset:-2px}
.apps-pans{padding:32px 36px}
.pan{animation:panin .6s cubic-bezier(.16,1,.3,1)}
.pan h3{font:500 clamp(22px,2vw,28px)/1.2 var(--hx-display);letter-spacing:-.015em;margin:12px 0 0;max-width:26ch}
.pan p{color:var(--hx-text-2);max-width:58ch;margin:14px 0 0}
.pan .pan-close{color:var(--hx-text)}
.pan-log{margin-top:26px;padding:16px 18px;border-radius:14px;border:1px solid var(--glass-line);background:rgb(5 6 8/.45)}
.pan-log-h{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--hx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hx-text-3)}
.pan-log-h canvas{width:20px;height:20px}
.pan-log ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
.pan-log li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--hx-text-2);opacity:0;animation:taskin .5s var(--d) forwards}
.pan-log li i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgb(142 162 255/.6);position:relative;flex:none}
.pan-log li i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--hx-blue-light);transform:scale(0);animation:tick .4s calc(var(--d) + .5s) forwards}
@keyframes panin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes taskin{to{opacity:1}}
@keyframes tick{to{transform:scale(1)}}

/* 05 architecture: list + stacked plates */
.arch-list{grid-column:1/7;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.arch-list li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 16px;border-radius:14px;border:1px solid transparent;cursor:default;transition:background .3s,border-color .3s}
.arch-list li span{font-size:12px;color:var(--hx-blue-light);padding-top:4px}
.arch-list li b{font:500 18px/1.3 var(--hx-display)}
.arch-list li p{margin:6px 0 0;color:var(--hx-text-2);font-size:15px}
.arch-list li.is-on,.arch-list li:hover,.arch-list li:focus-visible{background:var(--glass-bg);border-color:var(--glass-line);outline:none}
.arch-stack{grid-column:8/13;position:sticky;top:110px;align-self:start;height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1400px}
.stack-in{position:relative;width:300px;height:300px;transform:rotateX(58deg) rotateZ(-40deg);transform-style:preserve-3d}
.plate{position:absolute;inset:0;border-radius:22px;border:1px solid rgb(142 162 255/.28);background:linear-gradient(135deg,rgb(255 255 255/.09),rgb(37 64 230/.06));box-shadow:inset 0 1px 0 rgb(255 255 255/.12);transform:translateZ(calc(var(--i) * 34px));transition:transform .7s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s,box-shadow .4s}
.plate span{position:absolute;left:18px;bottom:14px;font:500 11px/1 var(--hx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-text-3);transition:color .4s}
.plate.is-on{transform:translateZ(calc(var(--i) * 34px + 46px));background:linear-gradient(135deg,rgb(142 162 255/.35),rgb(37 64 230/.3));border-color:var(--hx-blue-light);box-shadow:0 0 40px rgb(37 64 230/.6),inset 0 1px 0 rgb(255 255 255/.25)}
.plate.is-on span{color:#fff}
.arch-stack .fig{margin-top:40px}

/* method sec-cta row */
.sec-cta[data-site]{grid-column:1/-1}

/* responsive */
@media (max-width:1180px){.nav-links{display:none}}
@media (max-width:1020px){
  .lv-cards,.lv-fig{grid-column:1/-1}
  .lv-fig{position:relative;top:0}
  .rules{grid-template-columns:repeat(2,1fr)}
  .apps{grid-template-columns:1fr}
  .apps-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--glass-line);scrollbar-width:none}
  .apps-tabs button{white-space:nowrap}
}
@media (max-width:760px){
  .stalls,.prob-copy,.prob-copy-2,.abord-copy,.camada-copy,.arch-list,.say-wide{grid-column:1/-1}
  .prob-copy{margin-top:32px}
  .stalls li{grid-template-columns:1fr 24px;gap:8px 12px}
  .st-tag{grid-column:1/-1}
  .stalls li p{grid-column:1}
  .relay-box,.chains-box,.lv-fig{padding:18px 16px}
  .scroll-x{margin:0 -16px;padding:0 16px}
  .rules{grid-template-columns:1fr}
  .rules span{margin-bottom:12px}
  .apps-pans{padding:22px 18px}
  .pan-log ul{grid-template-columns:1fr}
  .arch-stack{display:none}
  .chain{flex-direction:column;align-items:flex-start}
  .ch-step{margin-left:22px;margin-top:22px}
  .ch-step::before{right:auto;left:14px;top:auto;bottom:100%;width:1.5px;height:22px;background:linear-gradient(180deg,rgb(142 162 255/.15),rgb(142 162 255/.5))}
  .ch-step::after{display:none}
  .hero .title{font-size:clamp(28px,7.6vw,36px)}
  .gains li{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .st-clock::after,.ch-step,.ch-step::after,.pan-log li,.pan-log li i::after,.lv-bar{animation:none!important}
  .pan-log li{opacity:1}.pan-log li i::after{transform:scale(1)}
}
.lv-name{font-size:14px;font-weight:500;fill:var(--hx-text-2)}
.lv-fig{padding-top:16px}
@media (max-width:760px){
  .hero-in{padding-top:44svh}
  .hero{align-items:flex-start}
}