/* ============================================================
   DeGov Autotech — style.css
   
   TABLE OF CONTENTS:
   1.  CSS Variables (colors, fonts, spacing — edit these first!)
   2.  Reset & Base Styles
   3.  Utility Classes
   4.  Buttons
   5.  Announcement Bar
   6.  Navbar
   7.  Hero Section
   8.  Partners Strip
   9.  About / Benefits Section
   10. Services Section
   11. Financial Plans Section
   12. Process / How It Works Section
   13. CNG Info Section
   14. FAQ Section
   15. Testimonials Section
   16. Blog Section
   17. Contact Section
   18. Footer
   19. Back to Top Button
   20. Scroll Reveal Animations
   21. Responsive (Mobile & Tablet)
============================================================ */


/* ============================================================
   1. CSS VARIABLES
   These control the entire color scheme and typography.
   CHANGE THESE to rebrand the site quickly.
============================================================ */
:root {
  /* -- Primary Brand Colors -- */
  --green:        #0e7a45;    /* Main brand green — used for buttons, accents */
  --green-dark:   #094d2b;    /* Darker green — button hover states */
  --green-mid:    #16a85e;    /* Medium green — gradients, highlights */
  --green-light:  #e8f5ef;    /* Very light green — card backgrounds, tags */
  --green-xlight: #f2faf5;    /* Near-white green tint — page backgrounds */

  /* -- Accent Color -- */
  --accent:       #f5a623;    /* Amber/gold — used for badges, highlights */
  --accent-dark:  #c4841a;    /* Darker amber */

  /* -- Dark / Neutral Colors -- */
  --dark:         #0a1f13;    /* Near-black with green tint — headings, dark sections */
  --dark-2:       #152e1e;    /* Slightly lighter dark — footer background */
  --text:         #2c3e30;    /* Body text color */
  --muted:        #607568;    /* Secondary/muted text */
  --border:       #d4e8da;    /* Border color for cards and dividers */
  --white:        #ffffff;
  --off-white:    #f7fbf8;    /* Subtle off-white for alternate section backgrounds */

  /* -- Typography --
     To change fonts: update the names here AND update the
     Google Fonts <link> in index.html
  */
  --font-head:   'Playfair Display', Georgia, serif;   /* Headlines */
  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif; /* Body text */

  /* -- Spacing -- */
  --section-pad: 96px;  /* Top/bottom padding for sections */
  --radius:      14px;  /* Border radius for cards */
  --radius-sm:   8px;   /* Smaller radius for inputs, tags */

  /* -- Shadows -- */
  --shadow:      0 4px 20px rgba(14, 122, 69, 0.10);
  --shadow-md:   0 8px 32px rgba(14, 122, 69, 0.14);
  --shadow-lg:   0 16px 56px rgba(14, 122, 69, 0.20);

  /* -- Transitions -- */
  --ease:        0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. RESET & BASE STYLES
   Removes browser default margins/padding.
   Sets global font, colors, and box model.
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;    /* Smooth scroll when clicking nav links */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;         /* Prevent horizontal scroll on mobile */
  -webkit-font-smoothing: antialiased;
}

/* Remove underlines from all links */
a { text-decoration: none; color: inherit; }

/* Make images responsive by default */
img { max-width: 100%; height: auto; display: block; }

/* Remove button defaults */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* Remove list styles globally */
ul, ol { list-style: none; }


/* ============================================================
   3. UTILITY CLASSES
============================================================ */

/* Container: max-width wrapper for centering content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Section tag: the small pill label above headings */
.section-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-light);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* Standard section header block */
.section-header { margin-bottom: 52px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }

/* Section subtitle text below h2 */
.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.7;
  margin-top: 14px;
}

/* Headings */
h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--dark);
}

h4 {
  font-weight: 700;
  color: var(--dark);
  font-size: 1rem;
}

/* Inline link style */
.inline-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
}


/* ============================================================
   4. BUTTONS
   To change button color: update background in .btn-primary
   To change border radius: update border-radius
============================================================ */

/* Primary filled button */
.btn-primary {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 122, 69, 0.30);
}

/* Full-width button (used in contact form) */
.btn-full { width: 100%; text-align: center; padding: 16px; font-size: 1rem; }

/* Ghost/outline button on dark backgrounds */
.btn-ghost {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--white);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--ease);
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.12);
}

/* Outline button on light backgrounds */
.btn-outline-dark {
  display: inline-block;
  border: 2px solid var(--green);
  color: var(--green);
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all var(--ease);
}
.btn-outline-dark:hover {
  background: var(--green);
  color: var(--white);
}

/* Small outline button (blog section header) */
.btn-outline-sm {
  display: inline-block;
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--ease);
}
.btn-outline-sm:hover { border-color: var(--green); color: var(--green); }


/* ============================================================
   5. ANNOUNCEMENT BAR
   The slim green bar at the very top of the page.
   To change color: update background
============================================================ */
.announcement-bar {
  background: var(--green-dark);
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 10px 48px;
  font-size: 0.85rem;
  position: relative;
  z-index: 1001;
}
.announcement-bar p { display: inline; }
.announcement-bar a {
  color: var(--accent);
  font-weight: 700;
  margin-left: 6px;
  text-decoration: underline;
}
/* Close (X) button on the right */
.announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  transition: color var(--ease);
}
.announcement-close:hover { color: white; }


/* ============================================================
   6. NAVBAR
   Fixed at top, becomes opaque on scroll.
   .scrolled class is added by script.js
============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 232, 218, 0.6);
  transition: box-shadow var(--ease), top var(--ease);
}

/* When announcement bar is dismissed, navbar moves to top */
.navbar.no-announcement { top: 0; }

/* Shadow appears only after scrolling */
.navbar.scrolled { box-shadow: var(--shadow-md); }

.nav-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: 72px;
  gap: 20px;
}

/* Logo image in navbar */
.logo-link { flex-shrink: 0; }
.logo-img {
  height: 44px;      /* To resize logo: change this value */
  width: auto;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
}
.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
  position: relative;
  transition: color var(--ease);
}
/* Underline hover effect */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--green);
  transition: width var(--ease);
}
.nav-link:hover { color: var(--green); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--green); }
.nav-link.active::after { width: 100%; }

/* Right side: phone + CTA + hamburger */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav-phone {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
/* Nav CTA button */
.btn-nav-cta {
  background: var(--green);
  color: var(--white);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background var(--ease);
}
.btn-nav-cta:hover { background: var(--green-dark); }

/* Hamburger button (mobile only) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--ease);
}
/* X shape when open */
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ============================================================
   7. HERO SECTION
   Full-height opening section with gradient background.
   Two-column grid layout.
============================================================ */
.hero {
  /* Offset for announcement bar (40px) + navbar (72px) */
  padding-top: 148px;
  padding-bottom: 80px;
  background: linear-gradient(135deg,
    #0a1f13 0%,
    #0e3d1f 40%,
    #0e5c2d 70%,
    #0e7a45 100%
  );
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Decorative background shapes (pure CSS, non-interactive) */
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.07;
}
.shape-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: -200px; right: -200px;
}
.shape-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent), transparent);
  bottom: -100px; left: 5%;
  opacity: 0.05;
}
.shape-3 {
  width: 200px; height: 200px;
  background: var(--green-mid);
  top: 30%; left: 40%;
  opacity: 0.1;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.1); }
}

/* Inner grid: text left, card right */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Eyebrow tag above headline */
.hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}

/* Main headline */
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 22px;
}
/* Italic accent in headline (the green-tinted word) */
.hero-title em {
  font-style: normal;
  color: #7eedb6; /* Light mint green — change this to adjust accent word color */
}

/* Supporting text */
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-sub strong { color: #7eedb6; font-weight: 700; }

/* CTA button pair */
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }

/* Small trust badges row */
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-trust span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* Right side: stats card */
.hero-right { position: relative; }

.hero-stats-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  animation: slideInRight 0.8s ease both;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.stats-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
}

/* 2x2 stats grid inside card */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: #7eedb6;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* Link at bottom of stats card */
.stats-cta {
  display: block;
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  transition: color var(--ease);
}
.stats-cta:hover { color: #7eedb6; }

/* Floating badge (overlaps the card) */
.hero-float-badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--accent);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(245, 166, 35, 0.35);
  animation: fadeUp 1s ease 0.4s both;
}
.badge-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}
.badge-text {
  font-size: 0.78rem;
  color: var(--dark);
  font-weight: 600;
  line-height: 1.4;
}

/* Shared animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   8. PARTNERS STRIP
   Scrolling ticker of partner names on a dark background.
============================================================ */
.partners {
  background: var(--dark);
  padding: 32px 0;
  overflow: hidden;
}
.partners-label {
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 18px;
}
/* Overflow hidden to contain the scrolling track */
.partners .container { overflow: hidden; }
.partners-track {
  display: flex;
  gap: 0;
  /* CSS-only infinite scroll animation */
  animation: scrollTrack 28s linear infinite;
  width: max-content;
}
.partners-track:hover { animation-play-state: paused; }

@keyframes scrollTrack {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* Move exactly half (since items are duplicated) */
}
.partner-item {
  padding: 0 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.partner-item span {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.06em;
  transition: color var(--ease);
}
.partner-item:hover span { color: rgba(255,255,255,0.75); }


/* ============================================================
   9. ABOUT / BENEFITS SECTION
============================================================ */
.about {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

/* 4-column grid for benefits */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.benefit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-light);
}
.benefit-icon {
  font-size: 2.4rem;
  margin-bottom: 16px;
  display: block;
}
.benefit-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.benefit-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}


/* ============================================================
   10. SERVICES SECTION
============================================================ */
.services {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
  background: var(--white);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Featured (middle) service card — dark background */
.featured-service {
  background: var(--dark);
  border-color: var(--dark);
}
.featured-service h3,
.featured-service p,
.featured-service .service-list li,
.featured-service .service-link { color: rgba(255,255,255,0.85); }
.featured-service .service-num { color: rgba(255,255,255,0.2); }

/* "Most Popular" badge */
.featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Large faint number in corner */
.service-num {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--green-light);
  line-height: 1;
  margin-bottom: 12px;
}
.service-icon { font-size: 2rem; margin-bottom: 14px; }
.service-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.service-card p { font-size: 0.9rem; color: var(--muted); margin-bottom: 20px; }

/* Feature list inside service card */
.service-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.service-list li { font-size: 0.875rem; color: var(--muted); padding-left: 16px; position: relative; }
.service-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.featured-service .service-list li::before { color: #7eedb6; }

.service-link {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--green);
  transition: gap var(--ease);
}
.service-link:hover { text-decoration: underline; }
.featured-service .service-link { color: #7eedb6; }


/* ============================================================
   11. FINANCIAL PLANS SECTION
============================================================ */
.plans {
  padding: var(--section-pad) 0;
  background: var(--green-xlight);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.plan-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Featured plan (center card) */
.plan-featured {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.04);  /* Slightly larger than siblings */
}
.plan-featured:hover { transform: scale(1.04) translateY(-4px); }
.plan-featured .plan-name,
.plan-featured .plan-desc,
.plan-featured .plan-features li { color: rgba(255,255,255,0.9); }

/* "Best Value" badge */
.plan-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.plan-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
}
.plan-deposit {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.plan-deposit span {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.plan-featured .plan-deposit span { color: #7eedb6; }

.plan-desc { font-size: 0.875rem; color: var(--muted); margin-bottom: 24px; }

.plan-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.plan-features li { font-size: 0.875rem; color: var(--text); }

/* Plan CTA buttons */
.btn-plan {
  display: block;
  text-align: center;
  border: 2px solid var(--green);
  color: var(--green);
  padding: 13px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all var(--ease);
}
.btn-plan:hover { background: var(--green); color: var(--white); }

.btn-plan-featured {
  display: block;
  text-align: center;
  background: var(--white);
  color: var(--green);
  padding: 13px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all var(--ease);
}
.btn-plan-featured:hover { background: var(--green-light); }

/* Small note below plans grid */
.plans-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ============================================================
   12. PROCESS SECTION
============================================================ */
.process {
  padding: var(--section-pad) 0;
  background: var(--white);
}

/* Horizontal row of steps */
.steps-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}
.step {
  flex: 1;
  text-align: center;
  padding: 28px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform var(--ease), box-shadow var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Circular step number */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  font-weight: 800;
  font-size: 0.85rem;
  margin: 0 auto 12px;
}
.step-icon { font-size: 2rem; margin-bottom: 12px; }
.step h4 { margin-bottom: 10px; font-size: 1rem; }
.step p { font-size: 0.85rem; color: var(--muted); }

/* Arrow connector between steps */
.step-arrow {
  font-size: 1.6rem;
  color: var(--border);
  flex-shrink: 0;
  margin-top: 60px;
}


/* ============================================================
   13. CNG INFO / FEATURED SOLUTIONS SECTION
============================================================ */
.cng-info {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

.cng-features-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Feature block (dark variant) */
.cng-feature-block {
  border-radius: var(--radius);
  padding: 48px 44px;
}
.dark-block {
  background: var(--dark);
  color: rgba(255,255,255,0.85);
}
.dark-block h3 { color: var(--white); margin-bottom: 16px; font-size: 1.5rem; }
.dark-block p  { color: rgba(255,255,255,0.68); margin-bottom: 32px; line-height: 1.7; }

/* Feature block (light variant) */
.light-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
}
.light-block h3 { color: var(--dark); margin-bottom: 16px; font-size: 1.5rem; }
.light-block p  { color: var(--muted); margin-bottom: 32px; line-height: 1.7; }

/* Small tag above feature block heading */
.block-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-mid);
  background: rgba(22, 168, 94, 0.12);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.dark-block .block-tag { background: rgba(126, 237, 182, 0.1); color: #7eedb6; }

/* Mini stats row inside feature block */
.cng-mini-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cng-mini-stats div { text-align: center; }
.cng-mini-stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-mid);
  line-height: 1;
  margin-bottom: 4px;
}
.dark-block .cng-mini-stats strong { color: #7eedb6; }
.cng-mini-stats span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.light-block .cng-mini-stats span { color: var(--muted); }


/* ============================================================
   14. FAQ SECTION
============================================================ */
.faq {
  padding: var(--section-pad) 0;
  background: var(--white);
}

/* Two-column layout: sticky header left, accordion right */
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 72px;
  align-items: start;
}
.faq-header { position: sticky; top: 100px; } /* Sticks as user scrolls */
.faq-header h2 { margin-bottom: 16px; }
.faq-header p  { font-size: 0.95rem; color: var(--muted); }

.faq-list { display: flex; flex-direction: column; }

/* Individual FAQ item */
.faq-item { border-bottom: 1px solid var(--border); }

/* Question button */
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  text-align: left;
  gap: 16px;
  transition: color var(--ease);
}
.faq-question:hover { color: var(--green); }

/* +/- toggle icon */
.faq-icon {
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--green);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--ease);
}
.faq-question.open .faq-icon { transform: rotate(45deg); }

/* Answer — hidden by default, shown by script.js */
.faq-answer {
  display: none;
  padding: 0 0 22px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
}
.faq-answer.open { display: block; }


/* ============================================================
   15. TESTIMONIALS SECTION
============================================================ */
.testimonials {
  padding: var(--section-pad) 0;
  background: var(--green-xlight);
}

/* 3-column grid */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform var(--ease), box-shadow var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Dark featured card (alternates for variety) */
.tcard-dark {
  background: var(--dark);
  border-color: var(--dark);
}
.tcard-dark p { color: rgba(255,255,255,0.8); }

/* Star rating */
.tcard-stars {
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.tcard p {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.72;
  margin-bottom: 22px;
  font-style: italic;
}

/* Author row */
.tcard-author { display: flex; align-items: center; gap: 12px; }
.tcard-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.tcard-dark .tcard-avatar { background: rgba(255,255,255,0.1); color: #7eedb6; }
.tcard-author strong { display: block; font-size: 0.9rem; color: var(--dark); }
.tcard-dark .tcard-author strong { color: rgba(255,255,255,0.9); }
.tcard-author span { font-size: 0.78rem; color: var(--muted); }
.tcard-dark .tcard-author span { color: rgba(255,255,255,0.45); }


/* ============================================================
   16. BLOG SECTION
============================================================ */
.blog {
  padding: var(--section-pad) 0;
  background: var(--white);
}

/* Row with h2 on left, "View All" button on right */
.blog-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 16px;
}

/* 3-column grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--white);
  transition: transform var(--ease), box-shadow var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Thumbnail placeholders with gradient backgrounds.
   Replace these with <img> tags for real images. */
.blog-thumb {
  height: 210px;
  background-size: cover;
  background-position: center;
}
/* To add real images: .blog-thumb-1 { background-image: url('your-image.jpg'); } */
.blog-thumb-1 { background: linear-gradient(135deg, #0a5c30, #16a85e); }
.blog-thumb-2 { background: linear-gradient(135deg, #0e3d1f, #0e7a45); }
.blog-thumb-3 { background: linear-gradient(135deg, #094d2b, #0e5c2d); }

.blog-body { padding: 24px; }

/* Category tag */
.blog-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  background: var(--green-light);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.blog-body h3 { font-size: 1rem; line-height: 1.45; margin-bottom: 10px; }
.blog-body p  { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }

/* Meta row: date left, read more right */
.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.blog-meta a {
  color: var(--green);
  font-weight: 700;
  transition: text-decoration var(--ease);
}
.blog-meta a:hover { text-decoration: underline; }


/* ============================================================
   17. CONTACT SECTION
============================================================ */
.contact {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

/* Two-column layout: info left, form right */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 72px;
  align-items: start;
}
.contact-info h2 { margin-bottom: 16px; }
.contact-info > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 32px; }

/* Individual contact detail item */
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.contact-detail { display: flex; gap: 16px; align-items: flex-start; }
.c-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.contact-detail strong { display: block; font-size: 0.875rem; margin-bottom: 3px; color: var(--dark); }
.contact-detail p { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.contact-detail a { color: var(--green); font-weight: 600; }
.contact-detail a:hover { text-decoration: underline; }

/* Social link icons */
.social-links { display: flex; gap: 10px; }
.social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
  transition: all var(--ease);
}
.social-link:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }

/* Form card */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow);
}
.contact-form-wrap h3 { margin-bottom: 28px; font-size: 1.3rem; }

/* Form inputs/selects/textarea */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 0.82rem; font-weight: 700; color: var(--dark); }
.form-group input,
.form-group textarea,
.form-group select {
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--off-white);
  transition: border-color var(--ease), background var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
}
.form-group textarea { resize: vertical; }

/* Success message (hidden until form submitted) */
.form-success {
  display: none;
  color: var(--green);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 16px;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  margin-top: 12px;
  text-align: center;
}


/* ============================================================
   18. FOOTER
============================================================ */
.footer {
  background: var(--dark-2);
  color: rgba(255, 255, 255, 0.65);
}
.footer-inner {
  padding: 80px 28px 48px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Brand column */
.footer-brand { }
.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 18px;
  /* Invert to make logo visible on dark background */
  filter: brightness(0) invert(1);
}
.footer-brand p {
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 20px;
}
.footer-certifications { display: flex; flex-direction: column; gap: 6px; }
.footer-certifications span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}

/* Link columns */
.footer-col { }
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 20px;
  font-weight: 700;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  transition: color var(--ease);
}
.footer-col a:hover { color: var(--white); }

/* Bottom bar */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { font-size: 0.8rem; color: rgba(255,255,255,0.3); transition: color var(--ease); }
.footer-legal a:hover { color: rgba(255,255,255,0.7); }


/* ============================================================
   19. BACK TO TOP BUTTON
   Appears after scrolling 400px. See script.js.
============================================================ */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(14, 122, 69, 0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}


/* ============================================================
   20. SCROLL REVEAL ANIMATIONS
   Elements with [data-animate="fadeUp"] are animated in by script.js
   when they enter the viewport.
============================================================ */
[data-animate="fadeUp"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate="fadeUp"].animated {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   21. RESPONSIVE — TABLET & MOBILE
   Breakpoints:
   - 1024px: tablet landscape
   - 768px:  tablet portrait / large phone
   - 480px:  small phone
============================================================ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  :root { --section-pad: 72px; }

  .hero-inner      { grid-template-columns: 1fr; gap: 40px; }
  .hero-content    { text-align: center; }
  .hero-sub, .hero-btns, .hero-trust { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero-float-badge { left: 0; }

  .benefits-grid   { grid-template-columns: 1fr 1fr; }
  .services-grid   { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .plans-grid      { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan-featured   { transform: none; }
  .plan-featured:hover { transform: translateY(-4px); }
  .steps-row       { flex-wrap: wrap; justify-content: center; }
  .step-arrow      { display: none; }
  .cng-features-row { grid-template-columns: 1fr; }
  .faq-layout      { grid-template-columns: 1fr; gap: 40px; }
  .faq-header      { position: static; }
  .tgrid           { grid-template-columns: 1fr 1fr; }
  .blog-grid       { grid-template-columns: 1fr 1fr; }
  .contact-layout  { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner    { grid-template-columns: 1fr 1fr; }
  .footer-brand    { grid-column: 1 / -1; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  :root { --section-pad: 56px; }

  /* Navbar: hide desktop links, show hamburger */
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    background: var(--white);
    padding: 100px 32px 40px;
    gap: 8px;
    z-index: 999;
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-link { font-size: 1.2rem; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-phone { display: none; }
  .hamburger { display: flex; z-index: 1001; position: relative; }

  .hero { padding-top: 120px; }
  .hero-float-badge { position: static; margin-top: 16px; display: inline-flex; }
  .hero-btns { flex-direction: column; align-items: center; }

  .benefits-grid   { grid-template-columns: 1fr; }
  .tgrid           { grid-template-columns: 1fr; }
  .blog-grid       { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }
  .footer-inner    { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 28px 22px; }
  .partners-track  { animation-duration: 18s; }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
  .hero-title { font-size: 2.2rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .announcement-bar { font-size: 0.78rem; padding: 10px 36px 10px 16px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
}