/* =========================================================================
   Free Website Funnel — Design System
   Replica structure of an offer funnel (original copy & brand).
   Edit tokens below to rebrand. Replace [PLACEHOLDER] copy throughout HTML.
   ========================================================================= */

:root {
  /* Brand tokens — Laman Percuma: deep teal + cream + orange CTA */
  --brand:        #e8862b;   /* primary action color — warm orange */
  --brand-dark:   #d2741c;
  --brand-tint:   #fdf1e3;
  --accent:       #f5b73d;   /* gold star accent */
  --teal:         #133b34;   /* deep restaurant teal — dark sections / hero */
  --teal-deep:    #0d2b26;
  --ink:          #1a2e2a;   /* headings on light bg */
  --body:         #4a5a55;   /* body text */
  --muted:        #8a9893;
  --line:         #e7e0d2;   /* warm hairline */
  --bg:           #ffffff;
  --bg-soft:      #f7f1e6;   /* cream */
  --bg-dark:      #0d2b26;   /* deep teal footer/dark */
  --success:      #2f9e6b;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 10px 30px -12px rgba(13, 43, 38, .18);
  --shadow-lg:    0 24px 60px -20px rgba(13, 43, 38, .35);
  --maxw:         1180px;
  --font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:      "Archivo", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: clip;   /* guard: stop any full-bleed element causing a horizontal scroll */
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
/* Kill the default Android/Chrome blue tap flash on interactive elements */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Headings: normal-case bold sans-serif (matches the reference — NOT uppercase/condensed) */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.1; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; font-family: var(--font); text-transform: none; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.hl { color: var(--brand); }  /* orange highlight on key words in headlines */
/* Artistic hand-drawn underline — rough SVG stroke, not a flat line */
.hl--underline {
  position: relative;
  display: inline-block;
  padding-bottom: .12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M4 9.5C44 5 88 3 134 4.2c30 .8 62 2.6 102 6.3' stroke='%23e8862b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% .3em;
}
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section   { padding: clamp(72px, 10vw, 132px) 0; }
/* Tighter vertical rhythm on phones — lower the padding floor so section joints don't stack to ~150px */
@media (max-width: 640px) { .section { padding-block: clamp(48px, 11vw, 72px); } }
.section--soft { background: var(--bg-soft); }
/* Soft organic cream photo background (warm paper + leaf shadows). A faint
   light wash keeps dark text readable over the busier edges of the image. */
.section--texture {
  background-image: linear-gradient(rgba(247,241,230,.55), rgba(247,241,230,.55)), url('/assets/img/texture-cream.png');
  background-size: cover; background-position: center;
}
.section--dark { background: var(--teal); color: #d8e3df; }
.section--dark h2, .section--dark h3 { color: #fff; }
.center    { text-align: center; }
.eyebrow   { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--brand); margin-bottom: .75rem; }
.lead      { font-size: 1.15rem; color: var(--body); max-width: 640px; margin-inline: auto; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 999; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: 1.05rem; line-height: 1;
  padding: .7rem 1.75rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center; white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost   { background: #fff; color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); }
.btn--lg { font-size: 1.15rem; padding: .85rem 2.25rem; }
.btn--block { display: flex; width: 100%; }
.btn small { font-weight: 500; opacity: .85; font-size: .82rem; }
/* WhatsApp button — official green + recognisable logo */
.btn--wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px -10px rgba(37,211,102,.6); }
.btn--wa:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37,211,102,.7); }
.btn--wa .wa-ico { width: 1.9em; height: 1.9em; flex-shrink: 0; margin-right: .1em; }
/* On dark/coloured bands the green button keeps its own colour — override band/statement rules */
.band .btn--wa, .statement .btn--wa { background: #25D366; color: #fff; }
.band .btn--wa:hover, .statement .btn--wa:hover { background: #1ebe5b; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--ink); font-size: 1.15rem; min-height: 44px; }
.brand img { height: 36px; width: auto; display: block; }
.site-footer .brand img { height: 34px; filter: brightness(0) invert(1); opacity: .95; }
.brand .dot { width: 26px; height: 26px; border-radius: 6px; background:
  conic-gradient(from 90deg, var(--brand) 0 25%, var(--teal) 0 50%, var(--accent) 0 75%, var(--teal) 0); }
.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.nav-links a { color: var(--body); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: .55rem 1.1rem; font-size: .9rem; }
.nav .btn--wa { gap: .4rem; }
.nav .btn--wa .wa-ico { width: 1.25em; height: 1.25em; }
@media (max-width: 820px) { .nav-links { display: none; } }
/* Header WhatsApp CTA meets the 44px touch minimum on phones/tablets */
@media (max-width: 820px) { .nav .btn--wa { min-height: 44px; } }

/* ---------- Rating badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--brand-tint); color: var(--brand-dark);
  border: 1px solid #dbe6ff; border-radius: 999px;
  padding: .45rem 1rem; font-weight: 700; font-size: .9rem; margin-bottom: 1.5rem;
}
.stars { color: var(--accent); letter-spacing: 1px; }

/* ---------- Laurel certificate badge ---------- */
.laurel {
  display: inline-flex; align-items: center; justify-content: center; gap: .85rem;
  margin-bottom: 1.5rem;
}
.laurel img { height: clamp(56px, 8vw, 76px); width: auto; display: block; }
.laurel .laurel-text { text-align: center; line-height: 1.3; }
.laurel .laurel-text .title { display: block; font-weight: 800; color: #fff; font-size: clamp(.95rem, 2vw, 1.1rem); letter-spacing: -.01em; }
.laurel .laurel-text .rating { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .35rem; font-weight: 700; color: #e3ece9; font-size: .9rem; }
.laurel .laurel-text .rating .stars { font-size: 1rem; }
/* On a light hero (apply/thank-you) the text flips dark — handled by those pages' overrides */

/* ---------- Hero (dark teal, centered, with floating proof shot) ---------- */
.hero {
  position: relative; text-align: center; color: #fff; overflow: hidden;
  /* Bottom padding = half the slider height (it pulls up by that much) + breathing room,
     so the slider sits below the text instead of over it. */
  padding: clamp(48px, 6vw, 80px) 0 calc(min(900px, 82vw) * 0.5628 / 2 + clamp(8px, 1.5vw, 18px));
  background: linear-gradient(180deg, rgba(13,43,38,.72), rgba(13,43,38,.92)), var(--teal-deep);
  background-size: cover; background-position: center;
}
.hero[data-bg] { background-image: linear-gradient(180deg, rgba(13,43,38,.90), rgba(13,43,38,.97)), var(--hero-bg); }
.hero h1 { color: #fff; max-width: 24ch; margin-inline: auto; }
.hero .lead { color: #e3ece9; margin-inline: auto; }
.hero .badge { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.75rem; }
.hero-reassure { margin-top: 1.1rem; font-size: .9rem; color: #b7c7c2; display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.hero-reassure span { display: inline-flex; align-items: center; gap: .35rem; }
/* Example-site slider — lives in the section AFTER the hero and is pulled UP
   with a negative top margin so its top ~half overlaps the dark hero and its
   bottom half rests on this (cream) section. Preview stays FULLY visible. */
.hero-proof {
  /* Active-frame width and the matching 16:9 height (screenshots are 1672x941).
     height = width * 941/1672 ≈ width * 0.563, so nothing is cropped or squashed.
     The container is wider than the frame so the prev/next slides can peek. */
  --preview-w: min(900px, 82vw);
  --preview-h: calc(var(--preview-w) * 0.5628);
  /* Full-bleed: break out of the container so the coverflow neighbours can run
     edge-to-edge without an awkward crop at the container boundary. */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: calc(var(--preview-h) / -2);  /* pull up into the hero by half its height */
  position: relative; z-index: 2;
}
.hero-proof .browser, .hero-proof .ph {
  border-radius: 14px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06); overflow: hidden; background: #fff;
}

/* ---------- Slider (coverflow) ----------
   The active slide is a full-size, sharp browser frame in the centre. The
   previous/next slides peek on either side, scaled down and blurred, as if the
   centre frame is a zoomed-in view. Track is NOT clipped so the peeks show;
   .slider itself hides the far-off slides. */
.slider { position: relative; overflow: hidden; }
.slider .slider-track {
  display: flex; align-items: flex-end;    /* side slides align to the bottom of the active frame */
  width: max-content;                      /* let slides lay out at natural width; JS centres via transform */
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  touch-action: pan-y;                     /* let horizontal drags drive the swiper; keep vertical scroll */
}
/* Each slide is its own mini browser frame */
.slider .slide {
  flex: 0 0 var(--preview-w); max-width: var(--preview-w);
  margin: 0 calc(var(--preview-w) * -0.04);   /* overlap the shrunken sides toward the centre */
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-lg);
  transform: scale(.6); transform-origin: bottom center;  /* shrink from the bottom so sides sit low */
  filter: blur(3px) brightness(.85);
  opacity: .5; transition: transform .55s cubic-bezier(.4,0,.2,1), filter .55s, opacity .55s;
  will-change: transform, filter;
}
.slider .slide.is-active {
  transform: scale(1); filter: none; opacity: 1; z-index: 2;
}
/* Non-active side slides are clickable to navigate */
.slider .slide:not(.is-active) { cursor: pointer; }
.slider .slide:not(.is-active):hover { filter: blur(2px) brightness(.95); opacity: .7; }
.slider .slide .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eef2f1; border-bottom: 1px solid var(--line); }
.slider .slide .bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.slider .slide .bar i:nth-child(1){ background:#ff6058; } .slider .slide .bar i:nth-child(2){ background:#ffbd2e; } .slider .slide .bar i:nth-child(3){ background:#28c93f; }
.slider .slide .bar .url { margin-left: 8px; flex: 1; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: .72rem; color: var(--muted); display: flex; align-items: center; padding: 0 10px; }
.slider .slide .screen {
  height: var(--preview-h); display: block; padding: 0; overflow: hidden;
  color: var(--muted); font-weight: 600; text-align: center;
  background: linear-gradient(135deg, var(--bg-soft), #fff 65%);
}
/* Image fills the screen area edge-to-edge — no padding, no letterboxing */
.slider .slide .screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slider .slide .screen:not(:has(img)) { display: grid; place-items: center; padding: 1rem; }
.slider-arrow {
  /* Center on the slide area: skip the ~40px browser bar, then half the slide height */
  position: absolute; top: calc(40px + var(--preview-h) / 2); transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow); display: grid; place-items: center; z-index: 3; transition: background .15s;
}
.slider-arrow:hover { background: #fff; }
/* Invisible 44px hit target centred on the 40px disc (WCAG touch size) */
.slider-arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
/* Arrows sit OUTSIDE the preview so they never cover the screenshot */
.slider-arrow.prev { left: -60px; } .slider-arrow.next { right: -60px; }
/* When there isn't room outside (narrow viewports), pull them just inside the edge */
@media (max-width: 1040px) {
  .slider-arrow.prev { left: 8px; } .slider-arrow.next { right: 8px; }
  .slider-arrow { background: rgba(255,255,255,.85); }
}
.slider-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.slider-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(13,43,38,.25); padding: 0; transition: background .15s, width .15s; }
.slider-dots button.active { background: var(--brand); width: 24px; border-radius: 999px; }
/* Keep the 9px/24px visual toggle but expand the tap surface to 44px */
.slider-dots button { position: relative; }
.slider-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
@media (max-width: 820px) { .slider-dots { gap: 1rem; } }

/* Keyboard focus ring on interactive controls (mouse/tap show none) */
.slider-arrow:focus-visible,
.slider-dots button:focus-visible,
.lightbox-close:focus-visible,
.faq summary:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* generic light visual placeholder reused on other sections */
.hero-visual { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background:
  linear-gradient(135deg, var(--brand-tint), #fff 60%); display: grid; place-items: center; color: var(--muted); font-weight: 600; }

/* ---------- Split hero (text left / browser mockup right) ---------- */
.hero--split { text-align: left; padding-bottom: clamp(56px, 8vw, 96px); }
.hero--split .container { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero--split h1 { max-width: none; margin-inline: 0; }
.hero--split .lead { margin-inline: 0; }
.hero--split .badge { margin-bottom: 1.25rem; }
.hero--split .hero-cta, .hero--split .hero-reassure { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero--split { text-align: center; }
  .hero--split .container { grid-template-columns: 1fr; }
  .hero--split h1, .hero--split .lead { margin-inline: auto; }
  .hero--split .hero-cta, .hero--split .hero-reassure { justify-content: center; }
  .browser { order: -1; }
}

/* ---------- Browser-frame mockup (CSS, for example-site proof shots) ---------- */
.browser { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.14); background: #fff; }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eef2f1; border-bottom: 1px solid var(--line); }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #cdd6d3; display: inline-block; }
.browser .bar i:nth-child(1){ background:#ff6058; } .browser .bar i:nth-child(2){ background:#ffbd2e; } .browser .bar i:nth-child(3){ background:#28c93f; }
.browser .bar .url { margin-left: 8px; flex: 1; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: .72rem; color: var(--muted); display: flex; align-items: center; padding: 0 10px; }
/* Screen ratio matches the portfolio screenshots (1672x941 = 16:9) so nothing is cropped */
.browser .screen { aspect-ratio: 1672 / 941; display: grid; place-items: center; color: var(--muted); font-weight: 600; text-align: center; padding: 1rem;
  background: linear-gradient(135deg, var(--bg-soft), #fff 65%); }
.browser .screen img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0; }
/* When a screen holds an image, drop the padding/placeholder styling */
.browser .screen:has(img) { padding: 0; }

/* ---------- Greyscale logo trust bar ---------- */
.logobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.logobar .lbl { width: 100%; text-align: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .25rem; }
.logobar .logo { font-weight: 800; color: #9aa8a3; font-size: 1.15rem; letter-spacing: -.02em; filter: grayscale(1); opacity: .8; }

/* ---------- Trusted-by marquee (scrolling client names) ---------- */
.trustbar .lbl { text-align: center; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 1.75rem; }
.marquee { display: flex; overflow: hidden; opacity: .55; filter: grayscale(1); transition: opacity .5s, filter .5s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee:hover { opacity: 1; filter: grayscale(0); }
/* Touch devices can't hover — lift the dim so the logos read clearly */
@media (hover: none) { .marquee { opacity: .75; filter: grayscale(.4); } }
.marquee-row { display: flex; align-items: center; gap: clamp(3rem, 6vw, 5rem); padding-right: clamp(3rem, 6vw, 5rem);
  flex-shrink: 0; animation: marquee 32s linear infinite; }
.marquee .client { display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.marquee .client b { font-family: var(--display); font-weight: 800; letter-spacing: .04em; font-size: 1.2rem; color: var(--ink); }
.marquee .client i { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-top: .25rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }

/* Slider slides signal they're tappable to zoom */
.slider .slide.is-active { cursor: zoom-in; }

/* ---------- Zoomable lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(9, 24, 21, .92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .28s ease;
}
.lightbox.open { opacity: 1; }
/* The scroll container enables native pinch-zoom + pan on touch devices */
.lightbox-scroll {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom pan-x pan-y;
  padding: max(16px, env(safe-area-inset-top)) 16px;
}
.lightbox img {
  max-width: 96vw; max-height: 88vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transition: transform .25s ease; transform-origin: center center;
  cursor: zoom-in;
}
.lightbox img.zoomed { transform: scale(2); cursor: zoom-out; max-width: none; max-height: none; }
.lightbox-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.8rem; line-height: 1;
  display: grid; place-items: center; transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
.lightbox-hint {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.7); font-size: .8rem; margin: 0; pointer-events: none;
}

/* ---------- Split block: screenshot one side, copy the other ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.split--flip .split-media { order: 2; }
/* Photo stretches to match the text column's height (crops slightly via cover),
   so both sides always end level. Falls back to natural height on narrow screens. */
.split-media:has(.split-photo) { display: flex; }
.split-photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; }
@media (max-width: 820px){ .split-photo { height: auto; min-height: 0; aspect-ratio: 16/10; } }
.split .split-copy h2 { margin-bottom: .6rem; }
.split .split-copy .eyebrow { margin-bottom: .5rem; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split--flip .split-media { order: 0; } }

/* Founder block — editorial "why we're free" feature.
   Centered magazine spread: kicker → headline → captioned photo → pull-quote → lede.
   Stays on the page's identity (Archivo/Inter, sentence-case headings, teal/cream/orange). */
/* trimmed top padding — the previous section already provides bottom breathing room */
.founder { padding-top: clamp(32px, 4vw, 56px); }
.founder .container { max-width: 760px; text-align: center; }
.founder-kicker { margin-bottom: 1rem; }
.founder-title {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(1.9rem, 3.9vw, 3rem);
  line-height: 1.08;
}
/* headline word uses the brand's own hand-drawn underline device */
.founder-title .hl--underline { background-size: 100% .28em; }

/* Captioned photo — the editorial centerpiece */
.founder-figure { margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.75rem, 5.5vw, 4rem); }
.founder-photo {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* Pull-quote carries the claim; lede supports it (deliberate size contrast) */
.founder-copy { max-width: 78ch; margin-inline: auto; }
.founder-quote {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
/* the "no fees" reassurance, set apart from the quote as its own confident line */
.founder-nofees {
  margin: 0 0 1.5rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(.86rem, 1.4vw, .95rem);
  color: var(--ink);
}
.founder-nofees s {
  text-decoration-color: var(--muted);
  text-decoration-thickness: 2px;
  color: var(--muted);
}
.founder-lede {
  margin: 0; color: var(--body);
  font-size: 1.05rem; line-height: 1.65;
  text-wrap: pretty;
}
.founder-dropword {
  font-family: var(--display); font-weight: 800;
  color: var(--brand); margin-right: .1rem;
}

/* ---------- Dark statement band (centered big claim) ---------- */
.statement { background: var(--teal); color: #e7efec; text-align: center; }
.statement h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.statement p { max-width: 640px; margin-inline: auto; color: #c3d2cd; }
/* Wider variant — fewer line breaks for longer statement copy */
.statement-wide h2 { max-width: none; }
.statement-wide p { max-width: 860px; }
/* Decorative branded background image (motifs on the sides, text stays centred) */
.statement--bg {
  position: relative;
  background-image: url('/assets/img/statement-bg.png');
  background-size: cover; background-position: center;
  padding-block: clamp(80px, 12vw, 160px);   /* extra breathing room top & bottom */
}
/* keep content above the background */
.statement--bg > .container { position: relative; z-index: 1; }

/* ---------- Transparency centerpiece: the honest money sequence ---------- */
/* Headline dramatizes their doubt, then answers it */
.tp-doubt { color: #fff; opacity: .9; font-style: italic; }
.tp-answer { max-width: 640px; margin-inline: auto; color: #cbd8d3; }
.tp-answer strong { color: var(--accent); font-weight: 800; }

/* 1 · 2 · 3 sequence — solid dark cards with real depth (no glass) */
.tp-steps {
  list-style: none; margin: 3rem auto 0; padding: 0;
  max-width: 1000px; text-align: left;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.tp-step {
  position: relative;
  background: linear-gradient(180deg, #123a34 0%, #0e2f29 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1.9rem 1.6rem 1.7rem;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
/* Top row: uppercase label on the left, line-art icon on the right — in line */
/* label + icon sit on one flex row at the top of the card */
.tp-step__head {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem;
}
.tp-step__icon {
  flex: none; width: 26px; height: 26px; color: rgba(199,215,209,.55);
  margin-left: auto;   /* push icon to the right, in line with the label */
}
.tp-step__icon svg { width: 100%; height: 100%; display: block; }
.tp-step__label {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.tp-step__figure {
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(2.3rem, 5vw, 3.2rem); color: #fff;
  margin: .5rem 0 .85rem;
}
.tp-step__figure small { font-size: .85rem; font-weight: 600; color: #a9bcb6; margin-left: .15rem; }
/* Word-figures ("Only if you ask") shouldn't be as huge as the RM numerals */
.tp-step__figure--word { font-size: clamp(1.35rem, 3vw, 1.65rem); color: #eef4f2; }
.tp-step__body { color: #b6c7c1 !important; margin: 0; max-width: none; font-size: .93rem; line-height: 1.55; }
.tp-step__body strong { color: #fff; }

/* Step 1 = the payoff. Amber border marks it as the hero — no glow. */
.tp-step--now {
  border-color: rgba(245,183,61,.6);
}
/* Card-1 icon uses the amber accent (cards 2 & 3 stay muted) */
.tp-step--now .tp-step__icon { color: var(--accent); }

/* Verdict lozenge — dark pill, the 1-second skim takeaway */
.tp-verdict {
  max-width: max-content !important; margin: 2.75rem auto 0;
  color: #eef4f2 !important; font-size: 1rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .65rem;
  background: linear-gradient(180deg, #123a34, #0e2f29);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.7);
  border-radius: 999px; padding: .8rem 1.6rem;
}
.tp-verdict strong { color: var(--accent); font-weight: 800; }
.tp-verdict__mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #25D366; color: #0d2b26; font-weight: 900; font-size: .9rem;
  display: grid; place-items: center;
}

/* CTA with hand-drawn "Cepat je!" note pointing to the button */
.tp-cta {
  margin-top: 2.75rem;
  display: flex; justify-content: center; width: 100%;
}
/* wrap shrink-wraps the button so the note can anchor to the button itself */
.tp-cta__wrap { position: relative; display: inline-flex; }
/* note sits above-left of the button; arrow curves down into its top-left corner */
.tp-cta__note {
  position: absolute; left: -148px; top: -28px;
  width: 150px; height: 96px; pointer-events: none; overflow: visible;
}
.tp-cta__note-text {
  font-family: 'Comic Sans MS', 'Bradley Hand', cursive;
  font-size: 20px; font-weight: 700; fill: var(--accent);
  transform: rotate(-7deg); transform-origin: 18px 24px;
}
/* Micro-trust row under the CTA */
.tp-microtrust {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.5rem;
}
.tp-microtrust li {
  color: #b6c7c1; font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .45rem;
}
.tp-microtrust li::before {
  content: "✓"; color: #25D366; font-weight: 900; font-size: .85rem;
}

@media (max-width: 800px) {
  .tp-steps { grid-template-columns: 1fr; max-width: 420px; gap: 2rem; }
  .tp-cta__note { display: none; }   /* arrow needs the side room; hide on narrow */
}

.statement .btn--primary { background: var(--brand); color: #fff; }
.statement .btn--primary:hover { background: var(--brand-dark); }

/* ---------- Plain centered stat row (3 cols, on light bg) ---------- */
.statrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; text-align: center; }
.statrow .num { font-family: var(--display); font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 800; line-height: 1; color: var(--ink); }
.statrow .label { color: var(--body); font-size: .95rem; margin-top: .35rem; }
.statrow .stat-cap { color: var(--body); font-size: .95rem; margin-bottom: .5rem; }
@media (max-width:640px){ .statrow { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Full-width bold stat band (orange) ---------- */
.band { background: #0d2b26; color: #e7efec; text-align: center; }
.band h2 { color: #fff; max-width: 30ch; margin-inline: auto; }
.band p { color: #c3d2cd; max-width: 620px; margin-inline: auto; }
.band .btn--primary { background: #fff; color: var(--teal-deep); }
.band .btn--primary:hover { background: #f1f5f4; }
.band-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }
.band-stats .num { font-family: var(--display); font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 800; line-height: 1; color: #fff; }
.band-stats .label { color: #c3d2cd; font-size: .95rem; }
@media (max-width:640px){ .band-stats { grid-template-columns: 1fr; } }

/* ---------- Single big testimonial band (dark teal) ---------- */
.quote-band { text-align: center; }
.quote-band .big { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem); color: #fff; line-height: 1.25; max-width: 18ch; margin: 1rem auto; text-transform: none; letter-spacing: -.01em; }
.quote-band .who { color: #b7c7c2; font-weight: 600; }
.quote-band .stars { color: var(--accent); font-size: 1.3rem; }
/* Light variant — quote on a light/textured background (dark text) */
.quote-band--light .big { color: var(--ink); }
.quote-band--light .who { color: var(--muted); }
/* Taller section so a full-bleed background image has room to show */
.section--tall { padding-block: clamp(72px, 11vw, 140px); }

/* Expert headshot placeholder (square, becomes <img> when photos land) */
.expert-photo { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: .8rem;
  background: linear-gradient(135deg, var(--brand-tint), var(--bg-soft)); border: 1px solid var(--line); overflow: hidden; }
.expert-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.stat .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--ink); }
.stat .label { color: var(--body); font-size: .95rem; }
@media (max-width: 640px){ .stat-strip { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Logos / trust row ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: center; }
.trust-row .pill { display: inline-flex; align-items: center; gap: .5rem; color: var(--body); font-weight: 700; }
.trust-row .pill b { color: var(--ink); }

/* ---------- Feature cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;   /* squarish */
  padding: 2.5rem 2rem;                                                    /* more whitespace */
  height: 100%;
  transition: background .45s cubic-bezier(.22,1,.36,1),
              border-color .45s cubic-bezier(.22,1,.36,1),
              color .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}
/* Liquid hover: whole card fills with brand colour, all content turns white */
.card:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.card:hover h3, .card:hover p { color: #fff; }

.card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint);
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 1rem; }
.card h3 { margin-bottom: .5rem; transition: color .45s cubic-bezier(.22,1,.36,1); }
.card p { margin: 0; font-size: .97rem; transition: color .45s cubic-bezier(.22,1,.36,1); }

/* Mask-based icon: the PNG is a mask so its colour is brand orange by default and
   flips to white on hover. Every glyph sits in an identical square box and is
   contained within it, so all six icons render at exactly the same visual size. */
/* Box is height-controlled (icons are tight-cropped): every icon renders at the
   same HEIGHT, width auto-fits, and sits flush-left with no gap. */
.card .ic--img {
  width: 100%; height: 64px; background: none; border-radius: 0;
  margin-bottom: 1.4rem; display: block;
}
.card .ic--img .glyph {
  display: block; width: 100%; height: 64px; background-color: var(--brand);
  transition: background-color .45s cubic-bezier(.22,1,.36,1);
  -webkit-mask: var(--icon) left center / contain no-repeat;
          mask: var(--icon) left center / contain no-repeat;
}
.card:hover .ic--img .glyph { background-color: #fff; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.step .n { counter-increment: step; width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.step .n::before { content: counter(step); }
.step h3 { margin-bottom: .25rem; }
.step p { margin: 0; }

/* ---------- Testimonials ---------- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.quote .stars { display: block; margin-bottom: .6rem; }
.quote p { font-size: 1rem; color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; display:grid; place-items:center; font-weight:700; }
.quote .who b { color: var(--ink); display: block; font-size: .95rem; }
.quote .who span { font-size: .85rem; color: var(--muted); }

/* ---------- Full-width moving review collage ---------- */
.reviews-section { overflow: hidden; background: #fff; position: relative; }
/* Cute: a soft dotted texture + faint blush glows behind the cards */
.reviews-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 12% 20%, rgba(232,134,43,.10), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(19,59,52,.08), transparent 42%),
    radial-gradient(rgba(19,59,52,.06) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
}
.reviews-section > * { position: relative; }
.rating-pill { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  background: #fff; border: 1px solid #efe7d8; border-radius: 999px; padding: .5rem 1.1rem;
  font-weight: 700; font-size: .95rem; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(19,59,52,.3); }
.rating-pill .stars { color: var(--accent); }
.rating-pill b { color: var(--brand); }
.review-marquee {
  display: flex; overflow: hidden; width: 100%; margin-bottom: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-track { display: flex; gap: 1.5rem; padding-right: 1.5rem; flex-shrink: 0; width: max-content;
  /* Promote to its own GPU layer so mobile browsers (esp. iOS Safari) don't drop the
     paint of the animated off-screen cards, which made reviews vanish intermittently. */
  will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.review-track.left  { animation: rev-left  60s linear infinite; }
.review-track.right { animation: rev-right 60s linear infinite; }
.review-track.slow  { animation-duration: 80s; }
/* Reviews keep scrolling on hover (no pause). */
@keyframes rev-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rev-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .review-track { animation: none; } }

.review-marquee .review {
  position: relative;
  flex: 0 0 clamp(280px, 26vw, 340px); width: clamp(280px, 26vw, 340px);
  background: #fff; border: 1px solid #efe7d8; border-radius: 20px;
  padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 8px 22px -12px rgba(19,59,52,.22);
}
/* Cute oversized quote mark peeking from the top corner */
.review-marquee .review::before {
  content: "\201C"; position: absolute; top: -8px; right: 16px;
  font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--brand); opacity: .16;
}
.review-marquee .review .stars { display: block; margin-bottom: .6rem; font-size: 1.05rem; letter-spacing: 1px; }
.review-marquee .review p { font-size: .97rem; color: var(--ink); margin: 0; line-height: 1.55; }
.review-marquee .review .who { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.review-marquee .review .who b { color: var(--ink); display: block; font-size: .95rem; }
.review-marquee .review .who span { font-size: .85rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: #fff; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .85rem 0 0; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; border-radius: var(--radius); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfded9; max-width: 560px; margin-inline: auto; }
.cta-band .btn--primary { background: var(--brand); color: #fff; }
.cta-band .btn--primary:hover { background: var(--brand-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-dark); color: #94a3b8; padding: 0 0 2rem; font-size: .92rem; }
.site-footer a { color: #cbd5e1; }
.footer-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer .brand { color: #fff; }
.legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #1e293b; font-size: .82rem; color: #f2f5f4; text-align: center; }
/* Legible legal copy on small screens (desktop keeps .82rem) */
@media (max-width: 640px) { .legal { font-size: 14px; } }

/* Small uppercase labels + attribution get a legible floor on phones.
   Desktop resolves to each rule's rem upper bound, so it stays unchanged. */
@media (max-width: 640px) {
  .eyebrow, .logobar .lbl, .trustbar .lbl { font-size: 13px; }
  .tp-step__label { font-size: 13px; letter-spacing: .06em; }
  .review-marquee .review .who span, .quote .who span { font-size: 14px; }
}

/* ---------- Forms (apply page) ---------- */
.form-wrap { max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 1.75rem; }
.progress > i { display: block; height: 100%; background: var(--brand); width: 33%; transition: width .3s ease; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .4rem; font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field .hint { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.field.error input, .field.error select, .field.error textarea { border-color: #ef4444; }
.field .err-msg { color: #ef4444; font-size: .85rem; margin-top: .35rem; display: none; }
.field.error .err-msg { display: block; }
.fstep { display: none; }
.fstep.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.form-nav { display: flex; gap: .75rem; margin-top: .5rem; }
.form-aside { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 1.25rem; display: flex; gap: .4rem; justify-content: center; align-items: center; }

/* ---------- Thank you ---------- */
.success-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--success); color: #fff;
  display: grid; place-items: center; font-size: 2.5rem; margin: 0 auto 1.5rem; }
.timeline { max-width: 560px; margin: 2rem auto 0; text-align: left; }
.timeline .step { grid-template-columns: 40px 1fr; }
.timeline .step .n { width: 32px; height: 32px; font-size: .95rem; background: var(--brand-tint); color: var(--brand); }
.timeline .step.done .n { background: var(--success); color: #fff; }
.timeline .step.done .n::before { content: "\2713"; }

.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }

/* ==========================================================================
   Mobile-only refinements (desktop untouched, max-width scoped)
   ========================================================================== */
/* line break inside the verdict pill only shows on small screens */
.br-mobile { display: none; }

/* Mobile fixes: keep the WhatsApp label on one line, tidy the laurel wrap */
@media (max-width: 480px) {
  /* "Apply in 2 min on WhatsApp" is long. Shrink the big-CTA label + icon + padding
     so it stays on ONE line and never exceeds its container at 360px.
     Applies to every .btn--lg (hero, transparency, final CTA, sticky bar). */
  .btn--lg {
    font-size: .98rem;
    padding-inline: 1.4rem;
    max-width: 100%;
  }
  .btn--wa .wa-ico { width: 1.55em; height: 1.55em; }

  /* laurel: give the title a controlled width so it wraps to a clean 2 lines
     ("300+ websites built for / Malaysian businesses") framed by the wreaths,
     instead of ragged breaks, and shrink the wreaths to match */
  .laurel { gap: .5rem; }
  .laurel img { height: 52px; }
  .laurel .laurel-text .title { max-width: 22ch; margin-inline: auto; line-height: 1.25; font-size: .72rem; }
  .laurel .laurel-text .rating { font-size: .78rem; }
}

/* Sticky bottom WhatsApp CTA: hidden on desktop, shown on mobile only */
.sticky-cta { display: none; }

@media (max-width: 640px) {
  /* 1. Split "Your customers Google you..." — center copy like the rest */
  .split .split-copy { text-align: center; }
  .split .split-copy .eyebrow { margin-inline: auto; }

  /* 2. Outcome cards "What your free website does for you" — center content.
     The icons are mask-based (.ic--img, full-width, mask pinned left), so centering
     the card text isn't enough: the mask position itself must move to center. */
  .grid--3 .card {
    text-align: center;
    /* slimmer on mobile — don't stretch edge-to-edge, sit centered */
    max-width: 320px; margin-inline: auto;
  }
  .grid--3 .card .ic { margin-inline: auto; }
  .grid--3 .card .ic--img .glyph {
    -webkit-mask-position: center;
            mask-position: center;
  }

  /* 3. Verdict pill wraps to two left-aligned lines (pill -> rounded block),
     check icon vertically centered against the two lines */
  .br-mobile { display: inline; }
  .tp-verdict {
    align-items: center;
    text-align: left;
    border-radius: 18px;
    padding: .85rem 1.25rem;
    line-height: 1.4;
    font-size: .8rem;   /* smaller so the two lines don't break awkwardly */
  }
  .tp-verdict__txt { display: inline-block; }
}

/* Sticky bottom WhatsApp CTA + hide the hard-to-reach header CTA on mobile.
   768px covers phones + small tablets where the header button is thumb-unfriendly. */
@media (max-width: 768px) {
  /* header CTA is out of thumb reach at the top — hide it, the sticky bar replaces it */
  .site-header .nav .btn--wa { display: none; }
  /* center the logo now that the header has only one item */
  .site-header .nav { justify-content: center; }

  /* the always-visible sticky bar makes the mid-page CTAs redundant on mobile —
     hide every in-content WhatsApp button EXCEPT the hero and final-CTA-band ones */
  main .btn--wa { display: none; }
  .hero-cta .btn--wa, .band .btn--wa { display: inline-flex; }

  /* fixed, thumb-reachable primary action pinned to the bottom */
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247,241,230,.92);   /* cream, translucent so content peeks under */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(13,43,38,.25);
    /* hidden until no other CTA is on screen (JS toggles .is-shown) */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease-out;
  }
  .sticky-cta.is-shown {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .sticky-cta .btn--wa {
    display: flex; width: 100%;
    justify-content: center;
  }
  /* reserve space for the fixed bar ONLY while it's shown (JS toggles .sticky-active),
     so there's no empty gap under the footer when the bar is hidden at page end */
  body.sticky-active { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Reviews: the auto-scroll animation glitches on mobile (cards vanish). Freeze it
     and turn each row into a native, swipeable horizontal scroller so every review
     is reliably visible/reachable with no animation. */
  .review-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none; mask-image: none;   /* mask caused iOS blanking */
    padding-inline: 20px;                          /* first/last card not flush to edge */
    scrollbar-width: none;                         /* hide scrollbar (Firefox) */
  }
  .review-marquee::-webkit-scrollbar { display: none; }
  .review-track {
    animation: none !important;
    transform: none; will-change: auto;            /* drop GPU promotion, no longer animating */
    width: max-content;
  }
  /* the JS duplicates each card (for the loop) — hide the clones so swiping shows
     the 10 unique reviews per row, not 20 */
  .review-track .review[aria-hidden="true"] { display: none; }

  /* Stagger: each row is pre-scrolled by a DIFFERENT amount (JS sets scrollLeft), so a
     partial card peeks on the LEFT of every row (and another on the right), each by a
     different amount. That both-edges peek + misaligned starts = obvious "swipe me".
     No scroll-snap here — snapping would yank the pre-scroll offset back to a card edge. */
  .review-marquee { scroll-snap-type: none; }
  .review-track { transform: none; padding-left: 0; }
}