*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue: #1565C0;
      --blue-light: #1E88E5;
      --blue-bright: #2196F3;
      --blue-glow: #42A5F5;
      --dark: #0D2A4F;
      --deeper: #071829;
      --charcoal: #0A0F1E;
      --white: #F0F6FF;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Exo 2', sans-serif;
      background: var(--charcoal);
      color: var(--white);
      overflow-x: hidden;
    }

    /* ── NOISE OVERLAY ── */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0; opacity: .35;
    }

    /* ── GRID BACKGROUND ── */
    .grid-bg {
      background-image:
        linear-gradient(rgba(33,150,243,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,150,243,0.05) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    /* ── GLOW ── */
    .glow-blue { box-shadow: 0 0 40px rgba(33,150,243,0.3); }
    .glow-text { text-shadow: 0 0 30px rgba(66,165,245,0.6); }
    .glow-sm   { box-shadow: 0 0 15px rgba(33,150,243,0.4); }

    /* ── NAV ── */
    nav {
      backdrop-filter: blur(20px);
      background: rgba(7,24,41,0.85);
      border-bottom: 1px solid rgba(33,150,243,0.2);
    }

    /* ── HERO ── */
    .hero-gradient {
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(21,101,192,0.25) 0%, transparent 70%),
                  radial-gradient(ellipse 50% 40% at 80% 50%, rgba(33,150,243,0.12) 0%, transparent 60%),
                  var(--charcoal);
    }

    /* ── SIGNAL RINGS ANIMATION ── */
    @keyframes ripple {
      0%   { transform: scale(1);   opacity: .7; }
      100% { transform: scale(2.5); opacity: 0;  }
    }
    .ring { position: absolute; border-radius: 50%; border: 2px solid var(--blue-bright); animation: ripple 3s ease-out infinite; }
    .ring:nth-child(2) { animation-delay: 1s; }
    .ring:nth-child(3) { animation-delay: 2s; }

    /* ── PULSE DOT ── */
    @keyframes pulse-dot {
      0%,100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.4); opacity: .7; }
    }
    .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

    /* ── CARD ── */
    .feature-card {
      background: linear-gradient(135deg, rgba(13,42,79,0.6), rgba(7,24,41,0.8));
      border: 1px solid rgba(33,150,243,0.2);
      transition: all .35s ease;
    }
    .feature-card:hover {
      border-color: rgba(33,150,243,0.6);
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(21,101,192,0.25);
    }

    /* ── PLAN CARDS ── */
    .plan-card {
      background: linear-gradient(160deg, rgba(13,42,79,0.7), rgba(7,24,41,0.9));
      border: 1px solid rgba(33,150,243,0.2);
      transition: all .4s ease;
      position: relative; overflow: hidden;
    }
    .plan-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(33,150,243,0.08), transparent);
      opacity: 0; transition: opacity .4s;
    }
    .plan-card:hover::before { opacity: 1; }
    .plan-card:hover { border-color: rgba(33,150,243,0.55); transform: translateY(-8px); box-shadow: 0 30px 80px rgba(21,101,192,0.3); }
    .plan-card.featured { border-color: rgba(33,150,243,0.6); box-shadow: 0 0 50px rgba(33,150,243,0.2); }

    /* ── CTA BUTTON ── */
    .btn-primary {
      background: linear-gradient(135deg, var(--blue), var(--blue-bright));
      border: none; cursor: pointer; position: relative; overflow: hidden;
      transition: all .3s ease;
    }
    .btn-primary::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--blue-bright), var(--blue-glow));
      opacity: 0; transition: opacity .3s;
    }
    .btn-primary:hover::after { opacity: 1; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(33,150,243,0.45); }
    .btn-primary span { position: relative; z-index: 1; }

    /* ── OUTLINE BUTTON ── */
    .btn-outline {
      border: 1.5px solid rgba(33,150,243,0.5);
      background: transparent; cursor: pointer;
      transition: all .3s ease;
    }
    .btn-outline:hover {
      border-color: var(--blue-bright);
      background: rgba(33,150,243,0.1);
      box-shadow: 0 0 20px rgba(33,150,243,0.2);
    }

    /* ── STATS COUNTER ── */
    .stat-number {
      font-family: 'Rajdhani', sans-serif;
      background: linear-gradient(90deg, var(--blue-bright), var(--blue-glow));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* ── SECTION DIVIDER ── */
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(33,150,243,0.4), transparent);
    }

    /* ── BADGE ── */
    .badge {
      background: rgba(33,150,243,0.15);
      border: 1px solid rgba(33,150,243,0.35);
    }

    /* ── MAP DOTS ── */
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
    .map-dot { animation: blink 2s ease-in-out infinite; }
    .map-dot:nth-child(2) { animation-delay: .6s; }
    .map-dot:nth-child(3) { animation-delay: 1.2s; }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(40px); transition: all .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--deeper); }
    ::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

    /* ── LOGO ── */
    .logo-img { height: 150px; width: auto; filter: drop-shadow(0 0 14px rgba(33,150,243,0.6)) brightness(1.15); }

    /* ── ANIMATED LINE ── */
    @keyframes scan {
      0%   { top: 0; opacity: 1; }
      90%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .scan-line {
      position: absolute; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(33,150,243,0.8), transparent);
      animation: scan 3s ease-in-out infinite;
    }

    /* ── PLAN BADGE ── */
    .plan-badge {
      background: linear-gradient(135deg, var(--blue), var(--blue-bright));
      font-family: 'Rajdhani', sans-serif;
      letter-spacing: .1em;
    }

    /* ── CHECK ICON ── */
    .check-icon { color: var(--blue-glow); }

    /* ── FOOTER ── */
    footer {
      background: rgba(5,15,30,0.95);
      border-top: 1px solid rgba(33,150,243,0.15);
    }

    /* ── MOBILE MENU ── */
    #mobile-menu { display: none; }
    #mobile-menu.open { display: flex; }

    /* ── HERO VEHICLE FLOAT ── */
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-14px); }
    }
    .float-anim { animation: float 5s ease-in-out infinite; }

    /* ── COUNTER ANIMATION ── */
    .counter { transition: all 0.1s; }