/* Visual foundation preserved from the approved original prototype. */

:root{--night:#020a17;
  --navy:#07162a;
  --n2:#091f39;
  --cyan:#42d7fa;
  --blue:#238bff;
  --ice:#c5f3ff;
  --white:#f7fbff;
  --mist:#eaf1f8;
  --ink:#10213c;
  --muted:#647993;
  --line:#dce7f2;
  --gold:#dcbf8e;
  --photo:url('/assets/community-branded-desktop.svg')}


*,*:before,*:after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC','Microsoft JhengHei',sans-serif;
  background:#f5f8fd;
  color:var(--ink);
  overflow-x:hidden}

button,input{font:inherit}

button{cursor:pointer}

button,a,input,summary{outline-offset:4px}

a{color:inherit;
  text-decoration:none}

::selection{background:#62c5ff;
  color:#001b37}

.hidden{display:none!important}


.notice{min-height:30px;
  display:grid;
  place-items:center;
  text-align:center;
  background:#10263f;
  color:#bad0e4;
  font-size:11px;
  letter-spacing:.1em;
  padding:7px 18px}

.notice b{color:white}

.nav{height:78px;
  background:rgba(2,12,27,.95);
  border-bottom:1px solid rgba(173,214,245,.12);
  color:#fff;
  position:relative;
  z-index:8}

.nav-wrap{max-width:1420px;
  margin:auto;
  padding:0 5%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}

.logo{display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap}

.emblem{position:relative;
  width:42px;
  height:42px;
  display:inline-block}

.emblem:before,.emblem:after{content:"";
  position:absolute;
  left:8px;
  width:26px;
  height:26px;
  border-right:5px solid #69d8ff;
  border-bottom:5px solid #69d8ff;
  transform:rotate(45deg)}

.emblem:before{top:0}

.emblem:after{top:10px;
  border-color:var(--gold)}

.brandname{font-size:21px;
  font-weight:900;
  letter-spacing:.13em;
  line-height:1}

.logo small{display:block;
  font-size:9px;
  color:#c2d5ea;
  letter-spacing:.31em;
  margin-top:8px}

.navlinks{display:flex;
  align-items:center;
  gap:30px;
  color:#d9e9f7;
  font-size:13px;
  font-weight:700}

.navlinks a:hover{color:#76d9ff}

.navcta{border:1px solid rgba(123,211,255,.65);
  background:linear-gradient(125deg,#e7f9ff,#87cfff);
  font-weight:900;
  border-radius:6px;
  color:#002345;
  font-size:13px;
  padding:13px 20px;
  white-space:nowrap}

.menu-btn{display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid #305677;
  color:#e6f8ff;
  border-radius:8px;
  background:transparent;
  font-size:24px}

.mobile-nav{display:none;
  position:absolute;
  background:#05152b;
  left:0;
  right:0;
  padding:12px 5% 24px;
  box-shadow:0 26px 40px #02091888}

.mobile-nav a{display:block;
  padding:12px 0;
  border-bottom:1px solid #203650}


.hero{min-height:min(850px,calc(100svh - 108px));
  height:760px;
  max-height:880px;
  position:relative;
  isolation:isolate;
  background:var(--night);
  color:#fff;
  display:flex;
  align-items:center;
  overflow:hidden}

.hero-photo{position:absolute;
  z-index:-3;
  inset:-3% 0 -3% 30%;
  background:var(--photo) center 42%/cover no-repeat;
  filter:brightness(.79) saturate(1.15);
  transform:scale(1.04);
  animation:floatCity 22s ease-in-out infinite alternate}

.hero:before{content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(95deg,#020b1b 5%,rgba(3,15,33,.99) 24%,rgba(2,14,33,.81) 41%,rgba(3,16,33,.23) 78%,rgba(3,14,28,.08) 100%),linear-gradient(0deg,#071428 0%,transparent 30%,#04172a5c 95%)}

.hero:after{content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.43;
  background:repeating-linear-gradient(90deg,transparent 0 99px,#91dfff14 99px 100px)}

#heroCanvas{position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:-1;
  opacity:.82}

.hero-inner{width:100%;
  max-width:1420px;
  margin:auto;
  padding:64px 5% 94px}

.eyebrow{font-size:11px;
  letter-spacing:.29em;
  font-weight:800;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:23px}

.eyebrow:before{content:"";
  height:2px;
  width:35px;
  background:var(--gold)}

.hero h1{font-size:clamp(46px,5.3vw,86px);
  max-width:870px;
  line-height:1.17;
  letter-spacing:-.055em;
  margin:0 0 24px;
  font-weight:900;
  text-shadow:0 15px 60px #001d43}

.hero h1 strong{display:block;
  color:#91e6ff;
  text-shadow:0 2px 33px #167dff80;
  font-weight:900}

.hero p{max-width:510px;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.9;
  color:#d1e3f3;
  margin:0 0 28px}

.hero-buttons{display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap}

.mainbtn{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:0;
  background:#e7f9ff;
  color:#062c4f;
  font-weight:900;
  border-radius:6px;
  padding:17px 26px;
  box-shadow:0 0 30px #1ab6ff4b,0 6px 40px #0008;
  transition:transform .2s,box-shadow .2s}

.mainbtn:hover{transform:translateY(-3px);
  box-shadow:0 0 46px #4acaff90}

.playicon{display:grid;
  place-items:center;
  border-radius:50%;
  background:#072b4a;
  color:#c7f5ff;
  width:29px;
  height:29px;
  box-shadow:0 0 11px #50e1ff}

.outlinebtn{border:1px solid #d7edfa68;
  color:#fff;
  background:#061e358c;
  border-radius:6px;
  padding:17px 25px;
  font-weight:800;
  transition:background .2s}

.outlinebtn:hover{background:#154265}

.hero-specs{display:flex;
  gap:27px;
  align-items:center;
  margin-top:54px;
  flex-wrap:wrap}

.hero-spec{display:flex;
  gap:11px;
  align-items:center;
  color:#d2edff;
  font-size:12px;
  letter-spacing:.02em}

.hero-spec i{display:grid;
  place-items:center;
  font-style:normal;
  font-size:20px;
  border:1px solid #5bb0e36e;
  width:37px;
  height:37px;
  border-radius:50%;
  color:#7feaff}

.data-vertical{position:absolute;
  right:32px;
  bottom:125px;
  transform:rotate(-90deg) translateX(100%);
  transform-origin:right bottom;
  font-size:11px;
  letter-spacing:.5em;
  font-weight:900;
  color:#b9eaff9e;
  white-space:nowrap}

.hero-foot{position:absolute;
  left:5%;
  right:5%;
  bottom:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#a2bad1;
  font-size:10px;
  letter-spacing:.14em}

.signal{display:flex;
  align-items:center;
  gap:8px}

.signal-dot{width:8px;
  height:8px;
  border-radius:50%;
  background:#4de9c8;
  box-shadow:0 0 15px #4de9c8;
  animation:pulse 2s infinite}


.band{background:#071d34;
  color:#9ed2f4;
  padding:17px 5%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,5vw,85px);
  font-size:11px;
  letter-spacing:.24em;
  text-align:center;
  border-top:1px solid #42749c80;
  border-bottom:1px solid #42749c80;
  overflow:hidden}

.band span{white-space:nowrap}


.section{max-width:1320px;
  margin:0 auto;
  padding:112px 5%}

.overline{color:#1779cb;
  font-size:11px;
  letter-spacing:.26em;
  font-weight:900;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:9px}

.overline:before{content:"";
  height:2px;
  width:28px;
  background:#bb8d4f}

.section h2{font-size:clamp(30px,3.6vw,48px);
  letter-spacing:-.045em;
  line-height:1.25;
  margin:0 0 18px;
  color:#0a2340}

.subcopy{color:#687b91;
  line-height:1.85;
  font-size:15px;
  max-width:640px;
  margin:0}

.plans-head{display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:37px}

.muted-link{font-size:13px;
  font-weight:800;
  color:#126ab5;
  border-bottom:1px solid #94bfe3;
  padding-bottom:6px;
  white-space:nowrap}

.plan-list{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}

.plan-card{position:relative;
  border-radius:14px;
  background:#fff;
  border:1px solid #dbe5ef;
  min-height:360px;
  padding:30px 29px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(14,56,103,.055);
  transition:transform .28s,box-shadow .28s}

.plan-card:after{content:"";
  position:absolute;
  pointer-events:none;
  top:-94px;
  right:-68px;
  width:200px;
  height:200px;
  border:1px solid #cee2f3;
  border-radius:50%;
  box-shadow:0 0 0 31px #d8effa4f,0 0 0 62px #d8effa40}

.plan-card:hover{transform:translateY(-7px);
  box-shadow:0 26px 66px #16467c24}

.plan-card.featured{background:#0a2a4b;
  color:#fff;
  border-color:#1776bc;
  box-shadow:0 20px 70px #00589a26}

.plan-card.featured:after{border-color:#319bfa55;
  box-shadow:0 0 0 31px #2375bd27,0 0 0 62px #379ffd17}

.planchip{align-self:flex-start;
  border-radius:3px;
  background:#e6f2fb;
  color:#1a6cb7;
  font-size:11px;
  font-weight:800;
  padding:6px 9px;
  letter-spacing:.08em}

.featured .planchip{background:#31a5f0;
  color:#fff}

.plan-speed{font-size:clamp(49px,5vw,76px);
  letter-spacing:-.065em;
  font-weight:900;
  line-height:1;
  margin:31px 0 6px}

.plan-speed span{font-size:20px;
  color:#859bb0;
  letter-spacing:-.01em}

.featured .plan-speed span{color:#9bcde9}

.plan-speed small{font-size:14px;
  letter-spacing:-.01em;
  font-weight:800;
  color:#3189d7}

.featured .plan-speed small{color:#77dfff}

.plan-desc{font-size:13px;
  color:#71869d;
  margin-top:8px;
  line-height:1.7}

.featured .plan-desc{color:#bdd7eb}

.plan-bottom{margin-top:auto;
  border-top:1px solid #dae6ef;
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px}

.featured .plan-bottom{border-color:#2e668e}

.price-note{font-size:13px;
  font-weight:850;
  color:#143f65}

.featured .price-note{color:#e1f6ff}

.plan-select{border:0;
  border-radius:50%;
  background:#146cb7;
  color:white;
  font-size:22px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  transition:background .2s,transform .2s}

.plan-select:hover{background:#28a1f2;
  transform:translateX(2px)}


.dark-section{background:#04182e;
  color:white;
  padding:110px max(5%,calc((100vw - 1240px)/2)) 105px;
  position:relative;
  overflow:hidden}

.dark-section:before{content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 83% 51%,#1456918e,transparent 35%),linear-gradient(120deg,#04182e,#051121 70%);
  opacity:.9}

.dark-grid{position:absolute;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(#53c7ff 1px,transparent 1px),linear-gradient(90deg,#53c7ff 1px,transparent 1px);
  background-size:86px 86px;
  transform:perspective(600px) rotateX(58deg) scale(2);
  transform-origin:center bottom}

.dark-inner{position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  max-width:1320px;
  margin:auto}

.dark-title h2{font-size:clamp(34px,4.1vw,56px);
  line-height:1.22;
  letter-spacing:-.05em;
  margin:15px 0 25px}

.dark-title h2 strong{color:#7edeff}

.dark-title p{color:#adc3d7;
  line-height:1.9;
  margin:0;
  max-width:550px}

.dark-overline{font-size:11px;
  letter-spacing:.28em;
  color:#58ccff}

.network-map{height:330px;
  border:1px solid #4384b453;
  border-radius:12px;
  position:relative;
  background:radial-gradient(circle at 50% 60%,#206db861,transparent 49%),repeating-linear-gradient(0deg,transparent 0 53px,#71c6ff21 54px),repeating-linear-gradient(90deg,transparent 0 53px,#71c6ff21 54px);
  overflow:hidden;
  box-shadow:inset 0 0 60px #0065a030}

.network-map svg{width:100%;
  height:100%;
  filter:drop-shadow(0 0 10px #65cfff55)}

.network-map path{stroke:#62d5ff;
  stroke-width:2;
  fill:none;
  stroke-dasharray:5 13;
  animation:dash 2.2s linear infinite}

.network-map circle{fill:#a2f2ff;
  filter:drop-shadow(0 0 7px #72e9ff);
  animation:nodePulse 2.4s ease-in-out infinite;
  transform-origin:center}

.network-map circle:nth-child(2n){animation-delay:.4s}

.grid-tag{position:absolute;
  bottom:15px;
  left:20px;
  color:#aadaf9;
  font-size:10px;
  letter-spacing:.24em}


.why-grid{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:46px}

.why-card{background:white;
  border:1px solid #e0e9f2;
  border-radius:12px;
  padding:25px;
  min-height:194px}

.why-icon{width:43px;
  height:43px;
  border-radius:8px;
  background:#e5f5fd;
  color:#1279c1;
  display:grid;
  place-items:center;
  font-size:21px}

.why-card h3{font-size:17px;
  margin:22px 0 8px}

.why-card p{font-size:13px;
  line-height:1.8;
  color:#708197;
  margin:0}


.coverage{background:#071f38;
  color:#fff;
  padding:100px 5%;
  position:relative;
  overflow:hidden}

.coverage:before{content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at right,#236eae4d,transparent 50%);
  pointer-events:none}

.coverage-in{max-width:1260px;
  margin:auto;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:62px;
  align-items:center;
  position:relative}

.coverage h2{font-size:clamp(32px,3vw,44px);
  margin:14px 0 18px;
  line-height:1.35}

.coverage p{color:#adc9dd;
  line-height:1.9}

.coverage-form{padding:28px;
  background:#ffffff0e;
  border:1px solid #7ac5fd52;
  border-radius:14px}

.coverage-form label{display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:11px}

.coverage-search{display:flex;
  gap:10px}

.coverage-search input{flex:1;
  min-width:0;
  padding:17px 15px;
  border-radius:6px;
  background:white;
  color:#122943;
  border:0}

.coverage-search button{border:0;
  background:#6ccfff;
  color:#003356;
  border-radius:6px;
  font-size:13px;
  padding:14px 21px;
  white-space:nowrap;
  font-weight:900}

.coverage-result{margin-top:13px;
  min-height:20px;
  font-size:13px;
  line-height:1.6;
  color:#c3ebff}

.coverage small{color:#7d9db9;
  font-size:11px}


.steps{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:50px}

.step{padding:24px 25px;
  border-top:2px solid #1679d0;
  background:white;
  box-shadow:0 10px 35px #0052920b}

.step b{font-size:35px;
  color:#bad8f0}

.step h3{margin:12px 0 6px;
  font-size:17px}

.step p{line-height:1.7;
  color:#72839a;
  font-size:13px}

.faq{background:#f0f6fb;
  border-top:1px solid #e4edf6}

.faq details{background:white;
  border:1px solid #dce9f3;
  border-radius:9px;
  padding:18px 22px;
  margin:12px 0}

.faq summary{cursor:pointer;
  font-weight:850}

.faq details p{color:#6b7e95;
  line-height:1.8;
  font-size:14px;
  margin:16px 0 2px}

.footer{background:#031427;
  color:#a4bfd4;
  padding:45px 5%;
  font-size:12px;
  line-height:1.85}

.footerin{max-width:1250px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap}

.footer b{color:white;
  font-size:16px}

.footer small{display:block;
  color:#7b9bb5;
  margin-top:6px}


.toast{position:fixed;
  z-index:120;
  right:24px;
  bottom:24px;
  max-width:min(450px,calc(100vw - 48px));
  padding:14px 21px;
  border-radius:9px;
  border:1px solid #8bd5ff;
  background:#062747;
  color:#e4f8ff;
  box-shadow:0 24px 80px #001b327e;
  font-size:13px;
  line-height:1.6;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:.25s}

.toast.show{opacity:1;
  transform:translateY(0)}


/* Immersive experience */
.experience{position:fixed;
  inset:0;
  z-index:100;
  background:#01050d;
  color:#fff;
  display:none;
  overflow:hidden;
  isolation:isolate}

.experience.open{display:block}

.experience *{box-sizing:border-box}

.ex-bg{position:absolute;
  inset:-8%;
  background:var(--photo) center center / cover no-repeat;
  filter:brightness(.08) grayscale(.9);
  transform:scale(1.22);
  opacity:.14;
  transition:filter 2.1s ease,opacity 2s ease,transform 5s cubic-bezier(.12,.7,.15,1);
  z-index:-5}

.experience.stage3 .ex-bg,.experience.stage4 .ex-bg{opacity:1;
  filter:brightness(.84) saturate(1.45);
  transform:scale(1.02)}

.experience.stage4 .ex-bg{filter:brightness(.48) saturate(1.1);
  transform:scale(1.12)}

.ex-shade{position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(ellipse at 50% 48%,transparent 0 22%,#0008178c 76%),linear-gradient(0deg,#020812bd,transparent 34%)}


.ex-noise{position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.17;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,#fff1 4px);
  mix-blend-mode:screen}


.ex-topbar{position:absolute;
  z-index:13;
  top:24px;
  left:clamp(20px,4vw,60px);
  right:clamp(20px,4vw,60px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px}

.ex-logo{font-size:13px;
  font-weight:900;
  letter-spacing:.25em}

.ex-logo small{font-size:9px;
  color:#6ad3ff;
  letter-spacing:.23em;
  margin-left:9px}

.ex-controls{display:flex;
  gap:8px}

.ex-controls button{border:1px solid #7297b96b;
  border-radius:4px;
  padding:10px 13px;
  color:white;
  background:#0920399c;
  font-size:12px}

.ex-progress{position:absolute;
  top:78px;
  left:0;
  right:0;
  height:2px;
  background:#4383a72d}

.ex-progress div{width:0;
  height:100%;
  background:#76dfff;
  box-shadow:0 0 15px #55c9ff;
  transition:width .2s}


.ex-stage{position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transition:opacity .55s;
  opacity:0;
  pointer-events:none}

.experience.stage1 .stage1,.experience.stage2 .stage2,.experience.stage3 .stage3,.experience.stage4 .stage4{opacity:1;
  pointer-events:auto}

.stage1{background:radial-gradient(circle at 50% 50%,#103b6c 0,#020816 34%,#000 70%)}

.origin{width:16px;
  height:16px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 25px #fff,0 0 60px 22px #21aaff,0 0 130px 50px #007aff;
  animation:ignite 2.3s ease-in-out infinite}

.origin:before,.origin:after{content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid #92e9ffb8;
  width:180px;
  height:180px;
  transform:translate(-50%,-50%);
  animation:expanding 2.4s ease-out infinite}

.origin:after{animation-delay:.6s}

.stagetext{position:absolute;
  left:7%;
  bottom:16%;
  right:7%;
  z-index:3}

.stagetext .index{font-size:11px;
  color:#79cffa;
  letter-spacing:.35em;
  font-weight:800}

.stagetext h2{font-size:clamp(40px,6vw,92px);
  line-height:1.15;
  margin:13px 0;
  letter-spacing:-.05em;
  text-shadow:0 10px 50px #000}

.stagetext p{color:#b9d5e8;
  font-size:clamp(13px,1.5vw,18px);
  margin:0}


.stage2{background:radial-gradient(ellipse at 50% 52%,#154b7b,#020717 53%,#000)}

#warpCanvas{position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0}

.stage2:before{content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 51%,transparent 5%,#0010279e 60%,#000 100%);
  z-index:1}

.stage2:after{content:"";
  position:absolute;
  left:52%;
  top:51%;
  width:150px;
  height:150px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle,#fff 0%,#bdf9ff 4%,#3ccaff 10%,#167aff44 23%,transparent 67%);
  box-shadow:0 0 65px #149dffd9,0 0 180px 55px #0059f358;
  animation:hyperPulse 1.1s ease-in-out infinite alternate}

.stage2 .stagetext{z-index:2}


.stage3 .stagetext{z-index:5}

.stage3 .stagetext h2{color:#dbf7ff}

.ex-trails{position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s}

.experience.stage3 .ex-trails,.experience.stage4 .ex-trails{opacity:1}

.ex-trails svg{position:absolute;
  width:100%;
  height:100%;
  inset:0;
  filter:drop-shadow(0 0 10px #25c9ff) drop-shadow(0 0 22px #24adff)}

.ex-trails path{fill:none;
  stroke:#9debff;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-dasharray:18 30;
  animation:dash 1s linear infinite}

.ex-trails path:nth-child(2){stroke:#26b9ff;
  stroke-width:5;
  animation-duration:1.55s}

.ex-beam{position:absolute;
  inset:0;
  background:linear-gradient(97deg,transparent 35%,#8fe9ffbd 50%,transparent 65%);
  transform:translateX(-160%) skewX(-11deg);
  mix-blend-mode:screen;
  opacity:0}

.experience.stage3 .ex-beam{animation:sweep 1.6s .15s cubic-bezier(.13,.4,.3,1) both}

.ex-nodes{position:absolute;
  inset:0;
  pointer-events:none}

.ex-nodes i{position:absolute;
  width:10px;
  height:10px;
  background:#cbf6ff;
  border-radius:50%;
  box-shadow:0 0 10px 3px #23b7ff,0 0 35px 8px #238bff;
  opacity:0;
  transform:scale(0)}

.experience.stage3 .ex-nodes i,.experience.stage4 .ex-nodes i{animation:turnNode .33s ease-out forwards;
  animation-delay:var(--delay)}

.ex-flash{position:absolute;
  inset:0;
  pointer-events:none;
  background:white;
  opacity:0;
  mix-blend-mode:screen}

.experience.stage3 .ex-flash{animation:flash .75s .05s both}


.stage4{background:radial-gradient(circle at 50% 50%,#002b59a5,#020715c2 68%,#010510ec)}

.final-content{width:min(100%,900px);
  padding:90px 30px 70px;
  text-align:center;
  position:relative;
  z-index:5}

.final-tag{display:inline-block;
  border:1px solid #76d7fc8a;
  background:#082746a6;
  color:#a8e9ff;
  font-weight:900;
  letter-spacing:.24em;
  padding:9px 17px;
  font-size:11px}

.final-content h2{font-size:clamp(47px,7.7vw,116px);
  font-weight:900;
  margin:25px 0 0;
  letter-spacing:-.065em;
  line-height:1.08;
  text-shadow:0 0 42px #18a7ff85}

.final-content h2 span{display:block;
  color:#80e5ff}

.final-content p{font-size:clamp(15px,1.5vw,20px);
  color:#e0effc;
  line-height:1.9;
  margin:26px auto 28px;
  max-width:660px}

.final-actions{display:flex;
  justify-content:center;
  gap:11px;
  flex-wrap:wrap}

.final-actions button{border:1px solid #8ddfff;
  background:#e0f6ff;
  color:#08345d;
  border-radius:6px;
  padding:14px 25px;
  font-weight:900}

.final-actions button.subtle{background:#082340c9;
  color:#f0f8ff;
  border-color:#579ac0}

.final-speed{margin-top:30px;
  color:#7cdcff;
  letter-spacing:.28em;
  font-size:11px;
  font-weight:900}


.ex-bottom{position:absolute;
  left:5%;
  right:5%;
  bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#9ecae7;
  font-size:11px;
  letter-spacing:.13em;
  z-index:16}

.ex-bars{display:flex;
  gap:7px}

.ex-bars i{height:3px;
  background:#44647c;
  width:46px}

.ex-bars i.on{background:#4cdbff;
  box-shadow:0 0 9px #35b6fa}


@keyframes pulse{50%{opacity:.35}

}

@keyframes floatCity{to{transform:scale(1.11) translateX(-1.7%)}

}

@keyframes dash{to{stroke-dashoffset:-144}

}

@keyframes nodePulse{50%{opacity:.5;
  transform:scale(.88)}

}

@keyframes ignite{45%{transform:scale(1.35)}

70%{transform:scale(.85)}

}

@keyframes expanding{0%{opacity:1;
  transform:translate(-50%,-50%) scale(.12)}

100%{opacity:0;
  transform:translate(-50%,-50%) scale(3.2)}

}

@keyframes sweep{20%{opacity:1}

90%{opacity:.6}

100%{transform:translateX(160%) skewX(-11deg);
  opacity:0}

}

@keyframes turnNode{100%{opacity:1;
  transform:scale(1)}

}

@keyframes flash{0%,100%{opacity:0}

48%{opacity:.5}

}

@keyframes hyperPulse{to{transform:translate(-50%,-50%) scale(1.36);
  filter:brightness(1.45)}

}


@media(max-width:980px){.navlinks{gap:16px}

.hero{height:720px;
  min-height:620px}

.hero-photo{inset:0 0 0 15%;
  opacity:.9}

.hero:before{background:linear-gradient(90deg,#020a18 0%,#020a18e0 55%,#051a3140),linear-gradient(0deg,#05152dd9,transparent 65%)}

.hero h1{max-width:620px}

.data-vertical{display:none}

.dark-inner{grid-template-columns:1fr}

.network-map{max-width:670px}

.why-grid{grid-template-columns:repeat(2,1fr)}

.coverage-in{grid-template-columns:1fr;
  gap:30px}

}


@media(max-width:700px){.nav{height:67px}

.nav-wrap{padding:0 22px}

.navlinks,.navcta{display:none}

.menu-btn{display:flex}

.mobile-nav.show{display:block}

.logo{gap:8px}

.emblem{width:32px;
  height:33px}

.emblem:before,.emblem:after{width:18px;
  height:18px;
  border-width:4px;
  left:4px}

.emblem:after{top:9px}

.brandname{font-size:17px}

.logo small{font-size:7px;
  letter-spacing:.24em}

.notice{font-size:10px}

.hero{height:auto;
  min-height:calc(100svh - 97px);
  max-height:none;
  align-items:end}

.hero-photo{inset:0;
  opacity:.7;
  background-position:64% center;
  filter:brightness(.6) saturate(1.1)}

.hero:before{background:linear-gradient(0deg,#020a17 0%,#020a17ef 30%,#020a17ba 54%,#020a1745 86%),linear-gradient(90deg,#020a17a6,transparent)}

.hero-inner{padding:145px 26px 92px}

.hero h1{font-size:clamp(37px,10.5vw,60px);
  letter-spacing:-.06em}

.hero p{font-size:14px;
  line-height:1.9;
  max-width:450px}

.hero-buttons{align-items:stretch}

.mainbtn,.outlinebtn{padding:15px 18px;
  font-size:13px}

.mainbtn{width:100%}

.outlinebtn{width:100%;
  text-align:center}

.hero-specs{margin-top:30px;
  gap:13px;
  justify-content:space-between}

.hero-spec{font-size:10px;
  gap:4px}

.hero-spec i{font-size:16px;
  height:29px;
  width:29px}

.hero-foot{bottom:17px;
  left:26px;
  right:26px;
  font-size:9px}

.hero-foot span:last-child{display:none}

.band{justify-content:flex-start;
  gap:30px;
  white-space:nowrap;
  font-size:10px;
  padding:15px 24px}

.section{padding:78px 24px}

.plans-head{align-items:start;
  flex-direction:column}

.plan-list{grid-template-columns:1fr}

.plan-card{min-height:280px;
  padding:24px}

.plan-speed{font-size:58px;
  margin:22px 0 6px}

.why-grid{grid-template-columns:1fr 1fr;
  gap:11px}

.why-card{padding:18px 15px;
  min-height:170px}

.why-card h3{font-size:14px}

.why-card p{font-size:12px}

.dark-section{padding:74px 24px}

.dark-inner{gap:38px}

.network-map{height:270px}

.coverage{padding:75px 24px}

.coverage-search{flex-direction:column}

.coverage-search button{padding:17px}

.steps{grid-template-columns:1fr}

.footerin{flex-direction:column}

.experience .ex-topbar{top:20px;
  left:18px;
  right:18px}

.ex-logo{font-size:12px}

.ex-logo small{display:block;
  margin:6px 0 0;
  font-size:8px}

.ex-progress{top:76px}

.ex-controls button{padding:9px 11px}

.stagetext{bottom:22%;
  left:25px;
  right:25px}

.stagetext h2{font-size:clamp(40px,12vw,58px)}

.stage3 .stagetext h2{font-size:clamp(40px,10vw,62px)}

.ex-bottom{left:25px;
  right:25px;
  bottom:20px;
  font-size:9px}

.ex-bars i{width:24px}

.final-content h2{font-size:clamp(43px,11vw,72px)}

.final-content p{font-size:15px}

.final-actions{flex-direction:column;
  max-width:320px;
  margin:auto}

.final-actions button{width:100%}

.final-tag{font-size:9px}

.ex-bg{background-position:61% center}

}


@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}

*,*:before,*:after{animation-duration:.001ms!important;
  transition-duration:.001ms!important}

.experience.open{display:block}

}