/* Kinetic identity. The approved logo geometry is preserved. */
.hero{background:radial-gradient(ellipse at 76% 42%,#0b2835 0,transparent 46%),#060e14}
.brand-stage{position:absolute;inset:0 -1% 89px 39%;isolation:isolate;overflow:hidden;perspective:1100px}
.brand-halo{position:absolute;inset:8%;background:radial-gradient(ellipse,#2bd7ec13,transparent 66%);pointer-events:none;opacity:.7}
#brand-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.brand-object{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.brand-animation{display:block;width:100%;height:100%;overflow:visible}
.logo-part{fill:url(#logo-metal);transform-box:fill-box;transform-origin:center}
.logo-part-6{fill:#22ddf2;filter:drop-shadow(0 0 9px #22ddf240)}
.depth-part{fill:#164b5c}.depth-part-6{fill:#087b91}
.logo-outline{fill:none;stroke:#7feefa;stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0;opacity:.2}
.logo-trace{pointer-events:none}.logo-depth{opacity:.6}
.orbit-fine{stroke:#81d9ea;stroke-width:.5;opacity:.12}
.orbit-arc{stroke:#84f2fc;stroke-width:1.2;opacity:.55;transform-origin:0 0}
.orbit-inner{stroke:#6cc5db;stroke-width:.6;opacity:.18}.orbit-ticks{stroke:#c5faff;stroke-width:1;opacity:.5}
.brand-pulse{fill:none;stroke:#8ef5ff;stroke-width:1;opacity:0;transform-origin:400px 330px}
.logo-sweep{opacity:0;pointer-events:none}
.brand-stage-note{position:absolute;bottom:6%;left:17%;right:14%;display:flex;justify-content:space-between;color:#81a6b5;font:11px var(--mono);letter-spacing:.14em}
.brand-phase{color:#adf4f4}.brand-phase:before{content:'+';margin-right:12px;color:#35def0}.brand-phase-index{color:#658694}
.brand-chapters{display:flex;align-self:stretch;gap:35px;align-items:center;font:12px var(--mono);color:#607f8e}
.brand-chapters span{position:relative;padding:30px 0;transition:color .6s}.brand-chapters span:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#a8f7ef;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.brand-chapters .active{color:#e8fcff}.brand-chapters .active:before{transform:scaleX(1)}
.brand-controls{display:flex;align-items:center;gap:22px}.brand-controls button{border:0;background:none;min-height:44px;padding:10px 0;color:#a3bfca;display:flex;gap:8px;align-items:center;font:12px var(--mono)}
.brand-controls button:hover{color:#c9fffc}.brand-controls button:disabled{opacity:.35;cursor:default}
.hero-sequence .sequence-label{font-size:10px;letter-spacing:.08em}
.brand-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#060e14,transparent 8%,transparent 95%,#060e14);pointer-events:none}
.brand-stage:not(.brand-ready) #brand-particles{display:none}
@media(min-width:1600px){.brand-stage{left:37%;right:0}}
@media(max-width:1100px) and (min-width:761px){.brand-stage{left:38%;right:-7%}.brand-chapters{gap:24px}.brand-controls{gap:15px}.hero-sequence .sequence-label{display:none}}
@media(max-width:760px){
 .hero{background:radial-gradient(ellipse at 50% 40%,#0b2835 0,transparent 45%),#060e14}
 .hero-heading{text-align:left}.hero h1{font-size:clamp(3.2rem,12vw,4.6rem)}
 .brand-stage{position:relative;inset:auto;order:1;width:calc(100% + 48px);height:360px;margin:-3px -24px 0;flex-shrink:0}
 .brand-stage-note{left:24px;right:24px;bottom:10px;font-size:10px}
 .hero-sequence{order:2;display:flex;flex-wrap:wrap;min-height:88px;gap:0;margin-top:10px;padding:0 0 8px}
 .brand-chapters{width:100%;justify-content:space-between;gap:8px;font-size:11px}.brand-chapters span{padding:17px 0 10px}
 .brand-controls{margin-left:auto;gap:25px}.brand-controls button,#motion-toggle{font-size:11px;padding:8px 0;min-height:40px}.brand-controls #motion-toggle span{max-width:none;white-space:nowrap}
 .hero-message .button{margin-top:18px}.brand-stage:after{background:linear-gradient(0deg,#060e14,transparent 15%,transparent 95%,#060e14)}
}
@media(max-width:360px){.brand-stage{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;height:310px}.hero h1{font-size:2.9rem}.brand-chapters{font-size:10px}.brand-stage-note{font-size:9px;left:20px;right:20px}}
@media(prefers-reduced-motion:reduce){.brand-object{will-change:auto}.brand-chapters span,.brand-chapters span:before{transition:none}}

/* One integrated story: the question, the mark, the answer. */
.slogan-intro{fill:#eff8fa;font:500 96px/1 'Space Grotesk',system-ui,sans-serif;letter-spacing:-5px}
.slogan-secret{fill:#a8f7ef}
.slogan-answer{fill:#a8f7ef;font:500 60px/1 'Space Grotesk',system-ui,sans-serif;letter-spacing:-2.5px}
.answer-underline{stroke:#22ddf2;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;opacity:.55}
.hero{display:flex;flex-direction:column;align-items:center;min-height:850px;height:auto;max-height:none;padding:0 5vw;background:radial-gradient(ellipse at 50% 40%,#0c2e3b,transparent 52%),#060e14}
.hero-heading{position:relative;inset:auto;max-width:none;padding:30px 0 0;order:0;text-align:center;animation:none}
.hero-heading h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-stage{position:relative;inset:auto;order:1;width:100%;max-width:1000px;height:clamp(520px,calc(100svh - 315px),640px);margin:-10px auto 0;flex-shrink:0}
.brand-stage:after{display:none}.brand-stage-note{left:7%;right:7%;bottom:16px}
.hero-message{position:relative;inset:auto;order:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:17px 24px;max-width:850px;width:100%;padding:0 0 28px;margin:0;text-align:center;animation:none}
.hero-message p{max-width:630px;flex-basis:100%;font-size:16px;line-height:1.65;margin:0 auto 2px;order:0}
.hero-message .button{margin:0;width:auto;min-width:225px;order:1}.hero-secondary{margin:0;order:2}
.hero-sequence{position:relative;inset:auto;order:3;width:100%;min-height:75px;margin:0;background:none;flex-wrap:nowrap;display:flex;padding:0}
.brand-chapters span{padding:26px 0}.brand-chapters{font-size:11px}
@media(max-width:1100px) and (min-width:761px){.hero{max-height:none;min-height:830px}.brand-stage{height:550px;width:100%;margin-top:-10px}.hero-message{max-width:730px}.hero-heading{padding-top:30px}.hero-message p{font-size:16px}}
@media(max-width:760px){
 .hero{min-height:0;padding:0 22px}.hero-heading{padding-top:26px}.hero-heading .eyebrow{font-size:9px;letter-spacing:.07em}
 .brand-stage{width:calc(100% + 44px);height:365px;margin:0 -22px;max-width:none}.brand-stage-note{left:24px;right:24px;bottom:4px;font-size:9px}
 .hero-message{display:flex;gap:15px;max-width:none;padding:22px 0 25px}.hero-message .button{order:0;width:100%;margin:0;max-width:none}.hero-message p{order:1;font-size:15px;line-height:1.65;margin:0;max-width:500px}.hero-secondary{order:2;margin:0;font-size:13px}
 .hero-sequence{display:flex;flex-wrap:wrap;gap:0;min-height:95px;padding:0 0 6px}.brand-chapters{width:100%;font-size:10px;gap:8px}.brand-chapters span{padding:15px 0 7px}.brand-controls{margin-left:auto}
}
@media(max-width:360px){.brand-stage{width:calc(100% + 44px);height:325px;margin-left:-22px;margin-right:-22px}.hero-heading .eyebrow{font-size:8px}.brand-stage-note{font-size:8px}.brand-chapters{font-size:9px}}

.hero-message{align-self:center}
