/* ============================================================
   AETHER — page component styles
   Hero sections, plans, network, contact, testimonials,
   gauge, FAQ, map, marquee, CTA, pods
   ============================================================ */

/* ---------- Hero (home) ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
.hero-halo { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 90vw; height: 60vh; background: radial-gradient(ellipse at center, rgba(108,123,255,0.18), transparent 60%); filter: blur(40px); pointer-events: none; }
.hero-grid { max-width: 1200px; margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 999px; padding: 9px 16px; font-size: 0.84rem; color: #c3cdf2; backdrop-filter: blur(8px); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,0.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,0.6)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.hero-copy h1 { font-family: var(--head); font-weight: 600; font-size: clamp(2.7rem,6vw,4.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 28px 0 24px; }
.hero-copy .lede { color: var(--muted); font-size: 1.16rem; max-width: 32rem; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; }
.hstat strong { font-family: var(--head); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(180deg,#fff,#b6c2ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display: inline-flex; align-items: baseline; }
.hstat .suffix { font-size: 1rem; color: var(--muted); margin-left: 2px; -webkit-text-fill-color: var(--muted); }
.hstat span:last-child { color: var(--muted-2); font-size: 0.84rem; }
.divider { width: 1px; height: 46px; background: var(--border-2); }

/* ---------- Orb visual ---------- */
.hero-stage { display: flex; justify-content: center; }
.orb-scene { position: relative; width: min(100%,440px); aspect-ratio:1; perspective:1200px; }
.glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle,rgba(108,123,255,0.5),rgba(168,85,247,0.25) 50%,transparent 70%); filter: blur(30px); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1);opacity:0.9} 50%{transform:scale(1.1);opacity:1} }
.planet { position: absolute; inset: 30%; border-radius: 50%; transform-style: preserve-3d; transition: transform 0.3s ease-out; }
.planet-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%,#9fb0ff,transparent 40%), radial-gradient(circle at 70% 75%,#a855f7,transparent 50%), linear-gradient(135deg,#6c7bff,#8b5cf6); box-shadow: inset -18px -22px 40px rgba(0,0,0,0.5),0 0 60px rgba(108,123,255,0.6),0 0 120px rgba(168,85,247,0.3); }
.shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%,rgba(255,255,255,0.55),transparent 40%); }
.orbit { position: absolute; inset: 8%; border: 1px solid rgba(108,123,255,0.35); border-radius: 50%; transform-style: preserve-3d; }
.orbit-a { inset: 8%; border-color: rgba(108,123,255,0.4); animation: rot 26s linear infinite; }
.orbit-b { inset: -2%; border-style: dashed; border-color: rgba(168,85,247,0.4); animation: rot 38s linear infinite reverse; }
.orbit-c { inset: 18%; border-color: rgba(34,211,238,0.35); animation: rot 20s linear infinite; }
@keyframes rot { to{transform:rotate(360deg)} }
.sat { position: absolute; border-radius: 50%; top: -6px; left: 50%; }
.sat-a { width: 13px; height: 13px; background: var(--grad); box-shadow: 0 0 20px rgba(108,123,255,0.8); }
.sat-b { width: 10px; height: 10px; background: #22d3ee; box-shadow: 0 0 20px rgba(34,211,238,0.8); }
.sat-c { width: 8px; height: 8px; background: linear-gradient(135deg,#a855f7,#22d3ee); box-shadow: 0 0 20px rgba(168,85,247,0.8); }
.beam { position: absolute; inset: -15%; border-radius: 50%; background: conic-gradient(from 0deg,transparent 0deg,rgba(108,123,255,0.15) 40deg,transparent 80deg,transparent 180deg,rgba(168,85,247,0.12) 220deg,transparent 260deg); animation: rot 14s linear infinite; -webkit-mask:radial-gradient(transparent 55%,#000 60%,transparent 65%); mask:radial-gradient(transparent 55%,#000 60%,transparent 65%); }
.beam-2 { animation-duration: 22s; animation-direction: reverse; }
.beam-3 { animation-duration: 30s; inset: -25%; opacity: 0.6; }

.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted-2); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; }
.mouse { width: 24px; height: 38px; border: 1.5px solid var(--border-2); border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; }
.mouse span { width: 3px; height: 7px; background: var(--accent); border-radius: 2px; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(12px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; background: rgba(255,255,255,0.02); position: relative; z-index: 1; }
.marquee-track { display: flex; gap: 40px; white-space: nowrap; width: max-content; animation: marquee 30s linear infinite; will-change: transform; }
.marquee-track span { font-family: var(--head); font-weight: 600; letter-spacing: 0.14em; color: var(--muted); font-size: 0.95rem; }
.marquee-track .star { color: var(--accent); font-size: 1rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Plan grid ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 26px; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); padding: 40px 34px; display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform 0.18s ease-out, border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.plan:hover { border-color: var(--border-2); box-shadow: var(--shadow); background: var(--panel-2); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.plan h3 { font-family: var(--head); font-size: 1.2rem; font-weight: 600; }
.plan-speed { font-size: 0.85rem; color: var(--accent-3); font-weight: 600; }
.plan-price { font-family: var(--head); font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 26px; }
.plan-price .cur { font-size: 1.1rem; font-weight: 500; vertical-align: top; margin-right: 4px; opacity: 0.7; -webkit-text-fill-color: inherit; }
.plan-price .per { font-size: 0.95rem; font-weight: 400; color: var(--muted-2); margin-left: 5px; -webkit-text-fill-color: var(--muted-2); }
.plan-feats { list-style: none; margin-bottom: 32px; flex-grow: 1; }
.plan-feats li { padding: 9px 0 9px 28px; position: relative; color: var(--muted); font-size: 0.95rem; }
.plan-feats li::before { content:'✓'; position: absolute; left:0; top:9px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:rgba(108,123,255,0.16); color:var(--accent); font-size:0.72rem; font-weight:700; }
.plan .btn { text-align: center; width: 100%; }
.plan-featured { background: linear-gradient(180deg,rgba(108,123,255,0.14),rgba(168,85,247,0.07)); border-color: rgba(108,123,255,0.45); }
.plan-featured::after { content:''; position: absolute; inset:0; border-radius:var(--rad); background:linear-gradient(135deg,transparent 50%,rgba(108,123,255,0.12)); pointer-events:none; }
.plan-featured:hover { border-color: rgba(108,123,255,0.7); }
.plan-featured .plan-price { background: var(--grad-2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.flag { position: absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:7px 18px; border-radius:999px; box-shadow:0 6px 20px rgba(108,123,255,0.55); white-space:nowrap; z-index:2; }

/* ---------- Plan comparison ---------- */
.plan-compare { margin-top: 60px; border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; background: var(--panel); }
.plan-compare table { width: 100%; border-collapse: collapse; }
.plan-compare th, .plan-compare td { padding: 16px 22px; text-align: center; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
.plan-compare th { background: rgba(108,123,255,0.08); font-family: var(--head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-3); }
.plan-compare th:first-child { text-align: left; }
.plan-compare td:first-child { text-align: left; color: var(--muted); font-weight: 500; }
.plan-compare td { color: var(--text); }
.plan-compare tr:last-child td { border-bottom: none; }

/* ---------- Billing toggle ---------- */
.billing-toggle { display: flex; justify-content: center; gap: 6px; margin-bottom: 48px; }
.billing-toggle .bt { padding: 10px 22px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: 0.3s; }
.billing-toggle .bt.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(108,123,255,0.5); }
.billing-toggle .bt:hover:not(.active) { border-color: var(--border-2); }
.billing-discount { text-align: center; font-size: 0.88rem; color: var(--ok); margin-top: -34px; margin-bottom: 40px; font-weight: 500; }

/* ---------- Network nodes ---------- */
.net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 22px; }
.net-node { background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); padding: 34px; position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform 0.18s ease-out, border-color 0.3s, background 0.3s; }
.net-node::before { content:''; position:absolute; top:-60px; right:-60px; width:160px; height:160px; border-radius:50%; background:var(--grad); filter:blur(70px); opacity:0; transition: opacity 0.45s; }
.net-node:hover { border-color: var(--border-2); background: var(--panel-2); }
.net-node:hover::before { opacity: 0.3; }
.node-ico { width:56px; height:56px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff; box-shadow:0 8px 24px rgba(108,123,255,0.35); margin-bottom:24px; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.node-ico svg { width:27px; height:27px; }
.net-node:hover .node-ico { transform: scale(1.1) rotate(-5deg); }
.net-node h3 { font-family: var(--head); font-size: 1.18rem; font-weight: 600; margin-bottom: 10px; }
.net-node p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Coverage map ---------- */
.map-wrap { position: relative; width: 100%; max-width: 800px; margin: 0 auto 60px; aspect-ratio: 1.35; background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; }
.map-wrap svg { width: 100%; height: 100%; }
.map-city { cursor: default; }
.map-dot { fill: var(--accent); transition: r 0.3s; }
.map-city:hover .map-dot { r: 8; }
.map-city:hover .map-label { opacity: 1; transform: translateY(0); }
.map-label { fill: var(--muted); font-size: 10px; font-family: var(--body); opacity: 0.7; transform: translateY(4px); transition: 0.3s; }
.map-line { stroke: var(--accent); stroke-width: 1; opacity: 0.35; stroke-dasharray: 4 4; animation: dash 20s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -120; } }
.map-pulse { fill: none; stroke: var(--accent); stroke-width: 1; animation: map-pulse 2.5s ease-out infinite; }
@keyframes map-pulse { 0%{r:3;opacity:0.8} 100%{r:18;opacity:0} }

/* ---------- Map legend ---------- */
.map-legend { display: flex; gap: 24px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.map-legend .leg { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; }
.leg-dot.live { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.leg-dot.upcoming { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

/* ---------- Speed test gauge ---------- */
.gauge-wrap { text-align: center; max-width: 420px; margin: 0 auto; }
.gauge { position: relative; width: 300px; height: 160px; margin: 0 auto 30px; overflow: hidden; }
.gauge svg { width: 300px; height: 160px; }
.gauge-bg { fill: none; stroke: var(--border); stroke-width: 12; stroke-linecap: round; }
.gauge-fill { fill: none; stroke: url(#gaugeGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s cubic-bezier(0.16,1,0.3,1); }
.gauge-value { font-family: var(--head); font-size: 3.4rem; font-weight: 600; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.gauge-label { font-size: 0.95rem; fill: var(--muted); text-anchor: middle; }
.gauge-start { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; background: var(--grad); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 26px rgba(108,123,255,0.4); transition: 0.3s; }
.gauge-start:hover { box-shadow: 0 10px 45px rgba(108,123,255,0.65); transform: translateY(-2px); }
.gauge-start:disabled { opacity: 0.6; cursor: default; transform: none; }
.gauge-result { color: var(--muted); font-size: 0.95rem; margin-top: 16px; min-height: 22px; }

/* ---------- Testimonials ---------- */
.testimonials { position: relative; overflow: hidden; }
.test-track { display: flex; gap: 26px; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); overflow: visible; }
.test-card { min-width: 100%; max-width: 100%; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); padding: 40px; }
.test-quote { font-size: 1.2rem; color: var(--muted); line-height: 1.7; margin-bottom: 28px; font-style: italic; }
.test-quote::before { content: '"'; color: var(--accent); font-size: 2.6rem; line-height: 0; vertical-align: -0.6em; margin-right: 8px; font-style: normal; }
.test-author { display: flex; align-items: center; gap: 16px; }
.test-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.test-info strong { display: block; font-size: 0.98rem; }
.test-info span { color: var(--muted-2); font-size: 0.85rem; }
.test-nav { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.test-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: 0.3s; padding: 0; }
.test-dot.active { background: var(--accent); box-shadow: 0 0 10px rgba(108,123,255,0.6); }
.test-arrows { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.test-arrows button { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); cursor: pointer; transition: 0.3s; }
.test-arrows button:hover { background: var(--panel-2); border-color: var(--border-2); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 720px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; background: none; border: none; color: var(--text); font-family: inherit; font-size: 1.08rem; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.2s; }
.faq-q:hover { color: var(--accent); }
.faq-chevron { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; color: var(--muted); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), padding 0.45s; }
.faq-q[aria-expanded="true"] + .faq-a { max-height: 220px; }
.faq-a-inner { padding: 0 0 22px; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }

/* ---------- CTA block ---------- */
.cta { position: relative; text-align: center; background: var(--panel); border: 1px solid var(--border-2); border-radius: calc(var(--rad) + 10px); padding: 80px 40px; overflow: hidden; transform-style: preserve-3d; }
.cta-glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 120%; height: 70%; background: radial-gradient(ellipse at center,rgba(108,123,255,0.35),transparent 60%); filter: blur(40px); }
.cta h2 { font-family: var(--head); font-weight: 600; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: -0.02em; margin: 18px 0 18px; position: relative; }
.cta p { color: var(--muted); max-width: 36rem; margin: 0 auto 36px; font-size: 1.1rem; position: relative; }
.cta .eyebrow { position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ---------- Contact form ---------- */
.contact-wrap { max-width: 660px; margin: 0 auto; }
.form { background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); padding: 40px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field > span { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--rad-sm); background: rgba(5,7,15,0.6); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.field textarea { resize: vertical; min-height: 100px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,123,255,0.22); background: rgba(5,7,15,0.85); }
.field select option { background: var(--bg-2); }
.form-status { grid-column: 1 / -1; color: var(--ok); font-size: 0.95rem; text-align: center; }

/* ---------- Contact pods ---------- */
.contact-pods { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 18px; margin-bottom: 48px; }

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 20px; text-align: center; }
.sb-stat { padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); }
.sb-stat strong { font-family: var(--head); font-size: 2rem; font-weight: 600; background: var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display: block; margin-bottom: 6px; }
.sb-stat span { color: var(--muted); font-size: 0.88rem; }

/* ---------- Add-ons ---------- */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
.addon { background: var(--panel); border: 1px solid var(--border); border-radius: var(--rad); padding: 28px; display: flex; gap: 18px; align-items: start; transition: 0.3s; }
.addon:hover { border-color: var(--border-2); background: var(--panel-2); }
.addon-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--grad); color:#fff; flex-shrink:0; box-shadow:0 6px 18px rgba(108,123,255,0.3); }
.addon-ico svg { width:22px; height:22px; }
.addon h4 { font-family: var(--head); font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.addon p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Responsive (page) ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-stage { order: -1; }
  .orb-scene { width: min(100%,300px); margin: 0 auto; }
  .orbit-a { inset: 4%; }
  .orbit-b { inset: -6%; }
  .orbit-c { inset: 14%; }
  .hero-stats { gap: 16px; }
  .hstat strong { font-size: 1.6rem; }
  .form { grid-template-columns: 1fr; }
  .contact-pods { grid-template-columns: 1fr 1fr; }
  .page-hero h1 { font-size: clamp(2rem,6vw,3rem); }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .cta { padding: 56px 22px; }
  .contact-pods { grid-template-columns: 1fr; }
  .form { padding: 28px 20px; }
  .plan-compare { overflow-x: auto; }
}