/* MOGIX V2 — Technical Creative Studio */
:root{
  --bg:#030303;
  --panel:#080808;
  --text:#f4f4ef;
  --muted:#85857f;
  --line:rgba(255,255,255,.11);
  --green:#b8ff2c;
  --green2:#84ff00;
  --mono:"JetBrains Mono", monospace;
  --display:"Space Grotesk", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--mono);overflow-x:hidden;
}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#000}
.section{padding:130px clamp(20px,4vw,70px);position:relative}
#matrixCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3;opacity:.09}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1000;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 4px)}
.noise{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:5000;border-radius:50%}
.cursor-dot{width:6px;height:6px;background:var(--green)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(184,255,44,.6);transition:width .2s,height .2s}
.cursor-ring.hover{width:70px;height:70px}

.loader{position:fixed;inset:0;z-index:10000;background:#020202;display:grid;place-items:center;transition:transform .85s cubic-bezier(.83,0,.17,1)}
.loader.hide{transform:translateY(-100%)}
.loader-console{width:min(760px,88vw);border:1px solid var(--line);background:#050505;box-shadow:0 0 80px rgba(184,255,44,.08)}
.console-top,.loader-count{display:flex;justify-content:space-between;padding:12px 14px;font-size:10px;letter-spacing:.08em;color:#73736e;border-bottom:1px solid var(--line)}
.loader-count{border-top:1px solid var(--line);border-bottom:0}.loader-count strong{color:var(--green)}
.console-log{height:240px;padding:20px;font-size:11px;line-height:1.9;color:#9a9a95;overflow:hidden}
.console-log .ok{color:var(--green)}
.loader-progress{height:2px;background:#111}.loader-progress span{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 18px var(--green)}

.topbar{position:fixed;z-index:1500;top:0;left:0;right:0;height:74px;padding:0 clamp(20px,4vw,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(3,3,3,.72);backdrop-filter:blur(18px)}
.logo{font:600 17px var(--display);letter-spacing:-.03em}.logo span{color:var(--green)}
.sys-status{font-size:9px;color:#7f7f79;letter-spacing:.12em;display:flex;gap:8px;align-items:center}.sys-status .dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}
.topbar nav{justify-self:end;display:flex;gap:28px}.topbar nav a{font-size:9px;color:#969691;letter-spacing:.12em}
.menu-btn{display:none;background:none;border:0;color:white;width:38px;height:38px;position:relative}.menu-btn span{position:absolute;left:7px;right:7px;height:1px;background:white;top:15px}.menu-btn span:last-child{top:22px}

.hero{min-height:100svh;padding-top:120px;padding-bottom:55px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-grid,.contact-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:7.5vw 7.5vw;mask-image:linear-gradient(to bottom,transparent,black 15%,black 78%,transparent);opacity:.4}
.hero-code{position:absolute;top:105px;left:clamp(20px,4vw,70px);right:clamp(20px,4vw,70px);display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#595954}
.hero-main{position:relative;z-index:2}
.hero-kicker{font-size:10px;color:var(--green);letter-spacing:.12em;margin-bottom:30px}
.hero h1{font:700 clamp(74px,13vw,220px)/.72 var(--display);letter-spacing:-.085em;margin:0;text-transform:uppercase;max-width:1500px}
.hero h1 span{display:block;position:relative;width:max-content;max-width:100%}.hero h1 .accent{color:var(--green)}
.glitch-line::before,.glitch-line::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.glitch-line:hover::before{opacity:.6;color:#00eaff;transform:translate(5px,-2px);clip-path:inset(15% 0 55% 0)}
.glitch-line:hover::after{opacity:.6;color:#ff2d91;transform:translate(-5px,2px);clip-path:inset(58% 0 15% 0)}
.hero-sub{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;margin-top:48px;margin-left:28vw}
.hero-sub p{max-width:650px;color:#9a9a95;line-height:1.7;font-size:14px}.hero-sub strong{color:white;font-weight:500}
.hero-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;min-width:240px;border:1px solid var(--green);padding:17px 18px;font-size:10px;letter-spacing:.12em;transition:.3s}.hero-cta:hover{background:var(--green);color:#000}
.hero-cta i{font-style:normal;font-size:20px}
.hud-card{position:absolute;z-index:2;border:1px solid var(--line);background:rgba(5,5,5,.72);backdrop-filter:blur(12px);padding:14px;font-size:9px;color:#7d7d78}
.hud-title{letter-spacing:.12em;color:#5f5f5b;margin-bottom:12px}.hud-value{font:600 21px var(--display);color:white}.hud-a{right:5vw;top:19%;width:190px}.hud-b{right:5vw;bottom:17%;width:220px}
.bars{height:42px;display:flex;gap:5px;align-items:end;margin-top:12px}.bars i{flex:1;height:var(--h);background:var(--green);opacity:.75;animation:bars 1.4s ease-in-out infinite alternate}.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}.bars i:nth-child(4){animation-delay:.1s}
@keyframes bars{to{height:calc(var(--h) * .55)}}
.code-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.code-mini span{border:1px solid var(--line);padding:7px;text-align:center;color:#aaa}
.scroll-cue{position:absolute;bottom:28px;left:clamp(20px,4vw,70px);font-size:8px;letter-spacing:.13em;color:#5f5f5b;display:flex;align-items:center;gap:12px}.scroll-line{width:75px;height:1px;background:var(--line);position:relative;overflow:hidden}.scroll-line:after{content:"";position:absolute;left:-50%;top:0;width:50%;height:1px;background:var(--green);animation:scrollCue 1.8s linear infinite}@keyframes scrollCue{to{left:100%}}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;white-space:nowrap}.ticker-track{display:inline-flex;gap:24px;align-items:center;animation:ticker 24s linear infinite;font-size:10px;letter-spacing:.13em;color:#8a8a84}.ticker b{color:var(--green)}@keyframes ticker{to{transform:translateX(-50%)}}

.section-index{display:flex;gap:18px;font-size:9px;letter-spacing:.13em;color:#64645f;margin-bottom:65px}.section-index span:first-child{color:var(--green)}
.cap-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.cap-intro h2,.data-left h2,.process-title h2{font:700 clamp(54px,8.8vw,150px)/.8 var(--display);letter-spacing:-.07em;margin:0}.cap-intro h2 span,.data-left h2 span,.process-title h2 span{color:var(--green)}
.cap-intro p,.data-left p{max-width:560px;color:#85857f;line-height:1.7;font-size:14px;margin-top:35px}
.terminal{border:1px solid var(--line);background:#060606;box-shadow:0 20px 70px rgba(0,0,0,.4)}
.terminal-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--line);font-size:9px;color:#666661}.terminal-top div{display:flex;gap:6px}.terminal-top i{width:7px;height:7px;border-radius:50%;background:#333}
.terminal-body{padding:20px;font-size:11px;line-height:1.9;color:#a1a19b;min-height:240px}.prompt,.success,.green{color:var(--green)}
.terminal-line{opacity:0;transform:translateY(6px);transition:.35s}.terminal-line.show{opacity:1;transform:none}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:95px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cap-card{min-height:360px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.3s}.cap-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(184,255,44,.08));transform:translateY(100%);transition:.5s}.cap-card:hover:before{transform:none}.cap-card:hover{box-shadow:inset 0 0 0 1px rgba(184,255,44,.45)}
.card-code{font-size:9px;color:var(--green);margin-bottom:50px}.cap-card h3{font:600 clamp(28px,3.3vw,55px)/.9 var(--display);letter-spacing:-.05em;margin:0}.cap-card p{margin-top:auto;color:#7f7f79;line-height:1.6;font-size:12px}.card-tech{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.11em;color:#5f5f5a}

.data-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.visualizer{border:1px solid var(--line);background:#050505}.visualizer-head,.visualizer-bottom{display:flex;justify-content:space-between;padding:12px 14px;font-size:8px;letter-spacing:.1em;color:#64645f;border-bottom:1px solid var(--line)}.visualizer-bottom{border-top:1px solid var(--line);border-bottom:0}.live-badge{color:var(--green)}.live-badge i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:5px;box-shadow:0 0 10px var(--green)}#waveCanvas{display:block;width:100%;height:360px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:100px}.metric{border-top:1px solid var(--line);padding-top:18px;position:relative}.metric small{display:block;color:#696964;font-size:8px;letter-spacing:.12em;margin-bottom:28px}.metric strong{font:600 clamp(64px,8vw,130px)/.8 var(--display);letter-spacing:-.07em}.metric span{font-size:18px;color:var(--green)}.metric-line{height:2px;background:var(--green);margin-top:22px;transform-origin:left;animation:metricPulse 2s ease-in-out infinite alternate}@keyframes metricPulse{to{transform:scaleX(.45);opacity:.4}}

.process{padding-bottom:160px}.process-title{margin-bottom:85px}.pipeline{border-top:1px solid var(--line)}.pipe-row{display:grid;grid-template-columns:80px 1fr auto;gap:30px;align-items:center;padding:35px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.pipe-row:before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--green);transition:.5s}.pipe-row:hover:before{width:100%}.pipe-no{font-size:9px;color:#5f5f5a}.pipe-row h3{font:600 clamp(34px,5vw,74px)/.9 var(--display);letter-spacing:-.05em;margin:0 0 8px}.pipe-row p{margin:0;color:#7b7b76;font-size:12px}.pipe-state{font-size:9px;color:#62625d}.pipe-state.done{color:var(--green)}

.manifesto{overflow:hidden;padding-top:180px;padding-bottom:180px}.manifesto-code{font-size:9px;color:#5f5f5a;letter-spacing:.12em;margin-bottom:30px}.manifesto-code.end{text-align:right;margin-top:30px;margin-bottom:0}.manifesto-lines{display:flex;flex-direction:column}.manifesto-line{font:700 clamp(70px,12.5vw,200px)/.77 var(--display);letter-spacing:-.08em;white-space:nowrap}.manifesto-line.outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}.manifesto-line.accent{color:var(--green)}

.contact{min-height:100vh;overflow:hidden;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:center}.contact .section-index{position:absolute;top:80px;left:clamp(20px,4vw,70px)}.contact-main{position:relative;z-index:2}.contact-kicker{font-size:10px;letter-spacing:.13em;color:var(--green);margin-bottom:24px}.contact h2{font:700 clamp(65px,9vw,150px)/.78 var(--display);letter-spacing:-.075em;margin:0}.contact h2 span{color:var(--green)}.contact-main p{max-width:600px;color:#8a8a84;line-height:1.7;font-size:14px;margin:35px 0}
.contact-btn{display:flex;justify-content:space-between;align-items:center;width:min(520px,100%);padding:18px;border:1px solid var(--green);transition:.3s}.contact-btn:hover{background:var(--green);color:#000}.contact-btn-left{display:flex;flex-direction:column;gap:6px}.contact-btn small{font-size:8px;letter-spacing:.11em}.contact-btn strong{font:600 28px var(--display)}.contact-btn-right{font-size:30px}
.contact-console{position:relative;z-index:2}

.footer{padding-top:65px;padding-bottom:30px;border-top:1px solid var(--line)}.footer-logo{font:700 clamp(75px,17vw,280px)/.75 var(--display);letter-spacing:-.08em;color:var(--text)}.footer-logo::after{content:"::";color:var(--green)}.footer-code{display:flex;justify-content:space-between;margin-top:45px;font-size:8px;letter-spacing:.11em;color:#5d5d58}

.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:2000;display:flex;align-items:center;gap:12px;min-width:250px;padding:10px 14px 10px 10px;border:1px solid rgba(184,255,44,.5);background:#050505;border-radius:4px;box-shadow:0 0 30px rgba(184,255,44,.13);overflow:visible}.wa-core{width:42px;height:42px;background:var(--green);color:#000;display:grid;place-items:center;font-weight:700;font-size:11px;position:relative;z-index:2}.wa-text{display:flex;flex-direction:column;gap:4px}.wa-text strong{font-size:9px;letter-spacing:.12em}.wa-text small{font-size:8px;color:#6f6f69}.wa-text i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green);margin-right:4px}.wa-arrow{margin-left:auto;color:var(--green);font-size:18px}.ring{position:absolute;left:31px;top:31px;width:42px;height:42px;border:1px solid rgba(184,255,44,.4);transform:translate(-50%,-50%);animation:ringPulse 2.4s infinite;pointer-events:none}.r2{animation-delay:.8s}.r3{animation-delay:1.6s}@keyframes ringPulse{to{width:110px;height:110px;opacity:0}}

.mobile-menu{position:fixed;inset:0;z-index:1200;background:#030303;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;gap:12px;transform:translateY(-100%);transition:.65s cubic-bezier(.83,0,.17,1)}.mobile-menu.open{transform:none}.mobile-menu a{font:700 13vw/.9 var(--display);letter-spacing:-.06em;border-bottom:1px solid var(--line);padding:12px 0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:none}
.blink{animation:blink .8s steps(1) infinite}@keyframes blink{50%{opacity:0}}

@media(max-width:980px){
  .cursor-dot,.cursor-ring{display:none}.topbar{grid-template-columns:1fr auto}.sys-status{display:none}.topbar nav{display:none}.menu-btn{display:block}
  .hero h1{font-size:16vw}.hero-sub{margin-left:0;grid-template-columns:1fr;margin-top:35px}.hud-card{display:none}
  .cap-layout,.data-grid,.contact{grid-template-columns:1fr}.terminal{margin-top:25px}.cap-grid{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:1fr}.contact{padding-top:150px}.contact .section-index{top:55px}.contact-console{margin-top:20px}
}
@media(max-width:600px){
  .section{padding:100px 20px}.topbar{padding:0 20px}.hero{padding-top:115px;padding-bottom:45px}.hero-code{left:20px;right:20px}.hero-code span:nth-child(2){display:none}
  .hero h1{font-size:19vw}.hero-sub p{font-size:13px}.cap-grid{grid-template-columns:1fr}.cap-card{min-height:300px}
  .manifesto-line{font-size:18vw}.pipe-row{grid-template-columns:45px 1fr}.pipe-state{grid-column:2}.whatsapp-float{right:14px;bottom:14px;min-width:0}.wa-text,.wa-arrow{display:none}
  .footer-code{flex-direction:column;gap:12px}
}

/* SEO content: visually integrated, not keyword stuffing */
.seo-copy{padding:70px clamp(20px,4vw,70px) 110px;border-top:1px solid var(--line);background:#050505}
.seo-copy-inner{max-width:980px}
.seo-copy h2{font:600 clamp(30px,4.5vw,64px)/1 var(--display);letter-spacing:-.045em;margin:0 0 25px}
.seo-copy p{max-width:900px;color:#85857f;line-height:1.8;font-size:13px;margin:0 0 14px}

/* =========================
   V4 FULL-STACK EXTENSIONS
   ========================= */
.cap-grid{grid-template-columns:repeat(4,1fr)}
.architecture{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.architecture-head{display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:90px}
.architecture-head h2{font:700 clamp(58px,8.8vw,150px)/.8 var(--display);letter-spacing:-.075em;margin:0}
.architecture-head h2 span{color:var(--green)}
.architecture-head p{color:#85857f;line-height:1.8;font-size:13px;max-width:560px;margin:0 0 8px}

.system-map{
  display:grid;
  grid-template-columns:1fr 70px 1fr 70px 1fr 70px 1fr 70px 1fr;
  gap:0;align-items:center;position:relative;margin-bottom:70px;
}
.sys-node{
  min-height:170px;border:1px solid var(--line);background:#050505;padding:18px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden;transition:.35s;
}
.sys-node:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(184,255,44,.14),transparent 55%);opacity:0;transition:.35s}
.sys-node:hover:before{opacity:1}.sys-node:hover{border-color:rgba(184,255,44,.45);transform:translateY(-6px)}
.sys-node small{font-size:8px;color:var(--green);letter-spacing:.12em}
.sys-node strong{font:600 clamp(18px,2vw,30px) var(--display);letter-spacing:-.04em}
.sys-node span{font-size:8px;color:#6e6e69;letter-spacing:.08em}
.sys-link{height:1px;background:var(--line);position:relative;overflow:hidden}
.sys-link i{position:absolute;left:-40%;top:0;width:40%;height:1px;background:var(--green);box-shadow:0 0 14px var(--green);animation:dataMove 1.8s linear infinite}
.link-2 i{animation-delay:.35s}.link-3 i{animation-delay:.7s}.link-4 i{animation-delay:1.05s}
@keyframes dataMove{to{left:110%}}

.backend-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.backend-panel{border:1px solid var(--line);background:#050505;min-height:260px}
.panel-head{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.1em;color:#666661}
.panel-status{color:var(--green)}
.panel-code,.automation-log{padding:18px;font-size:10px;line-height:1.9;color:#8d8d87}
.panel-code p,.automation-log p{margin:0}
.db-table{padding:18px}.db-table div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:10px;color:#83837d}.db-table div:last-child{border-bottom:0}.db-table b{font-weight:500;color:#d7d7d1}
.automation-flow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:22px 18px;border-bottom:1px solid var(--line)}
.automation-flow span{border:1px solid rgba(184,255,44,.35);padding:8px 10px;font-size:8px;color:var(--green)}
.automation-flow i{font-style:normal;color:#5d5d58}

.hero:after{
  content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.06;
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(184,255,44,.4),transparent 20%);
  animation:heroSweep 14s linear infinite;
}
@keyframes heroSweep{to{transform:rotate(360deg)}}

.cap-card:nth-child(5),.cap-card:nth-child(6),.cap-card:nth-child(7),.cap-card:nth-child(8){
  background:linear-gradient(180deg,#050505,#070a04);
}

@media(max-width:1200px){
  .system-map{grid-template-columns:1fr 40px 1fr 40px 1fr;row-gap:28px}
  .system-map .link-3,.system-map .backend,.system-map .link-4,.system-map .db{grid-row:2}
  .system-map .backend{grid-column:2/4}.system-map .link-3{display:none}.system-map .link-4{grid-column:4}.system-map .db{grid-column:5}
  .backend-panels{grid-template-columns:1fr 1fr}.backend-panel:last-child{grid-column:1/-1}
}
@media(max-width:980px){
  .architecture-head{grid-template-columns:1fr;gap:30px}.system-map{display:grid;grid-template-columns:1fr;gap:12px}
  .sys-link{height:35px;width:1px;justify-self:center}.sys-link i{top:-40%;left:0;width:1px;height:40%;animation:dataMoveVertical 1.6s linear infinite}
  .system-map .link-3,.system-map .backend,.system-map .link-4,.system-map .db{grid-row:auto;grid-column:auto}
  @keyframes dataMoveVertical{to{top:110%}}
  .backend-panels{grid-template-columns:1fr}.backend-panel:last-child{grid-column:auto}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .cap-grid{grid-template-columns:1fr}.sys-node{min-height:130px}
}

/* =========================
   V5 FINAL HUD + WHATSAPP
   ========================= */
.wa-core svg{width:22px;height:22px;display:block}
.hud-b{top:11.5%;bottom:auto}
.hud-c{
  right:5vw;
  top:39%;
  width:240px;
}
.flow-head{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#70706b;letter-spacing:.08em;margin-bottom:12px}
.flow-head b{font-weight:500;color:var(--green);display:flex;align-items:center;gap:5px}
.flow-head b i{width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:pulseNode 1.2s infinite alternate}
@keyframes pulseNode{to{opacity:.35}}
.flow-lines{display:flex;flex-direction:column;gap:9px}
.flow-lines div{display:grid;grid-template-columns:48px 1fr 52px;gap:8px;align-items:center;font-size:7px;color:#797974}
.flow-lines i{height:1px;background:var(--line);position:relative;overflow:hidden}
.flow-lines i:after{content:"";position:absolute;left:-30%;top:0;width:30%;height:1px;background:var(--green);box-shadow:0 0 8px var(--green);animation:flowPacket 1.5s linear infinite}
.flow-lines div:nth-child(2) i:after{animation-delay:.3s}
.flow-lines div:nth-child(3) i:after{animation-delay:.6s}
@keyframes flowPacket{to{left:110%}}
.flow-lines strong{font-weight:500;color:#b9b9b3;text-align:right}
.latency{display:flex;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid var(--line);font-size:8px;color:#666661}
.latency strong{font-weight:500;color:var(--green)}
@media(max-width:980px){
  .hud-c{display:none}
}

/* =========================
   V6 HERO HUD POSITION FIX
   ========================= */

/* LIVE_RENDER stays upper-right */
.hud-a{
  right:5vw;
  top:18%;
  width:190px;
}

/* STACK moved to a free lower-left pocket, away from CTA and other HUDs */
.hud-b{
  left:5vw;
  right:auto;
  top:auto;
  bottom:13%;
  width:220px;
}

/* REQUEST_FLOW remains mid-right */
.hud-c{
  right:5vw;
  top:42%;
  width:240px;
}

/* Keep HUDs visually separated */
.hud-a,.hud-b,.hud-c{
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

/* On slightly smaller desktop screens, reduce HUD footprint */
@media(max-width:1250px) and (min-width:981px){
  .hud-a{right:3vw;top:17%;width:175px}
  .hud-b{left:3vw;bottom:11%;width:205px}
  .hud-c{right:3vw;top:44%;width:220px}
}

/* V7 — final clean right-side HUD layout */
.hud-a{
  left:auto;
  right:4vw;
  top:15%;
  bottom:auto;
  width:190px;
}
.hud-c{
  left:auto;
  right:4vw;
  top:35%;
  bottom:auto;
  width:240px;
}
.hud-b{
  left:auto;
  right:4vw;
  top:auto;
  bottom:7%;
  width:220px;
}

/* keep all three in one clean right-side column */
@media(max-width:1250px) and (min-width:981px){
  .hud-a{right:2vw;top:14%;width:175px}
  .hud-c{right:2vw;top:35%;width:210px}
  .hud-b{right:2vw;bottom:5%;width:195px}
}

/* =========================
   V8 FOOTER SYSTEM BUILD
   ========================= */
.footer-logo::after{content:none!important}

.footer-build{
  display:flex;
  align-items:flex-end;
  gap:.01em;
  font:700 clamp(75px,17vw,280px)/.75 var(--display);
  letter-spacing:-.08em;
  color:var(--text);
  white-space:nowrap;
  overflow:visible;
}

.footer-build .build-char{
  display:inline-block;
  position:relative;
  opacity:0;
  transform:translateY(28px) scaleY(.35);
  filter:blur(10px);
  clip-path:inset(100% 0 0 0);
}

.footer-build .punctuation{
  color:var(--green);
  text-shadow:0 0 22px rgba(184,255,44,.45);
}

.footer-build.build-active .build-char{
  animation:footerConstruct .72s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 95ms);
}

.footer-build.build-active .build-char::before,
.footer-build.build-active .build-char::after{
  content:"";
  position:absolute;
  inset:-.08em -.03em;
  border:1px solid rgba(184,255,44,.16);
  opacity:0;
  pointer-events:none;
}

.footer-build.build-active .build-char::before{
  animation:footerBox .55s ease forwards;
  animation-delay:calc(var(--i) * 95ms);
}

.footer-build.build-active .build-char::after{
  border-color:rgba(255,255,255,.12);
  animation:footerScanBox .8s ease forwards;
  animation-delay:calc(var(--i) * 95ms + 120ms);
}

@keyframes footerConstruct{
  0%{
    opacity:0;
    transform:translateY(28px) scaleY(.35);
    filter:blur(10px);
    clip-path:inset(100% 0 0 0);
  }
  45%{
    opacity:1;
    filter:blur(1px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scaleY(1);
    filter:blur(0);
    clip-path:inset(0 0 0 0);
  }
}

@keyframes footerBox{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.18)}
}

@keyframes footerScanBox{
  0%{opacity:0;transform:translateY(-18%)}
  20%{opacity:.9}
  100%{opacity:0;transform:translateY(18%)}
}

/* technical floor line under the logo */
.footer-build::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-24px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--green),rgba(255,255,255,.18),transparent);
  transform:scaleX(0);
  transform-origin:left;
  opacity:.8;
}
.footer-build.build-active::before{
  animation:footerLine 1.5s cubic-bezier(.16,1,.3,1) .2s forwards;
}
@keyframes footerLine{
  to{transform:scaleX(1)}
}

/* small loading cursor at the end */
.footer-build.build-active::after{
  content:"";
  width:.045em;
  height:.72em;
  margin-left:.06em;
  background:var(--green);
  box-shadow:0 0 18px rgba(184,255,44,.5);
  animation:footerCursor .55s steps(1) 6;
  opacity:0;
}
@keyframes footerCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@media(max-width:600px){
  .footer-build{font-size:18vw;letter-spacing:-.09em}
}

/* =========================
   V9 — STACK FINAL POSITION
   ========================= */

/* LIVE_RENDER stays upper-right */
.hud-a{
  right:4vw;
  top:16%;
  width:190px;
}

/* STACK sits directly LEFT of LIVE_RENDER, same vertical level */
.hud-b{
  left:auto;
  right:calc(4vw + 210px);
  top:16%;
  bottom:auto;
  width:220px;
}

/* REQUEST_FLOW stays below both, without touching CTA */
.hud-c{
  right:4vw;
  top:41%;
  width:240px;
}

/* spacing for medium desktop */
@media(max-width:1320px) and (min-width:981px){
  .hud-a{
    right:2vw;
    top:15%;
    width:175px;
  }
  .hud-b{
    right:calc(2vw + 190px);
    top:15%;
    width:195px;
  }
  .hud-c{
    right:2vw;
    top:42%;
    width:215px;
  }
}

/* if viewport gets too tight, hide STACK before it can overlap hero content */
@media(max-width:1120px) and (min-width:981px){
  .hud-b{display:none}
}

/* =========================
   V10 CLEAN FOOTER BUILD
   ========================= */

/* hard reset old footer animation layers */
.footer-build,
.footer-build::before,
.footer-build::after,
.footer-build .build-char,
.footer-build .build-char::before,
.footer-build .build-char::after{
  animation:none!important;
  content:none;
  box-shadow:none;
  text-shadow:none;
}

.footer{
  position:relative;
  background:#030303;
  overflow:hidden;
}

.footer-build{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  padding:48px 0 34px;
  min-height:250px;
}

.footer-grid-logo{
  position:absolute;
  inset:12px 0 auto 0;
  height:185px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:8px;
  pointer-events:none;
  opacity:.9;
}

.grid-cell{
  border:1px solid rgba(184,255,44,.18);
  background:rgba(184,255,44,.015);
  opacity:0;
  transform:scale(.72);
}

.footer-build.build-active .grid-cell{
  animation:gridAssemble .38s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 52ms);
}

@keyframes gridAssemble{
  0%{opacity:0;transform:scale(.72)}
  55%{opacity:.9;transform:scale(1.03);background:rgba(184,255,44,.06)}
  100%{opacity:.28;transform:scale(1);background:rgba(184,255,44,.015)}
}

.footer-wordmark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  gap:.02em;
  font:700 clamp(74px,16vw,260px)/.78 var(--display);
  letter-spacing:-.085em;
  white-space:nowrap;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateY(14px);
}

.footer-wordmark .punctuation{
  color:var(--green);
  text-shadow:0 0 24px rgba(184,255,44,.28);
}

.footer-build.build-active .footer-wordmark{
  animation:wordmarkReveal 1.05s cubic-bezier(.16,1,.3,1) .48s forwards;
}

@keyframes wordmarkReveal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(14px)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)}
}

.footer-build-status{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:8px;
  letter-spacing:.12em;
  color:#656560;
  opacity:0;
}

.footer-build-status strong{
  color:var(--green);
  font-weight:500;
}

.footer-build.build-active .footer-build-status{
  animation:statusIn .45s ease 1.25s forwards;
}

@keyframes statusIn{
  to{opacity:1}
}

/* subtle scan pass after assembly */
.footer-build.build-active:after{
  content:"";
  position:absolute;
  left:-25%;
  top:0;
  width:22%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(184,255,44,.07),transparent);
  transform:skewX(-18deg);
  animation:footerScan 1.25s ease 1.05s forwards!important;
}
@keyframes footerScan{
  to{left:115%}
}

@media(max-width:700px){
  .footer-build{min-height:190px;padding-top:38px}
  .footer-grid-logo{height:130px;gap:5px}
  .footer-wordmark{font-size:17vw}
}


/* =========================
   V12 MULTILANGUAGE — SAFE
   ========================= */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:4px;
  padding-left:17px;
  border-left:1px solid rgba(255,255,255,.10);
}
.lang-switch a{
  font-size:9px!important;
  color:#6f6f69!important;
  letter-spacing:.12em;
}
.lang-switch a.active,
.lang-switch a:hover{
  color:var(--green)!important;
}
.lang-switch i{
  font-style:normal;
  color:#373733;
  font-size:8px;
}

.mobile-lang{display:none}

@media(max-width:980px){
  /* Keep original header grid untouched: logo + menu */
  .mobile-lang{
    display:flex;
    position:absolute;
    right:66px;
    top:50%;
    transform:translateY(-50%);
    align-items:center;
    gap:4px;
    z-index:2;
    font-size:9px;
    letter-spacing:.12em;
  }
  .mobile-lang a{color:#6f6f69}
  .mobile-lang a.active{color:var(--green)}
  .mobile-lang i{font-style:normal;color:#373733}
}