/* =============================================
   MENATRON — The Future, Aligned.
   Brand stylesheet
   ============================================= */

:root {
  --navy:        #0A1628;
  --navy-mid:    #112240;
  --navy-light:  #1A3055;
  --amber:       #E8890C;
  --amber-dark:  #C97208;
  --amber-light: #F5A623;
  --white:       #FFFFFF;
  --off-white:   #F7F8FC;
  --grey-100:    #EEF0F5;
  --grey-300:    #C5CAD8;
  --grey-500:    #8892A4;
  --charcoal:    #1A2332;
  --text-body:   #2E3A4E;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  --shadow-sm:   0 2px 8px rgba(10,22,40,0.08);
  --shadow-md:   0 6px 24px rgba(10,22,40,0.12);
  --shadow-lg:   0 16px 48px rgba(10,22,40,0.18);

  --transition:  200ms ease;

  --font:        'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --max-width:   1180px;
  --section-v:   96px;
}

/* ---- Top Ribbon ---- */
#top-ribbon {
  background: linear-gradient(90deg, #0A1628 0%, #112240 40%, #1a2d4a 100%);
  border-bottom: 1.5px solid rgba(232,137,12,0.35);
  overflow: hidden;
}
.ribbon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 24px;
  max-width: var(--max-width);
  margin-inline: auto;
  position: relative;
}
.ribbon-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  letter-spacing: 0.01em;
  flex-shrink: 1;
  min-width: 0;
}
.ribbon-text svg {
  flex-shrink: 0;
  color: var(--amber);
  opacity: 0.9;
}
.ribbon-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  background: var(--amber);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 99px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
.ribbon-cta:hover {
  background: var(--amber-dark);
  box-shadow: 0 2px 12px rgba(232,137,12,0.40);
  color: var(--white);
}
.ribbon-cta svg { opacity: 0.9; }
.ribbon-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  padding: 4px 6px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.ribbon-close:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}
@media (max-width: 600px) {
  .ribbon-text { display: none; }
  .ribbon-inner { justify-content: center; }
  .ribbon-close { right: 8px; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--text-body);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- Section base ---- */
.section { padding-block: var(--section-v); }
.section--alt { background: var(--off-white); }
.section--dark { background: var(--navy); color: var(--white); }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 16px;
}
.section--dark .section-title { color: var(--white); }
.section-sub {
  font-size: 1.05rem;
  color: var(--grey-500);
  max-width: 560px;
  line-height: 1.7;
}
.section--dark .section-sub { color: var(--grey-300); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--amber);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--amber-dark);
  box-shadow: 0 4px 16px rgba(232,137,12,0.35);
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.7);
}

.btn--outline-navy {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn--outline-navy:hover {
  background: var(--navy);
  color: var(--white);
}

.btn--track-lr {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border: 1.5px solid rgba(232,137,12,0.55);
  padding: 9px 28px;
  min-width: 128px;
  justify-content: center;
}
.btn--track-lr:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(232,137,12,0.30);
}

/* ---- NAV ---- */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  transition: box-shadow 250ms ease, background 250ms ease;
}
#main-nav.nav--scrolled {
  box-shadow: 0 4px 24px rgba(10,22,40,0.45);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Transparent PNG logo — looks crisp on any dark surface (nav / hero / footer) */
.nav-logo__img {
  height: 68px;
  width: auto;
  display: block;
  transition: opacity 200ms ease;
}
.nav-logo__img:hover { opacity: 0.88; }

/* Footer logo — slightly larger */
.footer-logo__img {
  height: 84px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--amber);
  transition: width var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-ctas .btn {
  padding: 9px 18px;
  font-size: 0.8rem;
  white-space: nowrap;
}
/* Track LR is the primary CTA — wider + extra right gap visually separates
   it from the WhatsApp / Email / Login cluster */
.nav-ctas .btn--track-lr {
  margin-right: 10px;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 300ms ease, opacity 300ms ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  max-height: 0;
  transition: max-height 350ms ease;
}
.nav-mobile.open { max-height: 400px; }
.nav-mobile a {
  display: block;
  padding: 14px 24px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color var(--transition), padding-left var(--transition);
}
.nav-mobile a:hover { color: var(--white); padding-left: 32px; }
.nav-mobile .mobile-ctas {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
}
.nav-mobile .mobile-ctas .btn { flex: 1; justify-content: center; }
.nav-mobile.open { max-height: 640px; } /* override — room for login section + track lr */

/* Track LR link in mobile menu */
.mobile-track-lr-link {
  color: var(--amber) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.mobile-track-lr-link:hover { color: var(--amber-dark) !important; }
.mobile-track-lr-link svg { opacity: 1; }

/* ---- Nav Login Dropdown ---- */
.nav-login {
  position: relative;
}
/* Invisible bridge that fills the gap between button and dropdown panel.
   Without this the cursor leaves the hover zone while crossing the gap
   and the menu closes before the user reaches an option. */
.nav-login::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 12px; /* must be ≥ the gap in calc(100% + Npx) below */
  display: block;
}
.btn--login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.07);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.btn--login:hover,
.nav-login:hover .btn--login {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.45);
}
.login-chevron {
  transition: transform 0.22s ease;
}
.nav-login:hover .login-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.login-dropdown {
  position: absolute;
  top: calc(100% + 12px); /* gap — must match height of ::after bridge above */
  right: 0;
  min-width: 172px;
  background: #112240;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  /* overflow: visible — lets the caret ::before show above the panel */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
  pointer-events: none;
}
.nav-login:hover .login-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Caret pointing up */
.login-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 11px;
  height: 11px;
  background: #112240;
  border-left: 1px solid rgba(255,255,255,0.13);
  border-top: 1px solid rgba(255,255,255,0.13);
  transform: rotate(45deg);
}
.login-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: rgba(255,255,255,0.78);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  z-index: 1;
}
.login-dropdown__item:first-child { border-radius: 10px 10px 0 0; }
.login-dropdown__item:last-child  { border-radius: 0 0 10px 10px; }
.login-dropdown__item + .login-dropdown__item {
  border-top: 1px solid rgba(255,255,255,0.07);
}
.login-dropdown__item svg {
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.15s ease, stroke 0.15s ease;
}
.login-dropdown__item:hover {
  background: rgba(232,137,12,0.10);
  color: var(--white);
}
.login-dropdown__item:hover svg {
  opacity: 1;
  stroke: var(--amber);
}

/* Mobile login section */
.mobile-login-section {
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.mobile-login-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
  pointer-events: none;
}
.mobile-login-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mobile-login-option:hover {
  background: rgba(232,137,12,0.12);
  border-color: rgba(232,137,12,0.5);
  color: var(--white);
}
.mobile-login-option svg { opacity: 0.65; flex-shrink: 0; }

/* ---- HERO ---- */
#hero {
  position: relative;
  background: #0A1628;        /* dark navy fallback (SVG handles gradient) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Spacer that reserves the upper viewport for the big fixed logo */
.hero-spacer {
  flex: 0 0 65vh;
  min-height: 65vh;
}

/* Lower portion of hero — text + CTAs */
.hero-bottom {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 90px;   /* room for hero-badge */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* ---- Fixed animated hero logo ---- */
#hero-logo-anim {
  position: fixed;
  z-index: 99;              /* below nav (100) so nav overlaps on scroll */
  pointer-events: none;
  will-change: transform, opacity;   /* GPU-composited — no layout cost */
  transform-origin: top left;        /* scale from top-left so translate math is simple */
}
#hero-logo-anim img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}
.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}
.hero-title .accent {
  position: relative;
  color: var(--amber);
}
.hero-tagline {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-ctas .btn { min-width: 170px; justify-content: center; }

.hero-badge {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  opacity: 0.5;
  animation: bounce 2.5s ease infinite;
}
.hero-badge span {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ---- ABOUT ---- */
#about { background: var(--off-white); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}
.about-left .big-statement {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 20px;
}
.about-left .big-statement em {
  font-style: normal;
  color: var(--amber);
}
.about-divider {
  width: 48px;
  height: 3px;
  background: var(--amber);
  margin-bottom: 20px;
}
.about-right p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 16px;
}
.about-right p:last-child { margin-bottom: 0; }

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--amber);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pillar:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.pillar-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--amber);
}
.pillar h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.pillar p {
  font-size: 0.875rem;
  color: var(--grey-500);
  line-height: 1.6;
}

/* ---- SERVICES ---- */
#services { background: var(--white); }
.services-header {
  margin-bottom: 48px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.service-card:hover {
  border-left-color: var(--amber);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.service-card__icon {
  width: 48px;
  height: 48px;
  color: var(--amber);
  margin-bottom: 20px;
}
.service-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.service-card__desc {
  font-size: 0.9rem;
  color: var(--grey-500);
  line-height: 1.65;
}

/* ---- C&F DIVISION ---- */
#cnf { background: var(--off-white); }
.cnf-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--amber);
  box-shadow: var(--shadow-md);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.cnf-left .cnf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,137,12,0.1);
  color: var(--amber-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.cnf-left h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
.cnf-left p {
  font-size: 0.975rem;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 24px;
}
.cnf-services {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.cnf-services li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-body);
}
.cnf-services li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--amber);
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.cnf-right h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.cnf-trust {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cnf-trust-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cnf-trust-item__icon {
  width: 40px;
  height: 40px;
  background: rgba(232,137,12,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--amber);
}
.cnf-trust-item__text h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.cnf-trust-item__text p {
  font-size: 0.85rem;
  color: var(--grey-500);
  line-height: 1.5;
}

/* ---- WHY MENATRON ---- */
#why { background: var(--navy); }
.why-header { margin-bottom: 56px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.why-item {
  padding: 40px 32px;
  background: var(--navy-mid);
  text-align: center;
  transition: background var(--transition);
}
.why-item:hover { background: var(--navy-light); }
.why-item__icon {
  width: 48px;
  height: 48px;
  color: var(--amber);
  margin: 0 auto 16px;
}
.why-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.why-item p {
  font-size: 0.85rem;
  color: var(--grey-300);
  line-height: 1.6;
}

/* ---- COVERAGE ---- */
#coverage { background: var(--off-white); }
.coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.coverage-left .section-title { margin-bottom: 12px; }
.coverage-left p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 40px;
}
.expansion-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.exp-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}
.exp-step:last-child { padding-bottom: 0; }
.exp-step__line {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.exp-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--grey-300);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--grey-300);
  flex-shrink: 0;
}
.exp-step.active .exp-step__dot {
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--amber);
}
.exp-step__connector {
  width: 2px;
  flex: 1;
  background: var(--grey-100);
  margin-top: 4px;
  min-height: 28px;
}
.exp-step:last-child .exp-step__connector { display: none; }
.exp-step__body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.exp-step.active h4 { color: var(--amber); }
.exp-step__body p {
  font-size: 0.875rem;
  color: var(--grey-500);
  line-height: 1.5;
}

/* ---- Interactive India Map ---- */
.coverage-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
#india-map-container {
  width: 100%;
  max-width: 460px;
}
.india-map-interactive {
  position: relative;
  width: 100%;
  user-select: none;
}
.india-map-interactive svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* State paths — fills set via JS (rgba); no stroke: PNG outline provides crisp borders */
.state-path {
  stroke: none;
  cursor: pointer;
  transition: fill 140ms ease;
}

/* Active (North India) and hover fills are also set via JS constants */

/* Tooltip */
.india-map-tooltip {
  position: absolute;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  transform: translateY(-4px);
}
.tip-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.tip-tag {
  display: block;
  font-size: 0.68rem;
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Map legend */
.map-legend {
  font-size: 0.75rem;
  color: var(--grey-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.legend-dot--active { background: var(--amber); }
.legend-dot--future { background: #C8D6E8; }

/* ---- CONTACT ---- */
#contact { background: var(--white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: start;
}
.contact-info { padding-top: 8px; }
.contact-info .section-title { margin-bottom: 16px; }
.contact-info p {
  font-size: 0.975rem;
  color: var(--grey-500);
  line-height: 1.7;
  margin-bottom: 36px;
}
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-method__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-method__icon--wa { background: #25D366; color: var(--white); }
.contact-method__icon--email { background: var(--amber); color: var(--white); }
.contact-method__icon--addr { background: var(--navy); color: var(--white); }
.contact-method__text small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-300);
  margin-bottom: 2px;
}
.contact-method__text span {
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--navy);
}

/* Form */
.contact-form {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--grey-100);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(232,137,12,0.1);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238892A4' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--amber);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  margin-top: 4px;
}
.form-submit:hover {
  background: var(--amber-dark);
  box-shadow: 0 4px 20px rgba(232,137,12,0.35);
}
.form-submit:active { transform: translateY(1px); }

.form-success {
  display: none;
  text-align: center;
  padding: 32px;
}
.form-success.show { display: block; }
.form-success__icon {
  width: 56px;
  height: 56px;
  background: rgba(232,137,12,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin: 0 auto 16px;
}
.form-success h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-success p {
  font-size: 0.9rem;
  color: var(--grey-500);
  margin-bottom: 20px;
}

/* ---- FOOTER ---- */
#footer {
  background: var(--navy);
  padding-block: 64px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 24px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footer-social a:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--white);
}

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition), padding-left var(--transition);
}
.footer-col ul li a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer-contact-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.footer-contact-btns .btn {
  justify-content: flex-start;
  font-size: 0.85rem;
  padding: 11px 18px;
}
.btn--wa {
  background: #25D366;
  color: var(--white);
}
.btn--wa:hover {
  background: #1ebe5c;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}
.btn--email {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75);
}
.btn--email:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.footer-bottom {
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.25);
}

/* ---- FLOATING BUTTONS ---- */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.fab {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.fab__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: max-width 300ms ease, padding 300ms ease;
  padding: 0;
}
.fab:hover .fab__label {
  max-width: 120px;
  padding-right: 16px;
  padding-left: 4px;
}
.fab--wa { background: #25D366; color: var(--white); }
.fab--email { background: var(--amber); color: var(--white); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .cnf-card { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  :root { --section-v: 64px; }

  .nav-links,
  .nav-ctas { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { display: flex; }

  .hero-title { font-size: 2.4rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { min-width: unset; width: 100%; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-pillars { grid-template-columns: 1fr; }

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

  .cnf-card { padding: 32px 24px; }

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

  .coverage-grid { grid-template-columns: 1fr; }
  .coverage-right { display: flex; max-width: 320px; margin: 0 auto; }
  #india-map-container { max-width: 100%; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

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

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .floating-actions { right: 16px; bottom: 24px; }

  /* Responsive additions for new sections */
  .stat-strip__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat-strip__divider { display: none; }
  .industry-tab-nav { flex-wrap: wrap; gap: 8px; }
  .industry-panel__inner { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .cnf-process { flex-direction: column; gap: 8px; }
  .cnf-step__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 20px; }
  .nav-dropdown__menu { left: 0; }
  .mobile-quote-btn { margin: 0 16px 8px; text-align: center; justify-content: center; }
  .coverage-cities { display: none; } /* hide on mobile to avoid overflow */
}

@media (max-width: 480px) {
  .stat-strip__grid { grid-template-columns: 1fr; }
}

/* =============================================
   NEW SECTIONS — Phase 7 Website Improvements
   ============================================= */

/* ---- Get a Free Quote button ---- */
.btn--quote {
  background: var(--amber);
  color: var(--white);
  border: 1.5px solid var(--amber);
  font-weight: 700;
}
.btn--quote:hover {
  background: var(--amber-dark);
  border-color: var(--amber-dark);
  box-shadow: 0 4px 16px rgba(232,137,12,0.40);
  color: var(--white);
}
.nav-ctas .btn--quote {
  padding: 9px 16px;
  font-size: 0.8rem;
}

/* ---- Nav dropdown ---- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-dropdown__trigger svg {
  transition: transform var(--transition);
  flex-shrink: 0;
  opacity: 0.6;
}
.nav-dropdown:hover .nav-dropdown__trigger svg { transform: rotate(180deg); opacity: 1; }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-mid);
  border: 1px solid rgba(232,137,12,0.20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  min-width: 200px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  transform-origin: top center;
}
.nav-dropdown:hover .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-dropdown__item:hover {
  background: rgba(232,137,12,0.10);
  color: var(--white);
}
.nav-dropdown__item svg { flex-shrink: 0; opacity: 0.7; }

/* ---- Stat Strip ---- */
.stat-strip {
  background: var(--navy);
  padding-block: 40px;
  border-bottom: 1px solid rgba(232,137,12,0.15);
}
.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto repeat(3, 1fr);
  align-items: center;
  gap: 0;
  text-align: center;
}
/* Re-define as simpler flex for most viewports */
.stat-strip__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.stat-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 36px;
  flex: 1;
  min-width: 140px;
}
.stat-strip__number {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
  letter-spacing: -1px;
}
.stat-strip__plus {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
  vertical-align: super;
}
.stat-strip__label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.stat-strip__divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}

/* ---- Service card improvements ---- */
.service-card__bullets {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.service-card__bullets li {
  font-size: 0.8rem;
  color: var(--grey-500);
  padding-left: 14px;
  position: relative;
}
.service-card__bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-weight: 700;
}
.service-card__link {
  display: inline-block;
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.2px;
  transition: color var(--transition), letter-spacing var(--transition);
}
.service-card__link:hover {
  color: var(--amber-dark);
  letter-spacing: 0.5px;
}
/* Make service card a flex column so link sticks to bottom */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card__desc { flex-grow: 1; }

/* ---- Industries Section ---- */
.industry-tabs { margin-top: 40px; }
.industry-tab-nav {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--grey-100);
  margin-bottom: 0;
  flex-wrap: wrap;
}
.industry-tab-btn {
  padding: 12px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--grey-500);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.industry-tab-btn:hover { color: var(--navy); }
.industry-tab-btn.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  background: rgba(232,137,12,0.04);
}
.industry-panel {
  display: none;
  animation: fadeIn 250ms ease;
}
.industry-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.industry-panel__inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 48px;
  align-items: start;
  padding: 36px 0 12px;
}
.industry-panel__text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.industry-panel__text p {
  color: var(--grey-500);
  margin-bottom: 16px;
  line-height: 1.7;
}
.industry-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.industry-list li {
  font-size: 0.9rem;
  color: var(--text-body);
  padding-left: 22px;
  position: relative;
}
.industry-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-weight: 700;
}
.industry-ideal {
  font-size: 0.85rem;
  color: var(--grey-500);
  font-style: italic;
  margin-bottom: 20px !important;
}
.industry-panel__services {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 52px;
}
.industry-tag {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(232,137,12,0.08);
  border: 1px solid rgba(232,137,12,0.20);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber);
  text-align: center;
}

/* ---- Why Menatron stat badge ---- */
.why-stat {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.3px;
  opacity: 0.85;
}

/* ---- C&F Process Steps ---- */
.cnf-ideal {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.60);
  font-style: italic;
  margin: 8px 0 18px;
}
.cnf-process {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.cnf-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 130px;
}
.cnf-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cnf-step__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cnf-step__body strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.cnf-step__body span {
  font-size: 0.75rem;
  color: var(--text-muted, #6B7A99);
  line-height: 1.4;
}
.cnf-step__arrow {
  font-size: 1.1rem;
  color: var(--amber);
  margin-top: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 4px;
}

/* ---- Testimonials ---- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.testimonial-card__quote { margin-bottom: -8px; }
.testimonial-card__text {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.75;
  font-style: italic;
  flex-grow: 1;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--grey-100);
  padding-top: 14px;
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-card__author strong {
  display: block;
  font-size: 0.82rem;
  color: var(--navy);
  font-weight: 700;
}
.testimonial-card__author span {
  display: block;
  font-size: 0.75rem;
  color: var(--grey-500);
}
.testimonial-tags {
  margin-top: 4px;
}
.testimonial-tags span {
  font-size: 0.7rem !important;
  color: var(--amber) !important;
  font-weight: 600;
}

/* ---- Coverage city list ---- */
.coverage-cities {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.coverage-cities li {
  font-size: 0.82rem;
  color: var(--grey-500);
  padding-left: 16px;
  position: relative;
}
.coverage-cities li::before {
  content: '📍';
  position: absolute;
  left: 0;
  font-size: 0.65rem;
  top: 2px;
}

/* ---- Form improvements ---- */
.form-reassurance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(232,137,12,0.06);
  border: 1px solid rgba(232,137,12,0.20);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 20px;
}
.form-reassurance svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Footer improvements ---- */
.footer-grid {
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
}
.footer-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col ul li a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.50);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--amber); }

/* ---- Industries responsive ---- */
@media (max-width: 900px) {
  .industry-panel__inner { grid-template-columns: 1fr; }
  .industry-panel__services { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .industry-tab-btn { font-size: 0.8rem; padding: 10px 14px; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .cnf-process { flex-direction: column; }
  .cnf-step__arrow { display: none; }
  .stat-strip__item { padding: 0 16px; min-width: 100px; }
}