:root{font-family:Arial,Helvetica,sans-serif;color:#eeefdf;background:#101b1e;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #f1eedb;outline-offset:6px}button{color:inherit}.hero{position:relative;isolation:isolate;width:100%;height:100svh;min-height:520px;overflow:hidden;background:#101b1e}.environment{position:absolute;inset:0;overflow:hidden}.scene,.layer{position:absolute;inset:-2.5%;width:105%;height:105%;will-change:transform}.scene,.layer img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}.scene{width:105%;height:105%}.layer{opacity:0}.layers-ready .layer{opacity:1}.layers-ready .fallback{opacity:0}.layer img{display:block}.sky{z-index:1}.land{z-index:2}.sunlight{position:absolute;z-index:3;inset:-10%;pointer-events:none;background:radial-gradient(ellipse at 93% 0%,#efbb7055,transparent 47%);mix-blend-mode:screen;opacity:.25;will-change:opacity,transform}.haze{z-index:3;position:absolute;right:-20%;top:36%;width:75%;height:75%;background:radial-gradient(ellipse at 80% 40%,#dfc4a221,transparent 61%);filter:blur(25px);will-change:transform;pointer-events:none}.shade{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,#06101526 0%,transparent 35%,#05090605 56%,#05090691 100%);pointer-events:none}.top-ui{position:absolute;inset:0 0 auto;z-index:5}.navigation{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:5px 7px;background:#0c1212c9;border:1px solid #eeeecc1c;border-radius:99px;backdrop-filter:blur(16px);box-shadow:0 5px 30px #0002;white-space:nowrap}.navigation a,.navigation button{display:block;border:0;background:none;padding:10px 17px;font-size:11px;line-height:1.1;font-weight:400;border-radius:22px}.navigation .current{color:#f6f5e8;background:#ffffff0b}.navigation button{color:#cbcbbc;opacity:.75;cursor:default}.navigation a:hover{background:#ffffff15}.ambience{position:absolute;top:22px;right:25px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #eeeecc24;border-radius:99px;background:#0c1212a6;backdrop-filter:blur(16px);font-size:8px;letter-spacing:.09em;cursor:pointer;line-height:1}.ambience b{font-weight:400;color:#eeefdf;margin-left:3px}.sound-bars{height:10px;display:flex;align-items:center;gap:2px}.sound-bars i{display:block;width:1px;background:#e5e6d6;height:5px;animation:bar 1.7s ease-in-out infinite alternate}.sound-bars i:nth-child(2){height:10px;animation-delay:-.8s}.sound-bars i:nth-child(3){height:7px;animation-delay:-.4s}.sound-bars i:nth-child(4){height:4px;animation-delay:-1.2s}.ambience[aria-pressed=false] .sound-bars i{animation-play-state:paused;height:2px}.hero-content{position:absolute;z-index:5;bottom:5.5%;left:3.3%;right:4%;display:flex;align-items:flex-end;justify-content:space-between;gap:3vw}.hero h1{font-size:clamp(105px,19.5vw,340px);font-weight:400;letter-spacing:-.08em;line-height:.78;margin:0 0 0 -.055em;white-space:nowrap;will-change:transform}.word{display:flex}.word>span{display:inline-block}.hero-support{flex:0 0 24%;max-width:310px;padding-bottom:.2vw}.hero-support p{font-size:clamp(11px,.88vw,15px);line-height:1.55;color:#deded0;margin:0 0 21px;font-weight:400;text-shadow:0 1px 9px #0009}.primary-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:5px 5px 5px 19px;min-height:37px;background:#e9eada;color:#17201e;border-radius:99px;font-size:10px;transition:background .25s,transform .25s}.primary-cta span{display:grid;place-items:center;border:1px solid #4e554a;background:#1a241f;color:#eeefdd;width:25px;height:25px;border-radius:50%;font-size:15px}.primary-cta:hover{background:#fffef1;transform:translateY(-2px)}.hero.is-loading .navigation,.hero.is-loading .ambience,.hero.is-loading .word>span,.hero.is-loading .hero-support{opacity:0}.hero.is-ready .navigation{animation:navIn 1.25s cubic-bezier(.16,1,.3,1) both .22s}.hero.is-ready .ambience{animation:controlIn 1.25s cubic-bezier(.16,1,.3,1) both .4s}.hero.is-ready .word>span{animation:titleIn 1.7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.45s + var(--i)*.055s)}.hero.is-ready .hero-support p{animation:controlIn 1.5s cubic-bezier(.16,1,.3,1) both .95s}.hero.is-ready .primary-cta{animation:controlIn 1.4s cubic-bezier(.16,1,.3,1) both 1.1s}.no-script{position:fixed;inset:0;background:linear-gradient(transparent,#0009),url('../assets/hero-cloud-poster.webp') center/cover;display:flex;flex-direction:column;justify-content:flex-end;padding:5vw}.no-script h1{font-size:18vw;font-weight:400;margin:0;letter-spacing:-.08em}@keyframes navIn{from{opacity:0;transform:translate(-50%,-12px);filter:blur(4px)}to{opacity:1;transform:translate(-50%,0);filter:blur(0)}}@keyframes controlIn{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes titleIn{from{opacity:0;transform:translateY(35%) rotateX(12deg);filter:blur(9px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes bar{to{transform:scaleY(.35)}}
@media(min-aspect-ratio:2/1){.scene,.layer img{object-position:50% 57%}.hero h1{font-size:30vh}.hero-content{bottom:6%}.hero-support{max-width:300px}}
@media(max-width:1000px){.navigation a,.navigation button{padding:10px 12px;font-size:10px}.ambience{right:18px;padding:11px 12px;font-size:7px}.hero-content{left:4%;right:4%;gap:4vw}.hero h1{font-size:19vw}.hero-support{flex-basis:25%}.hero-support p{font-size:11px}.primary-cta{font-size:10px}}
@media(max-width:700px){.hero{min-height:520px}.navigation{top:19px}.navigation a,.navigation button{padding:10px 12px;font-size:10px}.ambience{top:73px;right:20px;font-size:7px;padding:11px 12px}.hero-content{left:6%;right:6%;bottom:6%;display:block}.hero h1{font-size:24.4vw;line-height:.95;margin-left:-.065em}.hero-support{max-width:260px;margin-top:25px}.hero-support p{font-size:12px;line-height:1.65;margin-bottom:20px}.primary-cta{min-height:41px;padding-left:20px;gap:30px;font-size:11px}.primary-cta span{width:29px;height:29px}.scene,.layer img{object-position:47% 45%}.shade{background:linear-gradient(180deg,#05101118,transparent 30%,#05090620 48%,#050906b5 100%)}}
@media(max-height:580px) and (min-width:701px){.hero{min-height:400px}.hero-content{bottom:8%}.hero h1{font-size:17.5vw}.hero-support p{font-size:10px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero.is-loading .navigation,.hero.is-loading .ambience,.hero.is-loading .word>span,.hero.is-loading .hero-support{opacity:1}}
.environment{filter:saturate(.84) brightness(.9)}.cloud-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Real cloud motion from the supplied reference; all hero UI stays in place. */
.hero-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:2;opacity:0;transition:opacity .65s ease;pointer-events:none}
.video-ready .hero-motion{opacity:1}
.video-ready .layer,.video-ready .fallback{visibility:hidden}
.video-ready .haze,.video-ready .sunlight{visibility:hidden}
@media(max-width:700px){.hero-motion{object-position:47% 45%}}
@media(min-aspect-ratio:2/1){.hero-motion{object-position:50% 57%}}
.hero .layer{visibility:hidden}.hero:not(.video-ready) .fallback{opacity:1;inset:0;width:100%;height:100%;transform:none!important}