/*
  ============================================================
  FILE: styles.css
  PROJECT: Sunrise Developers — Landing Page
  ────────────────────────────────────────────────────────────
  TABLE OF CONTENTS
  ─────────────────
   1. DESIGN TOKENS (CSS Custom Properties / Variables)
   2. CSS RESET & BASE STYLES
   3. TYPOGRAPHY SCALE
   4. UTILITY CLASSES
   5. LAYOUT — .container & reusable helpers
   6. NAVBAR / HEADER
   7. HERO SECTION
   8. TRUST STRIP
   9. SERVICES SECTION
  10. FEATURES SECTION
  11. ABOUT SECTION
  12. TESTIMONIALS
  13. CTA BAND
  14. CONTACT SECTION
  15. FOOTER
  16. SCROLL ANIMATIONS
  17. BACK-TO-TOP BUTTON
  18. RESPONSIVE — TABLET (≤ 900px)
  19. RESPONSIVE — MOBILE (≤ 600px)
  20. ACCESSIBILITY — reduced motion
  ============================================================
*/


/* ── 1. DESIGN TOKENS ──────────────────────────────────────
   CSS Custom Properties (variables) defined on :root are
   available EVERYWHERE in the stylesheet. Changing a token
   here updates every element that uses it.

   PALETTE RATIONALE:
     --navy    : deep trust / authority (primary brand colour)
     --accent  : sunrise amber / energy (CTAs, highlights)
     --sky     : lighter navy; backgrounds, cards
     --cream   : warm off-white; alternating section backgrounds
     --text    : near-black for high readability
     --muted   : mid-grey for secondary text
     --white   : pure white
─────────────────────────────────────────────────────────── */
:root {
  /* Core brand colours */
  --navy:    #1a2e4a;   /* Deep navy — main heading / navbar bg  */
  --navy-lt: #243b5e;   /* Lighter navy variant                  */
  --accent:  #FF9E2C;   /* Sunrise amber — CTAs, icons, accents  */
  --accent-dk: #e07e00; /* Darker accent for hover states        */
  --sky:     #e8f0fe;   /* Very light blue-grey — section tints  */
  --cream:   #fdf8f2;   /* Warm cream — alternating bg           */

  /* Text colours */
  --text:    #111827;   /* Near-black for body copy              */
  --muted:   #6b7280;   /* Medium grey for captions / secondary  */
  --white:   #ffffff;

  /* Typography */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Syne', system-ui, sans-serif;

  /* Font size scale (major-third ratio ≈ 1.25×) */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-md:   1.125rem;  /*  18px */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   1.5rem;    /*  24px */
  --text-2xl:  1.875rem;  /*  30px */
  --text-3xl:  2.25rem;   /*  36px */
  --text-4xl:  3rem;      /*  48px */
  --text-5xl:  3.75rem;   /*  60px */

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --duration: 220ms;

  /* Navbar height — used in scroll-padding so section headings
     aren't hidden behind the sticky navbar when anchor-linked */
  --nav-h: 72px;
}


/* ── 2. CSS RESET & BASE STYLES ────────────────────────────
   We apply a minimal reset to remove browser inconsistencies:
   box-sizing ensures padding + border are included in width/height.
   margin/padding 0 removes default browser spacing.
─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth makes <a href="#id"> links animate */
  scroll-behavior: smooth;
  /* offset anchor targets so the navbar doesn't cover them */
  scroll-padding-top: var(--nav-h);
  font-size: 100%; /* = 16px — the base for rem calculations */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--white);
  line-height: 1.65;
  /* Improves text rendering on macOS/iOS */
  -webkit-font-smoothing: antialiased;
}

/* Remove list bullet points from <ul> inside nav/footer */
ul { list-style: none; }

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

/* Remove underline from links; colour from context */
a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration) var(--ease);
}

/* Remove default button styles — we re-style them as .btn */
button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}


/* ── 3. TYPOGRAPHY SCALE ───────────────────────────────────
   Headings use the display font (Syne) for personality.
   Body uses Plus Jakarta Sans for readability.
─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--navy);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { max-width: 65ch; }   /* Limit line length for readability */

/* .highlight wraps a word in the headline to add the accent underline */
.highlight {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
/* A wavy underline using a pseudo-element */
.highlight::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--accent);
  border-radius: var(--radius-full);
  opacity: .4;
}


/* ── 4. UTILITY / SHARED CLASSES ───────────────────────────
   Reusable single-purpose classes (similar to Tailwind utilities).
─────────────────────────────────────────────────────────── */

/* EYEBROW — small ALL-CAPS label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

/* SECTION HEADER — the centred title block used in most sections */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.section-header p {
  margin: var(--sp-4) auto 0;
  color: var(--muted);
  max-width: 55ch;
}

/* ── BUTTON SYSTEM ─────────────────────────────────────────
   All buttons share the .btn base class.
   Variants: .btn-primary  (amber filled)
             .btn-ghost    (transparent, accent text)
             .btn-outline  (accent border)
             .btn-white    (white filled — for dark bg sections)
             .btn-outline-white
   Sizes:    .btn-lg (larger padding)
             .btn-full (full width)
─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .65rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--accent-dk);
  box-shadow: 0 6px 20px rgba(255,158,44,.4);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: rgba(26,46,74,.25);
}
.btn-ghost:hover {
  background: rgba(26,46,74,.06);
  border-color: var(--navy);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: var(--navy);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
}
.btn-white:hover {
  background: #f0f4ff;
  box-shadow: 0 6px 20px rgba(255,255,255,.25);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
}

.btn-lg { padding: .85rem 2rem; font-size: var(--text-base); }
.btn-full { width: 100%; justify-content: center; }


/* ── 5. LAYOUT — .container ────────────────────────────────
   .container centres content and adds horizontal padding.
   max-width: 1200px keeps lines from getting too long on
   ultra-wide monitors.
─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;          /* centres horizontally */
  padding-inline: var(--sp-6);  /* side gutters */
}


/* ── 6. NAVBAR / HEADER ────────────────────────────────────
   position: sticky + top:0 keeps the navbar visible while
   scrolling. z-index:100 ensures it floats above all content.
─────────────────────────────────────────────────────────── */
#navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid rgba(26,46,74,.08);
  transition: box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease);
}

/* .scrolled class added by JS when the user scrolls past 60px */
#navbar.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

.nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* LOGO */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.nav-logo strong { color: var(--accent); }

/* NAV LINKS — pushed to the right via margin-left auto */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-left: auto;
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  position: relative;
  padding-bottom: 2px;
}
/* Animated underline on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: right var(--duration) var(--ease);
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { right: 0; }
.nav-links a.active,
.nav-links a.active:hover {
  color: var(--navy);
}
.nav-links a.active::after {
  right: 0;
}

/* CTA button inside navbar */
.nav-cta { margin-left: var(--sp-4); }

/* HAMBURGER BUTTON — visible only on mobile (see responsive section) */
.hamburger {
  display: none;            /* hidden on desktop */
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: var(--radius-full);
  transition: transform var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}
/* Animate 3 bars into an ✕ when .open class is added by JS */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 7. HERO SECTION ───────────────────────────────────────
   Two-column grid:
     Column 1 (left)  → content
     Column 2 (right) → floating image
─────────────────────────────────────────────────────────── */
#hero {
  background: linear-gradient(135deg, #f0f5ff 0%, var(--cream) 100%);
  padding-block: var(--sp-24) var(--sp-16);
  overflow: hidden;       /* clips the floating image on small viewports */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50/50 two-column layout */
  align-items: center;
  gap: var(--sp-12);
}

/* ── Left column ── */
.hero-content { max-width: 580px; }

.hero-content h1 { margin-bottom: var(--sp-6); }

.hero-sub {
  font-size: var(--text-md);
  color: var(--muted);
  margin-bottom: var(--sp-8);
  max-width: 50ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* Trust badges row under the CTAs */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  opacity: .75;
}
.hero-badges i { color: var(--accent); }

/* ── Right column: floating image ── */
.hero-image-wrap {
  position: relative;     /* needed for absolutely-positioned float cards */
  justify-self: end;
}

.hero-img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: none;
}

@media (min-width: 901px) {
  .hero-img {
    /* Continuous up-down floating animation defined in @keyframes below */
    animation: float 5s ease-in-out infinite;
  }
}

/* @keyframes float — creates a gentle levitating effect */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

/* Floating info cards that overlay the hero image */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--white);
  padding: .6rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-md);
}
.float-card i {
  font-size: 1.25rem;
  color: var(--accent);
}
/* Position top-left and bottom-right of the image */
.float-card--tl { top: 5%;  left: -12%; }
.float-card--br { bottom: 8%; right: -8%; }


/* ── 8. TRUST STRIP ────────────────────────────────────────
   A dark band with 4 animated counters.
─────────────────────────────────────────────────────────── */
#trust {
  background: var(--navy);
  padding-block: var(--sp-12);
}

.trust-grid {
  display: grid;
  /* auto-fill: as many columns as fit; min 160px, max 1fr */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  text-align: center;
  align-items: center;
  justify-items: center;
}

.stat-card {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-card > .stat-num,
.stat-card > .stat-suffix {
  display: inline-flex;
  align-items: baseline;
}

/* The large animated number */
.stat-num {
  font-family: var(--font-body);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-suffix {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.stat-card p {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  max-width: none;          /* override the 65ch limit for this context */
}


/* ── 9. SERVICES SECTION ───────────────────────────────────
   3-column card grid on desktop.
─────────────────────────────────────────────────────────── */
#services {
  padding-block: var(--sp-24);
  background: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;   /* cards align to top (not equal height stretch) */
}

/* ── Individual service card ── */
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1.5px solid rgba(26,46,74,.08);
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Featured card styling (the "Most Popular" one) */
.service-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

/* "Most Popular" badge — positioned absolutely at top-right */
.card-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--accent);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: var(--radius-full);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card-img-wrap img {
  width: 100%;
  height: 200px;
  object-fit: cover;   /* crops image to fill the fixed-height box */
}

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

/* Circular icon chip above the card title */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--sky);
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.service-card--featured .card-icon {
  background: rgba(255,158,44,.15);
  color: var(--accent);
}

.card-body h3 { margin-bottom: var(--sp-3); }
.card-body > p { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--sp-4); }

/* Feature checklist inside each card */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.card-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text);
}
.card-list i {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}


/* ── 10. FEATURES SECTION ──────────────────────────────────
   Alternating background to visually separate it from services.
─────────────────────────────────────────────────────────── */
#features {
  padding-block: var(--sp-24);
  background: var(--cream);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.feature-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Icon circle */
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent) 0%, #ffc86b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.feature-item h3 { margin-bottom: var(--sp-2); font-size: var(--text-lg); }
.feature-item p  { font-size: var(--text-sm); color: var(--muted); max-width: none; }


/* ── 11. ABOUT SECTION ─────────────────────────────────────
   Two-column: text | image-with-overlaid-pills
─────────────────────────────────────────────────────────── */
#about {
  padding-block: var(--sp-24);
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.about-content h2 { margin-bottom: var(--sp-4); }
.about-content p  { color: var(--muted); margin-bottom: var(--sp-4); }

.about-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.about-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
}
.about-list i { color: var(--accent); font-size: 1.2rem; }

/* Right image area */
.about-visual {
  position: relative;
}

.about-img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Floating pills overlaid on the about image */
.about-pill {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: .6rem 1.2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-md);
}
.about-pill strong { color: var(--accent); font-size: var(--text-xl); margin-right: .25rem; }
.about-pill--top    { top:    -16px; right: var(--sp-8); }
.about-pill--bottom { bottom: -16px; left:  var(--sp-8); }


/* ── 12. TESTIMONIALS ──────────────────────────────────────
   Custom CSS carousel slider.
   JS controls which slide is active via transform: translateX.
─────────────────────────────────────────────────────────── */
#testimonials {
  padding-block: var(--sp-24);
  background: var(--sky);
}

/* Slider container: clips overflow so only one slide shows */
.testimonial-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Track: holds all slides in a horizontal row */
.testimonial-track {
  display: flex;
  transition: transform 480ms var(--ease);
}

/* Each slide takes the full width of the slider */
.testimonial-slide {
  min-width: 100%;
  padding: var(--sp-4);
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
  max-width: 760px;
  margin-inline: auto;
}

/* Star icons */
.stars { color: var(--accent); font-size: 1.25rem; margin-bottom: var(--sp-4); }

/* Quote text */
.testimonial-card blockquote {
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
  max-width: none;
  font-style: italic;
}

/* Author row: avatar + name/title */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-style: normal;
}
.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sky);
}
.testimonial-author strong { display: block; color: var(--navy); font-size: var(--text-sm); }
.testimonial-author span   { font-size: var(--text-xs); color: var(--muted); }

/* DOT NAVIGATION */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26,46,74,.2);
  border: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease),
              width var(--duration) var(--ease);
}
.dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: var(--radius-full);
}

/* PREV / NEXT ARROW BUTTONS */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--navy);
  z-index: 2;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.slider-btn:hover { background: var(--accent); color: var(--navy); }
.slider-btn--prev { left:  var(--sp-2); }
.slider-btn--next { right: var(--sp-2); }


/* ── 13. CTA BAND ──────────────────────────────────────────
   Full-width navy band with gradient overlay.
─────────────────────────────────────────────────────────── */
#cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f36 100%);
  padding-block: var(--sp-16);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.cta-text h2, .cta-text p { color: var(--white); }
.cta-text h2 { font-size: var(--text-3xl); margin-bottom: var(--sp-2); }
.cta-text p  { color: rgba(255,255,255,.72); max-width: 45ch; }

.cta-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  flex-shrink: 0;
}


/* ── 14. CONTACT SECTION ───────────────────────────────────
   Two-column: contact info | form
─────────────────────────────────────────────────────────── */
#contact {
  padding-block: var(--sp-24);
  background: var(--cream);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;  /* form column is slightly wider */
  gap: var(--sp-16);
  align-items: start;
}

.contact-info h2 { margin-bottom: var(--sp-4); }
.contact-info > p { color: var(--muted); margin-bottom: var(--sp-8); }

/* Contact detail list: icon + label/value */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.contact-details li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.contact-details i {
  font-size: 1.25rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-details strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--navy);
  margin-bottom: 2px;
}
.contact-details span,
.contact-details a {
  font-size: var(--text-sm);
  color: var(--muted);
}
.contact-details a:hover { color: var(--accent); }

/* Social icon row in the contact section */
.contact-social {
  display: flex;
  gap: var(--sp-4);
}
.contact-social a {
  font-size: 1.5rem;
  color: var(--navy);
  opacity: .5;
  transition: opacity var(--duration), color var(--duration);
}
.contact-social a:hover { opacity: 1; color: var(--accent); }

/* ── FORM STYLES ── */
.contact-form-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
}

/* Each form field group = label + input/select/textarea + error */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
}
/* The asterisk (*) indicating required fields */
.form-group label span { color: var(--accent); }

/* Shared styles for input, select, and textarea */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid rgba(26,46,74,.15);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--white);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  outline: none;
}

/* Focus ring: replaces default browser outline with a branded one */
.form-group input:focus,
.form-group select,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,158,44,.15);
}

/* Invalid state (set by JS after failed validation) */
.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.form-group textarea { resize: vertical; min-height: 110px; }

/* Error message text beneath the field */
.field-error {
  font-size: var(--text-xs);
  color: #ef4444;
  font-weight: 500;
  min-height: 1em;  /* prevents layout jump when error appears/disappears */
}

/* Submission status message (success / error) */
.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  display: none;  /* hidden by default; JS shows it after submission */
}
.form-status.success {
  display: block;
  background: #d1fae5;
  color: #065f46;
}
.form-status.error {
  display: block;
  background: #fee2e2;
  color: #991b1b;
}


/* ── 15. FOOTER ────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
#footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding-top: var(--sp-16);
}

/* Top grid: brand | services links | company links | contact */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Brand column */
.footer-brand .nav-logo { color: var(--white); margin-bottom: var(--sp-4); }
.footer-brand .nav-logo strong { color: var(--accent); }
.footer-brand p { font-size: var(--text-sm); max-width: 32ch; margin-bottom: var(--sp-6); }

.footer-social {
  display: flex;
  gap: var(--sp-3);
}
.footer-social a {
  font-size: 1.4rem;
  color: rgba(255,255,255,.45);
  transition: color var(--duration);
}
.footer-social a:hover { color: var(--accent); }

/* Link columns */
.footer-nav h4,
.footer-contact h4 {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.footer-nav ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  transition: color var(--duration);
}
.footer-nav a:hover { color: var(--accent); }

/* Contact column */
.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
  max-width: none;
}
.footer-contact i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.footer-contact a { color: rgba(255,255,255,.55); }
.footer-contact a:hover { color: var(--accent); }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
    justify-content: space-between;
  padding-block: var(--sp-4);
}
.footer-bottom p { font-size: var(--text-sm); }

.whatsapp-float {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.24);
}

.whatsapp-float i {
  font-size: 1.5rem;
}

/* Back-to-top button in footer bottom */
#back-to-top {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration), transform var(--duration);
}
#back-to-top:hover {
  background: var(--accent);
  color: var(--navy);
  transform: translateY(-3px);
}


/* ── 16. SCROLL ANIMATIONS ─────────────────────────────────
   Elements with [data-animate] start hidden (opacity:0,
   translate Y by 30px). JS adds the .visible class using
   IntersectionObserver, triggering a CSS transition.
─────────────────────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay so items in a grid don't all appear simultaneously */
[data-animate]:nth-child(2) { transition-delay: 80ms;  }
[data-animate]:nth-child(3) { transition-delay: 160ms; }
[data-animate]:nth-child(4) { transition-delay: 240ms; }
[data-animate]:nth-child(5) { transition-delay: 320ms; }
[data-animate]:nth-child(6) { transition-delay: 400ms; }


/* ── 17. BACK-TO-TOP (standalone override) ─────────────────
   Covered in footer section above.
─────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════
   18. RESPONSIVE — TABLET (max-width: 900px)
   On screens narrower than 900px, collapse multi-column
   grids to a single column and resize typography.
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Hero: stack columns vertically */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content { max-width: 100%; }
  .hero-sub { max-width: none; }
  .hero-actions,
  .hero-badges  { justify-content: center; }

  /* Right column image below left content */
  .hero-image-wrap {
    justify-self: center;
    width: 100%;
    max-width: 420px;
  }

  /* Floating cards: reposition to not overflow screen */
  .float-card--tl { left: -4%; }
  .float-card--br { right: -4%; }

  /* Services: 2 columns on tablet */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* About: stack */
  .about-grid    { grid-template-columns: 1fr; }
  .about-visual  { display: none; }   /* hide large image on tablet to save space */

  /* Contact: stack */
  .contact-grid  { grid-template-columns: 1fr; }

  /* CTA band: stack text above buttons */
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }
  .cta-text p { max-width: none; }

  /* Footer: 2 columns */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer-brand { grid-column: 1 / -1; }  /* span full width */
}


/* ══════════════════════════════════════════════════════════
   19. RESPONSIVE — MOBILE (max-width: 600px)
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Reduce section padding */
  #hero, #services, #features, #about, #testimonials,
  #cta-band, #contact { padding-block: var(--sp-16); }

  /* Services: 1 column */
  .services-grid { grid-template-columns: 1fr; }

  /* Features: 1 column */
  .features-grid { grid-template-columns: 1fr; }

  /* Footer: 1 column */
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  /* Hide nav links; show hamburger button */
  .nav-links,
  .nav-cta      { display: none; }
  .hamburger    { display: flex; }

  /* When mobile menu is open, show nav links as a dropdown */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--white);
    padding: var(--sp-6);
    gap: var(--sp-6);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .nav-links.open a {
    font-size: var(--text-base);
    color: var(--navy);
  }

  /* Smaller hero heading */
  #hero h1 { font-size: var(--text-3xl); }

  /* Testimonial arrow buttons hidden on very small screens */
  .slider-btn { display: none; }

  /* Trust grid: 2×2 on mobile */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── 20. ACCESSIBILITY — REDUCED MOTION ────────────────────
   Users who set "prefers-reduced-motion" in their OS get
   a simpler experience without distracting animations.
   This respects vestibular disorders and motion sensitivity.
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-animate] {
    opacity: 1;
    transform: none;
  }
}

/* Projects Page Specific Styles */
.projects-hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
      color: var(--white);
      padding: var(--sp-24) 0;
      text-align: center;
      min-height: 300px;
      display: flex;
      align-items: center;
      margin-top: 80px;
    }

    .projects-hero h1 {
      color: var(--white);
      font-size: var(--text-4xl);
      margin-bottom: var(--sp-6);
    }

    .projects-hero p {
      color: rgba(255, 255, 255, 0.85);
      font-size: var(--text-lg);
      max-width: 600px;
      margin: 0 auto;
    }

    .projects-filter {
      display: flex;
      gap: var(--sp-4);
      justify-content: center;
      flex-wrap: wrap;
      margin: var(--sp-24) 0;
    }

    .filter-btn {
      padding: var(--sp-3) var(--sp-6);
      border: 2px solid var(--navy);
      background: var(--white);
      color: var(--navy);
      border-radius: var(--radius-full);
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 600;
      transition: all 0.3s var(--ease);
    }

    .filter-btn:hover,
    .filter-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--white);
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: var(--sp-8);
      padding: var(--sp-16) 0;
    }

    .project-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: all 0.3s var(--ease);
      cursor: pointer;
    }

    .project-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }

    .project-card.is-hidden {
      display: none;
    }

    .project-image {
      width: 100%;
      height: 220px;
      background: linear-gradient(135deg, var(--sky), var(--cream));
      overflow: hidden;
      position: relative;
    }

    .project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .project-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(26, 46, 74, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s var(--ease);
    }

    .project-card:hover .project-overlay {
      opacity: 1;
    }

    .project-overlay a {
      background: var(--accent);
      color: var(--white);
      padding: var(--sp-3) var(--sp-6);
      border-radius: var(--radius-full);
      text-decoration: none;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .project-overlay a:hover {
      background: var(--accent-dk);
    }

    .project-content {
      padding: var(--sp-6);
    }

    .project-tag {
      display: inline-block;
      background: var(--sky);
      color: var(--navy);
      padding: var(--sp-2) var(--sp-4);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 600;
      margin-bottom: var(--sp-3);
    }

    .project-title {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--navy);
      margin-bottom: var(--sp-2);
      font-family: var(--font-display);
    }

    .project-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: var(--sp-4);
    }

    .project-stack {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap;
    }

    .tech-badge {
      background: var(--cream);
      color: var(--navy);
      padding: var(--sp-1) var(--sp-3);
      border-radius: var(--radius-sm);
      font-size: var(--text-xs);
      font-weight: 600;
    }

    @media (max-width: 900px) {
      .projects-hero h1 {
        font-size: var(--text-3xl);
      }

      .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }
    }

    @media (max-width: 600px) {
      .projects-hero {
        margin-top: 70px;
        padding: var(--sp-16) 0;
      }

      .projects-hero h1 {
        font-size: var(--text-2xl);
      }

      .projects-filter {
        gap: var(--sp-2);
      }

      .filter-btn {
        padding: var(--sp-2) var(--sp-4);
        font-size: var(--text-xs);
      }

      .projects-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Pricing Page Specific Styles */
    .pricing-hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
      color: var(--white);
      padding: var(--sp-24) 0;
      text-align: center;
      min-height: 300px;
      display: flex;
      align-items: center;
      margin-top: 80px;
    }

    .pricing-hero h1 {
      color: var(--white);
      font-size: var(--text-4xl);
      margin-bottom: var(--sp-6);
    }

    .pricing-hero p {
      color: rgba(255, 255, 255, 0.85);
      font-size: var(--text-lg);
      max-width: 600px;
      margin: 0 auto;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: var(--sp-8);
      padding: var(--sp-16) 0;
    }

    .pricing-card {
      background: var(--white);
      border: 2px solid var(--sky);
      border-radius: var(--radius-lg);
      padding: var(--sp-8);
      transition: all 0.3s var(--ease);
      position: relative;
    }

    .pricing-card:hover {
      border-color: var(--accent);
      box-shadow: var(--shadow-lg);
      transform: translateY(-8px);
    }

    .pricing-card.featured {
      border-color: var(--accent);
      background: linear-gradient(135deg, rgba(255, 158, 44, 0.05), rgba(224, 126, 0, 0.05));
      transform: scale(1.05);
    }

    .pricing-badge {
      position: absolute;
      top: -12px;
      right: 20px;
      background: var(--accent);
      color: var(--white);
      padding: var(--sp-2) var(--sp-4);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 700;
    }

    .pricing-title {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--navy);
      margin-bottom: var(--sp-2);
      font-family: var(--font-display);
    }

    .pricing-desc {
      color: var(--muted);
      font-size: var(--text-sm);
      margin-bottom: var(--sp-6);
      line-height: 1.6;
    }

    .pricing-amount {
      margin-bottom: var(--sp-6);
    }

    .price {
      font-size: var(--text-5xl);
      font-weight: 500;
      color: var(--navy);
      font-family: var(--font-display);
    }

    .currency {
      font-size: var(--text-2xl);
      vertical-align: super;
    }

    .period {
      color: var(--muted);
      font-size: var(--text-sm);
      display: block;
      margin-top: var(--sp-2);
    }

    .pricing-features {
      list-style: none;
      padding: 0;
      margin-bottom: var(--sp-8);
    }

    .pricing-features li {
      padding: var(--sp-3) 0;
      color: var(--text);
      font-size: var(--text-sm);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      border-bottom: 1px solid var(--sky);
    }

    .pricing-features li:last-child {
      border-bottom: none;
    }

    .pricing-features i {
      color: var(--accent);
      font-size: var(--text-lg);
      flex-shrink: 0;
    }

    .pricing-cta {
      width: 100%;
      padding: var(--sp-4) var(--sp-6);
      border: 2px solid var(--navy);
      background: var(--white);
      color: var(--navy);
      border-radius: var(--radius-full);
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s var(--ease);
      text-decoration: none;
      text-align: center;
      display: block;
    }

    .pricing-card:hover .pricing-cta {
      background: var(--navy);
      color: var(--white);
    }

    .pricing-card.featured .pricing-cta {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--white);
    }

    .pricing-card.featured:hover .pricing-cta {
      background: var(--accent-dk);
      border-color: var(--accent-dk);
    }

    .faq-section {
      margin-top: var(--sp-24);
      padding-top: var(--sp-24);
      border-top: 2px solid var(--sky);
    }

    .faq-title {
      font-size: var(--text-3xl);
      color: var(--navy);
      text-align: center;
      margin-bottom: var(--sp-12);
      font-family: var(--font-display);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: var(--sp-8);
    }

    .faq-item {
      background: var(--cream);
      padding: var(--sp-6);
      border-radius: var(--radius-md);
    }

    .faq-item h3 {
      color: var(--navy);
      font-size: var(--text-lg);
      margin-bottom: var(--sp-3);
      font-family: var(--font-display);
    }

    .faq-item p {
      color: var(--muted);
      font-size: var(--text-sm);
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .pricing-hero h1 {
        font-size: var(--text-3xl);
      }

      .pricing-card.featured {
        transform: scale(1);
      }

      .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }
    }

    @media (max-width: 600px) {
      .pricing-hero {
        margin-top: 70px;
        padding: var(--sp-16) 0;
      }

      .pricing-hero h1 {
        font-size: var(--text-2xl);
      }

      .pricing-toggle {
        flex-direction: column;
        gap: var(--sp-2);
      }

      .pricing-grid {
        grid-template-columns: 1fr;
      }

      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Contact Page Specific Styles */
    .contact-hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
      color: var(--white);
      padding: var(--sp-24) 0;
      text-align: center;
      min-height: 300px;
      display: flex;
      align-items: center;
      margin-top: 80px;
    }

    .contact-hero h1 {
      color: var(--white);
      font-size: var(--text-4xl);
      margin-bottom: var(--sp-6);
    }

    .contact-hero p {
      color: rgba(255, 255, 255, 0.85);
      font-size: var(--text-lg);
      max-width: 600px;
      margin: 0 auto;
    }

    .contact-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      margin: var(--sp-24) 0;
    }

    .contact-form-wrapper {
      background: var(--cream);
      padding: var(--sp-8);
      border-radius: var(--radius-lg);
    }

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

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

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: var(--sp-3) var(--sp-4);
      border: 2px solid var(--sky);
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      transition: all 0.3s var(--ease);
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255, 158, 44, 0.1);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 120px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-4);
    }

    .form-submit {
      background: var(--accent);
      color: var(--white);
      padding: var(--sp-4) var(--sp-8);
      border: none;
      border-radius: var(--radius-full);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s var(--ease);
      width: 100%;
      font-size: var(--text-sm);
    }

    .form-submit:hover {
      background: var(--accent-dk);
      transform: translateY(-2px);
    }

    .form-message {
      display: none;
      padding: var(--sp-4);
      border-radius: var(--radius-md);
      margin-top: var(--sp-4);
      font-size: var(--text-sm);
    }

    .form-message.success {
      background: #d4edda;
      color: #155724;
      display: block;
    }

    .form-message.error {
      background: #f8d7da;
      color: #721c24;
      display: block;
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      gap: var(--sp-8);
    }

    .info-card {
      background: var(--white);
      padding: var(--sp-6);
      border-radius: var(--radius-lg);
      border-left: 4px solid var(--accent);
      box-shadow: var(--shadow-md);
    }

    .info-card h3 {
      color: var(--navy);
      font-size: var(--text-lg);
      margin-bottom: var(--sp-2);
      font-family: var(--font-display);
    }

    .info-card p {
      color: var(--muted);
      font-size: var(--text-sm);
      line-height: 1.6;
      margin: 0;
    }

    .info-card a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
    }

    .info-card a:hover {
      text-decoration: underline;
    }

    .info-icon {
      font-size: var(--text-2xl);
      color: var(--accent);
      margin-bottom: var(--sp-3);
    }

    .social-links {
      display: flex;
      gap: var(--sp-4);
      margin-top: var(--sp-4);
    }

    .social-links a {
      width: 40px;
      height: 40px;
      background: var(--sky);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      text-decoration: none;
      transition: all 0.3s var(--ease);
      font-size: var(--text-lg);
    }

    .social-links a:hover {
      background: var(--accent);
      color: var(--white);
      transform: translateY(-3px);
    }

    .map-container {
      width: 100%;
      height: 300px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-top: var(--sp-12);
      box-shadow: var(--shadow-md);
    }

    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .response-time-badge {
      background: var(--sky);
      color: var(--navy);
      padding: var(--sp-3) var(--sp-6);
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      font-weight: 600;
      text-align: center;
      margin-top: var(--sp-6);
    }

    @media (max-width: 900px) {
      .contact-hero h1 {
        font-size: var(--text-3xl);
      }

      .contact-content {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .contact-hero {
        margin-top: 70px;
        padding: var(--sp-16) 0;
      }

      .contact-hero h1 {
        font-size: var(--text-2xl);
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .map-container {
        height: 250px;
      }
    }