.water-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s ease;pointer-events:none}
.video-ready .water-video{opacity:1}.video-ready #water,.video-ready #effects,.video-ready .reflection,.video-ready .drop,.video-ready .drop-reflection,.video-ready .atmosphere{visibility:hidden}
.intro h1{animation:title-arrive .6s ease-out both}@keyframes title-arrive{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.pillar span{position:relative}.pillar span:after{content:'';position:absolute;bottom:-5px;left:25%;width:50%;height:1px;background:#80e5ff;transform:scaleX(0);transition:transform .2s}.pillar:hover span:after,.pillar:focus-visible span:after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.intro h1{animation:none}.water-video{display:none}.pillar span:after{transition:none}}

.water-video{object-fit:fill}.video-configured #water,.video-configured #effects,.video-configured .reflection,.video-configured .drop,.video-configured .drop-reflection,.video-configured .atmosphere{visibility:hidden!important}.video-configured .poster{background-size:100% 100%;opacity:1!important}.video-configured .shade{z-index:1;pointer-events:none;background:linear-gradient(#00112c55,transparent 48%,#00112622)}

.video-configured .pillar svg{opacity:1}.video-configured .pillar span{color:#eaf7ff}

/* Brand choreography: logo silhouette comes directly from the supplied master. */
.video-configured .intro h1{animation:none;will-change:transform;transform-origin:50% 50%}
.video-configured .intro p,.video-configured .actions{will-change:opacity}
.brand-stage{position:absolute;left:15%;width:70%;bottom:40%;aspect-ratio:2464/993;pointer-events:none;z-index:1;perspective:1200px}
.brand-mark{position:absolute;inset:0;transform-origin:50% 100%;filter:drop-shadow(0 7px 8px #00142680);will-change:transform,opacity}
.logo-depth,.logo-face,.logo-sheen{position:absolute;inset:0;mask:url('assets/quik-original.png') center/100% 100% no-repeat;-webkit-mask:url('assets/quik-original.png') center/100% 100% no-repeat}
.logo-depth{background:#08324f;transform:translate(0,5px)}
.logo-face{background:linear-gradient(145deg,#c2f3ff 0%,#327fa5 14%,#0c3657 29%,#93d5e9 40%,#153f61 51%,#5cabcc 66%,#d7f7ff 76%,#174868 88%,#9ed9ee);box-shadow:inset 0 0 22px #89dbff}
.logo-color,.logo-rim{position:absolute;width:100%;height:100%;object-fit:contain}.logo-color{opacity:.2;mix-blend-mode:screen;filter:brightness(2)}.logo-rim{filter:url(#glass-rim);opacity:.8}
.logo-sheen{background:linear-gradient(110deg,transparent 35%,#dcf9ffb0 49%,transparent 63%);background-size:220% 100%;background-position:var(--sheen) 0;opacity:var(--shine)}
.brand-reflection{position:absolute;inset:0;top:100%;height:100%;transform-origin:50% 0;filter:blur(1.3px);mask:linear-gradient(transparent,#000);pointer-events:none}.brand-reflection img{width:100%;height:100%;filter:brightness(2.2) saturate(.3)}
.brand-waterline{position:absolute;left:-7%;bottom:-2%;width:114%;height:9%;border-radius:50%;border-bottom:1px solid #a0e8ff88;box-shadow:0 3px 8px #68d4fa25;opacity:calc(.2 + var(--rise)*.5)}
.runoff{position:absolute;bottom:5%;width:2px;height:10px;border-radius:50%;background:linear-gradient(transparent,#b9f3ff);opacity:0}.runoff-a{left:30%}.runoff-b{left:73%}
.touch-drop{position:absolute;width:clamp(24px,3.3vw,46px);height:auto;left:50%;top:47%;pointer-events:none;z-index:1;filter:drop-shadow(0 3px 8px #ffc26935)}.touch-drop svg{display:block;width:100%}
.brand-followup{position:absolute;top:calc(60% + 34px);left:0;width:100%;text-align:center;z-index:3;opacity:0}.brand-followup p{font-size:clamp(16px,1.6vw,25px);margin:0 0 14px;font-weight:500}.brand-followup .pill{padding:12px 24px;font-size:13px}
.brand-followup[inert],.actions[inert]{pointer-events:none}
@media(max-width:600px){.brand-stage{left:15%;width:70%;bottom:42%}.brand-followup{top:calc(58% + 32px)}.brand-followup p{font-size:17px;margin-bottom:12px}.brand-followup .pill{font-size:12px;padding:12px 22px}.touch-drop{top:43%;width:27px}}
@media(prefers-reduced-motion:reduce){.brand-mark{will-change:auto}.touch-drop{display:none}}

.logo-color{opacity:.85;mix-blend-mode:normal;filter:none;clip-path:polygon(64% 0,74% 0,74% 23%,64% 23%)}
.brand-reflection{mask:linear-gradient(#000,transparent)}.brand-reflection img{transform:scaleY(-1)}
.video-configured .intro h1{white-space:nowrap}
@media(max-width:600px){.video-configured .pillars{bottom:7%;padding:6px 3px;row-gap:0}.video-configured .pillar{padding:7px 3px}.video-configured .pillar svg{height:20px;width:20px;margin-bottom:5px}.video-configured .pillar small{height:10px;line-height:10px;margin-top:4px;font-size:6px}.video-configured .pillar span{font-size:10px}.video-configured .pillar+.pillar:before{top:9px;height:38px}}

.logo-face{opacity:.85}
@media(min-width:901px){.hero{min-height:max(760px,65vw)}.brand-stage{width:68%;left:16%;bottom:36%}.brand-followup{top:calc(64% + 34px)}.video-configured .pillars{bottom:5.5%}.hero-footer{bottom:12px}}

.touch-ring{position:absolute;left:-10%;bottom:-5%;width:120%;height:18%;border:1px solid #a8eaff;border-radius:50%;opacity:0;transform-origin:center;box-shadow:0 1px 5px #90dfff22}
/* Sapphire data mark: original raster alpha embedded in a shared SVG viewBox. */
.brand-stage{width:52%;max-width:920px;left:50%;bottom:42%;transform:translateX(-50%)}
.brand-mark{filter:drop-shadow(0 3px 7px #00132c66);transform-origin:50% 100%}
.data-logo{display:block;width:100%;height:100%;overflow:visible}
.brand-followup{top:calc(58% + 34px)}.brand-reflection{filter:blur(1.8px)}.brand-waterline{opacity:calc(.1 + var(--rise)*.2)}
@media(min-width:901px){.hero{min-height:760px}.brand-stage{width:52%;left:50%;bottom:42%}.brand-followup{top:calc(58% + 34px)}.video-configured .pillars{bottom:7%}}
@media(max-width:900px) and (min-width:601px){.brand-stage{width:54%}}
@media(max-width:600px){.brand-stage{width:80%;bottom:42%;left:50%}.brand-followup{top:calc(58% + 32px)}}
@media(prefers-reduced-motion:reduce){.brand-mark{will-change:auto}.data-logo .packets,.data-logo .material-light{display:none}}

/* Clearer data, quiet material; a light navigation row replaces the glass panel. */
.brand-followup p{font-size:clamp(12px,1.25vw,18px);font-weight:400;color:#c1d9ec;margin:0 20px 15px;line-height:1.45}
.brand-actions{display:flex;justify-content:center;align-items:center;gap:28px}.brand-actions .text-link{font-size:13px;border-color:#60c9ec80}.brand-actions .text-link span{display:inline;margin-left:10px}
.video-configured .pillars{border:0;border-radius:0;background:linear-gradient(transparent,#031a2c44);box-shadow:none;backdrop-filter:none;padding:12px 0;left:5%;width:90%}
.video-configured .pillar{display:flex;align-items:center;justify-content:center;gap:15px;padding:16px 10px;position:relative}
.video-configured .pillar svg{width:31px;height:31px;margin:0;flex:none;stroke:#8ad9f8;filter:none;transition:transform .2s,filter .2s}
.video-configured .pillar span{font-size:12px;white-space:normal;text-align:left}.video-configured .pillar span b{display:none}
.video-configured .pillar small{position:absolute;top:calc(100% - 7px);left:10%;width:80%;height:auto;opacity:0;transition:opacity .2s;text-align:center;font-size:8px}
.video-configured .pillar:hover small,.video-configured .pillar:focus-visible small{opacity:1}
.video-configured .pillar:hover svg,.video-configured .pillar:focus-visible svg{transform:translateY(-4px);filter:drop-shadow(0 0 5px #5ddfff70)}
.video-configured .pillar+.pillar:before{top:17px;height:32px;background:#b1dcf64d}.video-configured .pillar:after{left:calc(50% - 66px);top:16px}
@media(max-width:900px){.video-configured .pillar{gap:9px;padding:13px 6px}.video-configured .pillar span{font-size:10px}.video-configured .pillar svg{width:26px;height:26px}}
@media(max-width:600px){.brand-followup p{font-size:12px;max-width:315px;margin:0 auto 14px;padding:0 10px}.brand-actions{gap:17px}.brand-actions .pill{font-size:10px;padding:12px 16px}.brand-actions .text-link{font-size:11px}.video-configured .pillars{bottom:8%;padding:6px 0;row-gap:10px}.video-configured .pillar{justify-content:flex-start;padding:12px 8px;gap:10px}.video-configured .pillar span{font-size:10px}.video-configured .pillar svg{width:24px;height:24px}.video-configured .pillar small{font-size:6px;top:calc(100% - 8px)}.video-configured .pillar+.pillar:before{top:10px;height:28px}}
/* Directional glass depth and a quiet backdrop localized behind the mark. */
.brand-stage{width:min(920px,54vw);max-width:920px}.brand-mark{filter:drop-shadow(3px 9px 7px #000d1f88)}
.logo-atmosphere{position:absolute;inset:-22% -15% -12%;background:radial-gradient(ellipse,#00182eb0 0%,#001b3580 38%,#001a3028 61%,transparent 74%);filter:blur(15px);pointer-events:none;z-index:-1}
.brand-waterline{height:8px;bottom:-3px;border:0;background:linear-gradient(90deg,transparent,#8de8ff55,#e1faff99,#8de8ff44,transparent);filter:blur(1px);box-shadow:none}
.contact-flash{position:absolute;left:43%;bottom:-3%;width:14%;height:9%;background:radial-gradient(ellipse,#fff5d4,#ffad4566 25%,transparent 68%);opacity:0}
.brand-reflection{filter:blur(1.4px);mask:linear-gradient(#000,transparent 85%)}
@media(min-width:901px){.brand-stage{width:min(920px,54vw)}}
@media(max-width:900px) and (min-width:601px){.brand-stage{width:54vw}}
@media(max-width:600px){.brand-stage{width:80%}.logo-atmosphere{filter:blur(10px)}}

.logo-webgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.logo-3d-ready .data-logo{position:relative;z-index:1}.logo-3d-ready .data-logo>image,.logo-3d-ready .data-logo>g>rect:first-child,.logo-3d-ready .data-logo>g>path,.logo-3d-ready .material-light,.logo-3d-ready .identity-edge,.logo-3d-ready .brand-orange{visibility:hidden}.logo-3d-ready{filter:drop-shadow(2px 7px 5px #00132680)}
.system-routes{fill:none;stroke:#46c9e8;stroke-width:1.5;stroke-opacity:.35;stroke-linecap:round}.system-detail .node-ring{fill:#07344f;stroke:#72edff;stroke-width:1;stroke-opacity:.6}.system-detail .node-center{fill:#d8fcff}.system-detail .node-pulse{fill:none;stroke:#72edff;stroke-width:1;opacity:0}.system-detail .input-node,.system-detail .output-node{opacity:.65}.u-gate rect,.ledger-record rect{fill:#062d45;stroke:#46c9e8;stroke-width:1.5;stroke-opacity:.5}.u-gate circle,.ledger-record circle{fill:#72edff}.u-confirm,.record-check{fill:none;stroke:#d8fcff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0}.k-hub{fill:#07344f;stroke:#72edff;stroke-width:1.5}.k-bar{fill:none;stroke:#72edff;stroke-width:2;stroke-opacity:.35}.k-end{fill:none;stroke:#72edff;stroke-width:1.2}.active-packets{fill:none;stroke-linecap:round}.transaction,.transaction-halo{opacity:0}

/* Brighter internal optics: crisp paths, restrained halo, no global pulse. */
.system-routes{stroke:#91e7fa;stroke-width:1.7;stroke-opacity:.52}.system-detail .node-ring{stroke:#a6f2ff;stroke-width:1.3}.u-gate rect,.ledger-record rect{fill:#073750;stroke:#a2f1ff;stroke-width:1.7}.system-detail .node-center{fill:#efffff}.k-bar{stroke:#a6f2ff;stroke-width:2.2}

/* Local confirmations remain visible through the rest of each slow cycle. */
.system-routes{stroke-opacity:.58;stroke-width:1.8}.system-detail .confirmed .node-center,.system-detail .confirmed circle{fill:#edffff;filter:drop-shadow(0 0 2px #5be6ff)}.system-detail .confirmed .node-ring{stroke-opacity:1!important;stroke-width:1.8;fill:#167c9d}.u-gate.confirmed rect,.ledger-record.confirmed rect{stroke:#c4fbff;stroke-opacity:1!important;fill:#125b77;stroke-width:2}.record-check,.u-confirm{stroke:#efffff!important;stroke-width:2.4!important;filter:drop-shadow(0 0 2px #64e7ff)}.k-end.confirmed{stroke:#d9ffff;stroke-width:2;filter:drop-shadow(0 0 2px #59dbff)}

/* Keep inactive routes quiet so the traveling packet leads the eye. */
.system-routes{stroke-opacity:.38}.system-detail .confirmed .node-center,.system-detail .confirmed circle{filter:drop-shadow(0 0 3px #59e8ff)}.record-check,.u-confirm{transition:none}.active-packets{paint-order:stroke fill}

/* One restrained signature glow after the complete Q → u → i → k route. */
.logo-3d-ready{filter:drop-shadow(2px 7px 5px #00132680) drop-shadow(0 0 calc(3px + var(--brand-finale,0)*10px) rgb(74 214 255 / calc(var(--brand-finale,0)*.48)))}
@media(prefers-reduced-motion:reduce){.logo-3d-ready{filter:drop-shadow(2px 7px 5px #00132680)}}

/* Official solid signature keeps the supplied SVG brand colours unchanged. */
.brand-official-solid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:5;opacity:var(--brand-solid,0);filter:drop-shadow(0 2px 1px #ffffff88) drop-shadow(0 0 14px #b6e8ff99);pointer-events:none}
.brand-mark>.data-logo,.brand-mark>.logo-webgl{opacity:calc(1 - var(--brand-solid,0))!important}
.hero .scene{filter:brightness(calc(1.14 - var(--brand-focus,0)*.13)) saturate(.94) blur(calc(var(--brand-focus,0)*2px));transform:scale(1.008)}
.brand-signature-flash{position:absolute;inset:-30%;z-index:6;pointer-events:none;opacity:calc(var(--signature-flash,0)*.6);background:radial-gradient(ellipse,#f9ffffa8 0,#8de4ff55 27%,transparent 66%);mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.brand-signature-flash{display:none}.hero .scene{filter:brightness(1.08) saturate(.94)}}

/* Energy converges once; the glass signature remains steady after formation. */
.brand-stage:before,.brand-stage:after{content:'';position:absolute;top:74%;width:90vw;height:2px;z-index:-1;background:linear-gradient(90deg,transparent,#2dbfff,#dbfbff);box-shadow:0 0 12px #63d6ff;opacity:var(--energy-entrance,0);pointer-events:none}.brand-stage:before{right:50%;transform:rotate(12deg);transform-origin:right center}.brand-stage:after{left:50%;transform:rotate(-12deg);transform-origin:left center}.brand-stage{overflow:visible}.brand-mark{overflow:hidden}.brand-mark .logo-webgl{opacity:1!important}.brand-mark>.data-logo{opacity:0!important}.brand-mark:not(.logo-3d-ready)>.data-logo{opacity:1!important}.brand-followup{transition:none}.hero .scene{filter:brightness(calc(1.16 - var(--brand-focus,0)*.1)) saturate(.94) blur(calc(var(--brand-focus,0)*1.3px))}

/* Mobile: lift the glass wordmark clear of the bright water into the dark sky. */
@media(max-width:600px){.brand-stage{transform:translate(-50%,calc(-1 * var(--mobile-logo-lift,0px)));will-change:transform}.brand-stage .logo-atmosphere{background:radial-gradient(ellipse,#5dc8ff65,transparent 68%);filter:blur(16px);opacity:1!important}.brand-mark{filter:brightness(calc(1.12 + var(--mobile-logo-flash,0)*.4)) drop-shadow(0 0 14px #2eafff55) drop-shadow(0 0 25px #218bff33)}.brand-signature-flash{opacity:var(--mobile-logo-flash,0);background:radial-gradient(ellipse,#d8f6ffb0,transparent 66%);width:130%;height:150%;left:-15%;top:-25%;mix-blend-mode:screen}.brand-reflection{opacity:.04!important}.brand-followup{top:50%}.hero .scene{filter:brightness(calc(1.16 + var(--mobile-logo-flash,0)*.16)) saturate(1)}.brand-stage:before,.brand-stage:after{opacity:calc(var(--energy-entrance,0) + var(--mobile-logo-flash,0)*.6)}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.brand-stage{will-change:auto}.brand-mark{filter:brightness(1.12) drop-shadow(0 0 10px #2eafff44)}}

@media(max-width:600px){.brand-mark.logo-3d-ready{filter:none}.brand-followup p{color:#f3faff;text-shadow:0 2px 8px #001126,0 0 18px #001126}.brand-stage:before,.brand-stage:after{height:1px}}