/* ============================================================
   כלכלה נבונה - Design System
   Quiet-luxury fintech: deep navy, champagne gold, ivory paper
   ============================================================ */

:root {
  /* Palette */
  --navy-950: #050B16;
  --navy-900: #081120;
  --navy-850: #0B172B;
  --navy-800: #0F1F3A;
  --navy-700: #16294E;
  --navy-100: #2A3B58;

  --gold-200: #F6E7B8;
  --gold-300: #E9D08E;
  --gold-400: #DFC178;
  --gold-500: #C9A24B;
  --gold-600: #A8823A;

  /* Accessible gold for TEXT on light surfaces.
     #7F6126 -> 5.35:1 on ivory (#FAF6EE), 5.77:1 on white. Passes WCAG AA at any size.
     (--gold-600 is 3.29:1 on ivory and FAILS AA for normal text - never use it for
      small/normal text on a light background.) Gold on navy already passes: leave it. */
  --gold-ink: #7F6126;

  --ivory: #FAF6EE;
  --ivory-2: #F1EADA;
  --ink: #10203A;
  --ink-soft: #45536B;

  --grad-gold: linear-gradient(120deg, #A8823A 0%, #C9A24B 30%, #E9D08E 62%, #F6E7B8 100%);
  --grad-gold-btn: linear-gradient(120deg, #B08A3C 0%, #D4AC55 45%, #EBD494 100%);
  /* Gradient variant for gold TEXT that sits on light surfaces.
     Every stop is >= 4.5:1 on ivory (6.97 / 5.35 / 4.54 / 5.8). */
  --grad-gold-ink: linear-gradient(120deg, #6B5020 0%, #7F6126 38%, #8C6C2B 70%, #7A5D24 100%);

  /* Focus ring: recoloured per surface so it is perceivable on BOTH ivory and navy.
     Default = light surface (ink ring, 15.1:1 on ivory). Dark surfaces flip it below. */
  --focus-ring: #10203A;
  --focus-halo: #FAF6EE;

  /* Type */
  --font-display: 'Noto Serif Hebrew', serif;
  --font-body: 'Heebo', sans-serif;

  /* Rhythm */
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  /* de-AI-look trial: page surfaces go sharp and border-led (ledger grammar);
     small radii survive only on controls, where the 3px focus outline needs a
     corner it does not fight; the hero glass instrument keeps 10px because a
     depicted object is not a page surface. Shadows are replaced by borders -
     the alphas below were computed to clear 3:1 against both grounds. */
  --radius-lg: 0;
  --radius-md: 0;
  --radius-glass: 10px;
  --radius-ctl: 2px;
  --radius-field: 4px;

  --shadow-card: none;
  --shadow-gold: none;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ivory);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

::selection { background: rgba(201, 162, 75, .35); }

/* ---------- Typography ----------

   HEADINGS RUN LIGHTER AND WIDER-SPACED THAN THEY USED TO, DELIBERATELY.
   This block used to read `font-weight: 700; letter-spacing: -.01em`, which
   meant the hero was a text serif set BOLD at 74px reversed out of navy with
   the letters pulled together - a newspaper front page, not a private office.
   Much of what read as "generic" about the old headline was this rule rather
   than the typeface. Two corrections, and they cost nothing:

   1. Weight comes down. 500 here, 450 for the hero (see .display-1). Light-on-
      dark irradiation makes reversed type gain roughly half a weight step
      optically, so display type on navy has to be set lighter than it would be
      on ivory to LOOK the same weight.
   2. Tracking goes to zero. Hebrew word recognition rides on the gaps between
      the top bars of the letters; negative tracking closes exactly those gaps,
      and reversed on a dark ground the irradiation closes them further. There
      is no case for negative tracking on Hebrew display type.

   The width axis carries the hierarchy alongside weight: headings get NARROWER
   and LIGHTER as they get bigger, and WIDER and HEAVIER as they get smaller, so
   a 20px card heading holds its colour instead of thinning out. That is the
   display-cut/text-cut structure of a real type family, out of one file. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Small display sizes go the other way: full width, more weight. Below ~25px
   the narrow light cut loses its colour against the body text around it. */
.h3, h3, h4 {
  font-weight: 600;
  font-stretch: 100%;
}

.display-1 {
  /* The floor used to be 2.6rem (41.6px), which never scaled down: on a 390px
     screen the container is ~359px and the headline overflowed. The floor now
     tracks the viewport, and long Hebrew words may break rather than spill.

     Every value here is ~8% below what it was under Frank Ruhl Libre. Noto's
     Hebrew letters are 0.654 em tall against the old face's 0.601 - 8.8% more
     letter for the same font-size - so keeping the old numbers would have
     grown the hero and pushed the trust row below the fold. Width needed no
     such correction: that is what font-stretch: 90% buys (see css/fonts.css). */
  font-size: clamp(1.75rem, 5.7vw, 4.2rem);
  font-weight: 450;
  font-stretch: 90%;
  /* Was 1.14. Noto's lamed rises to 0.871 em and qof drops to -0.240, an ink
     extent of 1.111 em, so at 1.14 a ל would nearly touch a ך/ן/ף on the line
     below. The hero string itself has no descenders and would have looked fine
     - it is the wrapped headings on the inner pages that would have collided. */
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 560px) {
  .display-1 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); line-height: 1.24; }
}

/* Short desktop/laptop windows: the hero content was ~880px tall, so on a
   760px-high window the visitor had to scroll inside the hero - and the moment
   they did, the oversized headline slid under the fixed header and looked cut
   off. Trim the hero's vertical footprint so it fits without scrolling. */
@media (min-width: 821px) and (max-height: 900px) {
  .hero { padding-block: 6.5rem 3rem; }
  /* -8% alongside the base .display-1, for the same reason: Noto sets 8.8%
     taller per unit font-size, and these rules exist precisely to keep the
     hero inside a short window. */
  .hero .display-1 { font-size: clamp(1.85rem, 3.2vw, 2.9rem); }
  .hero .lead { font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.6rem; }
  .hero-badge { margin-bottom: 1rem; }
  .hero-trust { margin-top: 1.8rem; }
}
@media (min-width: 821px) and (max-height: 720px) {
  .hero { padding-block: 6rem 2.4rem; }
  .hero .display-1 { font-size: clamp(1.75rem, 2.75vw, 2.4rem); }
  .hero-trust { margin-top: 1.2rem; }
}

.h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.8;
  font-weight: 300;
}

/* Gold headline accent.
   Solid, AA-compliant colour is the BASE (also the fallback when background-clip:text
   is unsupported). The gradient is layered on only where it is legible. */
.text-gold { color: var(--gold-ink); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-gold {
    background: var(--grad-gold-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* On navy the bright gradient passes comfortably (5.4:1 - 15.3:1), so keep it there. */
  .hero .text-gold,
  .page-hero .text-gold,
  .on-dark .text-gold,
  .cta-band .text-gold,
  .card-dark .text-gold,
  .glass-card .text-gold,
  .site-footer .text-gold {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Shimmer sweep on key hero words */
.shimmer {
  background: linear-gradient(110deg,
    #A8823A 20%, #C9A24B 32%, #F8ECC2 47%, #E9D08E 55%, #C9A24B 68%, #A8823A 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5.5s var(--ease-out) infinite;
}
@keyframes shimmer {
  0%, 55% { background-position: 115% 0; }
  85%, 100% { background-position: -15% 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1.5px;
  background: var(--grad-gold);
}
.on-dark .eyebrow { color: var(--gold-300); }

/* ---------- Layout ---------- */
.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

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

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }

.on-dark { background: var(--navy-900); color: #E8ECF4; }
.on-dark .section-head p { color: #A8B4C9; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #F2F5FA; }

/* Fine gold hairline between dark sections */
.hairline { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,75,.5), transparent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2.1rem;
  border-radius: var(--radius-ctl);
  font-weight: 600;
  font-size: 1rem;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s;
  will-change: transform;
}

.btn-gold {
  background: var(--grad-gold-btn);
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(120%);
  transition: transform .7s var(--ease-out);
}
.btn-gold:hover { transform: translateY(-2px); }
.btn-gold:hover::after { transform: translateX(-120%); }

/* Ghost button: on light surfaces both the label and the hairline border are
   darkened so the control is identifiable and the text passes AA (5.35:1). */
.btn-ghost {
  /* .8 alpha -> 3.55:1 against ivory, so the button's boundary itself
     clears the 3:1 non-text contrast floor (WCAG 1.4.11). */
  border: 1px solid rgba(127, 97, 38, .8);
  color: var(--gold-ink);
}
.on-dark .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost,
.cta-band .btn-ghost,
.card-dark .btn-ghost,
.glass-card .btn-ghost,
.site-footer .btn-ghost {
  color: var(--gold-300);
  border-color: rgba(201, 162, 75, .55);
}
.btn-ghost:hover { background: rgba(127, 97, 38, .1); transform: translateY(-2px); }
.on-dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.card-dark .btn-ghost:hover,
.glass-card .btn-ghost:hover,
.site-footer .btn-ghost:hover { background: rgba(201, 162, 75, .12); }

.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(-5px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background .4s, box-shadow .4s, padding .4s;
  padding-block: 1.1rem;
}
.site-header.scrolled {
  background: rgba(5, 11, 22, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(201,162,75,.35); /* the hairline IS the border-instead-of-shadow */
  padding-block: .65rem;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.brand svg { height: 44px; width: auto; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #F2F5FA;
  line-height: 1.1;
}
.brand-tag {
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--gold-300);
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.nav-links a {
  position: relative;
  font-size: .98rem;
  font-weight: 500;
  color: #C9D3E2;
  padding-block: .35rem;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* aria-current is also carried by a non-colour cue (the underline above stays on) */
.nav-links a[aria-current="page"] { font-weight: 700; }

.nav-cta { padding: .62rem 1.5rem; font-size: .92rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  z-index: 130;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--gold-300);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(22,41,78,.9), transparent 65%),
    var(--navy-950);
  color: #E8ECF4;
  overflow: hidden;
  padding-block: 7rem 5rem;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.15rem;
  border-radius: var(--radius-ctl);
  border: 1px solid rgba(201,162,75,.4);
  background: rgba(201,162,75,.08);
  color: var(--gold-200);
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 0 rgba(233,208,142,.7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(233,208,142,.6); }
  70% { box-shadow: 0 0 0 9px rgba(233,208,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,208,142,0); }
}

.hero h1 { color: #F7F9FC; margin-bottom: 1.4rem; }
.hero .lead { color: #B7C2D6; max-width: 34rem; margin-bottom: 2.4rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-trust {
  margin-top: 3rem;
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  flex-wrap: wrap;
}
.trust-item { min-width: 110px; }
.trust-item .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-item .label { font-size: .85rem; color: #8FA0BB; }

/* Hero visual - floating glass dashboard */
.hero-visual { position: relative; }

.glass-card {
  position: relative;
  border-radius: var(--radius-glass);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65);
  padding: 1.6rem 1.7rem;
}

/* Reserved band at the bottom of the card for .demo-label + .dash-pause,
   so neither can ever overlap the chart. */
.dash-main {
  animation: floaty 7s ease-in-out infinite;
  padding-bottom: 3.6rem;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-14px) rotate(.4deg); }
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .4rem;
}
.dash-title { font-size: .85rem; color: #9DACC4; }
/* Numerals set in Heebo, not the display face. Two reasons, one hard and one
   editorial. Hard: the display face ships a Hebrew subset only, so Latin digits
   would fall through to a system serif and this value is rewritten every ~6s by
   js/main.js. Editorial: a display serif figure inside a glass dashboard card
   is a category error - the dashboard is meant to read as an instrument.
   tabular-nums stops the value jittering as the digits cycle. */
.dash-value {
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: #F6E7B8;
}
.dash-delta { font-size: .8rem; color: #A8B4C9; font-weight: 600; }

.dash-chart { margin-top: .6rem; }
.dash-chart path.line {
  fill: none;
  stroke: url(#chartGold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 2.6s 1s var(--ease-out) forwards;
}
.dash-chart path.area { opacity: 0; animation: fadein 1.2s 2.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

.dash-float {
  position: absolute;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  animation: floaty 8s ease-in-out infinite;
}
.dash-float .ic {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(201,162,75,.16);
  color: var(--gold-300);
  flex-shrink: 0;
}
.dash-float .t1 { font-size: .8rem; color: #93A3BD; }
.dash-float .t2 { font-size: .95rem; font-weight: 600; color: #EDF1F7; white-space: nowrap; }

.float-a { top: -22%; inset-inline-start: -9%; animation-delay: 1.2s; }
.float-b { bottom: -12%; inset-inline-end: -7%; animation-delay: 2.4s; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: #7C8DA8;
  font-size: .75rem;
  letter-spacing: .18em;
}
/* Now a real <button>: neutralise UA chrome, keep a comfortable hit area. */
.scroll-cue {
  pointer-events: auto;
  cursor: pointer;
  padding: .6rem 1rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  min-width: 44px;
  min-height: 44px;
}
.cue-arrow {
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(233, 208, 142, .5));
  animation: cueDrift 2.7s ease-in-out infinite;
}
.cue-arrow path {
  stroke: var(--gold-200);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: cueDraw 2.7s ease-in-out infinite;
}
@keyframes cueDraw {
  0% { stroke-dashoffset: 100; }
  55%, 100% { stroke-dashoffset: 0; }
}
@keyframes cueDrift {
  0%, 55% { transform: translateY(0); opacity: 1; }
  88% { opacity: .9; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

/* de-AI-look trial: asymmetric grid modifiers. Offsets are MARGINS, never
   transforms - the reduced-motion layer forces transform:none !important and
   these compositions must survive it. All gated to widths where the grids
   are actually multi-column; below that the resets keep clean stacks. */
/* THE STAGGER CLIMBS IN THE READING DIRECTION. This is RTL: the reader walks
   right-to-left, so the first card sits LOWEST at the inline-start (right) and
   every later card steps UP as the eye moves left. A silhouette that rises
   toward the right is the LTR growth diagonal - on a Hebrew page it reads as
   walking DOWN the stairs, exactly backwards for a brand about צמיחה. */
@media (min-width: 821px) {
  .grid-3.offset { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .grid-3.offset > :nth-child(1) { margin-block-start: 4.8rem; }
  .grid-3.offset > :nth-child(2) { margin-block-start: 2.4rem; }
}
@media (min-width: 1025px) {
  /* staircase keyed to the 01-04 numbering: step 01 is the bottom stair at the
     inline-start, 04 is the summit - you CLIMB as the process advances, and
     the section's CTA (text-align:end) waits at the top of the climb */
  .grid-4.stair > :nth-child(1) { margin-block-start: 4.8rem; }
  .grid-4.stair > :nth-child(2) { margin-block-start: 3.2rem; }
  .grid-4.stair > :nth-child(3) { margin-block-start: 1.6rem; }
}
@media (min-width: 821px) {
  /* bento: rows become 2-1 / 1-1-1 / 2-gap; span is direction-agnostic in RTL */
  .grid-3.bento > :first-child { grid-column: span 2; }
  .grid-3.bento > :last-child { grid-column: span 2; }
}

/* off-center section head, pushed to the inline-end of the container */
.section-head.end { margin-inline-start: auto; margin-inline-end: 0; text-align: start; }

/* editorial split: head beside the list instead of stacked above it */
.split-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.split-list .section-head { margin-block-end: 0; }
.split-list .list { display: grid; gap: 2.2rem; }
@media (max-width: 820px) { .split-list { grid-template-columns: 1fr; } }

/* the article's inset card: accent rail on the inline-start edge, no box */
.card.card-inset {
  background: transparent;
  border: 0;
  border-inline-start: 2px solid var(--gold-600);
  box-shadow: none;
  padding: .4rem 0;
  padding-inline: 1.6rem 0;
  overflow: visible;
}
.card.card-inset::before, .card.card-inset::after { display: none; }
.card.card-inset:hover { transform: none; }
.card.card-inset .icon { margin-bottom: .9rem; }

.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(16, 32, 58, .5); /* 3.2:1 - the border IS the boundary now */
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.card:hover { transform: translateY(-4px); }
.card:hover::before { transform: scaleX(1); }

.card .icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-ctl);
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  background: linear-gradient(140deg, rgba(201,162,75,.14), rgba(201,162,75,.05));
  border: 1px solid rgba(127,97,38,.32);
  color: var(--gold-ink);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-soft); font-size: .98rem; }

.card-dark {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border: 1px solid rgba(201,162,75,.65); /* 3.9:1 on navy-900 */
  color: #E8ECF4;
}
.card-dark h3 { color: #F2F5FA; }
.card-dark p { color: #A8B4C9; }
.card-dark .icon { color: var(--gold-300); }

/* ---------- Steps / timeline ---------- */
.steps {
  position: relative;
  display: grid;
  gap: 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.6rem;
  padding-block: 2rem;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 35.5px;
  top: 84px;
  bottom: -12px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(201,162,75,.55), rgba(201,162,75,.12));
}
.step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Heebo: these are Latin digits (01-05) and the display face is Hebrew-only.
     Heebo's line box is also shallower than the old serif's, which happens to
     centre these better inside the 72px circle than they were before. */
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
  background: #fff;
  border: 1.5px solid rgba(127,97,38,.6);
}
.on-dark .step-num {
  background: var(--navy-800);
  color: var(--gold-300);
  border-color: rgba(201,162,75,.5);
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--ink-soft); max-width: 58ch; }
.on-dark .step p { color: #A8B4C9; }
.step .step-meta {
  display: inline-block;
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: .06em;
}
.on-dark .step .step-meta { color: var(--gold-300); }

/* ---------- FAQ - native <details>/<summary> disclosure (no JS) ---------- */
/* Ledger rows, not floating cards: transparent items separated by rules, the
   open item lifts to white paper with a gold rail on the inline-start edge.
   Colour contrast does the state work - zero shadows. */
.faq-item {
  background: transparent;
  border: 0;
  border-block-start: 1px solid rgba(16,32,58,.35);
  border-inline-start: 3px solid transparent;
  margin-bottom: 0;
  transition: border-color .3s, background-color .3s;
}
.faq-item:last-of-type { border-block-end: 1px solid rgba(16,32,58,.35); }
.faq-item[open] {
  background: #fff;
  border-inline-start-color: var(--gold-600); /* 3.2:1 on ivory */
}

/* summary.faq-q - strip the native marker, keep it a real disclosure control */
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: start;
  padding: 1.35rem 1.6rem;
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--gold-ink); }

.faq-q .chev {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127,97,38,.45);
  color: var(--gold-ink);
  transition: transform .45s var(--ease-out), background-color .3s;
}
.faq-item[open] .chev {
  transform: rotate(180deg);
  background: rgba(127,97,38,.12);
}

/* No max-height animation: native <details> has no height to interpolate and a
   clamped max-height would clip long answers. Content is simply fully present. */
.faq-a {
  display: block;
  max-height: none;
  overflow: visible;
}
.faq-a-inner {
  padding: 0 1.6rem 1.5rem;
  color: var(--ink-soft);
  max-width: 65ch;
}

/* ---------- Forms ---------- */
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(16,32,58,.06);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .45rem;
  color: var(--ink);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: .85rem 1.1rem;
  border-radius: var(--radius-field);
  border: 1.5px solid #78818F;
  background: var(--ivory);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
/* Field focus: the outline is NEVER removed - it is replaced by a stronger,
   surface-aware ring defined in the focus-visible section below. */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold-ink);
  background: #fff;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 1rem; }

.form-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
}
.form-success.show { display: block; }
.form-success .big-check {
  width: 74px; height: 74px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-gold);
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 15% 120%, rgba(201,162,75,.2), transparent 60%),
    linear-gradient(150deg, var(--navy-850), var(--navy-950));
  color: #F2F5FA;
  border-radius: var(--radius-lg);
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  /* off-center closer: text sits at the inline-start, the key-mark watermark
     at the inline-end becomes a counterweight instead of wallpaper */
  padding-inline: clamp(2.6rem, 6vw, 4.5rem) clamp(4rem, 14vw, 14rem);
  text-align: start;
}
@media (max-width: 820px) {
  /* the key-mark is display:none here - remove the asymmetric hole */
  .cta-band { padding-inline: clamp(1.6rem, 5vw, 2.6rem); }
}
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { color: #A8B4C9; max-width: 46rem; margin-block: 0 2rem; margin-inline: 0; }
.cta-band .key-mark {
  position: absolute;
  inset-inline-end: -60px;
  bottom: -70px;
  width: 340px;
  opacity: .1;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: #94A3BD;
  padding: 4rem 0 2rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(201,162,75,.15);
}
.site-footer h4 { color: #E8ECF4; font-size: 1.02rem; margin-bottom: 1rem; }
.site-footer a { transition: color .3s; }
.site-footer a:hover { color: var(--gold-300); }
.site-footer li { margin-bottom: .55rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: .82rem;
  color: #8494AE;
}
.footer-brand svg { height: 40px; margin-bottom: 1rem; }
.footer-disclaimer { font-size: .8rem; color: #8494AE; margin-top: 1rem; max-width: 44ch; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
/* (reduced-motion handling lives in ONE comprehensive block at the end of this file) */

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 80% -20%, rgba(201,162,75,.14), transparent 60%),
    var(--navy-950);
  color: #E8ECF4;
  padding: clamp(9rem, 16vw, 12rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-hero h1 { color: #F7F9FC; font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 1rem; }
.page-hero .lead { color: #B7C2D6; max-width: 40rem; }
.page-hero .key-watermark {
  position: absolute;
  inset-inline-end: -4%;
  top: 18%;
  width: min(420px, 40vw);
  opacity: .07;
  transform: rotate(-10deg);
  pointer-events: none;
}

/* Breadcrumb-ish accent */
.crumb { font-size: .85rem; color: var(--gold-300); letter-spacing: .12em; margin-bottom: 1rem; display: inline-block; }

/* ---------- Audience page extras ---------- */
.audience-card .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.audience-card .tag {
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .8rem;
  border-radius: var(--radius-ctl);
  background: rgba(201,162,75,.1);
  border: 1px solid rgba(127,97,38,.35);
  color: var(--gold-ink);
}
.on-dark .audience-card .tag,
.card-dark .tag {
  color: var(--gold-300);
  border-color: rgba(201,162,75,.35);
}

/* Quote / principle strip */
.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  background: transparent;
  border: 0;
  border-inline-start: 3px solid var(--gold-600);
  padding: .4rem 0;
  padding-inline: 1.7rem 0;
}
.principle .mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold-ink);
}

/* ---------- Marquee of value words ---------- */
.marquee {
  overflow: hidden;
  padding-block: 1.4rem;
  background: var(--navy-950);
  border-block: 1px solid rgba(201,162,75,.2);
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #8FA0BB;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
}
.marquee span::after {
  content: "✦";
  color: var(--gold-500);
  font-size: .8rem;
}
@keyframes marquee { to { transform: translateX(50%); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; margin-inline: auto; width: 100%; }
  .float-a { top: -7%; inset-inline-start: -2%; }
  .float-b { bottom: -8%; inset-inline-end: -2%; }
}

@media (max-width: 820px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-grid { grid-template-columns: 1fr; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(5,11,22,.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
    z-index: 120;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 1.35rem; }

  .step { grid-template-columns: 56px 1fr; gap: 1.1rem; }
  .step-num { width: 56px; height: 56px; font-size: 1.2rem; }
  .step:not(:last-child)::before { inset-inline-start: 27.5px; top: 68px; }
}

@media (max-width: 820px) {
  .brand-tag { display: none; }
  .brand svg, .brand img { height: 38px !important; }
  .brand-name { font-size: 1.15rem; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .hero { padding-top: 6.5rem; }
  .hero-trust { gap: 1.2rem; }
  .trust-item { min-width: 90px; }
  .dash-float { display: none; }
  .scroll-cue { display: none; }
}

/* ============================================================
   v0.2 - Elevated visual layer
   ============================================================ */

/* ---------- Luxury scrollbar ---------- */
html { scrollbar-color: var(--gold-600) var(--navy-950); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--navy-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-600), var(--gold-400));
  border-radius: 8px;
  border: 2px solid var(--navy-950);
}

/* ---------- Gold scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2.5px;
  z-index: 200;
  background: var(--grad-gold);
  transform-origin: right;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Film grain (dark heroes only, static) ---------- */
.hero::after, .page-hero::after, .cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .045;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Aurora glow layer (hero + page heroes) ---------- */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  mix-blend-mode: screen;
}
.aurora i:nth-child(1) {
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(201,162,75,.32), transparent 65%);
  top: -18%; inset-inline-end: -8%;
  animation: aur1 16s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  width: 38vw; height: 38vw;
  background: radial-gradient(circle, rgba(38,74,145,.5), transparent 65%);
  bottom: -22%; inset-inline-start: -6%;
  animation: aur2 20s ease-in-out infinite;
}
.aurora i:nth-child(3) {
  width: 26vw; height: 26vw;
  background: radial-gradient(circle, rgba(233,208,142,.2), transparent 60%);
  top: 34%; inset-inline-start: 30%;
  animation: aur3 24s ease-in-out infinite;
}
@keyframes aur1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-6vw, 5vh) scale(1.18); }
}
@keyframes aur2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(7vw, -6vh) scale(1.12); }
}
@keyframes aur3 {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .35; }
  50% { transform: translate(-4vw, -8vh) scale(1.25); opacity: .6; }
}
.hero .hero-inner, .page-hero .container { z-index: 3; }
.page-hero { isolation: isolate; }
.page-hero .container { position: relative; }

/* ---------- Word-by-word headline entrance ---------- */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  animation: wordIn 1s var(--ease-out) forwards;
  animation-delay: var(--wd, 0s);
}
@keyframes wordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Inner page hero entrance */
.page-hero .crumb,
.page-hero h1,
.page-hero .lead {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn .9s var(--ease-out) forwards;
}
.page-hero h1 { animation-delay: .12s; }
.page-hero .lead { animation-delay: .26s; }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* ---------- Cursor spotlight on cards ---------- */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201,162,75,.13), transparent 62%);
}
.card:hover::after { opacity: 1; }
.card-dark::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233,208,142,.14), transparent 62%);
}

/* ---------- 3D tilt (hero dashboard) ---------- */
.hero-visual { perspective: 1100px; }
.dash-main {
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-visual.tilting .dash-main {
  animation: none;
  transition: transform .18s ease-out;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.hero-visual.tilt-reset .dash-main {
  transition: transform .8s var(--ease-out);
  transform: none;
}

/* ---------- Ghost display typography ---------- */
.ghost-word {
  position: absolute;
  inset-inline-end: 8%;
  top: 8%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 15vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16, 32, 58, .07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  will-change: transform;
}
.on-dark .ghost-word { -webkit-text-stroke-color: rgba(201, 162, 75, .1); }
.section > .container { position: relative; z-index: 1; }

/* ---------- Animated conic gold ring on CTA bands ---------- */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cta-band {
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--angle),
    transparent 0%, rgba(201,162,75,.1) 18%, var(--gold-300) 32%,
    rgba(246,231,184,.95) 38%, var(--gold-500) 46%, rgba(201,162,75,.1) 62%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ringSpin 7s linear infinite;
  pointer-events: none;
}
@keyframes ringSpin { to { --angle: 360deg; } }

/* ---------- Live dashboard scenario swap ---------- */
.dash-head, .dash-float > div:last-child {
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.dash-fading .dash-head,
.dash-fading .dash-float > div:last-child {
  opacity: 0;
  transform: translateY(9px);
}
.dash-progress {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  border-radius: 0 0 var(--radius-glass) var(--radius-glass);
  overflow: hidden;
}
.dash-progress i {
  display: block;
  height: 100%;
  background: var(--grad-gold);
  transform-origin: right;
  transform: scaleX(0);
}
.dash-progress i.run {
  animation: dashTimer var(--cycle, 6s) linear forwards;
}
@keyframes dashTimer { to { transform: scaleX(1); } }

/* ---------- Demo-data label (persistent, never hidden) ---------- */
/* Sits on the dark glass card, so it uses light-on-dark type:
   #F6E7B8 over rgba(5,11,22,.72) ≈ 14:1. */
.demo-label {
  position: absolute;
  bottom: .95rem;
  inset-inline-start: 1.15rem;
  z-index: 5;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(5, 11, 22, .74);
  border: 1px solid rgba(246, 231, 184, .45);
  color: #F6E7B8;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.5;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* it is a disclosure, not decoration: it must survive every state change */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none;
}
.demo-label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-300);
  flex-shrink: 0;
}

/* ---------- Dashboard pause control ---------- */
.dash-pause {
  position: absolute;
  bottom: .78rem;
  inset-inline-end: .95rem;
  z-index: 6;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(5, 11, 22, .7);
  border: 1px solid rgba(246, 231, 184, .42);
  color: #F6E7B8;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s, border-color .25s, color .25s;
}
.dash-pause svg { width: 15px; height: 15px; display: block; }
.dash-pause:hover {
  background: rgba(5, 11, 22, .92);
  border-color: var(--gold-300);
  color: #FFF8E6;
}
.dash-pause[aria-pressed="true"] {
  background: rgba(201, 162, 75, .3);
  border-color: var(--gold-200);
  color: #FFF8E6;
}

/* CSS-only effect of the pause toggle (JS may mirror it; this is the safety net) */
.dash-main:has(.dash-pause[aria-pressed="true"]) { animation-play-state: paused; }
.dash-main:has(.dash-pause[aria-pressed="true"]) .dash-progress i.run { animation-play-state: paused; }

@media (max-width: 560px) {
  .demo-label { font-size: .68rem; bottom: .8rem; inset-inline-start: .95rem; }
  .dash-pause { bottom: .65rem; inset-inline-end: .75rem; }
}

/* ---------- Preview-state banner (remove when the form goes live) ---------- */
.preview-banner {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .95rem 1.15rem;
  margin-bottom: 1.6rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 162, 75, .45);
  background: rgba(201, 162, 75, .09);
  font-size: .9rem;
  line-height: 1.6;
}
.preview-banner strong {
  font-family: var(--font-display);
  color: var(--gold-ink);
  letter-spacing: .04em;
}
.preview-banner span { color: var(--ink-soft); }


/* Hero entrance - class-driven so reduced motion can restore visibility.
   Never use inline opacity:0 here: an inline style cannot be overridden by
   the reduced-motion block, which previously left both hero CTAs permanently
   invisible while still focusable. */
.hero-in {
  opacity: 0;
  animation: heroIn .9s var(--ease-out) var(--hd, 0s) forwards;
}

/* Motion toggle (WCAG 2.2.2) - lets a visitor stop all auto-running motion */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  margin-top: 1rem;
  border-radius: var(--radius-ctl);
  border: 1px solid rgba(201,162,75,.45);
  background: transparent;
  color: var(--gold-300);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.motion-toggle:hover { background: rgba(201,162,75,.12); }

/* ---------- Smart-economy flow strip ---------- */
.smart-flow { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.smart-flow-head { text-align: center; max-width: 34rem; margin: 0 auto 2.6rem; }
.smart-flow-head p { color: var(--ink-soft); margin-top: .5rem; font-size: .98rem; }

.flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
/* the connective thread: draws itself right-to-left on reveal */
.flow-grid::before {
  content: "";
  position: absolute;
  top: 7px;
  inset-inline: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(201,162,75,.15), var(--gold-500), rgba(201,162,75,.15));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.7s var(--ease-out) .25s;
}
.reveal.in .flow-grid::before { transform: scaleX(1); }

.flow-stage {
  text-align: center;
  padding-inline: .5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease-out) var(--fd, 0s), transform .8s var(--ease-out) var(--fd, 0s);
}
.reveal.in .flow-stage { opacity: 1; transform: none; }

.flow-dot {
  display: block;
  width: 15px; height: 15px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 0 5px rgba(201,162,75,.12); /* flat ring = border, glow deleted */
  position: relative;
  z-index: 1;
}
.flow-stage h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  margin-bottom: .45rem;
}
.flow-stage p { color: var(--ink-soft); font-size: .9rem; line-height: 1.65; }

@media (max-width: 820px) {
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
  .flow-grid::before { display: none; }
}

/* ---------- Hero headline underline flourish ---------- */
.hero-flourish {
  display: block;
  width: min(300px, 50%);
  height: 10px;
  margin-top: 1.1rem;
}
.hero-flourish path {
  fill: none;
  stroke: url(#flourishGold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 1.6s 1.4s var(--ease-out) forwards;
}

/* (reduced-motion handling lives in ONE comprehensive block at the end of this file) */

/* ---------- Responsive overlap QA (breakpoint audit fixes) ----------
   Decorative layers stand down before they collide with real content. */

/* laptops and below: ghost words shrink and retreat into section padding */
@media (max-width: 1280px) {
  .ghost-word {
    top: 0 !important;
    font-size: clamp(4.5rem, 10vw, 8.5rem) !important;
    opacity: .75;
  }
}
/* phones: ghost words stay, but compact enough to live inside the
   section's top padding without touching the headings */
@media (max-width: 700px) {
  .ghost-word {
    top: 4px !important;
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
    opacity: .8;
  }
}

/* stacked hero (tablet): floating card must not reach the trust stats above */
@media (max-width: 1024px) {
  .hero-visual { margin-top: 2.4rem; }
}

/* page-hero watermark: shrink and drop below the headline zone on laptops */
@media (max-width: 1240px) {
  .page-hero .key-watermark {
    width: min(280px, 30vw);
    top: 42%;
    opacity: .055;
  }
}

/* CTA band watermark: smaller on laptops, gone on small screens */
@media (min-width: 821px) and (max-width: 1240px) {
  .cta-band .key-mark { width: 230px; inset-inline-end: -44px; bottom: -52px; }
}
@media (max-width: 820px) {
  .cta-band .key-mark { display: none; }
}

/* contact page: two-column layout collapses cleanly on mobile */
.contact-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ============================================================
   ACCESSIBILITY LAYER
   ============================================================ */

/* ---------- Inline-styled gold that sits on a light card ----------
   The contact page's "what happens next" step numbers carry
   style="...color:var(--gold-500)..." inline (2.4:1 on white - fails even the
   large-text 3:1 floor). Inline styles can only be beaten with !important. */
[style*="color:var(--gold-500)"],
[style*="color: var(--gold-500)"],
[style*="color:var(--gold-600)"],
[style*="color: var(--gold-600)"] {
  color: var(--gold-ink) !important;
}
/* ...but never on a dark surface, where the bright gold is the accessible choice. */
.on-dark [style*="color:var(--gold-500)"],
.hero [style*="color:var(--gold-500)"],
.page-hero [style*="color:var(--gold-500)"],
.cta-band [style*="color:var(--gold-500)"],
.card-dark [style*="color:var(--gold-500)"],
.glass-card [style*="color:var(--gold-500)"],
.site-footer [style*="color:var(--gold-500)"],
.on-dark [style*="color:var(--gold-600)"],
.hero [style*="color:var(--gold-600)"],
.page-hero [style*="color:var(--gold-600)"],
.cta-band [style*="color:var(--gold-600)"],
.card-dark [style*="color:var(--gold-600)"],
.glass-card [style*="color:var(--gold-600)"],
.site-footer [style*="color:var(--gold-600)"] {
  color: var(--gold-300) !important;
}

/* ---------- Skip link ----------
   Visually hidden until focused; then a solid navy chip with a gold ring,
   above every other layer (site z-index tops out at 999). */
.skip-link {
  /* it is its own dark surface, so it carries the light-on-dark focus ring */
  --focus-ring: #F6E7B8;
  --focus-halo: #050B16;
  position: fixed;
  top: 0;
  inset-inline-start: 1rem;
  z-index: 1000;
  transform: translateY(-140%);
  display: inline-block;
  padding: .75rem 1.5rem;
  border: 2px solid var(--gold-300);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--navy-950);
  color: #FFFFFF;            /* 18.6:1 on navy-950 */
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .75);
  transition: transform .18s var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--gold-200);
  outline-offset: 3px;
}

/* ---------- Focus visible ----------
   The ring colour flips per surface so it is unmistakable on ivory AND on navy.
   It is never a colour change alone: it is a 3px ring plus a separating halo. */
.site-header,
.hero,
.page-hero,
.on-dark,
.cta-band,
.card-dark,
.glass-card,
.dash-main,
.dash-float,
.marquee,
.site-footer,
.nav-links {
  --focus-ring: #F6E7B8;   /* 15.3:1 on navy-950 */
  --focus-halo: #050B16;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.scroll-cue:focus-visible,
.dash-pause:focus-visible,
.faq-q:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

/* Tight surfaces where a 3px offset would be clipped by an overflow:hidden parent */
.faq-q:focus-visible,
.marquee a:focus-visible { outline-offset: -3px; }

/* Skip-link destination: focusable but not an interactive control, so it gets a
   quiet inset ring rather than a page-sized halo. */
main:focus { outline: none; }
main:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Belt and braces: any browser without :focus-visible still gets the UA outline,
   because nothing in this stylesheet sets `outline: none` on an interactive
   element without providing a replacement ring. */

/* ---------- Motion switch (paired with a .motion-paused class on <body>) ----------
   Pauses rather than deletes, so nothing jumps when motion is resumed. */
body.motion-paused .marquee-track,
body.motion-paused .aurora i,
body.motion-paused .dash-main,
body.motion-paused .dash-float,
body.motion-paused .hero-badge .dot,
body.motion-paused .cta-band::before,
body.motion-paused .shimmer,
body.motion-paused .dash-progress i,
body.motion-paused .dash-progress i.run {
  animation-play-state: paused !important;
}
/* the scroll cue fades to opacity 0 mid-cycle, so it is stopped, not paused */
body.motion-paused .cue-arrow,
body.motion-paused .cue-arrow path {
  animation: none !important;
  opacity: 1;
  transform: none;
  stroke-dashoffset: 0;
}

/* ============================================================
   REDUCED MOTION - single comprehensive block.
   Neutralises every @keyframes and every transition in this file:
   shimmer, pulse, floaty, draw, fadein, cueDraw, cueDrift, marquee,
   aur1, aur2, aur3, wordIn, heroIn, ringSpin, dashTimer.
   Anything whose start state hides content is restored to its END state,
   so no content is ever left invisible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* hero entrance blocks must be fully visible, not merely un-animated */
  .hero-in, .hero-badge, .hero .lead, .hero-actions, .hero-trust {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }


  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* -- reveal-on-scroll: always fully visible, JS or no JS -- */
  .reveal,
  .reveal.in { opacity: 1 !important; transform: none !important; }

  /* -- wordIn / heroIn: headline entrances -- */
  .word,
  .page-hero .crumb,
  .page-hero h1,
  .page-hero .lead {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* -- draw / fadein: SVG line + area of the hero chart -- */
  .dash-chart path.line { stroke-dashoffset: 0 !important; }
  .dash-chart path.area { opacity: 1 !important; }
  .hero-flourish path { stroke-dashoffset: 0 !important; }

  /* -- cueDraw / cueDrift: the scroll cue must stay drawn and opaque -- */
  .cue-arrow { opacity: 1 !important; transform: none !important; }
  .cue-arrow path { stroke-dashoffset: 0 !important; }

  /* -- shimmer: hold a static, legible position in the gradient -- */
  .shimmer { background-position: 40% 0 !important; }

  /* -- marquee: track parks at its start -- */
  .marquee-track { transform: none !important; }

  /* -- floaty: hero cards sit still and level -- */
  .dash-main,
  .dash-float { transform: none !important; }

  /* -- aur1 / aur2 / aur3: aurora blobs hold position -- */
  .aurora i { transform: none !important; }

  /* -- pulse: badge dot keeps a static ring -- */
  .hero-badge .dot { box-shadow: 0 0 0 3px rgba(233, 208, 142, .28) !important; }

  /* -- ringSpin: conic border freezes at 0deg (fully drawn, just not turning) -- */
  .cta-band::before { --angle: 0deg; }

  /* -- dashTimer: the progress hairline simply does not run -- */
  .dash-progress i,
  .dash-progress i.run { transform: scaleX(0) !important; }

  /* -- dashboard scenario swap must never leave content faded out -- */
  .dash-fading .dash-head,
  .dash-fading .dash-float > div:last-child {
    opacity: 1 !important;
    transform: none !important;
  }

  /* -- flow strip: thread drawn, stages visible, with or without .in -- */
  .flow-grid::before { transform: scaleX(1) !important; }
  .flow-stage { opacity: 1 !important; transform: none !important; }

  /* -- hover / tilt transforms are neutralised, colour feedback is kept -- */
  .btn-gold:hover,
  .btn-ghost:hover,
  .card:hover,
  .hero-visual.tilting .dash-main,
  .hero-visual.tilt-reset .dash-main { transform: none !important; }
  .btn-gold:hover::after { transform: translateX(120%) !important; }
  .btn:hover .arrow { transform: none !important; }

  /* -- state indicators that are transforms stay instant, not animated -- */
  .nav-links a:hover::after,
  .nav-links a.active::after,
  .nav-links a[aria-current="page"]::after { transform: scaleX(1) !important; }
  .card:hover::before { transform: scaleX(1) !important; }
  .faq-item[open] .chev { transform: rotate(180deg) !important; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* -- skip link must still leave and re-enter the viewport -- */
  .skip-link { transform: translateY(-140%); }
  .skip-link:focus,
  .skip-link:focus-visible { transform: translateY(0); }
}