/* ASTRA: dimensional surfaces, camera controls and kinetic typography. */
:root{--scene-ice:#ccdaff;--scene-depth:#06080d}
.hero{background:radial-gradient(ellipse at 70% 43%,#20263940,transparent 59%),#07090c;min-height:820px;max-height:1160px;padding-top:70px;padding-bottom:105px;perspective:1100px;isolation:isolate}
.hero-copy{max-width:680px;pointer-events:none;z-index:3;padding-top:15px;transform:translate3d(0,calc(var(--hero-progress,0)*-45px),0)}
.hero-copy:before{content:'';position:absolute;inset:-50px -45px -40px -100px;background:radial-gradient(ellipse at 24% 50%,#07090ce0,transparent 73%);z-index:-1;pointer-events:none}
.hero-copy .eyebrow{color:#bec7c7;font-weight:500;letter-spacing:1.9px}
.hero h1{font-size:clamp(75px,7.1vw,118px);line-height:1.025;letter-spacing:-.069em;text-shadow:0 6px 44px #0005}
.hero h1>span{background:linear-gradient(115deg,#fff 15%,#d0d9e9 53%,#81929c 85%);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero h1 em{background:linear-gradient(105deg,#eaffdd,#c8ff91 60%,#a5d7dd);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-intro{color:#b7c2c6;font-size:18px;max-width:440px;text-shadow:0 2px 15px #07090c}
.hero .button{box-shadow:0 0 45px #b9ff6220,inset 0 1px #ffffff6e;border-radius:100px;padding:18px 27px;pointer-events:auto}
.hero .button:hover{box-shadow:0 0 65px #bcff5e35;transform:translateY(-3px)}
.hero-art{inset:-38px -7% 65px 25%;min-width:0;z-index:1;overflow:hidden}
.hero-art:before{inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 61% 48%,#8691c612,transparent 45%);pointer-events:none}
#astra-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1;cursor:grab;touch-action:pan-y;outline-offset:-5px}
#astra-canvas:active{cursor:grabbing}
.scene-watermark{position:absolute;inset:15% 0 auto 17%;font-family:var(--display);font-size:clamp(180px,29vw,490px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px #cad1eb0c;letter-spacing:-.09em;pointer-events:none;transform:translateZ(-80px);white-space:nowrap}
.scene-topline{position:absolute;top:72px;left:31%;right:15%;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none}
.scene-kicker{font-size:10px;letter-spacing:2.2px;color:#8997ac;display:none}
#scene-expand{background:#101521a3;border:1px solid #8095bb3d;color:#c6d5ea;padding:9px 13px;font-size:12px;border-radius:4px;pointer-events:auto;margin-left:auto;backdrop-filter:blur(12px)}
#scene-expand span{font-size:18px;margin-left:9px;vertical-align:middle}
.art-coordinate{right:13%;top:30%;font-size:10px;letter-spacing:1.7px;color:#8a9bb0}
.top-cross{left:29%;top:23%;color:#8098b1}
.bottom-cross{right:15%;bottom:23%;color:#8098b1}
.scene-axis{position:absolute;left:22%;bottom:23%;width:42px;height:55px;opacity:.5;transform:rotate(-14deg);pointer-events:none}
.scene-axis i{position:absolute;font-size:9px;font-style:normal;color:#bbc4d2;width:40px;height:1px;background:#8895ad80;transform-origin:left center}
.scene-axis i:nth-child(1){transform:rotate(0);left:0;top:30px;text-align:right}
.scene-axis i:nth-child(2){transform:rotate(-72deg);left:0;top:30px;text-align:right}
.scene-axis i:nth-child(3){transform:rotate(145deg);left:0;top:30px;text-align:right}
.orbit-caption{bottom:174px;left:25%;width:58%;z-index:3}
.orbit-caption span{color:#c8ff91;font-size:12px;letter-spacing:2px}
.orbit-caption p{color:#c0c8d2;text-shadow:0 2px 7px #000;font-size:14px}
.scene-console{position:absolute;bottom:77px;left:53%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;width:max-content;max-width:94%}
.orb-controls{position:static;transform:none;inset:auto;background:#0c121ddb;backdrop-filter:blur(20px);border:1px solid #a1b6d739;padding:5px;box-shadow:0 12px 45px #0006,0 1px 0 #ffffff10 inset}
.orb-controls button{padding:9px 19px;color:#b7c8d9;font-size:14px;min-height:40px}
.orb-controls button[aria-pressed=true]{background:#d0ffab;color:#1c291d;box-shadow:0 0 20px #baff8230}
.scene-tools{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;color:#9baabf;font-size:12px}
.scene-tools button{border:0;padding:4px 8px;background:none;color:#b1c5db;font-size:12px;min-height:30px;border-radius:4px;white-space:nowrap}
.scene-tools button:hover{background:#d7e0ff15;color:white}.scene-tools button[aria-pressed=true]{color:var(--accent);background:#c8ff9110}
.scene-tools label{display:flex;align-items:center;gap:8px;font-size:12px}
.scene-tools input{width:70px;height:18px;accent-color:var(--accent);cursor:ew-resize}
#scene-motion{border:1px solid #788eae39;min-width:30px}
.scene-hint{position:absolute;bottom:37px;left:23%;right:16%;margin:0;text-align:center;color:#8799b2;font-size:10px;letter-spacing:1.8px;pointer-events:none}
.metaphor-note{bottom:7px;left:23%;right:16%;color:#758499;font-size:10px;margin:0}
.hero-bottom{color:#9facb9;z-index:4}
.hero-bottom>span{font-size:10px!important;letter-spacing:1.3px}
.hero-bottom a{color:#d9e1ea}
.statement-strip{background:#c8ff91;transform:translateZ(0);position:relative;z-index:5;gap:50px;padding:21px 4%;font-size:clamp(22px,2.7vw,40px)}
.statement-strip span{transform:translateX(calc(var(--page-shift,0)*-1px));will-change:transform}
.capability-stage,.prompt-terminal,.conversation-card,.personal-preview,.code-preview,.recipe{transform-style:preserve-3d;position:relative;transition:transform .35s,box-shadow .35s,border-color .35s}
.capability-stage,.conversation-card{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 18px 60px #0004}
.capability-stage:after,.conversation-card:after,.recipe:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--surface-glow,0);background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#d6ffd414,transparent 64%);transition:opacity .3s}
.recipe:hover{border-color:#8ba677;box-shadow:0 17px 40px #0003;transform:perspective(1000px) translateY(-7px) rotateX(1.5deg)}
.recipe[open]{transform:none}
html.js-motion .capability-stage.visible,html.js-motion .conversation-card.visible{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
html.js-motion .recipe.visible:hover{transform:perspective(1000px) translateY(-7px) rotateX(1.5deg)}
html.js-motion .recipe.visible[open]{transform:none}
.prompt-terminal{box-shadow:18px 25px 0 -19px #c8ff9126,36px 45px 0 -37px #c8ff9115,0 22px 80px #0004;transform:perspective(1500px) rotateY(-2deg)}
.lab-section{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 80% 55%,#34562140,transparent 60%),#10180f}
.lab-depth{position:absolute;inset:0;z-index:-1;pointer-events:none;perspective:900px;overflow:hidden}
.lab-depth i{position:absolute;top:15%;left:42%;width:66%;height:72%;border:1px solid #baff7610;border-radius:24px;transform:rotateY(-35deg) rotateX(16deg) translateZ(-80px);background:linear-gradient(130deg,#aaff5510,transparent 65%)}
.lab-depth i:nth-child(2){transform:rotateY(-35deg) rotateX(16deg) translateZ(-160px)}
.lab-depth i:nth-child(3){transform:rotateY(-35deg) rotateX(16deg) translateZ(-240px)}
.lab-depth i:nth-child(4){transform:rotateY(-35deg) rotateX(16deg) translateZ(-320px)}
.lab-depth i:nth-child(5){transform:rotateY(-35deg) rotateX(16deg) translateZ(-400px)}
.learning-callout{box-shadow:0 35px 80px #0004;background:radial-gradient(ellipse at 90% 20%,#88c83729,transparent 58%),linear-gradient(140deg,#172214,#0c110b);position:relative;overflow:hidden}
.learning-callout:after{content:'';position:absolute;width:340px;height:340px;border:1px solid #a2c97318;border-radius:50%;right:-65px;top:-70px;box-shadow:0 0 0 28px #a2c97305,0 0 0 62px #a2c97304,0 0 0 96px #a2c97303;transform:rotateX(50deg) rotateY(-25deg);pointer-events:none}
.closing{background:radial-gradient(ellipse at 50% -80%,#fff 5%,transparent 74%),#c8ff91;perspective:1000px}
.closing>p:not(.eyebrow){text-shadow:0 1px #eeffd850,0 10px 24px #28431214;transform:rotateX(2deg)}
body.scene-expanded{overflow:hidden}
.scene-expanded .hero{transform:none;perspective:none;overflow:visible;isolation:auto}
.scene-expanded .hero-art{position:fixed;inset:0;z-index:80;width:100vw;height:100dvh;max-height:none;background:radial-gradient(ellipse at 50% 50%,#18243840,transparent 70%),#05070b;isolation:isolate;min-width:0}
.scene-expanded .hero-copy,.scene-expanded .hero-bottom{visibility:hidden}
.scene-expanded .scene-topline{left:5%;right:5%;top:25px}
.scene-expanded .scene-kicker{display:inline}
.scene-expanded .scene-console{left:50%;bottom:67px}
.scene-expanded .orbit-caption{left:20%;width:60%;bottom:167px}
.scene-expanded .scene-hint{left:10%;right:10%;bottom:35px}
.scene-expanded .metaphor-note{left:10%;right:10%;bottom:12px}
.scene-expanded .scene-watermark{left:8%;right:8%;top:15%;font-size:32vw}
.scene-expanded .art-coordinate{right:5%;top:30%}
.scene-expanded .scene-axis{left:6%;bottom:15%}
.scene-expanded .top-cross{left:8%;top:20%}.scene-expanded .bottom-cross{right:8%;bottom:23%}
.scene-expanded #astra-canvas{touch-action:none}
.motion-paused .hero-copy,.motion-paused .statement-strip span,.motion-paused .capability-stage,.motion-paused .conversation-card,.motion-paused .prompt-terminal,.motion-paused .recipe{transform:none!important}
@media(max-width:1100px){.hero{min-height:780px}.hero h1{font-size:80px}.hero-copy{max-width:530px}.hero-art{left:25%;right:-17%;bottom:60px}.scene-topline{right:19%;left:42%;top:53px}.art-coordinate{right:18%}.scene-console{left:53%}.orbit-caption{left:23%;width:60%}.hero-intro{font-size:17px;max-width:370px}.scene-axis{display:none}}
@media(max-width:760px){.hero{display:block;min-height:0;padding:43px 6% 67px;overflow:hidden}.hero-copy{padding-top:0;max-width:100%;pointer-events:auto;transform:none!important}.hero-copy:before{inset:-40px -20px -15px;background:linear-gradient(#07090c00,#07090c55);z-index:-1}.hero h1{font-size:clamp(55px,10.6vw,80px);line-height:1.025;letter-spacing:-.065em;margin-bottom:22px}.hero-copy .eyebrow{font-size:10px;letter-spacing:1.1px;margin-bottom:24px}.hero-intro{font-size:16px;max-width:95%;margin-bottom:23px}.hero .button{padding:15px 21px;font-size:14px}.hero-art{position:relative;inset:auto;width:119%;margin:-14px -9.5% 0;height:535px;min-width:0;z-index:1;isolation:isolate}.scene-watermark{left:7%;top:15%;font-size:35vw;color:transparent;-webkit-text-stroke:1px #c2d4ff0c}.scene-topline{top:21px;left:12%;right:10%}#scene-expand{font-size:11px;padding:5px 10px;border-color:#879fbd35}.scene-topline span.scene-kicker{display:none}.orbit-caption{left:12%;width:76%;bottom:174px}.orbit-caption span{font-size:11px}.orbit-caption p{font-size:13px}.scene-console{left:50%;bottom:76px;gap:11px}.orb-controls button{font-size:14px;padding:8px 14px}.scene-tools{gap:11px}.scene-tools button{font-size:12px;min-height:32px}.scene-tools label{font-size:12px;gap:5px}.scene-tools input{width:64px}.scene-hint{left:9%;right:9%;bottom:39px;font-size:9px;letter-spacing:1px}.metaphor-note{left:13%;right:13%;bottom:7px;font-size:10px;line-height:1.5}.art-coordinate{top:24%;right:9%;font-size:9px}.top-cross{left:11%;top:30%;font-size:19px}.bottom-cross{right:11%;bottom:34%;font-size:19px}.hero-bottom{bottom:23px;left:6%;right:6%}.hero-bottom>span:last-child{font-size:9px!important;letter-spacing:.6px}.hero-bottom a{font-size:11px}.statement-strip{padding:18px 5%;font-size:25px}.prompt-terminal{transform:none}.lab-depth i{left:6%;width:100%}.capability-stage,.conversation-card{transform:none}.recipe:hover{transform:none}.scene-expanded .hero-art{margin:0;width:100%;height:100dvh;inset:0;position:fixed}.scene-expanded .scene-topline{top:18px;left:6%;right:6%}.scene-expanded .scene-watermark{top:30%;font-size:35vw}.scene-expanded .scene-hint{font-size:10px}.scene-expanded .metaphor-note{font-size:10px;left:8%;right:8%;bottom:9px}.scene-expanded .scene-console{bottom:75px}.scene-expanded .orbit-caption{bottom:177px;left:10%;width:80%}.scene-expanded .scene-kicker{display:inline!important;font-size:9px;max-width:120px}.scene-expanded .hero-copy{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hero-copy,.statement-strip span,.capability-stage,.conversation-card,.prompt-terminal,.recipe{transform:none!important}.scene-watermark{transform:none}}