/* ================================================================
   MIT SAVAR — Main Stylesheet
   Mobile-first, CSS variables, no framework
   ================================================================

   TABLE OF CONTENTS:
   1.  CSS Variables (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Utilities (Container, Buttons, Section Headers)
   5.  Header & Navigation
   6.  Hero Section
   7.  Trust Bar
   8.  Packages Section
   9.  Coverage Section
   10. Why Us / Features
   11. Extra Features Grid
   12. Business Section
   13. Testimonials
   14. FAQ
   15. Contact Section
   16. Footer
   17. WhatsApp Float Button
   18. Responsive (Tablet, Desktop)
   ================================================================ */


/* ================================================================
   1. CSS VARIABLES (DESIGN TOKENS)
   EDIT these to change the entire color scheme.
   ================================================================ */
:root {
  /* --- Brand Colors ---
     --c-primary    = Dark navy (headings, header bg)
     --c-primary-lt = Royal blue (hover states, links)
     --c-accent     = Cyan (highlights, icons)
     --c-cta        = Orange (main CTA button)
  */
  --c-primary:    #0A2E6E;
  --c-primary-lt: #1648B8;
  --c-accent:     #00C2FF;
  --c-cta:        #FF6B00;

  /* --- Neutral Colors --- */
  --c-bg:     #F4F7FF;   /* Page background */
  --c-bg-alt: #EEF2FF;   /* Alternate section background */
  --c-text:   #1a1a2e;   /* Primary text */
  --c-muted:  #56687A;   /* Secondary/muted text */
  --c-white:  #FFFFFF;
  --c-border: #DDE3F0;   /* Borders, dividers */

  /* --- Typography ---
     EDIT font sizes here to adjust the scale globally
  */
  --font-bengali: 'Hind Siliguri', sans-serif;
  --font-latin:   'Inter', sans-serif;

  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.875rem;   /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 3rem;       /* 48px */

  /* --- Spacing Scale --- */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */

  /* --- Layout --- */
  --max-width: 1140px;
  --header-h:  68px;

  /* --- Borders & Shadows --- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full: 999px;

  --shadow-sm:  0 1px 3px rgba(10,46,110,.08);
  --shadow-md:  0 4px 16px rgba(10,46,110,.12);
  --shadow-lg:  0 8px 32px rgba(10,46,110,.16);

  /* --- Transitions --- */
  --transition: 0.22s ease;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Offset scrolling so sticky header doesn't cover section targets */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-bengali);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-text);
  background-color: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--c-primary-lt);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--c-cta); }

ul { list-style: none; }

address { font-style: normal; }

/* Remove default button styles */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-bengali);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* Latin text (numbers, technical terms) use Inter */
.font-latin {
  font-family: var(--font-latin);
}


/* ================================================================
   4. UTILITIES
   ================================================================ */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-5);   /* 20px side padding on mobile */
}

/* --- Section Padding --- */
section {
  padding-block: var(--sp-16);   /* 64px top/bottom by default */
}

/* --- Section Header (centered title + subtitle) --- */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.section-header h2 {
  margin-bottom: var(--sp-3);
}
.section-header p {
  color: var(--c-muted);
  max-width: 600px;
  margin-inline: auto;
}

/* --- Accent color span --- */
.accent { color: var(--c-accent); }

/* ----------------------------------------------------------------
   BUTTONS
   Usage: class="btn btn-primary"  (orange filled)
          class="btn btn-secondary" (white/outline on dark bg)
          class="btn btn-outline"   (bordered, transparent)
          class="btn btn-nav"       (small header CTA)
          class="btn btn-cta"       (large CTA, orange)
          class="btn btn-full"      (full width)
   EDIT: Change colors in :root to restyle all buttons at once
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: var(--font-bengali);
  transition: all var(--transition);
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-cta);
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(255,107,0,.3);
}
.btn-primary:hover {
  background: #e05e00;
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,107,0,.4);
}

.btn-secondary {
  background: rgba(255,255,255,.15);
  color: var(--c-white);
  border: 2px solid rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.25);
  color: var(--c-white);
  border-color: var(--c-white);
}

.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
}
.btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.btn-nav {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  background: var(--c-cta);
  color: var(--c-white);
}
.btn-nav:hover {
  background: #e05e00;
  color: var(--c-white);
}

.btn-cta {
  background: var(--c-cta);
  color: var(--c-white);
  font-size: var(--fs-lg);
  padding: var(--sp-4) var(--sp-8);
  box-shadow: 0 4px 20px rgba(255,107,0,.35);
}
.btn-cta:hover {
  background: #e05e00;
  color: var(--c-white);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
  justify-content: center;
}


/* ================================================================
   5. HEADER & NAVIGATION
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

/* JS adds .scrolled class — header gets stronger shadow */
.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* --- Logo ---
   EDIT: Replace .logo-mit and .logo-savar colors if desired
*/
.logo {
  font-family: var(--font-latin);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.logo-mit   { color: var(--c-primary); }
.logo-savar { color: var(--c-cta); }

/* --- Desktop Nav (hidden on mobile) --- */
.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}
.nav-desktop a {
  font-weight: 500;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.nav-desktop a:hover { color: var(--c-primary); }

/* --- Mobile Toggle Button (three lines / hamburger) --- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: var(--sp-2);
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-primary);
  transition: all var(--transition);
  transform-origin: center;
}
/* Animate hamburger to X when menu is open */
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile Menu (slides down) --- */
.nav-mobile {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.nav-mobile.open {
  max-height: 400px;
}
.mobile-link {
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-text);
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--transition);
}
.mobile-link:hover {
  background: var(--c-bg);
  color: var(--c-primary);
}
.btn-mobile-cta {
  background: var(--c-cta);
  color: var(--c-white) !important;
  text-align: center;
  font-weight: 700;
  border-bottom: none;
}
.btn-mobile-cta:hover {
  background: #e05e00;
}

/* Space below header so content isn't hidden under it */
body {
  padding-top: var(--header-h);
}


/* ================================================================
   6. HERO SECTION
   Background image set here via CSS.
   EDIT: Replace hero-image.webp with your image (keep under 200KB)
   EDIT: Change gradient overlay colors/opacity for readability
   ================================================================ */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;

  /* --- HERO BACKGROUND IMAGE ---
     EDIT: Place your image at assets/images/hero-image.webp
     Keep file size under 200KB (resize + compress at squoosh.app)
     Recommended dimensions: 1920×600px
  */
  background-image: url('../images/hero-image.webp');
  background-size: cover;
  background-position: center;
  background-color: var(--c-primary); /* Fallback if image missing */

  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

/* Dark gradient overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* EDIT: Adjust opacity (0.7 = 70% dark) for more/less contrast */
  background: linear-gradient(
    135deg,
    rgba(10, 46, 110, 0.88) 0%,
    rgba(10, 46, 110, 0.65) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  max-width: 640px;
}

.hero-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.hero-headline {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.85);
  margin-bottom: var(--sp-8);
  max-width: 500px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}


/* ================================================================
   7. TRUST BAR
   ================================================================ */
.trust-bar {
  background: var(--c-primary);
  padding-block: var(--sp-8);
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  align-items: center;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.stat-number {
  font-family: var(--font-latin);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
}

.stat-label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.75);
  font-weight: 500;
}

.trust-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.2);
  display: none; /* Show on desktop */
}


/* ================================================================
   8. PACKAGES SECTION
   ================================================================ */
.packages {
  background: var(--c-bg);
}

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* --- Package Card --- */
.package-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.package-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Featured/popular card gets accent border and stronger shadow */
.package-featured {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
}

.package-badge {
  background: var(--c-primary);
  color: var(--c-white);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.package-header {
  background: var(--c-primary);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
}
.package-featured .package-header {
  background: var(--c-primary-lt);
}

.package-name {
  color: var(--c-white);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-1);
}

.package-speed {
  /* EDIT: This shows the speed e.g. "50 Mbps" */
  font-family: var(--font-latin);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-accent);
}

.package-body {
  padding: var(--sp-6);
}

.package-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.price-amount {
  /* EDIT: Large price number */
  font-family: var(--font-latin);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--c-primary);
}
.price-period {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.package-features {
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.package-features li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.package-features li::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.packages-note {
  text-align: center;
  margin-top: var(--sp-8);
  color: var(--c-muted);
}
.packages-note a {
  font-weight: 600;
  color: var(--c-primary);
}


/* ================================================================
   9. COVERAGE SECTION
   ================================================================ */
.coverage {
  background: var(--c-white);
}

.coverage-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.coverage-areas h3 {
  margin-bottom: var(--sp-5);
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.area-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}
.area-list li svg {
  color: var(--c-accent);
  flex-shrink: 0;
}

.coverage-note {
  margin-top: var(--sp-5);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.coverage-note a { font-weight: 600; }

.map-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-bg);
  min-height: 350px;
}

.coverage-map {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--c-bg);
  color: var(--c-muted);
}
/* JS hides placeholder once map loads */
.map-placeholder.hidden { display: none; }


/* ================================================================
   10. WHY US / FEATURES
   ================================================================ */
.why-us {
  background: var(--c-bg);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.feature-card {
  background: var(--c-white);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,194,255,.1);
  border-radius: var(--radius-md);
  margin: 0 auto var(--sp-4);
  color: var(--c-primary);
}

.feature-card h3 {
  margin-bottom: var(--sp-2);
}

.feature-card p {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}


/* ================================================================
   11. EXTRA FEATURES GRID (6 icons)
   ================================================================ */
.features-extra {
  background: var(--c-white);
  padding-block: var(--sp-12);
}

.extra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-4);
}

.extra-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.extra-item svg {
  color: var(--c-primary-lt);
  flex-shrink: 0;
}


/* ================================================================
   12. BUSINESS SECTION (dark background)
   ================================================================ */
.business-section {
  background: var(--c-primary);
  color: var(--c-white);
}

.business-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
}

.business-text h2 {
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}

.business-text p {
  color: rgba(255,255,255,.8);
  max-width: 580px;
  margin-bottom: var(--sp-5);
}

.business-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.business-features li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255,255,255,.85);
  font-size: var(--fs-sm);
}
.business-features li::before {
  content: '✓';
  color: var(--c-accent);
  font-weight: 700;
  font-size: 1rem;
}


/* ================================================================
   13. TESTIMONIALS
   ================================================================ */
.testimonials {
  background: var(--c-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.testimonial-card {
  background: var(--c-white);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.testimonial-stars {
  color: #f59e0b;
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

.testimonial-text {
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.testimonial-author span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.testimonials-more {
  text-align: center;
  margin-top: var(--sp-8);
  color: var(--c-muted);
}
.testimonials-more a { font-weight: 600; }


/* ================================================================
   14. FAQ
   ================================================================ */
.faq {
  background: var(--c-white);
}

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
  box-shadow: var(--shadow-sm);
  border-color: var(--c-primary);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  gap: var(--sp-4);
  background: var(--c-white);
  transition: background var(--transition), color var(--transition);
}
.faq-question:hover {
  background: var(--c-bg);
  color: var(--c-primary);
}
.faq-question[aria-expanded="true"] {
  color: var(--c-primary);
  background: var(--c-bg);
}

/* Rotate chevron when expanded */
.faq-icon {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--c-muted);
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  color: var(--c-primary);
}

/* Answer panel — hidden by default, JS toggles .open */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer.open {
  max-height: 300px;
}
.faq-answer p {
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}


/* ================================================================
   15. CONTACT SECTION
   ================================================================ */
.contact {
  background: var(--c-bg);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

/* --- Contact Info Cards --- */
.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--c-white);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  flex-shrink: 0;
}

.contact-card h3 {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: var(--sp-1);
}
.contact-card a,
.contact-card p {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
}
.contact-card a:hover { color: var(--c-cta); }

/* --- Contact Form --- */
.contact-form {
  background: var(--c-white);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-form h3 {
  margin-bottom: var(--sp-2);
}

.form-note {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}

.form-group {
  margin-bottom: var(--sp-5);
}

.form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.form-group label span {
  color: var(--c-cta);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-family: var(--font-bengali);
  color: var(--c-text);
  background: var(--c-white);
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(10,46,110,.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}


/* ================================================================
   16. FOOTER
   ================================================================ */
.site-footer {
  background: var(--c-primary);
  color: rgba(255,255,255,.8);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  padding-block: var(--sp-12);
}

.footer-brand .logo { margin-bottom: var(--sp-3); }

.footer-brand p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  max-width: 260px;
  margin-bottom: var(--sp-5);
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  color: var(--c-white);
  transition: background var(--transition);
}
.footer-social a:hover { background: rgba(255,255,255,.2); }

.footer-links h4,
.footer-contact h4 {
  color: var(--c-white);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}

.footer-links nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-links nav a {
  color: rgba(255,255,255,.65);
  font-size: var(--fs-sm);
  transition: color var(--transition);
}
.footer-links nav a:hover { color: var(--c-accent); }

.footer-contact address p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  margin-bottom: var(--sp-2);
}
.footer-contact a {
  color: rgba(255,255,255,.65);
}
.footer-contact a:hover { color: var(--c-accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-5);
}
.footer-bottom p {
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
}


/* ================================================================
   17. FLOATING WHATSAPP BUTTON
   ================================================================ */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-5);
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  color: var(--c-white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover {
  color: var(--c-white);
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37,211,102,.5);
}

.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  background: var(--c-text);
  color: var(--c-white);
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
}


/* ================================================================
   18. RESPONSIVE — TABLET (≥640px)
   ================================================================ */
@media (min-width: 640px) {

  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }

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

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

  .extra-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .contact-info {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-divider {
    display: block;
  }

  .coverage-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}


/* ================================================================
   RESPONSIVE — DESKTOP (≥1024px)
   ================================================================ */
@media (min-width: 1024px) {

  h1 { font-size: var(--fs-5xl); }

  /* --- Show desktop nav, hide hamburger --- */
  .nav-desktop { display: flex; }
  .nav-toggle  { display: none; }
  .nav-mobile  { display: none; }  /* Always hidden on desktop */

  /* --- Hero --- */
  .hero {
    min-height: 600px;
    padding-block: var(--sp-20);
  }

  /* --- Packages --- */
  .packages-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Features --- */
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Business --- */
  .business-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
  }
  .business-text { flex: 1; }
  .business-cta  { flex-shrink: 0; }

  /* --- Testimonials --- */
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Contact --- */
  .contact-layout {
    grid-template-columns: 1fr 1.3fr;
  }
  .contact-info {
    grid-template-columns: 1fr;
  }

  /* --- Footer --- */
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* --- Container wider padding on big screens --- */
  .container {
    padding-inline: var(--sp-8);
  }
}


/* ================================================================
   ADDITIONS — Animations, improved hero, scroll indicator
   Added in update pass. All new rules below.
   ================================================================ */


/* ================================================================
   HERO — ANIMATED GRADIENT BACKGROUND
   Smooth animated gradient using --c-primary and --c-primary-lt
   No image required. Replace with hero-image.webp if you have one.
   ================================================================ */

/* Override the old .hero background — now uses animated gradient */
.hero {
  background-image: none;
  background: var(--c-primary);
  min-height: 620px;
  position: relative;
  overflow: hidden;
}

/* The animated gradient layer */
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--c-primary) 0%,
    var(--c-primary-lt) 40%,
    #0e3a87 70%,
    var(--c-primary) 100%
  );
  background-size: 300% 300%;
  animation: heroGradientShift 12s ease infinite;
}

@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================================================================
   HERO — CSS NETWORK DOTS OVERLAY
   Pure CSS floating dots and connecting lines.
   No canvas, no JavaScript, no library.
   ================================================================ */
.hero-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Dot base styles */
.dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.25);
  animation: dotFloat 8s ease-in-out infinite;
}

/* Individual dot positions and sizes — EDIT freely */
.dot-1 { width: 10px; height: 10px; top: 15%; left: 10%;  animation-delay: 0s;    animation-duration: 9s; }
.dot-2 { width: 6px;  height: 6px;  top: 60%; left: 20%;  animation-delay: 1.5s;  animation-duration: 7s; }
.dot-3 { width: 14px; height: 14px; top: 25%; left: 75%;  animation-delay: 0.8s;  animation-duration: 11s; }
.dot-4 { width: 8px;  height: 8px;  top: 70%; left: 65%;  animation-delay: 2s;    animation-duration: 8s; }
.dot-5 { width: 12px; height: 12px; top: 45%; left: 88%;  animation-delay: 0.4s;  animation-duration: 10s; }
.dot-6 { width: 6px;  height: 6px;  top: 80%; left: 42%;  animation-delay: 3s;    animation-duration: 6s; }

@keyframes dotFloat {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 0.3; }
  50%       { transform: translateY(-18px) scale(1.2); opacity: 0.7; }
}

/* Connecting lines between dots */
.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(0,194,255,.2), transparent);
  height: 1px;
  animation: lineGlow 6s ease-in-out infinite;
}

.line-1 { width: 120px; top: 20%; left: 8%;   transform: rotate(-15deg); animation-delay: 0s; }
.line-2 { width: 180px; top: 55%; left: 60%;  transform: rotate(10deg);  animation-delay: 1s; }
.line-3 { width: 100px; top: 70%; left: 30%;  transform: rotate(-5deg);  animation-delay: 2s; }

@keyframes lineGlow {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.5; }
}


/* ================================================================
   HERO — STAGGERED TEXT FADE-IN ON LOAD
   .hero-anim-1 through .hero-anim-4 animate in sequence.
   ================================================================ */
.hero-anim-1,
.hero-anim-2,
.hero-anim-3,
.hero-anim-4 {
  opacity: 0;
  transform: translateY(22px);
  animation: heroFadeUp 0.7s ease forwards;
}

.hero-anim-1 { animation-delay: 0.15s; }
.hero-anim-2 { animation-delay: 0.35s; }
.hero-anim-3 { animation-delay: 0.55s; }
.hero-anim-4 { animation-delay: 0.75s; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   HERO — SCROLL-DOWN INDICATOR
   Bouncing chevron at the bottom center of the hero.
   ================================================================ */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: scrollBounce 2s ease-in-out infinite;
  transition: color var(--transition);
  z-index: 2;
}
.hero-scroll-indicator:hover {
  color: var(--c-accent);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ================================================================
   HERO — TALLER ON DESKTOP
   ================================================================ */
@media (min-width: 1024px) {
  .hero {
    min-height: 700px;
  }
}


/* ================================================================
   SCROLL-TRIGGERED CARD ANIMATIONS
   Cards start invisible (opacity:0, translateY) and animate in
   when IntersectionObserver adds .animate-in via script.js.
   ================================================================ */
.feature-card,
.package-card,
.testimonial-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Class added by JS when element enters viewport */
.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger within a grid — each card delays slightly more */
.feature-card:nth-child(1), .package-card:nth-child(1), .testimonial-card:nth-child(1) { transition-delay: 0s; }
.feature-card:nth-child(2), .package-card:nth-child(2), .testimonial-card:nth-child(2) { transition-delay: 0.1s; }
.feature-card:nth-child(3), .package-card:nth-child(3), .testimonial-card:nth-child(3) { transition-delay: 0.2s; }
.feature-card:nth-child(4)                                                               { transition-delay: 0.3s; }


/* ================================================================
   PACKAGE CARD FEATURED — GLOW ON HOVER
   ================================================================ */
.package-card.package-featured:hover {
  box-shadow: 0 8px 32px rgba(22, 72, 184, 0.35), 0 0 0 2px var(--c-accent);
}


/* ================================================================
   WHATSAPP FLOAT — PULSE ANIMATION
   ================================================================ */
.whatsapp-float {
  animation: waPulse 3s ease-in-out infinite;
}
.whatsapp-float:hover {
  animation: none; /* Stop pulse on hover so scale effect is clean */
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 4px 28px rgba(37,211,102,.7), 0 0 0 8px rgba(37,211,102,.1); }
}


/* ================================================================
   FOOTER-BOTTOM DEVELOPER CREDIT
   ================================================================ */
.footer-bottom p + p {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.35);
}
.footer-bottom p + p a {
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom p + p a:hover {
  color: var(--c-accent);
}


/* ================================================================
   PREFERS-REDUCED-MOTION
   Respects users who prefer no animations (accessibility setting).
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Ensure animated elements are visible even with no animation */
  .hero-anim-1,
  .hero-anim-2,
  .hero-anim-3,
  .hero-anim-4,
  .feature-card,
  .package-card,
  .testimonial-card {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ================================================================
   HERO SECTION — REDESIGN (Split Layout)
   Appended — these rules override/extend the original hero block
   ================================================================ */

/* ----------------------------------------------------------
   Two-column layout wrapper
   ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: 2.5rem;
  align-items: center;
  padding-top: 6rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
}

/* ----------------------------------------------------------
   Background layers
   ---------------------------------------------------------- */

/* Layer 1 – animated mesh gradient */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(22, 72, 184, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 80% 30%, rgba(0, 194, 255, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 65% 80%, rgba(0, 194, 255, 0.1) 0%, transparent 60%),
    linear-gradient(135deg, #071e4a 0%, #0A2E6E 40%, #0d1b3e 100%);
  animation: heroBgShift 12s ease-in-out infinite alternate;
}

@keyframes heroBgShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Layer 2 – subtle dot-grid overlay */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(0,194,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ----------------------------------------------------------
   Ambient glowing nodes (CSS-only, no JS)
   ---------------------------------------------------------- */
.hero-nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hnode {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.55);
  filter: blur(1px);
  animation: nodeFloat 8s ease-in-out infinite;
}

.hn1 { width: 6px;  height: 6px;  top: 15%; left: 8%;   animation-delay: 0s;    animation-duration: 9s; }
.hn2 { width: 4px;  height: 4px;  top: 65%; left: 12%;  animation-delay: 1.5s;  animation-duration: 11s; }
.hn3 { width: 8px;  height: 8px;  top: 30%; left: 55%;  animation-delay: 3s;    animation-duration: 7s; }
.hn4 { width: 5px;  height: 5px;  top: 75%; left: 70%;  animation-delay: 0.8s;  animation-duration: 10s; }
.hn5 { width: 7px;  height: 7px;  top: 50%; left: 88%;  animation-delay: 2.2s;  animation-duration: 8s; }

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0)   scale(1);   opacity: 0.5; }
  50%       { transform: translateY(-18px) scale(1.3); opacity: 0.9; }
}

/* ----------------------------------------------------------
   LEFT COLUMN — hero content
   ---------------------------------------------------------- */
.hero-content {
  z-index: 2;
  text-align: center;
}

@media (min-width: 960px) {
  .hero-content {
    text-align: left;
  }
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 194, 255, 0.12);
  border: 1px solid rgba(0, 194, 255, 0.35);
  color: var(--c-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

/* Headline */
.hero-headline {
  font-family: var(--font-bengali);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-white);
  margin-bottom: 1.25rem;
}

.hero-headline .accent {
  color: var(--c-accent);
}

/* Sub */
.hero-sub {
  font-family: var(--font-bengali);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 960px) {
  .hero-sub { margin-left: 0; margin-right: 0; }
}

/* CTA row */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

@media (min-width: 960px) {
  .hero-ctas { justify-content: flex-start; }
}

/* ----------------------------------------------------------
   Trust strip (hero-anim-5)
   ---------------------------------------------------------- */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-content: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.9s;
}

@media (min-width: 960px) {
  .hero-trust { justify-content: flex-start; }
}

.htrust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.htrust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  display: none;
}

@media (min-width: 560px) {
  .htrust-dot { display: inline-block; }
}

/* ----------------------------------------------------------
   RIGHT COLUMN — SVG illustration
   Hidden on mobile, visible from 960 px
   ---------------------------------------------------------- */
.hero-visual {
  display: none;
}

@media (min-width: 960px) {
  .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transform: translateX(40px);
    animation: slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.5s;
  }
}

@keyframes slideInRight {
  to { opacity: 1; transform: translateX(0); }
}

.hero-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  overflow: visible;
}

/* ----------------------------------------------------------
   SVG — WiFi ring animations
   ---------------------------------------------------------- */
.wf1 { animation: wifiPulse 2.4s ease-in-out infinite 0s; }
.wf2 { animation: wifiPulse 2.4s ease-in-out infinite 0.5s; }
.wf3 { animation: wifiPulse 2.4s ease-in-out infinite 1s; }

@keyframes wifiPulse {
  0%, 15%  { opacity: 0; stroke-dasharray: 0 200; }
  50%, 65% { opacity: 0.9; stroke-dasharray: 200 0; }
  100%     { opacity: 0; }
}

.wifi-pulse-ring {
  animation: wifiCenter 2.4s ease-in-out infinite;
}

@keyframes wifiCenter {
  0%, 100% { r: 4.5; opacity: 0.4; }
  50%      { r: 7;   opacity: 0.1; }
}

/* ----------------------------------------------------------
   SVG — Router float
   ---------------------------------------------------------- */
.rtr-float {
  animation: routerFloat 4s ease-in-out infinite;
}

@keyframes routerFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ----------------------------------------------------------
   SVG — LED blink (sequential)
   ---------------------------------------------------------- */
.led-g  { animation: ledBlink 3.5s ease-in-out infinite 0s; }
.led-b1 { animation: ledBlink 3.5s ease-in-out infinite 0.6s; }
.led-b2 { animation: ledBlink 3.5s ease-in-out infinite 1.2s; }

@keyframes ledBlink {
  0%, 45%, 100% { opacity: 1; }
  50%, 60%      { opacity: 0.2; }
}

/* ----------------------------------------------------------
   SVG — Connection line dash-flow
   ---------------------------------------------------------- */
.conn-line {
  stroke-dasharray: 8 4;
  stroke-dashoffset: 0;
  animation: dashFlow 2s linear infinite;
}

.cl1 { animation-delay: 0s; }
.cl2 { animation-delay: 0.7s; }
.cl3 { animation-delay: 1.4s; }

@keyframes dashFlow {
  to { stroke-dashoffset: -36; }
}

/* ----------------------------------------------------------
   SVG — Floating devices
   ---------------------------------------------------------- */
.dev1 { animation: deviceFloat1 6s ease-in-out infinite 0.3s; }
.dev2 { animation: deviceFloat2 7s ease-in-out infinite 1.1s; }
.dev3 { animation: deviceFloat3 5.5s ease-in-out infinite 0.7s; }

@keyframes deviceFloat1 {
  0%, 100% { transform: translate(358px, 35px); }
  50%      { transform: translate(358px, 27px); }
}
@keyframes deviceFloat2 {
  0%, 100% { transform: translate(393px, 302px); }
  50%      { transform: translate(393px, 310px); }
}
@keyframes deviceFloat3 {
  0%, 100% { transform: translate(32px, 298px); }
  50%      { transform: translate(32px, 306px); }
}

/* ----------------------------------------------------------
   SVG — Floating badges
   ---------------------------------------------------------- */
.badge { animation: badgeFloat 5s ease-in-out infinite; }
.b1 { animation-delay: 0s;    animation-duration: 5s; }
.b2 { animation-delay: 1s;    animation-duration: 6s; }
.b3 { animation-delay: 0.5s;  animation-duration: 5.5s; }
.b4 { animation-delay: 1.5s;  animation-duration: 4.8s; }

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ----------------------------------------------------------
   SVG — TV equaliser bars
   ---------------------------------------------------------- */
.eq1 { animation: eqBar 1.4s ease-in-out infinite; }
.eq2 { animation: eqBar 1.1s ease-in-out infinite 0.2s; }
.eq3 { animation: eqBar 0.9s ease-in-out infinite 0.4s; }

@keyframes eqBar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

/* ----------------------------------------------------------
   Hero stagger animations (existing classes re-confirmed)
   ---------------------------------------------------------- */
.hero-anim-1,
.hero-anim-2,
.hero-anim-3,
.hero-anim-4 {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.6s ease forwards;
}

.hero-anim-1 { animation-delay: 0.15s; }
.hero-anim-2 { animation-delay: 0.35s; }
.hero-anim-3 { animation-delay: 0.55s; }
.hero-anim-4 { animation-delay: 0.75s; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  z-index: 3;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ----------------------------------------------------------
   prefers-reduced-motion — kill all hero animations
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hnode,
  .rtr-float,
  .led-g, .led-b1, .led-b2,
  .conn-line,
  .dev1, .dev2, .dev3,
  .badge,
  .eq1, .eq2, .eq3,
  .wf1, .wf2, .wf3,
  .wifi-pulse-ring,
  .hero-scroll-indicator,
  .hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4,
  .hero-trust,
  .hero-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}



/* ===== PAYMENT GUIDE PAGE ===== */
.payment-guide{background:#f5f7fb;padding:40px 15px;font-family:Segoe UI,Arial,sans-serif}
.payment-container{max-width:1100px;margin:auto}
.payment-back{display:inline-block;margin-bottom:20px;color:#d81b60;text-decoration:none;font-weight:600}
.payment-hero{background:linear-gradient(135deg,#d81b60,#ff5ba6);padding:45px;border-radius:20px;color:#fff;box-shadow:0 15px 40px rgba(0,0,0,.15)}
.badge{display:inline-block;background:#fff;color:#d81b60;padding:6px 12px;border-radius:50px;font-size:13px;font-weight:700}
.payment-hero h1{margin:18px 0 10px;font-size:38px}
.payment-hero p{max-width:650px;line-height:1.7}
.payment-btn{display:inline-block;margin-top:18px;background:#fff;color:#d81b60;text-decoration:none;padding:12px 24px;border-radius:10px;font-weight:700}
.payment-card{background:#fff;border-radius:20px;padding:25px;margin-top:30px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.payment-card h2{text-align:center;margin-bottom:5px}
.subtitle{text-align:center;color:#777}
.payment-image{margin-top:20px;border:1px solid #eee;border-radius:15px;overflow:hidden}
.payment-image img{display:block;width:100%;height:auto}
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.info-card{background:#fff;padding:25px;border-radius:18px;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.info-card h3{color:#d81b60;margin-top:0}
.info-card ul{padding-left:20px;line-height:1.9}
.payment-footer{text-align:center;margin:35px 0;color:#666}
@media(max-width:768px){
.payment-hero h1{font-size:28px}
.payment-grid{grid-template-columns:1fr}
.payment-guide{padding:20px 10px}
}