:root{--electric:#1b6cff;--aqua:#65e5d6}
.hero{isolation:isolate}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(7,21,40,.48),transparent)}
.hero-grid{padding:28px 0}
.hero-copy h1{max-width:720px;text-wrap:balance}
.hero-copy .eyebrow{padding:8px 12px;border:1px solid rgba(141,242,232,.34);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(9px)}
.hero .btn:not(.ghost){background:linear-gradient(135deg,#2d7dff,#1a58d9);box-shadow:0 14px 32px rgba(32,106,255,.34);transition:transform .22s ease,box-shadow .22s ease}
.hero .btn:not(.ghost):hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(32,106,255,.46)}
.hero-card{overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--aqua),var(--electric),transparent)}
.trust span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.sim-card{box-shadow:0 28px 65px rgba(8,29,63,.18)}
.product,.why,.cta-box{transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease}
.product:hover,.why:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(12,38,79,.13);border-color:rgba(27,108,255,.3)}
.product.dark:hover{box-shadow:0 22px 45px rgba(7,21,40,.3)}
.cta-box{position:relative;overflow:hidden;background:linear-gradient(120deg,#1455d9,#287cf9 58%,#38b9db)}
.cta-box:after{content:"";position:absolute;width:300px;height:300px;right:-90px;top:-190px;border-radius:50%;background:rgba(101,229,214,.28);filter:blur(2px)}
.cta-box>*{position:relative;z-index:1}
.faq details{transition:padding .24s ease,background-color .24s ease}
.faq details[open]{padding:20px 16px;background:#f6f9ff;border-radius:14px}
@media(max-width:850px){.hero-grid{padding:0}.hero-copy .eyebrow{padding:6px 9px}.trust span{padding:5px 7px}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{opacity:0}
  .hero.is-banner-visible .hero-copy>*{animation:heroReveal .72s cubic-bezier(.2,.75,.25,1) forwards}
  .hero.is-banner-visible .hero-copy>.eyebrow{animation-delay:.1s}.hero.is-banner-visible .hero-copy>h1{animation-delay:.22s}.hero.is-banner-visible .hero-copy>.lead{animation-delay:.34s}.hero.is-banner-visible .hero-copy>.actions{animation-delay:.46s}.hero.is-banner-visible .hero-copy>.trust{animation-delay:.58s}
  .hero.is-banner-visible .hero-card{animation:heroCardReveal .85s .34s cubic-bezier(.2,.75,.25,1) both}
  @keyframes heroReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes heroCardReveal{from{opacity:0;transform:translateX(34px) scale(.97)}to{opacity:1;transform:none}}
}