/* ============================================================
   Zen Agenda — main stylesheet
   Rebuilt to match live zenagenda.com home page (April 2026)
   Source of truth: Chrome DevTools measurements supplied by client
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Brand colours */
  --c-orange:         #ff7426;   /* primary CTA */
  --c-orange-dark:    #e05c10;
  --c-navy:           #3f4252;   /* default dark / black tone */
  --c-teal:           #4dbfbd;   /* accent — icons, eyebrows, checkmarks */
  --c-purple:         #6254e7;   /* testimonial names, some links */
  --c-purple-dark:    #4a3dc8;
  --c-heading:        #3b3663;   /* hero h1, section h2, card h3 */
  --c-body:           #696687;   /* body text */
  --c-border:         #e8e6f3;
  --c-divider:        #ebebef;
  --c-bg:             #ffffff;
  --c-bg-alt:         #f3f6f8;
  --c-bg-input:       #f1f5f8;
  --c-success:        #25d366;   /* WhatsApp green */

  /* Typography */
  --font-body:        'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-hero:        'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --text-base:        18px;
  --line-base:        27px;

  /* Radii */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 51px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(59,54,99,.07);
  --shadow:      0 8px 24px rgba(59,54,99,.11);
  --shadow-lg:   0 20px 48px rgba(59,54,99,.15);
  --shadow-card: 0 2px 12px rgba(59,54,99,.09);

  /* Layout */
  --container:        1190px;
  --container-narrow: 860px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t:      250ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-base);
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-purple); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-purple-dark); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
ul { padding-left: 1.1rem; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

/* ── Base typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-body);
  color: var(--c-heading);
  margin: 0 0 .6em;
  font-weight: 700;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;                /* never stretch past their container */
}
h2 { font-size: clamp(1.6rem, 3.5vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 15px; font-weight: 600; }

.lead { font-size: 18px; color: var(--c-body); line-height: 1.6; }

/* Eyebrow label */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 14px;
}

/* ── Layout containers ─────────────────────────────────────── */
.container        { max-width: var(--container);        margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 15px 25px 13px 20px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.btn-primary { background: var(--c-orange); color: #fff; }
.btn-primary:hover { background: var(--c-navy); color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-navy { background: var(--c-navy); color: #fff; }
.btn-navy:hover { background: #0d3454; color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-teal-outline {
  background: transparent;
  color: var(--c-teal);
  border: 1.5px solid var(--c-teal);
  padding: 10px 22px 9px;
  font-size: 14px;
}
.btn-teal-outline:hover { background: var(--c-teal); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--c-orange);
  border: 2px solid currentColor;
  padding: 13px 24px 11px;
}
.btn-ghost:hover { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.btn-lg { padding: 16px 30px 14px; font-size: 15px; }
.btn-sm { padding: 10px 18px 9px; font-size: 12px; }

/* ── Site header ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0);   /* transparent over hero wave */
  border-bottom: 1px solid rgba(232,230,243,.4);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Scrolled state (added via JS) — compact bar */
.site-header.scrolled {
  background: rgba(255,255,255,.97);
  border-bottom-color: var(--c-divider);
  box-shadow: 0 2px 10px rgba(10,42,67,.06);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
  /* Only touch top/bottom — the element also has class `.container` which
     provides `padding: 0 24px`. Using the `padding` shorthand here would
     wipe that out and pin the toggle to the viewport edge. */
  padding-top: 8px;
  padding-bottom: 8px;
  transition: min-height var(--t), padding var(--t);
}
.site-header.scrolled .site-header-inner {
  min-height: 58px;
  padding-top: 4px;
  padding-bottom: 4px;
  /* preserve the container's horizontal padding in the scrolled state */
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 56px; width: auto; transition: height var(--t); }
.site-header.scrolled .logo img { height: 38px; }

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-nav > a,
.site-nav .has-sub > a {
  padding: 8px 14px;
  color: var(--c-body);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
}
.site-nav > a:hover,
.site-nav .has-sub > a:hover { color: var(--c-navy); }

.site-nav .has-sub { position: relative; }
/* Submenu sits flush under the parent link (top:100%) so there's no dead
   pixel gap between hover targets. Visual breathing room comes from inner
   padding rather than from a margin/offset. */
.site-nav .sub {
  position: absolute;
  top: 100%;
  left: -12px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.06), var(--shadow);
  border-radius: var(--radius);
  padding: 16px 12px 12px;        /* top padding gives visual space below the link */
  min-width: 640px;               /* wide enough so the longest label fits on one line */
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  z-index: 200;
}
.site-nav .has-sub:hover .sub,
.site-nav .has-sub:focus-within .sub { display: grid; }
.site-nav .sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;                /* 14px keeps the longest RO label ("Frizerie / Barber Shop") on one line */
  font-weight: 400;
  color: var(--c-body);
  line-height: 1.2;
  white-space: nowrap;            /* labels never wrap; all cells stay same height */
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav .sub a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
/* Submenu icons — About Us illustrations for 13 niches + inline SVG for 4.
   All recoloured to a uniform sky-blue via CSS filter, and scale-tweaked
   per-icon so tightly-padded glyphs look the same visual weight as loose ones. */
.site-nav .sub a .sub-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  opacity: 1;
  transition: opacity var(--t);
}
/* Inline SVG: already honours currentColor */
.site-nav .sub a svg.sub-ico {
  color: #4cd6fc;
}
/* Image icons (PNG/SVG from About Us): flatten original color via filter,
   then tint to #4cd6fc so every icon reads at the same bright cyan. The
   PNGs were exported with lots of internal whitespace, so by default we
   scale up to match the visual density of the car SVG. SVG icons that
   were already drawn to fill their viewBox (the car, fitness, dance
   school) get a lighter bump. */
.site-nav .sub a img.sub-ico {
  object-fit: contain;
  object-position: center;
  transform: scale(2.6);
  transform-origin: center;
  filter: brightness(0) saturate(100%) invert(82%) sepia(44%)
          saturate(3456%) hue-rotate(166deg) brightness(106%) contrast(97%);
}
/* Per-icon overrides for assets that need a different scale. */
.site-nav .sub a img.sub-ico[src*="icon-tattoo"] { transform: scale(1.3); }
/* SVG icons that already fill their viewBox — no scaling. */
.site-nav .sub a img.sub-ico[src*="service-auto-simple"],
.site-nav .sub a img.sub-ico[src*="icon-programari-fitness"],
.site-nav .sub a img.sub-ico[src*="icon-programari-dance-school"],
.site-nav .sub a img.sub-ico[src*="icon-programari-psihologi"] {
  transform: none;
}

.site-nav .sub a:hover .sub-ico { opacity: .85; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Mobile-only CTA inside the hamburger menu — hidden on desktop */
.nav-cta-mobile { display: none; }

/* Mobile-only brand logo at the top of the open hamburger menu. Hidden on desktop
   (we already have the .logo on the left of the header bar). */
.nav-mobile-logo { display: none; }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-navy);
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.lang-toggle img { width: 18px; height: 13px; border-radius: 2px; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 150px;
  display: none;
  z-index: 200;
}
.lang-menu.open { display: block; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--c-navy);
  font-size: 14px;
}
.lang-menu a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.lang-menu img { width: 20px; height: 14px; border-radius: 2px; }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--c-bg-alt);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--c-navy);
  position: relative;
  display: block;
  transition: var(--t);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--c-navy);
  left: 0;
  transition: var(--t);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after  { top: 0; transform: rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;                /* 9, 8 × 8px base */
  background:
    url('/assets/images/home13_bg11.png') center center / auto no-repeat,
    linear-gradient(160deg, #f9f8ff 0%, #f4f2fd 50%, #ffffff 100%);
  background-attachment: scroll, scroll;
}
.hero .container { position: relative; z-index: 2; min-height: 620px; }
.hero-inner {
  max-width: 560px;
  position: relative;
  z-index: 3;
}

/* .hero-simple — compact variant used by pages that don't have the
   absolutely-positioned phone mockup (e.g. /<lang>/conceput-pentru).
   Without this override, the 620px min-height meant for the homepage
   leaves a huge blank gap between the headline CTA and the trust bar. */
.hero.hero-simple { padding: 56px 0 24px; }
.hero.hero-simple .container {
  min-height: 0;
  padding-bottom: 0;
}
.hero.hero-simple .hero-inner { margin-bottom: 0; }

/* Fade-in animations for the two phone mockups */
@keyframes zaFadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zaFadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Phones live INSIDE the hero container so they sit next to the text, not far-right.
   Anchored from the left at 50% of container width (right half of content area).
   Phone 1 is on TOP (higher z-index) and phones are closer together. */
.hero-phones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero-phone {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 30px 40px rgba(10,42,67,.18));
  will-change: transform, opacity;
}
/* Phone 1 — client profile screen, ON TOP, sits right of the text column */
.hero-phone-1 {
  width: 400px;
  left: 50%;
  top: 10px;
  z-index: 2;
  animation: zaFadeInUp 1s ease-out .25s forwards;
}
/* Phone 2 — wider config screen, BEHIND phone 1, tighter horizontal offset */
.hero-phone-2 {
  width: 560px;
  left: calc(50% + 110px);
  top: 70px;
  z-index: 1;
  animation: zaFadeInRight 1.2s ease-out .5s forwards;
}
@media (max-width: 1200px) {
  .hero-phone-1 { width: 320px; left: 52%; }
  .hero-phone-2 { width: 440px; left: calc(52% + 90px); top: 100px; }
}
@media (max-width: 960px) {
  .hero-phones { display: none; }
}

/* Hero H1 — Inter 800 65px per live DevTools */
.hero h1 {
  font-family: var(--font-hero);
  font-size: 65px;
  font-weight: 800;
  line-height: 71.5px;
  color: var(--c-heading);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.scribble-underline {
  position: relative;
  display: inline-block;
  /* Default: allow wrapping so long CTA phrases don't overflow the container.
     Short phrases (hero "efficient", testimonials "clients say") are already single words
     so they will never wrap. */
  white-space: normal;
  max-width: 100%;
}
.scribble-underline .scribble-text {
  position: relative;
  z-index: 1;
}
.scribble-underline .scribble-svg {
  position: absolute;
  left: 50%;
  bottom: -0.08em;
  width: 112%;
  height: 0.56em;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.scribble-underline-line {
  padding-bottom: 0.08em;
}
.scribble-underline-line .scribble-svg {
  bottom: 0.01em;
  width: 102%;
  height: 0.38em;
}
.scribble-underline-line .scribble-svg path {
  stroke: #15DFADA3;
  stroke-width: 9;
  vector-effect: non-scaling-stroke;
}
.scribble-underline-zigzag {
  padding-bottom: 0.16em;
}
.scribble-underline-zigzag .scribble-svg {
  bottom: -0.12em;
  width: 112%;
  height: 0.62em;
}
.scribble-underline-hero {
  padding-bottom: 0.02em;
}
.scribble-underline-hero .scribble-svg path {
  stroke-width: 9;
}
.scribble-underline-hero .scribble-svg {
  bottom: 0.01em;
  height: 0.36em;
}
.scribble-underline-section {
  padding-bottom: 0.08em;
}
.scribble-underline-section .scribble-svg {
  bottom: -0.04em;
}
/* CTA scribble — tight under the text, matching the hero "efficient" treatment.
   NOTE: do NOT override `left` here — the base `.scribble-underline .scribble-svg`
   already uses `left: 50%; transform: translateX(-50%)` to centre the SVG.
   Overriding only `left` without updating the transform pushes the SVG off-centre. */
.scribble-underline-cta {
  padding-bottom: 0.04em;
}
.scribble-underline-cta .scribble-svg {
  bottom: 0.02em;
  height: 0.36em;
  width: 112%;
}
.scribble-underline-cta .scribble-svg path {
  stroke-width: 9;
}
.hero .lead {
  font-size: 18px;
  color: var(--c-body);
  line-height: 27px;
  margin-bottom: 32px;
}

/* ── Hero email form ──────────────────────────────────────── */
.hero-email-form {
  position: relative;
  width: 500px;
  max-width: 100%;
  margin-bottom: 36px;
}
.hero-email-form input[type="email"] {
  width: 100%;
  height: 56px;
  background: #fff;                               /* solid white for contrast over wave */
  border: 1px solid #d6dae3;
  border-radius: 28px;
  padding: 0 180px 0 26px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-navy);
  outline: none;
  box-shadow:
    0 1px 2px rgba(10, 42, 67, .04),
    0 10px 30px -12px rgba(10, 42, 67, .12);
  transition: box-shadow var(--t), border-color var(--t);
}
.hero-email-form input[type="email"]::placeholder { color: #8a8fa3; }
.hero-email-form input[type="email"]:hover { border-color: #b9bfcb; }
.hero-email-form input[type="email"]:focus {
  border-color: var(--c-teal);
  box-shadow:
    0 0 0 3px rgba(77,191,189,.22),
    0 10px 30px -12px rgba(10, 42, 67, .12);
}
.hero-email-form button[type="submit"] {
  position: absolute;
  /* Match the input pill: input_radius - inset = inner button radius.
     Input radius is 28px, inset 4px → inner radius 24px (visually concentric). */
  right: 4px;
  top: 4px;
  bottom: 4px;             /* fill the input vertically, height auto */
  background: var(--c-navy);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
}
.hero-email-form button[type="submit"]:hover {
  background: #0d3454;
  transform: none;
}

/* ── App badge grid (hero + download section) ─────────────── */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 220px);
  gap: 12px;
}
.badge-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  padding: 10px 18px;
  min-height: 74px;
  transition: box-shadow var(--t), transform var(--t);
}
.badge-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.badge-card img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* ── Sections ─────────────────────────────────────────────── */
.section { padding: 72px 0; }                        /* 9 × 8px base */
.section-alt { background: var(--c-bg-alt); }
.section-dark {
  background: var(--c-navy);
  color: rgba(255,255,255,.8);
}
.section-dark h1,
.section-dark h2,
.section-dark h3 { color: #fff; }

/* Section two-col layout (About us / How we help) */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Grid items must shrink below their content's min-width, otherwise long
   unbreakable strings (e.g. "yourname.zenagenda.com") force the column
   wider than the viewport on mobile. */
.section-split > * { min-width: 0; }
/* `break-word` (not `anywhere`) lets the URL wrap onto its own line when
   the container is narrow, WITHOUT breaking mid-string into chunks like
   "you / rna / me". The URL stays intact. */
.section-split .check-list li { overflow-wrap: break-word; }
.section-split-content h2 {
  color: var(--c-heading);
  margin-bottom: 16px;
}
.section-split-content p {
  color: var(--c-body);
  font-size: 17px;
  line-height: 1.65;
}

/* Teal checklist */
.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.check-list li {
  /* IMPORTANT: block flow, NEVER flex. When a list item contains mixed
     inline content (text nodes + <span class="highlight">), flex would
     treat each adjacent sibling as a separate flex item and lay them
     out as narrow columns — which splits "yourname.zenagenda.com"
     vertically (yourna / me .zenagenda. / com). `display: block` is
     declared explicitly + !important so no later rule or third-party
     stylesheet can regress this. */
  display: block !important;
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--c-body);
  font-size: 16px;
  line-height: 1.55;
}
/* Wrap the "yourname.zenagenda.com" URL fragment so the dot-separated
   domain never splits across lines or flex-columns. The inner .highlight
   still colours just the "yourname" half. */
.check-list li .domain-url {
  white-space: nowrap;
}
.check-list li::before {
  content: '✓';
  color: var(--c-teal);
  font-weight: 700;
  font-size: 15px;
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: rgba(77,191,189,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Niche grid ───────────────────────────────────────────── */
/* 3×3 grid on the right side of the about-us split.
   Wrapper has a soft decorative background graphic behind the tiles. */
.niches-wrap {
  position: relative;
  padding: 22px 8px;
  /* Decorative soft-glow backdrop behind the skewed tiles (matches live) */
  background: url('/assets/images/home13_boxes_bg.png') center / 110% no-repeat;
}
.niches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Each tile is skewed on the Y axis; content is counter-skewed to stay upright.
   (Matrix matches live: outer skewY(-4deg), inner skewY(4deg)) */
.niche-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 8px 18px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 21px 21px 59px 0 rgba(28, 137, 212, 0.10);
  text-decoration: none;
  color: inherit;
  transform: skewY(-4deg);
  transition: transform var(--t), box-shadow var(--t);
}
.niche-card:hover {
  transform: skewY(-4deg) translateY(-4px);
  box-shadow: 21px 21px 59px 0 rgba(28, 137, 212, 0.20);
  color: inherit;
}
/* Counter-skew the inner content so icons/labels render upright */
.niche-card > * { transform: skewY(4deg); }
.niche-card img {
  width: 110px;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  margin-bottom: 10px;
}
.niche-card img[src*="service-auto-simple"] {
  width: 66px;
  max-height: 45px;
}
.niche-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-heading);
  line-height: 1.25;
}

/* Other business link (below niche grid).
   Visually centered between the last niche and the section's bottom boundary
   (where the bg color changes to the next section's alt-bg). Both gaps ≈ 60:
     above: margin-top (60)
     below: .niches-wrap padding-bottom (22) + #about padding-bottom (38) = 60 */
.niche-more {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
#about { padding-bottom: 38px; }
.niche-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-teal);
  border: 1.5px solid var(--c-teal);
  border-radius: var(--radius-pill);
  padding: 8px 18px 7px;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--t), color var(--t);
}
.niche-more a:hover { background: var(--c-teal); color: #fff; }

/* ── How-we-help checklist side ──────────────────────────── */
.help-checklist-col {
  padding-top: 14px;
}
.help-checklist-col .check-list li {
  font-size: 17px;
  line-height: 1.6;
}
.help-checklist-col .highlight {
  font-weight: 700;
  color: var(--c-teal);
}

/* ── How We Help section — iphone/laptop silhouette bg ────── */
#how-we-help {
  background:
    url('/assets/images/home13_iphone_bg.png') center / contain no-repeat,
    var(--c-bg-alt);
}

/* ── Testimonials section ────────────────────────────────── */
.testimonials-section {
  position: relative;
  overflow: hidden;
  background:
    url('/assets/images/backgroun_home_testimonials.png') center / cover no-repeat;
}
/* Decorative absolute overlay (kept for any extra layering) */
.testimonials-section-bg { display: none; }
.testimonials-section-inner {
  display: grid;
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
  gap: 32px;                                          /* 4 × 8px base */
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Grid items must be allowed to shrink below their content's min-width,
   otherwise large images/carousels blow the column out. */
.testimonials-section-inner > * { min-width: 0; }
.testimonials-phone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.testimonials-phone img {
  width: 100%;
  max-width: 500px;
  /* Image is a phone mockup — no card shadow, no rounded-rectangle frame */
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transform: translateY(6px);
}
.testimonials-content h2 {
  font-style: normal;
  font-size: clamp(1.8rem, 3.2vw, 38px);
  font-weight: 700;
  color: var(--c-heading);
  line-height: 1.2;
  margin-bottom: 58px;           /* reserve room for the photo that overlaps the card top */
}
.testimonial-cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Card layout (matches live): semitransparent white card, photo overlaps the top,
   decorative quote icon in the corner, name + role stacked and centered */
.testimonial-card {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  padding: 72px 36px 32px;       /* top padding reserves space for overlapped photo */
  margin-top: 58px;              /* balanced against heading and phone height */
  margin-bottom: 20px;           /* buffer below the card before the dots */
  position: relative;
  text-align: center;
  box-shadow: 0 20px 50px -20px rgba(28, 137, 212, .18);
}
.testimonial-photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid #fff;
  box-shadow: 0 10px 30px -6px rgba(10, 42, 67, .20);
}
/* Decorative quote icon in the card's top-right corner */
.testimonial-card::after {
  content: '\201D';              /* right double quotation mark */
  position: absolute;
  top: 8px;
  right: 22px;
  font: 700 64px/1 Georgia, 'Times New Roman', serif;
  color: var(--c-teal);
  opacity: .35;
  pointer-events: none;
}
.testimonial-card p {
  font-style: italic;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 18px;
  font-family: var(--font-body);
}
.testimonial-card .testimonial-name {
  color: var(--c-heading);       /* dark navy to match the rest of the site */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.testimonial-card .testimonial-role {
  color: var(--c-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}
.testimonial-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-purple);
}
.testimonial-role {
  font-size: 13px;
  color: var(--c-body);
  margin-top: 2px;
}

/* ── Create account CTA section ──────────────────────────── */
/* Soft radial-blob mesh: pink-top, lavender-center, blue-bottom,
   fading to white at the edges. Same recipe as /download/. */
.cta-create {
  text-align: center;
  padding: 72px 0;                /* matches .section */
  background:
    radial-gradient(ellipse 70% 45% at 55% 28%, rgba(255, 195, 220, 0.55), transparent 65%),
    radial-gradient(ellipse 55% 45% at 50% 52%, rgba(196, 180, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 70% 55% at 45% 78%, rgba(180, 215, 255, 0.55), transparent 70%),
    #ffffff;
  position: relative;
}
.cta-create h2 {
  font-size: clamp(1.8rem, 4vw, 42px);
  font-weight: 800;
  color: var(--c-heading);
  margin-bottom: 16px;
  display: inline-block;
  position: relative;
}
/* Animated hand-drawn scribble underline (Elementor "animated headline" style).
   SVG path is drawn with a stroke-dashoffset animation that starts when the
   parent section enters the viewport (via .is-visible class applied from JS). */
@keyframes zaScribbleDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.scribble-svg path {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Path is normalized to pathLength=100 so dash math is predictable */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;          /* invisible until we enter viewport */
}
.scribble-reveal.is-visible .scribble-svg path {
  animation: zaScribbleDraw 1.6s cubic-bezier(.55, .2, .2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .scribble-svg path { stroke-dashoffset: 0; }
  .scribble-reveal.is-visible .scribble-svg path { animation: none; }
}
.cta-create .cta-subtitle {
  font-style: italic;
  font-size: 18px;
  color: var(--c-body);
  margin-bottom: 10px;
}
.cta-create .cta-note {
  font-size: 15px;
  color: var(--c-body);
  margin-bottom: 24px;                              /* 3 × 8px base */
}

/* ── Download section ────────────────────────────────────── */
.download-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.download-content h2 {
  font-size: clamp(1.6rem, 3.5vw, 36px);
  color: var(--c-heading);
  margin-bottom: 8px;
}
.download-content .subtitle {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-teal);
  margin-bottom: 14px;
}
.download-content p {
  font-size: 16px;
  color: var(--c-body);
  margin-bottom: 28px;
}
.download-phones {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: center;
}
/* Generic phone frame around the download-section carousel
   — desaturated neutral grey. Aspect matches the 246×536 screenshots. */
.phone-frame {
  --pf-pad: 12px;
  --pf-radius-outer: 44px;
  /* inner radius = outer - padding so the two arcs are concentric */
  --pf-radius-inner: calc(var(--pf-radius-outer) - var(--pf-pad));
  --pf-body: #c8cdd4;                     /* light silver-grey (matches live) */
  --pf-bezel: #b7bdc4;
  position: relative;
  width: 264px;
  aspect-ratio: 246 / 536;
  background: var(--pf-body);
  border-radius: var(--pf-radius-outer);
  padding: var(--pf-pad);
  box-shadow:
    0 24px 50px -14px rgba(60, 64, 70, .22),
    inset 0 0 0 1px var(--pf-bezel);
  cursor: grab;
}
.phone-frame.is-dragging { cursor: grabbing; }
.phone-frame::before {
  content: '';
  position: absolute;
  inset: calc(var(--pf-pad) / 2);
  border-radius: calc(var(--pf-radius-outer) - var(--pf-pad) / 2);
  border: 1px solid rgba(0, 0, 0, .04);
  pointer-events: none;
}
/* Notch flush with the top edge of the phone, same color as body (no seam) */
.phone-frame-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 94px; height: 18px;
  background: var(--pf-body);
  border-radius: 0 0 12px 12px;
  z-index: 2;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}
.phone-frame-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--pf-radius-inner);   /* concentric with outer frame */
  overflow: hidden;
  background: #fff;
}
.phone-carousel,
.phone-carousel .carousel-viewport,
.phone-carousel .carousel-track {
  width: 100%;
  height: 100%;
}
/* The phone carousel cycles through screen mockups that fill the phone frame
   edge-to-edge; a gap between slides would show an ugly white sliver during
   the transition. Keep it flush. */
.phone-carousel .carousel-track { gap: 0; }
.phone-carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.phone-carousel .carousel-dots-inside {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
}
.phone-carousel .carousel-dots-inside button {
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.phone-carousel .carousel-dots-inside button.is-active { background: #fff; }

/* ── Carousel (shared component) ──────────────────────────── */
.carousel {
  position: relative;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: inherit;
}
.carousel-track {
  display: flex;
  gap: 20px;                /* breathing room between slides; JS math below accounts for it */
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-heading);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(10, 42, 67, .12);
  z-index: 3;
  transition: background var(--t), transform var(--t);
}
.carousel-arrow:hover { background: var(--c-teal); color: #fff; transform: translateY(-50%) scale(1.05); }
.carousel-prev { left: -18px; }
.carousel-next { right: -18px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carousel-dots button {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  background: rgba(77, 191, 189, .3);
  transition: background var(--t), transform var(--t);
  cursor: pointer;
}
.carousel-dots button.is-active { background: var(--c-teal); transform: scale(1.25); }

/* Testimonial carousel — minimal, photo-on-top layout */
.testimonial-carousel {
  max-width: 540px;
  margin-left: 0;
  padding: 0 28px;
  cursor: grab;
}
.testimonial-carousel.is-dragging,
.testimonial-carousel.is-dragging .carousel-track { cursor: grabbing; }
.testimonial-carousel .carousel-viewport { padding: 10px 4px 14px; }
/* Slide padding only for non-card slides; cards bring their own padding (70/34/30)
   — the <article> has BOTH .testimonial-card and .carousel-slide classes */
.testimonial-carousel .carousel-slide:not(.testimonial-card) { padding: 4px; }
.testimonial-carousel .testimonial-card.carousel-slide {
  width: 100%;
  display: block;
  padding: 70px 34px 30px;        /* re-affirm so .carousel-slide can't override */
}
.testimonial-carousel .carousel-arrow { top: 40%; }
.testimonial-carousel .carousel-prev { left: -10px; }
.testimonial-carousel .carousel-next { right: -10px; }
.testimonial-carousel .carousel-dots { margin-top: 24px; }

@media (max-width: 560px) {
  .phone-frame { width: 240px; border-radius: 36px; padding: 10px; }
  .phone-frame-screen { border-radius: 28px; }
  .carousel-prev { left: 4px; }
  .carousel-next { right: 4px; }
}

/* ── Footer ───────────────────────────────────────────────── */
/* Light footer (white bg) */
.site-footer {
  background: #fff;
  color: var(--c-body);
  border-top: 1px solid var(--c-divider);
  padding: 60px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 44px;
}
.footer-col h4 {
  color: var(--c-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--c-body);
  font-size: 15px;
  font-weight: 400;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--c-navy); }

.footer-brand img.footer-logo {
  height: 56px;
  width: auto;
  margin-bottom: 16px;
}
.footer-payments {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.footer-payments img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Contact column — icon + text */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--c-body);
}
.footer-contact-item a {
  color: var(--c-body);
  transition: color var(--t-fast);
}
.footer-contact-item a:hover { color: var(--c-navy); }
.footer-contact-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--c-teal);
}

.footer-bottom {
  border-top: 1px solid var(--c-divider);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  color: #9490b3;
  font-size: 14px;
  line-height: 1.6;
}

/* ── WhatsApp float ───────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,.45);
  z-index: 90;
  transition: transform var(--t), box-shadow var(--t);
}
.wa-float:hover {
  transform: scale(1.06);
  color: #fff;
  box-shadow: 0 10px 32px rgba(37,211,102,.55);
}
/* Sharp, crisp WhatsApp glyph. Sized to the box so the SVG renders 1:1. */
.wa-float svg {
  width: 34px;
  height: 34px;
  display: block;
  shape-rendering: geometricPrecision;
}

/* ── Translation pending banner ─────────────────────────── */
.translation-pending {
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #7a4a00;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
}
.translation-pending strong { color: #a64e00; }

/* ── Contact form ─────────────────────────────────────────── */
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--c-border);
  padding: 36px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy);
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--c-navy);
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(77,191,189,.14);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-status { margin-top: 12px; font-size: 14px; }
.form-status.ok  { color: #059669; }
.form-status.err { color: #dc2626; }

.support-page {
  background:
    radial-gradient(circle at top right, rgba(77, 191, 189, .13), transparent 28%),
    radial-gradient(circle at top left, rgba(98, 84, 231, .08), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
}
.support-main { padding: 48px 0 88px; }           /* normalized to 8px scale */
.support-shell { padding: 0; }
.support-hero {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}
.support-hero h1 {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-heading);
}
.support-hero p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-body);
}
.support-direct-card,
.support-form-panel {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(232, 230, 243, .96);
  border-radius: 26px;
  box-shadow: 0 18px 50px -38px rgba(53, 74, 109, .45);
}
.support-direct-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin: 0 auto 24px;
  padding: 22px 24px;
}
.support-direct-card[hidden],
.support-form-panel[hidden] { display: none; }
.support-direct-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(77, 191, 189, .18);
  background: linear-gradient(135deg, rgba(77, 191, 189, .18) 0%, rgba(98, 84, 231, .09) 100%);
  color: var(--c-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.support-direct-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
.support-direct-copy h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-heading);
}
.support-direct-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-body);
}
.support-whatsapp-btn {
  min-width: 168px;
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #24cd63 0%, #1bb151 100%);
  box-shadow: 0 14px 28px -18px rgba(31, 185, 84, .75);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.support-whatsapp-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #22c15d 0%, #179a46 100%);
}
.support-whatsapp-btn svg {
  width: 20px;
  height: 20px;
}
/* Combined WhatsApp button — "Open WhatsApp" + hours status in one pill.
   Used only in the after-submit two-column block so the hit-target stays
   a single clickable item with the live schedule rendered inside. */
.support-whatsapp-btn-combined {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  line-height: 1.2;
}
.support-whatsapp-btn-combined .support-wa-main {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
}
/* Two-row layout:  [● status]   (row 1, centered)
                     [ hours  ]   (row 2, spans both columns)
   `.support-hours-text` uses `display: contents` so its children
   (status + window) become direct grid items of `.support-hours`. */
.support-whatsapp-btn-combined .support-hours,
.support-whatsapp-btn-combined .support-hours.is-open,
.support-whatsapp-btn-combined .support-hours.is-closed {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,.92);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
.support-whatsapp-btn-combined .support-hours-text { display: contents; }
.support-whatsapp-btn-combined .support-hours-dot,
.support-whatsapp-btn-combined .support-hours-dot.is-open,
.support-whatsapp-btn-combined .support-hours-dot.is-closed {
  width: 7px; height: 7px; margin: 0; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.4);
  box-shadow: none;
  animation: none;
  /* grid row 1, col 1 (auto-placed) */
}
.support-whatsapp-btn-combined .support-hours-dot.is-open {
  background: #b6f5cf; box-shadow: 0 0 0 2px rgba(182,245,207,.25);
}
.support-whatsapp-btn-combined .support-hours-status {
  font-weight: 600; color: #fff;
  /* grid row 1, col 2 (auto-placed next to dot) */
}
.support-whatsapp-btn-combined .support-hours-window {
  opacity: .85; color: rgba(255,255,255,.9);
  grid-column: 1 / -1;      /* span the full row */
  text-align: center;
}
.support-whatsapp-btn-combined .support-hours-auto { display: none; }  /* redundant inside the button */

/* "Open AI assistant" button — same pill shape as WhatsApp but brand teal.
   Used both for the pre-submit invitation card and the post-submit "or ask
   the AI" card. Opens the chat widget via data-open-ai-chat (see inline JS). */
.support-ai-btn {
  min-width: 168px;
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #5fd0ce 0%, var(--c-teal) 100%);
  box-shadow: 0 14px 28px -18px rgba(77, 191, 189, .75);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.support-ai-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #4dc7c5 0%, #3baba8 100%);
}
.support-ai-btn svg {
  width: 20px;
  height: 20px;
}

/* After-submit container — appears once the contact form is delivered.
   Two columns on desktop ("Is this urgent?" + "Or ask the AI assistant"),
   one column on mobile. */
.support-after-submit {
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Sticky .site-header is ~80px; leave headroom so scrollIntoView()
     doesn't tuck "Mulțumim!" under it. */
  scroll-margin-top: 96px;
}
.support-after-submit[hidden] { display: none; }
.support-after-header {
  text-align: center;
  padding: 10px 0 6px;
}
.support-after-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--c-heading);
}
.support-after-header p {
  margin: 0;
  color: var(--c-body);
}
.support-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
/* Each card in the after-submit grid: vertical layout (icon → copy → btn),
   since half-width isn't enough for the 3-column layout we use at full width. */
.support-after-grid .support-direct-card {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  margin: 0;
}
@media (max-width: 700px) {
  .support-after-grid { grid-template-columns: 1fr; }
}

.support-form-panel { padding: 24px; }
.support-form-panel fieldset {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.support-form-panel legend,
.support-form-panel .field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 12px;
}
.support-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.support-type {
  position: relative;
  display: block;
}
.support-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.support-type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(232, 230, 243, .96);
  background: #fff;
  color: var(--c-body);
  font-size: 15px;
  font-weight: 400;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.support-type-card:hover {
  border-color: rgba(77, 191, 189, .35);
  transform: translateY(-1px);
}
.support-type input:checked + .support-type-card {
  border-color: rgba(255, 116, 38, .5);
  box-shadow: 0 0 0 4px rgba(255, 116, 38, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 247, 242, .92) 100%);
}
.support-type input:focus-visible + .support-type-card {
  border-color: rgba(77, 191, 189, .75);
  box-shadow: 0 0 0 4px rgba(77, 191, 189, .14);
}
.support-type-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.support-type-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}
.support-type-feedback .support-type-icon {
  background: rgba(255, 116, 38, .10);
  color: var(--c-orange-dark);
}
.support-type-feature .support-type-icon {
  background: rgba(77, 191, 189, .12);
  color: var(--c-teal);
}
.support-type-bug .support-type-icon {
  background: rgba(98, 84, 231, .10);
  color: var(--c-purple);
}
.support-type-help .support-type-icon {
  background: rgba(10, 42, 67, .08);
  color: var(--c-navy);
}
.support-type-other .support-type-icon {
  background: rgba(105, 102, 135, .10);
  color: var(--c-body);
}
.support-type-pricing .support-type-icon {
  background: rgba(255, 116, 38, .12);
  color: var(--c-orange);
}
.field-optional {
  font-weight: 400;
  font-size: 13px;
  color: var(--c-body);
  margin-left: 4px;
  font-style: italic;
}
.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.support-form-panel .field { margin-bottom: 18px; }
.support-form-panel .field input,
.support-form-panel .field textarea {
  border-color: rgba(232, 230, 243, .96);
  border-radius: 15px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
.support-form-panel .field input::placeholder,
.support-form-panel .field textarea::placeholder {
  color: #96a0b5;
}
.support-form-panel .field textarea {
  min-height: 150px;
  resize: vertical;
}
.support-submit {
  display: flex;
  justify-content: center;
  width: min(100%, 210px);
  margin-top: 8px;
  padding: 15px 22px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--c-orange) 0%, #ef6117 100%);
  box-shadow: 0 14px 24px -18px rgba(255, 116, 38, .72);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.support-submit:hover {
  color: #fff;
  background: linear-gradient(180deg, #f06a22 0%, var(--c-orange-dark) 100%);
}
.support-submit svg {
  width: 16px;
  height: 16px;
}
.support-form .form-status {
  margin-top: 14px;
  font-size: 14px;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ── Prose (legal pages) ──────────────────────────────────── */
.prose { max-width: 780px; margin: 0 auto; }
.prose h1 { margin-top: 0; }
.prose h2 { margin-top: 2rem; }
.prose p, .prose li { color: var(--c-body); }

/* ── Responsive — tablet (≤1200px) ───────────────────────── */
@media (max-width: 1200px) {
  .hero h1 { font-size: 52px; line-height: 58px; }
  .section-split { gap: 40px; }
  .testimonials-section-inner { grid-template-columns: 320px 1fr; gap: 28px; }
  .download-split { gap: 40px; }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
  .support-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Responsive — tablet (≤960px) ────────────────────────── */
@media (max-width: 960px) {
  .hero { padding: 56px 0 48px; background-image: none; background: linear-gradient(160deg, #f9f8ff 0%, #f4f2fd 50%, #ffffff 100%); }
  .hero-inner { max-width: 100%; }
  .hero h1 { font-size: clamp(2.2rem, 7vw, 44px); line-height: 1.1; }
  .hero-email-form { width: 100%; }
  .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Tablet: shrink the pill a bit AND bump the logo so it doesn't look
     lost inside a huge empty pill (was img 28px inside 74px pill → 38%,
     now 42/64 ≈ 66%, which reads as a real store button). */
  .badge-card { min-height: 64px; padding: 8px 14px; }
  .badge-card img { height: 42px; }

  .section-split { grid-template-columns: 1fr; gap: 40px; }
  .niches-grid { grid-template-columns: repeat(3, 1fr); }

  .testimonials-section-inner { grid-template-columns: 1fr; }
  .testimonials-phone { display: none; }
  /* Center the carousel and give the card breathing room from the viewport
     edges once the phone column is gone. */
  .testimonial-carousel { margin: 0 auto; padding: 0 32px; }

  .download-split { grid-template-columns: 1fr; }
  .download-phones { justify-content: flex-start; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .support-main { padding: 40px 0 72px; }           /* normalized to 8px scale */
  .support-hero { margin-bottom: 24px; }
  .support-direct-card { grid-template-columns: 1fr; justify-items: start; }
  .support-whatsapp-btn { width: 100%; }
  .support-form-grid { grid-template-columns: 1fr; }

  /* Mobile nav */
  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;             /* account for mobile browser UI chrome */
    width: 100%;
    background: #fff;
    padding: 0;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 101;               /* above the sticky header */
  }
  /* Mobile-menu header bar: brand logo sits where the close button lives,
     also gives the top of the panel some breathing room. Padding matches
     the main header's `.container` (24px default, 32px at ≤600px) so the
     logo doesn't shift horizontally when the menu opens. The `.site-nav`
     prefix beats the generic `.site-nav > a { padding: 8px 14px }` rule. */
  .site-nav .nav-mobile-logo {
    display: flex;
    align-items: center;
    height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--c-divider);
    flex-shrink: 0;
    background: #fff;
    text-decoration: none;
  }
  .nav-mobile-logo img {
    height: 36px;
    width: auto;
    display: block;
  }
  /* Safe area at the bottom so sticky CTA doesn't sit on home indicator */
  .site-nav.open::after {
    content: '';
    display: block;
    height: calc(24px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
  .site-nav.open > a:not(.nav-mobile-logo),
  .site-nav.open .has-sub > a {
    padding: 12px 22px;
    border-bottom: 1px solid var(--c-divider);
    display: block;
    font-size: 14.5px;
  }
  .site-nav .sub {
    position: static;
    display: block;
    grid-template-columns: 1fr;
    min-width: 0;
    box-shadow: none;
    padding: 2px 0 4px;
    background: #fff;   /* match the desktop submenu bg so icon tint reads the same */
  }
  .site-nav .sub a {
    padding: 9px 22px 9px 28px;
    font-size: 13.5px;
    gap: 10px;
  }
  /* Smaller submenu icons on mobile so the row height stays compact */
  .site-nav .sub a .sub-ico {
    width: 22px;
    height: 22px;
  }
  .site-nav .sub a img.sub-ico {
    transform: scale(2.4);  /* still bumped up for the padded PNGs */
  }
  .site-nav .sub a img.sub-ico[src*="icon-tattoo"] { transform: scale(1.2); }
  .site-nav .sub a img.sub-ico[src*="service-auto-simple"],
  .site-nav .sub a img.sub-ico[src*="icon-programari-fitness"],
  .site-nav .sub a img.sub-ico[src*="icon-programari-dance-school"] { transform: none; }
  .site-nav .has-sub .sub { display: block; }
  /* Keep display:block on tap/focus too — the desktop rule at line 225
     flips .sub to display:grid on :hover, which on a touch screen fires
     the moment the user taps a sub-item, subtly re-flowing the list and
     pushing neighbors around. Force block here to kill the shift. */
  .site-nav .has-sub:hover .sub,
  .site-nav .has-sub:focus-within .sub { display: block; }
  .nav-toggle { display: inline-flex; z-index: 102; position: relative; }
  /* Mobile-only CTA inside the hamburger menu — clean, inside the flow.
     Escalated specificity to win over `.site-nav > a { color: muted }`. */
  .site-nav.open a.nav-cta-mobile {
    display: flex;
    margin: 18px 22px 10px;
    padding: 15px 24px;
    justify-content: center;
    border-bottom: 0;
    font-size: 13px;
    color: #fff;
    background: var(--c-orange);
  }
  .site-nav.open a.nav-cta-mobile:hover {
    color: #fff;
    background: var(--c-navy);
  }
  /* Lock page scroll when menu is open */
  body.menu-open { overflow: hidden; }

  .site-header-inner { min-height: 68px; padding-top: 6px; padding-bottom: 6px; }
  .logo img { height: 42px; }
  .site-header.scrolled .site-header-inner { min-height: 54px; }
  .site-header.scrolled .logo img { height: 34px; }
  /* On tablet the CTA button stays, but compacts */
  .header-actions .btn-primary { padding: 10px 14px; font-size: 11px; }
  .header-actions .btn-primary svg { width: 12px; height: 12px; }
  .header-actions { gap: 8px; }
}

/* ── Responsive — small mobile (≤600px) ──────────────────── */
@media (max-width: 600px) {
  .section { padding: 48px 0; }                       /* 6 × 8px base */
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 38px); line-height: 1.1; }
  .hero-email-form input[type="email"] { padding-right: 130px; font-size: 14px; border-radius: 24px; }
  .hero-email-form button[type="submit"] { font-size: 11px; padding: 0 16px; border-radius: 20px; right: 4px; top: 4px; bottom: 4px; height: auto; }

  /* Hide the header CTA on phones (still available inside the hamburger menu) */
  .header-actions .btn-primary { display: none; }
  .lang-toggle { padding: 6px 8px; font-size: 12px; }
  .logo img { height: 36px; }
  .site-header-inner { min-height: 60px; }
  .site-header.scrolled .logo img { height: 30px; }
  /* Tighter side padding on phones — pushes the hamburger close to the
     right edge (user ask) and pulls the logo close to the left edge.
     Keep the same value on .nav-mobile-logo so the open-menu logo lands
     in exactly the same visual spot as the closed-header logo. */
  .site-header .container { padding: 0 16px; }
  .site-nav .nav-mobile-logo { padding: 0 16px; height: 60px; }

  .niches-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .niche-card { padding: 18px 10px 14px; }
  .niche-card img { width: 80px; max-height: 56px; }
  .niche-card img[src*="service-auto-simple"] { width: 66px; max-height: 45px; }
  .niche-card h3 { font-size: 14px; }

  .testimonial-carousel { max-width: 100%; padding: 0 24px; }
  .testimonial-carousel .testimonial-card { padding: 64px 22px 24px; }
  .testimonial-card::after { font-size: 46px; top: 4px; right: 14px; }
  .testimonial-photo { width: 88px; height: 88px; top: -44px; }

  .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .badge-card { min-height: 62px; padding: 8px 12px; }
  .badge-card img { height: 38px; }

  .download-phones { justify-content: center; }
  .phone-frame { width: 220px; --pf-radius-outer: 38px; --pf-pad: 10px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-create { padding: 48px 0; }                    /* matches .section scale */
  .btn { padding: 12px 20px 10px; font-size: 13px; }
  .btn-lg { padding: 14px 22px 12px; font-size: 14px; }
  .support-main { padding: 32px 0 56px; }           /* normalized to 8px scale */
  .support-hero h1 { font-size: clamp(2rem, 11vw, 40px); }
  .support-hero p { font-size: 17px; }
  .support-direct-card,
  .support-form-panel { border-radius: 22px; }
  .support-direct-card { gap: 14px; }
  .support-direct-icon { display: none; }
  .support-direct-card { padding: 18px; }
  .support-form-panel { padding: 18px; }
  .support-form-panel .field { margin-bottom: 16px; }
  .support-form-panel .field input,
  .support-form-panel .field textarea {
    padding: 11px 14px;
    border-radius: 13px;
    font-size: 15px;
  }
  .support-form-panel .field textarea { min-height: 132px; }
  .support-type-grid { grid-template-columns: 1fr; }
  .support-submit { font-size: 14px; }
}

/* ── Utilities ────────────────────────────────────────────── */
.text-teal    { color: var(--c-teal); }
.text-purple  { color: var(--c-purple); }
.text-navy    { color: var(--c-navy); }
.text-orange  { color: var(--c-orange); }
.text-muted   { color: var(--c-body); }
.text-center  { text-align: center; }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ============================================================
   Niche-page additions (trust bar, how-it-works steps, FAQ mini,
   sticky mobile CTA, legal pages, solutions grid)
   ============================================================ */

/* Trust bar — slim strip of 4 signals below the hero */
.trust-bar {
  background: #f3f6f8;
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
  padding: 14px 0;
  font-size: 14px;
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-body);
  font-weight: 500;
}
.trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(77, 191, 189, .15);
  color: var(--c-teal);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .trust-bar { padding: 10px 0; font-size: 13px; }
  .trust-bar-inner { gap: 8px 16px; }
}

/* Story section — image column */
.section-split-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-split-media img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 18px 40px -14px rgba(28, 137, 212, .18);
}

/* How it works — 3 steps in a row */
.steps-header { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step {
  background: #fff;
  border: 1px solid var(--c-divider);
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-shadow: 0 2px 10px rgba(28, 137, 212, .06);
  text-align: left;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal), #3baba8);
  color: #fff;
  font-family: var(--font-display, var(--font-body));
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px -6px rgba(77, 191, 189, .6);
}
.step h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--c-heading); }
.step p  { font-size: 14px; line-height: 1.55; color: var(--c-body); margin: 0; }
@media (max-width: 760px) {
  .steps-row { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 24px 22px 22px; }
}

/* FAQ mini — flat accordion list under niche pages */
.faq-mini { max-width: 760px; margin: 0 auto; }
.faq-mini .eyebrow { display: block; text-align: center; margin-bottom: 6px; }
.faq-mini h2 { text-align: center; margin-bottom: 28px; }
.faq-mini .faq-item {
  border-top: 1px solid var(--c-divider);
  padding: 2px 0;
}
.faq-mini .faq-item:last-child { border-bottom: 1px solid var(--c-divider); }
.faq-mini .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 4px;
  font-weight: 600;
  color: var(--c-heading);
  position: relative;
  font-size: 16px;
}
.faq-mini .faq-item summary::-webkit-details-marker { display: none; }
.faq-mini .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(77, 191, 189, .15);
  color: var(--c-teal);
  font-size: 18px; line-height: 26px; text-align: center;
  transition: transform var(--t), background var(--t);
}
.faq-mini .faq-item[open] summary::after {
  content: "−";
  background: var(--c-teal);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}
.faq-mini .faq-body {
  padding: 0 4px 18px;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.6;
}
.faq-mini .faq-body p { margin: 0; }

/* Sticky mobile CTA — floating bar on scroll, phones only */
.sticky-mobile-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  display: none;
  z-index: 80;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.sticky-mobile-cta .btn {
  width: 100%;
  justify-content: center;
  box-shadow: 0 12px 32px -6px rgba(255, 116, 38, .5);
}
.sticky-mobile-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .sticky-mobile-cta { display: block; }
}

/* Legal page — simple prose */
.legal-page {
  padding: 60px 0 80px;
  background: #fff;
}
.legal-page h1 {
  font-size: clamp(1.9rem, 4vw, 38px);
  margin: 0 0 24px;
}
.legal-page h2 {
  font-size: clamp(1.25rem, 2.6vw, 22px);
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--c-heading);
}
.legal-page h3 { font-size: 1.05rem; margin-top: 24px; margin-bottom: 8px; }
.legal-page p, .legal-page li {
  color: var(--c-body);
  line-height: 1.7;
  font-size: 15px;
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul, .legal-page ol { padding-left: 1.3rem; margin: 0 0 18px; }
.legal-page li { margin-bottom: 6px; }
.legal-page .translation-pending {
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #7a4a00;
  padding: 12px 18px;
  border-radius: 10px;
  margin: 16px 0 28px;
  font-size: 14px;
}

/* Solutions hub grid — wider responsive tiles */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.solutions-grid .niche-card {
  transform: none;                      /* solutions tiles stay upright, not skewed */
}
.solutions-grid .niche-card:hover {
  transform: translateY(-4px);
}
.solutions-grid .niche-card > * { transform: none; }
@media (max-width: 1100px) {
  .solutions-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Utility */
.text-center { text-align: center; }

/* ============================================================
   Solutions-hub photo cards (matches live /conceput-pentru layout)
   ============================================================ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.industry-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t);
}
.industry-card:hover { transform: translateY(-4px); color: inherit; }

.industry-card-photo {
  position: relative;
  aspect-ratio: 350 / 234;
  border-radius: 14px;
  overflow: hidden;
  background: #eef1f4;
  box-shadow: 0 8px 24px -10px rgba(28, 137, 212, .18);
  transition: box-shadow var(--t);
}
.industry-card:hover .industry-card-photo {
  box-shadow: 0 18px 40px -14px rgba(28, 137, 212, .28);
}
.industry-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  image-rendering: auto;          /* sharp, not blurred */
}
.industry-card:hover .industry-card-photo img {
  transform: scale(1.05);
}
.industry-card h3 {
  margin: 14px 4px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-heading);
  text-align: center;
}

@media (max-width: 980px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .industries-grid { grid-template-columns: 1fr; gap: 16px; }
  .industry-card h3 { font-size: 16px; }
}

/* === Niche v2 — mirror live === */

/* ── Heading accent (colour highlight inside headings) ── */
.heading-accent {
  color: var(--c-teal);
}

/* ── Eyebrow label ── */
.niche2-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 14px;
}

/* ── Generic 2-col split helper ── */
.niche2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.niche2-split-reverse {
  /* media handles reversal on mobile; on desktop keep natural order */
}
.niche2-split-media img {
  width: 100%;
  display: block;
}
.niche2-img-rounded {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
}

/* ── HERO ── */
.niche2-hero {
  background: var(--c-bg-alt);
  padding: 72px 0 64px;
}
.niche2-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.niche2-h1 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.18;
  color: var(--c-heading);
  margin: 0 0 18px;
}
/* Prefix sits on its own line; cycle starts on the next line */
.niche2-h1-prefix { display: block; }

/* Animated cycling words (matches live's "Ease. Convenience. Professionalism.") */
.niche2-cycle {
  display: inline-block;
  position: relative;
  min-width: 1ch;
  vertical-align: top;
  color: var(--c-teal);
  font-weight: 800;
  /* reserve height for tallest word so layout doesn't jump */
  line-height: inherit;
}
.niche2-cycle .cycle-word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: zaCycleWord 6.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
.niche2-cycle .cycle-word:nth-child(1) { animation-delay:  0s; position: relative; }
.niche2-cycle .cycle-word:nth-child(2) { animation-delay:  2.2s; position: absolute; left: 0; top: 0; }
.niche2-cycle .cycle-word:nth-child(3) { animation-delay:  4.4s; position: absolute; left: 0; top: 0; }
/* Single-word cycles (e.g. tattoo-studio, zumba) just stay visible */
.niche2-cycle .cycle-word:only-child {
  animation: none;
  opacity: 1;
  transform: none;
}
@keyframes zaCycleWord {
  0%   { opacity: 0; transform: translateY(8px); }
  6%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  36%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .niche2-cycle .cycle-word { animation: none; opacity: 1; transform: none; }
  .niche2-cycle .cycle-word:nth-child(n+2) { display: none; }
}

/* Screen-reader-only fallback so all cycle words are announced */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.niche2-hero-subtitle {
  font-size: 17px;
  color: var(--c-body);
  margin: 0 0 22px;
  max-width: 480px;
}
.niche2-play-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
}
.niche2-play-link:hover { color: var(--c-orange); }

/* RIGHT col */
.niche2-hero-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.niche2-hero-photo-wrap {
  width: 100%;
  max-width: 400px;
}
.niche2-hero-photo {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  display: block;
}
.niche2-hero-quote {
  margin: 0;
  padding: 18px 22px;
  border-left: 4px solid var(--c-teal);
  background: #fff;
  border-radius: 0 12px 12px 0;
  max-width: 400px;
}
.niche2-hero-quote p {
  font-size: 15px;
  font-style: italic;
  color: var(--c-heading);
  margin: 0 0 10px;
  line-height: 1.55;
}
.niche2-hero-quote footer {
  font-size: 13px;
  color: var(--c-body);
}
.niche2-hero-quote strong {
  color: var(--c-heading);
  font-weight: 700;
}
.niche2-hero-role {
  display: block;
  font-size: 12px;
  color: var(--c-body);
  margin-top: 2px;
}
.niche2-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── CTA buttons ── */
.niche2-btn-primary {
  background: var(--c-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background .2s;
}
.niche2-btn-primary:hover { background: var(--c-orange-dark); color: #fff; }
.niche2-btn-secondary {
  background: var(--c-navy);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background .2s;
}
.niche2-btn-secondary:hover { background: #2c2f40; color: #fff; }
.niche2-btn-lg {
  padding: 16px 40px;
  font-size: 17px;
}

/* ── STORY INTRO ── */
.niche2-story-intro {
  padding: 72px 0;
  background: #fff;
}
.niche2-container-narrow {
  max-width: 720px;
}
.niche2-story-intro-h2 {
  font-size: clamp(24px, 3vw, 36px);
  color: var(--c-heading);
  margin: 0 0 20px;
  text-align: left;
}
.niche2-story-intro-para {
  font-size: 17px;
  color: var(--c-body);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 640px;
}
.niche2-story-intro-para:last-child { margin-bottom: 0; }
/* Quoted paragraph — rendered in italic, with a subtle left accent bar */
.niche2-story-intro-quote {
  font-style: italic;
  color: var(--c-heading);
  border-left: 3px solid var(--c-teal);
  padding-left: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
}

/* ── STORY OUTCOME ── */
.niche2-story-split {
  background: var(--c-bg-alt);
  padding: 72px 0;
}
.niche2-story-split h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--c-heading);
  margin: 0 0 14px;
}
.niche2-intro-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-heading);
  margin: 0 0 12px;
}
.niche2-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.niche2-bullets li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 16px;
  color: var(--c-body);
  line-height: 1.5;
}
.niche2-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-teal);
  font-weight: 700;
}

/* ── FEATURES ── */
.niche2-features {
  background: #fff;
  padding: 72px 0;
}
.niche2-features-h3 {
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--c-heading);
  margin: 0 0 16px;
}
.niche2-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.niche2-feature-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  font-size: 16px;
  color: var(--c-body);
  border-bottom: 1px solid var(--c-divider);
}
.niche2-feature-list li:last-child { border-bottom: none; }
.niche2-feature-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--c-orange);
  font-weight: 700;
}

/* ── BENEFITS ── */
.niche2-benefit {
  padding: 72px 0;
  background: #fff;
}
.niche2-benefit-alt {
  background: var(--c-bg-alt);
}
.niche2-benefit h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--c-heading);
  margin: 0 0 14px;
}
.niche2-benefit p {
  font-size: 16px;
  color: var(--c-body);
  line-height: 1.7;
  margin: 0;
}

/* ── ACCESS SECTION (benefit-3) ── */
.niche2-access .niche2-access-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.niche2-access-h2 {
  font-size: clamp(24px, 3vw, 36px);
  color: var(--c-heading);
  margin: 0 0 20px;
  text-align: center;
}
.niche2-access-copy {
  text-align: center;
  margin: 0 auto 36px;
}
.niche2-access-copy p {
  font-size: 17px;
  color: var(--c-body);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 62ch;                  /* comfortable reading width, no weird breaks */
  margin-left: auto;
  margin-right: auto;
}
.niche2-access-copy p:last-child { margin-bottom: 0; }
.niche2-app-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.niche2-app-badges .badge-card {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .niche2-app-badges { gap: 10px; }
  .niche2-app-badges .badge-card { padding: 10px 14px; min-width: 0; flex: 0 1 calc(50% - 6px); }
}

/* ── FINAL CTA ── */
/* Blurry watercolor backdrop (matches the testimonials section aesthetic) */
.niche2-final-cta {
  background:
    url('/assets/images/backgroun_home_testimonials.png') center / cover no-repeat,
    linear-gradient(180deg, #f6faff 0%, #eef3f8 100%);
  padding: 90px 0;
  text-align: center;
  position: relative;
}
.niche2-cta-h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--c-heading);
  margin: 0 0 18px;
  line-height: 1.18;
  font-weight: 800;
}
.niche2-cta-sub {
  font-size: 17px;
  color: var(--c-body);
  margin: 0 auto 30px;
  max-width: 560px;
  line-height: 1.6;
}
.niche2-final-cta .niche2-btn-primary {
  background: var(--c-orange);
  color: #fff;
  font-size: 16px;
  padding: 15px 34px;
  box-shadow: 0 12px 30px -10px rgba(255, 116, 38, .55);
}
.niche2-final-cta .niche2-btn-primary:hover {
  background: var(--c-navy);
  color: #fff;
}
/* CTA scribble — sit close under the text (like the hero "efficient" treatment) */
.niche2-final-cta .scribble-underline-cta {
  padding-bottom: 0.02em;
}
.niche2-final-cta .scribble-underline-cta .scribble-svg {
  bottom: 0.02em;
  height: 0.36em;
}
.niche2-final-cta .scribble-underline-cta .scribble-svg path {
  stroke: var(--c-teal);
  stroke-width: 9;
}
.niche2-final-cta .scribble-text { color: var(--c-heading); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .niche2-hero-inner,
  .niche2-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .niche2-hero-right { align-items: stretch; }
  .niche2-hero-photo-wrap,
  .niche2-hero-quote { max-width: 100%; }
  .niche2-split-media { order: -1; }
  .niche2-split-reverse .niche2-split-media { order: -1; }
}
@media (max-width: 600px) {
  .niche2-hero { padding: 48px 0 40px; }
  .niche2-story-intro,
  .niche2-story-split,
  .niche2-features,
  .niche2-benefit { padding: 48px 0; }
  .niche2-final-cta { padding: 56px 0; }
  .niche2-app-badges { gap: 8px; }
  .niche2-app-badges .badge-card img { height: 36px; }
}
@media (max-width: 375px) {
  .niche2-h1 { font-size: 26px; }
  .niche2-btn-primary,
  .niche2-btn-secondary { padding: 12px 22px; font-size: 14px; }
}

/* Utility — keep multi-word brand together (e.g. "Zen Agenda") on one line. */
.nowrap { white-space: nowrap; }

/* Phone numbers should never break mid-digit, on any link in any context. */
a[href^="tel:"] { white-space: nowrap; }

/* === Niche v3 — benefit cards 2×2 === */

.niche2-benefits {
  padding: 80px 0 56px;
  background: var(--section-alt, #f7f9fc);
}

.niche2-benefits-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;                /* was 48px — reduce stacked spacing */
}

.niche2-benefits-header .niche2-eyebrow {
  display: block;
  margin-bottom: 12px;
}

.niche2-benefits-h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--navy, #0d2240);
  margin: 0 0 16px;
  line-height: 1.25;
}

.niche2-benefits-subtitle {
  font-size: 17px;
  color: var(--body-muted, #5a6a7e);
  line-height: 1.65;
  margin: 0;
}

.benefit-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  margin-bottom: 48px;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(13,34,64,0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(13,34,64,0.12);
}

.benefit-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(0, 175, 163, 0.1);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.benefit-icon {
  width: 56px;
  height: 56px;
  stroke: var(--teal, #00afa3);
  flex-shrink: 0;
}

.benefit-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #0d2240);
  margin: 0 0 8px;
  line-height: 1.3;
}

.benefit-card p {
  font-size: 15px;
  color: var(--body-muted, #5a6a7e);
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
}

/* App badges row below the cards */
.niche2-benefits .niche2-app-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
}

.niche2-benefits .niche2-app-badges .badge-card img {
  height: 42px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .niche2-benefits {
    padding: 56px 0 40px;
  }

  .benefit-cards {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 36px;
  }

  .benefit-icon {
    width: 48px;
    height: 48px;
  }

  .benefit-icon-wrap {
    width: 72px;
    height: 72px;
  }

  .benefit-card {
    padding: 24px 20px;
  }

  .niche2-benefits .niche2-app-badges .badge-card img {
    height: 36px;
  }
}

/* ============================================================
   FAQ — hub page + individual article pages
   ============================================================ */

/* ── Hub hero ─────────────────────────────────────────────── */
.faq-hero {
  padding: 72px 0 40px;
  background: linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%);
  text-align: center;
}
.faq-hero-h1 {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--c-heading);
  margin: 12px 0 12px;
}
.faq-hero-sub {
  font-size: 18px;
  color: var(--c-body);
  margin: 0 auto 28px;
  max-width: 600px;
}
.faq-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.faq-search {
  width: 100%;
  padding: 16px 18px 16px 48px;
  font-size: 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--c-heading);
  box-shadow: 0 4px 18px rgba(13, 34, 64, 0.06);
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-search:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 4px 18px rgba(77, 191, 189, 0.18);
}
.faq-search-ico {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--c-body);
  pointer-events: none;
}
.faq-search-hint {
  font-size: 14px;
  color: var(--c-body);
  margin: 12px 0 0;
  min-height: 1.2em;
}

/* ── Category jump nav ────────────────────────────────────── */
.faq-cat-nav {
  padding: 20px 0;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-divider);
}
.faq-cat-nav .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.faq-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  color: var(--c-heading);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.faq-cat-chip:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.faq-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  background: var(--c-bg-alt);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body);
}
.faq-cat-chip:hover .faq-cat-count {
  background: rgba(77, 191, 189, 0.12);
  color: var(--c-teal);
}

/* ── Grouped FAQ list ─────────────────────────────────────── */
.faq-list-section {
  padding: 56px 0 72px;
  background: #fff;
}
.faq-group {
  margin: 0 auto 40px;
  max-width: 820px;
  /* When the user clicks a category chip, the browser scrolls this section
     to the viewport top — leave room for the sticky header so the heading
     isn't hidden underneath. */
  scroll-margin-top: 96px;
}
.faq-group:last-child {
  margin-bottom: 0;
}
.faq-group-h2 {
  font-size: 22px;
  color: var(--c-heading);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-teal);
  display: inline-block;
}
.faq-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Individual accordion item ────────────────────────────── */
.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-item[open] {
  border-color: var(--c-teal);
  box-shadow: 0 4px 14px rgba(13, 34, 64, 0.06);
}
.faq-item summary {
  list-style: none;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item-q { flex: 1; }
.faq-item-chev {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--c-body);
  transition: transform var(--t);
}
.faq-item[open] .faq-item-chev { transform: rotate(180deg); }
.faq-item-body {
  padding: 0 20px 18px;
  color: var(--c-body);
  font-size: 15.5px;
  line-height: 1.7;
}
.faq-item-body p { margin: 0 0 10px; }
.faq-item-body p:last-child { margin-bottom: 0; }
.faq-item-body ul { margin: 4px 0 10px 18px; padding: 0; }
.faq-item-body ul li { margin-bottom: 4px; }
.faq-item-body a {
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-item-footer {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid var(--c-divider);
  font-size: 14px;
}
.faq-item-footer a {
  color: var(--c-body);
  text-decoration: none;
}
.faq-item-footer a:hover {
  color: var(--c-teal);
}

/* Hidden when filtered out */
.faq-item.faq-hidden { display: none; }
.faq-group.faq-group-empty { display: none; }

/* ── Breadcrumb (single page) ─────────────────────────────── */
.faq-breadcrumb-strip {
  padding: 18px 0;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-divider);
}
.faq-breadcrumb {
  font-size: 14px;
  color: var(--c-body);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.faq-breadcrumb a {
  color: var(--c-body);
  text-decoration: none;
}
.faq-breadcrumb a:hover { color: var(--c-teal); }
.faq-breadcrumb-current { color: var(--c-heading); font-weight: 500; }

/* ── Single article ───────────────────────────────────────── */
.faq-article {
  padding: 56px 0 72px;
  background: #fff;
}
.faq-article-header {
  margin-bottom: 28px;
}
.faq-article-category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(77, 191, 189, 0.12);
  color: var(--c-teal);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.faq-article-title {
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--c-heading);
  line-height: 1.25;
  margin: 0;
}
.faq-article-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-body);
}
.faq-article-body p { margin: 0 0 16px; }
.faq-article-body h3 {
  font-size: 22px;
  color: var(--c-heading);
  margin: 28px 0 12px;
}
.faq-article-body h4 {
  font-size: 18px;
  color: var(--c-heading);
  margin: 22px 0 10px;
}
.faq-article-body ul {
  margin: 12px 0 16px 22px;
  padding: 0;
}
.faq-article-body a {
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-article-body a:hover { color: var(--c-orange); }
.faq-article-body code {
  padding: 2px 6px;
  background: var(--c-bg-alt);
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--c-navy);
}

/* Related questions */
.faq-related {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--c-bg-alt);
  border-radius: 12px;
}
.faq-related h2 {
  font-size: 16px;
  color: var(--c-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}
.faq-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-related li {
  margin-bottom: 8px;
}
.faq-related li:last-child { margin-bottom: 0; }
.faq-related a {
  color: var(--c-heading);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--t), color var(--t);
}
.faq-related a:hover {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}

/* Bottom CTA on single FAQ */
.faq-article-cta {
  margin-top: 48px;
  padding: 32px;
  background: var(--c-bg-alt);
  border-radius: 14px;
  text-align: center;
}
.faq-article-cta-lead {
  font-size: 17px;
  color: var(--c-heading);
  margin: 0 0 18px;
  font-weight: 500;
}
.faq-article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 700px) {
  .faq-hero { padding: 48px 0 32px; }
  .faq-list-section { padding: 40px 0 56px; }
  .faq-article { padding: 36px 0 56px; }
  .faq-article-cta { padding: 24px 20px; }
}

/* ============================================================
   AI CHAT WIDGET — floating bubble + modal panel.
   Replaces the legacy WhatsApp float (.wa-float).
   ============================================================ */

/* ── Floating action button ───────────────────────────────── */
.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 116, 38, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  animation: chatFabPulse 2.8s ease-out 1.5s 3;
}
.chat-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(255, 116, 38, 0.45), 0 3px 8px rgba(0, 0, 0, 0.14);
  background: var(--c-orange-dark);
}
.chat-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.chat-fab svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fff;
  color: var(--c-orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
@keyframes chatFabPulse {
  0%   { box-shadow: 0 8px 24px rgba(255, 116, 38, 0.35), 0 2px 6px rgba(0,0,0,.12), 0 0 0 0 rgba(255, 116, 38, 0.55); }
  70%  { box-shadow: 0 8px 24px rgba(255, 116, 38, 0.35), 0 2px 6px rgba(0,0,0,.12), 0 0 0 20px rgba(255, 116, 38, 0); }
  100% { box-shadow: 0 8px 24px rgba(255, 116, 38, 0.35), 0 2px 6px rgba(0,0,0,.12), 0 0 0 0 rgba(255, 116, 38, 0); }
}

/* ── Modal panel ──────────────────────────────────────────── */
.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 999;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: calc(100vh - 132px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(13, 34, 64, 0.22), 0 4px 12px rgba(13, 34, 64, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease-out;
}
.chat-panel-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* Deploy-verification marker. chat-widget.js sets data-v="vNN" on the
   panel. Top-left corner, faint white so it reads against the orange
   chat-head without drawing attention. */
.chat-panel[data-v]::after {
  content: attr(data-v);
  position: absolute;
  left: 6px;
  top: 4px;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: .02em;
  pointer-events: none;
  z-index: 5;
}

/* Header */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--c-orange) 0%, #ff9158 100%);
  color: #fff;
}
.chat-head-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-head-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-head-avatar svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
.chat-head-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.chat-head-sub {
  font-size: 12px;
  opacity: 0.92;
  line-height: 1.35;
  margin-top: 2px;
}
.chat-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.chat-close:hover { background: rgba(255, 255, 255, 0.28); }
.chat-close svg { width: 18px; height: 18px; }

/* Messages */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: var(--c-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Keep iOS momentum scrolling and stop scroll chain from reaching the
     document body when the user hits the top/bottom of the message list. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(13,34,64,.14); border-radius: 3px; }

.chat-msg {
  display: flex;
  max-width: 100%;
}
/* Bot messages stack vertically so the optional "Talk to team" pill below
   the bubble doesn't compete for horizontal space with the bubble itself. */
.chat-msg-bot { flex-direction: column; align-items: flex-start; }
.chat-msg-user { justify-content: flex-end; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 85%;
  word-wrap: break-word;
}
.chat-msg-bot .chat-bubble {
  background: #fff;
  color: var(--c-heading);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(13,34,64,.06);
}
.chat-msg-user .chat-bubble {
  background: var(--c-orange);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble p { margin: 0 0 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 6px 0 8px 18px; padding: 0; }
.chat-bubble ul li { margin-bottom: 3px; }
.chat-bubble a {
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-msg-user .chat-bubble a { color: #fff; }

/* Typing indicator */
.chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--c-body);
  border-radius: 50%;
  opacity: .6;
  animation: chatBlink 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatBlink {
  0%, 60%, 100% { transform: translateY(0); opacity: .3; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* Sources footer inside a bot bubble */
.chat-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--c-divider);
  font-size: 12px;
  color: var(--c-body);
}
.chat-sources span { font-weight: 600; }
.chat-sources a {
  color: var(--c-body);
  text-decoration: none;
  border-bottom: 1px dashed var(--c-body);
}
.chat-sources a:hover { color: var(--c-teal); border-bottom-color: var(--c-teal); }

/* Contact block (shown when gating fires) */
.chat-contact {
  padding: 14px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--c-divider);
}
.chat-contact h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
}
.chat-contact p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--c-body);
}
.chat-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-contact-btn {
  flex: 1 1 auto;
  min-width: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-heading);
  text-decoration: none;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.chat-contact-btn svg { width: 16px; height: 16px; }
.chat-contact-phone:hover { border-color: var(--c-teal); color: var(--c-teal); }
.chat-contact-wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.chat-contact-wa:hover { background: #1fb956; border-color: #1fb956; color: #fff; }
.chat-contact-mail:hover { border-color: var(--c-orange); color: var(--c-orange); }

/* Input row */
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--c-divider);
  flex-shrink: 0;                  /* never get pushed out of view by messages */
}
.chat-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 10px 14px;
  font-family: inherit;
  /* 16px minimum to prevent iOS Safari from auto-zooming the viewport
     when the input is focused. Anything below 16px triggers zoom. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-heading);
  background: var(--c-bg-alt);
  outline: none;
  transition: border-color var(--t);
  max-height: 140px;
  overflow-y: auto;
  /* Slim, unobtrusive scrollbar (no arrow buttons) — only appears when
     the user types past the max-height. */
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 34, 64, .15) transparent;
}
/* Hide the textarea scrollbar everywhere. Windows/Linux Chrome renders a
   persistent gutter for overflow:auto that's visually heavy for such a
   small input; macOS and iOS already auto-hide. We still allow scrolling
   via touch/wheel — only the visual scrollbar is suppressed. */
.chat-input-row textarea                             { scrollbar-width: none; }
.chat-input-row textarea::-webkit-scrollbar          { width: 0; height: 0; display: none; }
.chat-input-row textarea:focus { border-color: var(--c-teal); background: #fff; }
.chat-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.chat-send:hover:not(:disabled) { background: var(--c-orange-dark); transform: scale(1.05); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }
.chat-send svg { width: 18px; height: 18px; }

/* Mobile — full-screen chat.
   On iOS Safari, chat-widget.js writes --chat-vvh/--chat-vvt from
   visualViewport so the panel shrinks to match the visible-above-keyboard
   area the moment the input is focused. That prevents iOS's built-in
   "translate the fixed element to bring the input above the keyboard"
   behavior (which was pushing our chat header off-screen).
   On Chrome/Firefox the JS gates on iOS only, so --chat-vvh stays unset
   and the panel falls back to 100dvh — those browsers resize the layout
   viewport themselves when the keyboard opens. */
@media (max-width: 600px) {
  .chat-panel {
    right: 0;
    left: 0;
    top: var(--chat-vvt, 0px);
    width: 100%;
    max-width: 100%;
    height: 100vh;                                /* legacy */
    height: 100dvh;                               /* Chrome / FF / iOS Safari default */
    height: var(--chat-vvh, 100dvh);              /* iOS Safari override when keyboard is up */
    max-height: var(--chat-vvh, 100dvh);
    border-radius: 0;
    /* PWA / standalone mode edge-to-edge past notch. No-op otherwise. */
    padding-top: env(safe-area-inset-top, 0px);
    /* Touches on the header / input row / empty panel background should
       NOT scroll the body underneath. Only .chat-messages is scrollable. */
    touch-action: none;
    overscroll-behavior: none;
  }
  .chat-panel .chat-messages {
    touch-action: pan-y;                          /* re-enable vertical pan here only */
  }
  .chat-input-row {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .chat-fab {
    right: 16px;
    bottom: 16px;
  }
}
/* Hide the floating fab while the chat panel is open (at any viewport).
   On mobile the panel is fullscreen and the fab sits on top of the send
   button; on desktop the fab sits just under the panel but can still
   visually overlap depending on panel height. `!important` guards against
   any later rule accidentally showing it. */
body.chat-open .chat-fab {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* "Talk to the team" pill button below a bot message. Sits left-aligned
   under the bubble (parent .chat-msg-bot is column-direction), shrinks
   to fit content so it never competes with the bubble for horizontal space. */
.chat-msg-hint {
  align-self: flex-start;
  margin: 6px 0 0;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-body);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chat-msg-hint:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: #fff7f0;
}

/* Soft-suggest banner above the input (not the full contact block) */
.chat-suggest {
  padding: 10px 14px;
  background: #fffaf3;
  border-top: 1px solid var(--c-divider);
  text-align: center;
}
.chat-suggest-btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-orange);
  background: transparent;
  border: 1px dashed var(--c-orange);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.chat-suggest-btn:hover { background: var(--c-orange); color: #fff; }

/* WhatsApp button — include live hours + open/closed status */
.chat-contact-wa {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  min-width: 160px;
}
.chat-contact-wa .chat-contact-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chat-contact-wa .chat-contact-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.chat-contact-wa.chat-wa-open .chat-contact-label::before   { background: #a7ffbd; }
.chat-contact-wa.chat-wa-closed .chat-contact-label::before { background: #ffb49a; }
.chat-contact-meta {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.3;
  opacity: .92;
}
.chat-wa-status { font-weight: 500; }
.chat-wa-window { opacity: .85; }
.chat-wa-autoreply {
  display: block;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  font-size: 10.5px;
  line-height: 1.35;
  opacity: .92;
  font-style: italic;
}

/* ============================================================
   Support / WhatsApp hours — standalone badge
   (used on the /contact page next to the WhatsApp button)
   ============================================================ */
.support-hours {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px 9px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-body);
  max-width: 100%;
}
.support-hours.is-open   { border-color: rgba(37, 211, 102, 0.35); background: rgba(37, 211, 102, 0.08); }
.support-hours.is-closed { border-color: rgba(255, 116, 38, 0.35); background: rgba(255, 116, 38, 0.06); }
.support-hours-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-body);
}
.support-hours-dot.is-open {
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18);
  animation: supportPulse 2.4s ease-out infinite;
}
.support-hours-dot.is-closed {
  background: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 116, 38, 0.16);
}
@keyframes supportPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.35); }
  60%  { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.support-hours-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.support-hours-status {
  font-weight: 600;
  color: var(--c-heading);
}
.support-hours-window {
  font-size: 12.5px;
  opacity: .85;
}
.support-hours-auto {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed var(--c-divider);
  font-size: 12px;
  font-style: italic;
  color: var(--c-body);
}

/* ============================================================
   PRICING PAGE — country-aware widget with interval/calendar
   toggles. Ported from the WP plugin (zen-price-picker) and
   adapted to the site's design tokens.
   ============================================================ */
.pricing-shell { padding: 60px 0 88px; background: #fff; }
.pricing-hero {
  text-align: center;
  margin-bottom: 32px;
}
.pricing-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--c-heading);
  margin: 0 0 10px;
}
.pricing-hero p {
  font-size: 17px;
  color: var(--c-body);
  margin: 0;
}

.pricing-container {
  text-align: center;
  padding: clamp(24px, 5vw, 60px);
  border: 1px solid var(--c-border);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(243,246,248,0.6) 100%),
    var(--c-bg-alt);
  box-shadow: inset 0 0 0 5px #fff, 0 12px 36px rgba(13, 34, 64, 0.06);
  transition: all .3s ease;
}

/* Toggle selectors (interval + calendar count) */
.pricing-container .selector {
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
  border: 5px solid #fff;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(13, 34, 64, 0.08);
  max-width: 480px;
  margin: 0 auto 22px;
}
.pricing-container .selector .slider {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--c-orange);
  border-radius: 50px;
  transition: left .3s ease, width .3s ease, background .3s ease;
  z-index: 1;
  opacity: 0;
}
.pricing-container .selector .slider[data-item="1"] { background: var(--c-navy); }
.pricing-container .selector button {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 0;
  color: var(--c-heading);
  font-size: 15px;
  font-weight: 500;
  transition: color .3s ease;
  margin: 0;
  text-transform: none;
}
.pricing-container .selector button.active { color: #fff; }

.pricing-container .selector.interval-selector button {
  width: 50%;
  height: 46px;
  font-size: 15px;
}
.pricing-container .selector.interval-selector button small {
  opacity: .85;
  font-size: 12px;
  margin-left: 4px;
}

.pricing-container .selector.calendar-selector button {
  font-size: 14px;
  width: 13.5%;
  aspect-ratio: 1;
  max-height: 52px;
  font-weight: 500;
}
.pricing-container .selector.calendar-selector button.justme {
  width: 19%;
  aspect-ratio: auto;
}

/* Price display block */
.pricing-container .price-box {
  margin: 18px 0;
  height: 180px;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 20px 0;
  gap: 10px;
}
.pricing-container .price {
  font-size: 30px;
  font-weight: 700;
  color: var(--c-heading);
  position: relative;
}
.pricing-container .price.promoPrice {
  margin: 0;
  font-size: 34px;
  display: none;
}
.pricing-container .price-box.hasPromo .price.promoPrice { display: block; }
.pricing-container .price-box.hasPromo .price.basePrice { color: #999; }
.pricing-container .price-box.hasPromo .price.basePrice::before {
  content: "";
  display: block;
  width: 240px;
  border-top: 2px solid #999;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 -120px;
  transform: rotate(3deg);
}
.pricing-container .price-info {
  font-size: 12px;
  color: var(--c-body);
  font-style: italic;
}
.pricing-container .promo { display: none; }
.pricing-container .price-box.hasPromo.isMonthly .promo { display: inline; }

.pricing-container .discountTotal {
  font-size: 18px;
  color: var(--c-success);
  font-weight: 500;
}
.pricing-container .yearlyTotal {
  font-size: 16px;
  color: var(--c-body);
  font-weight: 500;
  margin-top: -4px;
}
.pricing-container .yearlyTotal b {
  color: var(--c-heading);
  font-weight: 700;
}
/* Show only the lines relevant to the selected billing interval */
.pricing-container .isMonthly .discountTotal,
.pricing-container .isMonthly .yearlyTotal { display: none; }
.pricing-container .isYearly  .basePrice    { display: none; }

/* CTAs */
.pricing-container .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-container .pricing-cta {
  background: var(--c-orange);
  color: #fff;
  border: 0;
  padding: 16px 32px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: background .25s, transform .25s, box-shadow .25s;
  margin: 0;
  text-transform: none;
  box-shadow: 0 8px 24px rgba(255, 116, 38, 0.25);
}
.pricing-container .pricing-cta:hover {
  background: var(--c-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255, 116, 38, 0.32);
}
.pricing-container .silverButton {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--c-body);
  text-decoration: none;
  background-color: transparent;
  padding: 0 32px;
  line-height: 40px;
  border-radius: 20px;
  transition: color .25s, background-color .25s;
}
.pricing-container .silverButton:hover {
  color: var(--c-orange);
  background-color: var(--c-bg-alt);
}
.pricing-container .pricing-cta,
.pricing-container .silverButton {
  width: min(400px, 70vw);
}

/* Animated label fade-in */
.pricing-container .fade-in {
  opacity: 0;
  animation: pricingFadeIn .5s forwards;
}
@keyframes pricingFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide the old WhatsApp float wherever it may still be injected */
.wa-float { display: none !important; }

/* Hide the AI chat bubble while the mobile menu is open — otherwise it
   sits on top of menu items and is hard to scroll past. Reappears the
   moment the menu closes (no JS needed; main.js toggles body.menu-open). */
body.menu-open .chat-fab,
body.menu-open .chat-panel { display: none !important; }

/* ── Cookie banner — minimal-invasive bottom-right card ────────────
   Injected by main.js when localStorage.za_cookie_consent !== '1'.
   Doesn't block content (no overlay), small footprint, slides in
   from the bottom on first visit, slides out on Accept. Hidden on
   the cookie-policy page itself. */
.za-cookie-banner {
  position: fixed;
  z-index: 200;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  color: var(--c-body, #2c3145);
  border: 1px solid var(--c-divider, #e6e3f1);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .15);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.za-cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.za-cookie-banner.is-dismissing {
  opacity: 0;
  transform: translateY(20px);
}
.za-cookie-text {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.za-cookie-link {
  color: var(--c-accent, #ff7426);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.za-cookie-link:hover { color: var(--c-accent-dark, #e05c10); }
.za-cookie-accept {
  flex-shrink: 0;
  background: var(--c-accent, #ff7426);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.za-cookie-accept:hover { background: var(--c-accent-dark, #e05c10); }
.za-cookie-accept:focus-visible {
  outline: 2px solid var(--c-accent, #ff7426);
  outline-offset: 2px;
}
@media (min-width: 720px) {
  /* Desktop: bottom-LEFT corner so we don't overlap the chat FAB
     (which is bottom-right at z-index 1000). */
  .za-cookie-banner {
    left: 20px;
    right: auto;
    bottom: 20px;
    margin: 0;
  }
}
@media (max-width: 480px) {
  .za-cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .za-cookie-accept { width: 100%; }
}

/* ── v2 banner — Variant 2: compact row + expandable customize drawer ──
   Defaults to a one-line layout with primary CTA "Got it" and a discreet
   text-link "Customize" that toggles a drawer with 3 checkboxes plus
   Reject / Save buttons. Overrides v1 .za-cookie-banner base styles. */
.za-cookie-banner-v2 {
  /* Override v1 narrow constraint so the drawer doesn't squeeze. */
  max-width: 560px;
  width: calc(100vw - 32px);
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 18px;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}

/* ── Compact row (always visible) ── */
.za-cookie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.za-cookie-row > .za-cookie-text {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
  color: var(--c-body, #475569);
  font-size: 14px;
  line-height: 1.4;
}
.za-cookie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* "Customize" — text-link styled button, subdued */
.za-cookie-link-btn {
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--c-body, #475569);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(71, 85, 105, .35);
  white-space: nowrap;
  transition: color .15s, text-decoration-color .15s;
}
.za-cookie-link-btn:hover {
  color: var(--c-heading, #0a2a43);
  text-decoration-color: currentColor;
}

.za-cookie-banner-v2 .za-cookie-accept {
  background: var(--c-accent, #ff7426);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255, 116, 38, .25);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.za-cookie-banner-v2 .za-cookie-accept:hover {
  background: var(--c-accent-dark, #e05c10);
  box-shadow: 0 4px 12px rgba(255, 116, 38, .35);
}
.za-cookie-banner-v2 .za-cookie-accept:active { transform: translateY(1px); }
.za-cookie-banner-v2 .za-cookie-accept:focus-visible {
  outline: 2px solid var(--c-accent, #ff7426);
  outline-offset: 3px;
}

/* ── Drawer (toggled by Customize) ── */
.za-cookie-drawer {
  border-top: 1px solid var(--c-divider, #e6e3f1);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: za-drawer-in .2s ease;
}
.za-cookie-drawer[hidden] { display: none !important; }
@keyframes za-drawer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.za-cookie-opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Each option is a flex row with the checkbox on the left and a
   vertical-flow body (name + hint stacked) on the right. */
.za-cookie-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.za-cookie-opt input[type="checkbox"] {
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--c-accent, #ff7426);
  cursor: pointer;
}
.za-cookie-opt.is-required input[type="checkbox"] {
  cursor: not-allowed;
  opacity: .8;
}
.za-cookie-opt-body {
  display: block;
  min-width: 0;
  flex: 1;
}
.za-cookie-opt-name {
  display: block;
  font-weight: 600;
  color: var(--c-heading, #1a1d2e);
  font-size: 13px;
  line-height: 1.3;
}
.za-cookie-opt-hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-body, #6b7280);
  line-height: 1.4;
}

.za-cookie-drawer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #f1f0f7;
  padding-top: 12px;
}
.za-cookie-drawer-foot .za-cookie-link {
  font-size: 12px;
  color: var(--c-body, #475569);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.za-cookie-drawer-foot .za-cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.za-cookie-reject,
.za-cookie-save {
  background: #fff;
  color: var(--c-body, #475569);
  border: 1px solid var(--c-divider, #d8d2eb);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.za-cookie-reject:hover { border-color: var(--c-body, #475569); }
.za-cookie-save {
  background: var(--c-heading, #0a2a43);
  color: #fff;
  border-color: var(--c-heading, #0a2a43);
}
.za-cookie-save:hover { background: #06182a; border-color: #06182a; }

@media (max-width: 520px) {
  .za-cookie-row { flex-direction: column; align-items: stretch; }
  .za-cookie-row .za-cookie-actions {
    justify-content: space-between;
    width: 100%;
  }
  .za-cookie-banner-v2 .za-cookie-accept { flex: 1 1 auto; }
  .za-cookie-drawer-foot { flex-direction: column; align-items: stretch; }
  .za-cookie-drawer-foot .za-cookie-actions { width: 100%; }
  .za-cookie-reject, .za-cookie-save { flex: 1 1 50%; }
}