:root{
    --vap-gold: #F8C901 ;
    --vap-blue: #00123F;
    --white: #FFFFFF;
    --muted: #6b7a8f;
    --radius: 14px;
    --max-width: 1200px;
    --timeline-gap: 6px;
}

*{
    box-sizing:border-box
}

body{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin:0;
    color:var(--vap-blue);
    background: linear-gradient(180deg, #fbfdff 0%, #f6f8fb 100%);
    -webkit-font-smoothing:antialiased;
}

/* Reveal-on-scroll utility: hidden by default, becomes visible when .visible is added by JS */
.fade-up{ opacity:0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.fade-up.visible{ opacity:1; transform:none; }

.wrap{
    max-width:var(--max-width);
    margin:32px auto;
    padding:28px
}

/*///////////////////////////////////////////*/
/*Section Header*/
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.brand{
    display:flex;
    align-items:center;
    font-weight: 800;
    gap:12px;
}

.brand-mini{
    font-weight: 100;
    font-size: 12px;
    color: var(--muted);
}

.brand-title{
    font-size: 30px;
}

.brand-mini{
    font-weight: 100;
    font-size: 12px;
    color: var(--muted);
}

.brand-mini2{
    font-weight: 100;
    font-size: 20px;
    color: var(--muted);
}

.imageLogo{
    width:56px;
    height:56px;
    border-radius:12px;
    display:flex;
}

.imageLogo2{
    width:250px;
    height:250px;
    border-radius:12px;
    display:block;
    margin: 0 auto; /* Center the standalone logo horizontally: block element + auto side margins */
}

header .nav{
    display:flex;
    gap:18px;
}

header .nav a{
    color:var(--vap-blue);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
}

/*///////////////////////////////////////////*/
/* Section titles & subtitles utilities */
.section-title{ font-weight:800; font-size:20px; }
.title-blue{ color:var(--vap-blue); margin-top: 15px; }
.title-gold{ color:var(--vap-gold); }
.text-gold{ color:var(--vap-gold); } /* inline color replacement for spans */
.subtitle{ color:var(--muted); margin-top:6px; }

/* Section spacing moved from inline styles */
#timeline{ margin-top:24px; }
#how{ margin-top:28px; }

/*///////////////////////////////////////////*/
/*Hero Section*/
.hero{
    /* Wrapper only: visual styles stay here, layout is delegated to .hero .grid-container */
    padding:36px;
    background:linear-gradient(180deg,#ffffff 0%, #f7f9fc 100%);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(2,16,72,0.06);
}

.firstImage{
    /* Control hero illustration size while keeping it centered */
    margin-bottom: 35px;
    /* Ensure the hero illustration scales down on smaller screens while capping at 900px */
    width: 900px;
    max-width: 100%;
    height: auto;
}

.mini-text{
    margin-bottom: 15px;
}

.special-lab{
    color: var(--vap-gold);
}

.hero-left{
    text-align: center;
}

.hero-left h1{
    font-size: 34px;
    font-weight: 800;
    color:var(--vap-blue); 
    margin:14px 0 10px 0; 
    line-height:1.05; 
}

.hero-left .lead{ 
    font-size:16px;
    color:#345;
    opacity:0.9;
    margin-bottom:18px;
    font-weight:400; 
}

.tagline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background: var(--vap-gold);
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(0,17,76,0.06);
    box-shadow:0 6px 20px rgba(1,17,76,0.03);font-weight:700;
    color:#ffffff
}

/* features inline */
.features-inline{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap
}

.feature-pill{
    background:#fff;
    border-radius:12px;
    padding:10px 14px;
    border:1px solid #eef3ff;
    display:flex;
    gap:10px;
    align-items:center;
    box-shadow:0 6px 20px rgba(2,16,72,0.03)
}

/* COUNTERS section - highlighted */
.counters {
    display:flex;
    gap:22px;
    align-items:stretch;
    margin-top:28px;
    flex-wrap:wrap;
}

.counter-card{
    background:linear-gradient(180deg,#00114C 0%, #00143f 100%);
    color:var(--white);
    border-radius:14px;
    padding:18px;
    min-width:260px;
    flex:1;
    box-shadow:0 18px 40px rgba(0,17,76,0.12);
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
}

.counter-card .label{
    font-size:14px;
    opacity:0.9
}

.counter-value{
    font-weight:800;
    font-size:34px;
    color:var(--vap-gold)
}

/* Unit styling for counter value (e.g., "jours") replacing inline small styles */
.counter-value small{ font-size:14px; color:#dbe6ff }

.counter-sub{
    font-size:13px;
    color:#dbe6ff
}

/* HERO RIGHT (phone + avatars) */
.hero-right{
    /* Keep right hero content in the second grid column and centered */
    /*grid-column:2;*/
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    gap: 12px;
}

.phone-mock{
    width: 360px;/*clamp(375px, 45vw, 360px);*/ /* Fluid width: scales down on small screens, caps at 360px */
    height: 600px; 
    border-radius:28px;
    background:linear-gradient(180deg,#fff,#f6f8fb);
    box-shadow:0 18px 50px rgba(2,16,72,0.08);
    padding:18px;
    display:flex;
    flex-direction:column;
    align-items:start;
    justify-content:start;
    overflow:hidden;
}

.screen{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding-top:18px;
}

/* Animated connection (avatars + slash) */
.match-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px
}

.avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(180deg,#fff,#f2f4f7);
    display:flex;
    align-items:center;
    justify-content:center;
    border:3px solid #fff;
    box-shadow:0 6px 18px rgba(2,16,72,0.08);
    position:relative;
    overflow:hidden;
}

.ava-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%
}

.slash{
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--vap-blue);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    font-weight:800;
    box-shadow:0 10px 30px rgba(0,17,76,0.08);
    transform:rotate(-12deg);
    position:relative;
    animation: slashPulse 2s infinite;
}

@keyframes slashPulse {
    0%{transform:rotate(-12deg) scale(1);opacity:1}
    50%{transform:rotate(-12deg) scale(1.06);opacity:0.95}
    100%{transform:rotate(-12deg) scale(1);opacity:1}
}

.match-anim {
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:center;
    margin-top:10px
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--vap-gold);
    opacity:0;
    transform:translateY(6px);
    animation: dotPop 1.4s infinite ease-in-out
}

.dot:nth-child(1){
    animation-delay:0s
}

.dot:nth-child(2){
    animation-delay:0.18s
}
  
.dot:nth-child(3){
    animation-delay:0.36s
}

@keyframes dotPop {
    0%{opacity:0;transform:translateY(6px)}
    50%{opacity:1;transform:translateY(-6px)}
    100%{opacity:0;transform:translateY(6px)}
}

.phone-logo{
    align-items: center auto;
    justify-content: center auto;
    width: 100px;
    height: 95px;
    display:flex;
}


/*///////////////////////////////////////////*/
/* Timeline 30 days - visual bars */
.timeline {
    margin-top:22px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.timeline-row{
    color: var(--vap-blue);
    display:flex;
    gap: var(--timeline-gap);
}

  /* Ensure the inner flex wrapper (created by JS) spans full row width so .day percentage widths resolve */
  .timeline-row > div{
    width:100%;
  }

#timeline strong{
color: var(--vap-blue)
}

.day{
width:calc((100% - 59*var(--timeline-gap))/60); /* responsive: 60 bars + 59 gaps; gap uses var for mobile */
background:#00123F; /* base of each small bar set to brand blue*/
border-radius:8px;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:6px;
}

.day .fill{
width:100%;
height:0;
background:#00123F; /* fill also brand blue (Option B) */
transition:height 600ms cubic-bezier(.2,.9,.2,1)
}

.day.active{
box-shadow:0 8px 18px rgba(1,17,76,0.06);
transform:translateY(-6px)
}

.day span{
font-size:11px;
color:#345;
opacity:0.6;
transform:translateY(-6px)
}

/* Timeline responsive: force right card to stack below timeline under 1024px
   so the timeline bars never get squeezed or hidden. Targets the direct wrapper
   inside #timeline (2 columns: timeline left, info card right). */
@media (max-width: 1024px){
  #timeline > div{
    /* Vertical stacking */
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #timeline > div > div:first-child{
    /* Allow timeline column to shrink fully when stacked */
    min-width: 0 !important;
  }
  #timeline > div > div:nth-child(2){
    /* Make the right card take full width when stacked */
    width: 100% !important;
  }
}

/* Phones only: shrink timeline gap so width calc stays positive and bars remain visible */
@media (max-width: 420px){
  /* Reduce timeline gap on phones so bars never collapse */
  :root{ --timeline-gap: 3px; }

  /* Keep header nav on one line at the right end; avoid pushing brand to wrap */
  header .nav{
    flex-wrap: nowrap; /* prevent the two links from stacking */
    gap: 10px;         /* tighter spacing on small phones */
  }
  header .nav a{
    white-space: nowrap; /* keep link labels on one line */
    font-size: 13px;     /* slight reduction only on small phones */
  }
  /* Ensure brand title 'VAP SYNERGY' stays on one line like the logo */
  header .brand > div:nth-child(2) > div:first-child{ white-space: nowrap; }
}

/* ICONS animated */
.icon-anim{
    width:42px;
    height:42px;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 24px rgba(2,16,72,0.06);
}

.icon-anim svg{
    width:22px;
    height:22px
}

/*///////////////////////////////////////////*/
/* FEATURES grid */
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:34px
}

.feature{
    background:#fff;
    border-radius:12px;
    padding:18px;
    border:1px solid #eef3ff;
    box-shadow:0 8px 20px rgba(2,16,72,0.03)
}

/* Feature variant with gold background (moved from inline style) */
.feature-gold{ 
    background: var(--vap-gold);
}

#card1-title{
    color: #FFFFFF;
}

#card1-mini{
    color:#FFFFFF;
}

.feature h4{
    color:var(--vap-blue);
    font-size: 15px;
    font-weight: 800;
    margin-bottom:8px
}

.feature p{
    font-size:14px;
    color:var(--muted)
}

/*///////////////////////////////////////////*/
/* Challenge Afrique: Flags leaderboard */
.flags-grid{
    /* Responsive grid that packs cards nicely across sizes */
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:16px;
    margin-top:18px;
}

.flag-card{
    /* Country card: circular flag + meta (name + count) */
    background:#fff;
    border:1px solid #eef3ff;
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 8px 20px rgba(2,16,72,0.03);
    transition:transform .18s ease, box-shadow .18s ease;
}

.flag-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,16,72,0.06); }

/* Highlight top 3 ranks subtly */
.flag-card.rank-1{ border-color: rgba(255,190,42,0.45); box-shadow:0 12px 30px rgba(255,190,42,0.15); }
.flag-card.rank-2{ border-color: rgba(0,17,76,0.18); }
.flag-card.rank-3{ border-color: rgba(0,17,76,0.12); }

.flag-circle{ width:56px; height:56px; flex:0 0 56px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f5f7fd; border:3px solid #fff; box-shadow:0 6px 16px rgba(2,16,72,0.06); }
.flag-circle img{ width:100%; height:100%; object-fit:cover; display:block; }

.flag-meta{ display:flex; flex-direction:column; gap:2px; }
.country-name{ font-weight:800; color:var(--vap-blue); }
.country-count{ font-size:13px; color:var(--muted); }

/* Small screens: tighten spacing and circle size */
@media (max-width: 575.98px){
  .flags-grid{ gap:12px; }
  .flag-circle{ width:48px; height:48px; flex-basis:48px; }
}

/*///////////////////////////////////////////*/
/* CTA */
.cta-row{ display:flex; gap:12px; align-items:center; margin-top:18px }

.btn-primary{
    /* Upgrade: gradient gold + subtle gloss for a premium look */
    background: linear-gradient(180deg, #ffd874 0%, #ffbe2a 100%);
    color:var(--vap-blue);
    padding:12px 18px;
    border-radius:12px;
    border:none;
    font-weight:800;
    cursor:pointer;
    position: relative; /* enable glossy overlay */
    box-shadow:0 16px 36px rgba(255,190,42,0.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary::after{ /* glossy highlight */
    content:"";
    position:absolute;
    left:2px; right:2px; top:2px;
    height:46%;
    border-radius:10px;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events:none;
}
.btn-primary:hover{ box-shadow:0 22px 50px rgba(255,190,42,0.38); transform: translateY(-1px); }
.btn-primary:active{ box-shadow:0 12px 26px rgba(255,190,42,0.24); transform: translateY(0); }
.btn-primary:focus-visible{ outline: 2px solid #ffe08a; outline-offset: 2px; }

/* Registration: disabled submit appears grey until form is valid + consent checked */
#preinscriptionForm .btn-primary:disabled{
    background: #e2e8f0; /* soft grey background */
    color: #6b7a8f;      /* muted text */
    box-shadow: none;    /* remove emphasis */
    cursor: not-allowed; /* indicate inactive */
    filter: none;        /* ensure no glossy/hover effects */
}
#preinscriptionForm .btn-primary:disabled::after{ display:none; }

/* Added: dedicated blue button for the success modal close */
.btn-blue{ /* purposeful: align with brand dark blue */
  background: var(--vap-gold);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0,17,76,0.18);
}
.btn-blue:hover{ background: #07143a; }
.btn-blue:focus-visible{ outline: 2px solid #b6c3ff; outline-offset: 2px; }

/* Voir plus/Voir moins toggle: pill outline with chevron; scoped to #toggleFlags */
#toggleFlags{
    /* outline pill using brand blue */
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--vap-blue);
    background: #fff;
    color: var(--vap-blue);
    border-radius: 999px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  #toggleFlags::after{
    /* draw a chevron using borders so we don't load any asset */
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg); /* down chevron */
    transition: transform .18s ease;
  }
  #toggleFlags:hover{
    /* hover fill for stronger affordance */
    background: var(--vap-blue);
    color: #fff;
    box-shadow: 0 12px 28px rgba(2,16,72,0.12);
    transform: translateY(-1px);
  }
  #toggleFlags:active{
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(2,16,72,0.10);
  }
  #toggleFlags:focus-visible{
    /* accessible focus ring */
    outline: 2px solid #b6c3ff;
    outline-offset: 2px;
  }
  #toggleFlags.is-expanded::after{
    /* rotate chevron upwards when expanded */
    transform: rotate(-135deg);
  }

/* Added: Floating CTA to remind registration (fixed right, appears on first scroll) */
.btn-cta-scroll{
  /* enforce fixed placement so it never sits at the end of the document flow */
  position: fixed !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; /* mobile default */
  z-index: 9000; /* below success overlay (9999) */
  /* visual style mirrors primary CTA to keep design consistent */
  background: #F40017;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(255,190,42,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* enable glossy overlay */
  /* reveal animation */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-cta-scroll::after{ /* glossy highlight */
  content:"";
  position:absolute;
  left:2px; right:2px; top:2px;
  height:46%;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.btn-cta-scroll.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Pulse halo for floating CTA only (non-intrusive: uses ::before, not box-shadow) */
.btn-cta-scroll::before{
  content: "";
  position: absolute;
  /* extend slightly beyond the button to form a halo */
  inset: -6px;
  border-radius: 14px; /* a bit larger than button's 12px radius */
  background: rgba(244,0,23,0.55); /* red glow matching button */
  filter: blur(12px);
  opacity: 0; /* animated in when visible */
  pointer-events: none;
  transform: scale(0.92);
}
.btn-cta-scroll.show::before{
  animation: ctaPulseHalo 1.8s ease-out infinite;
}
@keyframes ctaPulseHalo{
  0%{ opacity: .45; transform: scale(0.92); }
  70%{ opacity: 0; transform: scale(1.15); }
  100%{ opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .btn-cta-scroll.show::before{ animation: none !important; }
}
.btn-cta-scroll:hover{ box-shadow: 0 22px 50px rgba(255,190,42,0.38); }
.btn-cta-scroll:focus-visible{ outline: 2px solid #ffe08a; outline-offset: 2px; }

@media (min-width: 768px){
  .btn-cta-scroll{
    /* center-right on tablet/desktop as requested earlier */
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) translateY(10px);
  }
  .btn-cta-scroll.show{ transform: translateY(-50%); }
}

/* Language prompt (Google Translate) */
.lang-prompt{
    position: fixed; /* keep visible above content */
    right: 16px;
    bottom: 16px;
    z-index: 9500; /* above most UI, below success overlay (9999) */
    background:#fff;
    border:1px solid #eef3ff;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(2,16,72,0.08);
    padding:10px 12px;
    display:flex;
    gap:10px;
    align-items:center;
  }
  .lang-prompt .lang-text{ color: var(--vap-blue); font-size:14px; font-weight:600; }

/*///////////////////////////////////////////*/
/*SECTION REGISTRATION*/
#sec-reg{
    margin-top: 20px;
}

.reg-right{
    background:#fff;
    border-radius:12px;
    padding:18px;
    border:1px solid #eef3ff;
    box-shadow:0 8px 20px rgba(2,16,72,0.03)
}

.section-card{
    background:#fff;
    border:1px solid #eef3ff;
    border-radius:12px;
    padding:16px;
    box-shadow:0 6px 16px rgba(2,16,72,0.03);
    margin-bottom:16px;
}

.form-grid{ display:grid; gap:12px; }
@media (min-width: 768px){
    .form-grid.form-grid-2{ grid-template-columns: 1fr 1fr; }
}

.regist-row{ margin-bottom:14px; }
.regist-row:last-child{ margin-bottom:0; }
.form-check{ margin-bottom:8px; }
.form-check:last-child{ margin-bottom:0; }

.main-title{
    color: var(--vap-blue);
    font-size: 25px;
    font-weight: 800;
}

.exemple-id-pays{
    font-size: 12.5px;
}

.entreprise-non-valid{
    font-size: 12.5px;
}

.info-title{
    color: var(--vap-blue);
    font-size: 20px;
    font-weight: 800;
}

.avertissement{
    font-size: 12.5px;
}

.special-red{
    color: #F40017;
}

.icon-valid{
    width: 15px;
    height: 15px;
}

.icon-invalid{
    width: 20px;
    height: 20px;
}

legend{
    color: var(--vap-blue);
    font-size: 18px;
    font-weight: 800;
}


.rappel-logo{
    margin-top: 20px;
}

.last-foot{
    margin-top:40px;
    text-align:center;
    color:#556;
    opacity:0.9;
    padding-bottom:40px
}
/*///////////////////////////////////////////*/
/*FOOTER*/
footer{
    margin-top:40px;
    text-align:center;
    color:#556;
    opacity:0.9;
    padding-bottom:40px
}

.icon-footer{
    justify-content: flex-start;
    align-items: center;
}

.logo-link{
    text-decoration:none;
}

.logo-link img{
    height: 24px;
    width: 24px;
    border-radius: 2.5px;
}

.separrateur-image{
    margin-left: 10px;
    margin-right: 10px;
}

/* Small legal/disclaimer under the submit button */
.form-disclaimer{
  font-size: 12px;
  color: #6c757d; /* Bootstrap muted-like */
  margin-top: 10px;
}

/* Full-page success overlay */
body.no-scroll{ overflow: hidden; }

#successOverlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#successOverlay[hidden]{ display: none; }

#successOverlay .success-card{
  /* Modal card visuals tuned to match provided design */
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eef3ff;
  box-shadow: 0 24px 60px rgba(2,16,72,0.18);
  padding: 26px;
  max-width: 640px;
  margin: 16px;
  /* Align to the left like the provided design and structure content vertically */
  text-align: left; /* changed from center to left to match mockup */
  display: flex; /* stack title, body, actions */
  flex-direction: column;
  gap: 10px; /* soft spacing between blocks */
}

#successOverlay .success-title{
  color: var(--vap-blue);
  font-weight: 800;
  font-size: 26px; /* slightly larger, closer to screenshot */
  margin: 0 0 8px 0;
}

/* Body text of the success modal: readable size and comfortable line height */
#successOverlay .success-body{
  color: #27324b; /* dark, good contrast on white */
  font-size: 16px;
  line-height: 1.6;
  margin: 0; /* spacing handled by flex gap */
}

/* Actions row: right align the Close button */
#successOverlay .success-actions{
  display: flex;
  justify-content: flex-end; /* place the button to the right side */
  margin-top: 6px;
}

/* --------------------------------------------- */
/* Responsive tweaks for Hero (mobile & small)    */
/* We keep Bootstrap's column stacking (col-12 on */
/* xs/sm, col-md-6 on md+) and refine spacing.    */
/* --------------------------------------------- */
@media (max-width: 767.98px){
  .hero{ padding:18px; } /* Reduce container padding on small screens */
  .hero-right{ margin-top:24px;min-height: 600px;} /* Space the phone mock when stacked under text */
  .counters .counter-card{ min-width:200px; } /* Prevent horizontal overflow */
}