/* Visual Suite AI — style.css
   Updated: consistent section backgrounds, clearer heading spacing,
   no overlaps, preserved brand tokens (cards purple, CTAs red).
*/

:root{
  --bg: #3C096C;        /* primary background */
  --card: #FFFFFF;      /* card background */
  --cta: #F71735;       /* CTA red */
  --text: #F7F7F2;      /* font color */

  --muted: rgba(247,247,242,0.85);
  --radius: 12px;
  --shadow-sm: 0 8px 24px rgba(0,0,0,0.28);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.38);

  --max-read: 1200px;
  --gutter-min: 16px;
  --gutter-max: 48px;

  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset */
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg) 0%, #2b034e 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Responsive centered container (fluid up to --max-read) */
.container{
  width: clamp(320px, 92vw, var(--max-read));
  margin-left:auto;
  margin-right:auto;
  padding-left: calc(min(var(--gutter-max), max(var(--gutter-min), 4vw)));
  padding-right: calc(min(var(--gutter-max), max(var(--gutter-min), 4vw)));
}

/* NAV */
.nav{
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.nav__row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__brand img.nav__logo{height:36px;width:auto;display:block}
.nav__brand span{font-weight:700;font-size:18px}
.nav__links a{color:var(--text);text-decoration:none;margin-left:18px;font-weight:600}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;border:2px solid transparent;font-weight:700;text-decoration:none;cursor:pointer}
.btn--primary{background:var(--cta);color:var(--text);border-color:transparent;box-shadow:0 8px 20px rgba(247,23,53,0.12);transition:transform .14s ease,box-shadow .14s ease}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(247,23,53,0.18)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid rgba(247,247,242,0.12)}
.btn--sm{padding:8px 12px;font-size:14px}

/* HEADINGS — larger + consistent vertical spacing */
h1{
  font-size:clamp(32px,5.2vw,52px);
  line-height:1.04;
  margin:0 0 18px;
  text-align:center;
  padding-top:0;
}
h2{
  font-size:clamp(20px,2.4vw,28px);
  margin:0 0 14px;
  text-align:center;
  padding-top:4px;
}
h3{
  font-size:clamp(16px,1.8vw,18px);
  margin:0 0 10px;
  text-align:center;
}
h4{font-size:15px;margin:0 0 8px;text-align:center}

/* HERO */
.hero{
  padding:40px 0 88px; /* extra top/bottom so hero floats clearly */
  position:relative;
  overflow:visible;
}
.hero__wrap{
  display:grid; gap:24px; grid-template-columns:1.08fr .92fr; align-items:start;
}
.hero__content{display:flex;flex-direction:column;align-items:center;text-align:center}
.lead{color:var(--muted);max-width:780px;margin:0 auto 18px}
.hero__ctas{margin:18px 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__trust{display:flex;gap:14px;color:var(--muted);margin-top:12px;justify-content:center;flex-wrap:wrap}

/* HERO GRADIENT */
.hero__bg{
  position:absolute; inset:-10% -10% auto -10%; height:520px; z-index:-1; border-radius:40px; filter:blur(36px); pointer-events:none;
  background:
    radial-gradient(600px 320px at 15% 10%, rgba(187,136,235,0.22), transparent 40%),
    radial-gradient(520px 300px at 85% 20%, rgba(80,35,160,0.18), transparent 30%),
    linear-gradient(180deg, rgba(247,23,53,0.06), rgba(255,255,255,0) 60%);
  background-size:140% 140%,130% 130%,100% 100%;
  animation:heroBlend 12s ease-in-out infinite alternate;
}
@keyframes heroBlend{0%{background-position:10% 20%,80% 10%,50% 0%}100%{background-position:20% 30%,70% 25%,50% 10%}}

/* HERO bottom edge to prevent bleed */
.hero::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:-1px;
  height:20px; background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.14));
  pointer-events:none; z-index:1; border-top-left-radius:12px; border-top-right-radius:12px; transform: translateY(100%);
}

/* SECTIONS: consistent background & spacing */
/* make every section use the same subtle scaffold background so it's visually consistent */
.section{
  padding:40px 0;            /* generous vertical padding to avoid overlaps */
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  width:100%;
  box-sizing:border-box;
}
.section .container{ /* ensure inner container visually separated from section edges */
  padding-top:6px;
  padding-bottom:6px;
}

/* If you still want a subtle alternate feel for certain sections, use --alt but keep same base */
.section.section--alt{
  /* only a hair different, but consistent with base */
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.015));
}

/* Soft hairline separator between stacked sections (non-invasive) */
.section + .section{
  border-top:1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
}

/* GRID */
.grid{display:grid;gap:20px;justify-items:center;width:100%}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}

/* CARDS */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--card));
  color:var(--text);
  padding:24px;
  border-radius:calc(var(--radius) + 2px);
  border:none; /* no red outline */
  box-shadow:var(--shadow-sm);
  min-height:140px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
  align-items:center;text-align:center;width:100%;max-width:420px;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card h3,.card h4{margin:0}
.card p{margin:0;color:var(--muted)}
.card img{width:100%;height:auto;border-radius:8px;display:block}
.img-card p{margin-top:10px;color:var(--muted);font-weight:600}

/* Steps: ensure badge doesn't collide with heading */
.step{position:relative;padding-top:48px} /* more top space so badge sits comfortable */
.step__badge{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,0.06); color:var(--text); border:2px dashed rgba(255,255,255,0.10);
  font-weight:800;
}

/* QUOTE & LOGOS */
.quote{
  max-width:820px;margin:0 auto;padding:26px;border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border:1px solid rgba(255,255,255,0.04);text-align:center;
}
.quote__author{margin-top:12px;color:var(--muted);font-weight:600}
.logos{display:flex;gap:12px;margin-top:18px;justify-content:center;flex-wrap:wrap}
.logo-pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:700;color:var(--muted)}

/* GALLERY TABS */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:10px 14px;border-radius:999px;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.tab--active{background:linear-gradient(90deg, rgba(187,136,235,0.18), rgba(127,90,240,0.12));color:var(--text);border-color:rgba(255,255,255,0.06)}
.tabpanels{width:100%}
.tabpanel{display:none;width:100%}
.tabpanel.is-active{display:block}
.tabpanel .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;justify-items:center}

/* PRICING */
.plan{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.plan .price{font-size:26px;font-weight:800}
.plan--highlight{transform:translateY(-8px);box-shadow:0 20px 40px rgba(247,23,53,0.12)}

/* FORM */
.form__row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}
input[type=text],input[type=email]{flex:1;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text);min-width:260px}
.form button{white-space:nowrap}

/* TERMS & PRIVACY: left aligned content (legal copy), but padded inside same section look */
.legal{padding:34px 0;text-align:left}
.legal .container{max-width:900px}

/* FOOTER */
.footer{border-top:1px solid rgba(255,255,255,0.04);padding:26px 0 36px;margin-top:24px}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--muted);margin-left:12px;text-decoration:none}
.footer__social a{color:var(--muted);margin-left:12px}
.footer__legal{margin-top:12px;color:var(--muted);font-size:14px;text-align:center}

/* Headings accent (consistent and non-overlapping) */
h2::after{
  content:"";
  display:block;
  width:64px;height:3px;
  background: linear-gradient(90deg, rgba(187,136,235,0.9), rgba(127,90,240,0.9));
  border-radius:2px;margin:12px auto 0;
}

/* Responsive */
@media (max-width:1000px){
  .hero__wrap{grid-template-columns:1fr}
  .nav__links{display:none}
  .container{padding-left:20px;padding-right:20px}
  .section{padding:40px 0}
  .hero__bg{inset:-18% -18% auto -18%;height:420px;filter:blur(28px)}
  .hero::after{height:16px}
}
@media (max-width:640px){
  .grid{gap:14px}
  .card{padding:18px;max-width:100%}
  .form__row{flex-direction:column;align-items:stretch}
  .tab{padding:8px 10px}
  .step{padding-top:36px}
  .step__badge{left:50%;transform:translateX(-50%);top:-12px;width:40px;height:40px}
}
/* Extra space above the cards in the 'How it works' section */
#how .grid {
  margin-top: 38px; /* adjust as needed (24px, 40px, etc.) */
}
/* NAV container centered */
.nav__row {
  max-width: var(--max-read);
  margin: 0 auto;
  padding-left: calc(min(var(--gutter-max), max(var(--gutter-min), 4vw)));
  padding-right: calc(min(var(--gutter-max), max(var(--gutter-min), 4vw)));
}

/* HERO wrapper centered */
.hero__wrap {
  grid-template-columns: 1fr;      /* stack as one column */
  justify-items: center;           /* center content horizontally */
}

/* HERO content centered */
.hero__content {
  align-items: center;             /* center flex children */
  text-align: center;              /* center text */
  max-width: var(--max-read);      /* lock to readable width */
  margin: 0 auto;                  /* center block horizontally */
}

/* Center lead text */
.hero__content .lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center CTAs and trust badges */
.hero__ctas,
.hero__trust {
  justify-content: center;
}
/* Waitlist form: align inputs and button in the same row */
#waitlist .form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;        /* allows wrapping on smaller screens */
  justify-content: center;
  align-items: center;
}

#waitlist .form__row {
  display: contents;      /* remove extra flex wrapper so inputs + button sit in same row */
}

#waitlist input[type="text"],
#waitlist input[type="email"] {
  flex: 1;
  min-width: 220px;       /* keep inputs readable */
}

#waitlist button {
  white-space: nowrap;    /* prevent button text breaking */
  flex-shrink: 0;         /* keep button from shrinking too small */
}
/* === Fix: consistent backgrounds after Waitlist (Terms/Privacy/Footer) ===
   Add at the end of style.css to override earlier rules.
*/

/* 1) Use the same subtle scaffold background for every section */
.section,
.section.section--alt,
.legal,
.footer {
  /* single consistent tone across these areas */
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
}

/* 2) Make legal block visually match sections (center constraints preserved) */
.legal {
  text-align: left;         /* keep legal copy left-aligned for readability */
  padding-top: 48px;
  padding-bottom: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  box-shadow: none;         /* remove any inset shadow that could create a band */
  border-top: none;         /* remove extra borders that create separators */
}

/* 3) Footer: no harsh color shift, transparent overlay matching sections */
.footer {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  border-top: 1px solid rgba(255,255,255,0.03); /* subtle divider */
  box-shadow: none;
  padding-top: 32px;
  padding-bottom: 36px;
}

/* 4) Ensure Waitlist sits cleanly on the same canvas */
#waitlist,
#waitlist .container {
  background: transparent;
  padding-top: 40px;    /* breathing room above waitlist content */
  padding-bottom: 40px; /* breathing room below waitlist content */
}

/* 5) Tidy: remove any inline background on panels/cards inside footer area */
.footer .container *[style], .legal *[style] {
  /* remove inline background styles that may have been added by templates */
  background: none !important;
}

/* 6) Make separators subtle and consistent */
.section + .section,
.section + .legal,
.legal + .footer {
  border-top: 1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}

/* 7) If you want a slightly darker footer for visual stop, uncomment this small tweak:
.footer { background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01)); }
   (left commented so the design stays uniform by default)
*/

/* 8) Mobile: preserve the appearance */
@media (max-width:1000px) {
  .legal { padding-top:36px; padding-bottom:36px; }
  .footer { padding-top:26px; padding-bottom:28px; }
  #waitlist { padding-top:40px; padding-bottom:40px; }
}
/* === Icon sizing rules === */

/* Default: scale section icons to 2x */
.section i.fa-solid,
.section i.fa-regular,
.section i.fa-brands {
  font-size: 2em;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Exceptions: keep icons 1x inside Gallery tabs and CTAs */
#gallery .tabs i.fa-solid,
#gallery .tabs i.fa-regular,
#gallery .tabs i.fa-brands,
.btn i.fa-solid,
.btn i.fa-regular,
.btn i.fa-brands {
  font-size: 1em;
  margin-bottom: 0; /* ensure inline alignment */
}
/* === Form input fields: more prominent outlines === */
input[type="text"],
input[type="email"] {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);  /* brighter outline */
  background: transparent;
  color: var(--text);
  min-width: 260px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight when focused */
input[type="text"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: var(--cta); /* CTA red for clarity */
  box-shadow: 0 0 6px rgba(247, 23, 53, 0.5); /* soft glow */
}
/* === Left-align bullet points inside pricing cards === */
.card.plan ul,
.card.plan ul li {
  text-align: left;
  list-style-position: inside;   /* keep bullets inside card padding */
  margin-left: 0;                /* remove extra margin */
  padding-left: 0;               /* prevent double indentation */
}
/* === Fix horizontal overflow & make layout adaptive ===
   Place at end of style.css
*/

/* Defensive: ensure box-sizing inherited and no surprise overflow */
html, body {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden !important; /* hide accidental horizontal overflow */
}

/* Make all elements use box-sizing so padding doesn't cause overflow */
*, *::before, *::after { box-sizing: inherit; }

/* Media scale: never force images / iframes / svgs to overflow container */
img, picture, svg, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent long words / huge strings from stretching layout */
body, .container, .card, .grid {
  word-wrap: break-word;
  word-break: break-word;
}

/* Ensure the main centered container never exceeds viewport (defensive) */
.container {
  width: clamp(320px, 92vw, var(--max-read));
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Make grids less likely to trigger overflow (lower min widths) */
.cards-3,
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
}

/* Make tab panels and other horizontally scrolling regions wrap */
.tabpanels, .tabpanel, .tabs, .gallery-cta {
  max-width: 100%;
  overflow-x: hidden;
}

/* Hero gradient sometimes spills outside viewport because of negative insets.
   Keep its visuals but clip overflow to the hero block. */
.hero {
  overflow: hidden; /* clip hero background so it can't cause page overflow */
}

/* If any elements used 100vw (dangerous with container padding),
   this prevents combined 100vw + padding causing horizontal scroll */
.full-bleed, .vw-100 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Buttons/icons inside inline wrappers: don't cause overflow */
.btn, .nav__links a {
  white-space: nowrap;
}

/* If you still see a small overflow on mobile, add this temporary debug rule:
   body { outline: 2px solid rgba(255,0,0,0.06); }  - remove after debugging.
*/

/* Accessibility: ensure focus outlines remain visible after these fixes */
:focus { outline-offset: 2px; }
/* === Simplify cards: white background, primary font colors, no gradients === */
.card {
  background: #FFFFFF;           /* solid white */
  color: var(--bg);              /* primary brand purple for headings */
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.08); /* subtle border instead of gradient */
  box-shadow: var(--shadow-sm);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 420px;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Headings inside cards use brand purple */
.card h3, .card h4 {
  color: var(--bg); /* #3C096C */
  margin: 0;
}

/* Paragraph/body text inside cards uses muted dark for readability */
.card p {
  color: #333333;  /* darker text for contrast */
  margin: 0;
}

/* Icons inside cards use brand purple */
.card i {
  color: var(--bg);
}

/* Hover effect: subtle lift without gradients */
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
/* === Pricing section button states === */

/* Primary buttons (Pro plan etc.) */
.card.plan .btn--primary {
  background: var(--cta);
  color: var(--text);
  border: 2px solid var(--cta);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card.plan .btn--primary:hover {
  background: transparent;              /* invert on hover */
  color: var(--cta);                    /* red text */
  border: 2px solid var(--cta);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(247,23,53,0.25);
}

/* Ghost buttons (Beta, Team) */
.card.plan .btn--ghost {
  background: transparent;
  color: var(--bg);                      /* purple text for brand consistency */
  border: 2px solid var(--bg);           /* purple outline */
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.card.plan .btn--ghost:hover {
  background: var(--bg);                 /* fill with purple on hover */
  color: #fff;                           /* invert text to white */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60,9,108,0.25);
}
/* === Simple carousel styles === */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.carousel-track img {
  width: 100%;
  flex: 0 0 100%;
  border-radius: 8px;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}

.carousel-controls button {
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}
.carousel-controls button:hover {
  background: rgba(0,0,0,0.7);
}
#how .step__badge {
  background: transparent;
  border: 2px solid var(--cta);   /* CTA red outline */
  color: #222;                    /* dark text */
  font-weight: 700;
}
/* === Step badges above cards (not overlapping) === */
#how .step__badge {
  position: static;           /* remove absolute positioning */
  transform: none;
  margin-bottom: 12px;        /* spacing below badge, above card content */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--cta); /* red outline */
  background: transparent;
  color: #222;                 /* dark text */
  font-weight: 700;
}
/* ---------- Lightbox image preview ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;                 /* shown when active */
  align-items: center;
  justify-content: center;
  z-index: 1200;
  font-family: inherit;
}

/* backdrop */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6); /* dark translucent */
  backdrop-filter: blur(4px);
}

/* panel */
.lightbox__panel {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  margin: 0 20px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1210;
}

/* close button */
.lightbox__close {
  position: absolute;
  right: -6px;
  top: -6px;
  background: #fff;
  color: var(--bg);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: inline-grid;
  place-items: center;
  z-index: 1220;
}

/* figure & image */
.lightbox__figure {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  color: var(--text);
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(88vh - 64px);
  width: auto;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  background: #fff;
}

/* caption */
.lightbox__caption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}

/* show class */
.lightbox.is-open { display: flex; }

/* small screens: reduce close button size and gaps */
@media (max-width:640px) {
  .lightbox__close { width:32px; height:32px; font-size:20px; right: -4px; top: -4px; }
  .lightbox__panel { max-height: 80vh; }
  .lightbox__img { max-height: calc(80vh - 56px); }
}
/* Make carousel images full-width and responsive */
.carousel {
  width: 100%;               /* take full width of parent .card */
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

/* track is a horizontal flex row; will be translated in px */
.carousel-track {
  display: flex;
  transition: transform 0.45s ease-in-out;
  will-change: transform;
}

/* each slide should occupy 100% of the carousel viewport */
.carousel-track > img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;         /* keep aspect nicely filled */
  display: block;
  border-radius: 8px;
}

/* if slides are wrapped in div.slide, also handle that */
.carousel-track > .slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
}

/* === Ensure carousel images respect card padding === */
#gallery .card.img-card.carousel {
  padding: 24px;             /* same as other image cards */
  box-sizing: border-box;
  overflow: hidden;          /* clip track so it doesn't bleed over padding */
  position: relative;
}

#gallery .card.img-card.carousel .carousel-track {
  display: flex;
  transition: transform 0.45s ease-in-out;
  gap: 0;                     /* no extra spacing between slides */
  width: 100%;
}

#gallery .card.img-card.carousel .carousel-track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* === Reset caption text color for consistency === */
#gallery .card.img-card p,
#gallery .card.img-card.carousel p {
  margin-top: 10px;
  margin-bottom: 0;
  color: var(--muted);        /* restore muted text color */
  font-weight: 600;
  text-align: center;
}
/* === Gallery captions: dark text color === */
#gallery .card.img-card p,
#gallery .card.img-card.carousel p {
  margin-top: 10px;
  margin-bottom: 0;
  color: #222;          /* dark text for better contrast */
  font-weight: 600;
  text-align: center;
}
/* === Carousel arrows: plain icons without circle/button === */
#gallery .card.img-card.carousel .carousel-controls button {
  background: none;       /* remove circle background */
  border: none;           /* remove border */
  color: #222;            /* dark arrows for visibility */
  padding: 0;             /* no extra padding */
  font-size: 24px;        /* arrow size */
  cursor: pointer;
  box-shadow: none;       /* remove shadow */
  border-radius: 0;       /* no rounding */
  transition: color 0.2s ease;
}

#gallery .card.img-card.carousel .carousel-controls button:hover {
  color: var(--cta);      /* red on hover for interactivity */
}