:root{
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
}

html{ scroll-behavior:smooth; }

.skip-link{
  position:absolute; left:-999px; top:12px;
  background:#0b1220; color:#fff;
  border:1px solid rgba(255,255,255,.16);
  padding:10px 12px; border-radius:12px;
  z-index:9999;
}
.skip-link:focus{ left:12px; }

.hero-grid{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 550px at 20% 10%, rgba(34,211,238,.13), transparent 60%),
    radial-gradient(900px 550px at 80% 25%, rgba(167,139,250,.12), transparent 55%),
    radial-gradient(800px 520px at 55% 80%, rgba(56,189,248,.10), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 35%);
  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,1), rgba(0,0,0,.1));
}

.hero-glow{ position:absolute; border-radius:9999px; filter: blur(42px); opacity:.9; }
.hero-glow-a{ width:520px; height:520px; left:-120px; top:-140px; background: rgba(34,211,238,.15); }
.hero-glow-b{ width:560px; height:560px; right:-160px; top:-90px; background: rgba(167,139,250,.14); }
.hero-glow-c{ width:520px; height:520px; left:34%; bottom:-220px; background: rgba(56,189,248,.10); }

.glass-panel{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.btn-primary, .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.btn-primary{
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(167,139,250,.9));
  color: rgb(2 6 23);
  box-shadow: 0 18px 45px rgba(34,211,238,.16);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0px); }

.btn-secondary{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: rgba(226,232,240,.98);
}
.btn-secondary:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }

.stat-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px 14px;
}

.agent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.agent-ico{
  height:36px; width:36px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}

.pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}
.pill-hot{ border-color: rgba(251,113,133,.25); background: rgba(251,113,133,.10); color: rgb(255 228 230); }
.pill-ok{ border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.10); color: rgb(209 250 229); }
.pill-cyan{ border-color: rgba(34,211,238,.25); background: rgba(34,211,238,.10); color: rgb(207 250 254); }
.pill-warn{ border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.10); color: rgb(254 243 199); }
.pill-violet{ border-color: rgba(167,139,250,.25); background: rgba(167,139,250,.10); color: rgb(237 233 254); }

.kpi-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px 14px;
}
.kpi-ico{
  height:32px; width:32px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(207,250,254,.9);
}

.activity-item{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(226,232,240,.92);
}
.dot{
  width:8px; height:8px; border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.03);
}
.dot-cyan{ background: rgb(34 211 238); }
.dot-emerald{ background: rgb(52 211 153); }
.dot-violet{ background: rgb(167 139 250); }
.dot-amber{ background: rgb(251 191 36); }

.feature-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 24px;
  padding: 18px 18px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  min-height: 188px;
  display:flex;
  flex-direction:column;
}
.feature-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.feature-top{ display:flex; align-items:center; gap:12px; }
.feature-ico{
  height:42px; width:42px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(167,139,250,.12));
  display:flex; align-items:center; justify-content:center;
  color: rgba(207,250,254,.9);
}
.feature-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(165,243,252,.95);
  font-size: 14px;
  font-weight: 600;
  padding-top: 14px;
}
.feature-link:hover{ color: white; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(226,232,240,.95);
  font-size: 12px;
}
.chip-strong{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.numbers-glow{
  position:absolute; inset:-60px;
  background:
    radial-gradient(700px 380px at 20% 30%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(650px 360px at 85% 20%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(650px 360px at 65% 85%, rgba(56,189,248,.10), transparent 60%);
  filter: blur(22px);
  opacity: .95;
}

.mini-metric{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px 14px;
}

.route-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
  border-radius: 18px;
  padding: 14px 14px;
}

.callout{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 14px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.callout-ico{
  height:36px; width:36px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
  color: rgba(207,250,254,.9);
  flex: 0 0 auto;
}

.bullet-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(226,232,240,.95);
}

.icon-btn{
  height:40px; width:40px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(226,232,240,.92);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0px); }

.industry-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 24px;
  padding: 18px 18px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  display:block;
}
.industry-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.industry-ico{
  height:44px; width:44px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(167,139,250,.12));
  display:flex; align-items:center; justify-content:center;
  color: rgba(207,250,254,.9);
}
.industry-title{ margin-top:10px; font-weight: 700; }
.industry-desc{ margin-top:6px; color: rgba(203,213,225,.92); font-size: 13px; line-height: 1.45; }
.industry-link{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; color: rgba(165,243,252,.95); font-weight: 700; font-size: 13px; }
.industry-card:hover .industry-link{ color: #fff; }

.price-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 26px;
  padding: 18px 18px;
  height:100%;
  position:relative;
  overflow:hidden;
}
.price-card-featured{
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(167,139,250,.10));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 30px 120px rgba(34,211,238,.10);
}
.featured-badge{
  position:absolute;
  top:14px; right:14px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(226,232,240,.95);
}
.li{ display:flex; align-items:flex-start; gap:10px; }

.toggle{
  width:52px; height:30px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position:relative;
  padding:2px;
  transition: background .2s ease, border-color .2s ease;
}
.toggle-knob{
  display:block;
  width:26px; height:26px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(167,139,250,.9));
  transform: translateX(0);
  transition: transform .2s ease;
}
.toggle[data-state="annual"] .toggle-knob{ transform: translateX(22px); }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}