@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* =============================================
     PREMIUM NAVY + PARROT GREEN BRAND PALETTE
     Logo-aligned: White · Navy · Parrot Green
     ============================================= */
  --color-primary: #0A2E52;
  --color-primary-dark: #061E36;
  --color-primary-soft: #103A62;

  --color-accent: #8ED21F;
  --color-accent-hover: #76B817;
  --color-accent-soft: #EAF8F1;

  --color-bg: #F6F9FC;
  --color-surface: #FFFFFF;
  --color-border: #DCE7EF;

  --color-text: #0A2342;
  --color-text-muted: #64748B;
  --color-text-on-dark: #FFFFFF;

  --shadow-card: 0 16px 40px rgba(6, 30, 54, 0.08);
  --shadow-luxury: 0 24px 70px rgba(6, 30, 54, 0.18);

  /* Legacy aliases — preserved for inline styles across pages */
  --green-main: #8ED21F;
  --green-light: #76B817;
  --green-dark: #061E36;
  --green-electric: #8ED21F;
  --g-deep: #061E36;
  --g-dark: #061E36;

  --text-dark: #0A2342;
  --text-secondary: #1A3A5C;
  --text-muted: #64748B;

  --bg-main: #FFFFFF;
  --bg-soft: #F6F9FC;
  --bg-footer: #061E36;

  --border-soft: rgba(6, 30, 54, 0.12);
  --shadow-soft: 0 12px 40px rgba(6, 30, 54, 0.07);
  --shadow-highlight: 0 16px 50px rgba(142, 210, 31, 0.14);

  --radius-card: 20px;
  --radius-button: 999px;
  
  --header-height: 72px;
  --container-width: 1180px;
  --container-padding: clamp(18px, 4vw, 40px);
  --section-space: clamp(72px, 9vw, 130px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { 
  margin: 0; 
  overflow-x: hidden; 
  background: var(--color-bg); 
  color: var(--color-text); 
  font-family: 'DM Sans', system-ui, sans-serif; 
}

/* Layout */
.container { width: min(100% - calc(var(--container-padding) * 2), var(--container-width)); margin-inline: auto; }
.page-section { padding-block: var(--section-space); position: relative; }
.full-screen-section { min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; }
.section-auto { min-height: auto; display: block; }

/* Enhanced Section Highlights */
.section-light { 
  background: linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 100%);
  position: relative;
}
.section-light::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 210, 31, 0.25), transparent);
}
.section-light::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 210, 31, 0.25), transparent);
}

.section-heading { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.section-label { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  margin-bottom: 12px; 
  color: var(--color-accent-deep); 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.14em; 
  text-transform: uppercase; 
  font-family: 'Syne', sans-serif;
  padding: 6px 14px;
  background: var(--color-accent-soft);
  border-radius: 999px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { 
  margin: 0; 
  color: var(--color-text); 
  font-family: "Playfair Display", Georgia, serif; 
  font-weight: 800; 
  letter-spacing: -0.035em; 
}
h1 { font-size: clamp(3rem, 7vw, 6.4rem); line-height: 0.95; }
h2 { font-size: clamp(2.1rem, 4.5vw, 4rem); line-height: 1.05; }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.2; }
p { color: var(--color-text-muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; }
img, svg, video { max-width: 100%; height: auto; }

/* Highlight Header / Navbar */
.site-header { 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  height: 82px; 
  background: rgba(255, 255, 255, 0.96); 
  backdrop-filter: blur(24px) saturate(180%); 
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--color-border); 
  box-shadow: 0 8px 24px rgba(6, 30, 54, 0.06);
  transition: all 0.3s ease;
}
.header-inner { 
  height: 100%; 
  width: min(100% - calc(var(--container-padding) * 2), var(--container-width)); 
  margin-inline: auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}
.brand-logo img { width: clamp(170px, 15vw, 185px); display: block; }
.main-nav { display: flex; align-items: center; gap: 32px; margin: 0 auto; }
.main-nav a { 
  color: var(--color-primary); 
  font-size: 15px; 
  font-weight: 600; 
  text-decoration: none; 
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: color 0.3s ease;
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.main-nav a:hover { color: var(--color-accent-deep); }
.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-links a:hover { color: var(--color-accent-deep); }
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn-ai { background: var(--color-accent); color: var(--color-primary-dark); padding: 0 24px; height: 48px; border-radius: var(--radius-button); display: inline-flex; justify-content: center; align-items: center; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 24px rgba(142, 210, 31, 0.28); border: none; white-space: nowrap; }
.btn-ai:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(142, 210, 31, 0.38); background: var(--color-accent-hover); color: var(--color-primary-dark); }

.btn-outline { background: transparent; color: var(--color-accent); padding: 0 24px; height: 48px; border-radius: var(--radius-button); display: inline-flex; justify-content: center; align-items: center; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s ease; border: 1.5px solid var(--color-accent); white-space: nowrap; }
.btn-outline:hover { background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(142, 210, 31, 0.28); }

.btn-primary { background: var(--color-accent); color: var(--color-primary-dark); padding: 0 24px; height: 48px; border-radius: var(--radius-button); display: inline-flex; justify-content: center; align-items: center; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(142, 210, 31, 0.28); border: 1px solid var(--color-accent); white-space: nowrap; position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transition: all 0.5s ease; }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(142, 210, 31, 0.38); color: var(--color-primary-dark); }
.btn-primary:hover::after { left: 100%; }

.btn-secondary { background: transparent; color: var(--color-accent); padding: 0 24px; height: 48px; border-radius: var(--radius-button); display: inline-flex; justify-content: center; align-items: center; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s ease; border: 1.5px solid var(--color-accent); box-shadow: 0 4px 12px rgba(6, 30, 54, 0.12); white-space: nowrap; }
.btn-secondary:hover { background: var(--color-accent); color: var(--color-primary-dark); border-color: var(--color-accent); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(142, 210, 31, 0.32); }

.btn-light { background: transparent; color: var(--color-primary); padding: 0 24px; height: 48px; border-radius: var(--radius-button); display: inline-flex; justify-content: center; align-items: center; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s ease; border: none; white-space: nowrap; }
.btn-light:hover { color: var(--color-accent-deep); transform: translateY(-2px); }

/* Fallback generic .btn rule */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 48px; 
  padding: 12px 28px; 
  border-radius: var(--radius-button); 
  font-size: 15px; 
  font-weight: 700; 
  text-decoration: none; 
  border: 2px solid transparent; 
  cursor: pointer; 
  white-space: nowrap; 
  font-family: 'DM Sans', system-ui, sans-serif;
}
.mobile-menu-button { display: none; }
.mobile-menu-toggle { display: none; }

/* Mobile Navbar */
@media (max-width: 900px) {
  .site-header { height: 72px; }
  .mobile-menu-toggle { display: block; background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--color-primary); }
  .main-nav, .header-actions { display: none; }
  
  .header-inner.mobile-open .main-nav, .header-inner.mobile-open .header-actions { display: flex; }
  .header-inner.mobile-open .main-nav { position: absolute; top: 72px; left: 18px; right: 18px; flex-direction: column; align-items: stretch; gap: 0; padding: 18px; border-radius: 18px; background: #ffffff; box-shadow: var(--shadow-luxury); border: 1px solid var(--color-border); z-index: 999; }
  .header-inner.mobile-open .main-nav a { padding: 13px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .header-inner.mobile-open .header-actions { position: absolute; top: 320px; left: 18px; right: 18px; flex-direction: column; background: #ffffff; padding: 0 18px 18px; border-radius: 0 0 18px 18px; z-index: 999; }
  .header-inner.mobile-open .header-actions a { width: 100%; margin-bottom: 8px; }
}

/* Enhanced Hero Highlights */
.hero-section { 
  min-height: calc(100svh - var(--header-height)); 
  display: flex; 
  align-items: center; 
  background-color: var(--color-primary-dark);
  background-image: 
    radial-gradient(circle at top right, rgba(142, 210, 31, 0.18), transparent 34%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-soft) 100%);
  padding-block: clamp(64px, 8vw, 120px); 
  border-bottom: 1px solid rgba(142, 210, 31, 0.12);
}
.hero-content { max-width: 860px; margin-inline: auto; text-align: center; }
.hero-badge { 
  display: inline-flex; 
  margin-bottom: 24px; 
  padding: 8px 18px; 
  border-radius: 999px; 
  background: rgba(142, 210, 31, 0.14); 
  color: var(--color-accent); 
  font-size: 13px; 
  font-weight: 700; 
  font-family: 'Syne', sans-serif;
  border: 1px solid rgba(142, 210, 31, 0.28);
  box-shadow: 0 4px 12px rgba(142, 210, 31, 0.1);
}
.hero-title { margin-bottom: 22px; }
.hero-title .highlight {
  color: var(--color-accent);
}
.hero-text { max-width: 680px; margin: 0 auto 36px; font-size: 1.15rem; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-trust-note { margin-top: 32px; font-size: 14px; color: var(--color-accent); font-weight: 600; opacity: 0.85; }

/* Grid / Highlighted Cards */
.grid { display: grid; gap: clamp(20px, 2.5vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card { 
  background: var(--color-surface); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-card); 
  padding: clamp(28px, 3.5vw, 42px); 
  box-shadow: var(--shadow-card); 
  overflow: hidden; 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card:hover { 
  transform: translateY(-8px) scale(1.01); 
  box-shadow: 0 20px 50px rgba(6, 30, 54, 0.12); 
  border-color: rgba(142, 210, 31, 0.28);
}
.card:hover::before { opacity: 1; }
.card-icon { 
  width: 56px; 
  height: 56px; 
  margin-bottom: 24px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 16px; 
  background: var(--color-accent-soft); 
  color: var(--color-accent-deep); 
  font-size: 26px; 
}
.card h3 { 
  margin-bottom: 14px; 
  font-family: 'Syne', serif; 
  font-size: 24px; 
}
.card p { margin: 0; font-size: 15px; }

/* Responsive Grids */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .full-screen-section.has-grid-content { min-height: auto; display: block; }
}
@media (max-width: 768px) {
  :root { --section-space: clamp(56px, 10vw, 82px); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-actions, .cta-actions, .button-row { width: 100%; flex-direction: column; }
  .hero-actions .btn, .cta-actions .btn, .button-row .btn { width: 100%; }
  .full-screen-section, .page-section.has-grid-content, .page-section.has-table-content, .page-section.has-faq-content { min-height: auto; display: block; }
  .card { padding: 24px; }
}
@media (max-width: 480px) {
  :root { --container-padding: 18px; }
  h1 { font-size: clamp(2.45rem, 13vw, 3.5rem); }
  h2 { font-size: clamp(2rem, 10vw, 2.7rem); }
  p { font-size: 15px; }
  .btn { width: 100%; min-height: 48px; }
}

/* Highlighted CTA Block */
.cta-section { padding-block: clamp(80px, 10vw, 140px); }
.cta-box { 
  width: min(100%, 860px); 
  margin-inline: auto; 
  padding: clamp(36px, 5vw, 64px); 
  border-radius: 36px; 
  text-align: center; 
  background:
    radial-gradient(circle at top right, rgba(142, 210, 31, 0.2), transparent 40%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-soft));
  color: #ffffff; 
  box-shadow: 0 24px 60px rgba(6, 30, 54, 0.28);
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, transparent 60%);
  animation: pulseRotate 20s linear infinite;
}
@keyframes pulseRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.cta-box h2 { color: #ffffff; margin-bottom: 20px; position: relative; z-index: 2; }
.cta-box p { color: rgba(255, 255, 255, 0.82); max-width: 640px; margin: 0 auto 36px; position: relative; z-index: 2; font-size: 1.1rem; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 2; }
.cta-box .btn-primary { 
  padding: 14px 32px; border-radius: 999px; font-weight: 800; font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--color-accent); color: var(--color-primary-dark); 
  border: none; box-shadow: 0 10px 28px rgba(142, 210, 31, 0.3); transition: all 0.3s;
}
.cta-box .btn-primary:hover { 
  transform: translateY(-3px); box-shadow: 0 16px 40px rgba(142, 210, 31, 0.4); background: var(--color-accent-hover); color: var(--color-primary-dark);
}
.cta-box .btn-secondary, .cta-box .btn-light { 
  padding: 14px 30px; border-radius: 999px; font-weight: 600; font-family: 'DM Sans', system-ui, sans-serif;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); 
  border: 1.5px solid rgba(255,255,255,0.25); transition: all 0.2s;
}
.cta-box .btn-secondary:hover, .cta-box .btn-light:hover { 
  background: rgba(255,255,255,0.14); color: #ffffff; border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* Footer */
.site-footer { 
  background: var(--color-primary-dark); 
  padding: 64px 0 28px; 
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.35fr; gap: 56px; margin-bottom: 56px; }
.footer-brand p { font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.7; margin-top: 16px; max-width: 320px; }
.footer-logo { display: inline-block; background: #ffffff; padding: 8px 12px; border-radius: 10px; width: fit-content; }
.footer-logo img { width: clamp(150px, 15vw, 170px); display: block; }
.footer-col h5 { text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); font-size: 13px; margin-bottom: 20px; font-family: 'Syne', sans-serif; }
.footer-col a, .footer-col p, .footer-col strong { color: rgba(255, 255, 255, 0.6); font-size: 15px; line-height: 1.6; text-decoration: none; display: block; margin-bottom: 12px; transition: all 0.3s ease; }
.footer-col strong { color: #ffffff; margin-bottom: 4px; font-weight: 600; }
.footer-col a:hover { color: var(--color-accent); transform: translateX(4px); }
.footer-contact a { margin-bottom: 8px; }
.footer-bottom { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.45); font-size: 14px; }
.footer-bottom strong { font-weight: 600; color: #ffffff; }

@media (max-width: 1100px) {
  .footer-inner { gap: 32px; }
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .site-footer { padding: 42px 0 28px; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* Utilities & Animations */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.fade-up { 
  opacity: 0; 
  transform: translateY(40px); 
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}
.fade-up.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .card { transition: none; }
  .card:hover { transform: none; }
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
  .cta-box::before { animation: none; }
}

/* NEW: Marquee Animation */
.marquee-wrapper { overflow: hidden; white-space: nowrap; width: 100%; position: relative; padding: 24px 0; background: var(--color-primary); color: #ffffff; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.marquee-content { display: inline-flex; align-items: center; gap: 40px; animation: scrollMarquee 40s linear infinite; }
.marquee-item { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; display: inline-flex; align-items: center; }
.marquee-item::after { content: '\2022'; margin-left: 40px; color: var(--color-accent); opacity: 0.6; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* NEW: Logo Marquee */
.logo-marquee-wrapper { overflow: hidden; white-space: nowrap; width: 100%; position: relative; padding: 40px 0; background: #ffffff; }
.logo-marquee-content { display: inline-flex; align-items: center; gap: 80px; animation: scrollMarquee 30s linear infinite; }
.logo-marquee-item { height: 40px; opacity: 0.4; filter: grayscale(100%); transition: all 0.3s ease; }
.logo-marquee-item:hover { opacity: 1; filter: grayscale(0%); }

/* NEW: Tech Chips */
.chip-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; margin: 0 auto; }
.tech-chip { padding: 10px 20px; background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--color-text); transition: all 0.3s ease; font-family: 'Syne', sans-serif; }
.tech-chip:hover { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6, 30, 54, 0.2); }

/* NEW: FAQ Accordion */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; font-size: 18px; font-weight: 700; font-family: 'Syne', serif; color: var(--color-text); transition: color 0.3s ease; }
.faq-question:hover { color: var(--color-accent-deep); }
.faq-icon { width: 24px; height: 24px; position: relative; transition: transform 0.3s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--color-accent-deep); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; }
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0; font-size: 16px; color: var(--color-text-muted); line-height: 1.6; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-item.active .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item.active .faq-answer { max-height: 300px; padding-bottom: 24px; }

/* NEW: Star Rating */
.star-rating { color: #FFB800; font-size: 18px; margin-bottom: 16px; letter-spacing: 2px; }

/* NEW: Featured Blog Card */
.featured-blog-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-card); align-items: center; }
.featured-blog-image { background: var(--color-bg); border-radius: 12px; height: 100%; min-height: 300px; }
.featured-blog-content h3 { font-size: 28px; margin-bottom: 16px; }
.featured-blog-content ul { padding-left: 20px; color: var(--color-text-muted); margin-bottom: 24px; }
.featured-blog-content li { margin-bottom: 8px; }
@media (max-width: 768px) { .featured-blog-card { grid-template-columns: 1fr; padding: 24px; } .featured-blog-image { min-height: 200px; } }

/* Floating Widget Fix */
.ai-widget, #ai-chat-widget, .floating-widget {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 28px !important;
  background: var(--color-accent) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 32px rgba(142, 210, 31, 0.35) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.ai-widget *, #ai-chat-widget *, .floating-widget * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  color: var(--color-primary-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-widget span, #ai-chat-widget span, .floating-widget span,
.ai-widget p, #ai-chat-widget p, .floating-widget p,
.ai-widget div, #ai-chat-widget div, .floating-widget div {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.ai-widget svg, #ai-chat-widget svg, .floating-widget svg,
.ai-widget img, #ai-chat-widget img, .floating-widget img,
.ai-widget i, #ai-chat-widget i, .floating-widget i {
  width: 20px !important;
  height: 20px !important;
  fill: var(--color-primary-dark) !important;
  color: var(--color-primary-dark) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.ai-widget:hover, #ai-chat-widget:hover, .floating-widget:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(142, 210, 31, 0.45) !important;
}

@media (max-width: 768px) {
  .ai-widget, #ai-chat-widget, .floating-widget {
    bottom: 16px !important;
    right: 16px !important;
    padding: 14px 24px !important;
  }
  .ai-widget span, #ai-chat-widget span, .floating-widget span,
  .ai-widget p, #ai-chat-widget p, .floating-widget p,
  .ai-widget div, #ai-chat-widget div, .floating-widget div {
    font-size: 14px !important;
  }
}

/* GLOBAL OVERRIDES & RESPONSIVE FIXES */
*, *::before, *::after { box-sizing: border-box; }
.container { width: min(100% - 32px, 1200px); margin: 0 auto; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.3; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.section, .page-section { padding: clamp(2rem, 5vw, 5rem) 0; }
@media (max-width: 768px) { 
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } 
  .hero-content { text-align: center; } 
  .header-actions { display: none; } /* Show in mobile menu instead */
}
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { 
  .btn { width: 100%; margin-bottom: 8px; } 
  .hero-actions { display: flex; flex-direction: column; } 
}
*:focus { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* =========================================
   GLOBAL ANIMATION & MODAL FIXES 
   ========================================= */

/* Fade Up Animations */
.fade-up {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.fade-up.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Modal Overlay Base */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 30, 54, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Box */
.modal {
  background: #ffffff;
  width: min(90%, 500px);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 25px 50px -12px rgba(6, 30, 54, 0.3) !important;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease !important;
  position: relative;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Modal Close Button */
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--color-accent-soft);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.modal-close:hover {
  background: var(--color-border);
  transform: scale(1.05);
}

.modal h2 {
  color: var(--color-primary);
  margin-bottom: 16px;
}

.modal p {
  color: var(--color-text-muted);
  margin-bottom: 24px;
}


/* =========================================
   HOMEPAGE PREMIUM UJ DESIGN SYSTEM
   ========================================= */
:root {
  --uj-green: #061E36;
  --uj-green-2: #8ED21F;
  --uj-dark: #0A2342;
  --uj-muted: #64748B;
  --uj-mint: #EAF8F1;
  --uj-soft: #F6F9FC;
  --uj-border: rgba(6, 30, 54, 0.12);
  --uj-shadow: 0 18px 50px rgba(6, 30, 54, 0.08);
  --uj-radius: 26px;
}

.uj-container {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.uj-section {
  padding-block: clamp(52px, 8vw, 104px);
}

.uj-section-soft {
  background:
    radial-gradient(circle at top left, rgba(142, 210, 31, 0.07), transparent 34%),
    radial-gradient(circle at bottom right, rgba(6, 30, 54, 0.05), transparent 32%),
    var(--uj-soft);
}

.uj-section-head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 56px);
  text-align: center;
}

.uj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--uj-mint);
  border: 1px solid var(--uj-border);
  color: var(--color-accent-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.uj-section-title {
  margin: 0;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--uj-dark);
}

.uj-section-title em,
.uj-highlight {
  color: var(--color-primary);
  font-style: italic;
}

.uj-section-subtitle {
  max-width: 680px;
  margin: 12px auto 0;
  color: var(--uj-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.uj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.uj-card {
  position: relative;
  border-radius: var(--uj-radius);
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--uj-border);
  box-shadow: var(--uj-shadow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.uj-card:hover {
  transform: translateY(-4px);
  border-color: rgba(142, 210, 31, 0.25);
  box-shadow: 0 24px 70px rgba(6, 30, 54, 0.12);
}

.uj-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--uj-mint);
  border: 1px solid var(--uj-border);
  color: var(--color-accent-deep);
  margin-bottom: 16px;
  font-size: 20px;
}

.uj-card-title {
  margin: 0 0 8px;
  color: var(--uj-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.uj-card-text {
  margin: 0;
  color: var(--uj-muted);
  font-size: 15px;
  line-height: 1.6;
}

.uj-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}

.uj-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  transition: 0.25s ease;
  text-decoration: none;
  white-space: nowrap;
}

.uj-btn-primary {
  color: var(--color-primary-dark);
  background: var(--color-accent);
  box-shadow: 0 14px 30px rgba(142, 210, 31, 0.25);
  border: 1px solid var(--color-accent);
}

.uj-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(142, 210, 31, 0.35);
  background: var(--color-accent-hover);
  color: var(--color-primary-dark);
}

.uj-btn-secondary {
  color: var(--color-primary);
  background: #ffffff;
  border: 1.5px solid var(--uj-border);
}

.uj-btn-secondary:hover {
  background: var(--uj-mint);
  border-color: var(--color-primary);
}

.uj-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.uj-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--uj-border);
  color: var(--uj-dark);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(6, 30, 54, 0.05);
}

.uj-logo-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}

.uj-logo-item {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--uj-border);
  box-shadow: 0 10px 26px rgba(6, 30, 54, 0.05);
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.uj-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

.uj-blog-featured {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(22px, 3vw, 36px);
  align-items: stretch;
  overflow: hidden;
}

.uj-blog-image {
  min-height: 280px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 80%, rgba(142, 210, 31, 0.2), transparent 28%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

/* FAQ Tabs */
.uj-faq-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.uj-faq-tab {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--uj-border);
  background: transparent;
  color: var(--uj-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
.uj-faq-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.uj-faq-tab.active {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(142, 210, 31, 0.22);
}

/* Thin Bottom CTA */
.uj-faq-thin-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: 16px;
  padding: 24px 32px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(6, 30, 54, 0.16);
  flex-wrap: wrap;
  gap: 24px;
}
.uj-faq-thin-cta-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.uj-faq-thin-cta-icon {
  font-size: 32px;
  line-height: 1;
}
.uj-faq-thin-cta-text h4 {
  color: #ffffff !important;
  font-size: 18px;
  margin: 0 0 4px;
}
.uj-faq-thin-cta-text p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  margin: 0;
}
.uj-faq-thin-cta .btn {
  width: auto;
  min-height: 44px;
  padding: 0 24px;
  font-size: 14px;
}
@media (max-width: 768px) {
  .uj-faq-thin-cta { flex-direction: column; text-align: center; }
  .uj-faq-thin-cta-left { flex-direction: column; text-align: center; }
}

.uj-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.uj-faq-item {
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--uj-border);
  box-shadow: 0 10px 26px rgba(6, 30, 54, 0.05);
  overflow: hidden;
}

.uj-faq-question {
  padding: 24px;
  font-weight: 700;
  color: var(--uj-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uj-faq-answer {
  padding: 0 24px 24px;
  color: var(--uj-muted);
  font-size: 15px;
  display: none;
}

.uj-faq-item.active .uj-faq-answer {
  display: block;
}

.uj-final-cta {
  border-radius: 32px;
  padding: clamp(34px, 6vw, 70px);
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(142, 210, 31, 0.2), transparent 34%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-soft));
  box-shadow: 0 24px 80px rgba(6, 30, 54, 0.18);
}

.uj-final-cta h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: white;
}

.uj-final-cta p {
  max-width: 680px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1199px) {
  .uj-container {
    width: min(100% - 40px, 1040px);
  }
}

@media (max-width: 991px) {
  .uj-blog-featured {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .uj-container {
    width: min(100% - 28px, 100%);
  }
  .uj-section {
    padding-block: 56px;
  }
  .uj-section-head {
    margin-bottom: 30px;
  }
  .uj-grid {
    grid-template-columns: 1fr;
  }
  .uj-card {
    border-radius: 22px;
    padding: 22px;
  }
  .uj-btn-row {
    flex-direction: column;
    width: 100%;
  }
  .uj-btn-row .uj-btn,
  .uj-btn {
    width: 100%;
  }
  .uj-logo-cloud {
    grid-template-columns: repeat(2, 1fr);
  }
  .uj-blog-image {
    min-height: 220px;
  }
  .uj-final-cta {
    border-radius: 24px;
  }
  .uj-final-cta .uj-btn-row {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .uj-container {
    width: min(100% - 24px, 100%);
  }
  .uj-section-title {
    font-size: clamp(28px, 9vw, 38px);
  }
  .uj-section-subtitle {
    font-size: 15px;
  }
  .uj-chip {
    width: 100%;
  }
  .uj-logo-cloud {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .uj-logo-item {
    min-height: 52px;
    padding: 10px;
  }
}

@media (max-width: 360px) {
  .uj-container {
    width: min(100% - 20px, 100%);
  }
  .uj-card {
    padding: 18px;
  }
  .uj-section {
    padding-block: 48px;
  }
}

@media (min-width: 1440px) {
  .uj-container {
    width: min(100% - 80px, 1240px);
  }
}


/* =========================================
   GLOBAL DARK-SECTION TEXT FIX
   Forces correct text colors on all dark
   hero / CTA / dark-background sections
   across every page — overrides style.min.css
   h1/h2/h3 color: var(--text-dark) globally.
   ========================================= */

/* All dark containers: .hero, .contact-hero, .pg-hero, .sec-dark, .cta-box, .fcta */
.hero,
.contact-hero,
.pg-hero,
.sec-dark,
.cta-box,
.fcta {
  position: relative;
  overflow: hidden;
}

/* Force headings white inside dark sections */
.hero h1, .hero h2, .hero h3, .hero h4,
.contact-hero h1, .contact-hero h2, .contact-hero h3, .contact-hero h4,
.pg-hero h1, .pg-hero h2, .pg-hero h3, .pg-hero h4,
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4,
.cta-box h1, .cta-box h2, .cta-box h3, .cta-box h4,
.fcta h1, .fcta h2, .fcta h3, .fcta h4 {
  color: #ffffff !important;
}

/* Force body text readable inside dark sections */
.hero p, .hero span, .hero li,
.contact-hero p, .contact-hero span, .contact-hero li,
.pg-hero p, .pg-hero span,
.sec-dark p, .sec-dark span,
.cta-box p, .cta-box span,
.fcta p, .fcta span {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Keep em/accent coloring intact */
.hero h1 em, .hero h2 em, .hero h3 em,
.contact-hero h1 em, .contact-hero h2 em,
.pg-hero h1 em, .pg-hero h2 em,
.cta-box h2 em,
.fcta h2 em {
  color: var(--color-accent) !important;
  font-style: normal !important;
}

/* Hero sub-text: slightly brighter */
.hero .hero-hl,
.hero .hero-hl,
.contact-hero .hero-hl {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Hero trust/disclaimer: dimmer */
.hero .hero-trust,
.contact-hero .hero-trust {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Breadcrumb inside dark sections */
.hero .breadcrumb,
.contact-hero .breadcrumb,
.pg-hero .breadcrumb {
  color: rgba(255, 255, 255, 0.4) !important;
}
.hero .breadcrumb a,
.contact-hero .breadcrumb a,
.pg-hero .breadcrumb a {
  color: rgba(142, 210, 31, 0.8) !important;
}

/* Dashboard card text inside dark hero — stays semi-transparent white */
.hero .dash-name,
.contact-hero .dash-name {
  color: rgba(255, 255, 255, 0.85) !important;
}
.hero .dash-lbl,
.contact-hero .dash-lbl {
  color: rgba(255, 255, 255, 0.32) !important;
}
.hero .dr-top,
.contact-hero .dr-top {
  color: rgba(255, 255, 255, 0.85) !important;
}
.hero .dr-val,
.contact-hero .dr-val {
  color: var(--color-accent) !important;
}

/* pg-hero overrides (success-stories, features, 404, job-matches, interview-prep) */
.pg-hero p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Badge text inside dark hero */
.hero .hero-badge,
.contact-hero .hero-badge {
  color: var(--color-accent) !important;
}

/* Dark section .pg-badge */
.pg-hero .pg-badge {
  color: rgba(234, 248, 241, 0.9) !important;
}

/* how-it-works dark comparison section */
.cmp-section h1, .cmp-section h2, .cmp-section h3, .cmp-section h4 {
  color: #ffffff !important;
}
.cmp-section p, .cmp-section span, .cmp-section li {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Floating dots animation */
.fdot {
  background: rgba(142, 210, 31, 0.12) !important;
}

/* =========================================
   FIX BACKGROUND ANIMATION (DARK HERO)
   ========================================= */

/* 1) Animate the dark gradient background on all hero/cta sections */
.hero, .contact-hero, .pg-hero, .sec-dark, .cta-box, .fcta {
  background-size: 200% 200% !important;
  animation: bgGradientAnim 18s ease infinite !important;
}

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

/* 2) Add floating animation to .h-orb shapes in hero sections */
.h-orb {
  animation: orbFloatAnim 14s ease-in-out infinite alternate !important;
}
.h-orb-1 { animation-duration: 18s !important; }
.h-orb-2 { animation-duration: 15s !important; animation-direction: alternate-reverse !important; }
.h-orb-3 { animation-duration: 12s !important; }

@keyframes orbFloatAnim {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.05); }
  100% { transform: translate(15px, -20px) scale(0.95); }
}

.hero, .pricing-hero, .about-hero, .contact-hero, .pg-hero, .hiw-hero { padding-top: 10px !important; }
.hero, .pricing-hero, .about-hero, .contact-hero, .pg-hero, .hiw-hero {
    padding-top: 10px !important;
    padding-bottom: clamp(40px, 5vw, 60px) !important;
}

.btn-gh {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.26) !important;
    backdrop-filter: blur(6px) !important;
}
.btn-gh:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   GLOBAL RESPONSIVE MASTER FIXES
   ========================================= */

@media (max-width: 1180px) {
    .container, .wrap, .uj-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(16px, 4vw, 32px) !important;
        padding-right: clamp(16px, 4vw, 32px) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
    .section, .sec, .uj-section {
        padding-block: clamp(60px, 8vw, 80px) !important;
    }
    
    .hero, .hiw-hero, .page-hero, .contact-hero, .pricing-hero {
        padding-top: clamp(80px, 10vw, 100px) !important;
        padding-bottom: clamp(60px, 8vw, 80px) !important;
    }
    
    .grid-4, .grid-3, .card-grid.grid-3, .card-grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .desktop-nav { display: none !important; }
    .header-actions { display: none !important; }
    .mobile-menu-toggle { display: block !important; }
    
    .hero-grid, .uj-grid-2, .hero-inner .grid-2 {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 30px !important;
    }
    
    .hero-actions, .cta-actions, .button-row, .hero-btns {
        justify-content: center !important;
    }
    
    .hero-trust, .trust-badges {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .comparison-grid, .pricing-grid, .feat-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 20px !important;
    }
    .footer-brand {
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }
    .footer-brand p {
        margin-inline: auto !important;
    }
    
    h1, .hero-title, .hero-h1 {
        font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
        line-height: 1.1 !important;
    }
    
    h2, .sec-title, .section-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    
    .hero-body, .sec-sub, p {
        font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    }
    
    input, select, textarea {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4, .uj-grid, .faq-grid, .card-grid, .process-grid, .bill-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer-inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .hero-btns, .cta-btns, .button-row, .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    .btn, .btn-primary, .btn-secondary, .btn-o, .btn-gh, .uj-btn {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    .card {
        padding: 24px !important;
    }
    
    img, svg, video {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Ensure no horizontal scroll ever */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}


/* =====================================================
   WHITE THEME CONTRAST & CARD BALANCE SYSTEM
   Improves all white/light sections sitewide
   Brand: White · Navy #0A2342 · Parrot Green #8ED21F
   Accessible Green-Blue accent: #8ED21F
   ===================================================== */

/* ─── Global Light Section Background ─── */
body {
  background: #F6F9FC;
}

/* Sections that should alternate to create depth */
.sec-soft,
.section-light,
.uj-section-soft,
.roles-section,
.light-bg {
  background: #F6F9FC !important;
}

/* ─── Text Hierarchy on Light Backgrounds ─── */

/* Primary headings — deep navy */
.sec h2, .sec h3, .sec h4,
.section h2, .section h3, .section h4,
.uj-section h2, .uj-section h3, .uj-section h4,
.sh .st,
.uj-section-title {
  color: #0A2342;
}

/* Body paragraph text — slate, not too light */
.sec p,
.section p,
.uj-section p,
.si,
.uj-section-subtitle,
.uj-card-text {
  color: #34495E !important;
}

/* Fix for dark CTAs overridden by global text color */
.fcta p, .fcta-sub, .cta-sub, .hero-body, .si-light {
  color: rgba(255, 255, 255, 0.9) !important;
}
.fcta h2, .cta-h2, .hero-h1 {
  color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════
   GLOBAL DARK CARD SYSTEM — Navy + Green + White
   ALL card types: dark navy bg · white text · green accents
   ═══════════════════════════════════════════════════ */

/* Master card base */
.step-card,
.svc-card,
.trust-card,
.res-card,
.uj-card,
.card,
.j-card,
.imp-card,
.ba-col,
.cat-card,
.exp-card,
.tc-card,
.story-card,
.testimonial-card,
.review-card,
.testi-card,
.tool-card,
.fc,
.b-card,
.tr-card,
.ui-panel,
.f-sidebar,
.comp-col,
.co-card,
.form-wrap,
.hl-card {
  background: #061E36 !important;
  border: 1px solid rgba(142, 210, 31, 0.18) !important;
  box-shadow: 0 12px 36px rgba(6, 30, 54, 0.32) !important;
  color: #ffffff !important;
}

/* Card hover — green glow border */
.step-card:hover,
.svc-card:hover,
.trust-card:hover,
.res-card:hover,
.uj-card:hover,
.card:hover,
.j-card:hover,
.imp-card:hover,
.ba-col:hover,
.cat-card:hover,
.exp-card:hover,
.tc-card:hover,
.story-card:hover,
.testimonial-card:hover,
.review-card:hover,
.testi-card:hover,
.tool-card:hover,
.fc:hover,
.b-card:hover,
.tr-card:hover,
.comp-col:hover,
.co-card:hover,
.hl-card:hover {
  border-color: rgba(142, 210, 31, 0.58) !important;
  box-shadow:
    0 0 0 1px rgba(142, 210, 31, 0.22),
    0 24px 64px rgba(6, 30, 54, 0.45) !important;
  transform: translateY(-6px) !important;
}

/* Headings inside dark cards → green */
.step-card h1, .step-card h2, .step-card h3, .step-card h4, .step-card h5,
.svc-card  h1, .svc-card  h2, .svc-card  h3, .svc-card  h4, .svc-card  h5,
.trust-card h1,.trust-card h2,.trust-card h3,.trust-card h4,.trust-card h5,
.res-card  h1, .res-card  h2, .res-card  h3, .res-card  h4, .res-card  h5,
.uj-card   h1, .uj-card   h2, .uj-card   h3, .uj-card   h4, .uj-card   h5,
.card h1, .card h2, .card h3, .card h4, .card h5,
.j-card .j-role,
.cat-card h3, .cat-card h4,
.exp-card h3, .exp-card h4,
.tc-card  h3, .tc-card  h4,
.story-card h3, .testimonial-card h3,
.testi-card .testi-name,
.tool-card h3, .tool-card h4,
.fc h3, .fc h4,
.b-card h3, .b-card h4,
.tr-card h3, .tr-card h4,
.ui-panel h3, .ui-panel h4,
.f-sidebar h3, .f-sidebar h4, .f-sidebar .f-title,
.comp-col h3, .comp-col h4,
.co-card h3, .hl-card h3, .fs-h3, .f-lbl,
.step-card h3, .trust-card h3,
.j-title, .imp-card h3, .ba-head h3, .testi-name,
.uj-card-title, .j-cta {
  color: #8ED21F !important;
}

/* Body text inside dark cards → readable white */
.step-card p,  .step-card span,  .step-card small,  .step-card li,
.svc-card  p,  .svc-card  span,  .svc-card  small,  .svc-card li,
.trust-card p, .trust-card span, .trust-card small, .trust-card li,
.res-card  p,  .res-card  span,  .res-card  small,  .res-card li,
.uj-card   p,  .uj-card   span,  .uj-card   small,  .uj-card li,
.card p, .card span, .card small, .card li,
.j-card .j-co, .j-card .j-time, .j-card .j-desc,
.cat-card p, .cat-card li,
.exp-card p,  .tc-card p, .exp-card li, .tc-card li,
.story-card p, .testimonial-card p, .review-card p,
.tool-card p, .tool-card span, .tool-card li,
.fc p, .fc span, .fc li,
.b-card p, .b-card span, .b-card li,
.tr-card p, .tr-card span, .tr-card li,
.ui-panel p, .ui-panel span, .ui-panel li,
.f-sidebar p, .f-sidebar span, .f-sidebar label,
.comp-col p, .comp-col span, .comp-col li,
.co-card p, .hl-card p, .fs-p, .f-check-lbl, .f-desc,
.testi-card .testi-quote, .testi-card .testi-role,
.j-block p, .imp-card p, .ba-list li, .trust-card p,
.j-block strong, .testi-badge,
.uj-card-text, .j-profile {
  color: rgba(255, 255, 255, 0.76) !important;
}



/* Step outline number color */
.step-num {
  -webkit-text-stroke-color: rgba(142, 210, 31, 0.22) !important;
}
.step-card:hover .step-num {
  -webkit-text-stroke-color: rgba(142, 210, 31, 0.65) !important;
}

/* Testi mark (quote character) */
.testi-mark { color: rgba(142, 210, 31, 0.14) !important; opacity: 1 !important; }
.testi-card .testi-author { border-top-color: rgba(255, 255, 255, 0.1) !important; }



/* ─── Icon containers inside dark cards → green-tinted ─── */
.card-icon,
.feature-icon,
.step-icon,
.svc-icon,
.tc-icon,
.exp-icon,
.uj-icon,
.t-icon,
.ui-ph-dot,
.cta-info-icon {
  background: rgba(142, 210, 31, 0.14) !important;
  color: #8ED21F !important;
  border: 1px solid rgba(142, 210, 31, 0.28) !important;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ─── Pills / Badges / Tags ─── */
.svc-card .svc-tag,
.res-card .res-cat {
  background: #8ED21F !important;
  color: #061E36 !important;
  border: none !important;
  font-weight: 800 !important;
}
.rpill,
.copill {
  background: rgba(142, 210, 31, 0.15) !important;
  color: #8ED21F !important;
  border: 1px solid rgba(142, 210, 31, 0.28) !important;
  font-weight: 700 !important;
}

/* UI Panel Tabs for AI Tools */
.ui-tabs {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.ui-tab {
  color: rgba(255, 255, 255, 0.6) !important;
}
.ui-tab.active {
  background: transparent !important;
  color: #8ED21F !important;
  border-bottom-color: #8ED21F !important;
}
.ui-ph {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.j-tag,
.badge,
.tag,
.pill {
  background: rgba(142, 210, 31, 0.14) !important;
  color: #8ED21F !important;
  border: 1px solid rgba(142, 210, 31, 0.18) !important;
}
.rpill:hover,
.copill:hover {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
}

/* ─── Buttons inside dark cards → accent color ─── */
.step-card .btn,
.svc-card .btn,
.trust-card .btn,
.res-card .btn,
.uj-card .btn,
.card .btn,
.j-card .btn,
.cat-card .btn,
.exp-card .btn,
.tc-card .btn,
.story-card .btn,
.testimonial-card .btn,
.review-card .btn,
.testi-card .btn,
.tool-card .btn,
.fc .btn,
.b-card .btn,
.tr-card .btn,
.ui-panel .btn,
.f-sidebar .btn,
.comp-col .btn,
.co-card .btn,
.form-wrap .btn,
.hl-card .btn {
  background: #8ED21F !important;
  color: #061E36 !important;
  border: 1px solid #8ED21F !important;
  box-shadow: 0 10px 24px rgba(142, 210, 31, 0.28) !important;
}
.step-card .btn:hover,
.svc-card .btn:hover,
.trust-card .btn:hover,
.res-card .btn:hover,
.uj-card .btn:hover,
.card .btn:hover,
.j-card .btn:hover,
.cat-card .btn:hover,
.exp-card .btn:hover,
.tc-card .btn:hover,
.story-card .btn:hover,
.testimonial-card .btn:hover,
.review-card .btn:hover,
.testi-card .btn:hover,
.tool-card .btn:hover,
.fc .btn:hover,
.b-card .btn:hover,
.tr-card .btn:hover,
.ui-panel .btn:hover,
.f-sidebar .btn:hover,
.comp-col .btn:hover,
.co-card .btn:hover,
.form-wrap .btn:hover,
.hl-card .btn:hover {
  background: #76B817 !important;
  border-color: #76B817 !important;
}

/* Filter tabs */
.ftab {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1.5px solid rgba(142, 210, 31, 0.28) !important;
  font-weight: 700 !important;
}
.ftab:hover,
.ftab.active {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
  box-shadow: 0 4px 14px rgba(142, 210, 31, 0.28) !important;
}


/* ─── FAQ Items ─── */
.faq-item,
.uj-faq-item {
  background: #FFFFFF !important;
  border: 1px solid #DCE7EF !important;
  box-shadow: 0 4px 14px rgba(6, 30, 54, 0.05) !important;
}
.faq-question,
.uj-faq-question {
  color: #0A2342 !important;
}
.faq-question:hover,
.uj-faq-question:hover {
  color: #8ED21F !important;
}
.faq-answer,
.uj-faq-answer {
  color: #34495E !important;
}

/* ─── Form Inputs on White Backgrounds ─── */
input:not([type="checkbox"]):not([type="radio"]):not(.s-inp):not(.s-inp-wrap input),
textarea,
select {
  background: #FFFFFF !important;
  color: #0A2342 !important;
  border: 1.5px solid #C9D8E5 !important;
}
input::placeholder,
textarea::placeholder {
  color: #52677A !important;
}
input:focus:not([type="checkbox"]):not([type="radio"]):not(.s-inp):not(.s-inp-wrap input),
textarea:focus,
select:focus {
  border-color: #8ED21F !important;
  box-shadow: 0 0 0 3px rgba(142, 210, 31, 0.14) !important;
  outline: none !important;
}

/* ─── Eyebrow / Section Labels ─── */
.eb,
.section-label,
.uj-eyebrow, .eb {
  background: #EAF8F1 !important;
  color: #8ED21F !important;
  border-color: rgba(142, 210, 31, 0.18) !important;
}

/* ─── Step / Resource links → green ─── */
.res-link, .svc-link { color: #8ED21F !important; font-weight: 700 !important; }
.res-link:hover, .svc-link:hover { color: #76B817 !important; }

/* ─── Resource card top strip ─── */
.res-top {
  background: linear-gradient(135deg, rgba(142,210,31,0.22), rgba(6,30,54,0.95)) !important;
  border-bottom: 1px solid rgba(142, 210, 31, 0.2) !important;
}


/* ─── Section Note Strips ─── */
.steps-note,
.info-note {
  background: linear-gradient(135deg, #EAF8F1, #D6F2E8) !important;
  border-color: rgba(142, 210, 31, 0.18) !important;
  color: #061E36 !important;
}

/* ─── White Logo/Company Cloud Items ─── */
.uj-logo-item {
  background: #FFFFFF !important;
  border: 1px solid #DCE7EF !important;
  box-shadow: 0 4px 14px rgba(6, 30, 54, 0.06) !important;
}

/* ─── UJ Chip (Skill tags, etc.) ─── */
.uj-chip {
  background: #FFFFFF !important;
  border-color: #DCE7EF !important;
  color: #0A2342 !important;
}
.uj-chip:hover {
  background: #EAF8F1 !important;
  border-color: rgba(142, 210, 31, 0.25) !important;
}

/* ─── Tech Chips ─── */
.tech-chip {
  background: #EAF8F1 !important;
  border-color: #DCE7EF !important;
  color: #0A2342 !important;
}
.tech-chip:hover {
  background: #061E36 !important;
  color: #FFFFFF !important;
  border-color: #061E36 !important;
}

/* ─── Outline Buttons on Light Backgrounds ─── */
.btn-o,
.btn-outline {
  background: transparent !important;
  color: #8ED21F !important;
  border-color: #8ED21F !important;
}
.btn-o:hover,
.btn-outline:hover {
  background: #8ED21F !important;
  border-color: #8ED21F !important;
  color: #061E36 !important;
}

/* ─── j-card (Find Jobs) ─── */
.j-card {
  background: #061E36 !important;
  border: 1px solid rgba(142, 210, 31, 0.18) !important;
  box-shadow: 0 10px 28px rgba(6, 30, 54, 0.3) !important;
}
.j-card:hover {
  border-color: rgba(142, 210, 31, 0.55) !important;
  box-shadow: 0 20px 48px rgba(6, 30, 54, 0.42) !important;
}
.j-role { color: #8ED21F !important; }
.j-co, .j-time { color: rgba(255,255,255,0.5) !important; }
.j-desc { color: rgba(255,255,255,0.76) !important; }

/* ─── Cat cards ─── */
.cat-card {
  background: #061E36 !important;
  border: 1px solid rgba(142, 210, 31, 0.18) !important;
  box-shadow: 0 8px 24px rgba(6, 30, 54, 0.3) !important;
}
.cat-card:hover {
  border-color: rgba(142, 210, 31, 0.32) !important;
  box-shadow: 0 18px 44px rgba(6, 30, 54, 0.12) !important;
}

/* ─── exp-card, tc-card (explain/trust sections) ─── */
.exp-card, .tc-card {
  background: #FFFFFF !important;
  border: 1px solid #DCE7EF !important;
  box-shadow: 0 10px 28px rgba(6, 30, 54, 0.08) !important;
}
.exp-card h3, .tc-card h3 {
  color: #0A2342 !important;
}
.exp-card p, .tc-card p {
  color: #34495E !important;
}

/* ─── Pricing Cards on Light BG ─── */
.plan-card:not(.featured-plan),
.pricing-card:not(.featured) {
  background: #FFFFFF !important;
  border: 1px solid #DCE7EF !important;
  box-shadow: 0 10px 30px rgba(6, 30, 54, 0.08) !important;
}
.plan-card:not(.featured-plan):hover,
.pricing-card:not(.featured):hover {
  border-color: rgba(142, 210, 31, 0.3) !important;
  box-shadow: 0 22px 52px rgba(6, 30, 54, 0.13) !important;
}

/* ─── Success Story Cards ─── */
.story-card,
.testimonial-card,
.review-card {
  background: #FFFFFF !important;
  border: 1px solid #DCE7EF !important;
  box-shadow: 0 10px 30px rgba(6, 30, 54, 0.08) !important;
}
.story-card:hover,
.testimonial-card:hover {
  border-color: rgba(142, 210, 31, 0.32) !important;
  box-shadow: 0 20px 50px rgba(6, 30, 54, 0.13) !important;
}
.story-card p,
.testimonial-card p,
.review-card p {
  color: #34495E !important;
}

/* ─── Table/Legal/Text Pages ─── */
.legal-content h2,
.legal-content h3,
.content-section h2,
.content-section h3 {
  color: #0A2342 !important;
}
.legal-content p,
.legal-content li,
.content-section p,
.content-section li {
  color: #34495E !important;
}

/* ─── Section Divider Lines ─── */
hr, .section-divider {
  border-color: #DCE7EF !important;
}

/* ─── Focus States for Keyboard Users ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #8ED21F !important;
  outline-offset: 3px !important;
}

/* ─── Stronger Border for Cards on Pure White Pages ─── */
@media (prefers-color-scheme: light) {
  .card, .svc-card, .step-card, .trust-card,
  .res-card, .uj-card, .j-card, .exp-card, .tc-card {
    border-width: 1.5px !important;
  }
}


/* ================================================================
   UPWARD.JOBS — GLOBAL BRAND THEME v2.0
   Navy #061E36  ·  Green #8ED21F  ·  White #FFFFFF
   Appended globally — overrides all prior conflicting rules
   ================================================================ */

/* ── A. ROOT TOKEN PATCH ─────────────────────────────────── */
:root {
  --color-accent:        #8ED21F;
  --color-accent-hover:  #76B817;
  --color-accent-soft:   #f0fae0;
  --color-accent-deep:   #5a9900;
  --color-primary:       #061E36;
  --color-primary-dark:  #061E36;
  --color-primary-soft:  #0d2d4e;
  --color-text:          #061E36;
  --color-text-muted:    #3a5068;
  --color-bg:            #F6F9FC;
  --color-surface:       #FFFFFF;
  --color-border:        #DCE7EF;
  --green-electric:      #8ED21F;
  --green-main:          #8ED21F;
  --uj-mint:             #f0fae0;
  --uj-dark:             #061E36;
  --uj-green:            #061E36;
  --uj-green-2:          #8ED21F;
  --text-dark:           #061E36;
}

/* ── B. ICON WRAPPERS — force correct style + emoji fix ─── */
.card-icon,
.feature-icon,
.step-icon,
.svc-icon,
.tc-icon,
.exp-icon,
.uj-icon,
.cta-info-icon,
.hstat-icon {
  background: #f0fae0 !important;
  color: #5a9900 !important;
  border: 1px solid rgba(142, 210, 31, 0.22) !important;
  font-style: normal !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  /* Kill ::before / ::after ghost text */
}
.step-icon::before, .step-icon::after,
.svc-icon::before,  .svc-icon::after,
.tc-icon::before,   .tc-icon::after,
.hstat-icon::before,.hstat-icon::after,
.card-icon::before, .card-icon::after {
  display: none !important;
  content: none !important;
}

/* Testimonial avatars */
.testi-avatar {
  background: #f0fae0 !important;
  color: #5a9900 !important;
  border: 1px solid rgba(142, 210, 31, 0.2) !important;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
}

/* ── C. PILLS / BADGES / TAGS ────────────────────────────── */
.svc-tag,
.rpill,
.copill,
.j-tag {
  background: #f0fae0 !important;
  color: #061E36 !important;
  border: 1px solid rgba(142, 210, 31, 0.28) !important;
  font-weight: 700 !important;
}
.rpill:hover,
.copill:hover {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
}
.rpill-dot { background: #8ED21F !important; }

.eb,
.section-label,
.uj-eyebrow {
  background: #f0fae0 !important;
  color: #061E36 !important;
  border-color: rgba(142, 210, 31, 0.22) !important;
}

/* ── D. FILTER & FAQ TABS ────────────────────────────────── */
.ftab {
  background: #FFFFFF !important;
  color: #3a5068 !important;
  border: 1.5px solid rgba(142, 210, 31, 0.28) !important;
}
.ftab:hover, .ftab.active {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
  box-shadow: 0 6px 18px rgba(142, 210, 31, 0.28) !important;
}
.uj-faq-tab {
  background: #FFFFFF !important;
  color: #3a5068 !important;
  border: 1.5px solid rgba(142, 210, 31, 0.25) !important;
}
.uj-faq-tab:hover, .uj-faq-tab.active {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
  box-shadow: 0 6px 18px rgba(142, 210, 31, 0.28) !important;
}

/* ── E. FAQ ITEMS ────────────────────────────────────────── */
.faq-item, .uj-faq-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(6,30,54,0.09) !important;
  box-shadow: 0 4px 16px rgba(6,30,54,0.05) !important;
  border-radius: 14px !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}
.faq-item:hover, .uj-faq-item:hover,
.faq-item.active, .uj-faq-item.active {
  border-color: #8ED21F !important;
  box-shadow: 0 8px 28px rgba(142,210,31,0.15) !important;
}
.faq-question,.uj-faq-question { color:#061E36 !important; font-weight:700 !important; }
.faq-question:hover,.uj-faq-question:hover { color:#5a9900 !important; }
.faq-answer,.uj-faq-answer { color:#3a5068 !important; }

/* FAQ CTA strip */
.uj-faq-thin-cta {
  background: linear-gradient(135deg, #061E36, #0d2d4e) !important;
  border: 1px solid rgba(142,210,31,0.2) !important;
  border-radius: 14px !important;
}
.uj-faq-thin-cta-text h4 { color: #ffffff !important; }
.uj-faq-thin-cta-text p  { color: rgba(255,255,255,0.72) !important; }

/* ── F. BUTTONS ──────────────────────────────────────────── */
.btn-primary, .btn-ai, .uj-btn-primary, .btn-g {
  background: #8ED21F !important; color: #061E36 !important;
  border: none !important; font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(142,210,31,0.28) !important;
}
.btn-primary:hover, .btn-ai:hover, .uj-btn-primary:hover, .btn-g:hover {
  background: #76B817 !important; color: #061E36 !important;
  transform: translateY(-2px) !important;
}
.btn-secondary, .btn-outline, .btn-o {
  background: transparent !important; color: #8ED21F !important;
  border: 1.5px solid #8ED21F !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-o:hover {
  background: #8ED21F !important; color: #061E36 !important;
  transform: translateY(-2px) !important;
}
.btn-w {
  background: #8ED21F !important; color: #061E36 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(142,210,31,0.28) !important;
}
.btn-w:hover { background: #76B817 !important; color: #061E36 !important; transform:translateY(-3px) !important; }

/* Ghost button on dark backgrounds */
.btn-gh {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
}
.btn-gh:hover {
  background: #8ED21F !important;
  color: #061E36 !important;
  border-color: #8ED21F !important;
  transform: translateY(-2px) !important;
}

/* ── G. DARK SECTION OVERRIDES ───────────────────────────── */
.hero h1 em, .hero h2 em,
.cta-box h2 em, .fcta h2 em,
.pg-hero h1 em, .pg-hero h2 em,
.contact-hero h1 em, .contact-hero h2 em,
.st em, .co-head em, .cta-h2 em, .hero-h1 em {
  color: #8ED21F !important;
  font-style: normal !important;
}

/* ── H. MARQUEE ──────────────────────────────────────────── */
.marquee-wrapper {
  background: #061E36 !important;
  border-top: 1px solid rgba(142,210,31,0.2) !important;
  border-bottom: 1px solid rgba(142,210,31,0.2) !important;
}
.marquee-item { color: rgba(255,255,255,0.82) !important; }

/* ── I. STAT STRIP ───────────────────────────────────────── */
.hstat {
  background: rgba(142,210,31,0.06) !important;
  border: 1px solid rgba(142,210,31,0.18) !important;
}
.hstat:hover {
  background: rgba(142,210,31,0.12) !important;
  border-color: rgba(142,210,31,0.42) !important;
}
.hstat-val   { color: #8ED21F !important; }
.hstat-label { color: rgba(255,255,255,0.52) !important; }

/* ── J. STEP / RESOURCE LINKS ────────────────────────────── */
.step-link { background:#8ED21F !important; color:#061E36 !important; font-weight:700 !important; }
.step-link:hover { background:#76B817 !important; color:#061E36 !important; }
.res-link,.svc-link { color:#8ED21F !important; font-weight:700 !important; }
.res-link:hover,.svc-link:hover { color:#76B817 !important; }

/* ── K. RESOURCE CARD TOP ─────────────────────────────────── */
.res-top { background: linear-gradient(135deg,#f0fae0,#d8f5a2) !important; }
.res-cat { background: rgba(6,30,54,0.82) !important; color:#fff !important; border:1px solid rgba(142,210,31,0.25) !important; }

/* ── L. TESTIMONIALS ─────────────────────────────────────── */
.testi-mark { color: #f0fae0 !important; }
.testi-name { color: #061E36 !important; }
.testi-role { color: #3a5068 !important; }
.testi-card:hover {
  border-color: rgba(142,210,31,0.38) !important;
  box-shadow: 0 22px 52px rgba(6,30,54,0.1) !important;
}

/* ── M. SECTION BACKGROUNDS ──────────────────────────────── */
.sec-soft,.section-light,.uj-section-soft,.roles-section,.light-bg,.sec-light {
  background: #F8FBF4 !important;
}
.sec-mint { background: linear-gradient(180deg,#F8FBF4 0%,#fff 100%) !important; }
.steps-note,.info-note {
  background: linear-gradient(135deg,#f0fae0,#e4f7b0) !important;
  border-color: rgba(142,210,31,0.25) !important;
  color: #061E36 !important;
}

/* ── N. FORM FOCUS ────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  border-color: #8ED21F !important;
  box-shadow: 0 0 0 3px rgba(142,210,31,0.14) !important;
  outline: none !important;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid #8ED21F !important;
  outline-offset: 3px !important;
}

/* ── O. HERO BADGE ────────────────────────────────────────── */
.hero-badge {
  background: rgba(142,210,31,0.14) !important;
  border: 1px solid rgba(142,210,31,0.38) !important;
  color: #ffffff !important;
}
.hero-badge-dot {
  background: #8ED21F !important;
  box-shadow: 0 0 6px rgba(142,210,31,0.7) !important;
}

/* ── P. GLOBAL RESPONSIVE ─────────────────────────────────── */
@media (max-width:768px) {
  .steps-grid,.svc-grid { grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .filter-tabs { gap:6px !important; }
  .ftab { font-size:12px !important; padding:6px 14px !important; }
  .trust-layout { grid-template-columns:1fr !important; }
}
@media (max-width:480px) {
  .steps-grid,.svc-grid,.trust-grid { grid-template-columns:1fr !important; }
  .hero-h1 { font-size:clamp(26px,7vw,36px) !important; }
  .testi-card { width:280px !important; }
  .rpill { padding:7px 14px !important; font-size:13px !important; }
  .copill { padding:5px 12px !important; font-size:12px !important; }
}

/* ── Q. RESOURCES CARD OVERRIDE ───────────────────────────── */
.res-card {
  background: #ffffff !important;
  border: 1px solid rgba(6,30,54,0.06) !important;
  box-shadow: 0 8px 24px rgba(6,30,54,0.04) !important;
  color: #0A2342 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.res-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(6,30,54,0.08) !important;
  border: 1px solid rgba(142,210,31,0.3) !important;
}
.res-top {
  background: #F8FAFC !important;
  border-bottom: 1px solid rgba(6,30,54,0.04) !important;
}
.res-card .res-cat {
  background: #ffffff !important;
  color: #061E36 !important;
  border: 1px solid rgba(142,210,31,0.5) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}
.res-card h3 {
  color: #061E36 !important;
  font-weight: 800 !important;
}
.res-card p {
  color: #4A5B6C !important;
}
.res-link, .svc-link {
  color: #061E36 !important;
}
.res-link:hover, .svc-link:hover {
  color: #8ED21F !important;
}


/* === MISSING CSS FROM HOW-IT-WORKS === */
       §3  COMPARISON
    â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
    .cmp-section {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
    }

    .cmp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-bottom: 36px;
    }

    @media(max-width:680px) {
      .cmp-grid {
        grid-template-columns: 1fr;
      }
    }

    .cmp-card {
      border-radius: var(--r);
      padding: clamp(28px, 4vw, 40px);
    }

    .cmp-bad {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .1);
    }

    .cmp-good {
      background: linear-gradient(135deg, rgba(142, 210, 31, 0.15), rgba(6, 30, 54, 0.4));
      border: 1px solid #8ED21F;
      box-shadow: 0 10px 30px rgba(142, 210, 31, 0.2);
    }

    .cmp-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cmp-label-bad {
      color: rgba(255, 255, 255, .6);
    }

    .cmp-label-good {
      color: #fff;
    }

    .cmp-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .cmp-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14.5px;
      line-height: 1.55;
    }

    .cmp-list li.bad {
      color: rgba(255, 255, 255, .5);
    }

    .cmp-list li.good {
      color: rgba(255, 255, 255, .9);
      font-weight: 600;
    }

    .cmp-ico {
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .cmp-close {
      text-align: center;
      font-size: 14.5px;
      color: rgba(255, 255, 255, .9);
      border-top: 1px solid rgba(255, 255, 255, .2);
      padding-top: 28px;
      line-height: 1.7;
    }

    .cmp-close strong {
      color: rgba(255, 255, 255, .8);
    }

    /* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
       §4  TRUST
    â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }

    @media(max-width:660px) {
      .trust-grid {
        grid-template-columns: 1fr;
      }
    }

    .trust-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 30px 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .trust-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 30, 54, .26);
      box-shadow: 0 20px 50px rgba(6, 30, 54, .09);
    }

    .tc-icon {
      width: 50px;
      height: 50px;
      border-radius: 15px;
      background: linear-gradient(135deg, var(--mint), #c2eeda);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .trust-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
    }

    .trust-card p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
      margin: 0;
    }

    .priv-note {
      margin-top: 32px;
      padding: 20px 24px;
      background: #fff8e6;
      border: 1px solid rgba(200, 150, 0, .22);
      border-radius: 15px;
      display: flex;
      gap: 13px;
      align-items: flex-start;
    }

    .priv-ico {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .priv-note p {
      font-size: 13.5px;
      color: #6b5500;
      line-height: 1.68;
      margin: 0;
    }

    .priv-note strong {
      color: #4a3a00;
    }

    /* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
       §5  FINAL CTA
    â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
    .cta-sec {
      padding-bottom: 100px;
    }

    .cta-box {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      border-radius: 32px;
      padding: clamp(60px, 9vw, 92px) clamp(28px, 5vw, 80px);
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(8, 26, 48, .28);
    }

    .cta-box::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at 78% 22%, rgba(142, 210, 31, .18), transparent 52%), radial-gradient(ellipse at 22% 82%, rgba(6, 30, 54, .14), transparent 50%);
    }

    .cta-box>* {
      position: relative;
      z-index: 1;
    }

    .cta-h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 4.5vw, 52px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }

    .cta-h2 em {
      font-style: normal;
      color: #0A223E;
    }

    .cta-sub {
      font-size: clamp(15px, 1.5vw, 17px);
      color: rgba(255, 255, 255, .9);
      max-width: 620px;
      margin: 0 auto 36px;
      line-height: 1.72;
    }

    .cta-btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-links {
      display: flex;
      gap: 22px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .cta-link {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, .42);
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: color .2s, text-decoration-color .2s;
    }

    .cta-link:hover {
      color: rgba(255, 255, 255, .8);
      text-decoration-color: rgba(255, 255, 255, .4);
    }

    .cta-disc {
      margin-top: 26px;
      font-size: 11.5px;
      color: rgba(255, 255, 255, .75);
      max-width: 560px;
      margin-inline: auto;
      line-height: 1.6;
    }

    @media(max-width:600px) {
      .cta-btns {
        flex-direction: column;
        align-items: center
      }

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


/* === MISSING CSS FROM SERVICES === */
       §2  CORE SERVICES — 3×2 grid
    â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    @media(max-width:900px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .svc-grid {
        grid-template-columns: 1fr
      }
    }

    .svc-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 36px) clamp(22px, 2.5vw, 30px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease;
    }

    .svc-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 28px 64px rgba(6, 30, 54, .12);
      border-color: rgba(6, 30, 54, .3);
    }

    .svc-card:hover::before {
      opacity: 1;
    }

    .svc-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease;
    }

    .svc-card:hover .svc-icon {
      transform: scale(1.1) rotate(-5deg);
    }

    .svc-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
    }

    .svc-card>p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .svc-pts {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 18px;
    }

    .svc-pts li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }

    .svc-pts li::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acc);
      flex-shrink: 0;
    }

    .svc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--mint);
      color: var(--cp);
      border: 1px solid rgba(6, 30, 54, .14);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
    }

    /* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
       §3  PERSONALIZED — 4 goal cards + pills
    â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
    .goal-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      margin-bottom: 36px;
    }

    @media(max-width:680px) {
      .goal-grid {
        grid-template-columns: 1fr
      }
    }

    .goal-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 28px 26px;
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .goal-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 30, 54, .26);
      box-shadow: 0 20px 50px rgba(6, 30, 54, .09);
    }

    .goal-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
      transition: transform .3s ease;
    }

    .goal-card:hover .goal-icon {
      transform: scale(1.08) rotate(-4deg);
    }

    .goal-text h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 8px;
    }

    .goal-text p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.68;
      margin: 0;
    }

    .roles-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .rpill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #fff;
      border: 1px solid var(--bdr);
      border-radius: 999px;
      padding: 8px 18px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      box-shadow: 0 3px 10px rgba(6, 30, 54, .05);
      transition: all .24s ease;
      cursor: default;
    }

    .rpill:hover {
      background: var(--mint);
      border-color: rgba(6, 30, 54, .28);
      color: var(--cp);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(6, 30, 54, .1);
    }

    .rpill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--acc);
      flex-shrink: 0;
    }

    /* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 


/* === MISSING CSS FROM ABOUT === */
       §1  ABOUT HERO
    ════════════════════════════════════════════ */
    .about-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      padding: clamp(80px, 10vw, 120px) 0 clamp(90px, 11vw, 128px);
    }

    /* Floating orbs */
    .h-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .h-orb-1 {
      width: 720px;
      height: 720px;
      top: -290px;
      right: -170px;
      background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 65%)
    }

    .h-orb-2 {
      width: 460px;
      height: 460px;
      bottom: -180px;
      left: -90px;
      background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 65%)
    }

    .h-orb-3 {
      width: 180px;
      height: 180px;
      top: 50%;
      left: 42%;
      background: radial-gradient(circle, rgba(142, 210, 31, .05) 0%, transparent 65%)
    }

    /* Floating dots */
    .fdot {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, .25);
      animation: fdrift 8s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes fdrift {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-18px) scale(1.08)
      }
    }

    .fdot-a {
      width: 14px;
      height: 14px;
      top: 22%;
      left: 8%;
      animation-delay: 0s
    }

    .fdot-b {
      width: 8px;
      height: 8px;
      top: 60%;
      left: 14%;
      animation-delay: -2s
    }

    .fdot-c {
      width: 10px;
      height: 10px;
      top: 35%;
      right: 10%;
      animation-delay: -4s
    }

    .fdot-d {
      width: 6px;
      height: 6px;
      top: 75%;
      right: 18%;
      animation-delay: -6s
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(48px, 7vw, 96px);
      align-items: center;
      position: relative;
      z-index: 2
    }

    @media(max-width:920px) {
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-copy,
      .hero-btns,
      .hero-trust {
        text-align: center;
        justify-content: center
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .2);
      border: 1px solid rgba(255, 255, 255, .4);
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 26px
    }

    .hero-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      animation: blink 2s infinite
    }

    .hero-h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 10px
    }

    .hero-hl {
      font-size: clamp(14px, 1.5vw, 16px);
      color: #ffffff;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 14px;
      max-width: 540px
    }

    @media(max-width:920px) {

      .hero-hl,
      .hero-body {
        margin-inline: auto
      }
    }

    .hero-body {
      font-size: clamp(14px, 1.4vw, 15.5px);
      color: rgba(255, 255, 255, .9);
      line-height: 1.8;
      margin-bottom: 36px;
      max-width: 500px
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 22px
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, .8);
      font-weight: 500
    }

    /* Hero breadcrumb */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, .9);
      margin-bottom: 22px
    }

    .breadcrumb a {
      color: rgba(255, 255, 255, .7);
      font-weight: 600;
      transition: color .2s
    }

    .breadcrumb a:hover {
      color: #0A223E
    }

    .breadcrumb span {
      color: rgba(255, 255, 255, .25)
    }

    /* Dashboard card (hero visual) */
    .dash-card {
      background: rgba(255, 255, 255, .06);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 22px;
      padding: 28px;
      box-shadow: 0 50px 100px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
      animation: floatY 7s ease-in-out infinite
    }

    @keyframes floatY {

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

      50% {
        transform: translateY(-14px)
      }
    }

    .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .dash-dots {
      display: flex;
      gap: 7px
    }

    .dash-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .dash-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .dash-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .dash-row:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .dash-left {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .dash-name {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff
    }

    .dash-bar {
      width: 110px;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
      overflow: hidden
    }

    .dash-fill {
      height: 100%;
      border-radius: 999px;
      background: #fff;
      animation: fillAnim 2s cubic-bezier(.4, 0, .2, 1) both
    }

    @keyframes fillAnim {
      from {
        width: 0
      }

      to {
        width: var(--fw, 100%)
      }
    }

    .dash-val {
      font-size: 11.5px;
      font-weight: 800;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .25);
      color: #fff;
      padding: 2px 9px;
      border-radius: 7px;
      white-space: nowrap
    }

    /* ════════════════════════════════════════════
       §2  MISSION
    ════════════════════════════════════════════ */
    .mission-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: clamp(36px, 4vw, 52px)
    }

    @media(max-width:860px) {
      .mission-cards {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:540px) {
      .mission-cards {
        grid-template-columns: 1fr
      }
    }

    .mission-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .mission-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .mission-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(6, 30, 54, .12);
      border-color: rgba(6, 30, 54, .28)
    }

    .mission-card:hover::after {
      opacity: 1
    }

    .mission-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease;
      position: relative;
      z-index: 1
    }

    .mission-card:hover .mission-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .mission-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .mission-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      position: relative;
      z-index: 1
    }

    /* Mission body text */
    .mission-body {
      font-size: clamp(15px, 1.4vw, 16.5px);
      color: var(--muted);
      line-height: 1.8;
      max-width: 700px;
      margin-inline: auto;
      text-align: center
    }

    /* ════════════════════════════════════════════
       §3  WHAT WE DO (Services)
    ════════════════════════════════════════════ */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    @media(max-width:900px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .svc-grid {
        grid-template-columns: 1fr
      }
    }

    .svc-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .svc-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(6, 30, 54, .12);
      border-color: rgba(6, 30, 54, .28)
    }

    .svc-card:hover::before {
      opacity: 1
    }

    .svc-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease;
      position: relative;
      z-index: 1
    }

    .svc-card:hover .svc-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .svc-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .svc-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px;
      position: relative;
      z-index: 1
    }

    .svc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--mint);
      color: var(--cp);
      border: 1px solid rgba(6, 30, 54, .14);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      position: relative;
      z-index: 1
    }

    /* ════════════════════════════════════════════
       §4  WHY DIFFERENT (Comparison)
    ════════════════════════════════════════════ */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: clamp(32px, 4vw, 52px)
    }

    @media(max-width:680px) {
      .compare-grid {
        grid-template-columns: 1fr
      }
    }

    .compare-col {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 36px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05)
    }

    .compare-col.highlight {
      border: 2px solid var(--cp);
      box-shadow: 0 20px 56px rgba(6, 30, 54, .14);
      position: relative
    }

    .compare-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #8ED21F, var(--cp));
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 999px
    }

    .compare-bar {
      width: 40px;
      height: 4px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .compare-bar.gray {
      background: #cbd5e1
    }

    .compare-bar.green {
      background: linear-gradient(90deg, var(--cp), #8ED21F)
    }

    .compare-col h3 {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 18px
    }

    .compare-list {
      list-style: none;
      display: grid;
      gap: 11px
    }

    .compare-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.5
    }

    .compare-list li.bad {
      color: var(--muted)
    }

    .compare-list li.good {
      color: var(--text)
    }

    .ci {
      font-weight: 900;
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .ci-x {
      color: #ef4444
    }

    .ci-chk {
      color: var(--cp)
    }

    .compare-close {
      margin-top: clamp(32px, 4vw, 48px);
      background: linear-gradient(135deg, var(--mint), #eef9f4);
      border: 1px solid rgba(6, 30, 54, .14);
      border-radius: 14px;
      padding: 18px 28px;
      text-align: center;
      font-size: 14.5px;
      color: var(--cp);
      font-weight: 600;
      line-height: 1.6
    }

    .compare-close strong {
      font-weight: 800
    }

    /* ════════════════════════════════════════════
       §5  WHO WE SERVE (Role Pills)
    ════════════════════════════════════════════ */
    .roles-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-bottom: 28px
    }

    .rpill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--bdr);
      border-radius: 999px;
      padding: 9px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      box-shadow: 0 3px 10px rgba(6, 30, 54, .05);
      transition: all .25s ease;
      cursor: default
    }

    .rpill:hover {
      background: var(--mint);
      border-color: rgba(6, 30, 54, .28);
      color: var(--cp);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(6, 30, 54, .1)
    }

    .rpill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--acc);
      flex-shrink: 0
    }

    .roles-note {
      text-align: center;
      font-size: 14px;
      color: var(--muted);
      max-width: 600px;
      margin-inline: auto;
      line-height: 1.7
    }

    /* ════════════════════════════════════════════
       §6  TRUST, PRIVACY & TRANSPARENCY
    ════════════════════════════════════════════ */
    .trust-5-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    @media(max-width:860px) {
      .trust-5-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:500px) {
      .trust-5-grid {
        grid-template-columns: 1fr
      }
    }

    .trust-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
    }

    .trust-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 30, 54, .25);
      box-shadow: 0 18px 48px rgba(6, 30, 54, .09)
    }

    .tc-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--mint), #c2eeda);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: transform .3s ease
    }

    .trust-card:hover .tc-icon {
      transform: scale(1.1) rotate(-5deg)
    }

    .trust-card h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .trust-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.68;
      margin: 0
    }

    /* Trust wide card (spans 3 cols) */
    .trust-wide {
      grid-column: 1/-1
    }

    @media(max-width:860px) {
      .trust-wide {
        grid-column: 1/-1
      }
    }

    /* Privacy note */
    .priv-note {
      margin-top: 30px;
      padding: 20px 24px;
      background: #fff8e6;
      border: 1px solid rgba(200, 150, 0, .22);
      border-radius: 14px;
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .priv-ico {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px
    }

    .priv-note p {
      font-size: 13.5px;
      color: #6b5500;
      line-height: 1.7;
      margin: 0
    }

    .priv-note strong {
      color: #4a3a00
    }

    /* ════════════════════════════════════════════


/* === MISSING CSS FROM ABOUT (FIXED) === */
    .about-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      padding: clamp(80px, 10vw, 120px) 0 clamp(90px, 11vw, 128px);
    }

    /* Floating orbs */
    .h-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .h-orb-1 {
      width: 720px;
      height: 720px;
      top: -290px;
      right: -170px;
      background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 65%)
    }

    .h-orb-2 {
      width: 460px;
      height: 460px;
      bottom: -180px;
      left: -90px;
      background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 65%)
    }

    .h-orb-3 {
      width: 180px;
      height: 180px;
      top: 50%;
      left: 42%;
      background: radial-gradient(circle, rgba(142, 210, 31, .05) 0%, transparent 65%)
    }

    /* Floating dots */
    .fdot {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, .25);
      animation: fdrift 8s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes fdrift {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-18px) scale(1.08)
      }
    }

    .fdot-a {
      width: 14px;
      height: 14px;
      top: 22%;
      left: 8%;
      animation-delay: 0s
    }

    .fdot-b {
      width: 8px;
      height: 8px;
      top: 60%;
      left: 14%;
      animation-delay: -2s
    }

    .fdot-c {
      width: 10px;
      height: 10px;
      top: 35%;
      right: 10%;
      animation-delay: -4s
    }

    .fdot-d {
      width: 6px;
      height: 6px;
      top: 75%;
      right: 18%;
      animation-delay: -6s
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(48px, 7vw, 96px);
      align-items: center;
      position: relative;
      z-index: 2
    }

    @media(max-width:920px) {
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-copy,
      .hero-btns,
      .hero-trust {
        text-align: center;
        justify-content: center
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .2);
      border: 1px solid rgba(255, 255, 255, .4);
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 26px
    }

    .hero-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      animation: blink 2s infinite
    }

    .hero-h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 10px
    }

    .hero-hl {
      font-size: clamp(14px, 1.5vw, 16px);
      color: #ffffff;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 14px;
      max-width: 540px
    }

    @media(max-width:920px) {

      .hero-hl,
      .hero-body {
        margin-inline: auto
      }
    }

    .hero-body {
      font-size: clamp(14px, 1.4vw, 15.5px);
      color: rgba(255, 255, 255, .9);
      line-height: 1.8;
      margin-bottom: 36px;
      max-width: 500px
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 22px
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, .8);
      font-weight: 500
    }

    /* Hero breadcrumb */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, .9);
      margin-bottom: 22px
    }

    .breadcrumb a {
      color: rgba(255, 255, 255, .7);
      font-weight: 600;
      transition: color .2s
    }

    .breadcrumb a:hover {
      color: #0A223E
    }

    .breadcrumb span {
      color: rgba(255, 255, 255, .25)
    }

    /* Dashboard card (hero visual) */
    .dash-card {
      background: rgba(255, 255, 255, .06);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 22px;
      padding: 28px;
      box-shadow: 0 50px 100px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
      animation: floatY 7s ease-in-out infinite
    }

    @keyframes floatY {

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

      50% {
        transform: translateY(-14px)
      }
    }

    .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .dash-dots {
      display: flex;
      gap: 7px
    }

    .dash-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .dash-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .dash-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .dash-row:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .dash-left {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .dash-name {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff
    }

    .dash-bar {
      width: 110px;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
      overflow: hidden
    }

    .dash-fill {
      height: 100%;
      border-radius: 999px;
      background: #fff;
      animation: fillAnim 2s cubic-bezier(.4, 0, .2, 1) both
    }

    @keyframes fillAnim {
      from {
        width: 0
      }

      to {
        width: var(--fw, 100%)
      }
    }

    .dash-val {
      font-size: 11.5px;
      font-weight: 800;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .25);
      color: #fff;
      padding: 2px 9px;
      border-radius: 7px;
      white-space: nowrap
    }

    /* ════════════════════════════════════════════
       §2  MISSION
    ════════════════════════════════════════════ */
    .mission-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: clamp(36px, 4vw, 52px)
    }

    @media(max-width:860px) {
      .mission-cards {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:540px) {
      .mission-cards {
        grid-template-columns: 1fr
      }
    }

    .mission-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .mission-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .mission-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(6, 30, 54, .12);
      border-color: rgba(6, 30, 54, .28)
    }

    .mission-card:hover::after {
      opacity: 1
    }

    .mission-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease;
      position: relative;
      z-index: 1
    }

    .mission-card:hover .mission-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .mission-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .mission-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      position: relative;
      z-index: 1
    }

    /* Mission body text */
    .mission-body {
      font-size: clamp(15px, 1.4vw, 16.5px);
      color: var(--muted);
      line-height: 1.8;
      max-width: 700px;
      margin-inline: auto;
      text-align: center
    }

    /* ════════════════════════════════════════════
       §3  WHAT WE DO (Services)
    ════════════════════════════════════════════ */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    @media(max-width:900px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .svc-grid {
        grid-template-columns: 1fr
      }
    }

    .svc-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .svc-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(6, 30, 54, .12);
      border-color: rgba(6, 30, 54, .28)
    }

    .svc-card:hover::before {
      opacity: 1
    }

    .svc-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease;
      position: relative;
      z-index: 1
    }

    .svc-card:hover .svc-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .svc-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .svc-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px;
      position: relative;
      z-index: 1
    }

    .svc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--mint);
      color: var(--cp);
      border: 1px solid rgba(6, 30, 54, .14);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      position: relative;
      z-index: 1
    }

    /* ════════════════════════════════════════════
       §4  WHY DIFFERENT (Comparison)
    ════════════════════════════════════════════ */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: clamp(32px, 4vw, 52px)
    }

    @media(max-width:680px) {
      .compare-grid {
        grid-template-columns: 1fr
      }
    }

    .compare-col {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 36px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05)
    }

    .compare-col.highlight {
      border: 2px solid var(--cp);
      box-shadow: 0 20px 56px rgba(6, 30, 54, .14);
      position: relative
    }

    .compare-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #8ED21F, var(--cp));
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 999px
    }

    .compare-bar {
      width: 40px;
      height: 4px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .compare-bar.gray {
      background: #cbd5e1
    }

    .compare-bar.green {
      background: linear-gradient(90deg, var(--cp), #8ED21F)
    }

    .compare-col h3 {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 18px
    }

    .compare-list {
      list-style: none;
      display: grid;
      gap: 11px
    }

    .compare-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.5
    }

    .compare-list li.bad {
      color: var(--muted)
    }

    .compare-list li.good {
      color: var(--text)
    }

    .ci {
      font-weight: 900;
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .ci-x {
      color: #ef4444
    }

    .ci-chk {
      color: var(--cp)
    }

    .compare-close {
      margin-top: clamp(32px, 4vw, 48px);
      background: linear-gradient(135deg, var(--mint), #eef9f4);
      border: 1px solid rgba(6, 30, 54, .14);
      border-radius: 14px;
      padding: 18px 28px;
      text-align: center;
      font-size: 14.5px;
      color: var(--cp);
      font-weight: 600;
      line-height: 1.6
    }

    .compare-close strong {
      font-weight: 800
    }

    /* ════════════════════════════════════════════
       §5  WHO WE SERVE (Role Pills)
    ════════════════════════════════════════════ */
    .roles-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-bottom: 28px
    }

    .rpill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--bdr);
      border-radius: 999px;
      padding: 9px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      box-shadow: 0 3px 10px rgba(6, 30, 54, .05);
      transition: all .25s ease;
      cursor: default
    }

    .rpill:hover {
      background: var(--mint);
      border-color: rgba(6, 30, 54, .28);
      color: var(--cp);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(6, 30, 54, .1)
    }

    .rpill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--acc);
      flex-shrink: 0
    }

    .roles-note {
      text-align: center;
      font-size: 14px;
      color: var(--muted);
      max-width: 600px;
      margin-inline: auto;
      line-height: 1.7
    }

    /* ════════════════════════════════════════════
       §6  TRUST, PRIVACY & TRANSPARENCY
    ════════════════════════════════════════════ */
    .trust-5-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    @media(max-width:860px) {
      .trust-5-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:500px) {
      .trust-5-grid {
        grid-template-columns: 1fr
      }
    }

    .trust-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
    }

    .trust-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 30, 54, .25);
      box-shadow: 0 18px 48px rgba(6, 30, 54, .09)
    }

    .tc-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--mint), #c2eeda);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: transform .3s ease
    }

    .trust-card:hover .tc-icon {
      transform: scale(1.1) rotate(-5deg)
    }

    .trust-card h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .trust-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.68;
      margin: 0
    }

    /* Trust wide card (spans 3 cols) */
    .trust-wide {
      grid-column: 1/-1
    }

    @media(max-width:860px) {
      .trust-wide {
        grid-column: 1/-1
      }
    }

    /* Privacy note */
    .priv-note {
      margin-top: 30px;
      padding: 20px 24px;
      background: #fff8e6;
      border: 1px solid rgba(200, 150, 0, .22);
      border-radius: 14px;
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .priv-ico {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px
    }

    .priv-note p {
      font-size: 13.5px;
      color: #6b5500;
      line-height: 1.7;
      margin: 0
    }

    .priv-note strong {
      color: #4a3a00
    }

    /* ════════════════════════════════════════════
       §7  FINAL CTA
    ════════════════════════════════════════════ */


/* === MISSING CSS FROM PRICING === */
    .pricing-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      padding: 10px 0 clamp(80px, 11vw, 120px);
    }

    /* Orbs */
    .h-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .h-orb-1 {
      width: 720px;
      height: 720px;
      top: -290px;
      right: -170px;
      background: radial-gradient(circle, rgba(142, 210, 31, .16) 0%, transparent 65%)
    }

    .h-orb-2 {
      width: 460px;
      height: 460px;
      bottom: -180px;
      left: -90px;
      background: radial-gradient(circle, rgba(6, 30, 54, .13) 0%, transparent 65%)
    }

    /* Floating dots */
    .fdot {
      position: absolute;
      border-radius: 50%;
      background: rgba(142, 210, 31, .14);
      animation: fdrift 8s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes fdrift {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-18px) scale(1.08)
      }
    }

    .fdot-a {
      width: 14px;
      height: 14px;
      top: 22%;
      left: 8%;
      animation-delay: 0s
    }

    .fdot-b {
      width: 8px;
      height: 8px;
      top: 60%;
      left: 14%;
      animation-delay: -2s
    }

    .fdot-c {
      width: 10px;
      height: 10px;
      top: 35%;
      right: 10%;
      animation-delay: -4s
    }

    .fdot-d {
      width: 6px;
      height: 6px;
      top: 75%;
      right: 18%;
      animation-delay: -6s
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      padding-top: 0
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(48px, 7vw, 96px);
      align-items: center
    }

    @media(max-width:900px) {
      .hero-grid {
        grid-template-columns: 1fr
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(142, 210, 31, .1);
      border: 1px solid rgba(142, 210, 31, .28);
      color: #5dffa2;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 24px
    }

    .hero-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #8ED21F;
      animation: blink 2s infinite
    }

    .hero-h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 10px
    }

    .hero-h1 em {
      font-style: normal;
      color: #8ED21F
    }

    .hero-hl {
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(255, 255, 255, .75);
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 14px;
      max-width: 520px
    }

    @media(max-width:900px) {

      .hero-hl,
      .hero-body {
        margin-inline: auto;
        text-align: center
      }
    }

    .hero-body {
      font-size: clamp(13.5px, 1.3vw, 15px);
      color: rgba(255, 255, 255, .44);
      line-height: 1.8;
      margin-bottom: 34px;
      max-width: 490px
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    @media(max-width:900px) {

      .hero-btns,
      .hero-trust,
      .hero-badge,
      .hero-h1 {
        text-align: center;
        justify-content: center
      }
    }

    .hero-trust {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, .32);
      font-weight: 500;
      line-height: 1.6;
      max-width: 440px
    }

    /* Breadcrumb */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 20px
    }

    .breadcrumb a {
      color: rgba(142, 210, 31, .7);
      font-weight: 600;
      transition: color .2s
    }

    .breadcrumb a:hover {
      color: #8ED21F
    }

    .breadcrumb span {
      color: rgba(255, 255, 255, .22)
    }

    @media(max-width:900px) {
      .breadcrumb {
        justify-content: center
      }
    }

    /* Hero pricing preview card */
    .dash-card {
      background: rgba(255, 255, 255, .055);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      padding: 26px;
      box-shadow: 0 50px 100px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
      animation: floatY 7s ease-in-out infinite
    }

    @keyframes floatY {

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

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

    .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .dash-dots {
      display: flex;
      gap: 7px
    }

    .dash-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .dash-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .3);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .dash-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .dash-row:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .dash-left {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .dash-name {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, .62)
    }

    .dash-bar {
      width: 100px;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
      overflow: hidden
    }

    .dash-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #8ED21F, #8ED21F)
    }

    .dash-val {
      font-size: 11px;
      font-weight: 800;
      background: rgba(142, 210, 31, .14);
      border: 1px solid rgba(142, 210, 31, .24);
      color: #4dffa8;
      padding: 2px 9px;
      border-radius: 7px;
      white-space: nowrap
    }

    /* ════════════════════════════════════════════
       §2  PRICING CARDS
    ════════════════════════════════════════════ */
    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      align-items: start
    }

    @media(max-width:900px) {
      .price-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-inline: auto
      }
    }

    .price-card {
      background: var(--card);
      border: 1.5px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(28px, 3.5vw, 42px);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      position: relative;
    }

    .price-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shad)
    }

    .price-card.feat {
      border-color: var(--cp);
      border-width: 2px;
      transform: translateY(-14px);
      box-shadow: var(--shad-ft);
      background: linear-gradient(160deg, #f5fff9 0%, #ffffff 100%);
    }

    .price-card.feat:hover {
      transform: translateY(-20px)
    }

    .feat-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #8ED21F, var(--cp));
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 5px 18px;
      border-radius: 999px;
      white-space: nowrap;
      letter-spacing: .06em
    }

    .plan-tier {
      font-size: 11px;
      font-weight: 800;
      color: var(--cp);
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 6px
    }

    .plan-name {
      font-family: 'Inter', sans-serif;
      font-size: 26px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 6px;
      line-height: 1.2
    }

    .plan-label {
      font-size: 12.5px;
      color: var(--muted);
      margin-bottom: 20px;
      font-weight: 500
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-bottom: 18px
    }

    .plan-price-main {
      font-size: 40px;
      font-weight: 900;
      color: var(--text);
      line-height: 1
    }

    .plan-price.feat-price .plan-price-main {
      color: var(--cp)
    }

    .plan-price-period {
      font-size: 14px;
      color: var(--muted);
      font-weight: 500
    }

    .plan-desc {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 22px;
      min-height: 52px
    }

    .plan-divider {
      height: 1px;
      background: var(--bdr);
      margin-bottom: 22px
    }

    /* Checklist */
    .clist {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-bottom: 28px
    }

    .clist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13.5px;
      color: var(--text);
      line-height: 1.5
    }

    .clist li .ci {
      color: var(--cp);
      font-weight: 900;
      font-size: 13px;
      background: var(--mint);
      border: 1px solid rgba(6, 30, 54, .12);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px
    }

    .plan-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 13px 24px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      font-family: 'Inter', sans-serif;
      transition: transform .22s ease, box-shadow .22s ease;
      cursor: pointer;
      border: none;
      text-decoration: none;
      text-align: center
    }

    .plan-cta-primary {
      background: linear-gradient(135deg, #8ED21F, var(--cp));
      color: #fff;
      box-shadow: 0 10px 28px rgba(6, 30, 54, .28)
    }

    .plan-cta-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(6, 30, 54, .36);
      color: #fff
    }

    .plan-cta-secondary {
      background: #fff;
      color: var(--text);
      border: 1.5px solid var(--bdr)
    }

    .plan-cta-secondary:hover {
      background: var(--mint);
      border-color: var(--cp);
      transform: translateY(-2px);
      color: var(--cpd)
    }

    .plan-best {
      margin-top: 18px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      text-align: center
    }

    .plan-best strong {
      color: var(--text);
      font-weight: 700
    }

    /* Pricing note */
    .pricing-note {
      text-align: center;
      margin-top: 32px;
      font-size: 13px;
      color: var(--muted);
      background: var(--mntl);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 14px 22px;
      max-width: 720px;
      margin-inline: auto;
      line-height: 1.65
    }

    .pricing-note strong {
      color: var(--text)
    }

    /* ════════════════════════════════════════════
       §3  WHAT EVERY PLAN INCLUDES
    ════════════════════════════════════════════ */
    .inc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    @media(max-width:900px) {
      .inc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .inc-grid {
        grid-template-columns: 1fr
      }
    }

    .inc-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(22px, 3vw, 30px);
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      position: relative;
      overflow: hidden
    }

    .inc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .inc-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 56px rgba(6, 30, 54, .11);
      border-color: rgba(6, 30, 54, .26)
    }

    .inc-card:hover::after {
      opacity: 1
    }

    .inc-icon {
      width: 50px;
      height: 50px;
      border-radius: 15px;
      background: linear-gradient(135deg, var(--mint), #d4f0e8);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 16px;
      transition: transform .3s ease;
      position: relative;
      z-index: 1
    }

    .inc-card:hover .inc-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .inc-card h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 9px;
      position: relative;
      z-index: 1
    }

    .inc-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.68;
      position: relative;
      z-index: 1
    }

    /* ════════════════════════════════════════════
       §4  COMPARISON TABLE
    ════════════════════════════════════════════ */
    .table-wrap {
      overflow-x: auto;
      border-radius: var(--r);
      box-shadow: var(--shad)
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--card)
    }

    .compare-table thead tr {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%)
    }

    .compare-table th {
      font-size: 13px;
      font-weight: 800;
      padding: 18px 16px;
      text-align: center;
      color: rgba(255, 255, 255, .65);
      letter-spacing: .04em
    }

    .compare-table th:first-child {
      text-align: left;
      border-radius: var(--r) 0 0 0;
      color: rgba(255, 255, 255, .45);
      font-size: 11px;
      text-transform: uppercase
    }

    .compare-table th.th-feat {
      color: #4dffa8
    }

    .compare-table th:last-child {
      border-radius: 0 var(--r) 0 0
    }

    .compare-table td {
      font-size: 13.5px;
      color: var(--muted);
      padding: 15px 16px;
      border-bottom: 1px solid var(--bdr);
      text-align: center;
      vertical-align: middle;
      transition: background .2s
    }

    .compare-table td:first-child {
      text-align: left;
      font-weight: 700;
      color: var(--text);
      font-size: 14px
    }

    .compare-table tbody tr:last-child td {
      border-bottom: none
    }

    .compare-table tbody tr:hover td {
      background: var(--mntl)
    }

    .compare-table tbody tr:last-child td:first-child {
      border-radius: 0 0 0 var(--r)
    }

    .compare-table tbody tr:last-child td:last-child {
      border-radius: 0 0 var(--r) 0
    }

    .has {
      color: var(--cp);
      font-weight: 800
    }

    .no {
      color: #c5d6cb;
      font-weight: 400
    }

    .col-feat-bg {
      background: rgba(6, 30, 54, .04)
    }

    .table-cta {
      margin-top: 28px;
      text-align: center
    }

    .table-note {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 16px
    }

    /* ════════════════════════════════════════════
       §5  WHY DIFFERENT FROM JOB BOARD
    ════════════════════════════════════════════ */
    .diff-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: clamp(32px, 4vw, 50px)
    }

    @media(max-width:680px) {
      .diff-grid {
        grid-template-columns: 1fr
      }
    }

    .diff-col {
      background: var(--card);
      border: 1.5px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 36px)
    }

    .diff-col.highlight {
      border-color: var(--cp);
      box-shadow: 0 20px 56px rgba(6, 30, 54, .12);
      background: linear-gradient(155deg, #f5fff9, #fff)
    }

    .diff-bar {
      width: 38px;
      height: 4px;
      border-radius: 4px;
      margin-bottom: 20px
    }

    .diff-bar.gray {
      background: #cbd5e1
    }

    .diff-bar.green {
      background: linear-gradient(90deg, var(--cp), #8ED21F)
    }

    .diff-col h3 {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 18px
    }

    .diff-list {
      list-style: none;
      display: grid;
      gap: 11px
    }

    .diff-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 14px;
      line-height: 1.5
    }

    .diff-list li.bad {
      color: var(--muted)
    }

    .diff-list li.good {
      color: var(--text)
    }

    .dci {
      font-weight: 900;
      font-size: 15px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .dci-x {
      color: #ef4444
    }

    .dci-chk {
      color: var(--cp)
    }

    .diff-close {
      margin-top: clamp(28px, 4vw, 44px);
      background: linear-gradient(135deg, var(--mint), #eef9f4);
      border: 1px solid rgba(6, 30, 54, .14);
      border-radius: 14px;
      padding: 18px 26px;
      text-align: center;
      font-size: 14.5px;
      color: var(--cp);
      font-weight: 600;
      line-height: 1.6
    }

    .diff-close strong {
      font-weight: 800
    }

    /* ════════════════════════════════════════════
       §6  BILLING, CANCELLATION & TRUST
    ════════════════════════════════════════════ */
    .trust-grid-5 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    @media(max-width:860px) {
      .trust-grid-5 {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:500px) {
      .trust-grid-5 {
        grid-template-columns: 1fr
      }
    }

    .trust-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
    }

    .trust-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 30, 54, .25);
      box-shadow: 0 18px 48px rgba(6, 30, 54, .09)
    }

    .tc-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--mint), #c2eeda);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: transform .3s ease
    }

    .trust-card:hover .tc-icon {
      transform: scale(1.1) rotate(-5deg)
    }

    .trust-card h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .trust-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.68;
      margin: 0
    }

    /* Privacy note */
    .priv-note {
      margin-top: 30px;
      padding: 20px 24px;
      background: var(--warn-bg);
      border: 1px solid var(--warn-bdr);
      border-radius: 14px;
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .priv-ico {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px
    }

    .priv-note p {
      font-size: 13.5px;
      color: #6b5500;
      line-height: 1.7;
      margin: 0
    }

    .priv-note strong {
      color: #4a3a00
    }

    /* ════════════════════════════════════════════
       §7  FAQ ACCORDION
    ════════════════════════════════════════════ */
    .faq-wrap {
      max-width: 820px;
      margin-inline: auto;
      display: grid;
      gap: 14px
    }

    .faq-item {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: 18px;
      overflow: hidden;
      transition: border-color .25s, box-shadow .25s
    }

    .faq-item[open] {
      border-color: var(--cp);
      box-shadow: 0 8px 32px rgba(6, 30, 54, .08)
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      font-family: 'Inter', sans-serif;
      user-select: none;
      -webkit-user-select: none
    }

    .faq-item summary::-webkit-details-marker {
      display: none
    }

    .faq-ic {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      flex-shrink: 0;
      background: var(--mint);
      color: var(--cp);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
      transition: transform .3s ease, background .25s ease;
      line-height: 1
    }

    .faq-item[open] .faq-ic {
      transform: rotate(45deg);
      background: var(--cp);
      color: #fff
    }

    .faq-body {
      padding: 0 22px 20px;
      font-size: 14.5px;
      color: var(--muted);
      line-height: 1.72
    }

    .faq-item summary:focus-visible {
      outline: 2.5px solid var(--acc);
      outline-offset: 2px
    }

    /* ════════════════════════════════════════════
       §8  FINAL CTA
    ════════════════════════════════════════════ */


/* === MISSING CSS FROM AI TOOLS === */
    /* Hero */
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      padding: 10px 0 clamp(30px, 5vw, 40px);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }

    .hero-h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }

    .hero-h1 em {
      font-style: normal;
      color: #0A223E;
    }

    .hero-hl {
      font-size: clamp(14px, 1.5vw, 16px);
      color: #fff;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .hero-body {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.7;
      margin-bottom: 32px;
      max-width: 540px;
    }

    @media(max-width:900px) {
      .hero-body {
        margin-inline: auto;
      }
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    @media(max-width:900px) {
      .hero-btns {
        justify-content: center;
      }
    }

    .hero-trust {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      line-height: 1.5;
      max-width: 440px;
    }

    @media(max-width:900px) {
      .hero-trust {
        margin-inline: auto;
        text-align: left;
      }
    }

    .dash-card {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 22px;
      padding: 26px;
      box-shadow: 0 50px 100px rgba(0, 0, 0, 0.34);
      animation: floatY 7s ease-in-out infinite;
    }

    @keyframes floatY {

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

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

    .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .dash-dots {
      display: flex;
      gap: 7px;
    }

    .dash-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
    }

    .dash-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .dash-row {
      display: grid;
      grid-template-columns: 140px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dash-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .dash-name {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }

    .dash-bar {
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      overflow: hidden;
      width: 100%;
    }

    .dash-fill {
      height: 100%;
      background: #fff;
      border-radius: 999px;
    }

    .dash-val {
      font-size: 11px;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      padding: 3px 10px;
      border-radius: 7px;
      width: 44px;
      text-align: center;
    }

    .h-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .h-orb-1 {
      width: 720px;
      height: 720px;
      top: -290px;
      right: -170px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
    }

    .h-orb-2 {
      width: 460px;
      height: 460px;
      bottom: -180px;
      left: -90px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
    }

    .fdot {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      animation: fdrift 8s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes fdrift {

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

      50% {
        transform: translateY(-18px) scale(1.08);
      }
    }

    /* Tools Overview */
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .tool-card {
      background: var(--color-card);
      border: 1.5px solid var(--color-border);
      border-radius: 22px;
      padding: 28px;
      box-shadow: 0 4px 14px rgba(6, 30, 54, 0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .tool-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shad);
      border-color: var(--color-primary);
    }

    .t-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--color-mint), #c2eeda);
      border: 1px solid rgba(6, 30, 54, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px;
      transition: transform 0.3s ease;
    }

    .tool-card:hover .t-icon {
      transform: scale(1.1) rotate(-4deg);
    }

    .tool-card h3 {
      font-size: 18px;
      font-weight: 800;
      color: var(--color-text);
      margin-bottom: 10px;
    }

    .tool-card p {
      font-size: 14px;
      color: var(--color-muted);
      line-height: 1.6;
      margin-bottom: 16px;
      flex-grow: 1;
    }

    .t-best {
      font-size: 12.5px;
      color: var(--color-text);
      font-weight: 500;
      padding: 12px 16px;
      background: var(--color-mint-light);
      border-radius: 12px;
      border: 1px solid var(--color-border);
      margin-bottom: 22px;
      line-height: 1.5;
    }

    .t-best strong {
      font-weight: 700;
      color: var(--color-primary);
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .t-link {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--color-primary);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap 0.2s;
    }

    .t-link:hover {
      gap: 8px;
      color: var(--color-primary-dark);
    }

    /* Featured UI */
    .split-ui {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 64px);
      align-items: center;
    }

    @media(max-width:900px) {
      .split-ui {
        grid-template-columns: 1fr;
      }
    }

    .ui-panel {
      background: #ffffff;
      border: 1px solid #DCE7EF;
      border-radius: 22px;
      box-shadow: 0 16px 40px rgba(6, 30, 54, 0.06);
      overflow: hidden;
    }

    .ui-tabs {
      display: flex;
      border-bottom: 1px solid #DCE7EF;
      background: #F6F9FC;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .ui-tabs::-webkit-scrollbar {
      display: none;
    }

    .ui-tab {
      padding: 16px 20px;
      font-size: 13px;
      font-weight: 700;
      color: #52677A;
      white-space: nowrap;
      cursor: default;
      border-bottom: 2px solid transparent;
    }

    .ui-tab.active {
      color: #8ED21F;
      border-bottom-color: #8ED21F;
      background: #ffffff;
      margin-bottom: -1px;
    }

    .ui-body {
      padding: 30px;
    }

    .ui-ph {
      height: 200px;
      background: #F8FAFC;
      border: 1.5px dashed #C3D4E0;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #0A2342;
      font-weight: 700;
      font-size: 15px;
    }

    .ui-ph-dot {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #EAF8F1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 12px rgba(142, 210, 31, 0.1);
    }

    .feat-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media(max-width:500px) {
      .feat-cards {
        grid-template-columns: 1fr;
      }
    }

    .fc {
      background: #ffffff;
      border: 1px solid #DCE7EF;
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 4px 16px rgba(6, 30, 54, 0.03);
      transition: all 0.3s ease;
    }

    .fc:hover {
      transform: translateY(-4px);
      border-color: #8ED21F;
      box-shadow: 0 12px 24px rgba(142, 210, 31, 0.06);
    }

    .fc h4 {
      font-size: 16px;
      font-weight: 800;
      color: #0A2342;
      margin-bottom: 8px;
    }

    .fc p {
      font-size: 14px;
      color: #34495E;
      line-height: 1.6;
    }

    .ui-note {
      margin-top: 24px;
      padding: 14px 18px;
      background: var(--color-warning-soft);
      border: 1px solid var(--color-warn-bdr);
      border-radius: 12px;
      font-size: 13px;
      color: #856400;
      line-height: 1.55;
      display: flex;
      gap: 10px;
    }

    /* Built for Tech Roles */
    .role-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
    }

    .pill {
      padding: 12px 22px;
      background: #ffffff;
      border: 1.5px solid #DCE7EF;
      border-radius: 999px;
      font-size: 14.5px;
      font-weight: 600;
      color: #34495E;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(6, 30, 54, 0.03);
      cursor: default;
    }

    .pill:hover {
      border-color: #8ED21F;
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(142, 210, 31, 0.12);
      color: #8ED21F;
    }

    /* Why Use */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .b-card {
      padding: 32px;
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #DCE7EF;
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(6, 30, 54, 0.03);
    }

    .b-card:hover {
      transform: translateY(-4px);
      border-color: #8ED21F;
      box-shadow: 0 12px 24px rgba(142, 210, 31, 0.08);
    }

    .b-card h4 {
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 12px;
      color: #0A2342;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .b-card h4::before {
      content: '\f00c';
      font-family: "Font Awesome 6 Free";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: #EAF8F1;
      color: #8ED21F;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 900;
    }

    .b-card p {
      font-size: 14.5px;
      color: #34495E;
      line-height: 1.6;
    }

    /* Trust & Privacy */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .tr-card {
      background: var(--color-mint-light);
      border: 1px solid var(--color-border);
      padding: 26px;
      border-radius: 18px;
    }

    .tr-card h4 {
      font-size: 15px;
      font-weight: 800;
      color: var(--color-text);
      margin-bottom: 10px;
    }

    .tr-card p {
      font-size: 13.5px;
      color: var(--color-muted);
      line-height: 1.6;
    }

    .privacy-note {
      margin-top: 32px;
      padding: 18px 26px;
      text-align: center;
      font-size: 14px;
      color: var(--color-muted);
      border: 1.5px dashed rgba(6, 30, 54, 0.25);
      border-radius: 14px;
      background: #fff;
      max-width: 800px;
      margin-inline: auto;
      line-height: 1.6;
    }

    /* FAQs */
    .faq-list {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    details {
      background: var(--color-card);
      border: 1.5px solid var(--color-border);
      border-radius: 16px;
      overflow: hidden;
      transition: box-shadow 0.2s, border-color 0.2s;
    }

    details:hover {
      border-color: rgba(6, 30, 54, 0.25);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    }

    summary {
      padding: 22px 26px;
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: '+';
      font-size: 24px;
      color: var(--color-primary);
      transition: transform 0.3s;
      font-weight: 400;
    }

    details[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-body {
      padding: 0 26px 24px;
      font-size: 15px;
      color: var(--color-muted);
      line-height: 1.65;
    }

    /* Final CTA */