/* ══════════════════════════════════════════════════════════════════
   Wasla — PUBLIC LANDING redesign (feat/landing-redesign)
   Premium, marketing-grade layer that sits ON TOP of hero_banner.css.

   Owner-directed evolution (see Docs/design/brand_identity_v2.md):
   for the LANDING ONLY, the C17 "glass demoted / flat-only" rule is
   superseded — we layer aurora/mesh gradients, frosted glass surfaces,
   and motion. The navy / electric-blue / gold DNA + the v2 palette are
   preserved; every colour is a --wasla-* token (no hardcoded hex except
   on the already-navy hero band where white text is intrinsic).

   Hard rules honoured throughout this file:
   - Logical properties only (margin-inline / inset-inline / padding-inline
     / text-align:start). No bare left/right in new rules.
   - Tokens consumed (light/dark flips automatically via [data-bs-theme]).
   - Every animation is gated behind
     @media (prefers-reduced-motion: no-preference) and/or neutralised in
     the reduce block at the foot of this file.
   - Scroll-reveal default state is VISIBLE: content shows with no JS.
   ══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------
 * 0. Local helper tokens (derived from the design system).
 * ------------------------------------------------------------------ */
.wasla-hero,
.wasla-trust,
.wasla-how,
.wasla-marketing,
.wasla-faq {
  --ln-section-gap: clamp(3rem, 7vw, 6rem);
  --ln-glass-bg: var(--surface-glass-bg);
  --ln-glass-border: var(--surface-glass-border);
}

/* ==================================================================
 * 1. HERO — layered aurora/mesh background + glass demo card.
 * ================================================================== */

/* QA DEF-2 (2026-06-19): the hero band full-bleeds via margin-inline:
   calc(50% - 50vw) (= 100vw). Because `vw` includes the vertical scrollbar
   width, the band is ~scrollbar-width wider than the content area, producing a
   small horizontal scrollbar at tablet/desktop widths. Clip the viewport's
   horizontal overflow: the band still bleeds to the visible edge; only the
   sub-pixel scrollbar overshoot is clipped (verified: page no longer
   horizontally scrollable). `clip` (not `hidden`) so it never establishes a
   scroll container that would break sticky elements. This file loads only on
   the landing, so the rule is effectively landing-scoped. (`.wasla-body`/body
   does NOT work here: `clip` does not propagate body->viewport.) */
html {
  overflow-x: clip;
}

/* Re-skin the existing navy band into a layered aurora surface. The
   .wasla-hero__band class is consumed by the parent template; we only
   extend its painting. */
.wasla-hero__band {
  /* Aurora mesh: navy base + electric-blue + gold radial glows.
     isolation:isolate so the ::before/::after blobs compose locally. */
  isolation: isolate;
  background:
    radial-gradient(60% 75% at 18% 12%, rgba(5, 87, 231, 0.42) 0%, rgba(5, 87, 231, 0) 60%),
    radial-gradient(55% 60% at 88% 8%, rgba(212, 175, 54, 0.26) 0%, rgba(212, 175, 54, 0) 55%),
    radial-gradient(70% 90% at 75% 95%, rgba(5, 87, 231, 0.30) 0%, rgba(5, 87, 231, 0) 60%),
    linear-gradient(155deg, var(--wasla-navy) 0%, var(--wasla-navy-deep) 100%);
}

/* Subtle dot-grid overlay over the aurora (decorative, no contrast hit). */
.wasla-hero__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* Two soft drifting glow blobs. Static by default; drift only when motion
   is allowed (rule lives in the no-preference block). */
.wasla-hero__band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -18%;
  inset-inline-end: -8%;
  inline-size: 42vw;
  block-size: 42vw;
  max-inline-size: 560px;
  max-block-size: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 87, 231, 0.45) 0%, rgba(5, 87, 231, 0) 68%);
  filter: blur(8px);
  pointer-events: none;
}

/* A second blob, attached to the inner wrapper so it sits behind the copy. */
.wasla-hero__band .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -30%;
  inset-inline-start: -12%;
  inline-size: 38vw;
  block-size: 38vw;
  max-inline-size: 460px;
  max-block-size: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 54, 0.30) 0%, rgba(212, 175, 54, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* Hero layout: copy column + a single VISUAL column. The glass visual-search
   demo card is the focal point; the mascot is a small supporting companion
   tucked at the foot of the card so the two read as one composed unit rather
   than three competing columns. */
.wasla-hero__layout {
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 992px) {
  /* Text column keeps a comfortable cap; the visual column takes the rest. */
  .wasla-hero__layout .wasla-hero__inner {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  /* Visual column: a relatively-positioned stack so the mascot can nestle
     against the demo card's lower-outer corner as a companion motif. */
  .wasla-hero__visual {
    position: relative;
    flex: 0 0 clamp(340px, 34vw, 420px);
    display: flex;
    justify-content: center;
  }
  /* The mascot is a small accent INSIDE the demo card, tucked at the card's
     TOP inline-END inner corner (the head row has clear space opposite the
     "Visual search" label). Fully within the card bounds — not floating over
     the hero. RTL-safe via logical properties. */
  .wasla-hero__visual .wasla-mascot-slot {
    position: absolute;
    inset-block-start: 1.15rem;
    inset-inline-end: 1rem;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 14px;
    flex: 0 0 auto;
    z-index: 3;
    pointer-events: none;
  }
  .wasla-hero__visual .wasla-mascot-slot img {
    inline-size: clamp(34px, 2.8vw, 42px);
    max-inline-size: 42px;
    filter: drop-shadow(0 5px 12px rgba(5, 16, 35, 0.4));
  }
}

/* Kicker → title → subtitle → CTA fluid type refinements. */
.wasla-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wasla-hero__title {
  font-size: clamp(2.35rem, 5.2vw, 3.65rem);
  letter-spacing: -0.02em;
}

.wasla-hero__subtitle {
  color: var(--wasla-navy-tint);
}

/* Primary CTA: electric fill + hover sheen + lift. The sheen is a moving
   highlight pseudo-element; it is disabled under reduced motion. */
.wasla-hero__btn--primary {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-elev-3);
  transition: transform var(--motion-hover), box-shadow var(--motion-hover);
}

.wasla-hero__btn--primary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -150%;
  inline-size: 60%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
}

.wasla-hero__btn--primary:hover,
.wasla-hero__btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev-4);
}

/* Mascot gentle float (anonymous + decorative). */
.wasla-mascot-slot img {
  will-change: transform;
}

/* ---- The AI visual-search glass demo card (decorative, aria-hidden) ----
   The hero focal point: a prominent frosted-glass card on the navy band. It
   uses a fixed light-glass tint (not the theme token) so it stays a bright,
   premium frosted panel on the always-navy hero in BOTH themes. */
.wasla-hero__demo {
  position: relative;
  inline-size: 100%;
  max-inline-size: 400px;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  /* Fixed frosted tint over the navy band — bright in both themes. */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 18px 48px rgba(5, 14, 33, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
}

.wasla-hero__demo-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.wasla-hero__demo-dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--wasla-gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 54, 0.28);
}

/* The image tile being "analysed". A vivid AI-tint gradient so the scan reads. */
.wasla-hero__demo-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(5, 87, 231, 0.55) 0%, rgba(13, 32, 64, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  margin-bottom: 0.8rem;
}

.wasla-hero__demo-tile i {
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Analysing shimmer sweep across the tile (motion-gated). */
.wasla-hero__demo-scan {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  inline-size: 40%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* A horizontal "analysing" scan-line that travels down the tile (motion-gated). */
.wasla-hero__demo-scanline {
  position: absolute;
  inset-inline: 6%;
  inset-block-start: 0;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(212, 175, 54, 0) 0%, var(--wasla-gold) 50%, rgba(212, 175, 54, 0) 100%);
  box-shadow: 0 0 10px 1px rgba(212, 175, 54, 0.7);
  opacity: 0;
  pointer-events: none;
}

/* The matched product card that "appears". Visible by default (no-JS safe). */
.wasla-hero__demo-match {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  background: var(--wasla-surface);
  border: 1px solid var(--wasla-line);
  box-shadow: var(--shadow-elev-1);
}

.wasla-hero__demo-thumb {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--wasla-blue) 0%, var(--wasla-gold) 130%);
  flex-shrink: 0;
}

.wasla-hero__demo-meta {
  min-inline-size: 0;
}

.wasla-hero__demo-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--wasla-ink);
  line-height: 1.2;
}

.wasla-hero__demo-sub {
  font-size: 0.72rem;
  color: var(--wasla-muted);
}

.wasla-hero__demo-badge {
  margin-inline-start: auto;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--wasla-success-soft);
  color: var(--wasla-success);
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  /* Below desktop the hero reads as a single text column; the decorative
     visual column (demo card + companion mascot) is removed. */
  .wasla-hero__visual {
    display: none;
  }
}

/* ==================================================================
 * 2. Shared glass surface + gradient icon chip (cards / panels).
 * ================================================================== */

/* Lift the white feature cards into elevated FROSTED-GLASS surfaces with a
   hover lift + brand ring. hero_banner.css paints these opaque white; we
   override to a translucent off-white tint + a visible 1px glass border +
   layered elevation so — over the tinted canvas above — they read as
   premium frosted panels rather than flat white boxes. We keep the existing
   class names. The @supports opaque fallback (section 13) covers no-blur. */
.wasla-hero__feature,
.wasla-how__card {
  border-radius: var(--radius-lg);
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  /* QA DEF-3 (2026-06-19): lift the base elevation one step (elev-2 -> elev-3)
     so light-mode glass cards read as elevated frosted panels, not flat boxes. */
  box-shadow: var(--shadow-elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--motion-card), box-shadow var(--motion-card),
    border-color var(--motion-card);
}

.wasla-hero__feature:hover,
.wasla-how__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev-4);
  border-color: var(--ring-brand-strong);
}

/* Gradient icon chip (electric → gold) on feature + how cards + marketing. */
.wasla-feature-card__icon,
.wasla-how__step,
.wasla-marketing__icon {
  background: linear-gradient(135deg, var(--wasla-blue) 0%, var(--wasla-gold) 140%);
  color: var(--wasla-on-brand);
  box-shadow: 0 4px 12px var(--ring-brand-soft);
}

.wasla-feature-card__icon svg {
  stroke: var(--wasla-on-brand);
}

/* ==================================================================
 * 3. TRUST BAND — glass pills, optional gentle marquee.
 * ================================================================== */
.wasla-trust-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.wasla-trust-band__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wasla-ink);
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  box-shadow: var(--shadow-elev-1);
  transition: transform var(--motion-hover), box-shadow var(--motion-hover);
}

.wasla-trust-band__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev-2);
}

.wasla-trust-band__item i {
  color: var(--wasla-blue);
  font-size: 1.1rem;
}

/* ==================================================================
 * 4. SECTION RHYTHM + depth transitions between bands.
 *
 * LIGHT-MODE GLASS FIX (feat/landing-design-pass): glass over a flat white
 * page is invisible. We give the light marketing/feature bands a NON-FLAT
 * tinted canvas — a soft navy/blue aurora mesh + a faint dot-grid — so the
 * frosted surfaces on top of them have something to blur and read as
 * elevated panels rather than plain white boxes. In DARK mode the canvas
 * token is already a deep navy with depth, so the mesh is toned down there.
 * ================================================================== */
.wasla-trust,
.wasla-how,
.wasla-faq,
.wasla-hero {
  position: relative;
  isolation: isolate;
}

.wasla-trust,
.wasla-how,
.wasla-faq {
  background:
    radial-gradient(58% 70% at 14% 0%, rgba(5, 87, 231, 0.14) 0%, rgba(5, 87, 231, 0) 60%),
    radial-gradient(52% 64% at 92% 18%, rgba(212, 175, 54, 0.10) 0%, rgba(212, 175, 54, 0) 58%),
    radial-gradient(60% 80% at 78% 100%, rgba(5, 87, 231, 0.12) 0%, rgba(5, 87, 231, 0) 60%),
    var(--wasla-canvas);
}

/* Faint dot-grid texture under the light bands so frosted glass has a
   substrate to refract. Decorative; masked so it fades at the edges. */
.wasla-trust::before,
.wasla-how::before,
.wasla-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--ln-dotgrid, rgba(29, 58, 94, 0.09)) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}

/* The feature-card row sits between the navy hero band and the trust band on
   the page (in the main container). Give that strip the same tinted canvas so
   its cards read as frosted glass, not flat white floating on plain white. */
.wasla-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: calc(50% - 50vw);
  inset-block-start: 0;
  block-size: 100%;
  background:
    radial-gradient(46% 40% at 86% 78%, rgba(5, 87, 231, 0.06) 0%, rgba(5, 87, 231, 0) 60%),
    radial-gradient(40% 36% at 8% 88%, rgba(212, 175, 54, 0.05) 0%, rgba(212, 175, 54, 0) 60%);
  pointer-events: none;
}

/* In dark mode the canvas is already a deep navy with depth; soften the
   light-tuned mesh so it doesn't muddy the dark surface. */
[data-bs-theme="dark"] .wasla-trust,
[data-bs-theme="dark"] .wasla-how,
[data-bs-theme="dark"] .wasla-faq {
  --ln-dotgrid: rgba(255, 255, 255, 0.035);
  background:
    radial-gradient(58% 70% at 14% 0%, rgba(60, 123, 240, 0.10) 0%, rgba(60, 123, 240, 0) 60%),
    radial-gradient(60% 80% at 80% 100%, rgba(60, 123, 240, 0.08) 0%, rgba(60, 123, 240, 0) 60%),
    var(--wasla-canvas);
}

/* Marketing navy band keeps its aurora flavour for a premium transition. */
.wasla-marketing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(50% 60% at 80% 0%, rgba(5, 87, 231, 0.30) 0%, rgba(5, 87, 231, 0) 60%),
    radial-gradient(50% 55% at 12% 100%, rgba(212, 175, 54, 0.18) 0%, rgba(212, 175, 54, 0) 60%),
    linear-gradient(180deg, var(--wasla-navy) 0%, var(--wasla-navy-deep) 100%);
}

/* Marketing cards/panels → glass on the navy band. */
.wasla-marketing__card,
.wasla-marketing__panel,
.wasla-marketing__step,
.wasla-marketing__cta {
  border-radius: var(--radius-lg);
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  box-shadow: var(--shadow-elev-3);
  transition: transform var(--motion-card), box-shadow var(--motion-card),
    border-color var(--motion-card);
}

.wasla-marketing__card:hover,
.wasla-marketing__panel:hover,
.wasla-marketing__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev-4);
  border-color: var(--ring-brand-strong);
}

/* Category chips → glowing pills on the navy band. These carry WHITE text,
   so they must NOT use the light glass tint (white-on-light fails AA). Use a
   light-translucent-on-navy frost (a subtle white veil over the navy band)
   so the pill reads as frosted glass while keeping white text at AA. */
.wasla-marketing__category {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  border-radius: 999px;
  color: var(--wasla-on-brand);
  transition: transform var(--motion-hover), box-shadow var(--motion-hover),
    background-color var(--motion-hover), border-color var(--motion-hover);
}

.wasla-marketing__category:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 6px 16px var(--ring-brand-strong);
}

/* The visual-search 2-step explainer → animated mini-demo accent.
   A pulsing ring on each step number when motion is allowed. */
.wasla-marketing__step-num {
  position: relative;
}

/* ==================================================================
 * 4b. VERTICAL RHYTHM — kill the empty bands (feat/landing-design-pass).
 *
 * The marketing/FAQ bands had large empty vertical gaps (loose section
 * padding + big inter-block margins) so the page read as disconnected
 * slabs. Tighten + normalise the rhythm to an intentional 8-pt cadence so
 * the page is a continuous composition. We scope to the landing sections so
 * no other page is affected, and use clamp()s that breathe on large screens
 * without leaving dead air on smaller ones.
 * ================================================================== */

/* Consistent section padding across the marketing bands (overrides the
   ad-hoc Bootstrap py-* utilities that produced uneven gaps). */
.wasla-how > .container,
.wasla-faq > .container {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.wasla-marketing > .container {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.wasla-trust > .container {
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
}

/* Pull the feature-card row's trailing gap in a touch so the trust band
   follows without a dead strip. */
.wasla-hero__cards {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Tighten the spacing between the marketing sub-blocks. The template uses
   mb-4 / mt-5 utilities that open ~3rem gaps; normalise to a calmer cadence
   so the navy band reads as one composition, not stacked slabs. */
.wasla-marketing .row + .wasla-marketing__header,
.wasla-marketing .wasla-marketing__cta + .row {
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}
.wasla-marketing__header {
  margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
.wasla-marketing__categories {
  margin-block-start: clamp(0.5rem, 1.5vw, 1rem);
}
/* The product-type header uses mt-5 (3rem) — calm it to the section cadence. */
.wasla-marketing__header.mt-5 {
  margin-block-start: clamp(2rem, 4vw, 3rem) !important;
}

/* ==================================================================
 * 5. FAQ — restyled Bootstrap accordion, glass items.
 * ================================================================== */
.wasla-faq__accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--surface-glass-border);
  --bs-accordion-active-bg: transparent;
  display: grid;
  gap: 0.75rem;
}

.wasla-faq__accordion .accordion-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  box-shadow: var(--shadow-elev-1);
  transition: box-shadow var(--motion-hover);
}

.wasla-faq__accordion .accordion-item:hover {
  box-shadow: var(--shadow-elev-2);
}

.wasla-faq__accordion .accordion-button {
  background: transparent;
  font-weight: 700;
  color: var(--wasla-ink);
}

.wasla-faq__accordion .accordion-button:not(.collapsed) {
  color: var(--wasla-blue);
  box-shadow: none;
}

.wasla-faq__accordion .accordion-button:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--ring-brand-strong);
}

.wasla-faq__accordion .accordion-body {
  color: var(--wasla-body);
}

/* ==================================================================
 * 6. NAVBAR scroll glass + animated link underline (hook-driven).
 *    landing.js adds `is-scrolled` to the navbar past a threshold.
 * ================================================================== */
.brand-navbar {
  transition: background-color var(--motion-card), box-shadow var(--motion-card),
    -webkit-backdrop-filter var(--motion-card), backdrop-filter var(--motion-card);
}

.brand-navbar.is-scrolled {
  background: var(--surface-glass-bg-dark, rgba(22, 34, 60, 0.78));
  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
  box-shadow: var(--shadow-elev-3);
}

/* ==================================================================
 * 7. Scroll-progress bar + back-to-top (created by landing.js).
 *    Both are progressive enhancements — absent without JS.
 * ================================================================== */
.wasla-scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  inline-size: 100%;
  transform: scaleX(0);
  /* transform-origin has no logical keyword; LTR fills from the left edge.
     The RTL rule below flips the anchor to the right (the inline-start edge
     in RTL) so the bar always grows from the reading-start side. */
  transform-origin: left center;
  background: linear-gradient(90deg, var(--wasla-blue) 0%, var(--wasla-gold) 100%);
  z-index: 1080;
  pointer-events: none;
}

/* RTL: progress fills from the right (inline-start) edge. */
[dir="rtl"] .wasla-scroll-progress {
  transform-origin: right center;
}

.wasla-back-to-top {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--wasla-blue);
  color: var(--wasla-on-brand);
  font-size: 1.2rem;
  box-shadow: var(--shadow-elev-3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--motion-hover), transform var(--motion-hover),
    visibility var(--motion-hover), background-color var(--motion-hover);
  z-index: 1080;
}

.wasla-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wasla-back-to-top:hover,
.wasla-back-to-top:focus-visible {
  background: var(--wasla-blue-hover);
}

/* ==================================================================
 * 8. Scroll-reveal — DEFAULT VISIBLE. JS opts INTO the hidden→shown
 *    animation only when motion is allowed (adds `.reveal-ready`).
 * ================================================================== */
.reveal {
  /* No-JS / reduced-motion: fully visible, no transform. */
}

/* When JS confirms motion is allowed it marks the document and primes the
   start state; the IntersectionObserver then adds .is-visible.
   Gentle delta: start at a readable 0.12 opacity (never fully blank) and a
   small 12px lift, so even a mid-transition or just-triggering element reads
   as "settling in" rather than empty. */
.reveal-ready .reveal {
  opacity: 0.12;
  transform: translateY(12px);
  transition: opacity 460ms cubic-bezier(0.2, 0, 0.1, 1),
    transform 460ms cubic-bezier(0.2, 0, 0.1, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Small intra-row stagger so siblings cascade rather than pop together.
   Scoped to direct reveal siblings inside a grid/row column or list. */
.reveal-ready .wasla-hero__cards .reveal:nth-child(2),
.reveal-ready .row > [class*="col-"]:nth-child(2) .reveal,
.reveal-ready .wasla-trust-band .reveal:nth-child(2) {
  transition-delay: 80ms;
}
.reveal-ready .wasla-hero__cards .reveal:nth-child(3),
.reveal-ready .row > [class*="col-"]:nth-child(3) .reveal,
.reveal-ready .wasla-trust-band .reveal:nth-child(3) {
  transition-delay: 160ms;
}
.reveal-ready .row > [class*="col-"]:nth-child(4) .reveal,
.reveal-ready .wasla-trust-band .reveal:nth-child(4) {
  transition-delay: 240ms;
}

/* Hero staggered entrance — same opt-in pattern. */
.reveal-ready .wasla-hero__inner > * {
  opacity: 0;
  transform: translateY(14px);
  animation: wasla-fade-up 620ms cubic-bezier(0.2, 0, 0.1, 1) forwards;
}

.reveal-ready .wasla-hero__inner > *:nth-child(1) { animation-delay: 60ms; }
.reveal-ready .wasla-hero__inner > *:nth-child(2) { animation-delay: 140ms; }
.reveal-ready .wasla-hero__inner > *:nth-child(3) { animation-delay: 220ms; }
.reveal-ready .wasla-hero__inner > *:nth-child(4) { animation-delay: 300ms; }
.reveal-ready .wasla-hero__inner > *:nth-child(5) { animation-delay: 380ms; }
.reveal-ready .wasla-hero__inner > *:nth-child(6) { animation-delay: 460ms; }

.reveal-ready .wasla-hero__demo {
  opacity: 0;
  animation: wasla-fade-up 760ms cubic-bezier(0.2, 0, 0.1, 1) 320ms forwards;
}

/* ==================================================================
 * 9. Keyframes (only ever applied inside no-preference contexts or via
 *    .reveal-ready, which JS sets only when motion is allowed).
 * ================================================================== */
@keyframes wasla-fade-up {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wasla-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes wasla-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-24px, 22px); }
}

@keyframes wasla-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -18px); }
}

@keyframes wasla-scan {
  0% { inset-inline-start: -45%; }
  60%, 100% { inset-inline-start: 105%; }
}

@keyframes wasla-match-in {
  0%, 35% { opacity: 0; transform: translateY(8px); }
  55%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes wasla-scanline {
  0% { inset-block-start: 4%; opacity: 0; }
  15% { opacity: 1; }
  50% { inset-block-start: 92%; opacity: 1; }
  60%, 100% { inset-block-start: 92%; opacity: 0; }
}

@keyframes wasla-pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--ring-brand-strong); }
  70% { box-shadow: 0 0 0 10px rgba(5, 87, 231, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 87, 231, 0); }
}

/* ==================================================================
 * 10. MOTION — only animate when the user allows it.
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .wasla-hero__band::after {
    animation: wasla-drift-a 14s ease-in-out infinite;
  }
  .wasla-hero__band .container::before {
    animation: wasla-drift-b 18s ease-in-out infinite;
  }
  .wasla-mascot-slot img {
    animation: wasla-float 6s ease-in-out infinite;
  }
  .wasla-hero__btn--primary:hover::after,
  .wasla-hero__btn--primary:focus-visible::after {
    animation: wasla-sheen 900ms ease-out;
  }
  .wasla-hero__demo-scan {
    animation: wasla-scan 3.2s ease-in-out infinite;
  }
  .wasla-hero__demo-scanline {
    animation: wasla-scanline 3.2s ease-in-out infinite;
  }
  .wasla-hero__demo-match {
    animation: wasla-match-in 3.2s ease-in-out infinite;
  }
  .wasla-marketing__step-num::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: wasla-pulse-ring 2.8s ease-out infinite;
  }
}

@keyframes wasla-sheen {
  0% { inset-inline-start: -150%; }
  100% { inset-inline-start: 150%; }
}

/* ------------------------------------------------------------------
 * 11. REDUCED MOTION — neutralise EVERYTHING. Content static + visible.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wasla-hero__band::after,
  .wasla-hero__band .container::before,
  .wasla-mascot-slot img,
  .wasla-hero__demo-scan,
  .wasla-hero__demo-scanline,
  .wasla-hero__demo-match,
  .wasla-marketing__step-num::after,
  .reveal-ready .wasla-hero__inner > *,
  .reveal-ready .wasla-hero__demo,
  .reveal-ready .reveal,
  .wasla-hero__btn--primary::after {
    animation: none !important;
    transition: none !important;
  }
  /* Force the opt-in entrance state back to fully visible. */
  .reveal-ready .reveal,
  .reveal-ready .wasla-hero__inner > *,
  .reveal-ready .wasla-hero__demo {
    opacity: 1 !important;
    transform: none !important;
  }
  .wasla-hero__demo-scan,
  .wasla-hero__demo-scanline {
    display: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------
 * 12. DARK-MODE polish for the new surfaces (glass already flips via
 *     tokens; these add depth where a flat token isn't enough).
 * ------------------------------------------------------------------ */
[data-bs-theme="dark"] .wasla-trust-band__item,
[data-bs-theme="dark"] .wasla-faq__accordion .accordion-item {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* The hero demo card sits on the always-navy hero band, so its fixed frosted
   tint + shadow read correctly in both themes; deepen the shadow in dark. */
[data-bs-theme="dark"] .wasla-hero__demo {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .wasla-marketing__card,
[data-bs-theme="dark"] .wasla-marketing__panel,
[data-bs-theme="dark"] .wasla-marketing__step,
[data-bs-theme="dark"] .wasla-marketing__cta {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* The marketing glass cards on a navy band: in dark the glass tint is
   navy, so card heading text must stay light. */
[data-bs-theme="dark"] .wasla-marketing__card h3,
[data-bs-theme="dark"] .wasla-marketing__panel-title,
[data-bs-theme="dark"] .wasla-marketing__cta-title,
[data-bs-theme="dark"] .wasla-marketing__step .fw-bold {
  color: var(--wasla-heading);
}

/* ------------------------------------------------------------------
 * 13. @supports fallback — when backdrop-filter is unsupported the glass
 *     tokens already fall back to opaque (tokens.css). Ensure text on the
 *     marketing navy band stays readable on the opaque white fallback.
 * ------------------------------------------------------------------ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wasla-marketing__card,
  .wasla-marketing__panel,
  .wasla-marketing__step,
  .wasla-marketing__cta,
  .wasla-hero__demo,
  .wasla-trust-band__item {
    background: var(--wasla-surface);
  }
  .wasla-marketing__category {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ------------------------------------------------------------------
 * 14. Reduced contrast safety: the glass marketing card sits on a navy
 *     band; the light glass tint keeps dark body text readable. On the
 *     marketing band the card text tokens are already dark (light glass)
 *     / light (dark glass) via the dark block above.
 * ------------------------------------------------------------------ */