/* ================================================================
   TRUETAB / TRUEPROTECT — Master Stylesheet
   Ported 1:1 from provided HTML design + brand palette
   ================================================================
   BRAND COLORS (Brand_Colors.png)
     Primary   #522582  hover #2F154B
     Secondary #A1C43A  hover #8AA832
     Neutral   body #1D1B20 · muted #938A8B · border #E3E3E3
   FONT: Nunito Sans 300–800
================================================================ */

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', -apple-system, Roboto, Helvetica, sans-serif;
  color: #1D1B20;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: color .2s; }
img { max-width: 100%; height: auto; display: block; }

/* ── CSS VARIABLES ────────────────────────────────────────── */
:root {
  --brand-purple:       #522582;
  --brand-purple-dark:  #2F154B;
  --brand-purple-light: #673AB7;

  --brand-green:        #A1C43A;
  --brand-green-dark:   #8AA832;
  --brand-green-forest: #596C20;
  --brand-green-100:    #E7F0CC;

  --neutral-body:       #1D1B20;
  --neutral-muted:      #938A8B;
  --neutral-muted-md:   #796D6D;

  --neutral-border:     #E3E3E3;
  --neutral-border-md:  #C8C6C6;

  --neutral-bg:         #FAFAFA;

  --transition:         .25s cubic-bezier(.4,0,.2,1);
}

/* =========================
   TEXT COLORS
========================= */

.text-brand-purple {
  color: var(--brand-purple);
}

.text-brand-purple-dark {
  color: var(--brand-purple-dark);
}

.text-brand-purple-light {
  color: var(--brand-purple-light);
}

.text-brand-green {
  color: var(--brand-green);
}

.text-brand-green-dark {
  color: var(--brand-green-dark);
}

.text-brand-green-forest {
  color: var(--brand-green-forest);
}

.text-neutral-body {
  color: var(--neutral-body);
}

.text-neutral-muted {
  color: var(--neutral-muted);
}

.text-neutral-muted-md {
  color: var(--neutral-muted-md);
}

/* =========================
   BACKGROUND COLORS
========================= */

.bg-brand-purple {
  background-color: var(--brand-purple);
}

.bg-brand-purple-dark {
  background-color: var(--brand-purple-dark);
}

.bg-brand-purple-light {
  background-color: var(--brand-purple-light);
}

.bg-brand-green {
  background-color: var(--brand-green);
}

.bg-brand-green-dark {
  background-color: var(--brand-green-dark);
}

.bg-brand-green-forest {
  background-color: var(--brand-green-forest);
}

.bg-brand-green-100 {
  background-color: var(--brand-green-100);
}

.bg-neutral-bg {
  background-color: var(--neutral-bg);
}

.bg-neutral-border {
  background-color: var(--neutral-border);
}

.bg-neutral-border-md {
  background-color: var(--neutral-border-md);
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/*@media (min-width: 992px) {
  .container {
    padding-left: 130px;
    padding-right: 130px;
  }
}*/

/* ── LOGO ─────────────────────────────────────────────────── */
.logo-img {max-width: 100px}

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar-custom {
  border-bottom: 1px solid rgba(82,37,130,.1);
  padding: 1.25rem 0;
  background: white;
  z-index: 1000;
}
.nav-links-wrap { gap: 3rem; }
.navbar-nav .nav-link {
  color: rgba(27,29,32,.6);
  font-weight: 400;
  font-size: 1rem;
  padding: .35rem 0 !important;
  transition: color var(--transition);
}
.navbar-nav .nav-link:hover { color: var(--brand-purple); }
.navbar-nav .nav-link-active {
  border-top: 1px solid var(--brand-purple);
  border-bottom: 1px solid var(--brand-purple);
  color: var(--brand-purple) !important;
  font-weight: 700;
}
.btn-contact {
  background-color: var(--brand-purple);
  color: white;
  padding: .625rem 1rem;
  border-radius: 50px;
  font-size: .875rem;
  font-weight: 500;
  border: none;
  transition: background var(--transition);
}
.btn-contact:hover, .btn-contact.active { background-color: var(--brand-purple-dark); color: white; }
.navbar-toggler { border: 1px solid rgba(82,37,130,.2); border-radius: 6px; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23522582' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── BADGE CHIPS ──────────────────────────────────────────── */
.badge-green {
  background-color: rgba(161,196,58,.1);
  color: var(--brand-green);
  padding: .5rem 1rem;
  border-radius: 50px;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: inline-block;
  margin-bottom: 1rem;
}
.badge-purple {
  background-color: rgba(82,37,130,.1);
  color: var(--brand-purple);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary-custom {
  background-color: var(--brand-purple);
  color: white;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  transition: all var(--transition);
  display: inline-block;
}
.btn-primary-custom:hover {
  background-color: var(--brand-purple-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(82,37,130,.3);
}
.btn-secondary-custom {
  background-color: white;
  color: var(--brand-purple);
  padding: .75rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(82,37,130,.15);
  transition: all var(--transition);
  display: inline-block;
}
.btn-secondary-custom:hover {
  background-color: #f5f5f5;
  color: var(--brand-purple);
  transform: translateY(-2px);
}
.btn-green-custom {
  background-color: var(--brand-green);
  color: white;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  transition: all var(--transition);
  display: inline-block;
}
.btn-green-custom:hover { background-colo r: var(--brand-green-dark); color: white; transform: translateY(-2px); }

/* ── SECTION HEADINGS ─────────────────────────────────────── */
.text-center-heading {
  color: var(--neutral-body);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.41;
  margin-bottom: .5rem;
}
@media (min-width: 768px) { .text-center-heading { font-size: 3rem; } }
.text-center-heading-green  { color: var(--brand-green)  !important; font-weight: 700; }
.text-center-heading-purple { color: var(--brand-purple) !important; font-weight: 700; }

/* ── SECTION BG HELPERS ───────────────────────────────────── */
.section-bg-light { background-color: #FDFFF7; padding: 4rem 0; }
.section-faq      { background: #FBF8FF; padding: 4rem 0; }
.section-cta      { background: linear-gradient(to bottom right, #F7F1FF, #FDFFF8); padding: 4rem 0; position: relative; overflow: hidden; }
.section-setup    { background: white; padding: 4rem 0; }
.section-products { background: #FAFAFA; padding: 4rem 0; position: relative; overflow: hidden; background-image:url(../img/home/blur-circles.png); background-repeat:no-repeat; background-position:center 70%; background-size:50%; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero-section {
  background: white;
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  background-image: url(../img/home/hero-banner-wave-vector.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.hero-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--neutral-body);
  margin-bottom: .5rem;
  line-height: 1.2;
}
.hero-title-highlight {
  color: var(--brand-purple);
  font-weight: 700;
  font-size: 2rem;
}
.hero-title-gradient{
  background: linear-gradient(90deg, var(--Colors-Primary-400, #522582) 4.52%, var(--Colors-Secondary-300, #A1C43A) 99.9%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-title-gradient-2{
  background: linear-gradient(90deg, var(--Colors-Primary-400, #ffffff) 4.52%, var(--Colors-Secondary-300, #A1C43A) 99.9%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (min-width: 992px) {
  .hero-title, .hero-title-highlight { font-size: 3.375rem; }
}
.hero-subtitle {
  color: rgba(27,29,32,.7);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 32rem;
}

/* Feature icons row */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.feature-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .25rem;
  border: .5px solid rgba(0,0,0,.08);
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-label {
  color: #796D6D;
  font-size: .875rem;
  font-weight: 500;
}

/* Floating badges on hero image */
.badge-float {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  gap: .75rem;
  position: absolute;
  z-index: 2;
}
.badge-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: white;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-text-small { font-size: .75rem; color: rgba(29,27,32,.6); font-weight: 600; margin: 0; }
.badge-text-large { font-size: 1.5rem; font-weight: 700; color: var(--brand-purple); line-height: 1.1; }

/* Stars */
.stars { display: flex; gap: .125rem; }
.star  { width: 22px; height: 22px; }

/* ── WHY CARDS ────────────────────────────────────────────── */
.card-why {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  /*display: flex;
  flex-direction: column;
  gap: 1rem;*/
  height: 100%;
}
.card-why-number { color: var(--brand-green); font-size: 3rem; font-weight: 800; line-height: 1;}
.card-why-title  { color: #1D1B20; font-size: 1.125rem; font-weight: 600; }
.card-why-desc   { color: #1D1B20; font-size: .875rem; font-weight: 300; line-height: 1.6;}

/* ── STATS SECTION ────────────────────────────────────────── */
.stats-section {
  background: linear-gradient(to right, var(--brand-purple), var(--brand-purple-dark));
  padding: 3rem 0;
  color: white;
  position: relative;  
}
.stats-section:before {
  content: '';
  background-image: url(../img/home/stats-vector-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.stat-item { text-align: center; flex: 1; }
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.41;
  margin-bottom: .5rem;
}
@media (min-width: 768px) { .stat-value { font-size: 1.875rem; } }
.stat-label { font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.9); }

/* ── SETUP STEPS ──────────────────────────────────────────── */
.step-item  { display: flex; gap: 1.5rem; align-items: flex-start; position: relative;}
.step-item:before { content:''; position:absolute; width:1px; height:95%; border:1px dashed rgba(0, 0, 0, 0.2); left:6px; top:24px; }
.step-title { color: #1D1B20; font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.step-desc  { color: #1D1B20; font-size: .875rem; font-weight: 300; line-height: 1.6; margin: 0; }

.gradient-dot-purple {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-purple);
  box-shadow: 0 0 0 6px rgba(82,37,130,.1);
  margin-top: 3px;
}
.gradient-dot-green {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-green);
  box-shadow: 0 0 0 6px rgba(161,196,58,.1);
  margin-top: 3px;
}

/* Loader Container */
.wave-loader {
  position: absolute;
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 50%;
  margin: -250px 0 0 -250px;
}
.section-cta .wave-loader {
  width: 300px;
  height: 300px;
}
.section-cta .wave-loader-1 {
  left: -50px;
  bottom: -50px;  
  top: auto;
  margin: 0;
}
.section-cta .wave-loader-2 {
  right: -50px;
  left: auto;  
  top: -50px;
  margin: 0;
}

/* Waves Circle */
.waves-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /*background: rgba(0, 0, 0, 0.9);*/
  background: transparent;
  position: absolute;
  z-index: 2;
}

/* Border Waves */
.wave {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  animation: wavePulse-10 3s infinite ease-out;
  opacity: 0;
}
.section-cta .wave {
  animation: wavePulse-5 3s infinite ease-out;
  border-color: rgba(161, 196, 58, 0.4);
}
/* Wave Delays */
.wave:nth-child(2) {
  animation-delay: 0.6s;
}

.wave:nth-child(3) {
  animation-delay: 1.2s;
}

.wave:nth-child(4) {
  animation-delay: 1.8s;
}

@keyframes wavePulse-10 {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  70% {
    opacity: 0.15;
  }

  100% {
    transform: scale(10);
    opacity: 0;
  }
}
@keyframes wavePulse-5 {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  70% {
    opacity: 0.15;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/* ── PRODUCT CARDS ────────────────────────────────────────── */
.card-product {
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 1.5rem;
  border: .75px solid rgba(0,0,0,.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card-product:hover {
  box-shadow: 0 8px 32px rgba(82,37,130,.12);
  transform: translateY(-3px);
}
.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: .5rem;
}
.product-title { color: #1D1B20; font-size: 1.125rem; font-weight: 600; text-align: center; }
.product-desc  { color: #1D1B20; font-size: .875rem; font-weight: 300; text-align: center; line-height: 1.6; }

/* Doctor mock card inside product */
.doctor-card-inner {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  width: 80%;
  margin: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.doctor-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(82,37,130,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; font-weight: 700; color: var(--brand-purple);
  flex-shrink: 0;
}

/* AI scan card */
.ai-scan-card {
  width: 100%;
  background: linear-gradient(to right, rgba(238,246,255,.6), rgba(242,255,248,.6));
  border-radius: .75rem;
  border: 1px solid #E4FFF0;
  padding: 1rem;
}
.ai-scan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.ai-scan-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ai-scan-item .icon {
  width: 1.25rem; height: 1.25rem;
  background: var(--brand-green-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.ai-scan-label   { color: rgba(29,27,32,.8); font-weight: 600; font-size: .625rem; margin: 0; }
.ai-scan-value   { color: rgba(29,27,32,.6); font-size: .625rem; margin: 0; }

/* Grid icons row */
.module-icons-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .75rem;
  padding: 1rem;
}
.module-icon-circle {
  width: 2.5rem; height: 2.5rem;
  background: white;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}

/* ── WHITE-LABEL SECTION ──────────────────────────────────── */
.wl-section { background-color: #FAFAFA; padding: 4rem 0; }
.wl-card {
  background: linear-gradient(to right, var(--brand-purple), var(--brand-purple-dark));
  border-radius: 1rem;
  overflow: hidden;
}
.wl-card-body { padding: 3rem; }
.wl-card-img  { height: 400px; object-fit: cover; width: 100%; }

/* ── TESTIMONIAL CARDS ────────────────────────────────────── */
.card-testimonial {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(82,37,130,.08);
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  height: 100%;
  transition: box-shadow var(--transition);
}
.card-testimonial:hover { box-shadow: 0 8px 24px rgba(82,37,130,.12); }
.testimonial-quote    { color: #010101; font-size: .875rem; font-weight: 400; line-height: 1.4; margin-bottom: 2rem; }
.testimonial-author   { color: #010101; font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.testimonial-location { color: #938A8B; font-size: .875rem; margin-bottom: 1rem; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item {
  background: white;
  border-radius: .75rem;
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: box-shadow var(--transition);
}
.faq-item:last-child {
  margin-bottom: 0;
}
.faq-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-title { color: #000; font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
.faq-toggle {
  width: 24px; height: 24px;
  background: var(--brand-purple);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-toggle.open { transform: rotate(180deg); }
.faq-content {
  display: none;
  margin-top: 1rem;
  color: #000;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.6;
}
.faq-content.show { display: block; }

.faq-contact-card {
  background: white;
  border-radius: .75rem;
  padding: 1.5rem 2rem;
}
.faq-contact-card h3 { color: black; font-size: 1.25rem; font-weight: 600; }
.faq-contact-card p  { color: black; font-size: .875rem; font-weight: 300; margin: 1rem 0; }

/* ── CTA SECTION ──────────────────────────────────────────── */
.cta-title       { color: rgba(29,27,32,.8); font-size: 2rem; font-weight: 600; line-height: 1.41; }
.cta-title-green { color: var(--brand-green); font-weight: 700; }
.cta-subtitle    { color: #1D1B20; font-size: 1rem; font-weight: 400; margin-top: 1rem; }
@media (min-width: 768px) { .cta-title { font-size: 2.625rem; } }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  /*background: linear-gradient(135deg, #2F154B 0%, rgba(89,108,32,1) 142.59%);*/
  background: linear-gradient(140deg, #2F154B 53.03%, var(--Colors-Secondary-500, #596C20) 142.59%);
  color: white;
  padding: 3.5rem 0;
}
.footer-logo { display: block; }
.footer-logo img { filter: brightness(0) invert(1);}
.footer-title { color: white; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.footer-text  { color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 400; line-height: 1.6; }
.footer-contact-row {
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-links-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-link {
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  font-weight: 400;
  transition: color var(--transition);
  line-height: 1.75;
}
.footer-link:hover       { color: white; }
.footer-link-email       { color: var(--brand-green); text-decoration: underline; }
.footer-link-phone       { color: var(--brand-green); }
.footer-link-email:hover,
.footer-link-phone:hover { color: var(--brand-green-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-socials { display: flex; gap: .5rem; }
.footer-social {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.footer-social:hover { background: rgba(255,255,255,.2); }
.footer-copy { color: white; font-size: .875rem; font-weight: 400; margin: 0; }

/* ── ABOUT PAGE ───────────────────────────────────────────── */
.team-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(82,37,130,.08);
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  transition: box-shadow var(--transition);
}
.team-card:hover { box-shadow: 0 8px 24px rgba(82,37,130,.1); }
.team-avatar-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--brand-green-100);
  border: 2px solid rgba(82,37,130,.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem; font-weight: 800;
  color: var(--brand-purple);
  font-family: 'Nunito Sans', sans-serif;
}
.team-name { font-size: 1rem; font-weight: 700; color: #1D1B20; margin-bottom: .25rem; }
.team-role { font-size: .875rem; color: var(--brand-purple); font-weight: 600; }

.value-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(82,37,130,.08);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}
.value-card:hover { box-shadow: 0 8px 24px rgba(82,37,130,.1); transform: translateY(-2px); }
.value-icon {
  width: 48px; height: 48px;
  background: var(--brand-green-100);
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
}

.job-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(82,37,130,.08);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}
.job-card:hover { box-shadow: 0 8px 24px rgba(82,37,130,.12); transform: translateY(-2px); }
.job-card h6  { font-size: 1rem; font-weight: 700; color: #1D1B20; margin-bottom: .4rem; }
.job-card p   { font-size: .875rem; color: var(--neutral-muted-md); font-weight: 300; line-height: 1.6; margin-bottom: .5rem; }
.job-location { font-size: .78rem; color: var(--neutral-muted); display: flex; align-items: center; gap: .3rem; margin-bottom: .85rem; }
.job-apply    { color: var(--brand-purple); font-weight: 700; font-size: .875rem; }
.job-apply:hover { color: var(--brand-green); }

/* ── CONTACT PAGE ─────────────────────────────────────────── */
.contact-card {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(82,37,130,.08);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(82,37,130,.07);
}
.contact-left  { padding: 2.5rem; border-right: 1px solid rgba(82,37,130,.08); }
.contact-right { padding: 2.5rem; }
.ci-row { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.35rem; }
.ci-icon {
  width: 42px; height: 42px; min-width: 42px;
  background: rgba(82,37,130,.07);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--brand-purple);
}
.ci-row strong { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .1rem; }
.ci-row span, .ci-row a { font-size: .875rem; color: var(--neutral-muted-md); }
.ci-row a { color: var(--brand-purple); font-weight: 600; }
.ci-row a:hover { color: var(--brand-green); }
.soc-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(82,37,130,.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-purple); font-size: .95rem;
  transition: all var(--transition);
}
.soc-icon:hover { background: var(--brand-purple); color: white; border-color: var(--brand-purple); }
.contact-divider { border: none; border-top: 1px solid rgba(82,37,130,.1); margin: 1.5rem 0; }

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--neutral-muted); margin-bottom: .3rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--neutral-border-md);
  border-radius: .5rem; padding: .65rem .9rem;
  font-size: .9rem; font-family: 'Nunito Sans', sans-serif;
  color: #1D1B20; background: white;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none; -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(82,37,130,.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(29,27,32,.4); }
.form-group textarea { resize: vertical; min-height: 110px; }
.phone-group { display: flex; gap: .5rem; }
.phone-group .cc { width: 110px; flex-shrink: 0; }
.phone-group .ph { flex: 1; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--neutral-muted); pointer-events: none; font-size: .85rem;
}
.btn-send {
  width: 100%; background: var(--brand-purple); color: white;
  border: none; border-radius: 50px;
  padding: .8rem 1.5rem;
  font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: .975rem;
  cursor: pointer; transition: all var(--transition);
}
.btn-send:hover { background: var(--brand-purple-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(82,37,130,.28); }
.map-wrap {
  border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--neutral-border);
  height: 340px; margin-top: 2rem;
}
.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── PRODUCTS PAGE (module cards) ────────────────────────── */
.module-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgba(82,37,130,.08);
  padding: 1.5rem;
  height: 100%;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.module-card:hover { box-shadow: 0 8px 28px rgba(82,37,130,.12); transform: translateY(-3px); }
.module-card.is-selected { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(161,196,58,.2); }
.module-emoji { font-size: 2rem; line-height: 1; margin-bottom: .75rem; display: block; }
.module-tag {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 4px; padding: .15rem .45rem;
}
.module-tag.health { background: rgba(161,196,58,.12); color: var(--brand-green-forest); }
.module-tag.motor  { background: rgba(82,37,130,.1);   color: var(--brand-purple); }
.module-tag.both   { background: rgba(161,196,58,.1);  color: var(--brand-green-forest); }
.module-card h5 { font-size: .975rem; font-weight: 700; margin-bottom: .3rem; padding-right: 3rem; }
.module-card .card-desc { font-size: .825rem; color: var(--neutral-muted-md); margin-bottom: .8rem; line-height: 1.5; }
.card-features { list-style: none; padding: 0; margin: 0 0 1rem; }
.card-features li {
  font-size: .78rem; color: var(--neutral-muted-md);
  display: flex; align-items: flex-start; gap: .4rem;
  margin-bottom: .3rem; line-height: 1.4;
}
.card-features li::before {
  content: '';
  flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%23A1C43A' stroke-width='1.3' fill='none'/%3E%3Cpath d='M4 7l2 2 4-4' stroke='%23A1C43A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.btn-add-module {
  background: var(--brand-purple); color: white; border: none;
  border-radius: 50px; padding: .4rem 1rem;
  font-size: .775rem; font-weight: 600;
  font-family: 'Nunito Sans', sans-serif;
  display: inline-flex; align-items: center; gap: .3rem;
  cursor: pointer; transition: all var(--transition);
}
.btn-add-module:hover   { background: var(--brand-purple-dark); }
.btn-add-module.added   { background: var(--brand-green); }
.card-selected-check {
  position: absolute; top: -10px; left: -2px;
  width: 22px; height: 22px;
  background: var(--brand-green); border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: white; font-size: .65rem; font-weight: 800;
}
.module-card.is-selected .card-selected-check { display: flex; }

/* Toggle: Personal / OEM */
.tt-toggle {
  display: inline-flex; background: white;
  border: 1px solid var(--neutral-border); border-radius: 50px; padding: 4px;
}
.tt-toggle-btn {
  border: none; background: transparent; border-radius: 50px;
  padding: .5rem 1.4rem; font-weight: 600; font-size: .875rem;
  color: var(--neutral-muted-md); cursor: pointer;
  font-family: 'Nunito Sans', sans-serif; transition: all var(--transition);
}
.tt-toggle-btn.active { background: var(--brand-purple); color: white; }

/* Filter pills */
.filter-pill {
  border: 1px solid var(--neutral-border); background: white;
  color: #1D1B20; border-radius: 50px;
  padding: .35rem 1.1rem; font-size: .825rem; font-weight: 600;
  cursor: pointer; font-family: 'Nunito Sans', sans-serif;
  transition: all var(--transition);
}
.filter-pill:hover  { border-color: var(--brand-purple); color: var(--brand-purple); }
.filter-pill.active { background: var(--brand-purple); color: white; border-color: var(--brand-purple); }

/* Bundle tray */
.bundle-tray {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--brand-purple-dark);
  color: white; padding: 1rem 1.5rem;
  display: none; align-items: center; gap: .75rem; flex-wrap: wrap;
  z-index: 999; box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
.bundle-tray.visible { display: flex; }
.tray-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .7; }
.tray-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12); border-radius: .5rem;
  padding: .3rem .65rem; font-size: .82rem; font-weight: 600;
}
.tray-chip-remove {
  width: 15px; height: 15px; background: rgba(255,255,255,.15);
  border: none; border-radius: 50%; color: white; font-size: .55rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transition);
}
.tray-chip-remove:hover { background: #fb3748; }
.tray-submit {
  margin-left: auto; background: var(--brand-green); color: white;
  border: none; border-radius: 50px; padding: .55rem 1.4rem;
  font-weight: 700; font-size: .9rem;
  font-family: 'Nunito Sans', sans-serif; cursor: pointer;
  transition: all var(--transition);
}
.tray-submit:hover { background: var(--brand-green-dark); }

/* OEM white-label box */
.wl-box { background: linear-gradient(to right, var(--brand-purple), var(--brand-purple-dark)); border-radius: 1rem; overflow: hidden; }
.wl-box .row{background-image:url(../img/home/wl-section-bg.png); background-repeat:no-repeat; background-position: right bottom; background-size:50%; }
.wl-box-body { padding: 4rem; color: white; }
.wl-eyebrow {
  display: inline-block; background: rgba(255,255,255,.15);
  color: white; border-radius: 4px;
  padding: .2rem .65rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem;
}
.wl-tag {
  display: inline-block; background: rgba(255,255,255,.12);
  color: white; border-radius: 4px;
  padding: .2rem .55rem; font-size: .75rem; font-weight: 600; margin: .2rem;
}
@media only screen and (max-width:600px) {
  .wl-box .row {background-size: 100%;}
}
/* Phone mockup helper */
.phone-mockup { max-width: 280px; object-fit: contain; }
@media (min-width: 992px) { .phone-mockup { max-width: 325px; } }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up  { animation: fadeUp .5s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .contact-left { border-right: none; border-bottom: 1px solid rgba(82,37,130,.08); }
  .wl-box-body  { padding: 2rem; }
  .navbar-nav .nav-link-active::after { display: none; }
  .nav-links-wrap { gap: 1rem; padding-top: .5rem; }
}
@media (max-width: 767px) {
  .hero-section { padding: 2.5rem 0; }
  .badge-float  { display: none; }
  .bundle-tray  { padding: .75rem 1rem; }
  .tray-submit  { width: 100%; margin-left: 0; margin-top: .5rem; }
  .contact-left, .contact-right { padding: 1.5rem; }
  .wl-card-img  { height: 220px; }
}
@media (max-width: 575px) {
  .phone-group { flex-direction: column; }
  .phone-group .cc { width: 100%; }
  .module-icons-grid { grid-template-columns: repeat(3,1fr); }
}