:root{
  --bg:#0c0f14;
  --card:#151922;
  --muted:#a7b0c0;
  --text:#e9eef7;
  --brand:#33a3ff;
  --brand-600:#2185d0;
  --accent:#22c55e;
  --danger:#ef4444;
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  --messenger:#0084ff;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b0e13 0%,#0c1018 100%) fixed;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
img{max-width:100%;display:block}
.hidden{display:none !important}
.muted{color:var(--muted)}
.micro{font-size:.8rem}

/* Banner */
.highlight-offer{
  background:linear-gradient(90deg,#22c55e33,#33a3ff33);
  padding:.5rem 1rem;
  text-align:center;
  color:#d9ffe6;
  border-bottom:1px solid #2a3341;
}

/* Test Website Notice */
.test-notice {
    background: var(--danger);
    color: white;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: bold;
    border-bottom: 1px solid #1f2633;
}
.test-notice p {
    margin: 0;
}

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  position:sticky;
  top:0;
  background:rgba(12,16,24,.85);
  backdrop-filter:blur(10px);
  z-index:10;
  border-bottom:1px solid #1f2633;
}
.logo-container{display:flex;align-items:center;gap:.5rem}
.logo-img{width:40px;height:40px;object-fit:contain}
.logo-text{font-weight:700;font-size:1.25rem;letter-spacing:.5px}
.menu-right{display:flex;align-items:center;gap:.75rem}
.menu-toggle{display:none;cursor:pointer;font-size:1.5rem}
nav{display:flex;gap:1rem;align-items:center}
nav a{padding:.35rem .5rem;border-radius:.5rem}
nav a:hover{background:#1a2231}

/* Buttons */
.btn{
  background:var(--brand);
  color:white;
  border:none;
  padding:.65rem 1rem;
  border-radius:.6rem;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{background:var(--brand-600)}
.btn-ghost{
  background:transparent;
  border:1px solid #2a3341;
  color:var(--text);
}
.btn-ghost:hover{border-color:#3a465a;background:#121827}
.btn-sm{padding:.45rem .7rem;border-radius:.5rem;font-size:.9rem}

/* Hero */
.hero{
  padding:5rem 1.25rem;
  text-align:center;
  background:radial-gradient(60% 80% at 50% 0%,#17304a 0%,#0c1018 60%), url('hero.jpg') center/cover no-repeat;
  border-bottom:1px solid #121826;
}
.hero h1{font-size: clamp(1.8rem, 3vw + 1rem, 3rem);margin:0 0 .5rem}
.hero p{color:var(--muted);max-width:800px;margin:0 auto 1rem}

/* Sections */
section{padding:2.5rem 1.25rem;max-width:1100px;margin-inline:auto}
.plans .plan-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.plan{
  background:var(--card);
  padding:1rem;
  border:1px solid #1d2330;
  border-radius:.8rem;
}
.plan h3{margin-top:0}
.about,.contact{background:transparent}
footer{
  padding:2rem 1.25rem;
  text-align:center;
  color:var(--muted);
  border-top:1px solid #121826;
}

/* Forms */
input,select,textarea{
  background:#0d1220;
  color:var(--text);
  border:1px solid #2a3341;
  border-radius:.5rem;
  padding:.6rem;
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:#35527a;
}
textarea{min-height:120px;resize:vertical;line-height:1.35}

/* Contact form layout */
#contactForm{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width: 820px){
  #contactForm{grid-template-columns: repeat(12,1fr);align-items:center}
  #contactForm input[name="name"]     { grid-column: 1 / span 3; }
  #contactForm input[name="email"]    { grid-column: 4 / span 3; }
  #contactForm input[name="mobile"]   { grid-column: 7 / span 3; }
  #contactForm select[name="plan"]    { grid-column: 10 / span 3; }
  #contactForm textarea               { grid-column: 1 / span 9; }
  #contactForm button[type="submit"]  { grid-column: 10 / span 3; }
}

/* Contact CTA strip */
.contact-cta{
  margin-top: .5rem;
  background: #0f1420;
  border-top: 1px solid #1d2330;
  border-bottom: 1px solid #1d2330;
}
.cta-inner{
  max-width:1100px;margin:0 auto;
  padding: .9rem 1.25rem;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.cta-text{color:var(--muted)}
.cta-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem; border-radius:.6rem; font-weight:700;
  border:1px solid #2a3341; color:var(--text); background:#0d1220;
}
.cta-call:hover{border-color:#366; background:#112025}
.cta-messenger{ border-color: color-mix(in oklab, var(--messenger) 40%, #2a3341); }
.cta-messenger:hover{ background: color-mix(in oklab, var(--messenger) 15%, #0d1220); }

/* Coverage */
.coverage .coverage-list{
  list-style:none; padding:0; margin:1rem 0 0;
  display:grid; gap:.5rem;
}
.coverage .coverage-list li{
  background:#0d1220; border:1px solid #1d2330; border-radius:.6rem; padding:.6rem .75rem;
}

/* Referral block */
.referral{
  position: relative;
  border: 1px solid #1d2330;
  border-radius: 1rem;
  background:
    radial-gradient(120% 120% at 10% -20%, rgba(51,163,255,.25), transparent 60%),
    radial-gradient(120% 120% at 110% 120%, rgba(34,197,94,.20), transparent 60%),
    #0f1420;
  padding: 2rem 1.25rem;
  margin-top: .5rem;
  overflow: hidden;
}
.referral-inner{ display:grid; gap:1rem; align-items:center; grid-template-columns: 1fr; }
@media (min-width: 820px){ .referral-inner{ grid-template-columns: 2.2fr 1fr; } }
.ref-left h2{ margin: .2rem 0 .5rem; }
.ref-left .highlight{ color: var(--accent); }
.badge{
  display:inline-block; font-size:.75rem; letter-spacing:.3px;
  background:linear-gradient(90deg,#22c55e33,#33a3ff33);
  color:#d9ffe6; border:1px solid #234a34; padding:.2rem .5rem; border-radius:999px;
}
.ref-actions{ display:flex; gap:.5rem; margin:.5rem 0 .25rem; flex-wrap:wrap; }
.ref-right{ padding:.75rem 1rem; background:#0d1220; border:1px solid #1d2330; border-radius:.8rem; }
.ref-points{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.ref-points li::before{ content:"✨ "; }

/* Alerts for form status */
.alert{
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: .5rem;
  border: 1px solid #1f2633;
  background: #0f1420;
  color: var(--text);
  font-weight: 600;
}
.alert--success{ background:#0e1b12; border-color:#195728; color:#c5f7d2; }
.alert--error  { background:#1b1111; border-color:#5a1e1e; color:#ffd0d0; }
.alert--info   { background:#0f1420; color:var(--muted); }

/* Accessibility helpers */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* Hide honeypot */
.hp{ display:none !important; }

/* Floating Action Buttons */
.fab{
  position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:50;
}
.fab-item{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-size:22px; font-weight:700;
  color:#fff; text-decoration:none;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease;
  border:1px solid #1d2330;
}
.fab-item:hover{ transform: translateY(-2px); filter: brightness(1.1); }
.fab-call{ background:#22c55e; }
.fab-messenger{ background:var(--messenger); }

/* TAP-FRIENDLY SPACING */
@media (max-width: 820px) {
  .btn,
  .cta-btn,
  .fab-item {
    min-width: 48px;
    min-height: 48px;
    padding: 0.75rem 1rem;
  }
  nav a {
    padding: 0.75rem 1rem;
  }
}

/* MOBILE GLOW ANIMATION */
@keyframes mobileGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.8);
    transform: scale(1.08);
  }
}
@media (max-width: 820px) {
  .fab-item {
    animation: mobileGlow 2.5s infinite ease-in-out;
  }
}

/* Responsive nav */
@media (max-width: 820px){
  nav{position:absolute;top:64px;right:10px;background:#0f1420;border:1px solid #1d2330;border-radius:.8rem;padding:.5rem;display:none;flex-direction:column}
  nav.show{display:flex}
  .menu-toggle{display:block}
}

/* Why Choose Us */
.why-us {
  background: var(--card);
  border: 1px solid #1d2330;
  border-radius: .8rem;
  padding: 2rem 1.25rem;
  margin-top: 2rem;
}
.why-us h2 {
  margin-top: 0;
  text-align: center;
}
.why-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.why-list li {
  background: #121826;
  border: 1px solid #1f2633;
  border-radius: .6rem;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 500;
}