/* Wider desktop composition, with comfortable mobile gutters. */
@media(min-width:1101px){
 .container{width:min(2160px,calc(100% - clamp(64px,6vw,144px)))}
 .hero{grid-template-columns:1.05fr 1fr;gap:clamp(32px,4vw,92px);min-height:clamp(630px,43vw,800px)}
 .hero h1{font-size:clamp(60px,4.7vw,92px);letter-spacing:-.055em}
 .hero-description{font-size:16px}.hero-perks{font-size:12px;gap:25px}
 .hero-cloud{height:auto;min-height:490px}.hero-cloud img{max-width:850px}
 .hero .button{font-size:14px;padding:16px 25px;min-height:54px}.hero-buttons{gap:32px}.secondary-link{font-size:13px}
 .nav nav{font-size:14px;gap:clamp(24px,2.5vw,48px)}.nav .logo{font-size:29px}
 .section-intro h2,.pricing-heading h2,.contact-intro h2{font-size:44px}
 .section-intro>p{font-size:15px}.benefit-grid{gap:clamp(35px,4vw,80px)}.benefit-grid h3{font-size:21px}.benefit-grid p{font-size:14px;max-width:420px}
 .plan-card{padding:30px}.plan-card h3{font-size:22px}.contract-price{font-size:36px}.plan-card .button{font-size:13px}
 .plan-caption{font-size:13px}.spec-grid strong{font-size:14px}.spec-grid span{font-size:11px}
 .system-price-list td{font-size:13px;padding:20px 27px}.system-price-list th{font-size:11px;padding:16px 27px}.system-table-price{font-size:17px!important}
 .steps h3{font-size:20px}.steps p{font-size:14px;max-width:400px}.contact-card dl>div{font-size:14px}
 .quote-page{max-width:1600px}.auth-layout{max-width:1300px}.console-content{max-width:1800px}
}
.header{position:sticky;top:0;z-index:50;background:#0b0e11ed;backdrop-filter:blur(16px);transition:background .3s,box-shadow .3s,border-color .3s}
.header.is-scrolled{background:#0b0e11f5;border-bottom-color:#c1f77822;box-shadow:0 10px 35px #0003}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;z-index:200;pointer-events:none}
.nav nav a{position:relative;padding-block:7px}.nav nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s}.nav nav a:hover:after,.nav nav a:focus-visible:after{transform:scaleX(1)}
.term-picker .button{transition:background .25s,border-color .25s,color .25s,box-shadow .25s}.term-picker [aria-pressed=true],.term-picker [aria-current=true]{box-shadow:0 0 22px #c1f77816}
@media(prefers-reduced-motion:no-preference){
 main{animation:page-arrive .5s cubic-bezier(.2,.65,.3,1) both}
 .motion-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.2,.65,.3,1),transform .65s cubic-bezier(.2,.65,.3,1)}
 .motion-reveal[data-motion-step="1"]{transition-delay:45ms}.motion-reveal[data-motion-step="2"]{transition-delay:90ms}.motion-reveal[data-motion-step="3"]{transition-delay:135ms}
 .motion-reveal.is-visible,.motion-reveal:focus-within{opacity:1;transform:none}
 .hero-cloud img{animation:cloud-drift 7s ease-in-out infinite;filter:drop-shadow(0 24px 35px #0004)}
 .plan-card,.benefit-grid article,.contact-card{transition:opacity .65s,transform .65s,border-color .25s,box-shadow .25s}
 .plan-card.is-visible:hover{transform:translateY(-5px);border-color:#a9d76e88;box-shadow:0 16px 38px #0004}
 .contact-card:hover{border-color:#c1f77855}
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:page-depart .18s ease-in both}
 ::view-transition-new(root){animation:page-arrive .32s ease-out both}
 .switching-term .plans{view-transition-name:rental-plans}
 .switching-term::view-transition-old(root),.switching-term::view-transition-new(root){animation:none}
 ::view-transition-old(rental-plans){animation:term-out .18s ease both}
 ::view-transition-new(rental-plans){animation:term-in .28s ease both}
}
@keyframes page-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes page-depart{to{opacity:0;transform:translateY(-6px)}}
@keyframes cloud-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes term-out{to{opacity:0;transform:translateY(-9px)}}
@keyframes term-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .motion-reveal{opacity:1;transform:none}.hero-cloud img{translate:none!important}.scroll-progress{display:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media(max-width:560px){.hero-cloud img{max-width:460px}.header{backdrop-filter:blur(10px)}}