@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

/* ===== tokens.css ===== */

/* ==========================================================================
   QuickList Landing — Design Tokens & Base
   Single source of truth. Section stylesheets must build on these variables
   and utility classes. Do not redefine a token below inside a section file.
   ========================================================================== */

/* ---------- Fonts ---------- */


:root {
  /* Brand purple ramp */
  --brand-50:  #F3EFFF;
  --brand-100: #E7E0FF;
  --brand-200: #D2C6FF;
  --brand-300: #B4A1FF;
  --brand-400: #9B7CFF;
  --brand-500: #844AEF;  /* primary button / accent text — sampled from logo.svg */
  --brand-600: #7A4BEC;
  --brand-700: #6538D6;

  /* Deep indigo (dark panels, hero pill, stats bar) */
  --deep-500: #4A1D9E;
  --deep-700: #34117E;
  --deep-900: #2A0A66;
  --deep-950: #1E0550;

  /* Ink / text */
  --ink-900: #1B1145;  /* display headings */
  --ink-800: #2A1D5E;
  --ink-700: #3B2F6B;
  --ink-500: #6B6689;  /* body copy */
  --ink-400: #8A85A3;  /* muted / captions */

  /* Surfaces */
  --bg:        #EFEEF7;  /* page background (lavender grey) */
  --surface:   #FFFFFF;  /* white cards & panels */
  --surface-2: #F7F6FC;  /* subtle tinted card */
  --line:      #E6E3F2;  /* hairline borders */
  --line-soft: #F0EDF9;

  /* Brand gradient family. Everything decorative on the page — support cards,
     the "photo" blocks inside device mockups, chat avatars — draws from these,
     so no off-brand hue is ever introduced. They differ by value, not by hue,
     which is what keeps them readable side by side. */
  --grad-brand:  linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  --grad-deep:   linear-gradient(135deg, #3A1289 0%, #26085E 100%);
  --grad-violet: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-400) 100%);
  --grad-lilac:  linear-gradient(135deg, var(--brand-400) 0%, var(--brand-200) 100%);
  --grad-indigo: linear-gradient(135deg, var(--deep-900) 0%, var(--brand-600) 100%);
  --grad-plum:   linear-gradient(135deg, var(--deep-700) 0%, var(--brand-500) 100%);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(27, 17, 69, .05);
  --sh-sm: 0 2px 8px rgba(27, 17, 69, .06);
  --sh-md: 0 8px 24px rgba(27, 17, 69, .08);
  --sh-lg: 0 20px 50px rgba(27, 17, 69, .12);
  --sh-brand: 0 10px 24px rgba(124, 92, 255, .35);

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  /* Every section pads top AND bottom, so two adjacent sections show 2x this
     value between them. Keep it at half the intended rhythm: 56 -> 112px gap. */
  --section-y: 56px;

  /* Type scale */
  --fs-display: clamp(30px, 3.6vw, 44px);
  --fs-h2:      clamp(26px, 3vw, 38px);
  --fs-h3:      clamp(18px, 1.5vw, 21px);
  --fs-lead:    15px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;

  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-500);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
p { margin: 0; }

/* ---------- Layout utilities ---------- */
.ql-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The page is a centred shell; white sections sit as rounded panels on --bg */
.ql-section { padding-block: var(--section-y); position: relative; }

.ql-panel {
  background: var(--surface);
  border-radius: var(--r-2xl);
}

/* ---------- Typography helpers ---------- */
.ql-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.22;
}

.ql-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.28;
}

/* Second half of a heading tinted purple, per the design */
.ql-accent { color: var(--brand-500); }

.ql-lead {
  font-size: var(--fs-lead);
  color: var(--ink-500);
  line-height: 1.75;
}

.ql-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--brand-500);
}

/* Centred section header block: heading + subcopy, max 640px */
.ql-head { text-align: center; max-width: 660px; margin-inline: auto; }
.ql-head .ql-lead { margin-top: 14px; }

/* ---------- Buttons ---------- */
.ql-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 32px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ql-btn--primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.ql-btn--primary:hover { background: var(--brand-600); transform: translateY(-2px); }
.ql-btn--dark {
  background: var(--deep-900);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  padding: 11px 26px;
}
.ql-btn--dark:hover { background: var(--deep-700); transform: translateY(-2px); }
.ql-btn--ghost {
  background: transparent;
  color: var(--ink-800);
  border: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
}
.ql-btn--ghost:hover { border-color: var(--brand-300); color: var(--brand-600); }

/* ---------- Cards ---------- */
.ql-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.ql-card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
  transform: translateY(-3px);
}

/* ---------- Checkmark list (used in Explore + Payments) ---------- */
.ql-check { display: flex; gap: 12px; align-items: flex-start; }
.ql-check__icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--brand-500);
  margin-top: 3px;
}

/* ---------- App store badges ---------- */
.ql-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0B0B0F;
  color: #fff;
  border-radius: 10px;
  padding: 9px 16px;
  min-width: 148px;
  transition: transform .18s ease;
}
.ql-store:hover { transform: translateY(-2px); }
.ql-store svg { flex: 0 0 auto; }
.ql-store__top { display: block; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; opacity: .85; line-height: 1.3; }
.ql-store__name { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.2; }

/* ---------- Decorative backgrounds ---------- */
.ql-grid-bg {
  background-image:
    linear-gradient(to right, rgba(124, 92, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 92, 255, .07) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ---------- Brand lockup ----------
   The real QuickList logo, served as SVG from assets/img/brand/. Two files
   because the artwork is single-colour: logo-dark.svg is the purple version for
   light backgrounds, logo.svg is the white version for dark ones. Sections set
   only the height; width follows the 182:56 aspect ratio. */
.ql-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ql-logo__img {
  display: block;
  width: auto;
  height: 32px;
}

/* ---------- Screenshot lightbox (built by assets/js/main.js) ---------- */
.ql-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(20, 10, 52, .82);
  backdrop-filter: blur(3px);
}
.ql-lightbox.is-open { display: flex; }

.ql-lightbox__figure {
  margin: 0;
  max-width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ql-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  background: var(--surface);
}

.ql-lightbox__cap {
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}

.ql-lightbox__count {
  display: block;
  text-align: center;
  margin-top: -6px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}

/* Prev / next — hidden unless the gallery has more than one image. */
.ql-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  transition: background .16s ease, transform .16s ease;
}
.ql-lightbox.has-nav .ql-lightbox__nav { display: grid; }
.ql-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.ql-lightbox__nav:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.ql-lightbox__nav--prev { left: 20px; }
.ql-lightbox__nav--next { right: 20px; }
.ql-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.ql-lightbox__nav--next:hover { transform: translateY(-50%) translateX(2px); }

@media (max-width: 640px) {
  .ql-lightbox__nav { width: 38px; height: 38px; }
  .ql-lightbox__nav--prev { left: 8px; }
  .ql-lightbox__nav--next { right: 8px; }
}

.ql-lightbox__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  transition: background .16s ease;
}
.ql-lightbox__close:hover { background: rgba(255, 255, 255, .24); }
.ql-lightbox__close:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }

/* ---------- Scroll reveal (driven by assets/js/main.js) ---------- */
.ql-reveal { opacity: 0; transform: translateY(18px); }
.ql-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  .ql-reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive scale ---------- */
@media (max-width: 900px) {
  :root { --section-y: 40px; --gutter: 20px; --r-2xl: 24px; }
}
@media (max-width: 560px) {
  :root { --section-y: 32px; --gutter: 16px; }
  .ql-btn { padding: 12px 26px; }
}

/* ===== sections/01-header.css ===== */

/* ==========================================================================
   01 — Site header / nav  (sticky bar sitting on the page background)
   ========================================================================== */

.site-header {
  --header-h: 72px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* main.js adds .is-stuck past 12px of scroll */
.site-header.is-stuck {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--sh-sm);
}

.header__inner { position: relative; }

.header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

/* Visually hidden section heading (keeps the h2-per-section contract) */
.header__sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Logo lockup (scoped to this section only) ---------- */
.site-header .ql-logo {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
}
.site-header .ql-logo__img {
  height: 32px;
  transition: transform .25s ease;
}
.site-header .ql-logo:hover .ql-logo__img { transform: scale(1.04); }

/* ---------- Centre nav ---------- */
.header__nav { justify-self: center; }

.header__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.4;
  padding: 6px 2px;
  transition: color .18s ease;
}
.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  transition: width .22s ease;
}
.header__link:hover { color: var(--brand-600); }
.header__link:hover::after,
.header__link:focus-visible::after { width: 100%; }

/* ---------- Right side ---------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.header__cta { padding: 11px 26px; }

/* ---------- Hamburger (mobile only) ---------- */
.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: border-color .18s ease, background .18s ease;
}
.header__burger:hover { border-color: var(--brand-300); }

.header__burger-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}
.header__burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  transition: transform .22s ease, opacity .18s ease;
}

/* open state: nav is a previous sibling of .header__actions */
.header__nav.is-open ~ .header__actions .header__burger { border-color: var(--brand-300); }
.header__nav.is-open ~ .header__actions .header__burger-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.header__nav.is-open ~ .header__actions .header__burger-bar:nth-child(2) { opacity: 0; }
.header__nav.is-open ~ .header__actions .header__burger-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Focus visibility ---------- */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .site-header { --header-h: 60px; }

  .header__bar { grid-template-columns: auto 1fr; }

  .header__burger { display: inline-flex; }

  /* Full-width dropdown panel */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 6px var(--gutter) 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header__list li + li { border-top: 1px solid var(--line-soft); }

  .header__link {
    display: block;
    padding: 12px 2px;
    font-size: var(--fs-body);
  }
  .header__link::after { display: none; }

  .header__cta {
    padding: 9px 18px;
    font-size: var(--fs-xs);
    letter-spacing: .05em;
  }

  .site-header .ql-logo__img { height: 28px; }
}

@media (max-width: 560px) {
  .header__actions { gap: 8px; }
  .header__cta { padding: 8px 14px; box-shadow: none; }
  .header__burger { width: 38px; height: 38px; }
  .site-header .ql-logo__img { height: 25px; }
}

/* ===== sections/02-hero.css ===== */

/* ==========================================================================
   02 — HERO  (#hero / .hero__*)
   Gradient + grid + cloud backdrop, rotated brand pill, H1, CTA and the
   three-piece device collage (admin window / phone / website card).
   All visuals are hand-built CSS + inline SVG. No external requests.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 0;
  background: linear-gradient(180deg, #F4F1FF 0%, var(--surface) 100%);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

/* ---------- decorative backdrop ---------- */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* soft white cloud blobs, lower-left + lower-right */
.hero__cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(255, 255, 255, .96) 0%,
              rgba(255, 255, 255, .82) 46%,
              rgba(255, 255, 255, 0) 100%);
  filter: blur(16px);
}
.hero__cloud--a { left: -8%;  bottom: -12%; width: 46%; height: 46%; }
.hero__cloud--b { left: 12%;  bottom: 2%;   width: 26%; height: 26%; opacity: .85; }
.hero__cloud--c { right: -8%; bottom: -14%; width: 48%; height: 48%; }
.hero__cloud--d { right: 14%; bottom: 4%;   width: 24%; height: 24%; opacity: .8; }

/* small rotated purple diamonds */
.hero__dia {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--brand-300);
  transform: rotate(45deg);
  opacity: .55;
}
.hero__dia--1 { left: 6%;   top: 16%;  width: 14px; height: 14px; }
.hero__dia--2 { left: 15%;  top: 40%;  background: var(--brand-400); opacity: .45; }
.hero__dia--3 { left: 27%;  top: 9%;   width: 9px;  height: 9px; opacity: .4; }
.hero__dia--4 { right: 7%;  top: 20%;  width: 15px; height: 15px; background: var(--brand-400); opacity: .5; }
.hero__dia--5 { right: 17%; top: 44%;  width: 10px; height: 10px; opacity: .42; }
.hero__dia--6 { right: 29%; top: 11%;  width: 8px;  height: 8px; opacity: .38; }
.hero__dia--7 { left: 44%;  top: 5%;   width: 8px;  height: 8px; opacity: .32; }

/* ---------- content column ---------- */
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Padding, not a margin on .hero__title — a margin would collapse through this box
     and carry the absolutely-positioned brand pill down with it, back onto the H1. */
  padding-top: 66px;
  padding-bottom: 0;
}

/* ---------- rotated indigo brand pill ---------- */
.hero__badge {
  position: absolute;
  top: -6px;
  left: max(0px, calc(50% - 430px));
  z-index: 3;
  display: inline-flex;
  padding: 10px 26px;
  background: var(--deep-900);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transform: rotate(-7deg);
}

.hero .ql-logo {
  display: inline-flex;
  align-items: center;
}
/* White artwork variant — the pill behind it is deep indigo. */
.hero .ql-logo__img { height: 30px; }
.hero .ql-logo:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* ---------- headline block ---------- */
.hero__title {
  /* Top margin clears the absolutely-positioned brand pill (44px tall at top:-6px)
     so the badge sits above-left of the headline instead of over its first word. */
  max-width: 660px;
  margin: 0 auto;
  color: var(--ink-900);
}

.hero__sub {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-500);
}

.hero__cta { margin-top: 26px; }
.hero__cta:focus-visible { outline: 2px solid var(--deep-700); outline-offset: 3px; }

/* ==========================================================================
   DEVICE COLLAGE
   ========================================================================== */
.hero__stage { margin-top: 62px; }
.hero__scroller { position: relative; }

.hero__rail {
  position: relative;
  width: 900px;
  max-width: 100%;
  height: 310px;              /* devices overflow this box and get clipped by .hero */
  margin-inline: auto;
}

/* ---------------- (a) CENTRE — Laravel admin panel ---------------- */
.hero__admin {
  position: absolute;
  top: 26px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  /* em-based internals: the whole window scales from this one value */
  font-size: min(10px, calc((100vw - 48px) / 62));
  width: 62em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.hero__chrome {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2.6em;
  padding: 0 1.2em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.hero__dot {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--line);
}
.hero__dot:nth-child(1) { background: var(--brand-200); }
.hero__dot:nth-child(2) { background: var(--brand-100); }
.hero__url {
  flex: 1 1 auto;
  max-width: 24em;
  margin-left: 1.2em;
  padding: .15em 1em;
  font-size: .85em;
  line-height: 1.6;
  color: var(--ink-400);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__app { display: flex; align-items: stretch; }

/* sidebar */
.hero__side {
  flex: 0 0 13em;
  width: 13em;
  padding: 1.4em 1em;
  background: var(--deep-950);
}
.hero__sidelogo {
  display: flex;
  align-items: center;
  gap: .6em;
  color: #fff;
}
.hero__sidelogo svg { width: 2em; height: 2em; flex: 0 0 auto; }
.hero__logoCut { fill: var(--deep-950); }
.hero__sidelogo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: -.02em;
  line-height: 1;
}

.hero__menu { margin-top: 1.8em; display: flex; flex-direction: column; gap: .25em; }
.hero__mi {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .62em .8em;
  border-radius: var(--r-sm);
  font-size: 1.02em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}
.hero__mi svg { width: 1.3em; height: 1.3em; flex: 0 0 auto; fill: currentColor; }
.hero__mi.is-on {
  background: var(--brand-500);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-brand);
}

/* main column */
.hero__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  padding: 1.4em;
  background: var(--surface-2);
}

.hero__welcome {
  padding: 1.15em 1.4em;
  border-radius: var(--r-md);
  background: var(--brand-500);
  color: #fff;
}
.hero__welcome strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35em;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.hero__welcome span {
  display: block;
  margin-top: .3em;
  font-size: .95em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}

.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.hero__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  padding: .85em 1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.hero__statTxt { min-width: 0; }
.hero__statLbl {
  display: block;
  font-size: .92em;
  line-height: 1.4;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__statVal {
  display: block;
  margin-top: .1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9em;
  line-height: 1.2;
  color: var(--ink-900);
}
.hero__statIco {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-500);
}
.hero__statIco svg { width: 1.3em; height: 1.3em; fill: currentColor; }

/* chart card */
.hero__chart {
  padding: 1em 1.1em 1.1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.hero__chartHd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: .5em;
}
.hero__chartHd strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.3;
  color: var(--ink-900);
}
.hero__legend {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .9em;
  line-height: 1.4;
  color: var(--ink-400);
}
.hero__legend i {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--brand-500);
}

.hero__spark { width: 100%; height: auto; display: block; }
.hero__stopA, .hero__stopB { stop-color: var(--brand-500); }
.hero__gridlines line { stroke: var(--line-soft); stroke-width: 1.5; }
.hero__line {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__peak { fill: var(--surface); stroke: var(--brand-500); stroke-width: 2.6; }

/* ---------------- (b) LEFT — Flutter mobile app ---------------- */
.hero__phone {
  position: absolute;
  left: 0;
  top: 28px;
  z-index: 3;
  width: 210px;
}
.hero__bezel {
  padding: 8px;
  background: var(--deep-950);
  border-radius: 34px;
  box-shadow: var(--sh-lg);
}
.hero__screen {
  position: relative;
  background: var(--surface);
  border-radius: 27px;
  overflow: hidden;
}
.hero__notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--deep-950);
  z-index: 2;
}

.hero__phoneHd {
  padding: 26px 12px 12px;
  background: var(--brand-500);
  color: #fff;
}
.hero__loc { display: flex; align-items: center; gap: 5px; font-size: 9px; line-height: 1.4; }
.hero__loc svg { width: 10px; height: 10px; flex: 0 0 auto; fill: currentColor; opacity: .9; }
.hero__loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__chev { width: 9px; height: 9px; opacity: .8; }

.hero__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: 8px;
  line-height: 1.4;
  color: var(--ink-400);
}
.hero__search svg { width: 9px; height: 9px; flex: 0 0 auto; fill: var(--brand-500); }
.hero__search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero__phoneBd { padding: 10px 12px 14px; }
.hero__rowHd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hero__rowHd strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ink-900);
}
.hero__rowHd span { font-size: 7.5px; color: var(--brand-500); }
.hero__rowHd--sp { margin-top: 12px; }

.hero__deal {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.hero__photo {
  position: relative;
  display: grid;
  place-items: center;
  height: 62px;
  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-900) 100%);
}
.hero__photo svg { width: 78px; height: auto; }
.hero__tag {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  color: #fff;
  font-size: 6.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__dealMeta { padding: 7px 8px 8px; }
.hero__dealTitle {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--ink-800);
}
.hero__dealSub { display: block; font-size: 7px; line-height: 1.5; color: var(--ink-400); }
.hero__dealPrice {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.3;
  color: var(--brand-600);
}

.hero__cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 7px;
}
.hero__cats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  text-align: center;
}
.hero__cats svg { width: 12px; height: 12px; fill: var(--brand-600); }
.hero__cats span { font-size: 6px; line-height: 1.4; color: var(--ink-500); }

/* ---------------- (c) RIGHT — responsive website ---------------- */
.hero__web {
  position: absolute;
  right: -8px;
  top: 0;
  z-index: 2;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.hero__webNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.hero__webBrand { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-500); }
.hero__webBrand svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hero__webBrand b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
.hero__webLinks { display: inline-flex; gap: 10px; }
.hero__webLinks i { font-style: normal; font-size: 7.5px; line-height: 1.4; color: var(--ink-500); }
.hero__webCta {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7px;
  line-height: 1.6;
}

.hero__webBody { padding: 14px 16px 16px; text-align: center; }
.hero__webHead {
  max-width: 200px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

.hero__webSearch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 4px 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 7.5px;
  line-height: 1.4;
  color: var(--ink-400);
  text-align: left;
}
.hero__webGo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-500);
}
.hero__webGo svg { width: 11px; height: 11px; }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.hero__chips span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 6.5px;
  line-height: 1.6;
  color: var(--ink-500);
}
.hero__chips span.is-on {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-600);
  font-weight: 600;
}

.hero__webShot {
  position: relative;
  height: 96px;
  margin-top: 11px;
  border-radius: var(--r-md);
  background: var(--grad-lilac);
  overflow: hidden;
}
.hero__webShot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 60%);
}
.hero__webShotTag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  font-size: 6.5px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-800);
}

.hero__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.hero__thumb { height: 34px; border-radius: var(--r-sm); }
.hero__thumb--1 { background: var(--grad-violet); }
.hero__thumb--2 { background: var(--grad-plum); }
.hero__thumb--3 { background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-200) 100%); }
.hero__thumb--4 { background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-900) 100%); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .hero { padding-top: 44px; }

  .hero__badge {
    position: static;
    display: flex;
    width: max-content;
    max-width: 100%;
    transform: none;
    margin: 0 auto 20px;
  }
  .hero .ql-logo__img { height: 26px; }

  /* Pill goes static and centres above the headline, so the clearance isn't needed. */
  .hero__inner { padding-top: 0; }
  .hero__title { margin-top: 0; }

  .hero__stage { margin-top: 44px; }
  .hero__scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero__rail {
    width: 100%;
    height: auto;
    padding-bottom: 26px;
  }

  /* only the admin window survives, scaled to the viewport */
  .hero__phone,
  .hero__web { display: none; }

  .hero__admin {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin-inline: auto;
  }

  .hero__cloud--b,
  .hero__cloud--d { display: none; }
  .hero__dia--3,
  .hero__dia--6,
  .hero__dia--7 { display: none; }
}

@media (max-width: 560px) {
  .hero { padding-top: 32px; }
  .hero__sub { font-size: var(--fs-xs); }
  .hero__stage { margin-top: 34px; }

  .hero__admin { width: 100%; font-size: min(10px, calc((100vw - 32px) / 62)); }

  /* sidebar collapses to an icon rail so the dashboard still reads */
  .hero__side { flex-basis: 4.4em; width: 4.4em; padding: 1.2em .7em; }
  .hero__sidelogo span,
  .hero__mi span { display: none; }
  .hero__sidelogo { justify-content: center; }
  .hero__mi { justify-content: center; padding: .62em 0; }

  .hero__stats { grid-template-columns: 1fr; }
  .hero__stat { padding: .75em .9em; }

  .hero__dia--2,
  .hero__dia--5 { display: none; }
}

/* ===== sections/03-clones.css ===== */

/* ==========================================================================
   03 — Clones: "Launch Your Own / Marketplace Clone app Like" + logo marquee
   Sits directly on the page background.
   ========================================================================== */

.clones {
  padding-block: calc(var(--section-y) * 0.6);
  position: relative;
  overflow: hidden;   /* guards the ≤760px full-bleed marquee break-out */
}

.clones__inner {
  display: flex;
  align-items: center;
  gap: 44px;
}

/* ---------- Heading (left) ---------- */
.clones__head {
  flex: 0 0 auto;
  width: 336px;
  max-width: 100%;
}

.clones__title {
  margin: 0;
  letter-spacing: -0.02em;
}

.clones__line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.24;
}

.clones__line--ink { color: var(--ink-900); }

/* ---------- Marquee viewport (right) ---------- */
.clones__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 7%, #000 93%, transparent 100%);
}

.clones__track {
  display: flex;
  width: max-content;
  animation: clones-marquee 34s linear infinite;
  will-change: transform;
}

.clones__viewport:hover .clones__track,
.clones__viewport:focus-within .clones__track {
  animation-play-state: paused;
}

@keyframes clones-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.clones__list {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding-inline-end: 34px;
  margin: 0;
}

/* ---------- Chip ---------- */
.clones__chip {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--clones-c, var(--brand-500));
}

.clones__mark {
  width: 62px;
  height: 62px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .22s ease, transform .22s ease;
}

.clones__chip:hover .clones__mark {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.clones__mark svg { display: block; }

.clones__name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-500);
  text-align: center;
  min-height: 30px;
}

/* ---------- Brand mark colours (not tokens — third-party brand hues) ---------- */
/* The marks are the designer's own brand artwork from assets/images/brands/,
   so there is no colour table here — each PNG carries its own colours. */
.clones__mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .clones__inner { gap: 30px; }
  .clones__head { width: 280px; }
}

@media (max-width: 760px) {
  .clones__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }

  .clones__head { width: 100%; }

  /* run the marquee edge-to-edge, breaking out of the container gutter */
  .clones__viewport {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (max-width: 560px) {
  .clones__list { gap: 24px; padding-inline-end: 24px; }
  .clones__chip { width: 84px; }
  .clones__mark { width: 56px; height: 56px; }
  .clones__mark svg { width: 24px; height: 24px; }
}

/* ---------- Reduced motion: stop the marquee, allow manual scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  .clones__track { animation: none; transform: none; }
  .clones__viewport { overflow-x: auto; }
}

/* ===== sections/04-support.css ===== */

/* ==========================================================================
   04 — Support : three gradient cards on the page background
   ========================================================================== */

.support {
  position: relative;
  padding-block: 10px 0;
}

/* Section heading is carried by the cards themselves; keep an accessible one. */
.support__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Grid ---------- */
.support__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* ---------- Card ---------- */
.support__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 150px;
  padding: 26px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  transition: transform .24s ease, box-shadow .24s ease;
}

/* Kept the --green / --orange modifier names so the markup didn't have to change;
   both now carry brand purple, separated by value so the pair still reads as two. */
.support__card--green  { background: var(--grad-violet); }
.support__card--orange { background: var(--grad-indigo); }

/* Faint 6% white diagonal sheen */
.support__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, .06) 26%,
    rgba(255, 255, 255, .06) 58%,
    rgba(255, 255, 255, 0) 58%
  );
}

.support__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* ---------- Icon tile ---------- */
.support__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .22);
}

.support__icon svg { display: block; }

/* ---------- Text ---------- */
.support__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #fff;
}

.support__copy {
  margin-top: 8px;
  max-width: 27ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Button ---------- */
.support__btn {
  margin-top: 18px;
  font-size: var(--fs-xs);
  padding: 10px 22px;
}

.support__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .support__grid { grid-template-columns: minmax(0, 1fr); }
  .support__card { min-height: 0; }
  .support__copy { max-width: 46ch; }
}

@media (max-width: 560px) {
  .support__card { padding: 22px; }
  .support__copy { max-width: none; }
}

/* ===== sections/05-features.css ===== */

/* ==========================================================================
   05 — Features (bento panel)
   Scope: #features / .features__*   |  tokens.css owns all ql-* classes
   ========================================================================== */

.features {
  /* status palette used by the donut + legend (brief-specified, non-token) */
  --f-green:  #2FBF71;
  --f-amber:  #F5C542;
  --f-orange: #F2803C;
  --f-red:    #EF5350;
}

.features__panel {
  padding: 64px 40px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.features__head { max-width: 720px; }

/* ---------- Bento grid ---------- */
.features__bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(330px, auto) minmax(288px, auto);
  gap: 18px;
  margin-top: 46px;
}

.features__card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 0;
  min-width: 0;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.features__card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
  transform: translateY(-3px);
}

.features__card--a { grid-column: 1 / 5;  grid-row: 1; padding-bottom: 22px; }
.features__card--b { grid-column: 5 / 9;  grid-row: 1; }
.features__card--c { grid-column: 9 / 13; grid-row: 1 / 3; }
.features__card--d { grid-column: 1 / 9;  grid-row: 2; padding: 26px 24px; }

/* ---------- Shared card copy ---------- */
.features__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}
.features__text {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  line-height: 1.65;
}

/* ==========================================================================
   CARD A — donut gauge
   ========================================================================== */
.features__donutWrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.features__donut { width: 150px; height: 150px; }

.features__arc { transition: stroke-width .22s ease; }
.features__arc--active   { stroke: var(--brand-500); }
.features__arc--featured { stroke: var(--f-green); }
.features__arc--pending  { stroke: var(--f-amber); }
.features__arc--sold     { stroke: var(--f-orange); }
.features__arc--draft    { stroke: var(--f-red); }

.features__donutVal {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  fill: var(--ink-900);
  letter-spacing: -.02em;
}
.features__donutCap {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-400);
}

.features__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 14px;
}
.features__legendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-500);
  white-space: nowrap;
}
.features__dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.features__dot--active   { background: var(--brand-500); }
.features__dot--featured { background: var(--f-green); }
.features__dot--pending  { background: var(--f-amber); }
.features__dot--sold     { background: var(--f-orange); }
.features__dot--draft    { background: var(--f-red); }

/* ==========================================================================
   CARD B — floating filters panel
   ========================================================================== */
.features__filters {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 12px 14px 16px;
  margin: 20px 6px -46px;   /* bleeds past the card bottom, clipped by overflow */
}

.features__filtersHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.features__filtersTitle {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
}
.features__filtersX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-400);
}

.features__frow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.features__flabel {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-800);
}
.features__flabel--block { display: block; margin-top: 14px; }
.features__fval {
  font-size: 10.5px;
  color: var(--ink-400);
  text-align: right;
  white-space: nowrap;
}

/* two-handle range slider */
.features__slider {
  position: relative;
  height: 14px;
  margin-top: 10px;
}
.features__track,
.features__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: var(--r-pill);
  transform: translateY(-50%);
}
.features__track { left: 0; right: 0; background: var(--line); }
.features__fill  { left: 22%; right: 28%; background: var(--brand-500); }

.features__handle {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2.5px solid var(--brand-500);
  box-shadow: var(--sh-xs);
  transform: translateY(-50%);
}
.features__handle--a { left: 22%; }
.features__handle--b { left: 72%; }

.features__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.features__chip {
  font-size: 10px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-500);
  background: var(--surface);
  white-space: nowrap;
}
.features__chip--on {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 500;
}

/* soft purple bottom fade */
.features__bfade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 92px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-500) 0%, transparent) 0%,
    color-mix(in srgb, var(--brand-500) 10%, transparent) 62%,
    color-mix(in srgb, var(--brand-500) 20%, transparent) 100%
  );
}

/* ==========================================================================
   CARD C — messages list
   ========================================================================== */
.features__msgs { margin-top: 18px; }

.features__msgsHead {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 8px;
}
.features__msgsCount { color: var(--brand-500); }

.features__msgList { display: flex; flex-direction: column; }

.features__msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.features__msg--f1 { opacity: .55; }
.features__msg--f2 { opacity: .28; }
.features__msg--f3 { opacity: 0; }

.features__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.features__avatar--1 { background: var(--grad-brand); }
.features__avatar--2 { background: var(--grad-indigo); }
.features__avatar--3 { background: var(--grad-violet); }
.features__avatar--4 { background: var(--grad-lilac); }
.features__avatar--5 { background: var(--grad-deep); }
.features__avatar--6 { background: var(--grad-brand); }
.features__avatar--7 { background: var(--grad-plum); }

.features__online {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--f-green);
  border: 2px solid var(--surface);
}

.features__msgBody { min-width: 0; flex: 1 1 auto; }
.features__msgName {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.features__msgPrev {
  display: block;
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.features__msgMeta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.features__time {
  font-size: 9.5px;
  color: var(--ink-400);
  line-height: 1.3;
  white-space: nowrap;
}
.features__badge {
  min-width: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--f-green);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

.features__cfade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-500) 0%, transparent) 0%,
    color-mix(in srgb, var(--brand-500) 9%, transparent) 55%,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 100%
  );
}

/* ==========================================================================
   CARD D — subscription plans
   ========================================================================== */
.features__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: center;
  height: 100%;
}
.features__copy--d { max-width: 340px; }
.features__copy--d .features__title { font-size: 17px; }

.features__plans {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  min-width: 0;
}

.features__plan {
  flex: 0 1 178px;
  border-radius: var(--r-md);
  padding: 16px 16px 18px;
  min-width: 0;
}

.features__plan--starter {
  background: linear-gradient(150deg, var(--brand-100) 0%, var(--brand-200) 55%, #D9C9FF 100%);
  color: var(--ink-900);
  box-shadow: var(--sh-sm);
  margin-top: 20px;
}
.features__plan--pro {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  margin-left: -30px;
}

.features__planGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .6);
  color: var(--f-orange);
  margin-bottom: 10px;
}
.features__planGlyph--pro {
  background: var(--brand-50);
  color: var(--brand-500);
}

.features__planName {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: .01em;
}
.features__planPrice {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.features__planPrice i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-500);
}

.features__planList {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.features__planList li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-700);
}
.features__planList svg {
  flex: 0 0 auto;
  color: var(--brand-500);
}
.features__plan--starter .features__planList li { color: var(--ink-800); }
.features__plan--starter .features__planList svg { color: var(--brand-600); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .features__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .features__card--a { grid-column: 1; grid-row: auto; }
  .features__card--b { grid-column: 2; grid-row: auto; }
  .features__card--c { grid-column: 1 / -1; grid-row: auto; }
  .features__card--d { grid-column: 1 / -1; grid-row: auto; }
  .features__card--c { padding-bottom: 8px; }
  .features__cfade { height: 96px; }
}

@media (max-width: 900px) {
  .features__panel { padding: 44px 24px; }
  .features__bento { margin-top: 34px; gap: 16px; }
  .features__plan { flex: 0 1 168px; }
}

@media (max-width: 700px) {
  .features__bento { grid-template-columns: minmax(0, 1fr); }
  .features__card--a,
  .features__card--b,
  .features__card--c,
  .features__card--d { grid-column: 1 / -1; }
  .features__split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .features__copy--d { max-width: none; }
  .features__plans { padding-top: 4px; }
}

@media (max-width: 560px) {
  .features__panel { padding: 36px 16px; }
  .features__card { padding: 20px 16px 0; }
  .features__card--a { padding-bottom: 18px; }
  .features__card--d { padding: 22px 16px; }
  .features__donut { width: 132px; height: 132px; }
  .features__legend { gap: 6px 9px; }
  .features__plans { flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
  .features__plan { flex: 1 1 100%; margin-left: 0; margin-top: 0; }
  .features__plan--pro { margin-left: 0; }
}

/* ===== sections/06-platforms.css ===== */

/* ==========================================================================
   06 — Platforms : three product cards + capability chips
   Sits directly on the page background (--bg). All mockups are pure CSS.
   ========================================================================== */

.platforms {
  /* local, section-scoped helpers (no token duplicates) */
  --platforms-lav: #EDE9FF;          /* lavender stage floor */
  /* Decorative ring + bar inside the admin-panel mockup — brand purple, not the
     old green, so the mockup matches every other tinted block on the page. */
  --platforms-green-a: var(--brand-500);
  --platforms-green-b: var(--brand-300);
  --platforms-bezel: #241056;        /* device bezel, between deep-950 and ink-900 */
}

/* ---------- Top split ---------------------------------------------------- */
.platforms__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 56px;
  align-items: start;
  margin-bottom: 44px;
}

.platforms__title { max-width: 420px; }

.platforms__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-top: 4px;
}

.platforms__lead { max-width: 500px; }

.platforms__cta:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
}

/* ---------- Card grid ---------------------------------------------------- */
.platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.platforms__card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.platforms__card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
  transform: translateY(-3px);
}

.platforms__copy {
  padding: 22px;
  background: var(--surface);
}

.platforms__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.platforms__desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-500);
}

/* ---------- Lavender stage ----------------------------------------------- */
.platforms__stage {
  margin-top: auto;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--platforms-lav) 100%);
  border-top: 1px solid var(--line-soft);
}

.platforms__mock { position: relative; }

/* ---------- Shared device parts ------------------------------------------ */
.platforms__screen {
  width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* generic skeleton bars used inside secondary devices */
.platforms__sk {
  display: block;
  border-radius: var(--r-pill);
  background: var(--line);
  flex: 0 0 auto;
}
.platforms__sk--head  { height: 12px; width: 100%; border-radius: 0 0 6px 6px; background: var(--brand-300); margin-bottom: 8px; }
.platforms__sk--w70   { height: 4px; width: 70%; margin: 0 8px 5px; }
.platforms__sk--w45   { height: 4px; width: 45%; margin: 0 8px 5px; background: var(--line-soft); }
.platforms__sk--box   { height: 26px; width: calc(100% - 16px); margin: 3px 8px 7px; border-radius: 5px; background: var(--brand-50); }

/* small text lines reused in several mockups */
.platforms__ln { display: block; border-radius: var(--r-pill); background: var(--line); }
.platforms__ln--a     { height: 4px; width: 76%; margin-bottom: 4px; }
.platforms__ln--b     { height: 4px; width: 52%; margin-bottom: 5px; background: var(--line-soft); }
.platforms__ln--price { height: 5px; width: 34%; background: var(--brand-400); }

/* ==========================================================================
   Mock 1 — two overlapping phones
   ========================================================================== */
.platforms__mock--app {
  display: flex;
  align-items: center;
  justify-content: center;
}

.platforms__phone {
  background: var(--platforms-bezel);
  border-radius: 15px;
  padding: 4px;
  box-shadow: var(--sh-md);
  flex: 0 0 auto;
}

.platforms__phone--back {
  width: 82px;
  height: 138px;
  margin-right: -32px;
  transform: rotate(-9deg) translateY(6px);
  opacity: .92;
  z-index: 1;
}

.platforms__phone--front {
  width: 96px;
  height: 162px;
  z-index: 2;
  box-shadow: var(--sh-lg);
}

/* purple app header */
.platforms__apphead {
  position: relative;
  height: 40px;
  flex: 0 0 auto;
  background: var(--grad-brand);
  border-radius: 0 0 10px 10px;
  padding: 9px 8px 0;
}
.platforms__apphead-brand {
  display: block;
  width: 34px; height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9);
}
.platforms__apphead-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}
.platforms__apphead-search {
  position: absolute;
  left: 8px; right: 8px; bottom: -8px;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

/* listing card */
.platforms__listing {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 17px 8px 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-xs);
}
.platforms__listing-thumb {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-200) 0%, var(--brand-50) 100%);
}
.platforms__listing-lines { flex: 1 1 auto; min-width: 0; }

/* category icon grid */
.platforms__cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 8px 0;
}
.platforms__cat {
  height: 20px;
  border-radius: 6px;
  background: var(--brand-50);
  border: 1px solid var(--line-soft);
  position: relative;
}
.platforms__cat::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-radius: 2.5px;
  background: var(--brand-300);
}
.platforms__cat:nth-child(2)::after { border-radius: 50%; background: var(--brand-400); }
.platforms__cat:nth-child(4)::after { border-radius: 50%; background: var(--brand-200); }
.platforms__cat:nth-child(6)::after { background: var(--brand-400); }

/* ==========================================================================
   Mock 2 — browser + tablet + phone
   ========================================================================== */
.platforms__mock--web {
  width: 262px;
  height: 178px;
}

.platforms__browser {
  position: absolute;
  top: 0;
  left: 22px;
  width: 224px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.platforms__chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.platforms__tl {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
  flex: 0 0 auto;
}
.platforms__tl:nth-child(1) { background: var(--brand-300); }
.platforms__url {
  flex: 1 1 auto;
  height: 6px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
}

.platforms__viewport { padding: 9px; }

.platforms__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.platforms__nav-mark {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-500);
  flex: 0 0 auto;
}
.platforms__nav-links { display: flex; gap: 6px; flex: 1 1 auto; }
.platforms__nav-link {
  width: 18px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.platforms__nav-link:first-child { background: var(--brand-300); }
.platforms__nav-btn {
  width: 26px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  flex: 0 0 auto;
}

.platforms__banner {
  margin-top: 9px;
  padding: 10px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--platforms-lav) 100%);
}
.platforms__banner .platforms__ln--a { background: var(--brand-300); }
.platforms__banner .platforms__ln--b { background: var(--brand-200); margin-bottom: 0; }

.platforms__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.platforms__tile {
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.platforms__tile:nth-child(2) { background: var(--brand-50); }

.platforms__tablet,
.platforms__mini {
  position: absolute;
  background: var(--platforms-bezel);
  border-radius: var(--r-sm);
  padding: 3px;
  box-shadow: var(--sh-lg);
  z-index: 2;
}

.platforms__tablet {
  left: 0;
  bottom: 6px;
  width: 68px;
  height: 54px;
  transform: rotate(-6deg);
}

.platforms__mini {
  right: 6px;
  bottom: 0;
  width: 42px;
  height: 70px;
  border-radius: 10px;
  transform: rotate(6deg);
}

.platforms__tablet .platforms__screen,
.platforms__mini .platforms__screen { border-radius: 6px; }
.platforms__tablet .platforms__sk--head { height: 9px; }
.platforms__mini .platforms__sk--head { height: 10px; }
.platforms__tablet .platforms__sk--w70,
.platforms__tablet .platforms__sk--w45,
.platforms__mini .platforms__sk--w70,
.platforms__mini .platforms__sk--w45 { margin-inline: 6px; }

/* ==========================================================================
   Mock 3 — Laravel admin dashboard
   ========================================================================== */
.platforms__mock--admin { width: 250px; }

.platforms__dash {
  display: flex;
  height: 152px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.platforms__side {
  flex: 0 0 auto;
  width: 36px;
  background: var(--deep-950);
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platforms__side-mark {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-400);
  margin-bottom: 4px;
}
.platforms__side-item {
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
}
.platforms__side-item--on { background: var(--brand-400); width: 80%; }

.platforms__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.platforms__topbar {
  height: 22px;
  flex: 0 0 auto;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.platforms__topbar-title {
  width: 46px; height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9);
}
.platforms__topbar-avatar {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
}

.platforms__panel-body { padding: 9px; }

.platforms__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.platforms__stat {
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
}
.platforms__stat::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px;
  width: 60%; height: 4px;
  border-radius: var(--r-pill);
  background: var(--brand-300);
}
.platforms__stat::after {
  content: "";
  position: absolute;
  left: 5px; bottom: 6px;
  width: 38%; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.platforms__stat:nth-child(2)::before { background: var(--brand-500); }
.platforms__stat:nth-child(3)::before { background: var(--brand-200); }

.platforms__report {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.platforms__ring {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}
.platforms__ring svg { transform: rotate(-90deg); }
.platforms__ring-track {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 6;
}
.platforms__ring-value {
  fill: none;
  stroke: var(--platforms-green-a);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 138.2;
  stroke-dashoffset: 38.7;   /* ≈ 72% */
}
.platforms__ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-900);
}

.platforms__rows {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platforms__row {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.platforms__row:nth-child(1) { width: 92%; background: var(--brand-200); }
.platforms__row:nth-child(2) { width: 74%; }
.platforms__row:nth-child(3) { width: 84%; background: var(--platforms-green-b); }
.platforms__row:nth-child(4) { width: 58%; }

/* ==========================================================================
   Capability chips
   ========================================================================== */
.platforms__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 40px;
  margin-top: 36px;
}

.platforms__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.platforms__chip-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}

.platforms__chip-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-800);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .platforms__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 32px;
  }
  .platforms__title { max-width: 560px; }
  .platforms__intro { padding-top: 0; }

  .platforms__grid { grid-template-columns: minmax(0, 1fr); }
  .platforms__card { max-width: 460px; width: 100%; margin-inline: auto; }

  .platforms__chips { gap: 14px 28px; margin-top: 28px; }
}

@media (max-width: 560px) {
  .platforms__stage { height: 178px; }
  .platforms__mock--web { transform: scale(.94); }
  .platforms__mock--admin { transform: scale(.94); }
  .platforms__chips { gap: 14px 22px; }
  .platforms__chip-icon { width: 26px; height: 26px; }
}

/* ===== sections/07-steps.css ===== */

/* ==========================================================================
   07 — Get Started in Just 3 Easy Steps
   Sits directly on the page background.
   ========================================================================== */

.steps { overflow: hidden; }

.steps__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 56px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   LEFT — deep purple showcase card
   -------------------------------------------------------------------------- */
.steps__showcase { position: relative; min-width: 0; }

.steps__glow {
  position: absolute;
  inset: 26px -22px -30px -22px;
  border-radius: var(--r-2xl);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--brand-500) 45%, transparent),
    color-mix(in srgb, var(--brand-500) 0%, transparent) 78%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}

.steps__panel {
  position: relative;
  z-index: 1;
  background: var(--grad-deep);
  border-radius: var(--r-xl);
  padding: 26px;
  overflow: hidden;              /* clips the phone + anything else */
  box-shadow: var(--sh-lg);
}

/* ---------- admin panel mockup ---------- */
.steps__admin {
  display: flex;
  min-height: 300px;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
  font-family: var(--font-body);
}

/* sidebar */
.steps__side {
  flex: 0 0 34%;
  max-width: 132px;
  background: var(--deep-950);
  padding: 12px 10px 16px;
}

.steps .ql-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  margin-bottom: 12px;
}
.steps .ql-logo__img { height: 13px; }
.steps .ql-logo__word {
  display: none;
  line-height: 1;
}

.steps__cap {
  font-size: 6.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin: 10px 0 5px 4px;
  line-height: 1;
}
.steps__cap:first-of-type { margin-top: 2px; }

.steps__nav { display: grid; gap: 2px; }

.steps__navrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7.5px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .62);
  padding: 4px 5px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.steps__navrow i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
}
.steps__navrow.is-active {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-weight: 600;
}
.steps__navrow.is-active i { background: #fff; }

/* work area */
.steps__work {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface-2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.steps__welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--grad-brand);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.steps__welcome-txt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.5px;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.steps__avatar {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .65);
}

.steps__cards {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 8px;
  min-height: 0;
}

.steps__stat,
.steps__chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px;
  min-width: 0;
}

.steps__stat { display: flex; flex-direction: column; gap: 3px; }
.steps__stat-ic {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  margin-bottom: 3px;
}
.steps__stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-900);
}
.steps__stat-lbl {
  font-size: 7px;
  line-height: 1.3;
  color: var(--ink-400);
}

.steps__chart { display: flex; flex-direction: column; gap: 6px; }
.steps__chart-ttl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8px;
  color: var(--ink-800);
  line-height: 1.2;
}
.steps__chart-svg {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 52px;
  overflow: visible;
}

/* ---------- phone mockup, overlapping bottom-right ---------- */
.steps__phone {
  position: absolute;
  right: -10px;
  bottom: -30px;
  width: 148px;
  border-radius: 22px;
  padding: 5px;
  background: var(--deep-950);
  box-shadow: 0 18px 36px rgba(10, 2, 34, .5);
  border: 1px solid rgba(255, 255, 255, .14);
}
.steps__phone-screen {
  position: relative;
  border-radius: 18px;
  background: var(--surface);
  padding: 16px 9px 10px;
  overflow: hidden;
}
.steps__notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.steps__search {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 8px;
  color: var(--ink-400);
  font-size: 6.5px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.steps__listing {
  display: grid;
  gap: 3px;
  background: var(--ink-900);
  border-radius: var(--r-sm);
  padding: 7px;
  position: relative;
  margin-bottom: 9px;
}
.steps__listing-img {
  display: block;
  height: 32px;
  border-radius: 5px;
  background:
    radial-gradient(60% 80% at 30% 100%, rgba(255, 255, 255, .18), transparent 70%),
    var(--grad-brand);
  margin-bottom: 3px;
}
.steps__listing-tag {
  position: absolute;
  top: 11px;
  right: 11px;
  font-size: 5.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  border-radius: var(--r-pill);
  padding: 2px 5px;
  line-height: 1;
}
.steps__listing-ttl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.5px;
  color: #fff;
  line-height: 1.2;
}
.steps__listing-price {
  font-size: 7px;
  color: var(--brand-200);
  line-height: 1.2;
}

.steps__cat-ttl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.5px;
  color: var(--ink-900);
  margin-bottom: 5px;
  line-height: 1.2;
}
.steps__cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.steps__cat {
  display: block;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.steps__cat:nth-child(1) { background: var(--brand-50); border-color: var(--brand-100); }
.steps__cat:nth-child(5) { background: var(--brand-50); border-color: var(--brand-100); }

/* --------------------------------------------------------------------------
   RIGHT — the three steps
   -------------------------------------------------------------------------- */
.steps__side-col { min-width: 0; }

.steps__list { display: block; }

.steps__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 26px;
}
.steps__item:last-child { padding-bottom: 0; }

/* dashed connector between the badges */
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 4px;
  width: 0;
  border-left: 1.5px dashed var(--brand-200);
}

.steps__badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1.5px solid var(--brand-200);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-500);
  line-height: 1;
  box-shadow: var(--sh-xs);
}

.steps__body { min-width: 0; padding-top: 4px; }

.steps__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.3;
  margin-bottom: 5px;
}

.steps__copy {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 42ch;
}

/* ---------- CTA + store badges ---------- */
.steps__cta { margin-top: 30px; }

.steps__buy:focus-visible,
.steps .ql-store:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
}

.steps__dl {
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
  line-height: 1.4;
}

.steps__stores {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .steps__grid {
    grid-template-columns: 1fr;
    gap: 46px;
    margin-top: 40px;
  }
  .steps__showcase,
  .steps__side-col {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
  }
  .steps__phone { width: 132px; right: -8px; bottom: -26px; }
}

@media (max-width: 560px) {
  .steps__panel { padding: 18px; }
  .steps__admin { min-height: 250px; }
  .steps__side { flex-basis: 38%; max-width: 112px; padding: 10px 8px 12px; }
  .steps__phone { width: 112px; right: -10px; bottom: -22px; border-radius: 18px; }
  .steps__phone-screen { border-radius: 15px; padding: 13px 7px 8px; }
  .steps__cards { grid-template-columns: 1fr; }
  .steps__stat { flex-direction: row; align-items: center; gap: 7px; }
  .steps__stat-ic { margin-bottom: 0; }
  .steps__item { gap: 13px; padding-bottom: 22px; }
  .steps__badge { width: 42px; height: 42px; font-size: 14px; }
  .steps__item:not(:last-child)::before { left: 21px; top: 48px; }
  .steps__stores { gap: 10px; }
  .steps .ql-store { min-width: 138px; padding: 8px 13px; }
}

/* ===== sections/08-grid.css ===== */

/* ==========================================================================
   08 — Grid : twenty feature tiles inside a white panel
   ========================================================================== */

.grid {
  padding-block: var(--section-y);
  position: relative;
}

.grid__panel {
  padding: 64px 40px;
  box-shadow: var(--sh-sm);
}

.grid__head {
  max-width: 720px;
}

.grid__head .ql-h2 {
  letter-spacing: -0.02em;
}

/* ---------- tile grid ---------- */
.grid__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.grid__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 132px;
  padding: 20px 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease;
}

.grid__glyph {
  font-size: 34px;
  line-height: 1;
  display: block;
  margin-bottom: 12px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-body);
}

.grid__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.grid__caption {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* Default-highlighted first tile + hover/focus state */
.grid__tile.is-active,
.grid__tile:hover,
.grid__tile:focus-within {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--sh-sm);
}

.grid__tile:hover {
  transform: translateY(-2px);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grid__panel { padding: 48px 28px; }
  .grid__list { margin-top: 34px; }
}

@media (max-width: 760px) {
  .grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .grid__panel { padding: 36px 18px; }
}

@media (max-width: 460px) {
  .grid__list { gap: 10px; }
  .grid__tile {
    min-height: 116px;
    padding: 16px 10px;
  }
  .grid__glyph { font-size: 27px; margin-bottom: 9px; }
  .grid__title { font-size: 11.5px; }
  .grid__caption { font-size: 10px; line-height: 1.5; }
}

/* ===== sections/09-stats.css ===== */

/* ==========================================================================
   09 — Credibility stats bar
   Deep indigo bar on the page background: 4 badge + label pairs.
   ========================================================================== */

.stats {
  position: relative;
  padding-block: 18px 10px;
}

/* ---------- The bar ---------- */
.stats__bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-deep);
  border-radius: var(--r-xl);
  padding: 30px 40px;
  box-shadow: var(--sh-lg);
}

/* faint white grid overlay (same idea as .ql-grid-bg, tuned for dark) */
.stats__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* soft purple glow, top-right corner */
.stats__glow {
  position: absolute;
  top: -160px;
  right: -120px;
  z-index: -1;
  width: 420px;
  height: 420px;
  pointer-events: none;
  border-radius: var(--r-pill);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-400) 46%, transparent) 0%,
    color-mix(in srgb, var(--brand-500) 16%, transparent) 45%,
    transparent 70%
  );
  filter: blur(6px);
}

/* accessible-only heading — the bar is purely visual in the design */
.stats__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Row ---------- */
.stats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.stats__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-inline: 24px;
}
.stats__item:first-child { padding-inline-start: 0; }
.stats__item:last-child { padding-inline-end: 0; }

/* thin vertical dividers, desktop only */
.stats__item + .stats__item::before {
  content: "";
  position: absolute;
  inset-block: -4px;
  inset-inline-start: 0;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}

/* ---------- Badge ---------- */
.stats__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* ---------- Text ---------- */
.stats__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stats__big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}

.stats__small {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .stats__bar { padding: 26px 28px; }

  .stats__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .stats__item { padding-inline: 0; }
  .stats__item + .stats__item::before { display: none; }
}

@media (max-width: 560px) {
  .stats { padding-block: 12px 6px; }
  .stats__bar { padding: 22px 18px; }

  .stats__row { gap: 18px 12px; }

  .stats__item { gap: 11px; }

  .stats__badge { width: 36px; height: 36px; }
  .stats__badge svg { width: 17px; height: 17px; }

  .stats__big { font-size: 14px; }
  .stats__small { font-size: 11px; }
}

@media (max-width: 380px) {
  .stats__row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== sections/10-explore.css ===== */

/* ==========================================================================
   10 — Explore: platform tabs + screenshot collage.  Sits on --bg.
   ========================================================================== */

.explore { overflow: hidden; }

/* ---------- Top split: heading / lead ---------- */
.explore__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 56px;
  align-items: center;
  margin-bottom: 52px;
}
.explore__title { max-width: 400px; }
.explore__lead { max-width: 540px; }

/* ---------- Lower split: 44% pane / 56% collage ---------- */
.explore__body {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 48px;
  align-items: center;
}

/* ---------- Tab strip ---------- */
.explore__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 26px;
}
.explore__tab {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-700);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.explore__tab:hover { color: var(--brand-600); }
.explore__tab:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.explore__tab.is-active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* ---------- Panels ---------- */
.explore__panel { display: none; }
.explore__panel.is-active { display: block; animation: explore-fade .38s ease both; }

@keyframes explore-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.explore__list { display: grid; gap: 18px; }
.explore__text { display: block; }
.explore__item-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.explore__item-copy {
  display: block;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ---------- Actions ---------- */
.explore__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.explore__buy { padding: 13px 28px; }
.explore__store:focus-visible,
.explore__buy:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }

/* ==========================================================================
   Screenshot collage — pure CSS, no images
   ========================================================================== */
.explore__gallery { min-width: 0; }
.explore__scroll { min-width: 0; }

.explore__collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 26px 18px 34px;
  align-items: start;
}

/* soft overall lift under the whole collage */
.explore__glow {
  position: absolute;
  inset: 12% 4% 6%;
  border-radius: var(--r-2xl);
  background: var(--surface-2);
  box-shadow: var(--sh-lg);
  opacity: .55;
  z-index: 0;
}

.explore__col { position: relative; z-index: 1; display: grid; gap: 14px; }
.explore__col--a { margin-top: 34px; }
.explore__col--b { margin-top: 0; }
.explore__col--c { margin-top: 58px; }

/* ---------- A single mini "screen" card ---------- */
.explore__screen {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  transition: transform .3s ease, box-shadow .3s ease;
}
.explore__col--a .explore__screen { transform: rotate(-1.6deg); }
.explore__col--b .explore__screen { transform: rotate(.7deg); }
.explore__col--c .explore__screen { transform: rotate(1.5deg); }
.explore__collage:hover .explore__screen { transform: rotate(0deg); box-shadow: var(--sh-md); }

/* ---------- Building blocks ---------- */
.explore__sbar { display: flex; align-items: center; gap: 6px; }
.explore__sbar--stack { align-items: center; }

.explore__avatar {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--brand-200);
}
.explore__avatar--lg { width: 22px; height: 22px; background: var(--brand-300); }

.explore__dot {
  flex: 0 0 auto;
  margin-left: auto;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--brand-400);
}

.explore__ln {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.explore__ln--thin { height: 4px; background: var(--line-soft); }
.explore__ln--30 { width: 30%; }
.explore__ln--35 { width: 35%; }
.explore__ln--40 { width: 40%; }
.explore__ln--45 { width: 45%; }
.explore__ln--50 { width: 50%; }
.explore__ln--55 { width: 55%; }
.explore__ln--60 { width: 60%; }
.explore__ln--65 { width: 65%; }
.explore__ln--70 { width: 70%; }
.explore__ln--75 { width: 75%; }
.explore__ln--80 { width: 80%; }
.explore__ln--85 { width: 85%; }

.explore__search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 5px 9px;
  color: var(--brand-400);
}
.explore__search .explore__ln { flex: 0 0 auto; }

.explore__row { display: flex; align-items: center; gap: 7px; }
.explore__rlines { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }

.explore__thumb {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
}
.explore__thumb--brand  { background: var(--grad-brand); }
.explore__thumb--blue   { background: var(--grad-violet); }
.explore__thumb--green  { background: var(--grad-lilac); }
.explore__thumb--orange { background: var(--grad-indigo); }

.explore__photo { border-radius: var(--r-sm); height: 58px; }
.explore__photo--brand { background: var(--grad-brand); height: 76px; }
.explore__photo--blue  { background: var(--grad-violet); }

.explore__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.explore__chip {
  height: 11px;
  width: 26px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.explore__chip--on { background: var(--brand-100); border-color: var(--brand-200); width: 34px; }

/* ---------- Tall brand card with the Q monogram ---------- */
.explore__screen--brand {
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: var(--sh-brand);
  min-height: 262px;
  padding: 22px 16px;
  justify-items: center;
  align-content: center;
  gap: 10px;
}
.explore__mark { width: 96px; height: 96px; margin-bottom: 6px; }
.explore__bln {
  display: block;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
}
.explore__bln--70 { width: 70%; }
.explore__bln--45 { width: 45%; background: rgba(255, 255, 255, .32); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .explore__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .explore__pane { order: 1; }
  .explore__gallery { order: 2; }

  /* collage becomes a horizontally scrollable strip, never shrinks away */
  .explore__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .explore__collage { min-width: 640px; }
  .explore__col--a { margin-top: 24px; }
  .explore__col--c { margin-top: 40px; }
}

@media (max-width: 900px) {
  .explore__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 36px;
  }
  .explore__title { max-width: 520px; }
}

@media (max-width: 560px) {
  .explore__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .explore__tabs::-webkit-scrollbar { display: none; }
  .explore__tab { flex: 0 0 auto; padding: 10px 16px; }

  .explore__actions { gap: 10px; margin-top: 26px; }
  .explore__buy { width: 100%; }
  .explore__store { flex: 1 1 145px; }

  .explore__collage { min-width: 560px; gap: 11px; padding: 20px 14px 26px; }
  .explore__screen--brand { min-height: 224px; }
  .explore__mark { width: 74px; height: 74px; }
}

/* ===== sections/11-screenshots.css ===== */

/* ==========================================================================
   11 — Screenshots gallery (real product captures, tabbed by platform)
   ========================================================================== */

.shots { padding-block: var(--section-y); }

.shots__panel { padding: 64px 40px; }

/* ---------- Tabs ---------- */
.shots__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 30px;
}

.shots__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 9px 20px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.shots__tab:hover { border-color: var(--line); color: var(--brand-600); }
.shots__tab.is-active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.shots__tab:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 3px; }

.shots__count {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-600);
}
.shots__tab.is-active .shots__count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- Panels ---------- */
.shots__body { display: none; }
.shots__body.is-active { display: block; }

.shots__note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-400);
  max-width: 560px;
  margin: 0 auto 26px;
}
.shots__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--brand-600);
}

/* ---------- Grid ---------- */
.shots__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.shots__item { margin: 0; min-width: 0; }

/* Each capture sits in a faux browser window: the bar and its three dots are
   drawn here so the markup stays one <img> per shot. */
.shots__frame {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.shots__frame::before {
  content: "";
  display: block;
  height: 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  background-image:
    radial-gradient(circle, #E4606D 3px, transparent 3.5px),
    radial-gradient(circle, #F0BE4F 3px, transparent 3.5px),
    radial-gradient(circle, #5BC46B 3px, transparent 3.5px);
  background-repeat: no-repeat;
  background-position: 11px center, 25px center, 39px center;
}
.shots__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top center;
}
.shots__frame:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}
.shots__frame:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }

.shots__cap {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-800);
}

/* ---------- Phone frames (Mobile App tab) ---------- */
.shots__grid--phones { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* No browser chrome on a phone, and a much rounder corner. */
.shots__frame--phone { border-radius: 22px; }
.shots__frame--phone::before { display: none; }
.shots__frame--phone img { aspect-ratio: 9 / 19.5; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .shots__panel { padding: 48px 24px; }
  .shots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots__grid--phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .shots__panel { padding: 40px 16px; }
  .shots__grid { grid-template-columns: minmax(0, 1fr); }
  .shots__grid--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots__tabs { gap: 6px; }
  .shots__tab { padding: 8px 14px; font-size: 12px; }
}

/* ===== sections/12-demo.css ===== */

/* ==========================================================================
   12 — Live demo & credentials
   ========================================================================== */

.demo { padding-block: var(--section-y); }

.demo__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
  align-items: stretch;
}

.demo__card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.demo__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

/* The admin card carries the credentials, so it gets the accent treatment. */
.demo__card--primary {
  border-color: var(--brand-200);
  background:
    linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 46%);
  box-shadow: var(--sh-sm);
}

/* ---------- Card head ---------- */
.demo__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.demo__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
}
.demo__card--primary .demo__icon { background: var(--brand-100); }

.demo__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
}

.demo__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--brand-600);
  margin-top: 3px;
  word-break: break-all;
}

.demo__copy {
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.7;
}

/* ---------- Credentials ---------- */
.demo__creds {
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.demo__cred {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.demo__credlabel {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
}

.demo__credvalue {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.demo__credvalue code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink-900);
  word-break: break-all;
}

.demo__copybtn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-500);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.demo__copybtn:hover {
  color: var(--brand-600);
  border-color: var(--brand-200);
  background: var(--brand-50);
}
.demo__copybtn:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
/* main.js flips this class for ~1.4s after a successful copy */
.demo__copybtn.is-copied {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
}

.demo__hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-400);
}

/* ---------- Feature list ---------- */
.demo__list {
  margin: 16px 0 0;
  display: grid;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.demo__list .ql-check__icon { margin-top: 2px; }

/* ---------- CTA pinned to the bottom so cards line up ---------- */
.demo__cta {
  margin-top: auto;
  align-self: flex-start;
}
.demo__creds + .demo__hint + .demo__cta,
.demo__list + .demo__cta { margin-top: 22px; }

.demo__stores {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.demo .ql-store { min-width: 0; flex: 1 1 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .demo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo__card--primary { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .demo__grid { grid-template-columns: minmax(0, 1fr); }
  .demo__card--primary { grid-column: auto; }
  .demo__cta { align-self: stretch; }
}

/* ===== sections/13-tech.css ===== */

/* ==========================================================================
   13 — Technology stack
   ========================================================================== */

.tech { padding-block: var(--section-y); }

.tech__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.tech__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.tech__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

/* The shared backend is what ties the other three together, so it gets the tint. */
.tech__card--accent {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 55%);
}

.tech__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.tech__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
}
.tech__card--accent .tech__icon { background: var(--brand-100); }

.tech__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
}

/* ---------- Stack list ---------- */
.tech__list { display: grid; gap: 10px; }

.tech__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.tech__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.tech__list b {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800);
}
.tech__list span {
  font-size: 11px;
  color: var(--ink-400);
  text-align: right;
  white-space: nowrap;
}

/* ---------- Footnote + requirements ---------- */
.tech__note {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  line-height: 1.75;
}

.tech__req {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.tech__req li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 11.5px;
  color: var(--ink-500);
}
.tech__reqLabel {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-600);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tech__grid { grid-template-columns: minmax(0, 1fr); }
  .tech__req li { width: 100%; justify-content: center; text-align: center; }
}

/* ===== sections/14-install.css ===== */

/* ==========================================================================
   13 — Installation packages (deep panel, links out to the service page)
   ========================================================================== */

.install { padding-block: var(--section-y); }

.install__panel {
  position: relative;
  background: var(--grad-deep);
  border-radius: var(--r-2xl);
  padding: 52px 44px;
  overflow: hidden;
  isolation: isolate;
}

/* Faint white grid + a purple glow, matching the stats bar and footer. */
.install__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.install__panel::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 460px;
  height: 460px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-500) 42%, transparent) 0%, transparent 68%);
}

.install__top {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
}

/* ---------- Intro column ---------- */
.install__eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 12px;
}

.install__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.26;
  color: #fff;
  letter-spacing: -.02em;
}
.install__accent { color: var(--brand-300); }

.install__lead {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .66);
  max-width: 44ch;
}

.install__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.install__metavalue {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.install__metalabel {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

.install__cta { margin-top: 28px; }

/* ---------- Two lists ---------- */
.install__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.install__col {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-lg);
  padding: 22px 20px;
}

.install__colhead {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}

.install__colicon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.install__colicon--yes {
  background: var(--brand-500);
}

.install__list {
  display: grid;
  gap: 9px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.install__list li {
  position: relative;
  padding-left: 15px;
}
.install__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-400);
}

.install__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .install__panel { padding: 40px 26px; }
  .install__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .install__lead { max-width: none; }
}

@media (max-width: 560px) {
  .install__panel { padding: 32px 18px; }
  .install__cols { grid-template-columns: minmax(0, 1fr); }
  .install__meta { gap: 18px; }
  .install__cta { width: 100%; }
}

/* ===== sections/15-payments.css ===== */

/* ==========================================================================
   11 — Payment Gateways  (#payments)
   Sits directly on the page background.
   ========================================================================== */

.payments {
  position: relative;
  padding-block: var(--section-y);
}

.payments__inner {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 56px;
  align-items: center;
}

/* ---------- LEFT: deep purple panel of gateway tiles ---------- */
.payments__panel {
  background: var(--grad-deep);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--sh-lg);
  min-width: 0;
}

.payments__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Final centred row of two tiles spans the whole grid */
.payments__row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.payments__row .payments__tile {
  width: calc((100% - 20px) / 3);
  min-width: 120px;
}

.payments__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding-inline: 8px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.payments__tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.payments__glyph {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--pm, var(--brand-500));
}
.payments__glyph svg { display: block; }

.payments__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--pm, var(--ink-900));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- RIGHT: heading, lead, checklist ---------- */
.payments__copy { min-width: 0; }

.payments__title { max-width: 460px; }

.payments__lead { margin-top: 16px; max-width: 520px; }

.payments__checks {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.payments__check .ql-check__icon { margin-top: 1px; }

.payments__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-800);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .payments__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .payments__panel { order: -1; }        /* panel first */
  .payments__title,
  .payments__lead { max-width: none; }
  .payments__checks { margin-top: 22px; }
}

@media (max-width: 560px) {
  .payments__panel { padding: 14px; }
  .payments__grid { gap: 8px; }
  .payments__row { gap: 8px; }
  .payments__checks { gap: 12px; }
}

@media (max-width: 480px) {
  .payments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payments__row .payments__tile {
    width: calc((100% - 8px) / 2);
    min-width: 0;
  }
}

/* ===== sections/16-categories.css ===== */

/* ==========================================================================
   12 — Categories : logo lockup + fading field of category pills
   ========================================================================== */

.categories {
  padding-block: var(--section-y);
  position: relative;
}

.categories__panel {
  position: relative;
  overflow: hidden;
  padding: 64px 40px;
  box-shadow: var(--sh-sm);
}

/* Large soft purple radial glow bleeding up from the bottom edge.
   Alpha ramps derived from --brand-500 / --brand-400 via color-mix. */
.categories__glow {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 128%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--brand-500) 30%, transparent) 0%,
      color-mix(in srgb, var(--brand-400) 18%, transparent) 42%,
      color-mix(in srgb, var(--brand-400) 7%, transparent) 66%,
      color-mix(in srgb, var(--brand-400) 0%, transparent) 100%);
}

.categories__inner {
  position: relative;
  z-index: 1;
}

.categories__head {
  max-width: 700px;
}

/* ---------- logo lockup, scaled up ---------- */
.categories__stage {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categories .ql-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}

.categories .ql-logo__img { height: 56px; }

.categories .ql-logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

.categories .ql-logo:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 6px;
  border-radius: var(--r-sm);
}

/* ---------- chip rows ---------- */
.categories__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 880px;
  margin-bottom: 12px;
}

/* slight horizontal offset per row so the chips interlock */
.categories__row--1 { transform: translateX(0); }
.categories__row--2 { transform: translateX(-26px); }
.categories__row--3 { transform: translateX(20px); }
.categories__row--4 { transform: translateX(-14px); margin-bottom: 0; }

.categories__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  box-shadow: var(--sh-xs);
  transition: transform .2s ease, box-shadow .2s ease,
              opacity .2s ease, border-color .2s ease;
}

/* rows further from the centre fade into the glow */
.categories__row--1 .categories__chip { opacity: 1; }
.categories__row--2 .categories__chip { opacity: .85; }
.categories__row--3 .categories__chip { opacity: .6; }
.categories__row--4 .categories__chip { opacity: .38; }

.categories__chip:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

.categories__glyph {
  font-size: 14px;
  line-height: 1;
}

.categories__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-800);
  white-space: nowrap;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .categories__panel { padding: 52px 26px; }
  .categories__stage { margin-top: 38px; }

  .categories .ql-logo__img { height: 44px; }
  .categories .ql-logo { margin-bottom: 28px; }

  .categories__row--2 { transform: translateX(-14px); }
  .categories__row--3 { transform: translateX(12px); }
  .categories__row--4 { transform: translateX(-8px); }
}

@media (max-width: 700px) {
  /* keep only the first three rows on small screens */
  .categories__row--4 { display: none; }
  .categories__row--3 { margin-bottom: 0; }

  .categories__chip { padding: 7px 13px; gap: 6px; }
  .categories__label { font-size: 12px; }
}

@media (max-width: 560px) {
  .categories__panel { padding: 42px 18px; }
  .categories__glow { width: 170%; bottom: -34%; }

  .categories .ql-logo__img { height: 36px; }
  .categories .ql-logo { margin-bottom: 24px; }

  .categories__row { gap: 9px; margin-bottom: 9px; }
  .categories__row--1,
  .categories__row--2,
  .categories__row--3 { transform: none; }
}

/* ===== sections/17-footer.css ===== */

/* ==========================================================================
   13 — Footer
   Deep indigo panel with rounded top corners: brand column + 3 link columns,
   divider, then legal bar with store badges.
   ========================================================================== */

.footer {
  position: relative;
  padding-block: var(--section-y) 0;
}

/* ---------- The panel ---------- */
.footer__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-deep);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 54px 52px 26px;
  box-shadow: var(--sh-lg);
}

/* faint white grid overlay */
.footer__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* purple radial glow, top-left */
.footer__glow {
  position: absolute;
  top: -190px;
  left: -140px;
  z-index: -1;
  width: 460px;
  height: 460px;
  pointer-events: none;
  border-radius: var(--r-pill);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-400) 46%, transparent) 0%,
    color-mix(in srgb, var(--brand-500) 16%, transparent) 45%,
    transparent 70%
  );
  filter: blur(6px);
}

/* the panel is a landmark, not a visual headline */
.footer__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Upper grid ---------- */
.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px 30px;
  align-items: start;
}

/* ---------- Column 1: brand ---------- */
.footer__brand { min-width: 0; }

.footer .ql-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;                       /* drives the mark's currentColor */
}
.footer .ql-logo__img { height: 30px; }
.footer .ql-logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}
.footer .ql-logo:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.footer__blurb {
  margin-top: 16px;
  max-width: 330px;
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .6);
}

/* social row */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.footer__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.footer__soc:hover { background: var(--brand-500); transform: translateY(-2px); }
.footer__soc:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
}

/* ---------- Columns 2–4: links ---------- */
.footer__col { min-width: 0; }

.footer__ch {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.4;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 14px;
}

.footer__links { display: grid; gap: 9px; }

.footer__links a {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  transition: color .18s ease;
}
.footer__links a:hover { color: #fff; }
.footer__links a:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: 4px;
  color: #fff;
}

/* ---------- Divider ---------- */
.footer__divider {
  display: block;
  height: 1px;
  margin-block: 38px 20px;
  background: rgba(255, 255, 255, .12);
}

/* ---------- Bottom bar ---------- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 26px;
}

.footer__copy {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.footer__legal a {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
  transition: color .18s ease;
}
.footer__legal a:hover { color: #fff; }
.footer__legal a:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: 4px;
  color: #fff;
}

/* ---------- Store badges, restyled for the dark panel ---------- */
.footer__stores { display: flex; flex-wrap: wrap; gap: 10px; }

.footer .ql-store.footer__store {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  padding: 6px 13px;
  min-width: 132px;
  gap: 8px;
  transition: background .2s ease, border-color .2s ease, transform .18s ease;
}
.footer .ql-store.footer__store:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}
.footer .ql-store.footer__store:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
}
.footer .ql-store.footer__store .ql-store__top { font-size: 7.5px; opacity: .7; }
.footer .ql-store.footer__store .ql-store__name { font-size: 13px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .footer__panel { padding: 40px 30px 22px; }

  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__blurb { max-width: 460px; }

  .footer__divider { margin-block: 30px 18px; }

  .footer__bottom { gap: 14px 20px; }
}

@media (max-width: 560px) {
  .footer__panel { padding: 32px 20px 20px; }

  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .footer__brand { grid-column: auto; }

  .footer .ql-logo__img { height: 27px; }
  .footer__blurb { margin-top: 14px; }

  .footer__divider { margin-block: 26px 18px; }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer__legal { justify-content: center; }
  .footer__stores { justify-content: center; }
}