@layer reset, base, layout, components, utilities;

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Brand — palette from the client's visual asset pack */
  --color-brand-navy:        #0A1A2F;  /* pack: deep navy */
  --color-brand-navy-deep:   #0F172A;  /* pack: darker slate */
  --color-brand-emerald:     #00D4B3;  /* pack: vivid mint */
  --color-brand-emerald-ink: #0E8C7A;  /* darkened for body-text on white, WCAG AA */
  --color-brand-mint:        #6EE7D5;  /* pack: light mint */
  --color-brand-blue:        #1162FE;  /* pack: electric blue */
  --color-brand-slate:       #334155;  /* pack: slate */

  /* Surfaces */
  --color-bg:                #ffffff;
  --color-bg-subtle:         #F6F8FC;
  --color-bg-muted:          #E5E7EB;
  --color-bg-dark:           var(--color-brand-navy-deep);

  /* Text */
  --color-text:              #0A1A2F;
  --color-text-muted:        rgba(10, 26, 47, 0.72);
  --color-text-subtle:       rgba(10, 26, 47, 0.55);
  --color-text-on-dark:      rgba(255, 255, 255, 0.78);
  --color-heading:           var(--color-brand-navy);

  /* Borders */
  --color-border:            #E5E7EB;
  --color-border-strong:     #CBD5E1;
  --color-border-on-dark:    rgba(255, 255, 255, 0.12);

  /* Semantic */
  --color-accent:            var(--color-brand-emerald-ink);
  --color-accent-hover:      #0C7A57;
  --color-link:              var(--color-brand-navy);
  --color-link-hover:        var(--color-brand-emerald-ink);
  --color-focus-ring:        var(--color-brand-emerald-ink);
  --color-error:             #B91C1C;
  --color-success:           #065F46;

  /* Spacing (8pt) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-padding: clamp(3.5rem, 7vw, 6rem);

  /* Container */
  --container-max:     78rem;
  --container-padding: clamp(1.25rem, 5vw, 2.5rem);

  /* Type scale */
  --text-display: clamp(2.5rem,  5vw + 0.5rem, 4.5rem);
  --text-h1:      clamp(2rem,    3.5vw + 0.5rem, 3rem);
  --text-h2:      clamp(1.65rem, 2.5vw + 0.4rem, 2.25rem);
  --text-h3:      clamp(1.25rem, 1.4vw + 0.4rem, 1.5rem);
  --text-h4:      clamp(1.05rem, 0.7vw + 0.4rem, 1.2rem);
  --text-body:    clamp(1rem,    0.3vw + 0.9rem, 1.0625rem);
  --text-small:   0.9rem;
  --text-xs:      0.8rem;

  --leading-tight:  1.15;
  --leading-snug:   1.4;
  --leading-normal: 1.65;

  /* Fonts */
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadow */
  --shadow-sm:  0 1px 2px rgba(10, 31, 68, 0.06);
  --shadow-md:  0 8px 24px -8px rgba(10, 31, 68, 0.18);
  --shadow-lg:  0 24px 48px -16px rgba(10, 31, 68, 0.25);

  /* Gradient — pack: electric-blue → vivid mint */
  --brand-gradient: linear-gradient(135deg, #1162FE 0%, #00D4B3 100%);

  /* Transition */
  --transition-base: 200ms ease;

  /* Live header height — nav.js updates on scroll. Default matches unscrolled state. */
  --header-height: 4.5rem;
}

/* ============================================================
   RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* Honour the [hidden] attribute against any author display rule (e.g. .form-grid { display: grid }). */
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-block-size: 100vh; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; }
  :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-heading);
    letter-spacing: -0.02em;
  }
  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
  h4 { font-size: var(--text-h4); }
  p { max-inline-size: 70ch; }
  a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--transition-base); }
  a:hover { color: var(--color-link-hover); }
  a.unstyled, .site-footer a, .nav a, .card, .card__link, .button { text-decoration: none; }
  ::selection { background: var(--color-brand-emerald); color: #fff; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }
  .section { padding-block: var(--section-padding); }
  .section--subtle { background: var(--color-bg-subtle); }
  .section--dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    position: relative;
    overflow: hidden;
  }
  .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
  .section--dark p { color: var(--color-text-on-dark); }

  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand-emerald);
    color: #fff;
    text-decoration: none;
    z-index: 1000;
    border-radius: var(--radius-md);
    font-weight: 600;
  }
  .skip-link:focus { inset-block-start: 1rem; color: #fff; }

  .grid-2 { display: grid; gap: var(--space-8); }
  .grid-3 { display: grid; gap: var(--space-6); }
  .grid-auto { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

  @media (width >= 48rem) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ── HEADER ─────────────────────────────── */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    /* Above .cookie-banner (z:200) so the mobile menu, which renders inside
       this stacking context, paints over the rest of the page. */
    z-index: 300;
    background: transparent;
    /* blur(0) on the base state so backdrop-filter has a value to interpolate from. */
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    /* Material-style standard curve — smooth all the way to the end. */
    transition:
      background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
      backdrop-filter 700ms cubic-bezier(0.4, 0, 0.2, 1),
      -webkit-backdrop-filter 700ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 280ms ease;
  }
  .site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px -12px rgba(10, 31, 68, 0.2);
  }
  /* Critical: while the mobile menu is open, drop backdrop-filter so the
     header stops being the containing block for fixed-positioned descendants.
     Without this, .nav--open .nav__list (position:fixed) gets clipped to the
     header's 72px bounding box and only the first item appears. */
  .site-header.is-nav-open,
  .site-header.is-nav-open.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.96);
    transition:
      background-color 200ms ease,
      box-shadow 200ms ease;
  }
  @media (width < 64rem) {
    .site-header.site-header--hidden { transform: translateY(-100%); }
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* Whole-pixel padding values so there's no sub-pixel snap when the transition lands.
       1rem = 16px, 0.5rem = 8px. Longhand for clean interpolation. */
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition:
      padding-top 700ms cubic-bezier(0.4, 0, 0.2, 1),
      padding-bottom 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Narrow the bar slightly once the user has scrolled past the hero. */
  .site-header.is-scrolled .nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .nav__logo { display: inline-flex; align-items: center; gap: 0.4rem; line-height: 0; }
  .nav__logo img {
    /* Whole-pixel start (40px) and end (36px) so no sub-pixel rounding. */
    height: 2.5rem;
    width: auto;
    display: block;
    transition: height 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .site-header.is-scrolled .nav__logo img { height: 2.25rem; }
  .nav__logo .logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--color-brand-navy);
    line-height: 1.1;
  }
  .nav__logo .logo-text em {
    color: var(--color-brand-emerald-ink);
    font-style: normal;
  }
  .nav__logo .logo-tag {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-text-subtle);
    margin-block-start: 0.15rem;
  }
  /* Transparent-header (home hero) variant — white text. */
  .site-header:not(.is-scrolled) .nav__logo .logo-text { color: #fff; }
  .site-header:not(.is-scrolled) .nav__logo .logo-text em { color: var(--color-brand-emerald); }
  .site-header:not(.is-scrolled) .nav__logo .logo-tag { color: rgba(255, 255, 255, 0.65); }

  /* Footer (dark background) — white wordmark, emerald FX. */
  .site-footer .nav__logo .logo-text { color: #fff; }
  .site-footer .nav__logo .logo-text em { color: var(--color-brand-emerald); }
  .site-footer .nav__logo .logo-tag { color: rgba(255, 255, 255, 0.6); }

  .nav__list {
    display: none;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* Unified box model for every clickable nav item, anchors and the dropdown trigger button.
     Identical height, padding, font and alignment so they line up regardless of element type. */
  .nav__list > li > a,
  .nav__list .nav__dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding-inline: var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 999px;
    transition: color var(--transition-base), background-color var(--transition-base);
    cursor: pointer;
  }
  .nav__list > li > a:hover,
  .nav__list > li > a[aria-current="page"],
  .nav__list .nav__dropdown-trigger:hover {
    color: var(--color-brand-emerald-ink);
  }

  /* Transparent-header (home hero) variant — white text. */
  .site-header:not(.is-scrolled) .nav__list > li > a,
  .site-header:not(.is-scrolled) .nav__list .nav__dropdown-trigger {
    color: rgba(255, 255, 255, 0.92);
  }
  .site-header:not(.is-scrolled) .nav__list > li > a:hover,
  .site-header:not(.is-scrolled) .nav__list > li > a[aria-current="page"],
  .site-header:not(.is-scrolled) .nav__list .nav__dropdown-trigger:hover {
    color: var(--color-brand-emerald);
  }

  .nav__dropdown { position: relative; display: inline-flex; align-items: center; }
  .nav__dropdown-trigger svg {
    inline-size: 1em;
    block-size: 1em;
    stroke-width: 2;
    transition: transform var(--transition-base);
    flex-shrink: 0;
  }
  .nav__dropdown[aria-expanded="true"] .nav__dropdown-trigger svg { transform: rotate(180deg); }
  .nav__dropdown-menu {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-start: 0;
    inline-size: 18rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    display: none;
  }
  .nav__dropdown[aria-expanded="true"] .nav__dropdown-menu { display: block; }
  .nav__dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
  }
  .nav__dropdown-menu a:hover {
    background: var(--color-bg-subtle);
    color: var(--color-brand-emerald-ink);
  }
  .nav__dropdown-menu a.is-overview {
    font-weight: 600;
    color: var(--color-brand-navy);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-1);
    padding-block-end: var(--space-3);
  }

  .nav__cta-group {
    display: none;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: var(--space-2);
    flex-shrink: 0; /* keep the CTA cluster from being squeezed by the nav list */
  }
  .nav__cta-group .button {
    height: 2.5rem;
    /* Extra right padding so the trailing arrow icon clears the rounded edge cleanly. */
    padding: 0 1.4rem 0 1.2rem;
    font-size: 0.85rem;
  }
  .nav__cta-group .button svg {
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
  }
  .nav__login {
    color: var(--color-brand-navy);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    padding-inline: var(--space-2);
    transition: color var(--transition-base);
  }
  .nav__login:hover { color: var(--color-brand-emerald-ink); }
  .site-header:not(.is-scrolled) .nav__login { color: rgba(255, 255, 255, 0.92); }
  .site-header:not(.is-scrolled) .nav__login:hover { color: var(--color-brand-emerald); }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--color-brand-navy);
    background: transparent;
    border-radius: var(--radius-md);
  }
  .site-header:not(.is-scrolled) .nav__toggle { color: #fff; }
  .nav__toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }

  @media (width >= 64rem) {
    .nav__list, .nav__cta-group { display: flex; }
    .nav__toggle { display: none; }
  }

  .nav--open .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    inset: 0;
    inset-block-start: var(--header-height);
    background: #fff;
    padding: var(--space-6) var(--container-padding);
    gap: var(--space-3);
    border-block-start: 1px solid var(--color-border);
    overflow-y: auto;
    z-index: 1;
  }
  /* The .site-header prefix is for specificity: without it this rule loses to
     .site-header:not(.is-scrolled) .nav__list > li > a which sets the links
     white over the transparent hero header — and the mobile menu's white
     background made every link invisible until the user scrolled. */
  .site-header .nav--open .nav__list > li > a,
  .site-header .nav--open .nav__list .nav__dropdown-trigger {
    height: auto;
    font-size: 1.05rem;
    padding: var(--space-3);
    color: var(--color-text);
    width: 100%;
    justify-content: flex-start;
  }
  .nav--open .nav__list .nav__dropdown { width: 100%; }
  .nav--open .nav__list .nav__dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-inline-start: var(--space-3);
  }

  /* ── HERO ──────────────────────────────── */
  .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #07152F 0%, #0A1F44 60%, #102B5C 100%);
    color: #fff;
    padding-block: clamp(7rem, 12vw, 10rem) clamp(4rem, 8vw, 6rem);
    min-block-size: 92dvh;
    display: flex;
    align-items: flex-end;
  }
  .hero > .container { position: relative; z-index: 1; }
  /* Photo-backed hero variant: uniform dark wash across the whole image so
     text (including the gradient "Together." accent) reads cleanly. */
  .hero--photo {
    background:
      linear-gradient(rgba(7, 21, 47, 0.6), rgba(7, 21, 47, 0.6)),
      url('/images/hero-skyline.jpg?v=2') center / cover no-repeat;
    align-items: center;
  }
  .hero__inner { max-inline-size: 64rem; }
  .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    margin-block-end: var(--space-6);
  }
  .hero__badge::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--color-brand-emerald);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .hero h1 {
    font-size: var(--text-display);
    font-weight: 700;
    color: #fff;
    margin-block-end: var(--space-5);
    max-inline-size: 22ch;
  }
  .hero h1 .accent {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
  }
  .hero__subtext {
    font-size: clamp(1.05rem, 1vw + 0.8rem, 1.25rem);
    color: rgba(255, 255, 255, 0.78);
    margin-block-end: var(--space-8);
    max-inline-size: 42rem;
    line-height: 1.55;
  }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-12); }
  .hero__stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 56rem;
    inline-size: 100%;
  }
  @media (width >= 48rem) {
    .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    /* Allow the card to shrink below content size in a grid track. */
    min-inline-size: 0;
    overflow: hidden;
  }
  .glass-card__value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw + 0.4rem, 2.1rem);
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.05;
    /* Defensive: never let an over-long stat value push the card past its column. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .glass-card__label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-block-start: var(--space-2);
    overflow-wrap: anywhere;
  }

  /* ── PAGE HEADER (non-home pages) ─────── */
  .page-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #07152F 0%, #0A1F44 100%);
    color: #fff;
    padding-block: clamp(7rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem);
  }
  .page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 80% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 70%),
                radial-gradient(60% 60% at 10% 90%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .page-header > .container { position: relative; }
  .page-header__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-emerald);
    margin-block-end: var(--space-4);
  }
  .page-header h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
    max-inline-size: 22ch;
    margin-block-end: var(--space-5);
  }
  .page-header__subtext {
    font-size: clamp(1rem, 0.7vw + 0.85rem, 1.2rem);
    color: rgba(255, 255, 255, 0.75);
    max-inline-size: 50rem;
  }

  /* ── BUTTONS ───────────────────────────── */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.7rem;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
  }
  .button--primary {
    background: var(--brand-gradient);
    /* Size the gradient to the full border-box, otherwise the 1.5px transparent
       border on .button shows the gradient EXTENDED past its 0%/100% stops,
       which renders as solid-blue and solid-green strips along the edges. */
    background-origin: border-box;
    background-clip: border-box;
    color: #fff;
    box-shadow: 0 10px 28px -10px rgba(16, 185, 129, 0.5);
  }
  .button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -12px rgba(16, 185, 129, 0.65);
    color: #fff;
    filter: brightness(1.05);
  }
  .button--outline-light {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
  }
  .button--outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-brand-emerald);
    color: #fff;
    transform: translateY(-2px);
  }
  .button--outline-dark {
    background: transparent;
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
  }
  .button--outline-dark:hover {
    background: var(--color-brand-navy);
    color: #fff;
    transform: translateY(-2px);
  }
  .button--ghost {
    background: transparent;
    color: var(--color-brand-navy);
    padding-inline: var(--space-3);
  }
  .button--ghost:hover { color: var(--color-brand-emerald-ink); }
  .button--large { padding: 1rem 1.9rem; font-size: 1rem; }
  .button--block { width: 100%; }
  .button svg {
    inline-size: 1.05em;
    block-size: 1.05em;
    flex-shrink: 0; /* never let the icon collapse when the flex parent gets tight */
  }

  /* ── LIVE RATES TICKER (TradingView widget) ─────── */
  .ticker-wrap {
    background: rgba(7, 21, 47, 0.92);
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    /* Let the TradingView iframe set its own height (compact mode is the
       thinnest TV will go without cropping content). */
  }
  .ticker-wrap .tradingview-widget-container { padding-inline: var(--space-3); }
  .ticker-wrap .tradingview-widget-container iframe { display: block; }
  /* TradingView's text attribution — hidden, the in-widget TV logo on the
     left of the iframe satisfies their attribution requirement. */
  .ticker-wrap .tradingview-widget-copyright { display: none; }

  /* Disclaimer row: white background of the intro section, flush right against viewport edge. */
  .ticker-disclaimer-row {
    background: #fff;
    padding-block: 0.4rem 0;
    padding-inline-end: var(--space-4);
  }
  .ticker-disclaimer {
    display: block;
    text-align: end;
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    letter-spacing: 0.02em;
    font-style: italic;
  }

  /* ── SECTION HEADER ────────────────────── */
  .section__header { max-inline-size: 50rem; margin-block-end: var(--space-10); }
  .section__header--center { margin-inline: auto; text-align: center; }
  .section__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-emerald-ink);
    margin-block-end: var(--space-3);
  }
  .section--dark .section__eyebrow { color: var(--color-brand-emerald); }
  .section__title { font-size: var(--text-h2); margin-block-end: var(--space-3); max-inline-size: 26ch; }
  .section__lede {
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
  }
  .section--dark .section__lede { color: var(--color-text-on-dark); }

  /* ── CARDS ─────────────────────────────── */
  .card {
    background: #fff;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(16, 185, 129, 0.4);
  }
  .card__icon-wrap {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-4);
    color: #fff;
  }
  .card__icon-wrap--soft {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1));
    color: var(--color-brand-emerald-ink);
  }
  .card__icon-wrap svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .card h3 { margin-block-end: var(--space-2); font-size: 1.1rem; }
  .card p { color: var(--color-text-muted); font-size: 0.95rem; max-inline-size: none; }
  .card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: var(--space-4);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-brand-emerald-ink);
    white-space: nowrap;
    transition: gap var(--transition-base);
  }
  .card:hover .card__link { gap: 0.7rem; }
  .card__link:hover { color: var(--color-brand-emerald-ink); }

  /* ── CHECKLIST ─────────────────────────── */
  .checklist { list-style: none; display: grid; gap: var(--space-3); }
  .checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-1);
    color: var(--color-text);
  }
  .checklist li::before {
    content: "";
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background: var(--color-brand-emerald-ink);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 80% no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 80% no-repeat;
    margin-block-start: 0.25em;
  }
  /* ── TWO COL ───────────────────────────── */
  .two-col { display: grid; gap: var(--space-10); align-items: center; }
  @media (width >= 56rem) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
  /* Reversed only matters on desktop where columns sit side-by-side. On mobile
     (single-column stack) keep the body-then-image DOM order so the image
     always reads as belonging to the text directly above it — otherwise a
     reversed section's image stacks immediately after the previous section's
     image, looking like both belong to the same text. */
  @media (width >= 56rem) {
    .two-col--reversed .two-col__media { order: -1; }
  }
  .two-col__media {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: var(--color-bg-subtle);
  }
  .two-col__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .two-col__media::before {
    content: "";
    position: absolute;
    inset: -1rem;
    background: var(--brand-gradient);
    opacity: 0.18;
    filter: blur(40px);
    z-index: -1;
    border-radius: var(--radius-xl);
  }
  .two-col__body > * + * { margin-block-start: var(--space-4); }
  .two-col__pill {
    position: absolute;
    inset-block-end: -1.25rem;
    inset-inline-start: -1.25rem;
    background: #fff;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: none;
  }
  @media (width >= 48rem) { .two-col__pill { display: block; } }
  .two-col__pill-label { font-size: 0.7rem; color: var(--color-text-subtle); }
  .two-col__pill-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ── SERVICES GRID ─────────────────────── */
  .services-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (width >= 40rem) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 64rem) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
  /* Two-card variant for the homepage Products & services block. */
  .services-grid--two { max-inline-size: 56rem; margin-inline: auto; }
  @media (width >= 64rem) {
    .services-grid--two { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── SECTOR / VALUE GRID ───────────────── */
  .sector-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (width >= 40rem) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 64rem) { .sector-grid { grid-template-columns: repeat(3, 1fr); } }

  /* ── PROCESS STEPS (dark section) ───────── */
  .process-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (width >= 40rem) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (width >= 64rem) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (width >= 64rem) {
    .process-grid--three { grid-template-columns: repeat(3, 1fr); }
  }
  .process-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .process-step__number {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-block-end: var(--space-4);
  }
  .process-step h3 { color: #fff; font-size: 1.15rem; margin-block-end: var(--space-2); }
  .process-step p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }

  /* ── TESTIMONIALS ──────────────────────── */
  .testimonial-grid { display: grid; gap: var(--space-5); }
  @media (width >= 56rem) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
  .testimonial {
    padding: var(--space-8);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .testimonial__stars {
    display: flex;
    gap: 0.15rem;
    color: var(--color-brand-emerald);
    margin-block-end: var(--space-3);
  }
  .testimonial__stars svg { inline-size: 1rem; block-size: 1rem; fill: currentColor; }
  .testimonial blockquote {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.6;
  }
  .testimonial__author {
    margin-block-start: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .testimonial__avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .testimonial__name { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
  .testimonial__role { color: var(--color-text-subtle); font-size: 0.8rem; }

  /* ── FAQ ───────────────────────────────── */
  .faq { max-inline-size: 50rem; margin-inline: auto; }
  .faq-item {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-5);
  }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-heading);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    font-size: 1.5em;
    color: var(--color-brand-emerald-ink);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    font-weight: 400;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--color-brand-emerald-ink); }
  .faq-item__body { padding-block-start: var(--space-3); color: var(--color-text-muted); font-size: 0.97rem; max-inline-size: 60rem; }

  /* ── QUICK NAV (services page) ─────────── */
  .quick-nav {
    position: sticky;
    inset-block-start: var(--header-height);
    z-index: 30;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-3);
    transition: inset-block-start 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .quick-nav__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
  }
  .quick-nav__list::-webkit-scrollbar { display: none; }
  .quick-nav__list a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  }
  .quick-nav__list a:hover {
    border-color: var(--color-brand-emerald-ink);
    color: var(--color-brand-emerald-ink);
  }
  .quick-nav__list a.is-active,
  .quick-nav__list a.is-active:hover {
    background: var(--brand-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.5);
  }

  /* ── CONTACT FORM ──────────────────────── */
  .contact-form {
    display: grid;
    gap: var(--space-4);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
  .contact-form > h3 { margin-block-end: 0; }
  .contact-form .form-intro { font-size: 0.9rem; color: var(--color-text-subtle); margin-block-start: -0.3rem; }
  .contact-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-block-end: var(--space-2);
    color: var(--color-text);
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    inline-size: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--color-text);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-brand-emerald-ink);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
  }
  .contact-form textarea { resize: vertical; min-block-size: 7rem; }
  .contact-form [aria-invalid="true"] { border-color: var(--color-error); }
  .contact-form .error-msg {
    display: block;
    font-size: 0.85rem;
    color: var(--color-error);
    margin-block-start: 0.25rem;
    min-block-size: 1em;
  }
  .form-grid { display: grid; gap: var(--space-4); }
  @media (width >= 40rem) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
  .honeypot { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }
  .form-success {
    text-align: center;
    padding: var(--space-12) var(--space-6);
  }
  .form-success__icon {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--brand-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-block-end: var(--space-5);
  }
  .form-success__icon svg { inline-size: 2rem; block-size: 2rem; }
  .form-success h3 { color: var(--color-text); margin-block-end: var(--space-2); }
  .form-success p { color: var(--color-text-muted); margin-inline: auto; }
  .form-fineprint { font-size: 0.75rem; color: var(--color-text-subtle); text-align: center; margin-block-start: var(--space-2); }
  .form-error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: var(--color-error);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
  }

  /* ── CONTACT INFO ──────────────────────── */
  .contact-info {
    display: grid;
    gap: var(--space-4);
  }
  .contact-info__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    color: var(--color-text);
    text-decoration: none;
  }
  .contact-info__row:hover {
    border-color: var(--color-brand-emerald-ink);
    color: var(--color-text);
  }
  .contact-info__icon {
    flex-shrink: 0;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    background: var(--brand-gradient);
    color: #fff;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-info__icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .contact-info__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-block-end: 0.125rem;
  }
  .contact-info__value {
    display: block;
    font-weight: 500;
    color: var(--color-text);
  }

  /* ── CTA BAND ──────────────────────────── */
  .cta-band {
    background: linear-gradient(135deg, #07152F 0%, #0A1F44 60%, #102B5C 100%);
    color: #fff;
    padding-block: var(--section-padding);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 0%, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .cta-band > .container { position: relative; }
  .cta-band h2 { color: #fff; margin-block-end: var(--space-3); max-inline-size: 28ch; margin-inline: auto; }
  .cta-band p { color: rgba(255, 255, 255, 0.78); margin-inline: auto; margin-block-end: var(--space-7); max-inline-size: 40rem; }
  .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

  /* ── FOOTER ────────────────────────────── */
  .site-footer {
    background: var(--color-brand-navy-deep);
    color: rgba(255, 255, 255, 0.65);
    padding-block: var(--space-16) var(--space-6);
    position: relative;
    overflow: hidden;
  }
  .site-footer::before {
    content: "";
    position: absolute;
    inset-block-start: -10rem;
    inset-inline-end: -10rem;
    inline-size: 24rem;
    block-size: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
  }
  .site-footer > .container { position: relative; }
  .site-footer__grid {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: 1fr;
    padding-block-end: var(--space-10);
  }
  @media (width >= 48rem) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-8); }
  }
  .site-footer h4 {
    color: #fff;
    font-size: 0.95rem;
    margin-block-end: var(--space-4);
  }
  .site-footer__brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; max-inline-size: 28ch; margin-block: var(--space-4) var(--space-5); }
  .site-footer__contact { font-style: normal; display: grid; gap: var(--space-2); font-size: 0.88rem; }
  .site-footer__contact a { color: rgba(255, 255, 255, 0.75); }
  .site-footer__contact a:hover { color: var(--color-brand-emerald); }
  .site-footer ul { list-style: none; display: grid; gap: var(--space-2); }
  .site-footer a { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; }
  .site-footer a:hover { color: var(--color-brand-emerald); }
  .site-footer__newsletter form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.3rem;
    margin-block-start: var(--space-3);
  }
  .site-footer__newsletter input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.55rem 1rem;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
  }
  .site-footer__newsletter input::placeholder { color: rgba(255, 255, 255, 0.4); }
  .site-footer__newsletter button {
    background: var(--brand-gradient);
    border-radius: 50%;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .site-footer__newsletter button svg { inline-size: 1rem; block-size: 1rem; }
  .site-footer__socials {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
  }
  .site-footer__socials a {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base), color var(--transition-base);
  }
  .site-footer__socials a:hover {
    border-color: var(--color-brand-emerald);
    color: var(--color-brand-emerald);
  }
  .site-footer__socials svg { inline-size: 1rem; block-size: 1rem; }
  .site-footer__bar {
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
    padding-block-start: var(--space-5);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
  }
  .site-footer__compliance {
    margin-block-end: var(--space-4);
    line-height: 1.6;
    max-inline-size: 80ch;
  }
  .site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  @media (width >= 48rem) {
    .site-footer__legal {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-5);
    }
  }
  .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .site-footer__credit {
    margin: var(--space-5) 0 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    letter-spacing: 0.05em;
  }
  .site-footer__credit a { color: rgba(255, 255, 255, 0.55); }
  .site-footer__credit a:hover { color: rgba(255, 255, 255, 0.85); }

  /* ── COOKIE BANNER ─────────────────────── */
  .cookie-banner {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    z-index: 200;
    max-inline-size: 30rem;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    display: none;
  }
  .cookie-banner.is-visible { display: block; }
  .cookie-banner h4 { font-size: 0.95rem; margin-block-end: var(--space-2); }
  .cookie-banner p { font-size: 0.85rem; color: var(--color-text-muted); margin-block-end: var(--space-4); max-inline-size: none; }
  .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
  .cookie-banner__actions .button { padding: 0.5rem 1rem; font-size: 0.85rem; }

  /* ── REVEAL ───────────────────────────── */
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .js-reveal [data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* ── HERO LOAD-IN SEQUENCE ─────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .hero__badge,
    .hero h1,
    .hero__subtext,
    .hero__ctas,
    .hero__stats {
      opacity: 0;
      animation: hero-rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    .hero__badge   { animation-delay: 100ms; }
    .hero h1       { animation-delay: 250ms; }
    .hero__subtext { animation-delay: 400ms; }
    .hero__ctas    { animation-delay: 550ms; }
    .hero__stats   { animation-delay: 700ms; }
  }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── PROSE (legal pages) ──────────────── */
  .prose { max-inline-size: 50rem; margin-inline: auto; }
  .prose h2 { margin-block: var(--space-10) var(--space-3); font-size: var(--text-h3); }
  .prose h3 { margin-block: var(--space-6) var(--space-2); font-size: 1.1rem; }
  .prose p { margin-block-end: var(--space-4); color: var(--color-text-muted); max-inline-size: 70ch; }
  .prose ul, .prose ol { margin-block-end: var(--space-4); padding-inline-start: 1.25rem; color: var(--color-text-muted); }
  .prose li { margin-block-end: 0.5rem; }
  .prose a { color: var(--color-brand-emerald-ink); }
  .prose strong { color: var(--color-text); font-weight: 600; }
  .prose__updated {
    color: var(--color-text-subtle);
    font-size: 0.85rem;
    margin-block-end: var(--space-8);
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}