/* --- 1. CORE VARIABLES & RESET --- */
:root {
  /* Palette */
  --primary: #fdb515; /* Elite Gold */
  --primary-hover: #e5a00d;
  --dark: #0f172a; /* Obsidian */
  --dark-lighter: #1e293b;
  --light: #f8fafc;
  --text-main: #334155;
  --text-muted: #64748b;
  --white: #ffffff;

  /* UI Elements */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(12px);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure predictable sizing across elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}


html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text-main);
  background-color: var(--light);
  line-height: 1.6;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Overrides */
.text-primary {
  color: var(--primary) !important;
}
.bg-primary {
  background-color: var(--primary) !important;
}
.bg-dark {
  background-color: var(--dark) !important;
}
.text-dark {
  color: var(--dark) !important;
}

/* Section Spacing - Using Bootstrap utilities largely, but setting a baseline */
section {
  position: relative;
  overflow: hidden;
}

/* --- 2. CUSTOM COMPONENTS --- */

/* Buttons */
.btn {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  border-radius: 8px;
  font-size: 1rem;
  padding: 0.6rem 1.8rem;
  width: fit-content;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
}

.btn-primary {
  background: var(--primary);
  border: 2px solid var(--primary);
  color: var(--dark);
  box-shadow: 0 4px 15px rgba(253, 181, 21, 0.25);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(253, 181, 21, 0.4);
}

.btn-outline-dark {
  border: 2px solid var(--dark-lighter);
  color: var(--dark);
}

.btn-outline-dark:hover {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}

/* Badge/Chip */
.badge-pill {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 0.35rem 1rem;
  background: rgba(253, 181, 21, 0.15);
  color: #b45309;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(253, 181, 21, 0.3);
  line-height: 1.2;
}

/* --- 3. NAVIGATION (Pill Style) --- */
header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1030; /* Bootstrap z-index usually 1030 for fixed */
  pointer-events: none;
}

.pill-nav-container {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.pill-item {
  padding: 0.4rem 1.3rem;
  border-radius: 50px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--dark);
  margin-left: 0 0.2rem;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.pill-item.logo {
  font-size: 1.25rem;
  padding: 8px 24px;
  margin-right: 4px;
}

.logo-text {
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: var(--dark);
  font-size: 1.2rem;
}
.logo-dot {
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
}

.brand-mobile {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.logo-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

.pill-item:not(.logo):hover {
  background: rgba(0, 0, 0, 0.04);
}

.pill-item.active:hover {
    background-color: var(--dark);
}
.pill-item.active {
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

/* --- 4. HERO SECTION --- */
#home {
  padding-top: 140px;
  padding-bottom: 80px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(253, 181, 21, 0.08) 0%,
    transparent 60%
  );
}

.hero-title {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }
}

.hero-title span.highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.hero-title span.highlight::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 14px;
  background: var(--primary);
  opacity: 0.35;
  z-index: -1;
  transform: skewX(-10deg);
}

/* --- COMPARISON SLIDER --- */
.comparison-wrapper {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 8px; /* Inner frame */
}

.comparison-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 3px solid #eee;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.comparison-slider img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.comparison-slider .img-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  object-fit: cover;
  object-position: left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes imageSweep {
  0%,
  100% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
}

.comparison-slider .slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 4px;
  background: var(--white);
  cursor: ew-resize;
}

@keyframes sliderSweep {
  0%,
  100% {
    left: 0%;
  }
  50% {
    left: 100%;
  }
}

.comparison-slider .slider-handle .handle-circle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--primary);
  border: 3px solid var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  font-size: 1rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Accessibility: Focus states for keyboard navigation */
.comparison-slider .slider-handle:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

.slider-play-pause {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--dark);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.slider-play-pause:hover {
  background: #e5a00d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

.slider-play-pause:active {
  transform: scale(0.95);
}

.slider-play-pause:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Pill navigation focus states */
.pill-item:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Centering next/prev controls */
.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.slider-controls button {
  background: var(--dark);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-controls button:hover {
  background: var(--primary);
  color: var(--dark);
}

/* --- 5. PARTNERS MARQUEE --- */
.marquee-section {
  background: var(--white);
  padding: 2.5rem 0;
  border-bottom: 1px solid #eee;
}
.marquee {
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  padding: 1rem;
}
.marquee-content {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scroll 40s linear infinite;
}
.marquee-content img {
  height: 45px;
  width: auto;
  /* filter: grayscale(100%) opacity(0.6); */
  transition: filter 0.3s;
  filter: opacity(0.7);
}
.marquee-content img:hover {
  filter: grayscale(0%) opacity(1);
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- 6. FEATURES (Bento Style via Bootstrap Grid) --- */
.bento-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(253, 181, 21, 0.3);
}

.bento-icon {
  width: 50px;
  height: 50px;
  background: rgba(253, 181, 21, 0.15);
  color: #b45309;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.bento-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
.bento-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
  flex-grow: 1;
}

/* Dark Card Variant */
.bento-card.dark-mode {
  background: var(--dark);
  color: var(--white);
}
.bento-card.dark-mode h3 {
  color: var(--white);
}
.bento-card.dark-mode p {
  color: #94a3b8;
}
.bento-card.dark-mode .bento-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

/* --- 7. RESULTS --- */
.testimonial-card {
  background: var(--dark-lighter);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  height: 100%;
}
.quote {
  font-style: italic;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
  display: block;
}

/* --- 8. PRICING CALCULATOR --- */
.pricing-wrapper {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.pricing-card {
  transition: all 0.3s ease;
  border: 2px solid transparent !important;
  border-radius: 8px;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.popular .pricing-card {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px rgba(253, 181, 21, 0.2) !important;
}

.ribbon {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--primary);
  color: var(--dark);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.plan-name {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.price-section {
  margin: 2rem 0;
}

.currency {
  font-size: 2rem;
  margin-right: 0.25rem;
}

.vehicle-count {
  font-weight: 500;
}

.per-image-price {
  font-size: 95%;
}

.features-list {
  padding-left: 1rem;
}

.features-list li {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.pricing-wrapper .btn {
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: -10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
}

.price-big {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}
.price-small {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}


/* --- 8.5 QUOTE BOX --- */
.quote-box {
  background: var(--light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: left;
  border: 1px solid rgba(0,0,0,0.06);
}

.quote-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
  text-align: center;
}

/* --- 9. CONTACT FORM --- */
.form-control {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.form-control:focus {
  box-shadow: 0 0 0 4px rgba(253, 181, 21, 0.15);
  border-color: var(--primary);
  background: #fff;
}

/* --- 10. FOOTER --- */
footer a {
  color: #cbd5e1;
  text-decoration: none;
}
footer a:hover {
  color: var(--primary);
}
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  transition: 0.3s;
  color: #fff;
}
.social-btn:hover {
  background: var(--primary);
  color: var(--dark);
}

/* --- INLINE STYLE REPLACEMENTS --- */
.swiper-arrow {
  width: 45px;
  height: 45px;
  border-radius: 3px;
}

.avatar {
  width: 40px;  
  height: 40px;
}

.vehicle-input::-webkit-outer-spin-button,
.vehicle-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vehicle-input[type="number"] {
  -moz-appearance: textfield;
}

.contact-bg {
  background: radial-gradient(
    circle at center,
    rgba(253, 181, 21, 0.05) 0%,
    transparent 70%
  );
}

.small-font {
  font-size: 0.75rem;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 767px) {
  /* Add a small left/right padding space on mobile to prevent text touching the edge */
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Add the same lateral padding to sections so that full-width sections (like hero) also maintain breathing room */
  /* Do NOT add lateral padding to sections as .container already supplies consistent breathing room */

  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #home {
    padding-top: 80px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .bento-card {
    padding: 1.5rem;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .comparison-wrapper {
    padding: 4px;
  }

  .pricing-wrapper {
    margin: 0;
  }

  /* Keep desktop spacing/typography on mobile while stacked in a single column */
  .pricing-wrapper .col-lg-7,
  .pricing-wrapper .col-lg-5 {
    padding: 3rem !important; /* match desktop p-5 */
  }

  .price-big {
    font-size: 3.5rem; /* match desktop */
  }
 


  .vehicle-input {
    width: 120px; /* match desktop */
    font-size: 1.5rem;
  }

  /* Keep the desktop alignment for currency sign and value; desktop uses align-items-start and mt-2 */
  .pricing-wrapper .my-3 {
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .pricing-wrapper .my-3 .fs-2 {
    margin-top: 0.5rem !important; /* keep the small offset used in desktop */
    line-height: 1;
    font-size: 1.15rem; /* keep desktop relative size */
  }

  /* Ensure the Get Your Quote button has a nice touch size but doesn't overflow */
  .pricing-wrapper .btn {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    height: auto;
    min-height: 44px;
    width: 100% !important; /* match desktop CTA which is full width */
  }

  /* Make the left labels and inputs stack neatly */
  .pricing-wrapper .col-lg-7 p,
  .pricing-wrapper .col-lg-7 .h5,
  .pricing-wrapper .col-lg-7 label {
    font-size: 0.95rem;
  }

  /* Decrease list/item spacing for small screens */
  .pricing-wrapper .row.g-3 {
    gap: 0.5rem !important;
  }

  .pricing-wrapper h5 {
    font-size: 1rem;
  }

  .pricing-wrapper .badge {
    font-size: 0.8rem;
  }

  /* Quote box mobile adjustments */
  .quote-box {
    padding: 1.5rem;
  }

  .quote-title {
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
  }

  /* Footer mobile specific adjustments */
  footer {
    padding-top: 2rem; /* add more vertical breathing room */
    padding-bottom: 2rem;
  }

  footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Increase logo size in footer */
  footer .logo-title {
    font-size: 1.5rem;
  }
  footer .logo-dot {
    font-size: 2.2rem;
    margin-left: 0.15rem;
  }

  /* Social buttons slightly larger for touch targets */
  footer .social-btn {
    width: 40px;
    height: 40px;
  }

  /* Footer bottom (policies and small-print) stacked and centered on mobile */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
  }
  .footer-bottom .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }
  .footer-bottom p {
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
  }
}

/* Fine-tune specifically at <=575px where overflow was noticed */
@media (max-width: 575px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* Make sure the pricing wrapper fits exactly */
  .pricing-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
  }

  /* Maintain desktop padding while stacked in a single column */
  .pricing-wrapper .col-lg-7,
  .pricing-wrapper .col-lg-5 {
    padding: 3rem !important;
  }

  /* Convert the left border -> top border when stacked vertically to avoid horizontal overflow */
  .pricing-wrapper .border-start {
    border-left: none !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }

  .price-big {
    font-size: 3.5rem;
  }
  

  /* Ensure vehicle input and label wrap instead of overflowing */
  .pricing-wrapper .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center;
  }

  .vehicle-input {
    width: 120px;
    font-size: 1.5rem;
  }

  /* Make sure elements cannot exceed the wrapper width */
  .pricing-wrapper img, .pricing-wrapper input, .pricing-wrapper .form-control, .pricing-wrapper .btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .pricing-wrapper * {
    overflow-wrap: anywhere;
  }

  /* reduce gaps on flex lists inside pricing wrapper for extra narrow screens */
  .pricing-wrapper .d-flex.gap-3 {
    gap: 0.5rem !important;
  }

  /* Ensure the bootstrap row inside pricing doesn't add negative margins */
  .pricing-wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Quote box adjustments for <=575px */
  .quote-box {
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }
}

/* --- EXAMPLES / MASONRY --- */
.examples-wrap {
  margin-top: 1rem;
}
.examples-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.stat-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  min-width: 160px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid rgba(2,6,23,0.06);
}
.stat-card .stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--dark);
}
.stat-head { gap: 0.5rem; }
.stat-icon { font-size: 1rem; width: 1.1rem; text-align: center; }
.stat-value { line-height: 1; }

/* Blog search input with embedded button */
.search-wrap { position: relative; display: inline-block; width: 100%; }
.search-wrap input.form-control { padding-right: 3rem; }
.search-wrap .search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Smaller filter tag buttons */
.tag-toggle {
  font-size: 0.82rem;
  padding: 0.28rem 0.6rem;
  border-radius: 12px;
  transition: all 0.18s ease;
}

@media (max-width: 576px) {
  .search-wrap { min-width: 0; width: 100%; }
}
.stat-card.stat-card--up { border-color: rgba(5,150,105,0.12); }
.stat-card.stat-card--down { border-color: rgba(220,38,38,0.10); }
.stat-card.stat-card--up .stat-value { color: #059669; }
.stat-card.stat-card--down .stat-value { color: #dc2626; }
.stat-card .stat-label {
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

@media (max-width: 576px) {
  .stat-card { min-width: 140px; padding: 0.6rem 0.8rem; }
  .stat-card .stat-value { font-size: 1.05rem; }
}
.examples-grid {
  width: 100%;
}
.examples-grid {
  /* column and gutter variables used to compute sizes so Masonry fills width exactly */
  --examples-gutter: 2%;
  --examples-cols: 3;
  --examples-col-width: 32%; /* (100% - (cols-1)*gutter) / cols --> 32% for 3 cols with 2% gutter */
}
.examples-grid .masonry-sizer,
.examples-grid .masonry-item {
  width: var(--examples-col-width);
}
.examples-grid .gutter-sizer {
  width: var(--examples-gutter);
}
.examples-grid .masonry-item {
  margin-bottom: 1rem;
  /* remove padding/background so images use their natural height */
  padding: 0;
  background: transparent;
}
.examples-grid .masonry-item figure {
  margin: 0;
  overflow: visible;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}
.examples-grid .masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Modifier: span two columns */
.masonry-item--w2 {
  width: calc(var(--examples-col-width) * 2 + var(--examples-gutter));
}

/* Images use their inherent height/ratio now; figure is positioned to contain badge */
.examples-grid .masonry-item figure {
  position: relative;
  display: block;
}

/* Corner badge that shows short metrics like "+20% CTR" */
.examples-grid .example-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  /* white background at 0.8 opacity as requested */
  background: rgba(255,255,255,0.8);
  color: var(--dark);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  /* match image rounding */
  border-radius: 12px;
  z-index: 5;
  box-shadow: 0 6px 14px rgba(2,6,23,0.12);
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

/* Optional lighter badge variant (primary) */
.examples-grid .example-badge--primary {
  background: var(--white);
  color: var(--dark);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Positive / Negative accent modifiers */
.examples-grid .example-badge--up {
  background: rgba(255,255,255,0.8);
  color: #059669; /* green */
  border: 1px solid rgba(5,150,105,0.12);
}
.examples-grid .example-badge--down {
  background: rgba(255,255,255,0.8);
  color: #dc2626; /* red */
  border: 1px solid rgba(220,38,38,0.10);
}

/* Placement modifiers: vary badge corner placement */
.examples-grid .example-badge--tl { top: 8px; left: 8px; right: auto; bottom: auto; }
.examples-grid .example-badge--tr { top: 8px; right: 8px; left: auto; bottom: auto; }
.examples-grid .example-badge--bl { bottom: 8px; left: 8px; top: auto; right: auto; }
.examples-grid .example-badge--br { bottom: 8px; right: 8px; top: auto; left: auto; }

/* Small visual tweak for bottom badges so they sit slightly inset from rounded corners */
.examples-grid .example-badge--bl,
.examples-grid .example-badge--br {
  transform: translateY(0.5px);
}

/* Ensure images show rounded corners */
.examples-grid .masonry-item img {
  border-radius: 12px;
  display: block;
}


@media (max-width: 992px) {
  .examples-grid .masonry-sizer,
  .examples-grid .masonry-item {
    width: 50%;
  }
}

@media (max-width: 576px) {
  .examples-grid .masonry-sizer,
  .examples-grid .masonry-item {
    width: 100%;
  }
}

/* --- CUSTOM SEGMENTED TOGGLE --- */

/* Hide the actual checkbox input */
.toggle-checkbox {
  display: none;
}

/* The dark background container */
.toggle-container {
  position: relative;
  display: flex;
  width: 280px;        /* Adjust width as needed */
  height: auto;        /* Height from screenshot */
  background-color: var(--white); /* Light background */
  border-radius: 8px;
  cursor: pointer;
  padding: 0.6rem 0.5rem;        /* Padding creates the gap around the handle */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Light inner shadow */
  user-select: none;
  border: 2px solid rgba(255, 217, 0, 0.563);
}

/* The text labels */
.toggle-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;          /* Sit on top of the handle */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
}

/* The sliding lighter pill (Handle) */
.toggle-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px); /* Half width minus padding */
  height: calc(100% - 8px);
  background-color: var(--primary); /* Primary color handle */
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(253, 181, 21, 0.3);
  z-index: 1;
  border: 1px solid rgba(253, 181, 21, 0.2);
}

/* --- INTERACTION STATES --- */

/* 1. When Checked (Monthly), move the handle to the right */
.toggle-checkbox:checked + .toggle-container .toggle-handle {
  transform: translateX(100%);
}

/* 2. Text Color Logic */

/* Unchecked = Annual is Active (Dark text) */
.toggle-checkbox:not(:checked) + .toggle-container .toggle-label:first-child {
  color: var(--dark);
}

/* Checked = Monthly is Active (Dark text) */
.toggle-checkbox:checked + .toggle-container .toggle-label:last-child {
  color: var(--dark);
}

/* --- MODERN PRICING CARDS (Reference Style) --- */

.modern-price-card {
  background-color: var(--white); /* Light background */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 2.5rem;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.modern-price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Most Popular Accent */
.modern-price-card.popular {
  border: 1px solid var(--primary); /* Elite Gold Border */
  box-shadow: 0 0 20px rgba(253, 181, 21, 0.1);
}

.mp-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(253, 181, 21, 0.15);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(253, 181, 21, 0.3);
}

/* Typography */
.mp-title {
  color: var(--dark);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mp-desc {
  color: var(--text-muted); /* Muted text */
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Price Section */
.mp-price-wrap {
  display: flex;
  align-items: baseline;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.mp-price-wrap .currency {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 2px;
  color: var(--dark);
}

.mp-price-wrap .price-big {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--dark);
  letter-spacing: -1px;
}

.mp-price-wrap .period {
  color: var(--text-muted);
  font-size: 1rem;
  margin-left: 6px;
}

/* Annual Savings Text (Controlled by JS) */
.annual-price-display {
  background: rgba(253, 181, 21, 0.15);
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(253, 181, 21, 0.3);
  margin-bottom: 2rem;
  text-align: left;
  width: fit-content;
}

/* Buttons */
.modern-price-card .btn {
  border-radius: 8px; /* More squared like reference */
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.modern-price-card .btn-outline-light {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--dark);
}

.modern-price-card .btn-outline-light:hover {
  background-color: var(--dark);
  color: var(--white);
}

/* Features List */
.mp-features {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 1.5rem;
  margin-top: auto; /* Push to bottom if content varies */
}

.mp-feat-head {
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mp-features ul li {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.mp-features ul li i {
  color: var(--text-muted); /* Grey checks */
  margin-right: 10px;
  font-size: 1rem;
}

.popular .mp-features ul li i {
  color: var(--primary); /* Gold checks for popular plan */
}

.mp-features ul li strong {
  color: var(--dark);
  font-weight: 600;
  margin-left: 4px;
}



/* --- ONBOARDING PAGE STYLES --- */

.position-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.position-option {
  display: flex;
  justify-content: center;
}

.position-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.preview-container {
  text-align: center;
  background: var(--light);
}

/* --- MULTI-STEP FORM --- */
.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.step-indicator.active {
  opacity: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
}

.step-indicator.active .step-number {
  background: var(--primary);
  color: white;
}

.step-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.step-connector {
  width: 60px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 10px;
  transition: background 0.3s ease;
  align-self: flex-start;
  margin-top: 19px;
}

.step-indicator.active ~ .step-connector {
  background: var(--primary);
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}