/*
 * CSM Theme — Main Stylesheet
 * Brand: Navy #0B1628 | Blue #0A6EBD | Orange #F7941D
 * Fonts: Inter, Plus Jakarta Sans
 *
 * STRUCTURE:
 * 1. CSS Variables (brand tokens)
 * 2. Reset & Base
 * 3. Typography
 * 4. Layout Utilities
 * 5. Buttons
 * 6. Hero Section
 * 7. Stats Section
 * 8. Modules Section & Cards
 * 9. Testimonials
 * 10. CTA Section
 * 11. Footer
 * 12. Page Hero (inner pages)
 * 13. Scroll-Reveal Animations (sr-item)
 * 14. Responsive
 *
 * Header / Navigation / Mobile Menu / Social Sidebar CSS now lives
 * further down this file, appended verbatim from the static site's
 * my-style.css and style.css (see divider comment below). Those
 * files already match header.php's markup exactly, so this scaffold's
 * old placeholder header CSS was removed to avoid conflicting rules.
 */

/* =============================================================
   1. CSS VARIABLES — Brand Tokens
============================================================= */
:root {
  /* Brand colours */
  --color-navy: #0b1628;
  --color-blue: #0a6ebd;
  --color-blue-dark: #085a9a;
  --color-blue-light: #e6f2fb;
  --color-orange: #f7941d;
  --color-orange-dark: #e07f0f;
  --color-white: #ffffff;
  --color-off-white: #f8fafc;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Typography */
  --font-body: "Inter", sans-serif;
  --font-display: "Plus Jakarta Sans", sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition: 0.25s ease;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --header-height: 72px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-blue-dark);
}

ul,
ol {
  list-style: none;
}

/* =============================================================
   3. TYPOGRAPHY
============================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}
h2 {
  padding: 0 0 15px;
  font-size: 31px;
  line-height: 1.3;
}
h3 {
  font-size: 25px;
  padding: 11px 0;
}
h4 {
  font-size: 1.125rem;
}

p {
  line-height: 1.7;
  color: var(--color-gray-600);
  padding: 5px 0;
}

.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--color-gray-600);
  max-width: 600px;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header .section-subtitle {
  margin: var(--space-md) auto 0;
}

/* =============================================================
   4. LAYOUT UTILITIES
============================================================= */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* =============================================================
   5. BUTTONS
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}
.btn-primary:hover {
  background: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(247, 148, 29, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-outline:hover {
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}
.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}

/* =============================================================
   6. HERO SECTION
============================================================= */
.hero-section {
  min-height: 100vh;
  background: var(--color-navy);
  padding: calc(var(--header-height) + 4rem) 0 4rem;
  display: flex;
  align-items: center;
}

.hero-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.hero-badge {
  display: inline-block;
  background: rgba(247, 148, 29, 0.15);
  color: var(--color-orange);
  border: 1px solid rgba(247, 148, 29, 0.3);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.hero-headline {
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.hero-subheadline {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  margin-bottom: var(--space-2xl);
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-ctas .btn-outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.hero-ctas .btn-outline:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

/* =============================================================
   7. STATS SECTION
============================================================= */
.stats-section {
  background: var(--color-blue-light);
  padding: var(--space-3xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-blue);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-gray-600);
  font-weight: 500;
}

/* =============================================================
   8. MODULES SECTION & CARDS
============================================================= */
.modules-section,
.all-modules-section {
  padding: var(--space-4xl) 0;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

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

.module-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition);
}

.module-card:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.module-icon {
  width: 52px;
  height: 52px;
  background: var(--color-blue-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--color-blue);
  font-size: 1.5rem;
}

.module-card-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
  color: var(--color-navy);
}

.module-card-desc {
  font-size: 0.9rem;
  color: var(--color-gray-600);
  margin-bottom: var(--space-md);
}

.module-card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition);
}
.module-card-link:hover {
  gap: 0.6rem;
}

.module-features-list {
  margin: var(--space-md) 0;
}

.module-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-gray-600);
  padding: 0.3rem 0;
}

.module-features-list li .fa-check {
  color: var(--color-blue);
  margin-top: 2px;
  flex-shrink: 0;
}

/* =============================================================
   9. TESTIMONIALS
============================================================= */
.testimonials-section {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-50);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
}

.testimonial-stars {
  color: var(--color-orange);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  display: flex;
  gap: 2px;
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--color-gray-700);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  font-style: italic;
}

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

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-author strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-navy);
  font-weight: 600;
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--color-gray-400);
}

/* =============================================================
   10. CTA SECTION
============================================================= */
.cta-section {
  padding: var(--space-4xl) 0;
  background: var(--color-navy);
  text-align: center;
}

.cta-headline {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.cta-subheadline {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  margin-bottom: var(--space-2xl);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================
   11. FOOTER
============================================================= */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
}

.footer-top {
  padding: var(--space-4xl) 0 var(--space-3xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-3xl);
}

.footer-logo img {
  height: 40px;
  margin-bottom: var(--space-lg);
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.social-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  transition: all var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.social-chip:hover {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.footer-apps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-lg);
}

.footer-links li + li {
  margin-top: 0.6rem;
}
.footer-links li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer-links li a:hover {
  color: var(--color-orange);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-contact li i {
  color: var(--color-orange);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.footer-contact li a {
  color: rgba(255, 255, 255, 0.7);
}
.footer-contact li a:hover {
  color: var(--color-orange);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-lg) 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.copyright {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.copyright a {
  color: rgba(255, 255, 255, 0.7);
}
.copyright a:hover {
  color: var(--color-orange);
}

.footer-legal {
  display: flex;
  gap: var(--space-lg);
}
.footer-legal li a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal li a:hover {
  color: var(--color-white);
}

/* =============================================================
   12. PAGE HERO (inner pages)
============================================================= */
.page-hero {
  background: var(--color-navy);
  padding: calc(var(--header-height) + 3rem) 0 3rem;
  text-align: center;
}

.page-hero-title {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.page-hero-subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  max-width: 580px;
  margin: 0 auto;
}

/* =============================================================
   13. SCROLL-REVEAL ANIMATIONS
   body.sr-ready enables these — set by WordPress body_class()
   Elements start hidden, animate in when IntersectionObserver fires
============================================================= */
body.sr-ready .sr-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

body.sr-ready .sr-item.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a grid for cascading effect */
body.sr-ready .modules-grid .sr-item:nth-child(1) {
  transition-delay: 0ms;
}
body.sr-ready .modules-grid .sr-item:nth-child(2) {
  transition-delay: 80ms;
}
body.sr-ready .modules-grid .sr-item:nth-child(3) {
  transition-delay: 160ms;
}
body.sr-ready .modules-grid .sr-item:nth-child(4) {
  transition-delay: 240ms;
}
body.sr-ready .modules-grid .sr-item:nth-child(5) {
  transition-delay: 320ms;
}
body.sr-ready .modules-grid .sr-item:nth-child(6) {
  transition-delay: 400ms;
}

body.sr-ready .testimonials-grid .sr-item:nth-child(1) {
  transition-delay: 0ms;
}
body.sr-ready .testimonials-grid .sr-item:nth-child(2) {
  transition-delay: 100ms;
}
body.sr-ready .testimonials-grid .sr-item:nth-child(3) {
  transition-delay: 200ms;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  body.sr-ready .sr-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================
   14. RESPONSIVE
============================================================= */
@media (max-width: 1024px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-subheadline {
    margin: 0 auto var(--space-2xl);
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-image {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

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

@media (max-width: 768px) {
  .modules-grid,
  .modules-grid--large,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

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

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   PASTE YOUR EXISTING home.php CSS BELOW THIS LINE
   (Your existing styles will override / extend the base above)
============================================================= */

/* =============================================================
   STATIC SITE CSS — appended verbatim below
   Source: static home.php's <link> order was my-style.css then
   style.css, so that order is preserved here to keep the same
   cascade/specificity behavior.
============================================================= */

/* ─────────────────────────────────────────────────────────────
   FROM: my-style.css
   (includes the header/nav/social-sidebar CSS that header.php
   now depends on — see lines matching .site-header, .main-nav,
   .nav-menu, .social-sidebar, .ssb-item, .mobile-drawer, etc.)
───────────────────────────────────────────────────────────── */

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

:root {
  --blue: #0a6ebd;
  --blue-dk: #074f8a;
  --blue-glow: rgba(10, 110, 189, 0.55);
  --orange: #f7941d;
  --orange-lt: #ffa53a;
  --orange-glow: rgba(247, 148, 29, 0.5);
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: "Inter", sans-serif;
  background: #060e1a;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* slides hidden by default */
  visibility: hidden;
  pointer-events: none;
  z-index: 3; /* above hero-video (0) and its overlays (1,2) */
}
.slide.is-active {
  visibility: visible;
  pointer-events: auto;
}
.slide.is-leaving {
  visibility: visible;
  pointer-events: none;
}

/* ─── VIDEO BACKGROUND ─── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Shared dark base overlay over video */
.hero-video-overlay-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* background: rgba(4, 10, 22, 0.5); */
}
/* Shared directional gradient over video */
.hero-video-overlay-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* background: linear-gradient(
    105deg,
    rgba(4, 10, 22, 0.78) 0%,
    rgba(4, 10, 22, 0.48) 45%,
    rgba(4, 10, 22, 0.12) 100%
  ); */
}

/* Coloured accent glow — unique per slide */
.slide-overlay-accent {
  position: absolute;
  inset: 0;
}
.slide-1 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(10, 110, 189, 0.22) 0%,
    transparent 70%
  );
}
.slide-2 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 55% 70% at 75% 45%,
    rgba(10, 110, 189, 0.28) 0%,
    transparent 68%
  );
}
.slide-3 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 78% 55%,
    rgba(10, 110, 189, 0.2) 0%,
    transparent 68%
  );
}
.slide-4 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(247, 148, 29, 0.18) 0%,
    transparent 68%
  );
}

/* Bottom vignette for nav legibility */
.slide-vignette {
  position: absolute;
  inset: 0;
  background: rgb(0 9 17 / 8%);
}

/* Per-slide background images removed — video background is used instead */
.slide-content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0;
  padding-top: 90px;
  text-align: center;
}

.content-inner {
  /* max-width: 620px; */
}

/* ── animation atoms — default: fully hidden, shifted down ── */
.anim-item {
  opacity: 0; /* FIX: was commented out — items always visible */
  transform: translateY(28px);
  filter: blur(4px);
  transition:
    opacity 0.65s var(--ease-cinematic),
    transform 0.65s var(--ease-cinematic),
    filter 0.5s var(--ease-cinematic);
}

/* ── Slide enters (is-active) — cascade items in from bottom ── */
.slide.is-active .anim-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.slide.is-active .anim-item:nth-child(1) {
  transition-delay: 0.08s;
}
.slide.is-active .anim-item:nth-child(2) {
  transition-delay: 0.2s;
}
.slide.is-active .anim-item:nth-child(3) {
  transition-delay: 0.32s;
}
.slide.is-active .anim-item:nth-child(4) {
  transition-delay: 0.44s;
}
.slide.is-active .anim-item:nth-child(5) {
  transition-delay: 0.56s;
}

/* ── Slide exits (is-leaving) — items fade upward quickly ── */
.slide.is-leaving .anim-item {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(5px);
  transition:
    opacity 0.32s ease-in,
    transform 0.32s ease-in,
    filter 0.28s ease-in;
}
.slide.is-leaving .anim-item:nth-child(1) {
  transition-delay: 0s;
}
.slide.is-leaving .anim-item:nth-child(2) {
  transition-delay: 0.03s;
}
.slide.is-leaving .anim-item:nth-child(3) {
  transition-delay: 0.06s;
}
.slide.is-leaving .anim-item:nth-child(4) {
  transition-delay: 0.08s;
}
.slide.is-leaving .anim-item:nth-child(5) {
  transition-delay: 0.1s;
}

/* ─── EYEBROW / SMALL HEADING ─── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dddddd80;
  font-size: 11px;
  padding: 6px 11px;
  background: #dddddd1f;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 18px;
}
.eyebrow-line {
  width: 32px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* ─── HEADLINE ─── */
.headline {
  font-size: 55px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.headline em {
  font-style: normal;
  color: #34abe2;
}

/* ─── BODY COPY ─── */
.body-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #fff;
  /* max-width: 500px; */
  margin-bottom: 28px;
}

/* ─── HIGHLIGHT PILLS ─── */
.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 36px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.2s,
    border-color 0.2s;
  cursor: default;
}
.pill:hover {
  background: rgba(10, 110, 189, 0.22);
  border-color: rgba(10, 110, 189, 0.5);
}
.pill-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--orange);
}

/* ─── CTA BUTTONS ─── */
.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 30px;
  background: var(--orange);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(247, 148, 29, 0.38);
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--orange-lt);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(247, 148, 29, 0.5);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}

.stat-float {
  position: absolute;
  z-index: 25;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}
.slide.is-active .stat-float {
  opacity: 1;
}
.slide.is-leaving .stat-float {
  opacity: 0;
  transition-delay: 0s;
}

.stat-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 20px 26px;
  text-align: center;
  min-width: 148px;
}
.stat-card .num {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stat-card .num b {
  color: var(--orange);
  font-weight: 800;
}
.stat-card .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 5px;
}

.slide-counter {
  position: absolute;
  top: 36px;
  right: 56px;
  z-index: 30;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.38);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.5s ease 0.85s,
    transform 0.5s ease 0.85s;
}
.slide.is-active .slide-counter {
  opacity: 1;
  transform: translateY(0);
}
.slide.is-leaving .slide-counter {
  opacity: 0;
  transition-delay: 0s;
}
.slide-counter strong {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.topnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 22px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    rgba(4, 10, 22, 0.55) 0%,
    transparent 100%
  );
}
.logo {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}
.logo-accent {
  color: var(--orange);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover {
  color: #fff;
}
.nav-cta {
  padding: 9px 20px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(10, 110, 189, 0.4);
}
.nav-cta:hover {
  background: #1279cc;
  box-shadow: 0 4px 18px rgba(10, 110, 189, 0.55);
}

.controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0 56px 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

/* ─── Slide Tabs (left) ─── */
.slide-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 40px;
}
.slide-tab {
  position: relative;
  padding: 10px 0;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 60px;
  max-width: 160px;
  overflow: hidden;
  transition:
    max-width 0.4s var(--ease-cinematic),
    opacity 0.3s;
  opacity: 0.45;
}
.slide-tab.active {
  max-width: 180px;
  opacity: 1;
}
.slide-tab:hover {
  opacity: 0.8;
}

.tab-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: none;
}
.slide-tab.active .tab-label {
  display: block;
}

.tab-track {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}
.tab-fill {
  height: 100%;
  background: var(--orange);
  width: 0%;
  border-radius: 2px;
  transition: width linear;
}

/* ─── Prev/Next arrows (right) ─── */
.arrow-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}
.arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.arrow-btn:hover {
  background: rgba(10, 110, 189, 0.35);
  border-color: rgba(10, 110, 189, 0.7);
  transform: scale(1.08);
}
.arrow-btn svg {
  width: 18px;
  height: 18px;
}

/* ─── Scrolldown hint ─── */
.scroll-hint {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.scroll-dot {
  width: 3px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.4;
  }
}

.corner-tl,
.corner-br {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0.18;
}
.corner-tl {
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top left, var(--blue), transparent 60%);
}
.corner-br {
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(
    circle at bottom right,
    var(--orange),
    transparent 60%
  );
}

@media (max-width: 960px) {
  .stat-float {
    display: none;
  }
  .slide-content {
    padding: 0 15px;
    /* padding-top: 84px; */
  }
  .topnav {
    padding: 18px 28px;
  }
  .nav-links {
    display: none;
  }
  .controls-bar {
    padding: 0 28px 28px;
  }
  .slide-counter {
    right: 28px;
  }
  .scroll-hint {
    display: none;
  }
  .tab-label {
    display: none !important;
  }
  .slide-tab {
    min-width: 40px;
  }
  .slide-tab.active {
    max-width: 80px;
  }
}
@media (max-width: 560px) {
  .headline {
    font-size: 26px;
  }
  .cta-row {
    flex-direction: row;
    align-items: flex-start;
  }
  .btn-primary,
  .btn-secondary {
    /* width: 100%; */
    justify-content: center;
  }
  .hero {
    min-height: 100dvh;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .slide-bg {
    transition: none !important;
  }
  .anim-item {
    transition-duration: 0.01ms !important;
  }
}

a {
  text-decoration: none;
  color: inherit;
}

:root {
  --navy: #0b1628;
  --navy-lt: #111e35;
  --blue: #0a6ebd;
  --orange: #f7941d;
  --orange-glow: rgba(247, 148, 29, 0.35);
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.52);
  --divider: rgba(255, 255, 255, 0.09);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════════════════════
   CSM HEADER  —  centered logo, split nav (left / logo / right)
   Tokens used: --navy --blue --orange --divider --ease (+ two below)
   ══════════════════════════════════════════════════════════ */

:root {
  --navy-lt: #132241;
  --orange-dk: #e07d05;
}

/* ══════════════════════════════════════════════════════════
   CSM HEADER  —  transparent (clear over hero), logo left / cluster right
   Sits over the hero, turns solid white on scroll.
   Tokens used: --navy --blue --orange --divider --ease (+ two below)
   ══════════════════════════════════════════════════════════ */

:root {
  --navy-lt: #132241;
  --orange-dk: #e07d05;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-family: "Inter", sans-serif;
}

/* Dark scrim at the very top so the white logo + links stay legible over the
   hero. Fades out once the header turns solid on scroll. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 130px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 10, 20, 0.6) 0%,
    rgba(4, 10, 20, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.4s ease;
}
.site-header.scrolled::before {
  opacity: 0;
}

/* ════════════════ MAIN NAV ════════════════ */
.main-nav {
  background: transparent;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease,
    backdrop-filter 0.4s ease;
}
.site-header.scrolled .main-nav {
  background: #ffffff;
  box-shadow: 0 6px 26px -8px rgba(11, 22, 40, 0.28);
}
.main-nav-inner {
  position: relative;
  z-index: 2;
  /* max-width: 1320px; */
  margin: 0 auto;
  padding: 0 40px;
  height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .main-nav-inner {
  height: 66px;
}

/* ── LOGO (far left) ── */
.nav-logo {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* sits in the center grid column */
}
.logo-img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition:
    transform 0.25s var(--ease),
    height 0.4s var(--ease),
    filter 0.4s ease;
}
.site-header.scrolled .logo-img {
  filter: none; /* full-colour logo on the white bar */
  height: 45px;
}
.nav-logo:hover .logo-img {
  transform: translateY(-1px);
}

/* ── RIGHT CLUSTER: nav links · divider · social · CTA ── */
/* .nav-cluster removed — replaced by .nav-right */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: block;
  padding: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff; /* white over hero */
  text-decoration: none;
  border-radius: 9px;
  position: relative;
  white-space: nowrap;
  transition: color 0.22s;
}
.site-header.scrolled .nav-link {
  color: var(--navy);
} /* dark on white bar */
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), #ffb454);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.nav-item.active .nav-link,
.nav-link:hover {
  color: #ff8400;
}
.nav-item.active .nav-link::after,
.nav-link:hover::after {
  transform: scaleX(1);
}
.nav-item.active .nav-link::after {
  box-shadow: 0 2px 8px rgba(247, 148, 29, 0.5);
}

/* .cluster-div kept for backward compat but hidden */
.cluster-div {
  display: none;
}

/* ── Phone & email in nav (right side, desktop) ── */
.nav-contact {
  /* display: flex; */
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.nav-contact-sep {
  display: none;
}
.nav-contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.22s;
}
.nav-contact-link i {
  font-size: 12px;
  opacity: 0.75;
}
.nav-contact-link:hover {
  color: var(--orange);
}
.site-header.scrolled .nav-contact-link {
  color: var(--navy);
}
.site-header.scrolled .nav-contact-link:hover {
  color: var(--blue);
}
.nav-contact-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}
.site-header.scrolled .nav-contact-sep {
  color: rgba(11, 22, 40, 0.2);
}

/* ── SOCIAL: real brand colours, app-style glossy chips ── */
.top-social {
  /* display: none;  */
}
.top-social-link {
  --brand: #0a6ebd;
  --glow: rgba(10, 110, 189, 0.9);
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  background: var(--brand);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s ease,
    filter 0.28s ease;
}
.top-social-link i {
  position: relative;
  z-index: 1;
}
.top-social-link:hover {
  transform: translateY(-3px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 20px -5px var(--glow);
}
.top-social-link.is-fb {
  --brand: #1877f2;
  --glow: rgba(24, 119, 242, 0.9);
}
.top-social-link.is-x {
  --brand: #000000;
  --glow: rgba(90, 90, 90, 0.8);
  border-color: rgba(255, 255, 255, 0.32);
}
.top-social-link.is-ig {
  --glow: rgba(214, 41, 118, 0.9);
  background: linear-gradient(
    45deg,
    #feda75 0%,
    #fa7e1e 26%,
    #d62976 55%,
    #962fbf 78%,
    #4f5bd5 100%
  );
}
.top-social-link.is-in {
  --brand: #0a66c2;
  --glow: rgba(10, 102, 194, 0.9);
}
.top-social-link.is-yt {
  --brand: #ff0000;
  --glow: rgba(255, 0, 0, 0.85);
}
.top-social-link.is-th {
  --brand: #000000;
  --glow: rgba(90, 90, 90, 0.8);
  border-color: rgba(255, 255, 255, 0.32);
}

/* ── CTA ── */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dk) 100%);
  box-shadow: 0 8px 20px -6px rgba(247, 148, 29, 0.7);
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s;
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(247, 148, 29, 0.85);
  color: #fff;
}
.nav-cta:hover::before {
  transform: translateX(120%);
}
.nav-cta i {
  font-size: 14px;
  transition: transform 0.25s var(--ease);
}
.nav-cta:hover i {
  transform: rotate(-12deg) scale(1.08);
}

/* ── HAMBURGER (mobile only) ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  padding: 11px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dk, #074f8a));
  box-shadow: 0 6px 16px -5px rgba(10, 110, 189, 0.7);
}
.hamburger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s;
  transform-origin: center;
}
.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);
}

/* ════════════════ MOBILE DRAWER ════════════════ */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(330px, 86vw);
  height: 100vh;
  background: linear-gradient(180deg, #0d1c34, var(--navy));
  border-left: 1px solid var(--divider);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  padding: 22px;
}
.mobile-drawer.open {
  transform: translateX(0);
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--divider);
}
.drawer-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.2s,
    color 0.2s;
}
.drawer-close:hover {
  background: rgba(247, 148, 29, 0.16);
  color: var(--orange);
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition:
    color 0.2s,
    background 0.2s;
}
.drawer-link::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.2s;
}
.drawer-link:hover,
.drawer-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.drawer-link.active::before {
  background: var(--orange);
}
.drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 15px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  box-shadow: 0 10px 24px -8px rgba(247, 148, 29, 0.7);
}

/* Contact block inside the drawer (moved here from the old top strip) */
.drawer-contact {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-contact a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.drawer-contact a:hover {
  color: #fff;
}
.drawer-contact i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dk, #074f8a));
  flex-shrink: 0;
}
.drawer-social {
  display: flex;
  gap: 9px;
  justify-content: center;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--divider);
}

/* Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 20, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1024px) {
  .nav-menu,
  .cluster-div,
  .top-social,
  .nav-cta,
  .nav-contact {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .main-nav-inner {
    grid-template-columns: 1fr auto;
  }
}
@media (max-width: 640px) {
  .main-nav-inner {
    padding: 0 18px;
  }
  .logo-img {
/*     height: auto; */
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   VERTICAL SOCIAL SIDEBAR  —  Pinterest-style, fixed right
   Each link: icon sits on the right edge; label slides in
   from the left on hover.
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   VERTICAL SOCIAL SIDEBAR  —  clean pill stack, right edge
   Default: small circle icon hugging the right edge.
   Hover:   brand-coloured tab slides out LEFT revealing the label.
   ═══════════════════════════════════════════════════════════════ */

.social-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* Each pill: icon only by default, label+icon on hover */
.ssb-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 28px 0 0 28px;
  height: 42px;
  /* collapsed: icon only */
  max-width: 42px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ssb-c, #0a6ebd);
  box-shadow: -2px 4px 14px rgba(0, 0, 0, 0.22);
  transition:
    max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.ssb-item:hover {
  max-width: 160px;
  box-shadow: -4px 6px 22px var(--ssb-glow, rgba(10, 110, 189, 0.45));
}

/* Icon — always visible, right side */
.ssb-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 16px;
  order: 2;
}

/* Label — sits LEFT of icon, only visible when pill expands */
.ssb-label {
  order: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 10px 0 16px;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 0.2s ease 0.1s,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  pointer-events: none;
}

.ssb-item:hover .ssb-label {
  opacity: 1;
  transform: translateX(0);
}

/* ── Brand colours ── */
.ssb-item.is-fb {
  --ssb-c: #1877f2;
  --ssb-glow: rgba(24, 119, 242, 0.45);
}
.ssb-item.is-x {
  --ssb-c: #111111;
  --ssb-glow: rgba(60, 60, 60, 0.4);
}
.ssb-item.is-ig {
  --ssb-glow: rgba(214, 41, 118, 0.45);
  background: linear-gradient(
    135deg,
    #feda75 0%,
    #fa7e1e 25%,
    #d62976 55%,
    #962fbf 80%,
    #4f5bd5 100%
  );
}
.ssb-item.is-in {
  --ssb-c: #0a66c2;
  --ssb-glow: rgba(10, 102, 194, 0.45);
}
.ssb-item.is-yt {
  --ssb-c: #ff0000;
  --ssb-glow: rgba(255, 0, 0, 0.4);
}
.ssb-item.is-th {
  --ssb-c: #111111;
  --ssb-glow: rgba(60, 60, 60, 0.4);
}

/* ── Page-load stagger entrance ── */
.ssb-item {
  opacity: 0;
  animation: ssb-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ssb-item:nth-child(1) {
  animation-delay: 0.1s;
}
.ssb-item:nth-child(2) {
  animation-delay: 0.18s;
}
.ssb-item:nth-child(3) {
  animation-delay: 0.26s;
}
.ssb-item:nth-child(4) {
  animation-delay: 0.34s;
}
.ssb-item:nth-child(5) {
  animation-delay: 0.42s;
}
.ssb-item:nth-child(6) {
  animation-delay: 0.5s;
}

@keyframes ssb-enter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Hide on mobile ── */
@media (max-width: 900px) {
  .social-sidebar {
    display: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ssb-item {
    animation: none;
    opacity: 1;
  }
  .ssb-item,
  .ssb-label {
    transition: none;
  }
}

.why-wrap {
  position: relative;
  background: #fefefe;
  overflow: hidden;
  padding: 90px 0 100px;
}

/* Animated gradient mesh background */
.why-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 20% 80%,
      rgba(10, 110, 189, 0.13) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 85% 15%,
      rgba(247, 148, 29, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 40% at 50% 50%,
      rgba(10, 110, 189, 0.06) 0%,
      transparent 65%
    );
  pointer-events: none;
  z-index: 0;
}
/* Subtle dot grid */
.why-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

.why-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.why-top {
  text-align: center;
  /* margin-bottom: 20px; */
  overflow: hidden;
}

.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.why-eyebrow.in {
  opacity: 1;
  transform: translateY(0);
}
.eyebrow-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(247, 148, 29, 0.7);
}

/* Word-by-word heading reveal */
.why-title {
  /* font-family: "Outfit", sans-serif; */
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  color: #000000;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.why-title .word {
  display: inline-block;
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.why-title .word.in {
  opacity: 1;
  transform: translateY(0);
}
/* Orange gradient words */
.why-title .grad {
  background: linear-gradient(95deg, #f7941d 0%, #ffb347 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Blue gradient words */
.why-title .grad-blue {
  background: linear-gradient(95deg, #60a5fa 0%, #0a6ebd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why-subtitle {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgb(0 0 0 / 66%);
  letter-spacing: -0.01em;
  transition:
    opacity 0.6s var(--ease) 0.35s,
    transform 0.6s var(--ease) 0.35s;
}
.why-subtitle.in {
  opacity: 1;
  transform: translateY(0);
}

/* Thin divider */
.why-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(10, 110, 189, 0.35),
    rgba(247, 148, 29, 0.35),
    transparent
  );
  margin: 20px auto 30px;
  transition: width 1s var(--ease) 0.5s;
}
.why-divider.in {
  width: 480px;
}

.why-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  /* align-items: center; */
}

/* ── LEFT ── */
.why-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.left-label {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}

.left-headline {
  font-family: "Outfit", sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin-bottom: 28px;
}

.left-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
  color: rgb(0 0 0);
  margin-bottom: 36px;
  max-width: 500px;
}
.left-body strong {
  color: rgb(0 0 0 / 90%);
  font-weight: 600;
}

/* ── Stat row ── */
.left-stats {
  display: flex;
  gap: 0;
  margin-bottom: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  max-width: 440px;
}
.lstat {
  flex: 1;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  transition: background 0.2s;
}
.lstat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.lstat:hover {
  background: rgba(10, 110, 189, 0.1);
}
.lstat-val {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.lstat-val em {
  color: var(--orange);
  font-style: normal;
}
.lstat-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── CTA ── */
.why-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(247, 148, 29, 0.38);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.why-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
.why-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(247, 148, 29, 0.5);
  color: #fff;
}
.why-cta:hover::before {
  transform: translateX(100%);
}
.why-cta span,
.why-cta svg {
  position: relative;
  z-index: 1;
}
.why-cta svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s;
}
.why-cta:hover svg {
  transform: translateX(4px);
}

/* trust note */
.cta-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}
.cta-note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  flex-shrink: 0;
  animation: greenPulse 2.4s ease-in-out infinite;
}
@keyframes greenPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.07);
  }
}

/* why-right base — overridden by new scroll layout block below */
.why-right {
  position: relative;
}

/* Glow bloom behind images */
.right-bloom {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.28) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: bloomPulse 5s ease-in-out infinite;
}
@keyframes bloomPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.7;
  }
}

/* ── Individual image cards ── */
.img-card {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
  cursor: pointer;
}
.img-card:hover {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(247, 148, 29, 0.35) inset;
  z-index: 20 !important;
}
.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.img-card:hover img {
  transform: scale(1.06);
}

/* Glass overlay on each image card */
.img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(10, 22, 40, 0.55) 100%
  );
  pointer-events: none;
}

/* Card positions — staggered like reference but with 3D tilt */
.img-card-1 {
  width: 170px;
  height: 280px;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  z-index: 5;
  animation: floatLeft 7s ease-in-out infinite;
}
.img-card-2 {
  width: 182px;
  height: 340px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 10;
  animation: floatCenter 6s ease-in-out infinite;
}
.img-card-3 {
  width: 170px;
  height: 280px;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  z-index: 5;
  animation: floatRight 8s ease-in-out infinite;
}

@keyframes floatLeft {
  0%,
  100% {
    transform: translateY(-50%) rotate(-4deg) translateY(0px);
  }
  50% {
    transform: translateY(-50%) rotate(-4deg) translateY(-12px);
  }
}
@keyframes floatCenter {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-16px);
  }
}
@keyframes floatRight {
  0%,
  100% {
    transform: translateY(-50%) rotate(4deg) translateY(0px);
  }
  50% {
    transform: translateY(-50%) rotate(4deg) translateY(-10px);
  }
}

/* Stagger card entrance */
.img-card {
  opacity: 0;
}
.img-card.in {
  opacity: 1;
}
.img-card-1.in {
  transition:
    opacity 0.7s var(--ease) 0.3s,
    transform 0.7s var(--ease) 0.3s;
}
.img-card-2.in {
  transition:
    opacity 0.7s var(--ease) 0.5s,
    transform 0.7s var(--ease) 0.5s;
}
.img-card-3.in {
  transition:
    opacity 0.7s var(--ease) 0.7s,
    transform 0.7s var(--ease) 0.7s;
}

/* Floating badge on center card */
.img-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(10, 110, 189, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 7px 14px;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Orange accent corner badge on card 1 */
.img-corner-badge {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 15;
  background: var(--orange);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .why-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .why-right {
    height: 440px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .why-container {
    padding: 0 20px;
  }
  .why-top {
    margin-bottom: 48px;
  }
  .why-right {
    height: 340px;
  }
  .left-stats {
    max-width: 100%;
  }
  .why-divider.in {
    width: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-track {
    animation: none !important;
  }
  .right-bloom {
    animation: none !important;
  }
  .why-left,
  .why-right,
  .why-eyebrow,
  .why-subtitle,
  .why-divider,
  .why-title .word {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
  }
}

.stat-icon-wrap svg {
  width: 28px;
  height: 28px;
  display: block;
}

.why-right {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: stretch;
  border-radius: 20px;
}

/* Fade masks top & bottom */
.scroll-fade-top,
.scroll-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 10;
  pointer-events: none;
}
.scroll-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #fefefe 0%, transparent 100%);
}
.scroll-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #fefefe 0%, transparent 100%);
}

/* Bloom behind columns */
.right-bloom {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.15) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: bloomPulse 5s ease-in-out infinite;
}

/* Each column */
.scroll-col {
  flex: 1;
  overflow: hidden;
  position: relative;
  border-radius: 14px;
}

/* The scrolling track */
.scroll-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Height = 8 images × (img height + gap). We define img height via scroll-img-wrap */
}

/* Each image wrapper */
.scroll-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  height: 160px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  border: 1.5px solid rgba(10, 110, 189, 0.12);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.scroll-img-wrap:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}
.scroll-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Animation: 8 images × (160px height + 10px gap) = 1360px total.
   We scroll exactly half (4 images = 680px) for a seamless infinite loop. ── */

/* Column 1 — scrolls UP */
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-680px);
  }
}
.scroll-up {
  animation: scrollUp 16s linear infinite;
}

/* Column 2 — scrolls DOWN (starts offset for visual variety) */
@keyframes scrollDown {
  0% {
    transform: translateY(-680px);
  }
  100% {
    transform: translateY(0);
  }
}
.scroll-down {
  animation: scrollDown 18s linear infinite;
}

/* Column 3 — scrolls UP at different speed */
@keyframes scrollUpAlt {
  0% {
    transform: translateY(-170px);
  }
  100% {
    transform: translateY(-850px);
  }
}
.scroll-up-alt {
  animation: scrollUpAlt 20s linear infinite;
}

/* Entrance animation for why-right */
.why-right {
  transition:
    opacity 0.9s var(--ease) 0.2s,
    transform 0.9s var(--ease) 0.2s;
}
.why-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive: reduce column heights */
@media (max-width: 1024px) {
  .why-right {
    height: 400px;
  }
  .scroll-img-wrap {
    height: 130px;
  }
  /* Recalculate: 8 × (130+10) = 1120, half = 560 */
  @keyframes scrollUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-560px);
    }
  }
  @keyframes scrollDown {
    0% {
      transform: translateY(-560px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes scrollUpAlt {
    0% {
      transform: translateY(-140px);
    }
    100% {
      transform: translateY(-700px);
    }
  }
}
@media (max-width: 640px) {
  .why-right {
    height: 300px;
    gap: 8px;
  }
  .scroll-img-wrap {
    height: 100px;
  }
  /* 8 × (100+8) = 864, half = 432 */
  @keyframes scrollUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-432px);
    }
  }
  @keyframes scrollDown {
    0% {
      transform: translateY(-432px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes scrollUpAlt {
    0% {
      transform: translateY(-108px);
    }
    100% {
      transform: translateY(-540px);
    }
  }
}

.stats-inner {
  display: grid !important;
}

/* Reduce head bottom margin so heading doesn't float alone */
.stats-head {
  margin-bottom: 60px;
}

:root {
  --blue: #0a6ebd;
  --blue-dk: #085299;
  --blue-lt: #ebf5ff;
  --orange: #f7941d;
  --navy: #0b1628;
  --white: #ffffff;
  --off: #f8fafc;
  --border: #e4edf7;
  --muted: #5a6a82;
  --text: #1e2d45;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}
/* -- Scroll Reveal -- */
.sr {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.sr.visible {
  opacity: 1;
  transform: none;
}
.d1 {
  transition-delay: 0.06s;
}
.d2 {
  transition-delay: 0.12s;
}
.d3 {
  transition-delay: 0.18s;
}
.d4 {
  transition-delay: 0.24s;
}
.d5 {
  transition-delay: 0.3s;
}
.d6 {
  transition-delay: 0.36s;
}

.ab-banner {
  position: relative;
  overflow: hidden;
  padding: 170px 50px;
  background: var(--navy);
  z-index: 1;
}

.ab-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(10 27 58 / 63%), rgb(10 27 58 / 69%)),
    url(<?php echo get_template_directory_uri(); ?>/assets/img/banner-img.jpg) top center / cover no-repeat;
  z-index: -1;
}
.ab-banner.module::before {
  background:
    linear-gradient(rgb(10 27 58 / 93%), rgb(10 27 58 / 58%)),
    url(<?php echo get_template_directory_uri(); ?>/assets/img/module-banner.png) top center / cover no-repeat;
}
.ab-banner.blog::before {
  background:
    linear-gradient(rgb(10 27 58 / 93%), rgb(10 27 58 / 58%)),
    url(<?php echo get_template_directory_uri(); ?>/assets/img/blog-banner.png) top center / cover no-repeat;
}
.ab-banner.why-csm::before {
  background:
    linear-gradient(rgb(10 27 58 / 93%), rgb(10 27 58 / 58%)),
    url(<?php echo get_template_directory_uri(); ?>/assets/img/why-csm-banner.png) center center / cover no-repeat;
}

/* dot-grid texture */
/* .ab-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
} */

/* rotating conic light — signature animation */
.ab-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(10, 110, 189, 0.22) 40deg,
    rgba(247, 148, 29, 0.12) 70deg,
    transparent 100deg
  );
  animation: rotateCone 16s linear infinite;
  pointer-events: none;
}
@keyframes rotateCone {
  to {
    transform: rotate(360deg);
  }
}

/* left blue-orange accent bar */
.ab-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue), var(--orange));
}

.ab-inner {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
}

.ab-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 12px;
}
.ab-breadcrumb a {
  color: rgb(255 255 255 / 93%);
  transition: color 0.2s;
}
.ab-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.ab-breadcrumb-sep {
  color: rgb(255 255 255 / 91%);
}
.ab-breadcrumb-cur {
  color: var(--orange);
}

.ab-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.022em;
  line-height: 1.1;
  clip-path: inset(0 100% 0 0);
  animation: revealTitle 0.75s var(--ease) 0.08s forwards;
}
@keyframes revealTitle {
  to {
    clip-path: inset(0 0% 0 0);
  }
}
.ab-title em {
  font-style: normal;
  background: linear-gradient(90deg, #5bc8ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ab-underline {
  margin-top: 14px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
  border-radius: 2px;
  animation: ruleGrow 0.85s var(--ease) 0.5s forwards;
}
@keyframes ruleGrow {
  to {
    width: 110px;
  }
}

.section-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.section-lbl::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.sec-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.sec-title span {
  color: var(--blue);
}

.intro-sec {
  padding: 88px 48px 80px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}
.intro-sec::before {
  content: "";
  position: absolute;
  left: -80px;
  top: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.intro-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 72px;
  align-items: start;
}

.intro-body {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.intro-body p {
  font-size: 15px;
  line-height: 1.82;
  color: var(--muted);
}
.intro-body p strong {
  color: var(--navy);
  font-weight: 600;
}

.intro-visual {
  position: relative;
  margin-top: 6px;
}

.intro-img-wrap {
  /* border-radius: 18px; */
  overflow: hidden;
  /* box-shadow: 0 20px 56px rgba(11, 22, 40, 0.15); */
}
.intro-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.intro-img-wrap:hover img {
  transform: scale(1.04);
}

/* corner accents */
.intro-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 52px;
  height: 52px;
  /* background: var(--orange); */
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  z-index: 2;
}
.intro-img-wrap::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 38px;
  height: 38px;
  /* background: var(--blue); */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  z-index: 2;
}

.intro-float {
  position: absolute;
  bottom: -16px;
  right: -14px;
  background: #fff;
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.intro-float-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--blue-lt);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.intro-float-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.intro-float-lbl {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.feat-sec {
  padding: 88px 48px;
  background: var(--off);
  position: relative;
  overflow: hidden;
}
.feat-sec::after {
  content: "";
  position: absolute;
  right: -80px;
  top: 80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.feat-head {
  max-width: 1160px;
  margin: 0 auto 48px;
}
.feat-sub {
  font-size: 15px;
  line-height: 1.78;
  color: var(--muted);
  /* max-width: 580px; */
  margin-top: 14px;
}

.feat-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Cards — left bar accent is the signature element */
.feat-card {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  padding: 26px 26px 26px 30px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s,
    border-color 0.3s;
  cursor: default;
}
.feat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 16px 0 0 16px;
  transition: width 0.3s var(--ease);
}
/* Unique colour per card — not numbered, because the content isn't a sequence */
.feat-card:nth-child(1)::before {
  background: linear-gradient(180deg, #0a6ebd, #3da8f5);
}
.feat-card:nth-child(2)::before {
  background: linear-gradient(180deg, #f7941d, #ffc066);
}
.feat-card:nth-child(3)::before {
  background: linear-gradient(180deg, #7c3aed, #b58ff7);
}
.feat-card:nth-child(4)::before {
  background: linear-gradient(180deg, #059669, #34d399);
}
.feat-card:nth-child(5)::before {
  background: linear-gradient(180deg, #dc2626, #fb7185);
}
.feat-card:nth-child(6)::before {
  background: linear-gradient(180deg, #0891b2, #67e8f9);
}
.feat-card:nth-child(7)::before {
  background: linear-gradient(180deg, #d97706, #fbbf24);
}

.feat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 110, 189, 0.025) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.feat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(10, 110, 189, 0.1);
  border-color: rgba(10, 110, 189, 0.2);
}
.feat-card:hover::after {
  opacity: 1;
}
.feat-card:nth-child(2):hover {
  box-shadow: 0 16px 44px rgba(247, 148, 29, 0.1);
  border-color: rgba(247, 148, 29, 0.22);
}
.feat-card:nth-child(3):hover {
  box-shadow: 0 16px 44px rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.22);
}
.feat-card:nth-child(4):hover {
  box-shadow: 0 16px 44px rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.22);
}
.feat-card:nth-child(5):hover {
  box-shadow: 0 16px 44px rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.22);
}
.feat-card:nth-child(6):hover {
  box-shadow: 0 16px 44px rgba(8, 145, 178, 0.1);
  border-color: rgba(8, 145, 178, 0.22);
}
.feat-card:nth-child(7):hover {
  box-shadow: 0 16px 44px rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.22);
}

.feat-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.feat-card:hover .feat-ico {
  transform: scale(1.1) rotate(-5deg);
}

.feat-card:nth-child(1) .feat-ico {
  background: linear-gradient(135deg, #e8f4ff, #d0e9ff);
}
.feat-card:nth-child(2) .feat-ico {
  background: linear-gradient(135deg, #fff7ed, #ffe8cc);
}
.feat-card:nth-child(3) .feat-ico {
  background: linear-gradient(135deg, #f3f0ff, #e8e0ff);
}
.feat-card:nth-child(4) .feat-ico {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.feat-card:nth-child(5) .feat-ico {
  background: linear-gradient(135deg, #fff1f2, #ffd7dc);
}
.feat-card:nth-child(6) .feat-ico {
  background: linear-gradient(135deg, #ecfeff, #cffafe);
}
.feat-card:nth-child(7) .feat-ico {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.feat-h {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.feat-p {
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--muted);
}

/* last card spans full width */
.feat-card.full {
  grid-column: 1/-1;
  max-width: calc(50% - 9px);
}

.quote-sec {
  padding: 50px 30px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 80% at 10% 50%,
      rgba(10, 110, 189, 0.22) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 70% at 90% 50%,
      rgba(247, 148, 29, 0.1) 0%,
      transparent 60%
    );
  pointer-events: none;
}
.quote-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.quote-inner {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.quote-mark {
  font-family: Georgia, serif;
  font-size: 88px;
  line-height: 0.75;
  color: var(--blue);
  opacity: 0.32;
  margin-bottom: -4px;
  display: block;
  user-select: none;
}
.quote-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}
.quote-rule {
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  border-radius: 2px;
  margin: 26px auto 0;
}

.partners-sec {
  padding: 88px 48px;
  background: #fff;
}
.partners-head {
  max-width: 1160px;
  margin: 0 auto 48px;
  text-align: center;
}

.partners-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.partner-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 26px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s,
    border-color 0.25s,
    background 0.25s;
  cursor: default;
}
/* bottom reveal line */
.partner-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10, 110, 189, 0.1);
  border-color: rgba(10, 110, 189, 0.2);
  background: #fff;
}
.partner-card:hover::before {
  transform: scaleX(1);
}

.partner-logo {
  max-width: 120px;
  max-height: 56px;
  width: auto;
  height: auto;
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.3s;
  object-fit: contain;
}
.partner-card:hover .partner-logo {
  filter: grayscale(0) opacity(1);
}
.partner-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  transition: color 0.3s;
}
.partner-card:hover .partner-name {
  color: var(--navy);
}

@media (max-width: 1024px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .intro-visual {
    max-width: 460px;
  }
  .feat-grid {
    grid-template-columns: 1fr;
  }
  .feat-card.full {
    grid-column: auto;
    max-width: 100%;
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .ab-banner,
  .intro-sec,
  .feat-sec,
  .quote-sec,
  .partners-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .intro-visual {
    max-width: 100%;
  }
  .ab-banner {
    padding: 44px 20px 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.quote-mark .fa-solid.fa-quote-left {
  color: #fff;
}

/* -- Scroll Reveal -- */
.sr {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.sr.visible {
  opacity: 1;
  transform: none;
}
.d1 {
  transition-delay: 0.06s;
}
.d2 {
  transition-delay: 0.12s;
}
.d3 {
  transition-delay: 0.18s;
}
.d4 {
  transition-delay: 0.24s;
}
.d5 {
  transition-delay: 0.3s;
}

.cu-banner {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: 52px 48px 48px;
}
.cu-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}
.cu-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(10, 110, 189, 0.22) 40deg,
    rgba(247, 148, 29, 0.12) 70deg,
    transparent 100deg
  );
  animation: rotateCone 16s linear infinite;
  pointer-events: none;
}
@keyframes rotateCone {
  to {
    transform: rotate(360deg);
  }
}

.cu-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue), var(--orange));
}

.cu-inner {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
}

.cu-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 12px;
}
.cu-breadcrumb a {
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.2s;
}
.cu-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.cu-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.18);
}
.cu-breadcrumb-cur {
  color: var(--orange);
}

.cu-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.022em;
  line-height: 1.1;
  clip-path: inset(0 100% 0 0);
  animation: revealTitle 0.75s var(--ease) 0.08s forwards;
}
@keyframes revealTitle {
  to {
    clip-path: inset(0 0% 0 0);
  }
}
.cu-title em {
  font-style: normal;
  background: linear-gradient(90deg, #5bc8ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cu-underline {
  margin-top: 14px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
  border-radius: 2px;
  animation: ruleGrow 0.85s var(--ease) 0.5s forwards;
}
@keyframes ruleGrow {
  to {
    width: 110px;
  }
}

.cu-section {
  --blue-soft: #3da8f5;
  --danger: #e0533d;
  --navy-2: #0f1e36;
  background: #f0f4f9;
  padding: 0;
  position: relative;
}

.cu-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 130px 48px;
}
.cu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}
.cu-hero-glow-a {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.3) 0%,
    transparent 68%
  );
  top: -200px;
  left: -140px;
  pointer-events: none;
  animation: heroGlowDrift 10s ease-in-out infinite;
}
.cu-hero-glow-b {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(247, 148, 29, 0.14) 0%,
    transparent 70%
  );
  bottom: -140px;
  right: -80px;
  pointer-events: none;
  animation: heroGlowDrift 13s ease-in-out infinite reverse;
}
@keyframes heroGlowDrift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 20px);
  }
}

.cu-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.cu-hero-text {
}
.cu-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(247, 148, 29, 0.12);
  border: 1px solid rgba(247, 148, 29, 0.3);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.cu-hero-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  animation: chipDotPulse 2s ease-out infinite;
}
@keyframes chipDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(247, 148, 29, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(247, 148, 29, 0);
  }
}
.cu-hero-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.cu-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, #5bc8ff, var(--blue-soft, #3da8f5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cu-hero-desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgb(255 255 255 / 58%);
  /* max-width: 800px; */
}

/* 3 quick-contact action buttons */
.cu-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.cu-hero-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgb(255 255 255 / 11%);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  min-width: 260px;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
  cursor: pointer;
}
.cu-hero-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(-4px);
}
.cu-hero-action-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: transform 0.25s;
}
.cu-hero-action:hover .cu-hero-action-ico {
  transform: scale(1.1) rotate(-5deg);
}
.cu-hero-action:nth-child(1) .cu-hero-action-ico {
  background: rgb(3 123 218);
}
.cu-hero-action:nth-child(2) .cu-hero-action-ico {
  background: rgb(247 148 29);
}
.cu-hero-action:nth-child(3) .cu-hero-action-ico {
  background: rgb(56 216 114);
}
.cu-hero-action-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}
.cu-hero-action-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.cu-body {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 28px;
  padding: 40px 48px 60px;
  align-items: start;
}

.cu-form-panel {
  background: #fff;
  border-radius: 22px;
  box-shadow:
    0 4px 6px rgba(11, 22, 40, 0.03),
    0 20px 50px rgba(11, 22, 40, 0.07);
  overflow: hidden;
}
.cu-form-panel-head {
  padding: 30px 36px 0;
  border-bottom: 1px solid #f0f4f9;
  padding-bottom: 24px;
  margin-bottom: 0;
}
.cu-form-panel-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.015em;
  /* margin-bottom: 4px; */
}
.cu-form-panel-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* the actual form lives inside cu-form-panel */
.cu-form-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 28px 36px 32px;
  box-shadow: none;
  position: static;
  overflow: visible;
}
.cu-form-card::before {
  display: none;
}

.cu-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 11px;
}
.cu-form-row.single {
  grid-template-columns: 1fr;
}

.cu-field {
  position: relative;
}

.cu-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 7px;
}
.cu-label-ico {
  width: 14px;
  height: 14px;
  color: var(--blue);
  display: inline-flex;
  flex-shrink: 0;
}
.cu-label-ico svg {
  width: 100%;
  height: 100%;
}
.cu-req {
  color: var(--danger, #e0533d);
  margin-left: 1px;
}

.cu-input,
.cu-select,
.cu-textarea {
  width: 100%;
  padding: 11px 15px;
  border: 1.5px solid #dde6f0;
  border-radius: 11px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #f8fafc;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  outline: none;
/*   line-height: 1.5; */
}
.cu-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: "Inter", sans-serif;
}
.cu-input::placeholder,
.cu-textarea::placeholder {
  color: #aebacb;
}
.cu-input:focus,
.cu-select:focus,
.cu-textarea:focus {
/*   border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 110, 189, 0.1); */
	  border: 2px solid var(--blue) !important;
  background: #fff;
  box-shadow: none !important;  
}

/* gradient underline sweep on focus */
.cu-field::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 15px;
  right: 15px;
  height: 2px;
/*   background: linear-gradient(90deg, var(--blue), var(--orange)); */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
  pointer-events: none;
  border-radius: 2px;
}
.cu-field:has(.cu-input:focus)::after,
.cu-field:has(.cu-textarea:focus)::after,
.cu-field:has(.cu-select:focus)::after {
  transform: scaleX(1);
}
.cu-field p {
/*     padding: 10px 0;*/
	    margin: 0 0 10px; 
}
.cu-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235A6A82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  cursor: pointer;
}

.cu-captcha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid #dde6f0;
  border-radius: 11px;
  padding: 12px 16px;
  margin-bottom: 22px;
}
.cu-captcha-box {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid #c3cedc;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.cu-captcha-box:hover {
  border-color: var(--blue);
}
.cu-captcha-label {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}
.cu-captcha-brand {
  margin-left: auto;
  font-size: 9.5px;
  color: #9aa8bc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cu-captcha-logo {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: conic-gradient(
    #4285f4 0% 25%,
    #34a853 25% 50%,
    #fbbc05 50% 75%,
    #ea4335 75%
  );
}

/* Submit — full width, premium gradient with shimmer */
.cu-submit {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* margin-left: 20px; */
    padding: 3px 8px;
    background: linear-gradient(135deg, var(--blue) 0%, #074f8a 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(10, 110, 189, 0.38);
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}
.cu-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.7s ease;
}
.cu-submit:hover::before {
  left: 160%;
}
.cu-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(10, 110, 189, 0.48);
}
.cu-submit:active {
  transform: translateY(0);
}
.cu-submit svg {
  transition: transform 0.22s;
  flex-shrink: 0;
}
.cu-submit:hover svg {
  transform: translateX(4px);
}
.cu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* MAP CARD */
.cu-map-card {
  background: var(--navy);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  padding: 24px 24px 20px;
  box-shadow: 0 8px 32px rgba(11, 22, 40, 0.2);
}
.cu-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  pointer-events: none;
}
.cu-map-card-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.32) 0%,
    transparent 70%
  );
  top: -100px;
  right: -80px;
  pointer-events: none;
  animation: heroGlowDrift 9s ease-in-out infinite;
}
.cu-map-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cu-map-label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* SVG map container */
.cu-map {
  position: relative;
  height: 170px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  z-index: 2;
}
.cu-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cu-map-land {
  fill: rgba(255, 255, 255, 0.07);
}

/* animated arcs */
.cu-map-arc {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  animation: arcFlow 2.5s linear infinite;
}
.cu-map-arc.a1 {
  stroke: rgba(91, 200, 255, 0.55);
}
.cu-map-arc.a2 {
  stroke: rgba(74, 222, 128, 0.4);
  animation-delay: -1.2s;
}
@keyframes arcFlow {
  to {
    stroke-dashoffset: -20;
  }
}

/* location pins */
.cu-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}
.cu-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.cu-pin-dot.p-blue {
  background: #3da8f5;
  animation: pinBeat 2.2s ease-out infinite;
}
.cu-pin-dot.p-orange {
  background: var(--orange);
  animation: pinBeat 2.2s ease-out infinite 0.7s;
}
.cu-pin-dot.p-green {
  background: #4ade80;
  animation: pinBeat 2.2s ease-out infinite 1.4s;
}
@keyframes pinBeat {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  60% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.cu-pin-tip {
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--navy);
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition:
    opacity 0.22s,
    transform 0.22s;
  pointer-events: none;
}
.cu-pin:hover .cu-pin-tip {
  opacity: 1;
  transform: none;
}

/* map location legend row */
.cu-map-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}
.cu-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.cu-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* OFFICE ACCORDION CARDS */
.cu-offices-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cu-office {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #dde6f0;
  overflow: hidden;
  transition:
    box-shadow 0.28s,
    border-color 0.28s,
    transform 0.28s var(--ease);
}
.cu-office:hover {
  box-shadow: 0 8px 28px rgba(10, 110, 189, 0.1);
  border-color: rgba(10, 110, 189, 0.22);
  transform: translateY(-2px);
}

.cu-office-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}
.cu-office-flag {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.cu-office:hover .cu-office-flag {
  transform: scale(1.08) rotate(-4deg);
}
.cu-office:nth-child(1) .cu-office-flag {
  background: linear-gradient(135deg, #e8f4ff, #d0e9ff);
}
.cu-office:nth-child(2) .cu-office-flag {
  background: linear-gradient(135deg, #fff7ed, #ffe8cc);
}
.cu-office:nth-child(3) .cu-office-flag {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.cu-office-name {
  /* font-family: "Plus Jakarta Sans", sans-serif; */
  font-size: 15px;
  font-weight: 700;
  /* letter-spacing: 0.04em; */
  /* text-transform: uppercase; */
  color: var(--navy);
  flex: 1;
}
.cu-office-chevron {
  width: 20px;
  height: 20px;
  color: #9aa8bc;
  flex-shrink: 0;
  transition:
    transform 0.28s var(--ease),
    color 0.2s;
}
.cu-office-chevron svg {
  width: 100%;
  height: 100%;
}
.cu-office.open .cu-office-chevron {
  transform: rotate(180deg);
  color: var(--blue);
}

/* colored top bar by index */
.cu-office::before {
  content: "";
  display: block;
  height: 3px;
}
.cu-office:nth-child(1)::before {
  background: linear-gradient(90deg, var(--blue), #3da8f5);
}
.cu-office:nth-child(2)::before {
  background: linear-gradient(90deg, var(--orange), #ffc066);
}
.cu-office:nth-child(3)::before {
  background: linear-gradient(90deg, #059669, #34d399);
}

.cu-office-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--ease);
}
.cu-office.open .cu-office-body {
  max-height: 240px;
}

.cu-office-content {
  padding: 0 18px 18px;
  border-top: 1px solid #f0f4f9;
}
.cu-office-company {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 3px;
}
.cu-office-addr {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 10px;
}
.cu-office-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 5px;
}
.cu-office-row:last-child {
  margin-bottom: 0;
}
.cu-office-ico {
  width: 13px;
  height: 13px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}
.cu-office-ico svg {
  width: 100%;
  height: 100%;
}
.cu-office-row a {
  color: var(--blue);
  font-weight: 500;
  transition: color 0.2s;
}
.cu-office-row a:hover {
  color: var(--orange);
}

.cu-offices {
  display: none;
}

@media (max-width: 1100px) {
  .cu-hero {
    padding: 44px 32px 48px;
  }
  .cu-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .cu-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cu-hero-action {
    min-width: auto;
    flex: 1 1 200px;
  }
  .cu-body {
    grid-template-columns: 1fr;
    padding: 32px 32px 48px;
  }
}
@media (max-width: 700px) {
  .cu-hero {
    padding: 36px 20px 40px;
  }
  .cu-hero-actions {
    flex-direction: column;
  }
  .cu-body {
    padding: 24px 16px 40px;
    gap: 20px;
  }
  .cu-form-card {
    padding: 20px 18px 24px;
  }
  .cu-form-panel-head {
    padding: 22px 18px 18px;
  }
  .cu-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cu-captcha {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.cu-hero-action-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  flex-shrink: 0;
}

.cu-hero-action-ico i {
  line-height: 1;
}

/* ── Intro strip ── */
.mod-intro {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 52px 48px 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 100px;
}
.mod-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  pointer-events: none;
}
.mod-intro-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 110, 189, 0.28) 0%,
    transparent 70%
  );
  top: -180px;
  right: -100px;
  pointer-events: none;
  animation: modGlowDrift 12s ease-in-out infinite;
}
.mod-intro-glow-2 {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(247, 148, 29, 0.12) 0%,
    transparent 70%
  );
  bottom: -120px;
  left: -60px;
  pointer-events: none;
  animation: modGlowDrift 15s ease-in-out infinite reverse;
}
@keyframes modGlowDrift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-24px, 18px);
  }
}
.mod-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.mod-intro-left {
}
.mod-intro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(247, 148, 29, 0.12);
  border: 1px solid rgba(247, 148, 29, 0.28);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.mod-intro-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  animation: modDotPulse 2.2s ease-out infinite;
}
@keyframes modDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(247, 148, 29, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(247, 148, 29, 0);
  }
}
.mod-intro-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin-bottom: 14px;
}
.mod-intro-title em {
  font-style: normal;
  background: linear-gradient(90deg, #5bc8ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mod-intro-desc {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.52);
  /* max-width: 580px; */
}

/* stats panel */
.mod-intro-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  flex-shrink: 0;
}
.mod-stat {
}
.mod-stat-n {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.mod-stat-n sup {
  font-size: 0.55em;
  color: var(--orange);
}
.mod-stat-l {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ── Main body ── */
.mod-body {
  background: var(--off);
  padding: 48px 48px 80px;
}
.mod-body-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Filter tabs ── */
.mod-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.mod-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.22s,
    background 0.22s,
    color 0.22s,
    transform 0.2s;
}
.mod-filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.mod-filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.mod-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.mod-filter-btn:not(.active) .mod-filter-count {
  background: var(--off);
  color: var(--muted);
}
.mod-results-label {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Category group heading ── */
.mod-group {
  margin-bottom: 48px;
}
.mod-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.mod-group-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mod-group-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mod-group-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Cards grid ── */
.mod-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mod-card {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  overflow: hidden; /* keeps the pseudo-fill inside rounded corners */
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate; /* clean stacking context — content always on top */
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s,
    border-color 0.28s;
  cursor: default;
}

/* ── colour fill overlay (starts invisible, shows on hover) ── */
.mod-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}
/* ── thin top accent bar (always visible) ── */
.mod-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
}

.mod-card:hover {
  transform: translateY(-5px);
}
.mod-card:hover::before {
  opacity: 1;
}

/* ── card inner — always above overlay ── */
.mod-card-inner {
  position: relative;
  z-index: 3;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* icon + category top row */
.mod-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* icon box */
.mod-card-ico {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    transform 0.28s var(--ease),
    background 0.28s;
}
.mod-card-ico i {
  font-size: 22px;
  line-height: 1;
  display: block;
  transition: color 0.28s;
}
.mod-card:hover .mod-card-ico {
  transform: scale(1.08) rotate(-5deg);
  background: rgba(255, 255, 255, 0.2) !important;
}
.mod-card:hover .mod-card-ico i {
  color: #fff !important;
}

/* category pill */
.mod-card-cat {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.28s,
    color 0.28s;
}
.mod-card:hover .mod-card-cat {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* module name */
.mod-card-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.28;
  transition: color 0.28s;
}
.mod-card:hover .mod-card-name {
  color: #fff;
}

/* description */
.mod-card-desc {
  font-size: 13px;
  line-height: 1.72;
  color: var(--muted);
  flex: 1;
  transition: color 0.28s;
}
.mod-card:hover .mod-card-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Read More button ── */
.mod-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  width: fit-content;
  margin-top: 4px;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.2s;
  text-decoration: none;
}
.mod-read-more i {
  font-size: 11px;
  transition: transform 0.2s;
}
.mod-read-more:hover i {
  transform: translateX(3px);
}

/* default (rest) state per category */
.mod-card[data-cat="academics"] .mod-read-more {
  color: #0a6ebd;
  border-color: rgba(10, 110, 189, 0.3);
  background: transparent;
}
.mod-card[data-cat="finance"] .mod-read-more {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
  background: transparent;
}
.mod-card[data-cat="people"] .mod-read-more {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.3);
  background: transparent;
}
.mod-card[data-cat="comms"] .mod-read-more {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.3);
  background: transparent;
}

/* on hover the button goes white */
.mod-card:hover .mod-read-more {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

/* ── Per-category colour themes ── */

/* academics: blue */
.mod-card[data-cat="academics"]::before {
  background: linear-gradient(135deg, #0a6ebd, #074f8a);
}
.mod-card[data-cat="academics"]::after {
  background: linear-gradient(90deg, #0a6ebd, #3da8f5);
}
.mod-card[data-cat="academics"]:hover {
  box-shadow: 0 18px 50px rgba(10, 110, 189, 0.3);
  border-color: #0a6ebd;
  background: #0a6ebd;
}
.mod-card[data-cat="academics"] .mod-card-ico {
  background: #ebf5ff;
}
.mod-card[data-cat="academics"] .mod-card-ico i {
  color: #0a6ebd;
}
.mod-card[data-cat="academics"] .mod-card-cat {
  background: #ebf5ff;
  color: #085299;
}

/* finance: amber */
.mod-card[data-cat="finance"]::before {
  background: linear-gradient(135deg, #d97706, #f7941d);
}
.mod-card[data-cat="finance"]::after {
  background: linear-gradient(90deg, #f7941d, #ffc066);
}
.mod-card[data-cat="finance"]:hover {
  box-shadow: 0 18px 50px rgba(247, 148, 29, 0.3);
  border-color: #f7941d;
  background: #f7941d;
}
.mod-card[data-cat="finance"] .mod-card-ico {
  background: #fff7ed;
}
.mod-card[data-cat="finance"] .mod-card-ico i {
  color: #d97706;
}
.mod-card[data-cat="finance"] .mod-card-cat {
  background: #fff7ed;
  color: #92400e;
}

/* people: green */
.mod-card[data-cat="people"]::before {
  background: linear-gradient(135deg, #047857, #059669);
}
.mod-card[data-cat="people"]::after {
  background: linear-gradient(90deg, #059669, #34d399);
}
.mod-card[data-cat="people"]:hover {
  box-shadow: 0 18px 50px rgba(5, 150, 105, 0.3);
  border-color: #059669;
  background: #059669;
}
.mod-card[data-cat="people"] .mod-card-ico {
  background: #ecfdf5;
}
.mod-card[data-cat="people"] .mod-card-ico i {
  color: #059669;
}
.mod-card[data-cat="people"] .mod-card-cat {
  background: #ecfdf5;
  color: #065f46;
}

/* comms: purple */
.mod-card[data-cat="comms"]::before {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}
.mod-card[data-cat="comms"]::after {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.mod-card[data-cat="comms"]:hover {
  box-shadow: 0 18px 50px rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  background: #7c3aed;
}
.mod-card[data-cat="comms"] .mod-card-ico {
  background: #f3f0ff;
}
.mod-card[data-cat="comms"] .mod-card-ico i {
  color: #7c3aed;
}
.mod-card[data-cat="comms"] .mod-card-cat {
  background: #f3f0ff;
  color: #4c1d95;
}

/* hidden state for filtering */
.mod-card.mod-hidden {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mod-intro-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mod-intro-stats {
    flex-direction: row;
    padding: 20px 24px;
    gap: 28px;
  }
  .mod-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .mod-intro,
  .mod-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mod-intro {
    padding-top: 40px;
    padding-bottom: 44px;
  }
  .mod-body {
    padding-top: 32px;
  }
  .mod-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mod-intro-stats {
    flex-wrap: wrap;
  }
  .mod-filters {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/*=========================
SECTION ANIMATIONS
=========================*/

.why-features {
  position: relative;
  overflow: hidden;
}

.feature-row {
  opacity: 0;
  transform: translateY(80px);
  animation: fadeUp 0.8s ease forwards;
}

.feature-row:nth-child(2) {
  animation-delay: 0.15s;
}

.feature-row:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-row:nth-child(4) {
  animation-delay: 0.45s;
}

.feature-row:nth-child(5) {
  animation-delay: 0.6s;
}

.feature-row:nth-child(6) {
  animation-delay: 0.75s;
}

@keyframes fadeUp {
  0% {
    opacity: 0;

    transform: translateY(70px);
  }

  100% {
    opacity: 1;

    transform: translateY(0);
  }
}

/*=========================
CARD HOVER
=========================*/

.feature-image > div {
  transition: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.feature-image:hover > div {
  transform: translateY(-12px) scale(1.02);

  box-shadow: 0 35px 80px rgba(44, 92, 255, 0.18);
}

/*=========================
IMAGE FLOATING
=========================*/

.mockup-card,
.profile-card,
.alerts-card,
.parent-dashboard,
.payment-card,
.schedule-card {
  animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

/*=========================
FEATURE LIST
=========================*/

.feature-list li {
  transition: 0.35s;

  cursor: default;
}

.feature-list li:hover {
  padding-left: 12px;

  color: #2c5cff;
}

/*=========================
BUTTONS / BADGES
=========================*/

.floating-badge,
.parent-item,
.report-badge {
  transition: 0.35s;
}

.floating-badge:hover,
.parent-item:hover,
.report-badge:hover {
  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(44, 92, 255, 0.18);
}

/*=========================
NUMBER
=========================*/

.feature-number {
  transition: 0.35s;
}

.feature-row:hover .feature-number {
  transform: scale(1.1);

  color: #2c5cff;
}

/*=========================
HEADING
=========================*/

.feature-content h3 {
  transition: 0.35s;
}

.feature-row:hover h3 {
  color: #2c5cff;
}

/*=========================
MOCKUP GRAPH
=========================*/

.graph {
  position: relative;

  overflow: hidden;
}

.graph::after {
  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );

  animation: shine 3s linear infinite;
}

@keyframes shine {
  100% {
    left: 120%;
  }
}

/*=========================
BACKGROUND BLOBS
=========================*/

.why-features::before {
  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  background: #3b82f6;

  opacity: 0.08;

  border-radius: 50%;

  filter: blur(120px);

  top: -120px;

  left: -120px;

  animation: blob1 12s linear infinite alternate;
}

.why-features::after {
  content: "";

  position: absolute;

  width: 450px;

  height: 450px;

  background: #7c3aed;

  opacity: 0.08;

  border-radius: 50%;

  filter: blur(120px);

  right: -120px;

  bottom: -150px;

  animation: blob2 12s linear infinite alternate;
}

@keyframes blob1 {
  100% {
    transform: translate(60px, 80px);
  }
}

@keyframes blob2 {
  100% {
    transform: translate(-60px, -70px);
  }
}

/*=========================
SCROLLBAR
=========================*/

html,
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge / IE */
}

::-webkit-scrollbar {
  /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
  display: none;
}

/*=========================
RESPONSIVE 1200
=========================*/

@media (max-width: 1200px) {
  .feature-row {
    gap: 60px;
  }

  .feature-content h3 {
    font-size: 34px;
  }
}

/*=========================
RESPONSIVE 992
=========================*/

@media (max-width: 992px) {
  .feature-row,
  .feature-row.reverse {
    display: flex;

    flex-direction: column;
  }

  .feature-image,
  .feature-content {
    width: 100%;
  }

  .feature-content {
    text-align: center;
  }

  .feature-list {
    display: inline-block;

    text-align: left;

    margin-top: 20px;
  }

  .mockup-card,
  .profile-card,
  .alerts-card,
  .parent-dashboard,
  .payment-card,
  .schedule-card {
    max-width: 600px;

    margin: auto;
  }
}

/*=========================
RESPONSIVE 768
=========================*/

@media (max-width: 768px) {
  .why-heading h2 {
    font-size: 34px;

    line-height: 1.2;
  }

  .why-heading p {
    font-size: 16px;
  }

  .feature-row {
    padding: 60px 0;

    gap: 40px;
  }

  .feature-content h3 {
    font-size: 28px;
  }

  .feature-number {
    font-size: 70px;
  }

  .feature-list li {
    font-size: 15px;
  }
}

/*=========================
RESPONSIVE 576
=========================*/

@media (max-width: 576px) {
  .why-features {
    padding: 70px 20px;
  }

  .why-heading {
    margin-bottom: 50px;
  }

  .why-heading h2 {
    font-size: 28px;
  }

  .feature-content p {
    font-size: 15px;

    line-height: 1.8;
  }

  .feature-number {
    font-size: 58px;
  }

  .mockup-card,
  .profile-card,
  .alerts-card,
  .parent-dashboard,
  .payment-card,
  .schedule-card {
    padding: 24px;

    border-radius: 22px;
  }
}

/*=========================
REDUCED MOTION
=========================*/

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto;
  }
}
/*====================================================
WHY CSM - GLOBAL STYLES
====================================================*/

:root {
  --primary: #2563eb;
  --secondary: #7c3aed;
  --accent: #06b6d4;

  --dark: #111827;
  --text: #4b5563;
  --light: #f8fafc;

  --white: #ffffff;

  --border: #e5e7eb;

  --radius: 24px;

  --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);

  --shadow-hover: 0 35px 80px rgba(37, 99, 235, 0.18);

  --transition: 0.4s ease;
}

/*========================================*/

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;

  font-size: 16px;

  line-height: 1.7;

  color: var(--text);

  background: #fff;

  overflow-x: hidden;
}

img {
  max-width: 100%;

  display: block;
}

a {
  text-decoration: none;

  color: inherit;
}

ul {
  list-style: none;

  padding: 0;

  margin: 0;
}

/*========================================
SECTION
========================================*/

.why-features {
  position: relative;

  padding: 120px 0;

  background:
    radial-gradient(circle at top left, #eef4ff 0%, transparent 35%),
    radial-gradient(circle at bottom right, #f5efff 0%, transparent 35%), #fff;

  overflow: hidden;
}

.container {
  width: min(1280px, 92%);

  margin: auto;
}

/*========================================
SECTION HEADING
========================================*/

.why-heading {
  max-width: 780px;

  margin: auto;

  text-align: center;

  margin-bottom: 90px;
}

.section-tag {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 20px;

  border-radius: 100px;

  background: #eef4ff;

  color: var(--primary);

  font-weight: 600;

  font-size: 14px;

  letter-spacing: 1px;

  margin-bottom: 20px;
}

.why-heading h2 {
  font-size: 56px;

  line-height: 1.15;

  font-weight: 800;

  color: var(--dark);

  margin-bottom: 20px;
}

.why-heading p {
  font-size: 18px;

  line-height: 1.9;

  color: #667085;
}

/*========================================
FEATURE ROW
========================================*/

.feature-row {
  display: block;
  margin-bottom: 0;
  position: relative;
}

.feature-row:last-child {
  margin-bottom: 0;
}

/* reverse class no longer needed — keep for compatibility but neutralise */
.feature-row.reverse {
  direction: ltr;
}

/*========================================
CONTENT
========================================*/

.feature-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.feature-number {
  display: block;

  font-size: 88px;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 25px;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  opacity: 0.18;
}

.feature-content h3 {
  font-size: 40px;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 22px;

  line-height: 1.2;
}

.feature-content p {
  font-size: 17px;

  line-height: 1.9;

  color: #667085;

  margin-bottom: 35px;
}

/*========================================
FEATURE LIST
========================================*/

.feature-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(180px, 1fr));

  gap: 18px;
}

.feature-list li {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 16px;

  font-weight: 500;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);

  transition: var(--transition);
}

.feature-list li::before {
  content: "";

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

  flex-shrink: 0;
}

.feature-list li:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow-hover);

  border-color: #dbeafe;
}

/* feature-image removed per design update */
.feature-image {
  display: none;
}

/*========================================
COMMON CARD
========================================*/

.mockup-card,
.profile-card,
.alerts-card,
.parent-dashboard,
.payment-card,
.schedule-card {
  position: relative;

  width: 100%;

  max-width: 520px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.7);

  border-radius: 28px;

  padding: 32px;

  box-shadow: var(--shadow);

  transition: var(--transition);

  overflow: hidden;
}

.mockup-card:hover,
.profile-card:hover,
.alerts-card:hover,
.parent-dashboard:hover,
.payment-card:hover,
.schedule-card:hover {
  transform: translateY(-10px);

  box-shadow: var(--shadow-hover);
}

/*========================================
BACKGROUND DECORATION
========================================*/

.why-features::before {
  content: "";

  position: absolute;

  width: 520px;

  height: 520px;

  border-radius: 50%;

  background: #2563eb;

  filter: blur(150px);

  opacity: 0.08;

  top: -200px;

  left: -180px;
}

.why-features::after {
  content: "";

  position: absolute;

  width: 520px;

  height: 520px;

  border-radius: 50%;

  background: #7c3aed;

  filter: blur(150px);

  opacity: 0.08;

  bottom: -220px;

  right: -180px;
}
/*========================================
 DASHBOARD MOCKUP
========================================*/

.mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.mockup-header span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d1d5db;
}

.mockup-header span:nth-child(1) {
  background: #ff5f57;
}
.mockup-header span:nth-child(2) {
  background: #febc2e;
}
.mockup-header span:nth-child(3) {
  background: #28c840;
}

.mockup-search {
  height: 48px;
  border-radius: 14px;
  background: #f3f4f6;
  margin-bottom: 22px;
}

.mockup-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mockup-list div {
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(90deg, #eef2ff, #f8fafc);
}

.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
  font-size: 14px;
  font-weight: 600;
}

.badge-one {
  right: -25px;
  top: 70px;
}

.badge-two {
  left: -30px;
  bottom: 40px;
}

.floating-badge i {
  color: var(--primary);
}

/*========================================
 PROFILE CARD
========================================*/

.profile-card {
  text-align: center;
}

.avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.profile-card h4 {
  font-size: 22px;
  color: var(--dark);
  margin-bottom: 22px;
}

.profile-line {
  height: 14px;
  border-radius: 10px;
  background: #edf2f7;
  margin-bottom: 15px;
}

.profile-line.short {
  width: 70%;
  margin: auto;
  margin-bottom: 25px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.profile-grid div {
  height: 85px;
  border-radius: 18px;
  background: #f5f7fb;
}

/*========================================
 ALERTS CARD
========================================*/

.alerts-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.alert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.alert.success {
  border-left: 5px solid #22c55e;
}

.alert.info {
  border-left: 5px solid #3b82f6;
}

.alert.warning {
  border-left: 5px solid #f59e0b;
}

.alert.purple {
  border-left: 5px solid #7c3aed;
}

.alert i {
  font-size: 18px;
}

/*========================================
 PARENT DASHBOARD
========================================*/

.parent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 30px;
}

.parent-header i {
  color: var(--primary);
}

.parent-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  border-radius: 16px;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  font-weight: 500;
}

.parent-item i {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: var(--primary);
}

/*========================================
 PAYMENT CARD
========================================*/

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.payment-header h4 {
  font-size: 24px;
  color: var(--dark);
}

.payment-header span {
  width: 55px;
  height: 55px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 22px;
}

.payment-progress {
  height: 12px;
  border-radius: 20px;
  background: #edf2f7;
  overflow: hidden;
  margin-bottom: 30px;
}

.progress-bar {
  width: 82%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.payment-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}

.payment-stats div {
  background: #f8fafc;
  padding: 20px;
  border-radius: 18px;
}

.payment-stats strong {
  display: block;
  margin-bottom: 8px;
  color: var(--dark);
}

.payment-stats span {
  color: var(--primary);
  font-weight: 700;
}

.pay-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.pay-btn i {
  margin-right: 8px;
}

/*========================================
 TIMETABLE CARD
========================================*/

.schedule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 30px;
}

.schedule-header i {
  color: var(--primary);
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}

.schedule-grid div {
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  font-size: 14px;
  font-weight: 600;
}

.schedule-grid .active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.report-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 600;
}

.report-badge i {
  font-size: 18px;
}
/*==========================================================
 PART 3
 Hover Effects • Floating Animation • Responsive • Polish
==========================================================*/

/*==================================
SMOOTH TRANSITIONS
==================================*/

.feature-row,
.feature-content,
.feature-image,
.feature-list li,
.mockup-card,
.profile-card,
.alerts-card,
.parent-dashboard,
.payment-card,
.schedule-card,
.floating-badge,
.parent-item,
.alert,
.pay-btn,
.report-badge {
  transition: all 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*==================================
SECTION SPACING
==================================*/

.feature-row {
  position: relative;
  padding: 70px 0;
}

.feature-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 23, 42, 0.08),
    transparent
  );
}

.feature-row:last-child::after {
  display: none;
}

/*==================================
CONTENT ANIMATION
==================================*/

.feature-content > * {
  animation: fadeUp 0.8s ease both;
}

.feature-content h3 {
  animation-delay: 0.1s;
}

.feature-content p {
  animation-delay: 0.2s;
}

.feature-list {
  animation-delay: 0.3s;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==================================
CARD HOVER
==================================*/

.feature-row:hover .mockup-card,
.feature-row:hover .profile-card,
.feature-row:hover .alerts-card,
.feature-row:hover .payment-card,
.feature-row:hover .schedule-card,
.feature-row:hover .parent-dashboard {
  transform: translateY(-12px) scale(1.02);

  box-shadow: 0 45px 90px rgba(37, 99, 235, 0.18);
}

/*==================================
IMAGE ZOOM
==================================*/

.feature-image {
  overflow: visible;
}

.feature-image::before {
  content: "";

  position: absolute;

  width: 380px;

  height: 380px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);

  z-index: -1;

  animation: pulse 6s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);

    opacity: 0.4;
  }

  50% {
    transform: scale(1.1);

    opacity: 0.7;
  }

  100% {
    transform: scale(0.9);

    opacity: 0.4;
  }
}

/*==================================
FLOATING EFFECT
==================================*/

.mockup-card,
.profile-card,
.alerts-card,
.parent-dashboard,
.payment-card,
.schedule-card {
  animation: floating 7s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/*==================================
NUMBER EFFECT
==================================*/

.feature-number {
  transition: 0.4s;
}

.feature-row:hover .feature-number {
  opacity: 0.35;

  transform: scale(1.08);
}

/*==================================
HEADING
==================================*/

.feature-row:hover h3 {
  color: var(--primary);
}

/*==================================
LIST ITEMS
==================================*/

.feature-list li:hover {
  background: linear-gradient(135deg, #f8fbff, #eef4ff);

  border-color: #c7d8ff;

  transform: translateY(-6px);
}

/*==================================
BUTTON
==================================*/

.pay-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 18px 35px rgba(37, 99, 235, 0.25);
}

/*==================================
BADGES
==================================*/

.floating-badge:hover,
.parent-item:hover,
.alert:hover,
.report-badge:hover {
  transform: translateY(-5px);
}

/*==================================
PROFILE BOXES
==================================*/

.profile-grid div:hover {
  background: #eef4ff;

  transform: translateY(-4px);
}

/*==================================
PAYMENT STATS
==================================*/

.payment-stats div:hover {
  background: #eef4ff;
}

/*==================================
TIMETABLE
==================================*/

.schedule-grid div:hover {
  background: #eef4ff;
}

.schedule-grid .active {
  color: #fff;
}

/*==================================
SHINE EFFECT
==================================*/

.mockup-card::before,
.profile-card::before,
.payment-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 70%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );

  transform: skewX(-25deg);

  animation: shine 5s infinite;
}

@keyframes shine {
  100% {
    left: 150%;
  }
}

/*==================================
SCROLL REVEAL SUPPORT
==================================*/

.reveal {
  opacity: 0;

  transform: translateY(80px);

  transition: 1s ease;
}

.reveal.active {
  opacity: 1;

  transform: none;
}

/*==================================
BACKGROUND BLOBS
==================================*/

.why-features::before {
  animation: blobOne 14s ease-in-out infinite alternate;
}

.why-features::after {
  animation: blobTwo 16s ease-in-out infinite alternate;
}

@keyframes blobOne {
  100% {
    transform: translate(80px, -40px) scale(1.2);
  }
}

@keyframes blobTwo {
  100% {
    transform: translate(-80px, 60px) scale(0.9);
  }
}

/*==================================
RESPONSIVE
==================================*/

@media (max-width: 1200px) {
  .feature-row {
    gap: 60px;
  }

  .feature-content h3 {
    font-size: 34px;
  }
}

/*==========================*/

@media (max-width: 992px) {
  .feature-row,
  .feature-row.reverse {
    display: flex;

    flex-direction: column;

    gap: 50px;
  }

  .feature-image,
  .feature-content {
    width: 100%;
  }

  .feature-content {
    text-align: center;
  }

  .feature-list {
    grid-template-columns: 1fr;

    max-width: 450px;

    margin: auto;
  }

  .mockup-card,
  .profile-card,
  .payment-card,
  .schedule-card,
  .parent-dashboard,
  .alerts-card {
    max-width: 650px;

    margin: auto;
  }

  .feature-number {
    font-size: 72px;
  }
}

/*==========================*/

@media (max-width: 768px) {
  .why-features {
    padding: 80px 0;
  }

  .why-heading {
    margin-bottom: 60px;
  }

  .why-heading h2 {
    font-size: 36px;
  }

  .feature-content h3 {
    font-size: 30px;
  }

  .feature-content p {
    font-size: 16px;
  }

  .feature-number {
    font-size: 60px;
  }

  .feature-row {
    padding: 50px 0;
  }
}

/*==========================*/

@media (max-width: 576px) {
  .container {
    width: 100%;
  }

  .why-heading h2 {
    font-size: 28px;
  }

  .section-tag {
    font-size: 13px;
  }

  .feature-content h3 {
    font-size: 24px;
  }

  .feature-content p {
    font-size: 15px;
  }

  .mockup-card,
  .profile-card,
  .alerts-card,
  .parent-dashboard,
  .payment-card,
  .schedule-card {
    padding: 22px;

    border-radius: 22px;
  }

  .feature-list li {
    padding: 14px;

    font-size: 14px;
  }

  .pay-btn {
    font-size: 15px;

    padding: 15px;
  }
}

/*==================================
REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto;
  }
}

.wf-section {
  background:
    radial-gradient(circle at top left, #eef4ff 0%, transparent 40%),
    radial-gradient(circle at bottom right, #f5efff 0%, transparent 40%), #fff;
  padding: 72px 48px 80px;
  position: relative;
  overflow: hidden;
}

/* section heading */
.wf-heading {
  max-width: 1150px;
  margin: 0 auto 30px;
  /* text-align: center; */
}
.wf-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 100px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.wf-title {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.wf-desc {
  font-size: 15px;
  line-height: 1.78;
  color: #667085;
}

/* 2-column card grid */
.wf-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* individual card */
.wf-card {
  background: #fff;
  border: 1.5px solid #e4edf7;
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s,
    border-color 0.28s;
}

/* gradient top accent bar */
.wf-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #44b3e7, #00aeee);
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity 0.28s;
}
.wf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.1);
  border-color: #c7d8f8;
}
.wf-card:hover::before {
  opacity: 1;
}

/* big ghost number — decorative, left column */
.wf-card-num {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  width: 70px;
  background: linear-gradient(135deg, #2563eb, #34bff2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* opacity: 0.18; */
  transition: opacity 0.28s;
  user-select: none;
  padding-top: 4px;
}
.wf-card:hover .wf-card-num {
  opacity: 0.35;
}

/* content column */
.wf-card-body {
  flex: 1;
  min-width: 0;
}

.wf-card-title {
  /* font-family: "Plus Jakarta Sans", sans-serif; */
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color 0.25s;
}
.wf-card:hover .wf-card-title {
  color: #1698d4;
}

.wf-card-desc {
  font-size: 13.5px;
  line-height: 1.72;
  color: #667085;
  margin-bottom: 18px;
}

/* icon chips — replace bullet list */
.wf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f0f5ff;
  border: 1px solid #dbeafe;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #4b4d51;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.wf-chip i {
  font-size: 12px;
  line-height: 1;
  color: #002d68;
}
.wf-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

/* responsive */
@media (max-width: 900px) {
  .wf-grid {
    grid-template-columns: 1fr;
  }
  .wf-section {
    padding: 56px 24px 64px;
  }
}
@media (max-width: 600px) {
  .wf-section {
    padding: 44px 16px 52px;
  }
  .wf-card {
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
  }
  .wf-card-num {
    font-size: 36px;
    width: auto;
  }
  .wf-title {
    font-size: 22px;
  }
}

.c-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px; /* centre horizontally, gap below */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

.cu-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr; /* compact fixed left, form fills rest */
  gap: 24px;
  padding: 44px 48px 48px;
  align-items: stretch;
}

/* ── Left: single-column stat boxes ── */
.cu-stats-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cu-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  flex: 1;
  height: 100%;
}

/* Premium dark stat cards with unique per-card accent */
.cu-stat-box {
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 25px;
  background: #fff;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s;
  cursor: default;
}

/* unique colour per card */
.cu-stat-box:nth-child(1) {
  /* background: linear-gradient(135deg, #0b1628 0%, #0a3a6b 100%); */
  border: 1px solid rgba(10, 110, 189, 0.35);
}
.cu-stat-box:nth-child(2) {
  /* background: linear-gradient(135deg, #0b1628 0%, #0a5a3a 100%); */
  border: 1px solid rgba(5, 150, 105, 0.35);
}
.cu-stat-box:nth-child(3) {
  /* background: linear-gradient(135deg, #0b1628 0%, #3b1a6b 100%); */
  border: 1px solid rgba(124, 58, 237, 0.35);
}
.cu-stat-box:nth-child(4) {
  /* background: linear-gradient(135deg, #0b1628 0%, #6b3a00 100%); */
  border: 1px solid rgba(247, 148, 29, 0.35);
}

/* subtle dot texture on each card */
.cu-stat-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  pointer-events: none;
}

.cu-stat-box:hover {
  transform: translateX(4px);
}
.cu-stat-box:nth-child(1):hover {
  box-shadow: 0 8px 28px rgba(10, 110, 189, 0.3);
}
.cu-stat-box:nth-child(2):hover {
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.3);
}
.cu-stat-box:nth-child(3):hover {
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.3);
}
.cu-stat-box:nth-child(4):hover {
  box-shadow: 0 8px 28px rgba(247, 148, 29, 0.3);
}

/* icon box — accent colour per card */
.cu-stat-box-ico {
  font-size: 27px;
  flex-shrink: 0;
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform 0.28s;
}
.cu-stat-box:hover .cu-stat-box-ico {
  transform: scale(1.1) rotate(-6deg);
}

.cu-stat-box:nth-child(1) .cu-stat-box-ico {
  background: rgba(10, 110, 189, 0.25);
  color: #5bc8ff;
  background: linear-gradient(135deg, #0b1628 0%, #0a3a6b 100%);
}
.cu-stat-box:nth-child(2) .cu-stat-box-ico {
  background: rgba(5, 150, 105, 0.25);
  color: #4ade80;
  background: linear-gradient(135deg, #0b1628 0%, #0a5a3a 100%);
}
.cu-stat-box:nth-child(3) .cu-stat-box-ico {
  background: rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
  background: linear-gradient(135deg, #0b1628 0%, #3b1a6b 100%);
}
.cu-stat-box:nth-child(4) .cu-stat-box-ico {
  background: rgb(247 148 29 / 50%);
  color: #f7941d;
  background: linear-gradient(135deg, #0b1628 0%, #6b3a00 100%);
}

.cu-stat-box-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.cu-stat-box-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
}
.cu-stat-box:nth-child(1) .cu-stat-box-num {
  color: #29b2f7;
}
.cu-stat-box:nth-child(2) .cu-stat-box-num {
  color: #4ade80;
}
.cu-stat-box:nth-child(3) .cu-stat-box-num {
  color: #846ae4;
}
.cu-stat-box:nth-child(4) .cu-stat-box-num {
  color: #fbbf24;
}

.cu-stat-box-lbl {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgb(0 0 0 / 90%);
  /* margin-bottom: 1px; */
}
.cu-stat-box-sub {
  font-size: 12px;
  color: rgb(0 0 0);
  line-height: 1.4;
}

/* ── Right: form column wrapper ── */
.cu-form-col {
}

/* ── Bottom: offices full-width section ── */
.cu-offices-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px 60px;
}
.cu-offices-head {
  margin-bottom: 24px;
}
.cu-offices-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy, #0b1628);
  margin-bottom: 4px;
}
.cu-offices-sub {
  font-size: 14px;
  color: var(--muted, #5a6a82);
}

.cu-offices-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cu-office-card {
  background: #fff;
  border: 1.5px solid #e4edf7;
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s,
    border-color 0.28s;
}
.cu-office-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  border-radius: 18px 0 0 18px;
}
.cu-office-card:nth-child(1)::before {
  background: linear-gradient(180deg, #0a6ebd, #3da8f5);
}
.cu-office-card:nth-child(2)::before {
  background: linear-gradient(180deg, #f7941d, #ffc066);
}
.cu-office-card:nth-child(3)::before {
  background: linear-gradient(180deg, #059669, #34d399);
}
.cu-office-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10, 110, 189, 0.1);
  border-color: rgba(10, 110, 189, 0.2);
}

.cu-office-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cu-office-card-ico {
  width: 45px;
  height: 45px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.22s;
}
.cu-office-card:hover .cu-office-card-ico {
  transform: scale(1.08) rotate(-4deg);
}

/* icon colour variants */
.cu-oc-blue {
  background: #ebf5ff;
  color: #0a6ebd;
}
.cu-oc-orange {
  background: #fff7ed;
  color: #f7941d;
}
.cu-oc-green {
  background: #ecfdf5;
  color: #059669;
}

.cu-office-card-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #0b1628);
}
.cu-office-card-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5a6a82);
  margin-top: 2px;
}
.cu-office-card-addr {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted, #5a6a82);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f4f9;
}
.cu-office-card-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cu-office-card-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--muted, #5a6a82);
}
.cu-office-card-line i {
  color: #0a6ebd;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 17px;
}
.cu-office-card-line a {
  color: #0a6ebd;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.cu-office-card-line a:hover {
  color: var(--orange, #f7941d);
}

/* hide old office/sidebar classes that are no longer used */
.cu-offices {
  display: none !important;
}
.cu-offices-wrap {
  display: none !important;
}
.cu-sidebar {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cu-main {
    grid-template-columns: 1fr;
    padding: 32px 32px 40px;
  }
  .cu-offices-section {
    padding: 0 32px 52px;
  }
}
@media (max-width: 800px) {
  .cu-offices-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .cu-main {
    padding: 24px 16px 32px;
    gap: 16px;
  }
  .cu-stats-grid {
    grid-template-rows: auto;
  }
  .cu-offices-section {
    padding: 0 16px 44px;
  }
}
.cu-stat-box-app {
  display: flex;
  padding: 5px 0;
}

.cu-stat-box-app img {
  width: 90px;
  padding: 0px 3px;
}

.intro-content {
  color: #555;
  font-size: 16px;
  line-height: 1.9;
  text-align: justify;
}

.intro-content p {
  margin-bottom: 18px;
}

.intro-img {
  float: right;
  width: 400px;
  /* margin: 0 0 20px 35px; */
  border-radius: 12px;
  /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); */
  transition: transform 0.6s var(--ease);
}

.intro-content::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 991px) {
  .intro-img {
    float: none;
    /* width: 100%; */
    margin: 0 0 25px;
  }
}

/* ── 3D banner graphic (right side of contact hero) ── */
.cu-hero {
  position: relative;
}
.cu-hero-graphic {
  position: absolute;
  right: clamp(12px, 4vw, 72px);
  bottom: 0;
  width: clamp(260px, 34%, 480px);
  max-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateX(120px); /* Start from right */
  animation: slideFromRight 2.2s ease-out forwards;
  animation-delay: 0.3s;
  will-change: transform, opacity;
}
.cu-hero-graphic img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.45));
}
/* keep hero text clear of the graphic on desktop */
@media (min-width: 993px) {
  .cu-hero-text {
    max-width: 62%;
  }
}
/* no room on smaller screens — hide it */
@media (max-width: 992px) {
  .cu-hero-graphic {
    display: none;
  }
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(120px);
  }

  60% {
    opacity: 1;
    transform: translateX(-10px); /* Small bounce */
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   CSM BLOG  —  scoped under .blg
   ═══════════════════════════════════════════════════════════ */
.blg {
  --blue: #0a6ebd;
  --blue-d: #075a9c;
  --orange: #f7941d;
  --navy: #0b1628;
  --ink: #0b1628;
  --muted: #5b6b7f;
  --line: #e7eef6;
  --bg: #f5f9fd;
  --card: #ffffff;
  --radius: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 10px 30px -12px rgba(11, 22, 40, 0.16);
  --shadow-lg: 0 28px 60px -20px rgba(11, 22, 40, 0.28);
  background: var(--bg);
  color: var(--ink);
}
.blg * {
  box-sizing: border-box;
}
.blg .blg-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── hero additions (sit inside your existing .ab-banner) ── */
.blg .blg-hero-sub {
  margin: 14px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
}
.blg .blg-search {
  margin: 26px auto 0;
  max-width: 520px;
  position: relative;
}
.blg .blg-search input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 22px 0 50px;
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
  outline: none;
  box-shadow: var(--shadow);
  transition:
    box-shadow 0.3s var(--ease),
    border-color 0.3s;
}
.blg .blg-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(10, 110, 189, 0.12);
}
.blg .blg-search .blg-search-ico {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 1rem;
  pointer-events: none;
}

/* ── section rhythm ── */
.blg .blg-section {
  padding: 64px 0;
}
.blg .blg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(10, 110, 189, 0.08);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.blg .blg-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.blg .blg-h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.blg .blg-h2 .accent {
  color: var(--blue);
}
.blg .blg-lead {
  color: var(--muted);
  max-width: 640px;
  line-height: 1.6;
}

/* ── category filter chips ── */
.blg .blg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 4px;
}
.blg .blg-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.blg .blg-chip:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  color: var(--blue);
}
.blg .blg-chip.is-active {
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(10, 110, 189, 0.7);
}

/* ── media thumb (gradient + icon fallback, real img covers it) ── */
.blg .blg-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--g1, #0a6ebd), var(--g2, #5aa9e6));
}
.blg .blg-thumb .blg-thumb-ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.6rem;
}
.blg .blg-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.blg .g-blue {
  --g1: #0a6ebd;
  --g2: #5aa9e6;
}
.blg .g-teal {
  --g1: #0e7c66;
  --g2: #2fbf9a;
}
.blg .g-orange {
  --g1: #f7941d;
  --g2: #ffbe6b;
}
.blg .g-purple {
  --g1: #5b46c4;
  --g2: #9d86f0;
}
.blg .g-navy {
  --g1: #0b1628;
  --g2: #2c4a73;
}
.blg .g-cyan {
  --g1: #0787a8;
  --g2: #3cc6dd;
}

.blg .blg-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(11, 22, 40, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ── FEATURED post (split) ── */
.blg .blg-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.blg .blg-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.blg .blg-featured:hover .blg-thumb img {
  transform: scale(1.05);
}
.blg .blg-featured .blg-thumb {
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 340px;
}
.blg .blg-featured-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blg .blg-featured-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.blg .blg-featured-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.blg .blg-featured-title a {
  color: inherit;
  text-decoration: none;
}
.blg .blg-featured-title a:hover {
  color: var(--blue);
}
.blg .blg-featured-excerpt {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 22px;
}

/* ── card grid ── */
.blg .blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 30px;
}
.blg .blg-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s;
}
.blg .blg-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.blg .blg-card:hover .blg-thumb img {
  transform: scale(1.07);
}
.blg .blg-card:hover .blg-arrow {
  transform: translateX(5px);
}
.blg .blg-card-body {
  padding: 16px 8px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blg .blg-card-title {
  font-size: 1.14rem;
  line-height: 1.32;
  font-weight: 750;
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.blg .blg-card-title a {
  color: inherit;
  text-decoration: none;
}
.blg .blg-card-title a:hover {
  color: var(--blue);
}
.blg .blg-card-excerpt {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.58;
  margin: 0 0 18px;
  flex: 1;
}

/* ── meta row (author + date + read) ── */
.blg .blg-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
}
.blg .blg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.blg .av-blue {
  background: linear-gradient(135deg, #0a6ebd, #075a9c);
}
.blg .av-teal {
  background: linear-gradient(135deg, #0e7c66, #2fbf9a);
}
.blg .av-orange {
  background: linear-gradient(135deg, #f7941d, #e07d05);
}
.blg .av-purple {
  background: linear-gradient(135deg, #5b46c4, #8a72e8);
}
.blg .blg-meta-txt {
  line-height: 1.25;
}
.blg .blg-meta-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.blg .blg-meta-sub {
  font-size: 0.76rem;
  color: var(--muted);
}

/* ── read link ── */
.blg .blg-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.blg .blg-read .blg-arrow {
  transition: transform 0.3s var(--ease);
}
.blg .blg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(10, 110, 189, 0.7);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.blg .blg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(10, 110, 189, 0.8);
}
.blg .blg-btn i {
  transition: transform 0.3s var(--ease);
}
.blg .blg-btn:hover i {
  transform: translateX(4px);
}

/* ── empty state ── */
.blg .blg-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.blg .blg-empty.is-shown {
  display: block;
}
.blg .blg-empty i {
  font-size: 2rem;
  color: var(--blue);
  opacity: 0.5;
  margin-bottom: 12px;
}

/* ── newsletter ── */
.blg .blg-news {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy), #123a63);
  color: #fff;
  padding: 52px 44px;
  text-align: center;
}
.blg .blg-news::before,
.blg .blg-news::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
}
.blg .blg-news::before {
  width: 280px;
  height: 280px;
  background: rgba(10, 110, 189, 0.6);
  top: -90px;
  left: -60px;
  animation: blgFloat 9s ease-in-out infinite;
}
.blg .blg-news::after {
  width: 240px;
  height: 240px;
  background: rgba(247, 148, 29, 0.45);
  bottom: -90px;
  right: -50px;
  animation: blgFloat 11s ease-in-out infinite reverse;
}
.blg .blg-news > * {
  position: relative;
  z-index: 1;
}
.blg .blg-news h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.blg .blg-news p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.blg .blg-news-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.blg .blg-news-form input {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 1rem;
  outline: none;
}
.blg .blg-news-form .blg-btn {
  box-shadow: none;
}
.blg .blg-news-ok {
  margin-top: 16px;
  font-weight: 600;
  color: #8ff0c8;
  display: none;
}
.blg .blg-news-ok.is-shown {
  display: block;
}

/* ═══ ANIMATIONS ═══ */
.blg.is-js .blg-reveal {
  opacity: 0;
  transform: translateY(26px);
}
.blg .blg-reveal {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.blg .blg-reveal.is-in {
  opacity: 1;
  transform: none;
}
@keyframes blgFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(14px, -18px);
  }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 980px) {
  .blg .blg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blg .blg-featured {
    grid-template-columns: 1fr;
  }
  .blg .blg-featured .blg-thumb {
    min-height: 240px;
  }
  .blg .blg-featured-body {
    padding: 30px;
  }
}
@media (max-width: 600px) {
  .blg .blg-grid {
    grid-template-columns: 1fr;
  }
  .blg .blg-section {
    padding: 48px 0;
  }
  .blg .blg-news {
    padding: 40px 22px;
  }
  .blg .blg-news-form {
    flex-direction: column;
  }
  .blg .blg-news-form input {
    text-align: center;
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .blg.is-js .blg-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .blg *,
  .blg *::before,
  .blg *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CSM FOOTER  —  redesigned  (append to my-style.css)
   All rules scoped under .csm-ftr so nothing collides with the
   rest of the stylesheet. Matches the header's brand social chips.
   ══════════════════════════════════════════════════════════ */

.csm-ftr {
  --ftr-blue: #0a6ebd;
  --ftr-orange: #f7941d;
  --ftr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  color: #eaf1f9;
  background: linear-gradient(135deg, #061831 0%, #0a2c50 52%, #0a5aa0 100%);
  padding: 74px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
}

/* brand accent line + soft glow accents */
.csm-ftr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--ftr-blue) 0%,
    #39a7e6 45%,
    var(--ftr-orange) 100%
  );
}
.csm-ftr .ftr-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.csm-ftr .ftr-glow.g1 {
  width: 340px;
  height: 340px;
  background: rgba(10, 110, 189, 0.5);
  top: -120px;
  left: -80px;
}
.csm-ftr .ftr-glow.g2 {
  width: 300px;
  height: 300px;
  background: rgba(247, 148, 29, 0.22);
  bottom: 40px;
  right: -70px;
}

.csm-ftr .ftr-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── top grid ── */
.csm-ftr .ftr-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 44px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── brand column ── */
.csm-ftr .ftr-logo {
  height: 80px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* white logo on dark footer */
  margin-bottom: 20px;
}
.csm-ftr .ftr-about {
  color: rgba(234, 241, 249, 0.68);
  line-height: 1.7;
  max-width: 340px;
  font-size: 14.5px;
}
.csm-ftr .ftr-about b {
  color: #fff;
  font-weight: 700;
}

.csm-ftr .ftr-social {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}
.csm-ftr .ftr-social a {
  --brand: #0a6ebd;
  --glow: rgba(10, 110, 189, 0.9);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  background: var(--brand);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.28s var(--ftr-ease),
    box-shadow 0.28s,
    filter 0.28s;
}
.csm-ftr .ftr-social a:hover {
  transform: translateY(-3px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 20px -5px var(--glow);
}
.csm-ftr .is-fb {
  --brand: #1877f2;
  --glow: rgba(24, 119, 242, 0.9);
}
.csm-ftr .is-x {
  --brand: #000;
  --glow: rgba(90, 90, 90, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}
.csm-ftr .is-ig {
  --glow: rgba(214, 41, 118, 0.9);
  background: linear-gradient(
    45deg,
    #feda75,
    #fa7e1e 26%,
    #d62976 55%,
    #962fbf 78%,
    #4f5bd5
  );
}
.csm-ftr .is-in {
  --brand: #0a66c2;
  --glow: rgba(10, 102, 194, 0.9);
}
.csm-ftr .is-yt {
  --brand: #ff0000;
  --glow: rgba(255, 0, 0, 0.85);
}
.csm-ftr .is-th {
  --brand: #000;
  --glow: rgba(90, 90, 90, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── column headings ── */
.csm-ftr .ftr-h {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
.csm-ftr .ftr-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ftr-orange), #ffb454);
}

/* ── quick links ── */
.csm-ftr .ftr-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.csm-ftr .ftr-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(234, 241, 249, 0.72);
  text-decoration: none;
  font-size: 14.5px;
  transition:
    color 0.2s,
    transform 0.2s var(--ftr-ease);
}
.csm-ftr .ftr-links a i {
  font-size: 14px;
  color: #f99f32;
  transition: transform 0.25s var(--ftr-ease);
}
.csm-ftr .ftr-links a:hover {
  color: #fff;
  transform: translateX(3px);
}
.csm-ftr .ftr-links a:hover i {
  transform: translateX(2px);
}

/* ── contact list ── */
.csm-ftr .ftr-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.csm-ftr .ftr-contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(234, 241, 249, 0.8);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s;
}
.csm-ftr .ftr-contact a:hover {
  color: #fff;
}
.csm-ftr .ftr-contact i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 110, 189, 0.95),
    rgba(7, 79, 138, 0.95)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── app store buttons (one each) ── */
.csm-ftr .ftr-app-sub {
  color: rgba(234, 241, 249, 0.6);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.csm-ftr .ftr-stores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 180px;
}
.csm-ftr .store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border-radius: 13px;
  text-decoration: none;
  background: linear-gradient(135deg, #12213a, #0b1526);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.25s var(--ftr-ease),
    box-shadow 0.25s,
    border-color 0.25s;
}
.csm-ftr .store-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(247, 148, 29, 0.55);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.8);
}
.csm-ftr .store-btn i {
  font-size: 26px;
  color: #fff;
  flex-shrink: 0;
}
.csm-ftr .store-txt small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.csm-ftr .store-txt b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-top: 1px;
}

/* ── bottom bar ── */
.csm-ftr .ftr-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px 0 28px;
}
.csm-ftr .ftr-copy {
  color: rgba(234, 241, 249, 0.6);
  font-size: 13.5px;
}
.csm-ftr .ftr-legal {
  display: flex;
  align-items: center;
  gap: 20px;
}
.csm-ftr .ftr-legal a {
  color: rgba(234, 241, 249, 0.72);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.2s;
}
.csm-ftr .ftr-legal a:hover {
  color: var(--ftr-orange);
}

/* ── responsive ── */
@media (max-width: 900px) {
  .csm-ftr .ftr-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 560px) {
  .csm-ftr {
    padding-top: 56px;
  }
  .csm-ftr .ftr-inner {
    padding: 0 22px;
  }
  .csm-ftr .ftr-top {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .csm-ftr .ftr-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   CSM — SINGLE MODULE  (scoped under .modx)
   ═══════════════════════════════════════════════════════════ */
.modx {
  --blue: #0a6ebd;
  --blue-d: #075a9c;
  --orange: #f7941d;
  --navy: #0b1628;
  --ink: #0b1628;
  --body: #2b3a48;
  --muted: #5b6b7f;
  --line: #e7eef6;
  --bg: #f5f9fd;
  --card: #fff;
  --radius: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 10px 30px -12px rgba(11, 22, 40, 0.16);
  --shadow-lg: 0 28px 60px -20px rgba(11, 22, 40, 0.28);
  background: var(--bg);
  color: var(--ink);
}
.modx * {
  box-sizing: border-box;
}
.modx .modx-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── HERO ── */
.modx .modx-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 500px at 78% -10%, #14406e 0%, transparent 60%),
    linear-gradient(135deg, #0b1628 0%, #0f2e50 60%, #103a63 100%);
  background-color: #0b1628;
  padding: 150px 0 70px;
}
.modx .modx-hero::before,
.modx .modx-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}
.modx .modx-hero::before {
  width: 340px;
  height: 340px;
  background: rgba(10, 110, 189, 0.45);
  top: -120px;
  right: 6%;
  animation: modxFloat 10s ease-in-out infinite;
}
.modx .modx-hero::after {
  width: 260px;
  height: 260px;
  background: rgba(247, 148, 29, 0.28);
  bottom: -120px;
  left: -40px;
  animation: modxFloat 13s ease-in-out infinite reverse;
}
.modx .modx-hero .modx-wrap {
  position: relative;
  z-index: 1;
}
.modx .modx-crumb {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 26px;
}
.modx .modx-crumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.modx .modx-crumb a:hover {
  color: #fff;
}
.modx .modx-crumb .sep {
  margin: 0 8px;
  opacity: 0.5;
}
.modx .modx-hero-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.modx .modx-hero-icon {
  width: 74px;
  height: 74px;
  flex: none;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  box-shadow: 0 16px 40px -12px rgba(10, 110, 189, 0.9);
  animation: modxBob 5s ease-in-out infinite;
}
.modx .modx-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 10px;
  margin-top: 0;
}
.modx .modx-title {
  font-size: 35px;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0;
}
.modx .modx-intro {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 16px 0 0;
}
.modx .modx-body-intro {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--muted);
  max-width: 780px;
  margin: 0 0 32px;
}
.modx .modx-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
.modx .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s,
    background 0.3s;
}
.modx .btn-primary {
  background: linear-gradient(135deg, var(--orange), #e07d05);
  color: #fff;
  box-shadow: 0 16px 34px -12px rgba(247, 148, 29, 0.8);
}
.modx .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(247, 148, 29, 0.9);
}
.modx .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.modx .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.modx .btn i {
  transition: transform 0.3s var(--ease);
}
.modx .btn:hover i {
  transform: translateX(4px);
}

/* stat strip */
.modx .modx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.modx .modx-stat .num {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff, #bcd8f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.modx .modx-stat .lbl {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* ── BODY LAYOUT ── */
.modx .modx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 46px;
  padding: 60px 22px 30px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

/* key features panel */
.modx .modx-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow);
  margin-bottom: 44px;
}
.modx .modx-eyebrow-l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(10, 110, 189, 0.08);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.modx .modx-eyebrow-l .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.modx .modx-h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.modx .modx-sub {
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.6;
}
.modx .modx-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 26px;
}
.modx .modx-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
}
.modx .modx-feat i {
  color: #0e9f6e;
  font-size: 1.15rem;
  flex: none;
}

/* capability grid */
.modx .modx-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.modx .modx-cap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s;
}
.modx .modx-cap:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.modx .modx-cap-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--blue);
  background: rgba(10, 110, 189, 0.1);
  margin-bottom: 16px;
  transition:
    transform 0.4s var(--ease),
    background 0.3s,
    color 0.3s;
}
.modx .modx-cap:hover .modx-cap-ico {
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.modx .modx-cap h3 {
  font-size: 1.1rem;
  font-weight: 750;
  margin: 0 0 8px;
}
.modx .modx-cap p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
}

/* ── SIDEBAR ── */
.modx .modx-side {
  position: sticky;
  top: 104px;
}
.modx .modx-side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modx .modx-side-head {
  background: linear-gradient(135deg, var(--orange), #e07d05);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 16px 20px;
  letter-spacing: 0.01em;
}
.modx .modx-side-list {
  list-style: none;
  margin: 0;
  padding: 8px;
}
.modx .modx-side-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--body);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.2s;
}
.modx .modx-side-list a i {
  width: 18px;
  text-align: center;
  color: var(--blue);
  font-size: 0.95rem;
  transition: color 0.25s;
}
.modx .modx-side-list a:hover {
  background: rgba(10, 110, 189, 0.06);
  color: var(--blue);
  transform: translateX(3px);
}
.modx .modx-side-list a.is-active {
  background: rgba(10, 110, 189, 0.1);
  color: var(--blue);
  border-color: var(--blue);
  font-weight: 800;
}
.modx .modx-side-list a.is-active i {
  color: var(--blue);
}
.modx .modx-side-cta {
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}
.modx .modx-side-cta .btn {
  width: 100%;
  justify-content: center;
}

/* ── CTA BAND ── */
.modx .modx-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  padding: 52px 40px;
}
.modx .modx-band::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(247, 148, 29, 0.35);
  filter: blur(70px);
  top: -100px;
  right: -40px;
  animation: modxFloat 11s ease-in-out infinite;
}
.modx .modx-band > * {
  position: relative;
  z-index: 1;
}
.modx .modx-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.modx .modx-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.modx .modx-band .btn-primary {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.4);
}
.modx .modx-band .btn-primary:hover {
  background: #fff;
}

/* ═══ animation ═══ */
.modx.is-js .modx-reveal {
  opacity: 0;
  transform: translateY(24px);
}
.modx .modx-reveal {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.modx .modx-reveal.is-in {
  opacity: 1;
  transform: none;
}
@keyframes modxFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(16px, -20px);
  }
}
@keyframes modxBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ═══ responsive ═══ */
@media (max-width: 980px) {
  .modx .modx-layout {
    grid-template-columns: 1fr;
  }
  .modx .modx-side {
    position: static;
    top: auto;
    order: -1;
  }
  .modx .modx-cap-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .modx .modx-feats {
    grid-template-columns: 1fr;
  }
  .modx .modx-hero {
    padding: 52px 0 48px;
  }
  .modx .modx-stats {
    gap: 24px;
  }
  .modx .modx-hero-top {
    gap: 14px;
  }
  .modx .modx-hero-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* ═══ reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .modx.is-js .modx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .modx *,
  .modx *::before,
  .modx *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1300px) {
  .nav-link {
    padding: 9px 6px;
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────
   FROM: style.css
───────────────────────────────────────────────────────────── */

:root {
  --blue: #0057b7;
  --blue-dark: #003a7d;
  --blue-light: #ebf3ff;
  --orange: #ff6b00;
  --navy: #0d1f3c;
  --white: #ffffff;
  --gray-50: #f8faff;
  --gray-100: #f0f4ff;
  --gray-200: #dce8ff;
  --gray-400: #94a3b8;
  --gray-600: #555e6d;
  --gray-800: #1e293b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
  color: var(--gray-800);
  /* line-height: 1.7; */
  overflow-x: hidden;
  background: #fff;
}

/* Hide page scrollbar (right side) — scrolling still works */
html,
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge / IE */
}
::-webkit-scrollbar {
  /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
  display: none;
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

#top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  transition: var(--transition);
  z-index: 400;
  box-shadow: 0 4px 16px rgba(0, 87, 183, 0.4);
}
#top-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  left: 30px;
}
#top-btn:hover {
  background: var(--orange);
  transform: translateY(-4px) scale(1.1);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220, 232, 255, 0.6);
  padding: 14px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: box-shadow 0.3s;
}
.nav.scrolled {
  box-shadow: 0 4px 32px rgba(0, 87, 183, 0.1);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--blue), #00aaff);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 12px rgba(0, 87, 183, 0.3);
}
.logo-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
}
.logo-text small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.3px;
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-phone:hover {
  color: var(--blue);
}
.nav-btn {
  background: var(--orange);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-btn:hover {
  background: #e05e00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}

.hero {
  position: relative;
  background: linear-gradient(
    135deg,
    #333333 0%,
    #002a6e 45%,
    #1698d4 80%,
    #0070cc 100%
  );
  padding: 0 48px;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 0 80px;
}
.hero-right {
  display: none;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.mesh-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.mc1 {
  width: 600px;
  height: 600px;
  background: rgba(0, 150, 255, 0.12);
  top: -150px;
  right: 0;
  animation: meshFloat1 14s ease-in-out infinite;
}
.mc2 {
  width: 450px;
  height: 450px;
  background: rgba(255, 107, 0, 0.08);
  bottom: -100px;
  left: -50px;
  animation: meshFloat2 18s ease-in-out infinite;
}
.mc3 {
  width: 350px;
  height: 350px;
  background: rgba(100, 200, 255, 0.07);
  top: 40%;
  right: 30%;
  animation: meshPulse 10s ease-in-out infinite;
}
@keyframes meshFloat1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, 30px) scale(1.12);
  }
}
@keyframes meshFloat2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.1);
  }
}
@keyframes meshPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.35);
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

.hero-left {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  animation: blink 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.hero h1 {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -2px;
  margin-bottom: 26px;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, #60c8f5, #a5e3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.city-flip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.15em;
}
.city-flip-inner {
  display: inline-block;
  background: linear-gradient(135deg, #60c8f5, #a5e3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: flipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes flipIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes flipOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-110%);
    opacity: 0;
  }
}
.hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.75;
  font-weight: 400;
}
.hero-sub strong {
  color: #fff;
  font-weight: 700;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  justify-content: center;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  padding: 15px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-hero-primary:hover::before {
  transform: translateX(100%);
}
.btn-hero-primary:hover {
  background: #e05e00;
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(255, 107, 0, 0.45);
}
.btn-hero-primary .btn-ping {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: btnPing 1.4s ease-in-out infinite;
  margin-right: 2px;
}
@keyframes btnPing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.2;
  }
}
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.trust-avatars {
  display: flex;
}
.trust-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--blue), #00aaff);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  margin-left: -8px;
}
.trust-av:first-child {
  margin-left: 0;
}
.hero-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 12px;
}
.hero-meta a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.hero-meta a:hover {
  color: #fff;
}

.hero-right {
  position: relative;
  z-index: 2;
}
.hero-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: heroCardFloat 7s ease-in-out infinite;
}
@keyframes heroCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.hero-card-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.hc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.hc-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  transition: var(--transition);
}
.hc-stat:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(1.04);
}
.hc-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #7dd3fa, #bfecff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: block;
}
.hc-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  font-weight: 500;
}
.hc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0 20px;
}
.hc-clients {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hc-client {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition);
  animation: clientSlideIn 0.6s ease both;
}
.hc-client:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}
@keyframes clientSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.hc-client:nth-child(1) {
  animation-delay: 0.8s;
}
.hc-client:nth-child(2) {
  animation-delay: 1.1s;
}
.hc-client:nth-child(3) {
  animation-delay: 1.4s;
}
.hc-av {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), #00aaff);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.hc-info {
  flex: 1;
}
.hc-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.hc-city {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
.hc-verified {
  font-size: 14px;
}
.hero-card-ring {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}
.hero-card-ring2 {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border: 1.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite 0.8s;
}
@keyframes ringPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.stats-section {
  background: linear-gradient(135deg, #f0f7ff 0%, #fff 60%, #fff5ee 100%);
  padding: 72px 48px;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(0, 87, 183, 0.06) 0%,
    transparent 70%
  );
  border-radius: 50%;
}
.stats-section::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(
    circle,
    rgba(255, 107, 0, 0.05) 0%,
    transparent 70%
  );
  border-radius: 50%;
}
.stats-head {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}
.stats-head .tag {
  justify-content: center;
}
.stats-head h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.stats-head h2 span {
  color: var(--blue);
}
.stats-head p {
  font-size: 15px;
  color: var(--gray-600);
  max-width: 480px;
  margin: 0 auto;
}
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.stat-item {
  background: #fff;
  border: 1.5px solid #e8f0fe;
  border-radius: 20px;
  padding: 56px 24px 32px;
  text-align: center;
  cursor: default;
  position: relative;
  overflow: visible;
  will-change: transform, opacity;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    box-shadow 0.3s,
    border-color 0.3s;
}
.stat-item.stat-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}
/* .stat-item:nth-child(1) {
  transition-delay: 0.05s;
}
.stat-item:nth-child(2) {
  transition-delay: 0.2s;
}
.stat-item:nth-child(3) {
  transition-delay: 0.3s;
}
.stat-item:nth-child(4) {
  transition-delay: 0.4s;
} */
.stat-item::before {
  /* content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 87, 183, 0.04),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease; */
}
.stat-item:hover::before {
  left: 160%;
}
.stat-item:hover {
  border-color: #0183c8;
  box-shadow: 0 12px 40px rgba(0, 87, 183, 0.13);
  transform: translateY(-6px) translateZ(0);
}
.stat-item:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0057b7, #00aaff);
  border-radius: 20px 20px 0 0;
}
.stat-item:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 20px 20px 0 0;
}
.stat-item:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #059669, #34d399);
  border-radius: 20px 20px 0 0;
}
.stat-item:nth-child(4)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b00, #ffaa44);
  border-radius: 20px 20px 0 0;
}
.stat-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: transform 0.3s ease;
}
.stat-item:nth-child(1) .stat-icon-wrap {
  background: linear-gradient(135deg, #ebf3ff, #dbeafe);
}
.stat-item:nth-child(2) .stat-icon-wrap {
  background: linear-gradient(135deg, #f3f0ff, #ede9fe);
}
.stat-item:nth-child(3) .stat-icon-wrap {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.stat-item:nth-child(4) .stat-icon-wrap {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.stat-item:hover .stat-icon-wrap {
  transform: scale(1.15) rotate(-6deg);
}
.stat-num {
  font-size: 30px;
  font-weight: 900;
  display: block;
  line-height: 1;
  letter-spacing: 0;
  margin: 8px 0;
}
.stat-item:nth-child(1) .stat-num {
  background: linear-gradient(135deg, #0057b7, #00aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item:nth-child(2) .stat-num {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item:nth-child(3) .stat-num {
  background: linear-gradient(135deg, #059669, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item:nth-child(4) .stat-num {
  background: linear-gradient(135deg, #ff6b00, #ffaa44);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-lbl {
  font-size: 16px;
  color: #000000;
  font-weight: 800;
}
.stat-sub {
  font-size: 12px;
  color: #5e5e5e;
  font-weight: 400;
}

.section {
  padding: 90px 0;
}
.container {
  max-width: 1170px;
  margin: 0 auto;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.tag::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.sec-title {
  font-size: 38px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.4;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.sec-title .accent {
  color: var(--blue);
}
.sec-sub {
  font-size: 16px;
  color: var(--gray-600);
  /* max-width: 660px; */
  line-height: 1.8;
  margin-bottom: 48px;
}

.clients-section {
  background: linear-gradient(180deg, #f0f6ff 0%, #fff 100%);
  overflow: hidden;
  padding-bottom: 60px;
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.client-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  cursor: default;
  transition: var(--transition);
}
.client-card:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 40px rgba(0, 87, 183, 0.12);
  transform: translateY(-8px);
}
.client-card:hover .c-icon {
  transform: scale(1.1) rotate(-5deg);
}
/* .c-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--blue), #00aaff);
  border-radius: 14px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 87, 183, 0.25);
} */
.c-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.c-city {
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
}

.testi {
  position: relative;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  border-radius: var(--radius-xl);
  padding: 48px 52px;
  color: #fff;
  overflow: hidden;
}
.testi::before {
  content: "\201C";
  font-size: 160px;
  font-family: Georgia, serif;
  position: absolute;
  top: -20px;
  left: 24px;
  opacity: 0.08;
  line-height: 1;
  color: #fff;
}
.testi-decor {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.testi-text {
  font-size: 18px;
  line-height: 1.85;
  font-style: italic;
  opacity: 0.95;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.testi-avatar {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.testi-name {
  font-weight: 700;
  font-size: 15px;
}
.testi-role {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 2px;
}
.testi-stars {
  color: #fcd34d;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 4px;
}

.modules-section {
  background: #fff;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mod-card {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.mod-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #00aaff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.mod-card:hover {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 12px 40px rgba(0, 87, 183, 0.12);
  transform: translateY(-6px);
}
.mod-card:hover::after {
  transform: scaleX(1);
}
.mod-card:hover .mod-icon {
  animation: iconSpin 0.5s ease;
}
@keyframes iconSpin {
  0% {
    transform: rotate(0) scale(1);
  }
  40% {
    transform: rotate(-12deg) scale(1.2);
  }
  70% {
    transform: rotate(6deg) scale(0.95);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
.mod-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--blue), #00aaff);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 87, 183, 0.2);
}
.mod-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}
.mod-card p {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.65;
}

.int-section {
  background: var(--gray-50);
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.int-chip {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  transition: var(--transition);
  cursor: default;
}
.int-chip:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 87, 183, 0.25);
}
.int-chip:hover .int-em {
  animation: iconSpin 0.4s ease;
}
.int-em {
  font-size: 20px;
  display: inline-block;
}

.app-section {
  background: #fff;
}
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.app-card {
  background: linear-gradient(135deg, #001d4a, var(--blue));
  border-radius: var(--radius-xl);
  padding: 52px 36px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.app-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.app-card::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255, 107, 0, 0.08);
  border-radius: 50%;
}
.app-phone {
  font-size: 88px;
  display: block;
  margin-bottom: 20px;
  animation: phoneFloat 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-14px) rotate(2deg);
  }
}
.app-card h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.app-card p {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.app-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.app-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
}
.app-features {
  list-style: none;
}
.app-feat-item {
  padding: 11px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
  border-radius: 6px;
  padding-left: 4px;
}
.app-feat-item:hover {
  background: #f4f6fa;
  padding-left: 12px;
  color: var(--navy);
}
.app-feat-item:last-child {
  border-bottom: none;
}
/* .app-feat-item::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--blue);
  margin-right: 10px;
} */

.why-section {
  background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.why-card {
  width: 100%;
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: var(--transition);
  cursor: default;
  border-left: 4px solid #1698d4;
}
.why-card:hover {
  box-shadow: 0 8px 32px rgba(0, 87, 183, 0.1);
  transform: translateX(8px);
  border-left-color: var(--orange);
}
.why-card:hover .w-icon {
  background: linear-gradient(135deg, var(--orange), #ff9a3c);
  animation: iconSpin 0.5s ease;
}
.w-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: linear-gradient(135deg, var(--blue), #00aaff);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(0, 87, 183, 0.22);
  transition: background 0.3s;
}
.why-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.why-card p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.7;
}

.tricity-section {
  background: linear-gradient(
    135deg,
    #001d4a 0%,
    var(--blue-dark) 50%,
    #0057b7 100%
  );
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tricity-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}
.tricity-section .tag {
  color: rgba(255, 255, 255, 0.7);
}
.tricity-section .tag::before {
  background: rgba(255, 255, 255, 0.4);
}
.tricity-section .sec-title {
  color: #fff;
}
.tricity-section .sec-sub {
  color: rgba(255, 255, 255, 0.75);
}
.tri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.tri-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
  cursor: default;
  backdrop-filter: blur(8px);
}
.tri-card:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
}
.tri-card:hover .tri-icon {
  animation: iconSpin 0.5s ease;
}
.tri-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 14px;
}
.tri-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}
.tri-card p {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.65;
}
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.area-tag {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  cursor: default;
}
.area-tag:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

.form-section {
  background: var(--gray-50);
}
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.form-info h2 {
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.form-info p {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 24px;
}
.contact-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.contact-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.contact-row a {
  font-size: 14px;
  font-weight: 600;
  color: #020202;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-row a:hover {
  color: var(--orange);
}
.c-ic {
  width: 36px;
  height: 36px;
  background: var(--gray-50);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.form-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 12px 48px rgba(0, 87, 183, 0.1);
  border: 1px solid var(--gray-100);
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 7px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--gray-800);
  font-family: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
  background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 87, 183, 0.08);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.btn-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--orange), #ff9a3c);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  letter-spacing: 0.3px;
}
.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(255, 107, 0, 0.4);
}
.form-note {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

.close-section {
  background: var(--gray-50);
}
.close-section p {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.85;
  margin-bottom: 20px;
}
.cities-nav {
  margin-top: 36px;
}
.cities-nav h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.city-tag {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: var(--transition);
}
.city-tag:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 87, 183, 0.22);
}

footer {
  background: linear-gradient(135deg, #001d4a, var(--blue));
  color: #fff;
  padding: 56px 48px 28px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr;
  gap: 9px;
  margin-bottom: 48px;
}
.f-brand h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.f-brand p {
  font-size: 14px;
  /* opacity: 0.65; */
  line-height: 1.8;
  max-width: 320px;
}
.f-contacts {
  margin-top: 20px;
}
.f-contacts a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: var(--transition);
}
.f-contacts a:hover {
  color: #fff;
  padding-left: 4px;
}
.f-col h4 {
  font-size: 16px;
  font-weight: 700;
  /* text-transform: uppercase; */
  /* letter-spacing: 1.5px; */
  /* opacity: 0.5; */
  margin-bottom: 8px;
}
.f-col ul {
  list-style: none;
}
.f-col ul li {
  margin-bottom: 10px;
}
.f-col ul li a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: var(--transition);
}
.f-col ul li a:hover {
  color: #fff;
  padding-left: 6px;
}
.f-bottom {
  border-top: 1.5px solid #fff;
  padding-top: 22px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  /* opacity: 0.45; */
  flex-wrap: wrap;
  gap: 10px;
}
.f-bottom a {
  color: #fff;
  text-decoration: none;
}

.sr {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.sr.show {
  opacity: 1;
  transform: translateY(0);
}
.sr-l {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.sr-l.show {
  opacity: 1;
  transform: translateX(0);
}
.sr-r {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.sr-r.show {
  opacity: 1;
  transform: translateX(0);
}
.sr-scale {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.sr-scale.show {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .stats-inner,
  .clients-grid,
  .modules-grid,
  .int-grid,
  .tri-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-grid,
  .form-wrap,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-floating {
    display: none;
  }
  .section {
    padding: 60px 24px;
  }
  .nav {
    padding: 14px 24px;
  }
  .hero {
    padding: 80px 24px 70px;
  }
}
@media (max-width: 600px) {
  .clients-grid,
  .form-row {
    grid-template-columns: 1fr;
  }
  .modules-grid,
  .int-grid,
  .tri-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 29px;
    margin-bottom: 9px;
  }
}
.logo-slider-wrap {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  margin-bottom: 0;
  width: 100%;
}
.logo-slider-wrap::before,
.logo-slider-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.logo-slider-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #f0f6ff, transparent);
}
.logo-slider-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, #f0f6ff, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: logoScroll 25s linear infinite;
}
.logo-track:hover {
  animation-play-state: paused;
}

@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.client-card {
  background: #fff;
  border: 1.5px solid #dce8ff;
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  width: 300px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.client-card:hover {
  border-color: #0057b7;
  box-shadow: 0 12px 40px rgba(0, 87, 183, 0.12);
  transform: translateY(-8px);
}
.stat-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
  z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ebf8ff, #7dd3fa, #0057b7);
  box-shadow:
    0 8px 24px rgba(0, 87, 183, 0.3),
    inset 0 -4px 8px rgba(0, 0, 0, 0.08),
    inset 0 4px 8px rgba(255, 255, 255, 0.45);
}

.stat-icon-wrap span {
  position: relative;
  z-index: 1;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.18));
}

.stat-icon-wrap::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed #0057b7;
  opacity: 0.6;
  will-change: transform;
  animation: spinDots 14s linear infinite;
}

@keyframes spinDots {
  from {
    transform: translateZ(0) rotate(0deg);
  }
  to {
    transform: translateZ(0) rotate(360deg);
  }
}

.stat-item:hover .stat-icon-wrap {
  transform: translateX(-50%) scale(1.08);
}
.stat-item {
  position: relative;
  overflow: visible; /* allows icon to overflow top */
  padding-top: 56px; /* space for the overlapping icon */
}
/* Remove top accent lines */
.stat-item::after {
  display: none !important;
}

/* Force all stat numbers to CSM blue */
.stat-item .stat-num {
  background: linear-gradient(135deg, #0057b7, #00aaff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero {
  position: relative;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 9 17 / 74%);
  z-index: 1;
}
.hero-mesh,
.hero-grid,
.hero-inner {
  position: relative;
  z-index: 2;
}
.modules-section {
  background: linear-gradient(
    160deg,
    #1698d400 0%,
    #f6faff 45%,
    #09b2f014 100%
  );
  position: relative;
  overflow: hidden;
}
.modules-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgba(0, 87, 183, 0.25) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(0, 170, 255, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}
.modules-section .sec-title {
  color: #fff;
}
.modules-section .sec-sub {
  color: rgba(255, 255, 255, 0.6);
}
.modules-section .accent {
  background: linear-gradient(135deg, #60c8f5, #00aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modules-section .tag {
  color: rgb(255 107 0);
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mod-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 22px 24px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.mod-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(0, 87, 183, 0.6),
    rgba(0, 170, 255, 0.6)
  );
  opacity: 0;
  transition: opacity 0.4s;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
}
.mod-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(0, 170, 255, 0.15) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 18px;
}
.mod-card:hover {
  background: rgba(0, 87, 183, 0.14);
  border-color: transparent;
  transform: translateY(-8px) scale(1.015);
  box-shadow:
    0 20px 60px rgba(0, 30, 90, 0.5),
    0 0 40px rgba(0, 87, 183, 0.2);
}
.mod-card:hover::before {
  opacity: 1;
}
.mod-card:hover::after {
  opacity: 1;
}
.mod-card:hover .mod-icon-svg {
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 12px 36px rgba(0, 170, 255, 0.55);
}
.mod-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s;
}
.mod-card:hover .mod-num {
  color: rgba(0, 170, 255, 0.4);
}
.mod-icon-svg {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #0057b7, #00aaff);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(0, 87, 183, 0.4);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.mod-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.mod-card p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.modules-cta {
  text-align: center;
  margin-top: 44px;
}
.modules-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 28px;
  border-radius: 100px;
  transition: all 0.3s;
}
.modules-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0, 170, 255, 0.25);
}
.mod-icon-svg i {
  font-size: 22px;
  color: #fff;
}
.mod-icon i {
  font-size: 22px;
  color: #fff;
}
/* ─── MODULES ─── */
.modules-section {
  /* background: #ffffff; */
}
.modules-section .sec-title {
  color: #000000;
}
.modules-section .sec-sub {
  color: rgb(0 0 0 / 70%);
}
.modules-section .accent {
  background: linear-gradient(135deg, #018dce, #0055aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Flip wrapper */
.flip-wrap {
  height: 250px;
  perspective: 900px;
}
.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.flip-wrap:hover .flip-inner {
  transform: rotateY(180deg);
  border-radius: 11px;
}

/* Shared face */
.mod-front,
.mod-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 24px 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* FRONT */
.mod-front {
  /* background: linear-gradient(145deg, #02a5e0, #003d99); */
  border: 1.5px solid rgb(16 129 216 / 57%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 12px 16px -11px rgba(10, 110, 189, 0.5);
}
.mod-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  /* background: linear-gradient(145deg, #f6f6f6, #cfcfcf); */
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow:
    0 4px 0 #004ea41a,
    0 6px 16px rgba(0, 87, 183, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mod-icon i {
  font-size: 22px;
  /* color: #000000; */
}
.mod-front h3 {
  font-size: 21px;
  /* font-weight: 800; */
  /* color: #fff; */
  margin: auto 0 0;
}
.mod-front .mod-hint {
  font-size: 13px;
  /* color: rgb(255 255 255); */
  font-weight: 500;
  /* border: 1px solid #ddd; */
  /* padding: 2px 15px; */
  /* border-radius: 20px; */
  /* width: 125px; */
  /* margin-top: auto; */
}

/* BACK */
.mod-back {
  background: linear-gradient(145deg, #002151, #004fa9);
  border: 1.5px solid rgba(0, 170, 255, 0.4);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0, 170, 255, 0.2),
    0 8px 32px rgba(0, 87, 183, 0.4);
  z-index: 10;
}
.mod-back-icon i {
  font-size: 28px;
  color: rgb(255 255 255);
  margin-bottom: 10px;
  display: block;
}
.mod-back h3 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.mod-back p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0;
}
.mod-back-tag {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgb(8 122 212);
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: 100px;
  padding: 3px 12px;
  display: inline-block;
}

/* Shine sweep on front */
.mod-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* -120% hatao */
  width: 100%; /* 60% ki jagah */
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  border-radius: 16px;
  pointer-events: none;
}
.flip-wrap:hover .mod-front::before {
  left: 160%;
}

/* CTA */
.modules-cta {
  text-align: center;
  margin-top: 44px;
}
.modules-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #096ebe, #1b9be4);
  padding: 15px 30px;
  border-radius: 99px;
  box-shadow: 0 12px 28px -12px rgba(10, 110, 189, 0.5);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.sr-scale.show img {
  width: 70%;
}
.w-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: #1698d4;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(13, 140, 240, 0.25);
}

.w-icon i {
  color: #fff;
  font-size: 24px;
}
.app-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-feat-item i {
  color: #0d8cf0;
  width: 18px;
  text-align: center;
}
.c-ic {
  width: 40px;
  height: 40px;
  background: #0057b7;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ============ PREVIEW SCAFFOLDING ONLY ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.sr {
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sr.sr-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   FAQ — LIGHT THEME · 2-COLUMN · HOVER REVEAL (drop-in)
   ===================================================== */
:root {
  --ms-bg: #f7fafd;
  --ms-surface: #ffffff;
  --ms-ink: #0c2740;
  --ms-muted: #5c7186;
  --ms-brand: #0a6ebd;
  --ms-brand-2: #1b9ce5;
  --ms-accent: #f7941d;
  --ms-line: #e1eaf3;
  --ms-chip: #eaf4fc;
}
.faq-wrap .faq {
  width: 100%;
}
.faq-section {
  background: #fff;
}
.faq-wrap {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .faq-wrap {
    grid-template-columns: 1fr;
  }
}
details.faq {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
details.faq[open] {
  border-color: #dedede;
}
details.faq summary {
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition:
    background 0.2s,
    color 0.2s;
  gap: 16px;
}
details.faq summary::-webkit-details-marker {
  display: none;
}
details.faq summary .faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--gray-100);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--blue);
  transition: var(--transition);
}
details.faq[open] summary {
  background: #ffffff;
  color: #1d1e1e;
}
details.faq[open] summary .faq-icon {
  /* background: var(--blue);
  color: #fff;
  transform: rotate(45deg); */
}
.faq-ans {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.8;
  animation: faqSlide 0.3s ease;
}
@keyframes faqSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.faq-section {
  position: relative;
  background: var(--ms-bg);
  padding: 104px 24px 96px;
  overflow: hidden;
}
.faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px 380px at 10% -8%,
    rgba(27, 156, 229, 0.1),
    transparent 60%
  );
  pointer-events: none;
}

.faq-head {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}
.faq-head .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-accent);
  margin-bottom: 16px;
}
.faq-head .tag::before,
.faq-head .tag::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ms-accent);
  border-radius: 2px;
}
.faq-head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ms-ink);
  margin-bottom: 12px;
  text-wrap: balance;
}
.faq-head h2 .accent {
  background: linear-gradient(120deg, var(--ms-brand), var(--ms-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ms-brand);
}
.faq-head p {
  color: var(--ms-muted);
  font-size: 16px;
}

/* ---------- 2-column grid ---------- */
.faq-wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start; /* cards keep their own height; neighbors don't stretch */
}

.faq {
  position: relative;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  box-shadow: 0 3px 12px -8px rgba(10, 82, 140, 0.1);
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  overflow: hidden;
}
/* vertical gradient bar along the left edge */
.faq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--ms-brand),
    var(--ms-brand-2) 60%,
    var(--ms-accent)
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.faq.is-open,
.faq:focus-within {
  border-color: rgba(10, 110, 189, 0.35);
  box-shadow: 0 14px 32px -16px rgba(10, 82, 140, 0.24);
  transform: translateY(-2px);
}
.faq.is-open::before,
.faq:focus-within::before {
  transform: scaleY(1);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  min-height: 72px; /* one- and two-line questions align evenly */
  padding: 16px 18px 16px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ms-ink);
  transition: color 0.3s;
  user-select: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq.is-open summary,
.faq:focus-within summary {
  color: var(--ms-brand);
}
.faq summary:focus-visible {
  outline: 3px solid rgba(10, 110, 189, 0.4);
  outline-offset: -3px;
  border-radius: 14px;
}

.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ms-chip);
  color: var(--ms-brand);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    background 0.3s,
    color 0.3s;
}
.faq.is-open .faq-icon,
.faq:focus-within .faq-icon {
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--ms-brand), var(--ms-brand-2));
  color: #fff;
}

/* ---------- answer: collapsed by default, opens on hover ---------- */
.faq-js .faq-ans {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ms-muted);
  transition:
    max-height 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.35s,
    padding 0.35s;
}
.faq-js .faq.is-open .faq-ans,
.faq-js .faq:focus-within .faq-ans {
  max-height: 360px;
  opacity: 1;
  padding-bottom: 20px;
}
html:not(.faq-js) .faq-ans {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ms-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .faq-wrap {
    grid-template-columns: 1fr;
  }
  .faq summary {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq,
  .faq::before,
  .faq-icon,
  .faq-js .faq-ans {
    transition: none;
  }
}

.app-pills img {
  width: auto !important;
  margin: 10px 0 0;
}
:root {
  --ms-bg: #f7fafd;
  --ms-surface: #ffffff;
  --ms-ink: #0c2740;
  --ms-muted: #5c7186;
  --ms-brand: #0a6ebd;
  --ms-brand-2: #1b9ce5;
  --ms-accent: #f7941d;
  --ms-line: #e1eaf3;
  --ms-chip: #eaf4fc;
  --ms-radius: 18px;
  --card-w: 400px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: #fff;
  color: var(--ms-ink);
  -webkit-font-smoothing: antialiased;
}

/* ================= section ================= */
.reviews-section {
  position: relative;
  background: var(--ms-bg);
  padding: 80px 0;
  overflow: hidden;
}
.reviews-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    900px 420px at 88% -10%,
    rgba(27, 156, 229, 0.1),
    transparent 60%
  );
  pointer-events: none;
}
.reviews-section::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  width: 40%;
  height: 340px;
  background-image: radial-gradient(
    rgba(10, 110, 189, 0.13) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(
    closest-side at 25% 30%,
    #000,
    transparent
  );
  mask-image: radial-gradient(closest-side at 25% 30%, #000, transparent);
  pointer-events: none;
}

/* ================= header ================= */
.rev-head {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto 54px;
  padding: 0 24px;
  text-align: center;
}
.rev-head .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-accent);
  margin-bottom: 16px;
}
.rev-head .tag::before,
.rev-head .tag::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ms-accent);
  border-radius: 2px;
}
.rev-head h2 {
  /* font-family: "Bricolage Grotesque", sans-serif; */
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 14px;
  /* text-wrap: balance; */
}
.rev-head h2 .accent {
  background: linear-gradient(120deg, var(--ms-brand), var(--ms-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ms-brand);
}
.rev-head p {
  color: var(--ms-muted);
  font-size: 16.5px;
}

/* ================= marquee ================= */
.rev-marquee {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.t-row {
  overflow: hidden;
  padding: 14px 0 28px;
}
.t-track {
  display: flex;
  gap: 22px;
  align-items: flex-start; /* cards keep their own height; siblings never stretch */
  width: max-content;
  animation: t-scroll 75s linear infinite;
}
/* pause entire row when ANY card inside is expanded */
.t-row:has(.t-card.is-expanded) .t-track,
.t-row:hover .t-track {
  animation-play-state: paused;
}
@keyframes t-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.3333%);
  }
}

/* ================= card ================= */
.t-card {
  position: relative;
  width: var(--card-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: 24px 24px 20px;
  box-shadow: 0 4px 16px -10px rgba(10, 82, 140, 0.1);
  transition:
    transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.38s,
    border-color 0.38s,
    width 0.38s;
}

/* gradient border on hover/expanded */
.t-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    var(--ms-brand),
    var(--ms-brand-2) 50%,
    var(--ms-accent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.38s;
  pointer-events: none;
}
.t-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px 220px at 88% -4%,
    rgba(27, 156, 229, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.38s;
  pointer-events: none;
}
.t-card:hover,
.t-card.is-expanded {
  transform: translateY(-7px) scale(1.012);
  border-color: transparent;
  box-shadow:
    0 24px 48px -20px rgba(10, 82, 140, 0.3),
    0 8px 18px -10px rgba(10, 82, 140, 0.16);
}
.t-card:hover::before,
.t-card.is-expanded::before {
  opacity: 1;
}
.t-card:hover::after,
.t-card.is-expanded::after {
  opacity: 1;
}

/* ---- profile top ---- */
.t-person {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ms-line);
}
.t-ava {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 14px -6px rgba(10, 82, 140, 0.4);
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.t-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .t-ring {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  left: 24px;
  top: 24px;
  border: 2px solid var(--ms-accent);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.38s,
    transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
  z-index: 2;
} */
.t-card:hover .t-ava,
.t-card.is-expanded .t-ava {
  transform: scale(1.06);
}
.t-card:hover .t-ring,
.t-card.is-expanded .t-ring {
  opacity: 1;
  transform: scale(1.22);
}

.av-1 {
  background: linear-gradient(135deg, #0a6ebd, #1b9ce5);
}
.av-2 {
  background: linear-gradient(135deg, #0a5a9c, #0a6ebd);
}
.av-3 {
  background: linear-gradient(135deg, #f7941d, #fbb03b);
}
.av-4 {
  background: linear-gradient(135deg, #08436f, #0a6ebd);
}

.t-who {
  min-width: 0;
}
.t-who b {
  display: block;
  font-size: 15px;
  color: var(--ms-ink);
  margin-bottom: 3px;
  transition: color 0.3s;
}
.t-card:hover .t-who b,
.t-card.is-expanded .t-who b {
  color: var(--ms-brand);
}
.t-who span {
  display: block;
  font-size: 12.5px;
  color: var(--ms-muted);
  line-height: 1.4;
  margin-bottom: 5px;
}
.t-stars {
  display: flex;
  gap: 3px;
  color: var(--ms-accent);
  font-size: 11px;
}
.t-quote-ic {
  margin-left: auto;
  align-self: flex-start;
  color: var(--ms-chip);
  font-size: 30px;
  line-height: 1;
  transition:
    color 0.38s,
    transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.t-card:hover .t-quote-ic,
.t-card.is-expanded .t-quote-ic {
  color: var(--ms-brand-2);
  transform: rotate(-10deg) scale(1.08);
}

/* ---- quote body ---- */
.t-body {
  position: relative;
  z-index: 1;
}

/* 2-line clamp (collapsed state) */
.t-quote {
  font-size: 14px;
  line-height: 1.68;
  color: #42586d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s;
}

/* expanded state: remove clamp, highlight the text */
.t-card.is-expanded .t-quote {
  display: block; /* removes the -webkit-box clamping */
  overflow: visible;
  color: var(--ms-ink);
  background: linear-gradient(
    135deg,
    rgba(10, 110, 189, 0.07),
    rgba(27, 156, 229, 0.04)
  );
  border-left: 3px solid var(--ms-brand);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 2px;
}

/* read more / read less button */
.t-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-brand);
  background: var(--ms-chip);
  border: 1px solid rgba(10, 110, 189, 0.2);
  padding: 5px 13px;
  border-radius: 99px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.2s;
  user-select: none;
}
.t-readmore:hover {
  background: var(--ms-brand);
  color: #fff;
  border-color: var(--ms-brand);
  transform: translateY(-1px);
}
.t-readmore i {
  font-size: 10px;
  transition: transform 0.3s;
}
.t-card.is-expanded .t-readmore i {
  transform: rotate(180deg);
}

/* ================= responsive ================= */
@media (max-width: 560px) {
  :root {
    --card-w: 318px;
  }
  .reviews-section {
    padding: 72px 0 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-track {
    animation: none !important;
  }
  .t-row {
    overflow-x: auto;
  }
  .rev-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .t-card,
  .t-ava,
  .t-ring,
  .t-quote-ic,
  .t-quote,
  .t-readmore {
    transition: none;
  }
}
.client-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .logo-slider-wrap::before,
  .logo-slider-wrap::after {
    width: 40px;
  }
  .logo-track {
    gap: 16px;
  }
  .client-card {
    min-width: 180px;
    width: 180px;
  }
}

@media (max-width: 768px) {
  .logo-slider-wrap::before,
  .logo-slider-wrap::after {
    display: none;
  }
  .why-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .logo-slider-wrap::before,
  .logo-slider-wrap::after {
    width: 20px;
  }
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav {
    display: block;
  }
  .hero-inner {
    padding: 0;
  }
}

@media (max-width: 320px) {
  .modules-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .nav {
    position: relative;
    display: block;
  }
  .btn-submit {
    padding: 15px 10px;
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .stats-inner {
    grid-template-columns: 1fr;
    gap: 70px;
  }
  .modules-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ==========================
   CARD IMAGE BACKGROUNDS
========================== */

.mod-front,
.mod-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
}

/* Dark Overlay */
.mod-front::before,
.mod-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* Content Above Overlay */
.mod-front > *,
.mod-back > * {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* Back Side */
.mod-back {
  transform: rotateY(180deg);
}

/* ==========================
   MODULE IMAGES
========================== */

.admission .mod-front,
.admission .mod-back {
  background: url("../img/admission.jfif") center center / cover no-repeat;
}

.attendance .mod-front,
.attendance .mod-back {
  background: url("../img/attendance.jfif") center center / cover no-repeat;
}

.fees .mod-front,
.fees .mod-back {
  background: url("../img/fees.png") center center / cover no-repeat;
}

.payroll .mod-front,
.payroll .mod-back {
  background: url("../img/payroll.jfif") center center / cover no-repeat;
}

.transport .mod-front,
.transport .mod-back {
  background: url("../img/transport.jfif") center center / cover no-repeat;
}

.exam .mod-front,
.exam .mod-back {
  background: url("../img/exam.jfif") center center / cover no-repeat;
}

.library .mod-front,
.library .mod-back {
  background: url("../img/library.png") center center / cover no-repeat;
}

.stock .mod-front,
.stock .mod-back {
  background: url("../img/stock.png") center center / cover no-repeat;
}

.timetable .mod-front,
.timetable .mod-back {
  background: url("../img/timetable-module.png") center center / cover no-repeat;
}

.employee .mod-front,
.employee .mod-back {
  background: url("../img/employee-manager.png") center center / cover no-repeat;
}

.accounting .mod-front,
.accounting .mod-back {
  background: url("../img/accounting-manager.png") center center / cover no-repeat;
}

.hostel .mod-front,
.hostel .mod-back {
  background: url("../img/hostel-manage.png") center center / cover no-repeat;
}

.parentlogin .mod-front,
.parentlogin .mod-back {
  background: url("../img/student-parent-login.png") center center / cover no-repeat;
}

.teacherlogin .mod-front,
.teacherlogin .mod-back {
  background: url("../img/school-teacher-login.png") center center / cover no-repeat;
}

.inbox .mod-front,
.inbox .mod-back {
  background: url("../img/student-inbox-manager.png") center center / cover no-repeat;
}

.website .mod-front,
.website .mod-back {
  background: url("../img/seamless-integration.png") center center / cover no-repeat;
}

.mobileapp .mod-front,
.mobileapp .mod-back {
  background: url("../img/mobile-app.png") center center / cover no-repeat;
}

.assignment .mod-front,
.assignment .mod-back {
  background: url("../img/online-assignments.png") center center / cover no-repeat;
}
.mod-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* darkness */
  z-index: 1;
  pointer-events: none;
}

.mod-back .back-content,
.mod-back h3,
.mod-back p,
.mod-back .btn,
.mod-back a {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
  display: inline-block;
}
.app-img {
  display: flex;
  padding-top: 11px;
}

.app-img img {
  width: 120px;
}
.links {
  display: flex;
  align-items: center;
  gap: 15px;
}
.links a {
  font-size: 13px;
  font-weight: 700;
  color: #2f2e2e;
  text-decoration: none;
}

@media (max-width: 450px) {
  .nav-cta {
    display: block;
    padding: 10px 20px;
  }
  .nav-cta a {
    margin: 5px 0;
  }
  .links a {
    font-size: 13px;
  }
  .btn-hero-primary {
    padding: 14px 25px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CSM BLOG — SINGLE POST  (scoped under .blg)
   ═══════════════════════════════════════════════════════════ */
.blg {
  --blue: #0a6ebd;
  --blue-d: #075a9c;
  --orange: #f7941d;
  --navy: #0b1628;
  --ink: #0b1628;
  --body: #2b3a48;
  --muted: #5b6b7f;
  --line: #e7eef6;
  --bg: #f5f9fd;
  --card: #fff;
  --radius: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 10px 30px -12px rgba(11, 22, 40, 0.16);
  --shadow-lg: 0 28px 60px -20px rgba(11, 22, 40, 0.28);
  background: var(--bg);
  color: var(--ink);
}
.blg * {
  box-sizing: border-box;
}
.blg .blg-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── reading progress bar ── */
.blg-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transition: width 0.08s linear;
}

/* ── article header ── */
.blg .blg-post-head {
  background: linear-gradient(180deg, #eef5fc 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 34px 0 40px;
  text-align: center;
}
.blg .blg-crumb {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.blg .blg-crumb a {
  color: var(--muted);
  text-decoration: none;
}
.blg .blg-crumb a:hover {
  color: var(--blue);
}
.blg .blg-crumb .sep {
  margin: 0 8px;
  opacity: 0.6;
}
.blg .blg-post-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.blg .blg-post-title {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.14;
  font-weight: 850;
  letter-spacing: -0.025em;
  max-width: 820px;
  margin: 0 auto 16px;
}
.blg .blg-post-dek {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 26px;
}
.blg .blg-post-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.blg .blg-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.blg .av-blue {
  background: linear-gradient(135deg, #0a6ebd, #075a9c);
}
.blg .av-teal {
  background: linear-gradient(135deg, #0e7c66, #2fbf9a);
}
.blg .av-orange {
  background: linear-gradient(135deg, #f7941d, #e07d05);
}
.blg .av-purple {
  background: linear-gradient(135deg, #5b46c4, #8a72e8);
}
.blg .blg-post-meta .txt {
  text-align: left;
  line-height: 1.3;
}
.blg .blg-post-meta .nm {
  font-weight: 700;
  font-size: 0.92rem;
}
.blg .blg-post-meta .sb {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── hero image ── */
.blg .blg-hero-img {
  position: relative;
  max-width: 1000px;
  margin: -24px auto 0;
  padding: 0 22px;
}
.blg .blg-hero-img .frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16/7;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--g1, #0a6ebd), var(--g2, #5aa9e6));
}
.blg .blg-hero-img .frame .ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 3.4rem;
}
.blg .blg-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── body layout: sticky rail + article ── */
.blg .blg-post-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 720px);
  gap: 52px;
  justify-content: center;
  align-items: start;
  padding: 52px 22px 20px;
}
.blg .blg-rail {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.blg .blg-rail-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* table of contents */
.blg .blg-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
}
.blg .blg-toc li {
  margin: 0;
}
.blg .blg-toc a {
  display: block;
  padding: 8px 0 8px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  transition:
    color 0.25s,
    border-color 0.25s;
}
.blg .blg-toc a:hover {
  color: var(--ink);
}
.blg .blg-toc a.is-active {
  color: var(--blue);
  border-color: var(--blue);
  font-weight: 700;
}

/* share rail */
.blg .blg-share {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.blg .blg-share .row {
  display: flex;
  gap: 9px;
}
.blg .blg-share button,
.blg .blg-share a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.blg .blg-share button:hover,
.blg .blg-share a:hover {
  transform: translateY(-3px);
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}
.blg .blg-copied {
  font-size: 0.76rem;
  color: #0e7c66;
  font-weight: 700;
  height: 14px;
}

/* ── article typography ── */
.blg .blg-article {
  font-size: 1.07rem;
}
.blg .blg-article > p {
  color: var(--body);
  line-height: 1.8;
  margin: 0 0 1.25em;
}
.blg .blg-article > p:first-of-type {
  font-size: 1.18rem;
  color: var(--ink);
}
.blg .blg-article h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 1.9em 0 0.55em;
  scroll-margin-top: 104px;
}
.blg .blg-article h3 {
  font-size: 1.16rem;
  font-weight: 750;
  margin: 1.5em 0 0.4em;
}
.blg .blg-article ul,
.blg .blg-article ol {
  margin: 0 0 1.4em;
  padding-left: 0;
  list-style: none;
}
.blg .blg-article ul li,
.blg .blg-article ol li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.7em;
  color: var(--body);
  line-height: 1.7;
}
.blg .blg-article ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  transform: rotate(45deg);
}
.blg .blg-article ol {
  counter-reset: li;
}
.blg .blg-article ol li {
  counter-increment: li;
}
.blg .blg-article ol li::before {
  content: counter(li);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(10, 110, 189, 0.1);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.blg .blg-article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blg .blg-article blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 4px solid var(--blue);
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.blg .blg-callout {
  display: flex;
  gap: 15px;
  background: rgba(10, 110, 189, 0.06);
  border: 1px solid rgba(10, 110, 189, 0.16);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  margin: 1.8em 0;
}
.blg .blg-callout i {
  color: var(--blue);
  font-size: 1.3rem;
  margin-top: 2px;
}
.blg .blg-callout p {
  margin: 0;
  color: var(--body);
  line-height: 1.7;
}
.blg .blg-callout strong {
  color: var(--ink);
}
.blg figure {
  margin: 2em 0;
}
.blg figure .frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0787a8, #3cc6dd);
}
.blg figure .frame .ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.4rem;
}
.blg figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blg figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 10px;
}

.blg .blg-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0.6em 0 1.4em;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(10, 110, 189, 0.7);
  transition: transform 0.3s var(--ease);
}
.blg .blg-inline-cta:hover {
  transform: translateY(-2px);
}
.blg .blg-inline-cta i {
  transition: transform 0.3s var(--ease);
}
.blg .blg-inline-cta:hover i {
  transform: translateX(4px);
}

/* ── tags ── */
.blg .blg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 36px 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.blg .blg-tags a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s;
}
.blg .blg-tags a:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* ── author bio ── */
.blg .blg-bio {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.blg .blg-bio .blg-avatar {
  width: 60px;
  height: 60px;
  font-size: 1.1rem;
  flex: none;
}
.blg .blg-bio .nm {
  font-weight: 800;
  font-size: 1.05rem;
}
.blg .blg-bio .rl {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 3px;
}

/* ── prev/next ── */
.blg .blg-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 0;
}
.blg .blg-nav a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
}
.blg .blg-nav a:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.blg .blg-nav .lbl {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.blg .blg-nav .t {
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.35;
}
.blg .blg-nav .next {
  text-align: right;
}

/* ── related ── */
.blg .blg-section {
  padding: 56px 0;
}
.blg .blg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(10, 110, 189, 0.08);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.blg .blg-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.blg .blg-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
}
.blg .blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.blg .blg-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s;
}
.blg .blg-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.blg .blg-card:hover .blg-thumb img {
  transform: scale(1.07);
}
.blg .blg-card:hover .blg-arrow {
  transform: translateX(5px);
}
.blg .blg-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--g1, #0a6ebd), var(--g2, #5aa9e6));
}
.blg .blg-thumb .ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.2rem;
}
.blg .blg-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.blg .blg-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(11, 22, 40, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.blg .g-blue {
  --g1: #0a6ebd;
  --g2: #5aa9e6;
}
.blg .g-teal {
  --g1: #0e7c66;
  --g2: #2fbf9a;
}
.blg .g-orange {
  --g1: #f7941d;
  --g2: #ffbe6b;
}
.blg .g-purple {
  --g1: #5b46c4;
  --g2: #9d86f0;
}
.blg .g-navy {
  --g1: #0b1628;
  --g2: #2c4a73;
}
.blg .g-cyan {
  --g1: #0787a8;
  --g2: #3cc6dd;
}
.blg .blg-card-title {
  font-size: 1.1rem;
  line-height: 1.32;
  font-weight: 750;
  margin: 14px 8px 8px;
}
.blg .blg-card-title a {
  color: inherit;
  text-decoration: none;
}
.blg .blg-card-title a:hover {
  color: var(--blue);
}
.blg .blg-card-meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 8px 12px;
}
.blg .blg-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.blg .blg-read .blg-arrow {
  transition: transform 0.3s var(--ease);
}

/* ── newsletter ── */
.blg .blg-news {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy), #123a63);
  color: #fff;
  padding: 52px 44px;
  text-align: center;
}
.blg .blg-news::before,
.blg .blg-news::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
}
.blg .blg-news::before {
  width: 280px;
  height: 280px;
  background: rgba(10, 110, 189, 0.6);
  top: -90px;
  left: -60px;
  animation: blgFloat 9s ease-in-out infinite;
}
.blg .blg-news::after {
  width: 240px;
  height: 240px;
  background: rgba(247, 148, 29, 0.45);
  bottom: -90px;
  right: -50px;
  animation: blgFloat 11s ease-in-out infinite reverse;
}
.blg .blg-news > * {
  position: relative;
  z-index: 1;
}
.blg .blg-news h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 10px;
}
.blg .blg-news p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.blg .blg-news-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.blg .blg-news-form input {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 1rem;
  outline: none;
}
.blg .blg-news-form button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.3s var(--ease);
}
.blg .blg-news-form button:hover {
  transform: translateY(-2px);
}
.blg .blg-news-ok {
  margin-top: 16px;
  font-weight: 600;
  color: #8ff0c8;
  display: none;
}
.blg .blg-news-ok.is-shown {
  display: block;
}

/* ── back to top ── */
.blg-top {
  position: fixed;
  bottom: 92px;
  right: 26px;
  z-index: 900;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.blg-top.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ═══ animation ═══ */
.blg.is-js .blg-reveal {
  opacity: 0;
  transform: translateY(24px);
}
.blg .blg-reveal {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.blg .blg-reveal.is-in {
  opacity: 1;
  transform: none;
}
@keyframes blgFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(14px, -18px);
  }
}

/* ═══ responsive ═══ */
@media (max-width: 980px) {
  .blg .blg-post-layout {
    grid-template-columns: minmax(0, 720px);
  }
  .blg .blg-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    top: auto;
  }
  .blg .blg-toc {
    display: none;
  }
  .blg .blg-share {
    flex-direction: row;
  }
  .blg .blg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .blg .blg-grid {
    grid-template-columns: 1fr;
  }
  .blg .blg-nav {
    grid-template-columns: 1fr;
  }
  .blg .blg-news-form {
    flex-direction: column;
  }
  .blg .blg-news {
    padding: 40px 22px;
  }
}

/* ═══ reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .blg.is-js .blg-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .blg *,
  .blg *::before,
  .blg *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}
.social-sidebar a:hover {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDER — Dynamic Accent Overlays
   These replace the old .slide-1 .slide-overlay-accent etc.
   Now the PHP loops and assigns slide-accent-1/2/3/4 cyclically
   so it works for any number of slides (1–6+).
   ══════════════════════════════════════════════════════════════ */

.slide-accent-1 {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(10, 110, 189, 0.22) 0%,
    transparent 70%
  );
}

.slide-accent-2 {
  background: radial-gradient(
    ellipse 55% 70% at 75% 45%,
    rgba(10, 110, 189, 0.28) 0%,
    transparent 68%
  );
}

.slide-accent-3 {
  background: radial-gradient(
    ellipse 60% 80% at 78% 55%,
    rgba(10, 110, 189, 0.2) 0%,
    transparent 68%
  );
}

.slide-accent-4 {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(247, 148, 29, 0.18) 0%,
    transparent 68%
  );
}

/* ── Keep old hardcoded slide-N classes as aliases (backward compat) ── */
.slide-1 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(10, 110, 189, 0.22) 0%,
    transparent 70%
  );
}
.slide-2 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 55% 70% at 75% 45%,
    rgba(10, 110, 189, 0.28) 0%,
    transparent 68%
  );
}
.slide-3 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 78% 55%,
    rgba(10, 110, 189, 0.2) 0%,
    transparent 68%
  );
}
.slide-4 .slide-overlay-accent {
  background: radial-gradient(
    ellipse 60% 80% at 80% 50%,
    rgba(247, 148, 29, 0.18) 0%,
    transparent 68%
  );
}

/* ══════════════════════════════════════════
   INNER PAGE HERO — dark navy with bg image
   Used on: Modules, About, Why CSM pages
   ══════════════════════════════════════════ */
.inner-hero {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0B1628;
}

.inner-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.inner-hero-bgimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
}

.inner-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 22, 40, 0.92) 0%,
    rgba(11, 22, 40, 0.65) 50%,
    rgba(10, 110, 189, 0.25) 100%
  );
}

.inner-hero-content {
  position: relative;
  z-index: 1;
  padding-top: 60px;
  /* padding-bottom: 60px; */
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: #F7941D; }
.bc-sep { color: rgba(255,255,255,0.3); }
.bc-current { color: #F7941D; font-weight: 600; }

/* Title */
.inner-hero-title {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.inner-hero-title .accent { color: #0A6EBD; }

/* Orange underline bar */
.inner-hero-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: #F7941D;
  border-radius: 2px;
  margin-top: 16px;
}

/* ── Flip card bg image overlay ── */
.mod-front { position: relative; overflow: hidden; }
.mod-front-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 22, 40, 0.88) 0%,
    rgba(11, 22, 40, 0.45) 55%,
    rgba(11, 22, 40, 0.15) 100%
  );
  z-index: 0;
}
.mod-front .mod-icon,
.mod-front h3,
.mod-front .mod-hint { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .inner-hero { min-height: 240px; }
  .inner-hero-title { font-size: 32px; }
}

/* ── Modules page intro content (from WP editor) ── */
.modules-page-intro {
  /* background: #fff; */
  padding: 48px 0 32px;
  /* border-bottom: 1px solid #eef0f4; */
}

.modules-intro-inner {
  /* max-width: 860px; */
}

.modules-intro-inner h1,
.modules-intro-inner h2 {
font-size: 34px;
    font-weight: 900;
    color: #0B1628;
    margin: 0 0 16px;
    line-height: 1.3;
}

.modules-intro-inner p {
  font-size: 16px;
  line-height: 1.75;
  color: #4a5568;
  margin: 0 0 12px;
}

.modules-intro-inner p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   FOOTER ADDITIONS — new elements
   ══════════════════════════════════════════════════ */

/* ── Quick Links with icon prefix ── */
.footer-links--icons li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: color 0.2s;
  padding: 3px 0;
}
.footer-links--icons li a:hover { color: #F7941D; }

/* WP nav_menu adds icons via CSS for each link */
.footer-links--icons li a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: rgba(247,148,29,0.15);
  border-radius: 4px;
  border: 1px solid rgba(247,148,29,0.3);
  flex-shrink: 0;
}

/* ── Contact cards (phone/email/website) ── */
.footer-contact--cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  transition: background 0.2s, border-color 0.2s;
}
.contact-card:hover {
  background: rgba(10,110,189,0.12);
  border-color: rgba(10,110,189,0.3);
}

.contact-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(10,110,189,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card-icon i {
  color: #0A6EBD;
  font-size: 14px;
}

.contact-card a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  transition: color 0.2s;
}
.contact-card a:hover { color: #F7941D; }

/* ── App section tagline ── */
.footer-app-tagline {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 240px;
}

/* ── Store buttons ── */
.footer-apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0d1f3c;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  max-width: 200px;
}
.store-btn:hover {
  background: #152d55;
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
  color: #fff;
}

.store-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.store-btn-text small {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.store-btn-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* ── Footer logo white filter ── */
.footer-logo img {
  filter: brightness(0) invert(1);
  height: 48px;
  width: auto;
  margin-bottom: 16px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .store-btn { max-width: 100%; }
}


/* ══════════════════════════════════════════════════
   MODULE SINGLE PAGE — .modx styles
   ══════════════════════════════════════════════════ */
.modx-band-wrap {
    padding:  40px 20px;
    max-width: 1180px;
    margin: 0 auto;
}
.modx-band h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    color: #fff;
}
.modx-band .btn-primary {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.4);
}
.modx-band p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 1000px;
    margin: 0 auto 24px;
    line-height: 1.6;
}
.modx-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    text-align: center;
    /* background: beige; */
    color: #fff;
    background: linear-gradient(135deg, #0a6ebd, #075a9c);
    padding: 52px 40px;
}

.modx-layout h5 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    background: rgba(10, 110, 189, 0.08);
    padding: 7px 14px;
    border-radius: 999px;
    margin: 11px 0;
}

.modx-layout {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
    /* margin: 30px 0; */
}

.modx-layout ul {
    /* display: grid; */
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    /* white-space: nowrap; */
    gap: 6px 26px;
    padding: 10px 0;
}

.modx-layout h4 {display: inline-block;font-size: 18px;padding: 15px 0 7px;border-bottom: 2px solid #f47101;margin-bottom: 6px;border-radius: 8px;}

/* ══════════════════════════════════════════════════
   TRUSTED SCHOOLS — Marquee Slider Section
   ══════════════════════════════════════════════════ */

/* Section wrapper */
.sch-section {
  background: #eef3fb;
  padding: 64px 0 72px;
  overflow: hidden;
}

/* Heading block */
.sch-head {
  text-align: center;
  margin-bottom: 44px;
}

.sch-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 37px;
  font-weight: 800;
  color: #0B1628;
  line-height: 1.3;
  padding-bottom: 0;
  margin-bottom: 0;
}

.sch-accent {
  color: #0A6EBD;
}

/* ── Marquee outer — clips overflow, positions edge fades ── */
.sch-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Prevent layout shift while JS loads */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* ── Track — flex row. Movement is handled by JS rAF scroller (no CSS animation). ── */
.sch-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 50px 0;
  will-change: transform;  /* GPU compositing hint */
}
form.wpcf7-form.init {
    padding: 0;
}
.wpcf7-form.invalid {
    padding: 0px;
}
/* ── Individual school card ── */
/* ── Card default state — matches screenshot exactly ── */
.sch-card {
  background: #ffffff;
  border: 1.5px solid #dde6f5;       /* subtle cool-blue border at rest */
  border-radius: 16px;
  padding: 28px 22px 22px;
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(10, 110, 189, 0.05);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* Blue bottom accent bar — hidden at rest, slides in on hover */
.sch-card::after {
  /* content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0A6EBD;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
  border-radius: 0 0 16px 16px; */
}

/* ── Hover state — full blue border + lift + bottom bar ── */
.sch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(10, 110, 189, 0.16);
  border-color: #0A6EBD;             /* full blue border on hover */
}

.sch-card:hover::after {
  transform: scaleX(1);
}

/* ── Logo — sits directly on card, no circle bg ── */
.sch-logo-wrap {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* No background, no border-radius — clean like the screenshot */
}

.sch-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* contain = no crop, shows full circular logo */
  filter: none;
  transition: transform 0.3s ease;
}

.sch-card:hover .sch-logo-wrap img {
  transform: scale(1.06);             /* subtle zoom on hover */
}

/* Fallback icon when no logo uploaded */
.sch-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A6EBD;
  font-size: 32px;
}

/* ── School name — bold, dark navy ── */
.sch-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0B1628;
  line-height: 1.4;
  margin: 0;
  transition: color 0.25s;
}

.sch-card:hover .sch-name {
  color: #0A6EBD;
}

/* ── City — blue with pin icon ── */
.sch-city {
  font-size: 12.5px;
  font-weight: 500;
  color: #0A6EBD;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sch-city i {
  font-size: 11px;
}

/* Pause on hover is handled by JS — no CSS animation-play-state needed */

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sch-marquee-track {
    animation: none;
  }
  .sch-marquee-wrap {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 12px;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .sch-section {
    padding: 48px 0 56px;
  }
  .sch-card {
    width: 160px;
    padding: 20px 14px 16px;
  }
  .sch-logo-wrap {
    width: 72px;
    height: 72px;
  }
  .sch-title {
    font-size: 27px;
    padding: 0 20px;
  }
}
/* ══════════════════════════════════════════════════
   MODULES SECTION — View All CTA Button
   ══════════════════════════════════════════════════ */
.modules-cta-wrap {
  text-align: center;
  margin-top: 48px;
}

.modules-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, #096ebe, #1b9be4);
  /* border: 1px solid #0A6EBD; */
  padding: 14px 32px;
  border-radius: 99px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

.modules-cta-btn svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.modules-cta-btn:hover {
  /* background: transparent; */
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(10, 110, 189, 0.28);
  transform: translateY(-2px);
}

.modules-cta-btn:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   INNER HERO BANNER — updates to existing rules
   (already have .inner-hero base, these fill missing pieces)
   ============================================================ */

/* Image opacity increased to match screenshot */
.inner-hero-bgimg {
  opacity: 0.75;
}

/* Breadcrumb flex-wrap for long titles on mobile */
.breadcrumb {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Title responsive extra breakpoint */
@media (max-width: 480px) {
  .inner-hero-title         { font-size: 26px; }
  .inner-hero-title::after  { width: 40px; margin-top: 14px; }
  .inner-hero-content       { padding-top: 36px; padding-bottom: 36px; }
}

/* ============================================================
   WHY CSM PAGE — FINAL CSS
   Paste this at bottom of main.css
   OR replace existing wcsm block (lines 14270–14456)
   ============================================================ */

/* ── Intro ─────────────────────────────────────────────────── */
.wcsm-intro {
  padding: 56px 0 40px;
  background: #fff;
}
.wcsm-intro-body h2 {
  margin: 0;
}
.wcsm-intro-body p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 12px;
}
.wcsm-intro-body p:last-child { margin-bottom: 0; }

/* ── Cards Section ─────────────────────────────────────────── */
.wcsm-features {
  padding: 12px 0 72px;
  /* background: #f0f6ff; */
}

.wcsm-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ── Card — NORMAL STATE ───────────────────────────────────── */
.wcsm-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  /* border-top: 3px solid transparent;  */
  border-radius: 16px;
  padding: 25px;
  transition: box-shadow 0.25s, transform 0.25s, border-top-color 0.25s;
  position: relative;
  cursor: default;
}

/* ── Card — HOVER STATE (Image 2) ──────────────────────────── */
.wcsm-card:hover {
  border-top-color: #0A6EBD;           /* blue top border appears  */
  box-shadow: 0 10px 36px rgba(10, 110, 189, 0.13);
  transform: translateY(-4px) !important;
}

/* ── Number — NORMAL: light grey ──────────────────────────── */
.wcsm-card-num {
  font-size: 52px;
  font-weight: 800;
  color: #00afef;                      /* grey in normal state     */
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -2px;
  margin-top: 2px;
  transition: color 0.25s;
}
/* Number — HOVER: light blue */
.wcsm-card:hover .wcsm-card-num {
  color: #93c5fd;                      /* light blue on hover      */
}

/* ── Card Header (number + title row) ─────────────────────── */
.wcsm-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* margin-bottom: 14px; */
}

/* ── Title — NORMAL: dark navy ─────────────────────────────── */
.wcsm-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #0B1628;                      /* dark in normal state     */
  margin: 6px 0 0;
  /* line-height: 1.3; */
  transition: color 0.25s;
}
/* Title — HOVER: blue */
.wcsm-card:hover .wcsm-card-title {
  color: #0A6EBD;                      /* blue on hover            */
}

/* ── Description ───────────────────────────────────────────── */
.wcsm-card-desc {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.75;
  margin: 0 0 18px;
}

/* ── Pills Container ───────────────────────────────────────── */
.wcsm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Pill Badge — NORMAL ───────────────────────────────────── */
.wcsm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.wcsm-pill i {
  font-size: 13px;
  color: #94a3b8;                     
  flex-shrink: 0;
  transition: color 0.2s;
}

/* ── Pill Badge — HOVER ────────────────────────────────────── */
.wcsm-card:hover .wcsm-pill {
  background: rgba(10, 110, 189, 0.07);
  border-color: rgba(10, 110, 189, 0.25);
  color: #0A6EBD;
}
.wcsm-card:hover .wcsm-pill i {
  color: #0A6EBD;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .wcsm-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .wcsm-intro    { padding: 40px 0 28px; }
  .wcsm-features { padding: 12px 0 48px; }
  .wcsm-card     { padding: 22px 18px 20px; }
  .wcsm-pill     { font-size: 12px; padding: 6px 11px; }
}

/* Feature List */
.modx-layout ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modx-layout ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 500;
    /* line-height: 1.6; */
    color: #0d2240;
}

/* Green Circle */
.modx-layout ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background: #18a567;
    border-radius: 50%;
}

/* White Tick */
.modx-layout ul li::after {
    content: "✓";
    position: absolute;
    left: 6px;
    top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: none;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

span.wpcf7-spinner {
    display: none;
}
.page-hero.sr-item.sr-visible {
  display: none;
}

/* Minimal pagination styling — scoped to this template */
.blog-page .pagination,
.blog-page .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-page .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e7eef6;
  color: #0B1628;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.blog-page .page-numbers.current {
  background: #0A6EBD;
  border-color: #0A6EBD;
  color: #fff;
}
.blog-page .page-numbers:hover:not(.current) {
  border-color: #0A6EBD;
  color: #0A6EBD;
}
.blog-page article.sr:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(10,110,189,0.14);
}

.blog-single-content p { margin: 0; }
.blog-single-content h2 { font-size: 1.5rem; font-weight: 800; color: #0B1628; margin: 32px 0 14px; }
.blog-single-content h3 { font-size: 1.2rem; font-weight: 800; color: #0B1628; margin: 0; }
.blog-single-content img { border-radius: 12px; margin: 20px 0; }
.blog-single-content a { color: #0A6EBD; font-weight: 600; }
.blog-single-content ul, .blog-single-content ol { 
    margin: 0 0 20px;
    padding-left: 35px;
    list-style: circle; 
}
.blog-single-page ul li {
    text-transform: capitalize;
}
.blog-single-content h5, h6 {
    font-size: 19px;
}
.blog-single-content li { margin-bottom: 0px; }
.blog-single-content blockquote {
  border-left: 4px solid #F7941D;
  background: #f8fafc;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #4a5a6e;
}
.blog-single-content td {
    border: 1px solid #ddd;
    padding: 5px;
}
@media (max-width: 900px) {
  .blog-single-page > div[style*="grid-template-columns:minmax"] { grid-template-columns: 1fr !important; }
  .blog-single-page aside { position: static !important; }
}

.wpcf7 input[type="file"] {
    border: 3px dotted #ddd;
    background: #f1eeeedd;
    align-items: center;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
}
.wpcf7-not-valid-tip {
    font-size: 12px;
}
.wpcf7 form .wpcf7-response-output {
    margin: 11px 0;
    border-radius: 5px;
    background: #dd393921;
    text-align: center;
    font-size: 14px;
    padding: 0.2em 1em;
    border: 1px solid #00a0d2;
}
div#wpcf7-f387-o1 {
    padding: 10px 40px 40px;
}

.csm-overlay .cu-field::after {
  display: none !important;
}
@media (max-width: 768px) {
    .main-content.module-single-page > div[style] {
        grid-template-columns: 1fr !important;
        padding: 30px 16px 0 !important;
    }
	.modx-layout h2 {
    font-size: 19px;
}
	.modx-layout p {
    font-size: 14px;
		]
}