.slrh-hero{
  --slrh-height:min(980px,100svh);
  --sky-top:#2b4b6f; --sky-mid:#739cc1; --sky-bottom:#efd3a4;
  --haze-a:rgba(255,213,124,.44); --haze-b:rgba(255,255,255,.12); --shade:rgba(4,10,18,.08);
  --sun-o:1; --moon-o:0; --stars-o:0; --sun-x:30%; --sun-y:33%; --moon-x:76%; --moon-y:16%;
  --rock-filter:brightness(1.08) saturate(1.1) contrast(1.05);
  --cloud-filter:brightness(1.05) saturate(.96) contrast(1.01);
  --mountain-o:.42; --left-shadow:rgba(0,0,0,.28); --bottom-dim:rgba(0,0,0,.02);
  position:relative; width:100%; height:var(--slrh-height); min-height:650px; overflow:hidden; isolation:isolate;
  background:#78a9cf; color:#fff; font-family:inherit;
}
.slrh-hero,.slrh-hero *{box-sizing:border-box}
.slrh-hero img{max-width:none; user-select:none; pointer-events:none}
.slrh-sky{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 48%,var(--sky-bottom) 100%); transition:background .55s ease}
.slrh-sky:before{content:""; position:absolute; inset:0; background:
 radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255,249,232,.95) 0, rgba(255,234,174,.85) 6%, rgba(255,197,103,.42) 16%, transparent 28%),
 radial-gradient(ellipse at 52% 76%, var(--haze-a), transparent 36%),
 radial-gradient(ellipse at 20% 62%, var(--haze-b), transparent 28%),
 linear-gradient(180deg, transparent 62%, rgba(255,255,255,.17) 82%, var(--bottom-dim));
 mix-blend-mode:screen; opacity:.96; transition:background .55s ease}
.slrh-sky:after{content:""; position:absolute; inset:0; background:
 linear-gradient(90deg,var(--left-shadow) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 100%),
 linear-gradient(180deg, rgba(255,255,255,.07), transparent 28%, transparent 65%, rgba(0,0,0,.10) 100%);
 transition:background .55s ease}
.slrh-stars{position:absolute; inset:0; z-index:1; opacity:var(--stars-o); transition:opacity .55s ease; background-image:
 radial-gradient(circle,#fff 0 1px,transparent 1.3px), radial-gradient(circle,#fff 0 .9px,transparent 1.2px), radial-gradient(circle,#e5efff 0 1.1px,transparent 1.3px);
 background-size:180px 140px, 280px 210px, 380px 300px; background-position:28px 34px, 90px 26px, 160px 88px; animation:slrh-twinkle 4.5s ease-in-out infinite alternate}
.slrh-left-shade{position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(8,18,32,.36), rgba(8,18,32,.18) 22%, transparent 48%); pointer-events:none}
.slrh-atmosphere{position:absolute; inset:-4% -3% 0; z-index:3; background:
 radial-gradient(ellipse at 76% 72%, rgba(255,255,255,.28), transparent 24%),
 radial-gradient(ellipse at 14% 72%, rgba(255,255,255,.18), transparent 28%),
 linear-gradient(180deg, transparent 55%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.28));
 mix-blend-mode:soft-light; pointer-events:none}
.slrh-mountains{position:absolute; inset:auto 0 0; z-index:4; height:47%; opacity:var(--mountain-o); pointer-events:none; transition:opacity .55s ease}
.slrh-mountains span{position:absolute; bottom:15%; display:block; border-radius:50% 50% 0 0 / 100% 100% 0 0; filter:blur(2px)}
.slrh-mountains span:nth-child(1){left:-10%; width:54%; height:42%; background:linear-gradient(180deg, rgba(93,113,123,.22), rgba(62,78,88,.65)); clip-path:polygon(0 100%, 12% 65%, 26% 72%, 42% 42%, 54% 58%, 70% 34%, 100% 100%)}
.slrh-mountains span:nth-child(2){left:26%; width:44%; height:34%; background:linear-gradient(180deg, rgba(96,109,118,.20), rgba(63,76,85,.58)); clip-path:polygon(0 100%, 10% 72%, 24% 52%, 36% 63%, 52% 38%, 70% 54%, 100% 100%)}
.slrh-mountains span:nth-child(3){right:-6%; width:42%; height:36%; background:linear-gradient(180deg, rgba(102,112,118,.16), rgba(56,68,76,.56)); clip-path:polygon(0 100%, 16% 76%, 34% 54%, 50% 60%, 68% 40%, 84% 58%, 100% 100%)}
.slrh-celestial{position:absolute; z-index:5; transform:translate(-50%,-50%); transition:left .55s ease, top .55s ease, opacity .55s ease}
.slrh-sun{left:var(--sun-x); top:var(--sun-y); opacity:var(--sun-o)}
.slrh-moon{left:var(--moon-x); top:var(--moon-y); opacity:var(--moon-o)}
.slrh-celestial span{display:block; width:clamp(60px,6vw,100px); aspect-ratio:1; border-radius:50%}
.slrh-sun span{background:radial-gradient(circle at 36% 34%, #fff 0 10%, #fff7ca 22%, #ffd970 54%, #ff9e1d 100%); box-shadow:0 0 22px 10px rgba(255,237,162,.72), 0 0 88px 40px rgba(255,191,92,.38), 0 0 130px 58px rgba(255,146,39,.14); animation:slrh-sun-pulse 6s ease-in-out infinite}
.slrh-moon span{background:radial-gradient(circle at 36% 34%, #fff 0 12%, #eef5ff 42%, #b9c9dd 100%); box-shadow:0 0 18px 8px rgba(210,229,255,.38), 0 0 58px 24px rgba(178,204,255,.18); position:relative}
.slrh-moon span:after{content:""; position:absolute; inset:18% 15% auto auto; width:39%; aspect-ratio:1; border-radius:50%; background:rgba(113,132,154,.18); box-shadow:-30px 18px 0 -8px rgba(113,132,154,.14), -10px 37px 0 -14px rgba(113,132,154,.12)}
.slrh-copy{position:absolute; z-index:12; left:clamp(24px,5.8vw,104px); top:clamp(118px,22vh,200px); width:min(570px,44vw); color:#fff; text-shadow:0 14px 34px rgba(0,0,0,.18)}
.slrh-eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 20px; padding:9px 16px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(255,255,255,.10); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:12px; line-height:1; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.slrh-eyebrow span{font-size:14px; opacity:.9}
.slrh-copy h1{margin:0 0 18px; font-size:clamp(40px,5vw,55px); line-height:1.03; letter-spacing:0em; font-weight:800; color:#fff}
.slrh-copy p{margin:0; max-width:510px; font-size:clamp(16px,1.25vw,16px); line-height:1.62; font-weight:500; color:rgba(255,255,255,.96)}
.slrh-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 15px 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, #47a6ff, #006bcf);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 16px 36px rgba(11, 72, 164, .34);
    transition: transform .25s ease, box-shadow .25s ease;
}
.slrh-btn span{font-size:1.1em}
.slrh-btn:hover{transform:translateY(-3px); box-shadow:0 20px 40px rgba(11,72,164,.44)}
.slrh-features{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; max-width:620px}
.slrh-features>div{position:relative; min-width:170px; padding:14px 16px 14px 36px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.slrh-features>div:before{content:""; position:absolute; left:16px; top:18px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.slrh-features b{display:block; font-size:14px; line-height:1.25; color:#fff}
.slrh-features small{display:block; margin-top:5px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.86)}
.slrh-scene{position:absolute; inset:0; z-index:8}
.slrh-rock{position:absolute; z-index:10; right:-1vw; bottom:44px; width:min(62vw,980px); filter:var(--rock-filter); transition:filter .55s ease; animation:slrh-rock-float 10s ease-in-out infinite; transform-origin:50% 82%}
.slrh-cloud{position:absolute; height:auto; filter:var(--cloud-filter); transition:filter .55s ease, opacity .55s ease}
.slrh-cloud-back{z-index:7; opacity:.34}
.slrh-back-a{width:40vw; right:5vw; top:18%; animation:slrh-cloud-slow-a 42s ease-in-out infinite}
.slrh-back-b{width:34vw; left:28vw; top:24%; animation:slrh-cloud-slow-b 46s ease-in-out infinite}
.slrh-cloud-waist{z-index:11; opacity:.55}
.slrh-waist-a{width:22vw; right:20vw; bottom:28%; animation:slrh-waist-a 18s ease-in-out infinite}
.slrh-waist-b{width:18vw; right:3vw; bottom:25%; animation:slrh-waist-b 20s ease-in-out infinite}
.slrh-cloud-front{z-index:12; opacity:.98; bottom:-7vw}
.slrh-front-a{width:66vw; left:-12vw; animation:slrh-front-a 28s ease-in-out infinite}
.slrh-front-b{width:58vw; left:24vw; animation:slrh-front-b 34s ease-in-out infinite}
.slrh-front-c{width:66vw; right:-24vw; animation:slrh-front-c 32s ease-in-out infinite}
.slrh-control{position:absolute; z-index:30; left:50%; bottom:50px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:min(560px,calc(100% - 24px)); padding:12px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.22); box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); color:#fff; transition:opacity .25s ease, transform .25s ease}
.slrh-control.is-hidden{opacity:0; pointer-events:none; transform:translate(-50%,15px)}
.slrh-control-icon{display:grid; place-items:center; width:70px; height:32px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); font-size:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.slrh-control-label{font-size:13px; font-weight:800; white-space:nowrap}
.slrh-control input{flex:1 1 auto; width:100%; accent-color:#2a8fff; cursor:pointer; filter:drop-shadow(0 0 6px rgba(42,143,255,.18))}
.slrh-control strong{font-size:13px; min-width:46px; text-align:right; color:white;}
.slrh-control button{display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; transition:background .2s ease, transform .2s ease}
.slrh-control button:hover{background:rgba(255,255,255,.22); transform:rotate(-35deg)}
@keyframes slrh-twinkle{to{opacity:calc(var(--stars-o) * .58)}}
@keyframes slrh-sun-pulse{50%{transform:scale(1.035); filter:brightness(1.05)}}
@keyframes slrh-rock-float{50%{transform:translateY(-8px)}}
@keyframes slrh-cloud-slow-a{0%,100%{transform:translateX(0) translateY(0) scale(1)}50%{transform:translateX(-62px) translateY(8px) scale(1.03)}}
@keyframes slrh-cloud-slow-b{0%,100%{transform:translateX(0) translateY(0) scale(1)}50%{transform:translateX(58px) translateY(-6px) scale(1.025)}}
@keyframes slrh-waist-a{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(22px) translateY(-8px)}}
@keyframes slrh-waist-b{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-18px) translateY(-10px)}}
@keyframes slrh-front-a{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(34px) translateY(-11px) scale(1.018)}}
@keyframes slrh-front-b{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-22px) translateY(-8px) scale(1.014)}}
@keyframes slrh-front-c{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-30px) translateY(-9px) scale(1.016)}}
@media (max-width:1200px){
  .slrh-copy{width:min(560px,48vw)}
  .slrh-rock{width:68vw; right:-10vw}
}
@media (max-width:950px){
  .slrh-hero{min-height:760px}
  .slrh-copy{width:min(560px,62vw)}
  .slrh-rock{width:84vw; right:-24vw; bottom:72px}
  .slrh-front-a{width:82vw}.slrh-front-b{width:64vw}.slrh-front-c{width:76vw}
  .slrh-features>div{min-width:155px; padding:13px 14px 13px 34px}
}
@media (max-width:767px){
  .slrh-hero{height:740px; min-height:700px}
  .slrh-left-shade{background:linear-gradient(180deg, rgba(10,20,34,.18), rgba(10,20,34,.28) 35%, transparent 58%)}
  .slrh-copy{top:190px; left:22px; right:22px; width:auto}
  .slrh-eyebrow{margin-bottom:16px; padding:8px 13px; font-size:10px}
  .slrh-copy h1{max-width:360px; font-size:clamp(34px,11vw,34px)}
  .slrh-copy p{max-width:340px; font-size:13.5px; line-height:1.58}
  .slrh-btn{margin-top:20px; padding:13px 24px}
  .slrh-features{display:none}
  .slrh-celestial span{width:64px}
  .slrh-rock{width:128vw; right:-46vw; bottom:86px}
  .slrh-back-a{width:74vw; right:-18vw; top:21%; opacity:.26}
  .slrh-back-b{width:58vw; left:24vw; top:28%; opacity:.24}
  .slrh-waist-a{width:40vw; right:24vw; bottom:30%; opacity:.52}
  .slrh-waist-b{width:32vw; right:-4vw; bottom:28%; opacity:.48}
  .slrh-front-a{width:122vw; left:-30vw; bottom:-20px}
  .slrh-front-b{width:84vw; left:12vw; bottom:-18px}
  .slrh-front-c{width:96vw; right:-40vw; bottom:-16px}
  .slrh-control{bottom:90px; gap:8px; padding:10px 12px; width:calc(100% - 18px)}
  .slrh-control-label{display:none}
  .slrh-control strong{font-size:12px; min-width:42px}
}
@media (max-width:480px){
  .slrh-copy h1{max-width:320px}
  .slrh-copy p{max-width:300px}
  .slrh-rock{width:136vw; right:-58vw; bottom:92px}
}
@media (prefers-reduced-motion:reduce){.slrh-hero *{animation:none!important; transition:none!important}}