/* Shree Maurya Infoway Pvt Ltd - Public Site Styles (light mode only) */

:root {
  --blue-900: #0f1e4d;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-50: #eff6ff;
  /* Gold accent, taken from the company logo. Three shades because gold needs
     different values to stay readable depending on what it sits on:
       --accent       fills (buttons, badges, chips) — always with dark text
       --accent-light text/icons ON navy (high contrast against dark)
       --accent-deep  text/icons ON white (mid gold on white is unreadable) */
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-deep: #b45309;
  --accent-soft: #fffbeb;
  --on-accent: #0f172a;
  --ink-900: #0f172a;
  --ink-600: #475569;
  --ink-400: #94a3b8;
  --surface-0: #ffffff;
  --surface-1: #f8fafc;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 14px 32px -14px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 24px 48px -18px rgba(15, 23, 42, 0.28);
  --container: 1600px;
  /* Shared easing/timing for the premium interaction system — one motion
     language across buttons, cards, reveals and nav so nothing feels
     mismatched. ease-premium is a soft "decelerate" curve (fast start,
     gentle settle); ease-spring adds a touch of overshoot for badges/icons. */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 0.4s var(--ease-premium);
  --transition-fast: 0.22s var(--ease-premium);
  /* Plus Jakarta Sans carries headings (geometric, confident, a bit more
     character than Inter); Inter stays on body text for readability. */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--surface-0);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle layered "3D" depth on headings: a crisp 1px edge plus two soft
   blurred layers, low enough opacity to read as refinement rather than a
   cartoon drop-shadow. Tuned for dark text on light backgrounds — headings
   that sit on navy/gold get their own stronger, dark-on-light-text variant
   further down (wherever a heading rule already sets color:#fff). */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 2px 3px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.07);
}
h1 { font-weight: 800; letter-spacing: -0.03em; }

/* Headings on navy/gold backgrounds need a darker shadow to actually read as
   depth (a light shadow disappears against a dark surface). Class-qualified
   selectors here beat the bare h1-h5 rule above on specificity regardless of
   source order, so this safely overrides just the text-shadow for these. */
.hero-copy h1, .page-hero h1, .media-panel .media-content h3, .entertainment-copy h2,
.cta-banner h2, .connect-banner h2, .contact-info-card h3, .footer-grid h4 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px;
}
/* On navy surfaces the deep gold ring disappears — switch to the light gold */
.hero :focus-visible, .site-footer :focus-visible, .services-band :focus-visible,
.stats-band :focus-visible, .cta-banner :focus-visible, .contact-info-card :focus-visible {
  outline-color: var(--accent-light);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section-alt { background: var(--surface-1); }

/* Decorative background for large plain-white sections that otherwise read
   as flat: two soft, blurred gold/blue glows that slowly drift, applied as
   background layers (not a pseudo-element) so it needs no z-index/overflow
   bookkeeping and can't interfere with anything positioned inside the
   section. Used selectively — only on the sections that felt emptiest, not
   site-wide, so it stays a texture and never becomes visual clutter. */
.section-decor {
  background-image:
    radial-gradient(circle 420px at 8% 15%, rgba(245, 158, 11, 0.07), transparent 70%),
    radial-gradient(circle 460px at 94% 85%, rgba(37, 99, 235, 0.06), transparent 70%);
  background-repeat: no-repeat;
  animation: sectionDecorDrift 22s ease-in-out infinite;
}
@keyframes sectionDecorDrift {
  0%, 100% { background-position: 8% 15%, 94% 85%; }
  50% { background-position: 12% 20%, 90% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .section-decor { animation: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-50); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.eyebrow.on-dark { color: #fff; background: rgba(255, 255, 255, 0.16); }
.eyebrow.accent { color: var(--accent-deep); background: var(--accent-soft); }

.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 14px; }
.section-head p { color: var(--ink-600); font-size: 16.5px; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: none; white-space: nowrap;
  background-repeat: no-repeat;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast), border-color var(--transition-fast),
              background-position 0.65s var(--ease-premium);
}
/* Dark text on gold, not white — white on gold is only ~2:1 and unreadable.
   The shine is a second background LAYER (a diagonal highlight band) that
   slides across on hover — using background-position rather than a
   pseudo-element, since buttons here are plain text nodes with no wrapper
   to keep above an absolutely-positioned overlay. */
.btn-primary {
  background-color: var(--accent); color: var(--on-accent);
  background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  background-size: 220% 100%; background-position: 150% 0;
  box-shadow: 0 10px 24px -10px rgba(245, 158, 11, 0.5);
}
.btn-primary:hover {
  transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(245, 158, 11, 0.65);
  background-color: var(--accent-light); background-position: -50% 0;
}
.btn-primary:active { transform: translateY(-1px); }
.btn-outline {
  background-color: transparent; border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff;
  background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
  background-size: 220% 100%; background-position: 150% 0;
}
.btn-outline:hover { background-color: rgba(255, 255, 255, 0.14); border-color: #fff; transform: translateY(-3px); background-position: -50% 0; }
.btn-dark {
  background-color: var(--blue-900); color: #fff;
  background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.22) 50%, transparent 58%);
  background-size: 220% 100%; background-position: 150% 0;
}
.btn-dark:hover { transform: translateY(-3px); background-color: #16296b; box-shadow: var(--shadow-md); background-position: -50% 0; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.15s ease; }
  .btn:hover { transform: none; background-position: 150% 0; }
}

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  padding: 7px 0;
  transition: box-shadow 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}
.navbar.is-scrolled { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); border-color: var(--border); padding: 5px 0; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; }
/* Kept fairly large: this wordmark has fine engraved detail that turns to
   mush below ~50px tall, regardless of source resolution. */
.brand-logo-img { height: 66px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-600); font-size: 14.5px; font-weight: 600; position: relative; padding: 6px 0; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--blue-700); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { display: flex; align-items: center; gap: 8px; color: var(--ink-900); font-weight: 600; font-size: 14.5px; }
.nav-toggle { display: none; background: none; border: none; color: var(--ink-900); position: relative; z-index: 1001; cursor: pointer; padding: 4px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.open .icon-open { display: none; }
.nav-toggle.open .icon-close { display: block; }
.nav-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; transition: opacity 0.3s ease; z-index: 998;
}
.nav-backdrop.open { display: block; opacity: 1; }

@media (max-width: 1100px) {
  .nav-links {
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 82vw);
    background: #fff; flex-direction: column; justify-content: center; gap: 26px;
    transition: right 0.35s ease; padding: 40px; z-index: 999; box-shadow: -20px 0 50px rgba(0, 0, 0, 0.12);
  }
  .nav-links.open { right: 0; }
  /* Links fade/slide in one after another once the drawer has started
     sliding in, rather than all appearing instantly with the panel. */
  .nav-links a { opacity: 0; transform: translateX(16px); }
  .nav-links.open a {
    opacity: 1; transform: translateX(0);
    transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
  }
  .nav-links.open a:nth-child(1) { transition-delay: 0.08s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.13s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.18s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.23s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.28s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.33s; }
  .nav-links.open a:nth-child(7) { transition-delay: 0.38s; }
  .nav-links.open a:nth-child(8) { transition-delay: 0.43s; }
  .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand-logo-img { height: 56px; }
  .nav-cta > a.btn-primary { display: none; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .nav-links a { opacity: 1; transform: none; }
}

/* Hero: full-bleed background photo that crossfades between slides, with a
   dark gradient scrim (for text contrast) sitting between the photo and the
   content. Homepage only — inner pages use the single-image .page-hero. */
.hero {
  position: relative; color: #fff; padding: 170px 0 130px; overflow: hidden;
  background: var(--blue-900);
  min-height: min(78vh, 760px);
  display: flex; align-items: center;
}
.hero-bg-slider { position: absolute; inset: 0; z-index: 0; }
.hero-bg-slide {
  position: absolute; inset: 0; background: var(--bg) center/cover no-repeat;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero-bg-slide.active { opacity: 1; }
@keyframes heroBgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero-bg-slide.active { animation: heroBgZoom 7s ease-out both; }
/* Angled scrim: darker behind the text (left) so it stays readable,
   fading out toward the right so the background photo itself shows through. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10, 20, 60, 0.78) 0%, rgba(10, 20, 60, 0.5) 48%, rgba(10, 20, 60, 0.22) 100%);
}
.hero .container { position: relative; z-index: 2; width: 100%; }

/* Curved seam at the base of the hero: a shallow dip filled with the next
   section's background color, so the hero photo appears to end in a soft
   curve (deeper at center, rising at the edges) instead of a hard line. */
.hero-curve {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; z-index: 3;
  pointer-events: none; display: block;
}
.hero-curve path { fill: var(--surface-2); }
@media (max-width: 900px) {
  .hero-curve { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { transition: opacity 0.3s ease; }
  .hero-bg-slide.active { animation: none; }
}
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-copy { max-width: 640px; }
.hero-copy h1 { font-size: clamp(32px, 4.4vw, 50px); margin: 18px 0 20px; color: #fff; }
/* text-shadow:none — gradient/clipped text inherits the heading's dark 3D
   shadow by default, which shows through the transparent fill and muddies
   the bright gold instead of adding depth. Gradient text doesn't need the
   shadow anyway; the color shift already reads as premium on its own. */
.hero-copy h1 .accent { background: linear-gradient(95deg, var(--accent) 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.hero-copy p { font-size: 18px; color: rgba(255, 255, 255, 0.85); max-width: 520px; margin-bottom: 32px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero slider */
.hero-slider { position: relative; min-height: 300px; }
.hero-slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0s linear 0.2s;
}
.hero-slide.active {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0s linear 0s;
}

/* Text within the incoming slide enters from the left with a slight bounce,
   staggered element by element, so the slide change reads as a directed
   reveal rather than a flat crossfade. Mirrors the slide-image entrance on
   the right, so the two halves of the hero converge from opposite sides. */
@keyframes heroTextIn {
  from { opacity: 0; transform: translateX(-55px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero-slide.active > * { animation: heroTextIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.hero-slide.active > .eyebrow { animation-delay: 0.05s; }
.hero-slide.active > h1 { animation-delay: 0.14s; }
.hero-slide.active > p { animation-delay: 0.26s; }
.hero-slide.active > .hero-actions { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.active > * { animation: none; }
}

.hero-slide-nav { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.hero-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.hero-dots { display: flex; align-items: center; gap: 9px; }
.hero-dots .dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: none; cursor: pointer;
  padding: 0; transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dots .dot.active { background: var(--accent); transform: scale(1.2); }
@media (max-width: 640px) { .hero-slider { min-height: 400px; } }

@media (max-width: 900px) {
  .hero { padding: 130px 0 80px; min-height: min(72vh, 620px); }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; padding: 140px 0 64px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(15, 30, 80, 0.9) 0%, rgba(15, 30, 80, 0.86) 100%), var(--hero-img) center/cover no-repeat;
}
.page-hero.page-hero-plain { background: linear-gradient(135deg, var(--blue-900) 0%, #142a6e 100%); }
.page-hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 12px; color: #fff; }
.page-hero p { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0 auto; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.breadcrumb { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); margin-bottom: 16px; }
.breadcrumb a:hover { color: #fff; }

/* Light band directly under the hero: partner logo cards + quick enquiry form.
   Both sit on the same light-gray surface so they read as one continuous
   section, with the logo row overlapping up into the hero's lower edge. */
.intro-band { background: var(--surface-2); padding: 0 0 84px; position: relative; }

/* Partners strip: white logo cards in a continuous right-to-left marquee.
   The track's logo list is rendered twice in the markup (second copy
   aria-hidden) so translateX(-50%) loops seamlessly back to the start. */
.partners-strip { padding: 8px 0 56px; overflow: hidden; }
.partners-head { margin-bottom: 14px; }
.partners-head h2 { margin-bottom: 0; }
.partners-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.partners-track {
  display: flex; gap: 18px; width: max-content;
  animation: partnersMarquee 32s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
@keyframes partnersMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-logo {
  width: 190px; height: 104px; background: #fff; border-radius: var(--radius-md);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 24px; flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.partner-logo:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
  .partners-marquee { overflow-x: auto; }
}

/* Quick enquiry form (sits in .intro-band, under the partner logos) */
.quick-enquiry { text-align: center; }
.quick-enquiry h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
.quick-enquiry h2 .accent { background: linear-gradient(95deg, #92400e 0%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.quick-enquiry > p { color: var(--ink-600); font-size: 16.5px; margin-bottom: 34px; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.quick-enquiry-card {
  background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 38px; max-width: 1180px; margin: 0 auto; text-align: left;
}
.quick-enquiry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.quick-enquiry-card .form-group { margin-bottom: 0; }
.quick-enquiry-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.consent-row { display: flex; align-items: flex-start; gap: 10px; max-width: 520px; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-deep); }
.consent-row label { font-size: 13.5px; color: var(--ink-600); line-height: 1.5; }
@media (max-width: 900px) {
  .quick-enquiry-grid { grid-template-columns: 1fr; }
  .quick-enquiry-card { padding: 26px; }
  .quick-enquiry-foot { flex-direction: column; align-items: stretch; }
  .quick-enquiry-foot .btn { width: 100%; }
}

/* Services band: full-width dark section with a circular icon grid, plus an
   inset "why choose us" stat card at the bottom (same pattern as .cta-banner,
   a colored rounded card sitting inside a dark section). */
/* Soft glow layered behind the flat navy fill (not a pseudo-element) so it
   can't clip the .why-choose-card's negative-margin overlap into the next
   section, and needs no z-index/overflow bookkeeping. */
.services-band {
  background: radial-gradient(ellipse 700px 420px at 15% 0%, rgba(245, 158, 11, 0.16), transparent 60%),
              radial-gradient(ellipse 600px 400px at 100% 100%, rgba(37, 99, 235, 0.14), transparent 60%),
              var(--blue-900);
  padding: 80px 0 40px;
}
.services-band .section-head p { color: rgba(255, 255, 255, 0.7); }
.services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 20px; margin-bottom: 20px; }
.service-item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.service-icon {
  width: 90px; height: 90px; border-radius: 50%; background: #fff; color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin: 0 auto;
}
.service-icon svg { width: 50px; height: 50px; }
.service-item:hover .service-icon { transform: translateY(-5px) scale(1.05); box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.4); }
.service-item span:last-child { color: #fff; font-weight: 600; font-size: 14px; line-height: 1.35; }

.why-choose-card { background: var(--accent); border-radius: var(--radius-lg); padding: 34px 32px; margin-top: 32px; margin-bottom: -32px; z-index: 2; position: relative; }
.why-choose-card .section-head { margin-bottom: 24px; }
/* Dark text for high contrast on the actual gold fill (8.3:1) — only the
   big counter numbers stay white per an earlier explicit request; that one
   pairing (2.15:1) is a known, deliberately accepted tradeoff, not an
   oversight. */
.why-choose-card h2 { color: var(--on-accent); font-size: clamp(19px, 2.2vw, 25px); margin: 0; }
.why-choose-card .section-head .eyebrow { display: none; }
.why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-choose-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon number" "icon text";
  column-gap: 14px;
  text-align: left;
  align-items: center;
}
.why-choose-grid .icon-wrap {
  grid-area: icon;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
}
.why-choose-grid .icon-wrap svg {
  width: 100%;
  height: 100%;
}
.why-choose-grid strong {
  grid-area: number;
  font-size: 31px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.3);
  line-height: 1;
}
.why-choose-grid span:last-child {
  grid-area: text;
  font-size: 13.5px;
  color: rgba(15, 23, 42, 0.75);
  margin-top: 4px;
}

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-choose-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Stats band */
.stats-band {
  background: radial-gradient(ellipse 500px 300px at 85% 50%, rgba(245, 158, 11, 0.14), transparent 65%), var(--blue-900);
  padding: 50px 0;
}
.stats-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-tile { display: flex; align-items: center; gap: 16px; }
.stat-tile .icon-wrap {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition-base);
}
.stat-tile:hover .icon-wrap { transform: translateY(-3px) scale(1.06); }
.stat-tile strong { display: block; font-size: 26px; font-weight: 700; color: #fff; line-height: 1.2; }
.stat-tile span { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) { .stats-band-grid { grid-template-columns: 1fr 1fr; row-gap: 26px; } }
@media (max-width: 480px) { .stats-band-grid { grid-template-columns: 1fr; } }

/* Feature grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.feature-card {
  background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px; position: relative; overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
/* Thin accent bar that grows in from the left edge on hover — a quiet
   "this card is active" cue that doesn't compete with the icon/heading. */
.feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--blue-700) 100%);
  transform: scaleY(0); transform-origin: top; transition: transform var(--transition-base);
}
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; }
.feature-card:hover::before { transform: scaleY(1); }
.feature-card .icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; background: var(--blue-50); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.feature-card:hover .icon-wrap { transform: translateY(-3px) scale(1.08) rotate(-4deg); background: var(--accent); color: var(--on-accent); }
.feature-card h3 { font-size: 18px; margin-bottom: 10px; transition: color var(--transition-fast); }
.feature-card:hover h3 { color: var(--blue-700); }
.feature-card p { color: var(--ink-600); font-size: 14.5px; }

/* Why choose us */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-list { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.why-list .row { display: flex; gap: 14px; align-items: flex-start; }
.why-list .check {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.why-list h4 { font-size: 16px; margin-bottom: 4px; }
.why-list p { color: var(--ink-600); font-size: 14.5px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

/* Photo panel: real photo + dark scrim + text pinned to the bottom */
.media-panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: #fff;
}
.media-panel img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.7s var(--ease-premium); }
.media-panel:hover img.bg { transform: scale(1.06); }
.media-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.6) 55%, rgba(15, 23, 42, 0.92) 100%);
}
.media-panel .media-content { position: relative; z-index: 2; }
.media-panel .media-content h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.media-panel .media-content p { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
.promo-banner { min-height: 280px; padding: 48px; justify-content: center; }
.promo-banner .media-content { max-width: 560px; }
.promo-banner .media-content h3 { font-size: 26px; }
.promo-banner .media-content p { margin-bottom: 20px; }

/* Plans */
.plan-card {
  background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%);
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 28px; position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.plan-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-lg); border-color: var(--blue-600); }
.plan-card.popular { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan-card.popular:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
/* Gold tier: was hard-coded to a `--teal-600` variable that no longer exists
   since the navy+gold rebrand, so the border silently fell back to invalid
   (no visible highlight at all). Replaced with a real class + gold ring. */
.plan-card.gold { border-color: var(--accent-deep); }
.plan-card.gold:hover { border-color: var(--accent-deep); box-shadow: 0 20px 40px -16px rgba(180, 83, 9, 0.35); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.plan-card h3 { font-size: 20px; margin-bottom: 6px; }
.plan-card .plan-sub { font-size: 13px; color: var(--ink-400); margin-bottom: 20px; }
.plan-card .plan-price { font-size: 32px; font-weight: 700; color: var(--blue-700); margin-bottom: 22px; }
.plan-card .plan-price span { font-size: 14px; font-weight: 500; color: var(--ink-400); }
.plan-card ul { margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.plan-card ul li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-600); }
.plan-card ul li svg { flex-shrink: 0; color: var(--accent-deep); transition: transform var(--transition-fast); }
.plan-card:hover ul li svg { transform: scale(1.15); }

/* Our Presence: coverage checklist beside a live map of the service area */
.presence-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.presence-grid h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 8px; }
.presence-grid .accent-text { background: linear-gradient(95deg, #92400e 0%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.presence-grid .why-list h4 { font-size: 16.5px; }
.presence-map {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface-0);
}
.presence-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.presence-map-badge {
  position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13.5px;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-md);
}
@media (max-width: 900px) {
  .presence-grid { grid-template-columns: 1fr; gap: 40px; }
  .presence-map iframe { height: 320px; }
}

/* Entertainment add-on: dark card, copy left, framed photo right */
.entertainment-card {
  background: radial-gradient(ellipse 460px 300px at 0% 100%, rgba(245, 158, 11, 0.16), transparent 65%),
              linear-gradient(135deg, var(--blue-900) 0%, #16296b 100%);
  border-radius: var(--radius-lg); padding: 56px; color: #fff;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.entertainment-copy h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.entertainment-copy > p { color: rgba(255, 255, 255, 0.8); font-size: 16px; margin-bottom: 18px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.entertainment-stat { font-size: 17px; color: rgba(255, 255, 255, 0.9); margin-bottom: 28px; }
.entertainment-stat strong { background: linear-gradient(95deg, var(--accent) 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 24px; font-weight: 800; text-shadow: none; }
.entertainment-visual { position: relative; }
.entertainment-visual img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.entertainment-price {
  position: absolute; right: -10px; bottom: -16px;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 20px;
  padding: 14px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); line-height: 1.1;
}
.entertainment-price small { display: block; font-size: 12px; font-weight: 600; opacity: 0.75; }
@media (max-width: 900px) {
  .entertainment-card { grid-template-columns: 1fr; padding: 34px; gap: 36px; }
  .entertainment-price { right: 14px; bottom: -14px; }
}

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step-card { text-align: center; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%; background: var(--blue-700); color: #fff;
  font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.step-card h4 { font-size: 17px; margin-bottom: 8px; }
.step-card p { color: var(--ink-600); font-size: 14.5px; }
@media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.testimonial-card {
  background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.testimonial-card .stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
.testimonial-card p { color: var(--ink-600); font-size: 14.5px; font-style: italic; }
.testimonial-user { display: flex; align-items: center; gap: 12px; }
.avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.testimonial-user strong { display: block; font-size: 14px; }
.testimonial-user span { font-size: 12.5px; color: var(--ink-400); }

/* Blog cards */
.blog-card {
  background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); display: block;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* object-fit: contain (not cover) — a featured image in any aspect ratio
   shows in full, letterboxed on the matching light background, rather than
   being cropped to fill the frame. */
.blog-thumb { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.blog-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease-premium); }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-body { padding: 22px; }
.blog-date { font-size: 12.5px; color: var(--ink-400); margin-bottom: 8px; }
.blog-body h3 { font-size: 17px; margin-bottom: 10px; transition: color var(--transition-fast); }
.blog-card:hover .blog-body h3 { color: var(--blue-700); }
.blog-body p { font-size: 14px; color: var(--ink-600); margin-bottom: 14px; }
.blog-link { font-size: 13.5px; font-weight: 600; color: var(--blue-700); display: inline-flex; align-items: center; gap: 6px; transition: transform var(--transition-fast); }
.blog-card:hover .blog-link { transform: translateX(4px); }
.blog-card-soon { border-style: dashed; display: flex; align-items: center; justify-content: center; text-align: center; }
.blog-card-soon:hover { transform: none; box-shadow: none; }
.blog-card-soon .blog-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.blog-card-soon svg { color: var(--ink-400); }
.blog-card-soon h3 { color: var(--ink-600); }
.blog-card-soon p { margin-bottom: 0; }

.blog-detail-wrap { max-width: 780px; margin: 0 auto; }
.blog-detail-cover { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 34px; aspect-ratio: 16/8; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.blog-detail-cover img { width: 100%; height: 100%; object-fit: contain; }
.blog-content { font-size: 16.5px; color: var(--ink-600); }
.blog-content h2, .blog-content h3 { color: var(--ink-900); margin: 30px 0 14px; }
.blog-content p { margin-bottom: 18px; }
.blog-content ul, .blog-content ol { margin: 0 0 18px 22px; list-style: disc; }
.blog-content img { border-radius: var(--radius-md); margin: 20px 0; }

/* CTA banner */
.cta-banner {
  background: radial-gradient(ellipse 500px 320px at 90% 0%, rgba(245, 158, 11, 0.18), transparent 65%), var(--blue-900);
  border-radius: var(--radius-lg); padding: 54px; color: #fff; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;
}
.cta-banner h2 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.cta-banner p { color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.cta-banner .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Connect banner: full-bleed navy-to-gold CTA band with direct call/WhatsApp chips */
.connect-banner {
  background: linear-gradient(115deg, var(--blue-900) 0%, #1d2f78 55%, var(--accent-deep) 130%);
  padding: 44px 0;
}
.connect-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.connect-banner h2 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); margin: 0; }
.connect-banner-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.connect-chip {
  display: flex; align-items: center; gap: 12px; color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 10px 20px 10px 10px; transition: background 0.2s ease, transform 0.2s ease;
}
.connect-chip:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.connect-chip-icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.connect-chip small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.connect-chip strong { display: block; font-size: 16.5px; font-weight: 700; }
@media (max-width: 640px) {
  .connect-banner-inner { flex-direction: column; align-items: flex-start; }
}

/* Coverage list */
.coverage-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.coverage-list .chip {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px;
}
@media (max-width: 800px) { .coverage-list { grid-template-columns: 1fr 1fr; } }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; }
.contact-info-card {
  background: radial-gradient(ellipse 400px 260px at 100% 0%, rgba(245, 158, 11, 0.16), transparent 65%), var(--blue-900);
  color: #fff; border-radius: var(--radius-lg); padding: 40px; height: fit-content;
}
.contact-info-card h3 { color: #fff; margin-bottom: 24px; }
.contact-info-row { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info-row .icon-chip {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-light);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.contact-info-row:hover .icon-chip { transform: scale(1.08); background: rgba(245, 158, 11, 0.25); }
.contact-info-row strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.contact-info-row span, .contact-info-row a { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.map-embed { border-radius: var(--radius-md); overflow: hidden; margin-top: 24px; border: 1px solid rgba(255, 255, 255, 0.18); }
.map-embed iframe { width: 100%; height: 220px; border: none; display: block; }

.form-card { background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 13.5px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px;
  font-family: inherit; color: var(--ink-900); background: var(--surface-0);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.form-group textarea { min-height: 110px; resize: vertical; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; }
/* Success/error alerts stay green/red — that's semantic state, not branding */
.alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items: start; }
.faq-support-card { position: sticky; top: 100px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 15.5px; background: linear-gradient(150deg, #ffffff 0%, #fbfcff 55%, var(--blue-50) 140%); }
.faq-q .plus { transition: transform 0.3s ease; color: var(--blue-700); flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-q .plus { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--surface-1); }
.faq-a-inner { padding: 0 24px 20px; color: var(--ink-600); font-size: 14.5px; }
.faq-item.open .faq-a { max-height: 400px; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-support-card { position: static; } }

/* Legal pages */
.legal-intro { background: var(--surface-1); border-radius: var(--radius-md); padding: 24px 28px; margin-bottom: 40px; color: var(--ink-600); font-size: 15.5px; }
.legal-intro a { color: var(--blue-700); font-weight: 600; }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 50px; }
.legal-sidebar { position: sticky; top: 100px; height: fit-content; background: var(--surface-1); border-radius: var(--radius-md); padding: 22px; }
.legal-sidebar h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-400); margin-bottom: 14px; }
.legal-sidebar a { display: block; font-size: 13.5px; color: var(--ink-600); padding: 7px 0; border-left: 2px solid transparent; padding-left: 10px; }
.legal-sidebar a:hover { color: var(--blue-700); border-color: var(--blue-700); }
.legal-section { margin-bottom: 40px; scroll-margin-top: 100px; }
.legal-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.legal-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue-700); color: #fff; font-weight: 700;
  font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.legal-section h2 { font-size: 19px; }
.legal-section p { color: var(--ink-600); font-size: 15px; }
.legal-contact-card { background: var(--surface-1); border-radius: var(--radius-sm); padding: 18px 22px; }
.legal-contact-card a { color: var(--blue-700); font-weight: 600; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-sidebar { position: static; } }

/* Footer */
.site-footer { background: var(--blue-900); color: rgba(255, 255, 255, 0.8); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.footer-about p { font-size: 14px; margin: 16px 0 20px; color: rgba(255, 255, 255, 0.65); }
.footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.footer-grid ul li { margin-bottom: 11px; }
.footer-grid ul a {
  font-size: 14px; color: rgba(255, 255, 255, 0.65); position: relative; display: inline-block;
  transition: color var(--transition-fast);
}
.footer-grid ul a:hover { color: var(--accent-light); }
.footer-grid ul a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent-light); transition: right var(--transition-fast);
}
.footer-grid ul a:hover::after { right: 0; }
.footer-address { font-size: 14px; color: rgba(255, 255, 255, 0.65); line-height: 1.6; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-row a:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-3px) scale(1.08); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 22px 0; display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(255, 255, 255, 0.55); flex-wrap: wrap; gap: 10px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.6); z-index: 900; transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }

.not-found { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; }
.not-found h1 { font-size: 90px; color: var(--blue-700); }

/* Scroll reveal: directional variants share one timing/easing so the whole
   site reads as one motion language. Default is fade-up; .reveal-left/right
   are used on two-column layouts so each half enters from its own side;
   .reveal-scale suits framed photos/panels. JS only ever adds the base
   .reveal class + one of these modifiers, plus .in-view when it intersects. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}
.reveal.reveal-left { transform: translateX(-36px); }
.reveal.reveal-right { transform: translateX(36px); }
.reveal.reveal-scale { transform: scale(0.95); }
.reveal.in-view { opacity: 1; transform: none; }

/* These components define their own hover transitions (box-shadow, border,
   background) further up this file, in addition to being reveal targets.
   Since .reveal's transition shorthand appears later in the cascade, it
   would otherwise silently replace their hover transition entirely rather
   than merge with it — redeclaring the full combined property list here
   (still after .reveal in source) fixes that without touching each rule. */
.feature-card, .plan-card, .testimonial-card, .blog-card, .partner-logo, .connect-chip {
  transition: opacity 0.7s var(--ease-premium), transform var(--transition-base),
              box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

/* Reusable interaction utilities ------------------------------------------ */

/* Gradient text: for large headline highlights only (never body copy).
   Two variants because the accent gradient needs different stops to stay
   readable on navy vs. white — see the --accent token comment above. */
.text-gradient-on-dark {
  background: linear-gradient(95deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
.text-gradient-on-light {
  background: linear-gradient(95deg, #92400e 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}

/* Underline-reveal link: left-to-right sweep, shared by footer + legal nav */
.link-underline { position: relative; }
.link-underline::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: currentColor; transition: right 0.3s var(--ease-premium);
}
.link-underline:hover::after { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}