/* WEQEX v4 — immersive system journey + mobile-first refinement */
:root{
  --qx-cyan:#7cfaff;
  --qx-blue:#5d7cff;
  --qx-violet:#a27bff;
  --qx-ink:#05070a;
  --qx-panel:rgba(8,13,20,.74);
  --qx-grid:rgba(153,208,255,.055);
}

/* ---------- HEADER / BRAND ---------- */
.site-header{
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  border-radius:0;
}
.brand{position:relative}
.brand:after{content:"SYSTEM 05";font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:#526173;position:absolute;left:45px;top:28px;white-space:nowrap}

/* ---------- HERO V4 ---------- */
.hero{isolation:isolate;background:
  radial-gradient(circle at 77% 45%,rgba(73,110,255,.12),transparent 24%),
  radial-gradient(circle at 61% 0%,rgba(112,247,255,.055),transparent 30%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent 0 49.95%,rgba(255,255,255,.035) 50%,transparent 50.05%),
  linear-gradient(0deg,transparent 0 49.95%,rgba(255,255,255,.025) 50%,transparent 50.05%);background-size:100% 100%;mask-image:linear-gradient(to right,transparent 0,#000 35%,#000 100%)}
.hero-orbit{display:none}
.hero-content{z-index:6}
.hero h1{max-width:950px}
.hero-outline{-webkit-text-stroke:1px rgba(232,245,255,.58);color:transparent}
.hero-core-v4{position:absolute;z-index:2;right:max(-40px,calc((100vw - var(--max))/2 - 120px));top:50%;width:min(650px,48vw);aspect-ratio:1;transform:translateY(-49%);transform-style:preserve-3d;perspective:1100px;pointer-events:none;will-change:transform}
.hero-core-v4 .qx-grid-plane{position:absolute;inset:13%;transform:rotateX(68deg) rotateZ(-25deg);border:1px solid rgba(124,250,255,.13);background-image:linear-gradient(var(--qx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--qx-grid) 1px,transparent 1px);background-size:34px 34px;box-shadow:0 0 100px rgba(93,124,255,.08);mask-image:radial-gradient(circle,#000 0 45%,transparent 73%)}
.hero-core-v4 .qx-sphere{position:absolute;left:50%;top:50%;width:196px;height:196px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 38% 31%,rgba(255,255,255,.22),rgba(124,250,255,.15) 12%,rgba(77,99,255,.13) 38%,rgba(5,7,10,.96) 70%);border:1px solid rgba(124,250,255,.38);box-shadow:0 0 110px rgba(72,121,255,.28),0 0 40px rgba(124,250,255,.1) inset}
.hero-core-v4 .qx-sphere:before,.hero-core-v4 .qx-sphere:after{content:"";position:absolute;border-radius:50%;inset:-32px;border:1px solid rgba(124,250,255,.15);animation:v4Pulse 3.2s ease-out infinite}
.hero-core-v4 .qx-sphere:after{inset:-68px;border-color:rgba(162,123,255,.11);animation-delay:-1.6s}
.hero-core-v4 .qx-logo{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;letter-spacing:.18em;font-size:21px;text-shadow:0 0 20px rgba(124,250,255,.38)}
.hero-core-v4 .qx-logo small{position:absolute;bottom:53px;font:700 7px/1 ui-monospace,monospace;letter-spacing:.16em;color:#6a7a8e}
.hero-core-v4 .qx-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(124,250,255,.14);border-radius:50%;transform-style:preserve-3d}
.hero-core-v4 .r1{width:320px;height:320px;margin:-160px;transform:rotateX(66deg) rotateZ(22deg);animation:v4Spin 18s linear infinite}
.hero-core-v4 .r2{width:430px;height:430px;margin:-215px;transform:rotateY(68deg) rotateZ(-28deg);border-color:rgba(162,123,255,.14);animation:v4SpinReverse 25s linear infinite}
.hero-core-v4 .r3{width:530px;height:530px;margin:-265px;transform:rotateX(76deg) rotateZ(42deg);border-style:dashed;opacity:.55;animation:v4Spin 38s linear infinite}
.hero-core-v4 .qx-tag{position:absolute;padding:8px 11px;border:1px solid rgba(255,255,255,.1);background:rgba(4,7,11,.78);backdrop-filter:blur(10px);font:800 8px/1 ui-monospace,monospace;letter-spacing:.12em;color:#9ba9ba;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hero-core-v4 .qx-tag b{color:var(--qx-cyan)}
.hero-core-v4 .t1{left:8%;top:20%}.hero-core-v4 .t2{right:5%;top:29%}.hero-core-v4 .t3{left:1%;bottom:25%}.hero-core-v4 .t4{right:8%;bottom:16%}.hero-core-v4 .t5{left:43%;top:3%}.hero-core-v4 .t6{left:44%;bottom:1%}
.hero-console{z-index:5;transform:translateZ(0);border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
@keyframes v4Pulse{0%{transform:scale(.83);opacity:0}30%{opacity:1}100%{transform:scale(1.1);opacity:0}}
@keyframes v4Spin{to{transform:rotateX(66deg) rotateZ(382deg)}}
@keyframes v4SpinReverse{to{transform:rotateY(68deg) rotateZ(-388deg)}}

/* ---------- SYSTEM JOURNEY ---------- */
.system-journey{position:relative;height:610vh;width:100%;margin:0;z-index:4;background:linear-gradient(180deg,transparent,rgba(6,9,14,.75) 6%,rgba(6,9,14,.9) 94%,transparent)}
.journey-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;padding:90px max(24px,calc((100vw - var(--max))/2));isolation:isolate}
.journey-sticky:before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(circle at calc(23% + var(--journey-progress,0)*50%) 50%,rgba(85,102,255,.18),transparent 24%),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,56px 56px,56px 56px}
.journey-sticky:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 0 4%,transparent 22% 78%,var(--bg) 96% 100%);pointer-events:none}
.journey-shell{width:100%;height:min(720px,calc(100svh - 130px));display:grid;grid-template-columns:minmax(260px,.75fr) minmax(480px,1.35fr) minmax(300px,.82fr);gap:26px;align-items:stretch;position:relative}
.journey-label{align-self:start;padding-top:12px}
.journey-label .kicker{margin-bottom:20px}.journey-label h2{font-size:clamp(44px,5.1vw,76px);line-height:.94;letter-spacing:-.055em;margin:0 0 20px;max-width:520px}.journey-label p{color:#8290a3;max-width:360px;font-size:15px}.journey-counter{margin-top:48px;font:700 10px/1 ui-monospace,monospace;color:#657387;letter-spacing:.14em}.journey-counter strong{display:inline-block;color:#e7f8ff;font-size:34px;letter-spacing:-.05em;margin-right:7px}
.journey-visual{position:relative;border:1px solid rgba(255,255,255,.08);overflow:hidden;background:radial-gradient(circle at center,rgba(69,91,255,.14),transparent 34%),rgba(4,7,11,.52);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));perspective:1200px}
.journey-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(124,250,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,250,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle at center,#000,transparent 75%)}
.journey-axis{position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(calc(56deg - var(--journey-progress,0)*9deg)) rotateZ(calc(-24deg + var(--journey-progress,0)*62deg));transform-style:preserve-3d;transition:filter .25s ease}
.journey-axis .axis-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(124,250,255,.19);box-shadow:0 0 50px rgba(76,102,255,.06) inset}.journey-axis .axis-ring:nth-child(2){inset:14%;border-color:rgba(162,123,255,.22);transform:rotateX(65deg)}.journey-axis .axis-ring:nth-child(3){inset:29%;border-style:dashed;opacity:.72;transform:rotateY(64deg)}
.journey-axis .axis-core{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%) rotateZ(calc(24deg - var(--journey-progress,0)*62deg));border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.18),rgba(124,250,255,.16) 10%,rgba(76,96,255,.16) 35%,rgba(5,8,13,.97) 72%);border:1px solid rgba(124,250,255,.34);box-shadow:0 0 80px rgba(78,104,255,.3)}
.journey-axis .axis-core strong{font-size:14px;letter-spacing:.15em}.journey-axis .axis-core span{position:absolute;bottom:29px;font:700 7px/1 ui-monospace,monospace;letter-spacing:.15em;color:#6d7b8d}
.journey-route{position:absolute;inset:0;pointer-events:none}.route-node{position:absolute;width:78px;height:78px;border:1px solid rgba(255,255,255,.11);background:rgba(5,8,13,.86);display:grid;place-items:center;text-align:center;font:800 8px/1.2 ui-monospace,monospace;letter-spacing:.08em;color:#6f7c8f;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:.5s cubic-bezier(.2,.7,.2,1);box-shadow:0 15px 36px rgba(0,0,0,.26)}
.route-node:after{content:attr(data-index);position:absolute;right:7px;top:7px;font-size:7px;color:#405064}.route-node.active{color:#eefcff;border-color:rgba(124,250,255,.45);background:linear-gradient(135deg,rgba(124,250,255,.11),rgba(92,91,255,.12));box-shadow:0 0 45px rgba(84,108,255,.18),0 16px 38px rgba(0,0,0,.3);transform:scale(1.14)}
.route-node.complete{border-color:rgba(115,247,177,.22);color:#86ad9b}.rn0{left:7%;top:10%}.rn1{right:8%;top:12%}.rn2{left:5%;top:43%}.rn3{right:5%;top:43%}.rn4{left:16%;bottom:10%}.rn5{right:16%;bottom:9%}
.journey-beam{position:absolute;left:50%;top:50%;width:70%;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(124,250,255,.4),transparent);opacity:.16;filter:drop-shadow(0 0 6px rgba(124,250,255,.5))}.jb0{transform:rotate(-150deg)}.jb1{transform:rotate(-28deg)}.jb2{transform:rotate(180deg)}.jb3{transform:rotate(0deg)}.jb4{transform:rotate(145deg)}.jb5{transform:rotate(35deg)}
.journey-copy{position:relative;border-left:1px solid rgba(255,255,255,.07);padding-left:26px;overflow:hidden}.journey-step{position:absolute;inset:0 0 auto 26px;top:50%;transform:translateY(calc(-50% + 32px));opacity:0;pointer-events:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1)}.journey-step.active{opacity:1;transform:translateY(-50%);pointer-events:auto}.journey-step .step-code{font:800 9px/1 ui-monospace,monospace;letter-spacing:.15em;color:var(--qx-cyan)}.journey-step h3{font-size:clamp(36px,4vw,58px);line-height:.95;letter-spacing:-.05em;margin:18px 0 18px}.journey-step p{font-size:15px;color:#8794a7;max-width:380px}.journey-step ul{list-style:none;margin:25px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.07)}.journey-step li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055);font:700 9px/1.3 ui-monospace,monospace;letter-spacing:.08em;color:#7b899c}.journey-step li b{color:#dce9f5;font-weight:800}.journey-rail{position:absolute;left:0;right:0;bottom:4px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px}.journey-rail button{position:relative;height:38px;padding:0;border:0;border-top:1px solid rgba(255,255,255,.08);background:transparent;color:#556276;font:700 8px/1 ui-monospace,monospace;letter-spacing:.1em;text-align:left}.journey-rail button:before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--qx-cyan);transition:.35s}.journey-rail button.active{color:#cfebf3}.journey-rail button.active:before,.journey-rail button.complete:before{width:100%}.journey-rail button.complete{color:#718c82}

/* ---------- V4 surface language ---------- */
.product-card,.service-tile,.pricing-grid article,.ai-services article,.lead-form,.module-terminal,.brand-poster,.brand-principles article{
  border-radius:0!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.product-card:before,.service-tile:before,.pricing-grid article:before{border-radius:0!important}
.service-tile:after,.pricing-grid article:after,.product-card:after{content:"QX/" attr(data-qx);position:absolute;top:12px;right:14px;font:700 7px/1 ui-monospace,monospace;letter-spacing:.12em;color:#455366;pointer-events:none}
.section-head h2{max-width:1100px}

/* ---------- MOBILE EXPERIENCE ---------- */
@media(max-width:1080px){
  .hero-core-v4{width:560px;right:-210px;opacity:.72}
  .journey-shell{grid-template-columns:.8fr 1.25fr;grid-template-rows:auto 1fr}.journey-label{grid-column:1/-1;display:flex;justify-content:space-between;gap:30px;align-items:end}.journey-label h2{font-size:44px;margin-bottom:0}.journey-label p{margin-bottom:0}.journey-counter{margin-top:0}.journey-copy{min-width:260px}
}
@media(max-width:760px){
  .brand:after{display:none}.site-header{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
  .hero{padding-top:110px;padding-bottom:52px;min-height:auto;display:block}.hero:before{display:none}.hero-content{position:relative}.hero h1{font-size:clamp(54px,17vw,82px);margin-bottom:22px}.hero-lead{font-size:16px}.hero-meta{margin-top:30px}.hero-core-v4{position:relative;right:auto;top:auto;width:118vw;max-width:none;margin:5px -27vw -145px 5vw;transform:none!important;opacity:.78;height:auto}.hero-core-v4 .qx-tag{font-size:7px;padding:7px 9px}.hero-core-v4 .qx-sphere{width:150px;height:150px}.hero-core-v4 .qx-logo{font-size:16px}.hero-core-v4 .qx-logo small{bottom:39px}.hero-console{display:none}.hero-actions .btn{min-height:50px}.hero .scroll-cue{display:none}
  .system-journey{height:auto;width:calc(100% - 0px);background:rgba(5,8,13,.62);padding:76px 0 86px}.journey-sticky{position:relative;height:auto;display:block;overflow:visible;padding:0 14px}.journey-shell{height:auto;display:block}.journey-label{display:block;padding:0;margin-bottom:32px}.journey-label h2{font-size:clamp(42px,13vw,60px);margin:13px 0 17px}.journey-label p{font-size:15px}.journey-counter{display:none}.journey-visual{height:390px;margin-bottom:22px}.journey-axis{width:70%}.journey-axis .axis-core{width:94px;height:94px}.route-node{width:63px;height:63px;font-size:7px}.rn0{left:4%;top:7%}.rn1{right:4%;top:8%}.rn2{left:2%;top:43%}.rn3{right:2%;top:43%}.rn4{left:9%;bottom:8%}.rn5{right:9%;bottom:8%}
  .journey-copy{border-left:0;padding:0;overflow-x:auto;overflow-y:visible;display:flex;gap:10px;scroll-snap-type:x mandatory;scrollbar-width:none}.journey-copy::-webkit-scrollbar{display:none}.journey-step{position:relative;inset:auto;top:auto;transform:none!important;opacity:1!important;pointer-events:auto;min-width:87vw;min-height:340px;padding:22px;border:1px solid rgba(255,255,255,.08);background:rgba(8,12,18,.72);scroll-snap-align:center;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}.journey-step h3{font-size:42px}.journey-step p{font-size:14px}.journey-rail{position:relative;bottom:auto;margin-top:16px;overflow-x:auto;display:flex;gap:0}.journey-rail button{min-width:92px}.journey-sticky:after{display:none}
  .section{padding-top:82px;padding-bottom:82px}.ecosystem{padding-top:96px}
}
@media(prefers-reduced-motion:reduce){.hero-core-v4 .qx-ring,.hero-core-v4 .qx-sphere:before,.hero-core-v4 .qx-sphere:after{animation:none!important}.system-journey{height:auto}.journey-sticky{position:relative;height:auto}.journey-step{transition:none}}


/* v4.1 logo swap */
.brand{gap:0;align-items:flex-start;position:relative}
.brand-lockup{display:block;width:176px;height:auto;filter:drop-shadow(0 0 18px rgba(84,215,255,.18))}
.brand .brand-word,.brand .brand-mark-v3{display:none!important}
.brand:after{left:132px;top:34px;font-size:7px;letter-spacing:.14em}
.brand-poster img,.logo-stage img{width:min(520px,80%);height:auto}
@media(max-width:760px){.brand-lockup{width:142px}.brand:after{display:none}}