/* ==========================================================================
   Vokkl — styles.css (single stylesheet for every page)

   CONTENTS
     1.  Tokens ............ colours, type scale, spacing, radii, shadows, motion
     2.  Fonts ............. Funnel Sans + Inter (@font-face, unicode-range)
     3.  Reset / base
     4.  Typography ........ eyebrow, section heading, page intro
     5.  Layout ............ container, section, decorative shapes
     6.  Components ........ button, card, chip, badge, logo tile, check list,
                             mock-up, pricing card + meter, FAQ, form card, mega-menu
     7.  Header + navigation (scroll progress, brand, menu toggle, nav)
     8.  Footer
     9.  Modal ............. pricing-page <dialog>
     10. HubSpot forms ..... shared theme for every embedded HubSpot form
     11. Motion ............ keyframes, scroll reveal, parallax speeds
     12. Pages ............. home, platform, pricing, request demo, careers,
                             partners, FAQ
     13. Utilities ......... visually hidden, skip link, cursor glow,
                             reduced motion (last, so it overrides everything)

   Breakpoints (mobile-first, min-width; written literally because custom
   properties cannot be used in media queries). Media queries sit next to
   the rules they modify.
     sm  480px   large phones
     md  768px   tablets / two-column layouts
     lg  1024px  desktop header + mega-menus
     xl  1280px  wide desktop
   ========================================================================== */

@import url("../vokkl-tokens.css");


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand */
  --color-accent: var(--vokkl-green);
  --color-accent-dark: var(--vokkl-green-ink);
  --color-accent-bright: var(--vokkl-green);
  --color-mint: var(--vokkl-lime);

  /* Ink (dark surfaces) */
  --color-ink: var(--vokkl-navy);
  --color-ink-deep: color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep));
  --color-ink-raised: color-mix(in srgb, var(--vokkl-navy) 88%, var(--vokkl-navy-mid));
  --color-ink-raised-hover: color-mix(in srgb, var(--vokkl-navy) 78%, var(--vokkl-navy-mid));
  --color-panel: color-mix(in srgb, var(--vokkl-navy) 94%, var(--vokkl-navy-mid));
  --color-panel-deep: var(--vokkl-navy-dark);
  --color-panel-deep-hover: var(--vokkl-navy-dark);

  /* Text */
  --color-muted: var(--vokkl-fg3);
  --color-muted-soft: color-mix(in srgb, var(--vokkl-fg3) 70%, transparent);
  --color-muted-faint: color-mix(in srgb, var(--vokkl-fg3) 60%, transparent);
  --color-hero-copy: var(--vokkl-fg3);
  --color-nav: color-mix(in srgb, var(--vokkl-navy-light) 70%, white);
  --color-slate: var(--vokkl-navy-mid);
  --color-grey: var(--vokkl-navy-light);

  /* Light surfaces */
  --color-white: var(--vokkl-surface);
  --color-light: var(--vokkl-navy-tint);
  --color-surface: var(--vokkl-bg);
  --color-surface-alt: var(--vokkl-navy-tint);
  --color-well: color-mix(in srgb, var(--vokkl-navy-tint) 70%, transparent);
  --color-well-soft: color-mix(in srgb, var(--vokkl-navy-tint) 45%, transparent);
  --color-line: color-mix(in srgb, var(--vokkl-navy) 12%, transparent);
  --color-line-strong: color-mix(in srgb, var(--vokkl-navy) 22%, transparent);
  --color-fill: color-mix(in srgb, var(--vokkl-navy) 6%, transparent);

  /* Mint family */
  --color-mint-wash: var(--vokkl-success-bg);
  --color-mint-soft: color-mix(in srgb, var(--vokkl-success-bg) 50%, white);
  --color-mint-line: color-mix(in srgb, var(--vokkl-green) 40%, white);
  --color-mint-border: color-mix(in srgb, var(--vokkl-green) 18%, white);
  --color-mint-icon: var(--vokkl-green-ink);
  --color-accent-tint: color-mix(in srgb, var(--vokkl-green) 8%, transparent);
  --color-accent-tint-strong: color-mix(in srgb, var(--vokkl-green) 14%, transparent);
  --color-accent-border: color-mix(in srgb, var(--vokkl-green) 45%, transparent);

  /* Warning / "challenge" family */
  --color-coral: color-mix(in srgb, var(--vokkl-danger) 55%, white);
  --color-clay: var(--vokkl-danger-text);
  --color-clay-wash: var(--vokkl-danger-bg);
  --color-clay-line: color-mix(in srgb, var(--vokkl-danger) 30%, white);
  --color-clay-dot: var(--vokkl-danger);
  --color-error: var(--vokkl-danger);
  --color-error-text: color-mix(in srgb, var(--vokkl-danger) 55%, white);

  /* Text and lines on dark surfaces */
  --color-on-dark: var(--vokkl-navy-tint);
  --color-on-dark-muted: color-mix(in srgb, var(--vokkl-navy-tint) 70%, transparent);
  --color-on-dark-subtle: color-mix(in srgb, var(--vokkl-navy-tint) 55%, transparent);
  --color-on-dark-line: color-mix(in srgb, var(--vokkl-navy-tint) 16%, transparent);
  --color-on-dark-fill: color-mix(in srgb, var(--vokkl-navy-tint) 6%, transparent);

  /* Page washes */
  --wash-mint:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--vokkl-lime) 90%, transparent) 0, color-mix(in srgb, var(--vokkl-lime) 0%, transparent) 27%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--vokkl-green) 20%, transparent) 0, color-mix(in srgb, var(--vokkl-green) 0%, transparent) 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--vokkl-success-bg) 50%, white) 0%, var(--vokkl-surface) 78%);

  /* Typography */
  --font-sans: "Funnel Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-3xs: 10.5px;
  --text-2xs: 11px;
  --text-xs: 12.5px;
  --text-sm: 13px;
  --text-md: 14.5px;
  --text-base: 15px;
  --text-lead: 1.08rem;
  --text-lead-lg: 1.12rem;
  --text-lg: clamp(1.4rem, 2.4vw, 1.9rem);
  --text-xl: clamp(1.6rem, 2.8vw, 2.3rem);
  --text-2xl: clamp(1.9rem, 3.6vw, 3.1rem);
  --text-3xl: clamp(2rem, 4.2vw, 3.5rem);
  --text-title: clamp(2rem, 4.4vw, 3.4rem);
  --text-4xl: clamp(2.2rem, 5vw, 4rem);
  --text-5xl: clamp(2.5rem, 5.6vw, 4.6rem);
  --tracking-tight: -0.035em;
  --tracking-caps: 0.04em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --gutter: 24px;
  --section-space-sm: clamp(56px, 7vw, 96px);
  --section-space-md: clamp(72px, 9vw, 130px);
  --section-space-lg: clamp(80px, 10vw, 140px);
  --page-space-top: clamp(60px, 8vw, 110px);
  --page-space-bottom: clamp(80px, 10vw, 140px);

  /* Containers */
  --container: 1180px;
  --container-wide: 1280px;
  --container-mid: 1080px;
  --container-read: 900px;
  --container-narrow: 820px;
  --container-form: 620px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 18px 44px color-mix(in srgb, var(--vokkl-navy) 7%, transparent);
  --shadow-card-hover: 0 26px 60px color-mix(in srgb, var(--vokkl-navy) 12%, transparent);
  --shadow-lift: 0 30px 60px -28px color-mix(in srgb, var(--vokkl-navy) 35%, transparent);
  --shadow-mock: 0 30px 60px color-mix(in srgb, var(--vokkl-navy) 10%, transparent);
  --shadow-glow: 0 14px 34px color-mix(in srgb, var(--vokkl-green) 30%, transparent);
  --shadow-tile-hover: 0 18px 40px -18px color-mix(in srgb, var(--vokkl-green) 45%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 0.2s;
  --duration: 0.28s;
  --duration-slow: 0.4s;
  --duration-reveal: 0.9s;

  /* Layering */
  --z-header: 50;
  --z-menu: 60;
  --z-progress: 70;
  --z-cursor: 90;
  --z-skip: 100;

  /* Header */
  --header-offset: 80px;
}

/* ==========================================================================
   2. FONTS
   ========================================================================== */

/* Funnel Sans is a variable font (300–800). Inter serves the scripts Funnel
   Sans lacks; each subset file is variable too, so one face covers 400–800. */
@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--color-accent-dark);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

summary {
  list-style: none;
}

/* Safari still renders the legacy marker unless this prefixed pseudo is hidden. */
summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important; /* Must beat component display rules so the hidden attribute always wins (form panels). */
}

/* Anchored sections stop below the sticky header. */
section[id],
article[id] {
  scroll-margin-top: var(--header-offset);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Eyebrow — the uppercase 13px label above headings and inside mock-ups.
   Colour modifiers cover every context the label appears in. */
.eyebrow {
  display: block;
  color: var(--color-accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.eyebrow--mint {
  color: var(--color-mint);
}

.eyebrow--accent {
  color: var(--color-accent);
}

.eyebrow--muted {
  color: var(--color-muted);
}

.eyebrow--faint {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 50%, transparent);
}

.eyebrow--subtle {
  color: var(--color-on-dark-subtle);
}

/* Inline arrow links that use the eyebrow type ("Visit SalesIntel →"). */
a.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

a.eyebrow:hover {
  color: var(--color-accent);
}

.section--dark a.eyebrow:hover,
.form-page a.eyebrow:hover {
  color: var(--color-white);
}

@media (min-width: 768px) {
  a.eyebrow {
    min-height: 0;
  }
}

/* Section heading — title + optional lead paragraph.
   --center  centred block        --split  title left, lead bottom-right
   Title sizes: default (3xl), --sm (2xl), --lg (4xl). */
.section-heading__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.section-heading__title--sm {
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section-heading__title--lg {
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: -0.04em;
}

.section-heading__eyebrow + .section-heading__title {
  margin-top: 18px;
}

.section-heading__lead {
  margin-top: 18px;
  color: var(--color-muted);
  font-size: var(--text-lead-lg);
  line-height: 1.6;
}

.section--dark .section-heading__lead {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 72%, transparent);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .section-heading__title,
.section-heading--center .section-heading__lead {
  margin-inline: auto;
}

.section-heading--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: end;
  gap: var(--space-5);
}

.section-heading--split .section-heading__lead {
  margin: 0;
  padding-bottom: 10px;
}

/* Page intro — eyebrow + title + lead at the top of ink pages
   (careers, partners). */
.page-intro {
 /* max-width: 60ch;*/
}

.page-intro__title {
  margin-top: 18px;
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}

.page-intro__title--balance {
  text-wrap: balance;
}

.page-intro__lead {
  margin-top: 18px;
  color: color-mix(in srgb, var(--vokkl-navy-tint) 72%, transparent);
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

/* ---------- Container --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.container--wide {
  max-width: var(--container-wide);
}

.container--read {
  max-width: var(--container-read);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ---------- Section ----------------------------------------------------------- */

/* overflow: clip contains decorative blobs without creating a scroll
   container, so position: sticky still works inside sections. */
.section {
  position: relative;
  overflow: clip;
  padding: var(--section-space-md) var(--gutter);
}

.section--sm {
  padding-block: var(--section-space-sm);
}

.section--lg {
  padding-block: var(--section-space-lg);
}

.section--page {
  padding-block: var(--page-space-top) var(--page-space-bottom);
}

.section--dark {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.section--alt {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-line);
}

.section--surface {
  background: var(--color-surface);
}

.section--wash {
  background: var(--wash-mint);
}

/* Content above decorative layers */
.section > .container {
  position: relative;
}

/* ---------- Decorative shapes ------------------------------------------------- */

/* Positioned per instance in page CSS; always aria-hidden in markup. */
.decor {
  position: absolute;
  pointer-events: none;
}

.decor--glow {
  border-radius: 50%;
  background: radial-gradient(circle, var(--decor-color, color-mix(in srgb, var(--vokkl-green) 20%, transparent)), color-mix(in srgb, var(--vokkl-green) 0%, transparent) 65%);
}

.decor--tile {
  border-radius: 20%;
  background: var(--color-accent);
  transform: rotate(28deg);
}

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* ---------- Button ------------------------------------------------------------ */

/* Button — pill-shaped call to action.
   .button                 base (15px / 15px 24px)
   .button--primary        green, darkens on hover (light surfaces)
   .button--accent         green with glow, flips to white on hover (dark surfaces)
   .button--dark           ink, turns green on hover
   .button--outline        hairline border, ink text
   .button--outline-strong ink border, fills ink on hover
   .button--outline-light  light border on dark surfaces
   .button--ghost-dark     header "Log in" style
   .button--lg / --compact / --block / --caps   size + type modifiers */
.button,
.hubspot-form .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 15px var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--duration) var(--ease-out),
    background-color var(--duration) ease,
    border-color var(--duration) ease,
    color var(--duration) ease,
    box-shadow var(--duration) ease;
}

.button:hover,
.hubspot-form .hs-button:hover {
  transform: translateY(-3px);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.button--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.button--accent,
.hubspot-form .hs-button {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
}

.button--accent:hover,
.hubspot-form .hs-button:hover {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--vokkl-green) 20%, transparent);
}

.button--dark {
  background: var(--color-ink);
  color: var(--color-white);
}

.button--dark:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.button--outline {
  border-color: var(--color-line);
  background: var(--color-white);
  color: var(--color-ink);
}

.button--outline:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--outline-strong {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--outline-strong:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.button--outline-light {
  border-color: color-mix(in srgb, var(--vokkl-navy-tint) 30%, transparent);
  color: var(--color-on-dark);
}

.button--outline-light:hover {
  border-color: var(--color-on-dark);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 8%, transparent);
  color: var(--color-on-dark);
}

.button--ghost-dark {
  border-color: color-mix(in srgb, var(--vokkl-navy-tint) 22%, transparent);
  color: var(--color-nav);
}

.button--ghost-dark:hover {
  border-color: color-mix(in srgb, var(--vokkl-lime) 70%, transparent);
  background: var(--color-on-dark-fill);
  color: var(--color-white);
}

.button--lg {
  padding: 17px 28px;
  font-size: 16px;
}

.button--compact {
  padding: 11px 18px;
}

.button--block {
  display: flex;
  width: 100%;
}

.button--caps {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Card -------------------------------------------------------------- */

/* Card — white rounded surface.
   --raised       soft shadow, subtle lift on hover (home value cards)
   --interactive  larger lift on hover (partner cards)
   --dashed       placeholder card */
.card {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.card--raised {
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.card--raised:hover {
  border-color: color-mix(in srgb, var(--vokkl-green) 50%, transparent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.card--interactive {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card--interactive:hover {
  border-color: color-mix(in srgb, var(--vokkl-green) 50%, transparent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
}

.card--dashed {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 220px;
  border: 1.5px dashed color-mix(in srgb, var(--vokkl-navy) 20%, transparent);
  background: var(--color-surface);
  text-align: center;
}

.card__title {
  color: var(--color-ink);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.card__text {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.card__link {
  margin-top: auto;
  padding-top: 6px;
}

/* ---------- Chip -------------------------------------------------------------- */

/* Chip — rounded pill label. Tags are the small monospace-sized variant used
   inside mock-ups. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
}

.chip--soft {
  padding-left: var(--space-3);
  border-color: var(--color-mint-border);
  background: var(--color-mint-soft);
  color: var(--color-ink);
}

.chip--accent {
  padding: 11px 18px;
  border-color: color-mix(in srgb, var(--vokkl-green) 40%, transparent);
  background: var(--color-accent-tint);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.chip--accent:hover {
  background: color-mix(in srgb, var(--vokkl-green) 16%, transparent);
  transform: translateY(-3px);
}

.chip--sm {
  padding: 9px var(--space-4);
  font-size: 12px;
  font-weight: 400;
}

.chip--mint-dark {
  border-color: var(--color-accent-border);
  background: color-mix(in srgb, var(--vokkl-green) 10%, transparent);
  color: var(--color-mint);
}

.chip--outline-dark {
  border-color: color-mix(in srgb, var(--vokkl-navy-tint) 25%, transparent);
  color: color-mix(in srgb, var(--vokkl-navy-tint) 75%, transparent);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip__check {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  font-size: var(--text-3xs);
}

.tag--dark {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 10%, transparent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Badge ------------------------------------------------------------- */

/* Number badge — circular step / index markers.
   default   32px mint disc (audience list)
   --ring    46px outlined disc (timeline) */
.number-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.number-badge--ring {
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 55%, transparent);
  background: var(--color-surface-alt);
  color: var(--color-accent-dark);
  font-size: var(--text-sm);
  font-weight: 400;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
	z-index:0
}

.number-badge--ring:hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.08);
}

/* Status pill — the dotted "The challenge / The solution" labels. */
.status-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  padding: 9px 15px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--warning {
  border-color: var(--color-clay-line);
  background: var(--color-clay-wash);
  color: var(--color-clay);
}

.status-pill--warning::before {
  background: var(--color-clay-dot);
}

.status-pill--success {
  border-color: var(--color-mint-line);
  background: var(--vokkl-success-bg);
  color: var(--color-accent-dark);
}

.status-pill--success::before {
  background: var(--color-accent-bright);
}

/* ---------- Logo tile --------------------------------------------------------- */

/* Logo tile — integration name tiles in a grid.
   .logo-grid         auto-fit grid (partners page)
   .logo-grid--six    2 / 3 / 6 columns (home "stack" section)
   .logo-tile--dark   variant on ink surfaces */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-grid--six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 480px) {
  .logo-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .logo-grid--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  transition:
    transform 0.3s var(--ease-spring),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.logo-tile:hover {
  border-color: color-mix(in srgb, var(--vokkl-green) 60%, transparent);
  box-shadow: var(--shadow-tile-hover);
  transform: translateY(-4px);
}

.logo-tile--dark {
  min-width: 0;
  min-height: 68px;
  padding: var(--space-3) var(--space-2);
  border-color: var(--color-on-dark-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--vokkl-navy-tint) 5%, transparent);
  font-size: clamp(12.5px, 1.2vw, 15px);
  white-space: nowrap;
}

/* ---------- Check list -------------------------------------------------------- */

/* Check list — feature rows with a round check (or cross) icon.
   Icons use currentColor: the icon inherits --check-color / --cross-color.
   .check-list--compact   tighter rows (partner cards)
   .check-list--on-dark   colours for ink cards
   .check-list__item--excluded  greyed row with a cross icon */
.check-list {
  --check-color: var(--color-accent);
  --cross-color: var(--color-grey);
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list--compact {
  gap: 9px;
  margin-top: 2px;
  color: var(--color-ink);
}

.check-list--on-dark {
  --check-color: var(--color-mint);
  --cross-color: var(--color-light);
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-md);
  line-height: 1.5;
}

.check-list__icon {
  flex: none;
  margin-top: 2px;
  color: var(--check-color);
}

.check-list__item--excluded {
  color: var(--color-muted-faint);
}

.check-list__item--excluded .check-list__icon {
  color: var(--cross-color);
}

.check-list--on-dark .check-list__item--excluded {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 42%, transparent);
}

/* Slash list — the small "/ item" lists under feature descriptions. */
.slash-list {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  font-size: var(--text-xs);
  list-style: none;
}

.slash-list__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
}

.slash-list__item::before {
  content: "/";
  color: var(--color-accent);
}

/* ---------- Mock-up ----------------------------------------------------------- */

/* Mock-up — illustrative product UI windows (home hero console, feature
   screens). Pure presentation: these are aria-hidden or labelled figures. */
.mock {
  padding: 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-mock);
}

.mock--roomy {
  padding: var(--space-5);
}

.mock--framed {
  padding: 14px;
}

.mock__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.mock__stack {
  display: grid;
  gap: var(--space-2);
  margin-top: 14px;
}

.mock__divider {
  height: 1px;
  margin: 18px 0;
  border: 0;
  background: var(--color-line);
}

.mock__note {
  margin-top: 18px;
  padding: 15px;
  border-radius: var(--radius-md);
  background: var(--color-well);
  font-size: 13.5px;
  line-height: 1.55;
}

.mock__kicker {
  display: block;
  color: var(--color-accent-dark);
  font-size: var(--text-3xs);
  letter-spacing: 0.06em;
}

/* Row pill used in queue / feed / list mock-ups */
.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 80%, transparent);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.mock-row--start {
  justify-content: flex-start;
  color: var(--color-ink);
}

.mock-row--active {
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 40%, transparent);
  background: var(--color-accent-tint-strong);
  color: var(--color-accent-dark);
}

.mock-row--pulse {
  animation: pulse 2s ease-in-out infinite;
}

.mock-row--idle {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 50%, transparent);
  color: var(--color-muted-soft);
}

.mock-row--faint {
  background: var(--color-well-soft);
}

.mock-row--interactive {
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.mock-row--interactive:hover {
  background: color-mix(in srgb, var(--vokkl-green) 20%, transparent);
}

.mock-row--highlight {
  background: color-mix(in srgb, var(--vokkl-green) 10%, transparent);
  color: var(--color-ink);
}

.live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 1.6s infinite;
}

/* ---------- Pricing card + meter ---------------------------------------------- */

/* Pricing card — plan tile with price, usage meter, check list and CTA.
   --featured  the ink "Most popular" plan. */
.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  transform-origin: center bottom;
  transition:
    transform var(--duration-slow) var(--ease-spring),
    box-shadow var(--duration-slow) ease,
    border-color 0.3s ease;
}

.pricing-card:hover {
  border-color: color-mix(in srgb, var(--vokkl-green) 55%, transparent);
  box-shadow: 0 40px 80px -24px color-mix(in srgb, var(--vokkl-navy) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--vokkl-green) 25%, transparent);
  transform: translateY(-12px) scale(1.03);
}

.pricing-card--featured {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: var(--color-ink);
  box-shadow: 0 34px 70px color-mix(in srgb, var(--vokkl-navy) 20%, transparent);
  color: var(--color-on-dark);
}

.pricing-card--featured:hover {
  border-color: transparent;
  box-shadow: 0 50px 90px -20px color-mix(in srgb, var(--vokkl-navy) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--vokkl-lime) 55%, transparent), 0 0 40px color-mix(in srgb, var(--vokkl-green) 28%, transparent);
}

.pricing-card--featured::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vokkl-green) 30%, transparent), color-mix(in srgb, var(--vokkl-green) 0%, transparent) 65%);
  pointer-events: none;
}

.pricing-card--featured > * {
  position: relative;
}

.pricing-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.pricing-card__badge {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--vokkl-green) 22%, transparent);
  color: var(--color-mint);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.pricing-card__desc {
  min-height: 4.65em;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.pricing-card__price {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 48px;
  margin-top: 18px;
}

.pricing-card__amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pricing-card__amount--text {
  padding-bottom: var(--space-1);
  font-size: clamp(1.7rem, 2.3vw, 2.2rem);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.pricing-card__unit {
  padding-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: 14px;
}

.pricing-card__terms {
  margin-top: 10px;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pricing-card__usage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 22px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-navy) 5%, transparent);
}

.pricing-card__usage-label {
  color: var(--color-ink);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pricing-card__features {
  flex: 1;
  margin-bottom: 26px;
}

.pricing-card__cta {
  padding: 14px var(--space-5);
  font-size: var(--text-md);
}

.pricing-card--featured :is(.pricing-card__desc, .pricing-card__unit) {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 65%, transparent);
}

.pricing-card--featured .pricing-card__terms {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 60%, transparent);
}

.pricing-card--featured .pricing-card__usage {
  background: color-mix(in srgb, var(--vokkl-green) 16%, transparent);
}

.pricing-card--featured .pricing-card__usage-label {
  color: var(--color-on-dark);
}

/* Meter — thin progress track, reused by the call-analysis mock-up. */
.meter {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--vokkl-navy) 12%, transparent);
}

.meter--on-dark {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 14%, transparent);
}

.meter--thin {
  height: 6px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--vokkl-navy) 8%, transparent);
}

.meter__fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  transition: width 1.1s var(--ease-out);
}

/* --fill is set per instance in the page sections; main.js adds .is-filled
   when the meter scrolls into view. Without JS the final width shows. */
.meter__fill.is-filled,
html:not(.js) .meter__fill {
  width: var(--fill, 0%);
}

.meter__fill--slate {
  background: var(--color-slate);
}

.meter__fill--accent {
  background: var(--color-accent);
}

/* ---------- FAQ --------------------------------------------------------------- */

/* FAQ — accordion built on native <details>/<summary>. */
.faq__title {
  margin: 12px 0 clamp(24px, 3vw, 36px);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.faq__group + .faq__group {
  margin-top: clamp(44px, 5vw, 64px);
}

.faq__group-title {
  margin-bottom: 18px;
  color: var(--color-ink);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.faq__item {
  padding-block: var(--space-1);
  border-top: 1px solid var(--color-line);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.faq__question {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: 15px;
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: color 0.25s ease;
}

.faq__question:hover {
  color: var(--color-accent-dark);
}

.faq__number {
  flex: none;
  color: var(--color-accent);
  font-size: var(--text-2xs);
}

.faq__answer {
  max-width: 62ch;
  margin: 0 0 18px 27px;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.6;
  animation: fade-up 0.4s ease backwards;
}

/* ---------- Form card ---------------------------------------------------- */

/* Form card — the glass panel that holds the HubSpot demo form on
   request-demo.html (ink background). */
.form-card {
  padding: clamp(24px, 3.2vw, 36px);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-2xl);
  background: var(--color-on-dark-fill);
  text-align: left;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.form-card--centered {
  max-width: var(--container-form);
  margin: clamp(40px, 5vw, 64px) auto 0;
}

/* ---------- Mega-menu --------------------------------------------------------- */

/* Mega-menu — the Platform / Resources dropdown panels.
   Mobile: an accordion inside the nav panel. Desktop (≥1024px): a panel
   below the sticky header, opened by hover, focus or the chevron button. */
.mega-menu {
  display: none;
  flex-basis: 100%;
  padding-bottom: var(--space-2);
}

.site-nav__item.is-open > .mega-menu {
  display: block;
}

/* No-JS fallback: reveal on hover / keyboard focus. */
html:not(.js) .site-nav__item:is(:hover, :focus-within) > .mega-menu {
  display: block;
}

.mega-menu__panel {
  display: grid;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 12%, transparent);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  color: var(--color-white);
}

.mega-menu__main {
  padding: var(--space-4) var(--space-3) var(--space-3);
}

.mega-menu__heading {
  padding: 0 var(--space-3) var(--space-2);
  color: color-mix(in srgb, var(--vokkl-navy-tint) 50%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-menu__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 2px var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: var(--space-3);
  border-radius: 14px;
  color: var(--color-white);
  transition: background-color var(--duration-fast) ease;
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 7%, transparent);
  color: var(--color-white);
}

.mega-menu__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-green) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vokkl-lime) 18%, transparent);
  color: var(--color-mint);
}

.mega-menu__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mega-menu__arrow {
  color: var(--color-mint);
  font-weight: 600;
}

.mega-menu__desc {
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, var(--vokkl-navy-tint) 65%, transparent);
  font-size: 13.5px;
  line-height: 1.45;
}

.mega-menu__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 22px;
  margin: 10px var(--space-3) 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 12%, transparent);
}

.mega-menu__footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: color-mix(in srgb, var(--vokkl-navy-tint) 85%, transparent);
  font-size: 14px;
  font-weight: 600;
}

.mega-menu__footer-link:hover {
  color: var(--color-white);
}

/* Featured promo tile */
.mega-menu__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  overflow: hidden;
  padding: 26px;
  border-top: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 10%, transparent);
  background: var(--color-panel-deep);
  color: var(--color-on-dark);
  transition: background-color 0.25s ease;
}

.mega-menu__feature:hover {
  background: var(--color-panel-deep-hover);
  color: var(--color-on-dark);
}

.mega-menu__feature::before,
.mega-menu__feature::after {
  content: "";
  position: absolute;
  transform: rotate(28deg);
  pointer-events: none;
}

.mega-menu__feature::before {
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 44px;
  background: var(--color-mint);
  opacity: 0.22;
}

.mega-menu__feature::after {
  right: 30px;
  bottom: -70px;
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background: var(--color-accent);
  opacity: 0.3;
}

.mega-menu__feature-body {
  position: relative;
}

.mega-menu__kicker {
  display: block;
  color: var(--color-mint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-menu__feature-title {
  display: block;
  margin-top: var(--space-3);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mega-menu__feature-text {
  display: block;
  margin-top: 10px;
  color: var(--color-on-dark-muted);
  font-size: 14px;
  line-height: 1.55;
}

.mega-menu__feature-cta {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--z-menu);
    padding: 10px var(--gutter) 0;
    animation: fade-in 0.18s ease backwards;
  }

  .mega-menu__panel {
    grid-template-columns: minmax(0, 2.1fr) minmax(240px, 1fr);
    max-width: var(--container-mid);
    max-height: calc(100vh - 96px);
    margin-inline: auto;
    overflow-y: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 80px -24px color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 55%, transparent), 0 12px 24px -12px color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 25%, transparent);
  }

  .mega-menu__main {
    padding: 22px var(--space-5) var(--space-4);
  }

  .mega-menu__feature {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 10%, transparent);
  }

  .mega-menu__footer-link {
    min-height: 0;
  }
}

/* ==========================================================================
   7. HEADER + NAVIGATION
   ========================================================================== */

/* ---------- Scroll progress --------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-progress);
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 92%, transparent), color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 74%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--vokkl-green) 22%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vokkl-green) 0%, transparent) 0%, color-mix(in srgb, var(--vokkl-green) 85%, transparent) 22%, color-mix(in srgb, var(--vokkl-lime) 35%, transparent) 50%, color-mix(in srgb, var(--vokkl-green) 85%, transparent) 78%, color-mix(in srgb, var(--vokkl-green) 0%, transparent) 100%);
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
  max-width: var(--container);
  margin-inline: auto;
  padding: 11px var(--gutter);
}

/* ---------- Brand ------------------------------------------------------------- */

.brand {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}

.brand__logo {
  width: auto;
  height: 25px;
}

.brand__tagline {
  display: block;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--color-mint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Menu toggle (mobile) ---------------------------------------------- */

.nav-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 22%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-on-dark);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.nav-toggle:hover {
  border-color: color-mix(in srgb, var(--vokkl-lime) 70%, transparent);
  background: var(--color-on-dark-fill);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration-fast) ease;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before {
  top: -6px;
}

.nav-toggle__icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.js .nav-toggle {
  display: grid;
}

/* ---------- Main navigation (mobile first) ------------------------------------ */

/* Without JS the navigation simply sits below the logo as a static list. */
.site-nav {
  flex-basis: 100%;
}

.js .site-header__inner {
  flex-wrap: nowrap;
}

.js .site-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  padding: var(--space-3) var(--gutter) var(--space-6);
  background: color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 97%, transparent);
  border-bottom: 1px solid var(--color-on-dark-line);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 60%, transparent);
  animation: fade-in 0.18s ease backwards;
}

.js .site-nav.is-open {
  display: block;
}

.site-nav__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-nav__link {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 44px;
  padding: 11px var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-nav);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-white);
}

.site-nav__link:hover {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 8%, transparent);
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-mint));
  box-shadow: 0 0 10px color-mix(in srgb, var(--vokkl-green) 90%, transparent);
  transform: translateX(-50%);
}

.site-nav__toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-nav);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.site-nav__toggle:hover {
  color: var(--color-white);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 8%, transparent);
}

.site-nav__chevron {
  opacity: 0.7;
  transition: transform var(--duration-fast) ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__actions {
  display: grid;
  gap: 10px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-on-dark-line);
}

.site-nav__actions .button:hover {
  transform: none;
}

/* ---------- Main navigation (desktop) ----------------------------------------- */

@media (min-width: 1024px) {
  .site-header__inner,
  .js .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav-toggle,
  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    position: static;
    display: flex;
    flex: 1;
    flex-basis: auto;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-1);
    margin-inline: auto;
    padding: 5px;
  }

  /* The mega-menu is positioned against the (sticky) header. */
  .site-nav__item {
    position: static;
    flex-wrap: nowrap;
  }

  .site-nav__link {
    flex: none;
    min-height: 0;
    padding: 11px clamp(10px, 1.4vw, 18px);
    font-size: var(--text-xs);
  }

  /* Link + chevron button read as one pill, as in the original. */
  .site-nav__item--has-menu .site-nav__link {
    padding-right: 3px;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  }

  .site-nav__item--has-menu .site-nav__toggle {
    width: auto;
    height: auto;
    align-self: stretch;
    padding: 0 clamp(10px, 1.4vw, 18px) 0 3px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  }

  .site-nav__item--has-menu:hover :is(.site-nav__link, .site-nav__toggle),
  .site-nav__item--has-menu.is-open :is(.site-nav__link, .site-nav__toggle) {
    color: var(--color-white);
    background: color-mix(in srgb, var(--vokkl-navy-tint) 8%, transparent);
  }

  .site-nav__actions {
    display: flex;
    gap: clamp(10px, 1.4vw, 18px);
    margin: 0;
    padding: 0;
    border: 0;
  }
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer {
  padding: 26px var(--gutter);
  background: var(--color-ink);
  border-top: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 14%, transparent);
  color: var(--color-on-dark-subtle);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
  font-size: var(--text-sm);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer__logo {
  width: auto;
  height: 19px;
}

.site-footer__tagline {
  color: var(--color-mint);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.site-footer__nav {
  margin-left: auto;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-dark-subtle);
}

.site-footer__link:hover,
.site-footer__link[aria-current="page"] {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .site-footer__link {
    min-height: 0;
  }
}

/* ==========================================================================
   9. MODAL
   ========================================================================== */

/* Modal — native <dialog id="pricing-modal"> on pricing.html. One dialog,
   three views (.modal__view: free trial, talk to sales, demo), each with its
   own heading, intro and HubSpot form container. main.js shows the active
   view, locks page scroll (.is-modal-open on <html>) and returns focus to
   the triggering CTA on close. */
.modal {
  width: min(calc(100% - 32px), 620px);
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-2xl);
  background: var(--color-ink);
  box-shadow: 0 40px 90px -20px color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 60%, transparent);
  color: var(--color-on-dark);
}

.modal[open] {
  animation: modal-in 0.25s var(--ease-out) backwards;
}

.modal::backdrop {
  background: color-mix(in srgb, color-mix(in srgb, var(--vokkl-navy) 35%, var(--vokkl-navy-deep)) 72%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal__panel {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 22%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-on-dark);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.modal__close:hover {
  border-color: color-mix(in srgb, var(--vokkl-lime) 70%, transparent);
  background: var(--color-on-dark-fill);
}

/* Keeps the first line clear of the close button. */
.modal__eyebrow {
  padding-right: 52px;
}

.modal__title:focus {
  outline: none;
}

.modal__title {
  margin-top: 14px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.modal__text {
  margin-top: 10px;
  color: var(--color-on-dark-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.modal__form {
  margin-top: 26px;
}

.is-modal-open {
  overflow: hidden;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   10. HUBSPOT FORMS
   ========================================================================== */

/* .hubspot-form is ours: the container a HubSpot form renders into (the
   pricing-page popup views and the card on request-demo.html). Everything
   inside it is generated by HubSpot's v2 embed, so these class names belong
   to HubSpot, not to this codebase: .hs-form, fieldset.form-columns-1/2/3,
   .hs-form-field, .hs-form-required, .hs-field-desc, .hs-richtext, .input,
   .hs-input, .inputs-list, .hs-form-checkbox(-display), .hs-form-radio(-display),
   .hs-form-booleancheckbox(-display), .hs-fieldtype-*, .hs-error-msgs,
   .hs-error-msg, .hs_error_rollup, .legal-consent-container, .hs-submit,
   .actions, .hs-button, .submitted-message.

   If HubSpot renders the form inside its own iframe (a form not set to
   "raw HTML"), main.js links this stylesheet into that iframe and adds
   .hubspot-form .hubspot-form--framed to its <body>, so the same rules apply.
   Column layout uses a container query (not a media query) because inside
   an iframe a media query would measure the iframe, not the viewport. */
.hubspot-form {
  --hs-gap: 14px;
  container-type: inline-size;
  color: var(--color-on-dark);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* <body> of HubSpot's iframe when the form is rendered framed. */
.hubspot-form--framed {
  min-height: 0;
  margin: 0;
  background: transparent;
}

/* Loading / unavailable message (ours, removed once the form is ready). */
.hubspot-form__status {
  padding-block: var(--space-4);
  color: var(--color-on-dark-subtle);
  font-size: var(--text-sm);
}

html:not(.js) .hubspot-form__status {
  display: none;
}

/* Layout */
.hubspot-form .hs-form {
  display: grid;
  margin: 0;
}

.hubspot-form fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--hs-gap);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Two/three columns once the form itself is ≥ 520px wide: in both form
   layouts that happens from roughly the tablet breakpoint up. */
@container (min-width: 520px) {
  .hubspot-form .form-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hubspot-form .form-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* HubSpot hides its hidden fields with inline display:none, which these
   class rules deliberately do not override (spacing is margin-based so
   hidden fields and empty fieldsets take no space). */
.hubspot-form .hs-form-field {
  min-width: 0;
  margin-bottom: var(--hs-gap);
}

.hubspot-form .input {
  margin: 0;
}

/* Labels, required marker, help text */
.hubspot-form .hs-form-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--color-on-dark-subtle);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hubspot-form .hs-form-required {
  margin-left: 2px;
  color: var(--color-mint);
}

.hubspot-form .hs-field-desc {
  margin: 0 0 7px;
  color: var(--color-on-dark-subtle);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Text inputs, email, tel, number, textarea, select */
.hubspot-form .hs-input:not([type="checkbox"], [type="radio"], [type="file"]) {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 20%, transparent);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--vokkl-navy) 55%, transparent);
  color: var(--color-on-dark);
  font: inherit;
  font-size: 16px; /* ≥16px stops iOS zooming into the field on focus */
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hubspot-form .hs-input:not([type="checkbox"], [type="radio"], [type="file"]) {
    font-size: var(--text-base);
  }
}

.hubspot-form .hs-input::placeholder {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 45%, transparent);
  opacity: 1;
}

.hubspot-form .hs-input:hover {
  border-color: color-mix(in srgb, var(--vokkl-navy-tint) 35%, transparent);
}

.hubspot-form .hs-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.hubspot-form .hs-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vokkl-green) 45%, transparent);
  outline-offset: 1px;
}

.hubspot-form .hs-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hubspot-form .hs-input:is(.invalid, .error) {
  border-color: var(--color-error);
}

/* Keep the browser's autofill from painting the field white. */
.hubspot-form .hs-input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--color-on-dark);
  caret-color: var(--color-on-dark);
  box-shadow: inset 0 0 0 1000px var(--color-panel);
  transition: background-color 9999s ease-out 0s;
}

.hubspot-form textarea.hs-input {
  min-height: 120px;
  line-height: 1.5;
  resize: vertical;
}

/* Select: CSS-only chevron */
.hubspot-form select.hs-input {
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-mint) 50%),
    linear-gradient(135deg, var(--color-mint) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.hubspot-form select.hs-input.is-placeholder {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 45%, transparent);
}

.hubspot-form select.hs-input option {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

/* Checkbox and radio lists (including the legal-consent checkbox) */
.hubspot-form .inputs-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hubspot-form :is(.hs-form-checkbox-display, .hs-form-radio-display, .hs-form-booleancheckbox-display) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: 1.45;
  cursor: pointer;
}

.hubspot-form .hs-input:is([type="checkbox"], [type="radio"]) {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.hubspot-form .hs-input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Errors */
.hubspot-form .hs-error-msgs {
  gap: 2px;
  margin-top: 6px;
}

.hubspot-form .hs-error-msgs label {
  display: block;
  color: var(--color-error-text);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
}

.hubspot-form .hs_error_rollup {
  margin-bottom: var(--hs-gap);
}

/* Rich text and legal consent */
.hubspot-form .hs-richtext {
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

.hubspot-form .hs-richtext p + p {
  margin-top: var(--space-2);
}

.hubspot-form .legal-consent-container {
  margin-bottom: var(--hs-gap);
  color: var(--color-on-dark-subtle);
  font-size: 12px;
  line-height: 1.55;
}

.hubspot-form .legal-consent-container :is(.hs-richtext, .hs-form-booleancheckbox-display) {
  color: inherit;
  font-size: inherit;
}

.hubspot-form :is(.hs-richtext, .legal-consent-container) a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hubspot-form :is(.hs-richtext, .legal-consent-container) a:hover {
  color: var(--color-mint);
}

/* Submit — colours, pill shape and hover come from .button / .button--accent */
.hubspot-form .hs-submit {
  margin-top: 6px;
}

.hubspot-form .actions {
  margin: 0;
  padding: 0;
}

.hubspot-form .hs-button {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  -webkit-appearance: none;
  appearance: none;
}

.hubspot-form .hs-button:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 3px;
}

.hubspot-form .hs-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Thank-you message (HubSpot's "submitted-message"). The eyebrow line is
   the site's original "Request received" label; heading and text come
   from the thank-you message set in HubSpot. */
.hubspot-form .submitted-message {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--color-on-dark-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.hubspot-form .submitted-message::before {
  content: "Request received";
  color: var(--color-mint);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hubspot-form .submitted-message :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--color-on-dark);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hubspot-form .submitted-message p {
  margin: 0;
}

.hubspot-form .submitted-message a {
  color: var(--color-accent);
}

/* ==========================================================================
   11. MOTION
   ========================================================================== */

/* ---------- Keyframes --------------------------------------------------------- */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ring {
  0% {
    transform: scale(0.6);
    opacity: 0.55;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes waveform-bar {
  0%,
  100% {
    transform: scaleY(0.28);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes sweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes caret {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* ---------- Scroll reveal + parallax ------------------------------------------ */

/* Hidden only when JS is running (main.js adds .is-revealed), so content is
   always visible without JavaScript. Parallax uses the independent
   `translate` property, so it composes with this transform. */
.js .reveal:not(.is-revealed) {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal--left:not(.is-revealed) {
  transform: translateX(-34px);
}

.js .reveal--right:not(.is-revealed) {
  transform: translateX(34px);
}

.js .reveal.is-revealing {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Stagger steps for neighbouring reveals */
.reveal--delay-short {
  --reveal-delay: 80ms;
}

.reveal--delay-medium {
  --reveal-delay: 140ms;
}

.reveal--delay-long {
  --reveal-delay: 200ms;
}

.reveal--delay-longer {
  --reveal-delay: 270ms;
}

/* Parallax — main.js reads --parallax-speed (fraction of the distance from
   the viewport centre) and moves the element with `translate`. */
.parallax {
  --parallax-speed: 0;
}

.parallax--subtle {
  --parallax-speed: 0.03;
}

.parallax--gentle {
  --parallax-speed: 0.045;
}

.parallax--soft {
  --parallax-speed: 0.05;
}

.parallax--medium {
  --parallax-speed: 0.07;
}

.parallax--moderate {
  --parallax-speed: 0.1;
}

.parallax--strong {
  --parallax-speed: 0.14;
}

.parallax--reverse {
  --parallax-direction: -1;
}

/* ==========================================================================
   12. PAGES
   ========================================================================== */

/* ---------- Home (index.html) ------------------------------------------------- */

/* ---------- Hero -------------------------------------------------------- */
.hero {
  padding: 56px 20px 52px;
  background: var(--wash-mint);
}

.hero__content {
  display: grid;
  justify-items: center;
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  font-size: clamp(2.35rem, 12vw, 3.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  animation: fade-up 0.8s var(--ease-out) backwards;
}

.hero__title-accent {
  color: var(--color-accent);
}

.hero__lead {
  max-width: 46ch;
  margin-top: clamp(22px, 2.6vw, 30px);
  color: var(--color-hero-copy);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  text-wrap: pretty;
  animation: fade-up 0.8s var(--ease-out) 0.1s backwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(30px, 3.4vw, 40px);
  animation: fade-up 0.8s var(--ease-out) 0.18s backwards;
}

.hero__actions .button {
  padding-inline: 30px;
}

.hero__secondary,
.hero__secondary:hover {
  border-color: var(--vokkl-border);
}

.hero__highlights {
  justify-content: center;
  margin-top: clamp(36px, 4.5vw, 56px);
  animation: fade-up 0.8s var(--ease-out) 0.26s backwards;
}

@media (min-width: 768px) {
  .hero {
    padding: clamp(72px, 8vw, 112px) var(--gutter) clamp(64px, 7vw, 96px);
  }

  .hero__title {
    font-size: clamp(2.7rem, 6vw, 5rem);
  }
}

/* ---------- Product intro + live console ------------------------------- */
.product-intro {
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
}

.product-intro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.product-intro__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.product-intro__line {
  display: block;
  animation: fade-up 0.8s var(--ease-out) 0.06s backwards;
}

.product-intro__line--late {
  animation-delay: 0.14s;
}

.product-intro__em {
  color: var(--color-accent-dark);
}

.product-intro__lead {
  max-width: 33em;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  animation: fade-up 0.8s var(--ease-out) 0.22s backwards;
}

.live-console {
  min-width: 0;
  perspective: 1200px;
  animation: fade-up 1s var(--ease-out) 0.2s backwards;
}

.live-console__window {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--vokkl-navy) 14%, transparent);
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.live-console__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 55%, transparent);
}

.live-console__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}

.live-console__timer {
  margin-left: auto;
  color: var(--color-accent-dark);
  font-size: var(--text-2xs);
}

.live-console__body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.live-console__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 40%, transparent);
}

.live-console__tip {
  font-size: var(--text-sm);
}

.live-call {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  padding: 14px var(--space-4);
  border: 1px solid var(--color-accent-border);
  border-radius: 14px;
  background: var(--color-accent-tint);
}

.live-call::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--vokkl-surface) 0%, transparent) 30%, color-mix(in srgb, var(--vokkl-surface) 55%, transparent) 50%, color-mix(in srgb, var(--vokkl-surface) 0%, transparent) 70%);
  animation: sweep 3.4s linear infinite;
}

.live-call__who {
  position: relative;
}

.live-call__name {
  font-size: var(--text-base);
  font-weight: 600;
}

.live-call__company {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.live-call__status {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.live-call__signal {
  position: relative;
  width: 8px;
  height: 8px;
}

.live-call__signal::before,
.live-call__signal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.live-call__signal::before {
  background: var(--color-accent);
}

.live-call__signal::after {
  border: 1px solid var(--color-accent);
  animation: ring 1.8s ease-out infinite;
}

.waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  padding: 0 var(--space-1);
}

.waveform__bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--vokkl-green) 35%, transparent));
  transform-origin: bottom;
  animation: waveform-bar 1.1s ease-in-out infinite;
}

.waveform__bar:hover {
  background: var(--color-accent-dark);
}

.line-list {
  display: grid;
  gap: var(--space-2);
}

.line-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 60%, transparent);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.line-list__item--idle {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 35%, transparent);
  color: var(--color-muted-soft);
}

.line-list__status {
  align-self: center;
  font-size: var(--text-2xs);
  text-align: right;
}

.line-list__status--pulse {
  animation: pulse 1.9s ease-in-out infinite;
}

.line-list__status--pulse-late {
  animation: pulse 1.9s ease-in-out 0.3s infinite;
}

/* ---------- Value cards ------------------------------------------------- */
.value-cards {
  padding: 44px var(--gutter) 52px;
  background: var(--wash-mint);
}

.value-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
}

.value-card {
  padding-right: 74px;
  animation: fade-up 0.8s var(--ease-out) 0.3s backwards;
}

.value-card:nth-child(2) {
  animation-delay: 0.38s;
}

.value-card:nth-child(3) {
  animation-delay: 0.46s;
}

.value-card__icon {
  position: absolute;
  top: 25px;
  right: 26px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 14%, transparent);
  border-radius: 11px;
  background: var(--color-mint-wash);
  color: var(--color-mint-icon);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.value-card__number {
  font-weight: 700;
}

.value-card__title {
  margin-top: var(--space-4);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.value-card__text {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .value-cards {
    padding-block: 64px 72px;
  }

  .value-card {
    padding-right: 82px;
  }
}

/* ---------- Challenge / solution --------------------------------------- */
.roi {
  padding-block: clamp(76px, 9vw, 140px);
}

.roi__glow {
  top: 20%;
  left: -200px;
  width: 460px;
  height: 460px;
  --decor-color: color-mix(in srgb, var(--vokkl-green) 10%, transparent);
}

.roi__title {
  max-width: 20em;
  margin-inline: auto;
  text-align: center;
}

.roi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  margin-top: clamp(48px, 7vw, 92px);
}

.roi__panel {
  padding-top: 36px;
}

.roi__panel::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: var(--space-5);
  background: var(--color-line-strong);
}

.roi__panel--solution {
  padding: 28px var(--gutter);
  border: 1px solid var(--color-mint-line);
  border-radius: var(--radius-2xl);
  background: var(--color-mint-wash);
}

.roi__panel--solution::before {
  background: var(--color-accent);
}

.roi__text {
  margin-top: 18px;
  color: color-mix(in srgb, var(--vokkl-navy) 66%, transparent);
  font-size: clamp(1.18rem, 1.9vw, 1.62rem);
  line-height: 1.38;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.roi__text--strong {
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .roi__panel--solution {
    padding: 36px 40px;
  }
}

/* ---------- How it works ----------------------------------------------- */
.how__heading {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.how__lead {
  margin: 0;
  line-height: 1.5;
}

.how__timelines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 6vw, 68px);
}

.timeline {
  position: relative;
}

.timeline__track {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 23px;
  width: 1px;
  background: color-mix(in srgb, var(--vokkl-navy) 16%, transparent);
}

.timeline__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--color-accent-dark), var(--color-accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--vokkl-green) 50%, transparent);
}

.timeline__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__step {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: start;
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(22px, 3vw, 34px);
}

.timeline__body {
  max-width: 46ch;
  padding-top: var(--space-1);
}

.timeline__title {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.timeline__text {
  color: var(--color-muted);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
}

/* ---------- Audience ---------------------------------------------------- */
.audience__title-main {
  max-width: 22em;
  margin-inline: auto;
  text-align: center;
}

.audience__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.audience__item {
  padding: 30px var(--gutter) 30px 0;
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.3s ease;
}

.audience__item:hover {
  background: color-mix(in srgb, var(--vokkl-green) 5%, transparent);
}

.audience__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.audience__title {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.audience__text {
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .audience__item:not(:first-child) {
    padding-left: var(--gutter);
  }

  .audience__item:last-child {
    padding-right: 0;
  }
}

/* ---------- Stack / integrations --------------------------------------- */
.stack__tile {
  bottom: -170px;
  left: -170px;
  width: 360px;
  height: 360px;
  opacity: 0.12;
}

.stack__heading {
  max-width: 60ch;
}

.stack__title {
  margin-top: var(--space-4);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.stack__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lead);
}

.stack__logos {
  margin-top: clamp(36px, 4.5vw, 56px);
}

.stack__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.stack__step {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: 18px;
  border-top: 1px solid var(--color-on-dark-line);
}

.stack__step-title {
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
}

.stack__step-text {
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: 1.55;
}

.stack__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.stack__button {
  padding: var(--space-4) 30px;
  font-weight: 700;
}

/* ---------- Founder note + quote card ---------------------------------- */
.founder-note__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.founder-note__quote {
  margin-top: var(--space-5);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.quote-card {
  position: relative;
}

.quote-card::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border-radius: 18px;
  background: var(--color-mint);
  opacity: 0.55;
}

.quote-card__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 12%, transparent);
  border-radius: 18px;
  background: var(--color-ink);
  box-shadow: 0 28px 65px -28px color-mix(in srgb, var(--vokkl-navy) 45%, transparent);
  color: var(--color-on-dark);
}

.quote-card__panel::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 190px;
  height: 190px;
  border-radius: 42px;
  background: var(--color-accent);
  opacity: 0.16;
  transform: rotate(28deg);
  pointer-events: none;
}

.quote-card__panel > * {
  position: relative;
}

.quote-card__list {
  display: grid;
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 12%, transparent);
}

.quote-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 13px var(--space-4);
  background: color-mix(in srgb, var(--vokkl-navy) 92%, transparent);
}

.quote-card__row dt {
  color: color-mix(in srgb, var(--vokkl-navy-tint) 72%, transparent);
  font-size: var(--text-md);
}

.quote-card__row dd {
  color: var(--color-on-dark-subtle);
  font-size: var(--text-sm);
  text-align: right;
}

.quote-card__row--warn dd {
  color: var(--color-coral);
}

.quote-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 22px 0 18px;
}

.quote-card__divider::before,
.quote-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-on-dark-line);
}

.quote-card__offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 50%, transparent);
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, color-mix(in srgb, var(--vokkl-green) 22%, transparent), color-mix(in srgb, var(--vokkl-lime) 10%, transparent));
}

.quote-card__logo {
  width: auto;
  height: 20px;
}

.quote-card__offer-text {
  display: block;
  margin-top: 7px;
  color: color-mix(in srgb, var(--vokkl-navy-tint) 72%, transparent);
  font-size: 13.5px;
}

.quote-card__price {
  text-align: right;
}

.quote-card__amount {
  display: block;
  color: var(--color-white);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.quote-card__unit {
  display: block;
  margin-top: 5px;
  color: var(--color-mint);
  font-size: var(--text-2xs);
}

/* ---------- Switch CTA -------------------------------------------------- */
.switch-cta {
  padding-block: clamp(72px, 9vw, 120px);
  text-align: center;
}

.switch-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: -56px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vokkl-green) 20%, transparent), color-mix(in srgb, var(--vokkl-green) 0%, transparent) 65%);
  pointer-events: none;
}

.switch-cta__inner {
  max-width: 760px;
  padding-block: clamp(32px, 5vw, 64px);
}

.switch-cta__title {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.switch-cta__text {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.switch-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

/* ---------- Final CTA --------------------------------------------------- */
.final-cta {
  padding-block: clamp(80px, 10vw, 150px);
}

.final-cta__glow {
  --glow-size: 800px;
  --decor-color: color-mix(in srgb, var(--vokkl-green) 26%, transparent);
  bottom: -300px;
  left: calc(50% - var(--glow-size) / 2);
  width: var(--glow-size);
  height: var(--glow-size);
  background: radial-gradient(circle, var(--decor-color), color-mix(in srgb, var(--vokkl-green) 0%, transparent) 62%);
}

.final-cta__inner {
  text-align: center;
}

.final-cta__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

.final-cta__text {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--color-on-dark-muted);
  font-size: var(--text-lead-lg);
  line-height: 1.6;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 34px;
}

.final-cta__actions .button {
  font-size: var(--text-base);
}

/* ---------- Platform (platform.html) ------------------------------------------ */

/* ---------- Capabilities (sticky stacking cards) ----------------------- */
.capabilities {
  padding-block: clamp(76px, 9vw, 130px) clamp(120px, 14vw, 220px);
}

.capabilities__glow {
  --glow-size: 760px;
  top: -180px;
  left: calc(50% - var(--glow-size) / 2);
  width: var(--glow-size);
  height: var(--glow-size);
}

.capabilities__heading {
  padding-bottom: clamp(36px, 5vw, 60px);
}

.capabilities__lead {
  padding-bottom: var(--space-2);
  color: color-mix(in srgb, var(--vokkl-navy-tint) 62%, transparent);
}

.capability-stack {
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
  align-items: start;
  gap: clamp(14px, 2.5vw, 32px);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 34px);
  border-top: 1px solid color-mix(in srgb, var(--vokkl-navy-tint) 18%, transparent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background: var(--color-ink-raised);
  box-shadow: 0 -24px 50px rgba(0, 0, 0, 0.4);
  color: var(--color-on-dark);
  transition: background-color 0.35s ease;
}

.capability-card:hover {
  background: var(--color-ink-raised-hover);
  color: var(--color-on-dark);
}

.capability-card__number {
  color: color-mix(in srgb, var(--vokkl-green) 55%, transparent);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.capability-card__title {
  margin-bottom: 10px;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.capability-card__text {
  display: block;
  max-width: 62ch;
  color: color-mix(in srgb, var(--vokkl-navy-tint) 68%, transparent);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.58;
}

.capability-card__arrow {
  justify-self: end;
  color: var(--color-accent);
  font-size: 20px;
  transition: transform 0.35s var(--ease-out);
}

.capability-card:hover .capability-card__arrow {
  transform: translateX(6px);
}

/* Cards stack on scroll from tablet up: each one sticks 15px lower than the
   previous card so the numbers stay visible. */
@media (min-width: 768px) {
  .capability-stack__item {
    --stack-step: 0;
    position: sticky;
    top: calc(96px + var(--stack-step) * 15px);
  }

  .capability-stack__item:nth-child(2) { --stack-step: 1; }
  .capability-stack__item:nth-child(3) { --stack-step: 2; }
  .capability-stack__item:nth-child(4) { --stack-step: 3; }
  .capability-stack__item:nth-child(5) { --stack-step: 4; }
  .capability-stack__item:nth-child(6) { --stack-step: 5; }
  .capability-stack__item:nth-child(7) { --stack-step: 6; }
  .capability-stack__item:nth-child(8) { --stack-step: 7; }
  .capability-stack__item:nth-child(9) { --stack-step: 8; }
  .capability-stack__item:nth-child(10) { --stack-step: 9; }

  .capability-card {
    grid-template-columns: 74px minmax(0, 1fr) 40px;
  }
}

/* ---------- Detail rows ------------------------------------------------- */
.detail {
  padding-block: clamp(76px, 9vw, 130px) clamp(40px, 6vw, 80px);
}

.feature-row {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding-block: clamp(56px, 7vw, 104px);
  scroll-margin-top: var(--header-offset);
}

.feature-row + .feature-row {
  border-top: 1px solid var(--color-line);
}

.feature-row__text {
  position: relative;
}

.feature-row__index {
  position: absolute;
  top: 1.15em;
  left: -0.06em;
  color: color-mix(in srgb, var(--vokkl-navy) 4%, transparent);
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
}

.feature-row--reverse .feature-row__index {
  right: -0.06em;
  left: auto;
}

.feature-row__title {
  max-width: 22ch;
  margin: 18px 0 var(--space-4);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.feature-row__lead {
  max-width: 50ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.feature-row__visual {
  min-width: 0;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-row--reverse .feature-row__text {
    order: 2;
  }
}

/* Mock-up internals (feature screens) */
.battle-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--color-accent-border);
  border-radius: 14px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--vokkl-green) 12%, transparent), color-mix(in srgb, var(--vokkl-surface) 90%, transparent));
  animation: fade-up 0.8s ease backwards;
}

.battle-card__title {
  margin: 10px 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.battle-card__text {
  color: var(--color-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.battle-card__tags {
  margin-top: var(--space-4);
}

.score-total {
  color: var(--color-accent-dark);
  font-size: 2.2rem;
  letter-spacing: -0.03em;
}

.score-list {
  display: grid;
  gap: 14px;
  margin-top: var(--space-4);
}

.score-list__row {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* Call-analysis scores: 84, 62, 71, 90 */
.score-list__item:nth-child(1) { --fill: 84%; }
.score-list__item:nth-child(2) { --fill: 62%; }
.score-list__item:nth-child(3) { --fill: 71%; }
.score-list__item:nth-child(4) { --fill: 90%; }
.score-list__item:nth-child(2) .meter__fill { transition-delay: 0.1s; }
.score-list__item:nth-child(3) .meter__fill { transition-delay: 0.2s; }
.score-list__item:nth-child(4) .meter__fill { transition-delay: 0.3s; }

.floor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: 14px;
}

.floor-grid__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 85%, transparent);
  color: var(--color-muted);
  font-size: var(--text-2xs);
}

.floor-grid__tile--live {
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 40%, transparent);
  background: var(--color-accent-tint-strong);
  color: var(--color-accent-dark);
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
  margin-top: var(--space-4);
}

.bar-chart__col {
  display: grid;
  flex: 1;
  align-content: end;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.bar-chart__bar {
  height: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--vokkl-green) 40%, transparent));
  transition: height 1s var(--ease-out);
}

.bar-chart__bar:hover {
  background: var(--color-accent-dark);
}

.bar-chart__bar.is-filled,
html:not(.js) .bar-chart__bar {
  height: var(--fill, 0px);
}

/* Connect rate by hour (8:00–18:00); heights in px. */
.bar-chart__col:nth-child(1) { --fill: 25px; }
.bar-chart__col:nth-child(2) { --fill: 44px; }
.bar-chart__col:nth-child(3) { --fill: 62px; }
.bar-chart__col:nth-child(4) { --fill: 70px; }
.bar-chart__col:nth-child(5) { --fill: 38px; }
.bar-chart__col:nth-child(6) { --fill: 47px; }
.bar-chart__col:nth-child(7) { --fill: 67px; }
.bar-chart__col:nth-child(8) { --fill: 83px; }
.bar-chart__col:nth-child(9) { --fill: 101px; }
.bar-chart__col:nth-child(10) { --fill: 74px; }
.bar-chart__col:nth-child(11) { --fill: 41px; }

.bar-chart__label {
  color: var(--color-muted);
  font-size: 9.5px;
}

.ask-panel {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.ask-panel__question {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 8%, transparent);
  font-size: 13.5px;
}

.ask-panel__caret {
  color: var(--color-accent);
  animation: caret 1s steps(1) infinite;
}

.ask-panel__answer {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--vokkl-green) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vokkl-green) 12%, transparent);
  font-size: 13.5px;
  line-height: 1.6;
}

.ask-panel__tags {
  margin-top: var(--space-3);
}

.ask-panel__suggestion {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--vokkl-navy-tint) 5%, transparent);
  color: color-mix(in srgb, var(--vokkl-navy-tint) 75%, transparent);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.ask-panel__suggestion:hover {
  background: color-mix(in srgb, var(--vokkl-navy-tint) 12%, transparent);
}

/* ---------- Why Vokkl --------------------------------------------------- */
.why {
  padding-block: clamp(76px, 9vw, 140px);
}

.why__heading {
  max-width: 110ch;
    margin: 0 auto;
    text-align: center;
}

.why__list {
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--color-line);
  list-style: none;
}

.why__item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: clamp(16px, 4vw, 56px);
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--color-line);
  transition: padding-left var(--duration-slow) var(--ease-out);
}

.why__item:hover {
  padding-left: 14px;
}

.why__title {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: var(--space-3);
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.why__number {
  padding-top: 0.55em;
  color: var(--color-accent-dark);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.why__text {
  max-width: 46ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.62;
}

/* ---------- Integrations ------------------------------------------------ */
.integrations__inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

.integrations__lead {
  margin-top: var(--space-4);
  font-size: 1.05rem;
}

.integrations__chips {
  justify-content: center;
}

/* ---------- Compliance -------------------------------------------------- */
.compliance__title {
  max-width: 24em;
}

.compliance__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-on-dark-line);
  list-style: none;
}

.compliance__item {
  padding: 26px 22px 26px 0;
  border-bottom: 1px solid var(--color-on-dark-line);
  color: color-mix(in srgb, var(--vokkl-navy-tint) 80%, transparent);
  font-size: var(--text-base);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .compliance__item:not(:first-child) {
    padding-left: 22px;
  }

  .compliance__item:last-child {
    padding-right: 0;
  }
}

.compliance__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.compliance__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent);
  font-size: 14px;
}

.compliance__link:hover {
  color: var(--color-on-dark);
}

/* ---------- Pricing (pricing.html) -------------------------------------------- */

.pricing__glow {
  top: -160px;
  left: -120px;
  width: 460px;
  height: 460px;
  --decor-color: color-mix(in srgb, var(--vokkl-green) 18%, transparent);
}

.pricing__heading {
  max-width: 110ch;
    margin: 0 auto;
    text-align: center;
}

.pricing__title {
  line-height: 1.04;
  text-wrap: pretty;
}

.pricing__lead {
 /* max-width: 56ch;*/
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.pricing__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-items: start;
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(36px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.pricing__plan {
  height: 100%;
}

/* Usage meters per plan */
.pricing-card--free {
  --fill: 22%;
}

.pricing-card--starter {
  --fill: 55%;
}

.pricing-card--growth {
  --fill: 78%;
}

.pricing-card--enterprise {
  --fill: 100%;
}

/* ---------- Request demo (request-demo.html) ---------------------------------- */

.form-page {
  min-height: 70vh;
  padding-block: var(--page-space-top) var(--page-space-bottom);
}

.form-page__glow {
  --glow-size: 800px;
  --decor-color: color-mix(in srgb, var(--vokkl-green) 25%, transparent);
  bottom: -300px;
  left: calc(50% - var(--glow-size) / 2);
  width: var(--glow-size);
  height: var(--glow-size);
  background: radial-gradient(circle, var(--decor-color), color-mix(in srgb, var(--vokkl-green) 0%, transparent) 62%);
}

.form-page__center {
  text-align: center;
}

.form-page__title {
  margin-top: 22px;
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}

.form-page__title--tight {
  margin-top: var(--space-5);
}

.form-page__lead {
  max-width: 46ch;
  margin: var(--space-4) auto 0;
  color: var(--color-on-dark-muted);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.form-page__lead--wide {
  max-width: 48ch;
}

.form-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Careers (careers.html) -------------------------------------------- */

.careers__glow {
  top: -220px;
  right: -160px;
  width: 620px;
  height: 620px;
  --decor-color: color-mix(in srgb, var(--vokkl-green) 22%, transparent);
}

.careers__perks {
  gap: 14px;
  margin-top: 34px;
}

.careers__process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-7);
  margin: clamp(44px, 5.5vw, 70px) 0 0;
  padding: 0;
  list-style: none;
}

.careers__step {
  padding-top: 22px;
  border-top: 1px solid var(--color-on-dark-line);
}

.careers__step-title {
  margin-top: var(--space-3);
  color: var(--color-white);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.careers__step-text {
  margin-top: var(--space-2);
  color: var(--color-on-dark-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

.careers__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 60px);
}

.careers__button {
  padding: var(--space-4) 26px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--vokkl-green) 28%, transparent);
}

.careers__note {
  color: var(--color-on-dark-subtle);
  font-size: 12px;
}

/* ---------- Partners (partners.html) ------------------------------------------ */

.partners-hero {
  padding-block: var(--page-space-top) clamp(40px, 5vw, 70px);
}

.partners-hero__tile {
  top: -150px;
  right: -155px;
  width: 360px;
  height: 360px;
  opacity: 0.14;
}

.partners {
  padding-block: clamp(60px, 8vw, 100px);
}

.partners__group {
  margin-top: clamp(56px, 7vw, 90px);
}

.partners__group--first {
  margin-top: 0;
}

.partners__intro {
  max-width: 62ch;
}

.partners__title {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.partners__lead {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.partners__logos {
  margin-top: var(--space-7);
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: var(--space-7);
}

.partners__grid--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.partners__soon-title {
  color: var(--color-ink);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.partners__soon-text {
  max-width: 28ch;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.55;
}

.partner-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(56px, 7vw, 90px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.partner-banner__text {
  max-width: 52ch;
}

.partner-banner__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.partner-banner__lead {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.partner-banner__button {
  flex: none;
}

.partner-banner__button:hover {
  transform: none;
}

/* ---------- FAQ (faq.html) ---------------------------------------------------- */

.faq-page {
  background: var(--color-surface-alt);
}

.faq-page__title {
  margin-top: 14px;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}

.faq-page__lead {
  max-width: 52ch;
  margin: 14px 0 clamp(40px, 5vw, 60px);
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.faq-page__link {
  font-weight: 600;
}

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) ease;
}

.skip-link:focus-visible {
  color: var(--color-white);
  transform: none;
}

.text-center{text-align:center}

/* ---------- Cursor glow (created by main.js, fine pointers only) -------------- */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vokkl-green) 16%, transparent), color-mix(in srgb, var(--vokkl-lime) 14%, transparent) 35%, color-mix(in srgb, var(--vokkl-lime) 0%, transparent) 70%);
  mix-blend-mode: multiply;
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) ease;
  will-change: transform;
}

.cursor-glow.is-visible {
  opacity: 1;
}

/* ---------- Reduced motion ---------------------------------------------------- */

/* !important is required here: this user preference must override every
   component-level animation and transition declaration. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Overrides (marketing/design-overrides.css)

   Hand-written fixes on top of the design. import-site.py appends this file to
   css/styles.css, so they survive every re-import. Keep each one small, say what it
   fixes, and delete it once the design itself does.
   ========================================================================== */

/*
 * Labels on a green button are navy, never white. White on the brand green is 2.85:1 and
 * fails WCAG AA; navy is 5.16:1 (marketing/README.md, colour rules). The design darkens
 * the fill on hover, which would sink a navy label to 2:1, so hover lightens it instead.
 * .hs-button is the HubSpot form's Submit, themed by the same stylesheet inside its iframe.
 */
.button--primary,
.button--accent,
.hubspot-form .hs-button,
.button--primary:hover,
.button--accent:hover,
.hubspot-form .hs-button:hover {
  color: var(--vokkl-on-primary);
}
.button--primary:hover,
.button--accent:hover,
.hubspot-form .hs-button:hover {
  background: color-mix(in srgb, var(--vokkl-green) 78%, var(--vokkl-lime));
}

/*
 * Green text on a light surface. --vokkl-green is 2.85:1 on white, under even the 3:1 floor
 * for large text. The FAQ numbers are small, so they take --vokkl-green-ink (7.04:1). The
 * hero's accent line is large, so a slightly deeper green is enough (3.3:1) and keeps it
 * reading as the brand green rather than the much darker ink.
 */
.faq__number {
  color: var(--vokkl-green-ink);
}
.hero__title-accent {
  color: color-mix(in srgb, var(--vokkl-green) 80%, var(--vokkl-green-ink));
}