/* =============================================================================
   HIDaaS Design System — hidaas.css
   Human Identity-as-a-Service · Financial Grade
   Version: 2.0
   
   CONTENTS
   ─────────────────────────────────────────────
   01. Imports & Fonts
   02. Design Tokens (Custom Properties)
       ├─ Colour Ramps
       ├─ Semantic Colour Aliases
       ├─ Typography
       ├─ Spacing
       ├─ Border Radius
       ├─ Shadows
       ├─ Motion / Easing
       └─ Z-Index
   03. Reset & Base
   04. Typography Scale
   05. Layout & Grid
   06. Navigation
   07. Buttons
   08. Forms & Inputs
   09. Cards
       ├─ Industry Cards
       ├─ Stat / Proof Point Cards
       └─ Insight / White Paper Cards
   10. Hero Section
   11. Section Patterns
       ├─ Problem / Narrative
       ├─ Architecture Diagram Frame
       ├─ CTA Panel
       └─ Audience Pathway Cards
   12. Trust Signals & Compliance Badges
   13. Download Strip (Persistent)
   14. Architecture Diagram Components
   15. Footer
   16. Utility Classes
   17. Animations & Motion
   18. Accessibility & Dark Mode
   ─────────────────────────────────────────────
   
   USAGE NOTES FOR CLAUDE CODE
   ─────────────────────────────────────────────
   
   Colour discipline:
   - Use --color-red-* for primary brand surfaces (hero, CTAs, headings)
   - Use --color-blue-* for technical, data, and architecture sections
   - Use --color-gold SPARINGLY — maximum 3 elements per page
     Reserved for: primary CTA on dark bg, one pull-quote rule, key diagram highlights
   - Never use accent colours for decorative purposes
   
   Typography discipline:
   - All headings: font-family: var(--font-serif)  [DM Serif Display]
   - Body copy: font-family: var(--font-sans)      [DM Sans]
   - Code/data: font-family: var(--font-mono)      [JetBrains Mono]
   - Never mix more than 2 font families on a single page
   - Use font-variant-numeric: tabular-nums on ALL statistics
   
   Button discipline:
   - .btn-primary  → light surfaces (Red-800 bg)
   - .btn-gold     → dark surfaces ONLY (Gold bg, Red-950 text)
   - Max ONE .btn-primary or .btn-gold visible above fold per section
   
   Motion discipline:
   - All transitions: var(--ease-standard), var(--duration-base)
   - All animations respect prefers-reduced-motion
   - No parallax, no particle systems, no auto-play media
   
   ============================================================================= */


/* =============================================================================
   01. IMPORTS & FONTS
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap');


/* =============================================================================
   02. DESIGN TOKENS
   ============================================================================= */

:root {

  /* ── COLOUR: DEEP VEIN RED RAMP ─────────────────────────────────────────── */
  --color-red-950: #2A0409;   /* darkest surface — hero backgrounds           */
  --color-red-900: #4A0A10;   /* rich dark — CTA panels, sidebar backgrounds  */
  --color-red-800: #6B0F1A;   /* BRAND ANCHOR — primary CTAs, headings        */
  --color-red-700: #8B1520;   /* hover state for red-800                      */
  --color-red-600: #A51C2A;   /* eyebrow labels, category tags                */
  --color-red-500: #C42535;   /* mid-point — use sparingly                    */
  --color-red-400: #D94455;   /* UI accents, rarely                           */
  --color-red-300: #E8828E;   /* card border on hover                         */
  --color-red-200: #F2B4BB;   /* light borders, dividers on light bg          */
  --color-red-100: #FAE5E8;   /* very light fills, error tints                */
  --color-red-50:  #FDF4F5;   /* subtlest background tint                     */

  /* ── COLOUR: VEIN BLUE RAMP ─────────────────────────────────────────────── */
  --color-blue-950: #020F1E;  /* deepest blue surface                         */
  --color-blue-900: #061D33;  /* dark blue — alternating sections             */
  --color-blue-800: #0D3B66;  /* BRAND ANCHOR — technical, data, links        */
  --color-blue-700: #145190;  /* hover state for blue-800                     */
  --color-blue-600: #1A64AF;  /* interactive links, secondary accents         */
  --color-blue-500: #2179CF;  /* mid blue                                     */
  --color-blue-400: #4A96DC;  /* lighter interactive                          */
  --color-blue-300: #80B8E9;  /* light text on dark blue                      */
  --color-blue-200: #B5D7F3;  /* borders on blue-tinted surfaces              */
  --color-blue-100: #DFF0FB;  /* very light blue fills                        */
  --color-blue-50:  #F0F8FE;  /* callout box background                       */

  /* ── COLOUR: INSTITUTIONAL GOLD ─────────────────────────────────────────── */
  --color-gold:       #C9A84C; /* THE accent — use maximum 3× per page        */
  --color-gold-dark:  #8B6F2A; /* gold on lighter surfaces                    */
  --color-gold-light: #E8D08A; /* gold hover state                            */

  /* ── COLOUR: NEUTRALS ───────────────────────────────────────────────────── */
  --color-ink:      #0E0E0F;   /* primary body text on light                  */
  --color-charcoal: #1C1C1E;   /* rich dark text                              */
  --color-graphite: #4A4A4C;   /* secondary dark text                         */
  --color-steel:    #6E6E70;   /* secondary body text, labels                 */
  --color-pewter:   #98989A;   /* muted text, placeholders, captions          */
  --color-ash:      #C7C7CC;   /* input borders default, dividers             */
  --color-mist:     #E5E5EA;   /* card borders, table grid lines              */
  --color-fog:      #F2F2F7;   /* alternating table rows, light fills         */
  --color-paper:    #FAFAFA;   /* page background                             */
  --color-white:    #FFFFFF;   /* card surfaces, input backgrounds            */

  /* ── COLOUR: SEMANTIC ALIASES ───────────────────────────────────────────── */
  --color-success:  #1A7A4A;   /* verified states, trust badge dots           */
  --color-error:    #A51C2A;   /* form validation errors (reuses red-600)     */
  --color-surface-dark:  var(--color-red-950);
  --color-surface-rich:  var(--color-red-900);
  --color-surface-brand: var(--color-red-800);
  --color-surface-mid:   var(--color-blue-800);
  --color-surface-page:  var(--color-paper);
  --color-text-primary:  var(--color-ink);
  --color-text-secondary: var(--color-steel);
  --color-text-muted:    var(--color-pewter);
  --color-text-on-dark:  rgba(255, 255, 255, 0.92);
  --color-text-dim:      rgba(255, 255, 255, 0.52);
  --color-text-ghost:    rgba(255, 255, 255, 0.28);
  --color-border:        var(--color-mist);
  --color-border-focus:  var(--color-blue-800);
  --color-border-error:  var(--color-red-600);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
  --font-serif: 'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes — fluid via clamp() */
  --text-display:   clamp(44px, 6vw, 80px);   /* hero headline            */
  --text-h1:        clamp(32px, 4vw, 52px);   /* section headline         */
  --text-h2:        clamp(22px, 2.8vw, 34px); /* sub-section headline     */
  --text-h3:        clamp(17px, 2vw, 22px);   /* card titles, sub-heads   */
  --text-lead:      clamp(15px, 1.4vw, 18px); /* intro / lead paragraphs  */
  --text-body:      clamp(14px, 1.1vw, 16px); /* running body copy        */
  --text-small:     clamp(12px, 0.9vw, 14px); /* captions, hints          */
  --text-label:     clamp(10px, 0.75vw, 12px);/* eyebrows, nav labels     */
  --text-micro:     10px;                      /* trust badges, micro copy */
  --text-metric:    clamp(40px, 5vw, 64px);   /* stat numbers             */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:   1.10;  /* display headings          */
  --leading-snug:    1.25;  /* card titles, sub-heads    */
  --leading-normal:  1.50;  /* standard body             */
  --leading-relaxed: 1.70;  /* lead paragraphs, forms    */
  --leading-loose:   1.85;  /* long-form editorial copy  */

  /* Letter spacing */
  --tracking-tight:  -0.025em;  /* display headings         */
  --tracking-snug:   -0.015em;  /* h1 headings              */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;   /* input labels             */
  --tracking-wider:   0.10em;   /* metric labels            */
  --tracking-widest:  0.20em;   /* eyebrow / ALL CAPS text  */

  /* Measure — max line length for readability */
  --measure-narrow:  52ch;   /* narrow columns, cards     */
  --measure-body:    68ch;   /* standard body copy        */
  --measure-wide:    80ch;   /* wide content columns      */

  /* ── SPACING (base-8px system) ──────────────────────────────────────────── */
  --space-1:   4px;   /* 0.5× — micro: icon padding, badge internals          */
  --space-2:   8px;   /* 1×   — base: inline gaps, label-to-input             */
  --space-3:   12px;  /* 1.5× — tight component padding                       */
  --space-4:   16px;  /* 2×   — component internal padding (tight)            */
  --space-5:   20px;  /* 2.5× — between labels and inputs                     */
  --space-6:   24px;  /* 3×   — component internal padding (standard)         */
  --space-8:   32px;  /* 4×   — between related elements                      */
  --space-10:  40px;  /* 5×   — card padding, section sub-gaps                */
  --space-12:  48px;  /* 6×   — between subsections                           */
  --space-16:  64px;  /* 8×   — between major visual blocks                   */
  --space-20:  80px;  /* 10×  — section padding (compact)                     */
  --space-24:  96px;  /* 12×  — section padding (standard)                    */
  --space-32:  128px; /* 16×  — hero vertical breathing room                  */
  --space-48:  192px; /* 24×  — full-bleed section separators                 */

  /* ── BORDER RADIUS ───────────────────────────────────────────────────────── */
  --radius-xs:  2px;   /* badges, cert pills, table corners     */
  --radius-sm:  3px;   /* buttons — institutional, not pill     */
  --radius-md:  6px;   /* input fields, small cards             */
  --radius-lg:  10px;  /* cards, panels                         */
  --radius-xl:  16px;  /* large panels, CTA blocks              */
  --radius-2xl: 24px;  /* hero panels, full-page CTAs           */
  --radius-full:9999px;/* trust badges, cert pills              */

  /* ── SHADOWS ─────────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(10, 4, 9, 0.06);
  --shadow-sm:   0 1px 3px rgba(10, 4, 9, 0.08),
                 0 1px 2px rgba(10, 4, 9, 0.06);
  --shadow-md:   0 4px 6px rgba(10, 4, 9, 0.07),
                 0 2px 4px rgba(10, 4, 9, 0.06);
  --shadow-lg:   0 10px 15px rgba(10, 4, 9, 0.1),
                 0 4px 6px rgba(10, 4, 9, 0.06);
  --shadow-card: 0 1px 3px rgba(10, 4, 9, 0.06),
                 0 4px 16px rgba(10, 4, 9, 0.05);
  --shadow-card-hover: 0 8px 28px rgba(107, 15, 26, 0.12),
                       0 2px 8px rgba(107, 15, 26, 0.06);
  --shadow-btn-red:    0 1px 2px rgba(107, 15, 26, 0.28),
                       inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-btn-red-hover: 0 4px 14px rgba(107, 15, 26, 0.34),
                          inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-btn-gold:   0 1px 2px rgba(201, 168, 76, 0.28);
  --shadow-btn-gold-hover: 0 4px 14px rgba(201, 168, 76, 0.30);
  --shadow-btn-blue:   0 1px 2px rgba(13, 59, 102, 0.28);
  --shadow-btn-blue-hover: 0 4px 14px rgba(13, 59, 102, 0.30);
  --shadow-focus-blue: 0 0 0 3px rgba(13, 59, 102, 0.12);
  --shadow-focus-error:0 0 0 3px rgba(107, 15, 26, 0.10);

  /* ── MOTION / EASING ─────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* general transitions    */
  --ease-enter:    cubic-bezier(0.0, 0, 0.2, 1);   /* elements entering      */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);     /* elements leaving       */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* playful spring (rare) */

  --duration-instant: 80ms;   /* micro interactions (button active)           */
  --duration-fast:    150ms;  /* hover colour/opacity changes                 */
  --duration-base:    180ms;  /* standard transition (buttons, links, borders)*/
  --duration-slow:    280ms;  /* reveal animations, card hover                */
  --duration-enter:   400ms;  /* page section reveals                         */
  --duration-counter: 1800ms; /* stat counter animation                       */

  /* ── Z-INDEX SCALE ───────────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;   /* cards on hover, interactive elements                */
  --z-sticky:    20;   /* sticky section markers                              */
  --z-nav:       100;  /* main navigation bar                                 */
  --z-download:  110;  /* persistent download strip                           */
  --z-overlay:   200;  /* mobile nav overlay                                  */
  --z-modal:     300;  /* modals and lightboxes                               */
  --z-toast:     400;  /* toast notifications                                 */
}


/* =============================================================================
   03. RESET & BASE
   ============================================================================= */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

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

a {
  color: var(--color-blue-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover { color: var(--color-blue-800); }
a:focus-visible { outline: 2px solid var(--color-blue-800); outline-offset: 3px; }

ul, ol { list-style: none; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-body);
}

::selection {
  background-color: var(--color-red-200);
  color: var(--color-red-900);
}

/* Scrollbar styling (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-fog); }
::-webkit-scrollbar-thumb { background: var(--color-ash); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-pewter); }


/* =============================================================================
   04. TYPOGRAPHY SCALE
   ============================================================================= */

/* Display — hero headlines only */
.text-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-regular); /* DM Serif Display is display-weight by nature */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.text-display em {
  color: var(--color-gold);
  font-style: italic;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-red-800);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-blue-800);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-red-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* On dark surfaces */
.on-dark h1, .on-dark .h1 { color: var(--color-white); }
.on-dark h2, .on-dark .h2 { color: var(--color-white); }
.on-dark h3, .on-dark .h3 { color: rgba(255, 255, 255, 0.88); }
.on-dark h4, .on-dark .h4 { color: var(--color-gold); }

/* Body text */
.text-lead {
  font-size: var(--text-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-body);
}

p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-body);
}

/* Eyebrow — section markers, category tags */
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red-600);
  display: block;
  margin-bottom: var(--space-3);
}

.text-eyebrow--gold  { color: var(--color-gold); }
.text-eyebrow--blue  { color: var(--color-blue-600); }
.text-eyebrow--dim   { color: var(--color-text-ghost); }

/* Data metrics */
.text-metric {
  font-family: var(--font-serif);
  font-size: var(--text-metric);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
}

.text-metric__label {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  display: block;
  margin-top: var(--space-2);
}

.text-metric__source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  display: block;
  margin-top: var(--space-1);
}

/* Caption & misc */
.text-caption {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--color-blue-800);
  background-color: var(--color-fog);
  border: 1px solid var(--color-mist);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Pull quote */
.text-pullquote {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
}


/* =============================================================================
   05. LAYOUT & GRID
   ============================================================================= */

/* Page wrapper */
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Content container */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-20);
}

.container--wide  { max-width: 1440px; }
.container--narrow{ max-width: 960px;  }
.container--text  { max-width: 720px;  }

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

/* Column spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Named column patterns */
.col-hero-text  { grid-column: span 7; }  /* hero text block */
.col-hero-visual{ grid-column: span 5; }  /* hero diagram    */
.col-body       { grid-column: span 6; }  /* body copy col   */
.col-cta        { grid-column: 3 / span 8; } /* centred CTA  */

/* Auto card grids */
.grid-industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-stats      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.grid-insights   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-two        { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* Section spacing */
.section {
  padding-block: var(--space-24);
}

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

/* Section backgrounds */
.section--white   { background-color: var(--color-white); }
.section--paper   { background-color: var(--color-paper); }
.section--fog     { background-color: var(--color-fog); }
.section--dark    { background-color: var(--color-red-950); }
.section--rich    { background-color: var(--color-red-900); }
.section--blue    { background-color: var(--color-blue-800); }
.section--gradient {
  background: linear-gradient(135deg, var(--color-red-950) 0%, var(--color-blue-950) 100%);
}

/* Gold divider rule */
.rule-gold {
  width: 32px;
  height: 1.5px;
  background-color: var(--color-gold);
  border: none;
  margin-bottom: var(--space-5);
}

.rule-gold--centre { margin-inline: auto; }

/* Horizontal divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-mist);
  margin-block: var(--space-8);
}

.divider--dark { border-top-color: rgba(255, 255, 255, 0.07); }


/* =============================================================================
   06. NAVIGATION
   ============================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: 66px;
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* Scrolled state — applied via JS on scroll */
.nav--scrolled {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-mist);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-20);
  height: 100%;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo img {
  height: 22px;
  width: auto;
}

/* On hero (transparent nav) — invert logo to white */
.nav:not(.nav--scrolled) .nav__logo img {
  filter: brightness(0) invert(1);
}

/* Navigation items */
.nav__items {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.nav__item a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.nav__item a:hover {
  color: var(--color-ink);
}

.nav__item a.active,
.nav__item a[aria-current="page"] {
  color: var(--color-red-800);
  font-weight: var(--weight-medium);
  border-bottom-color: var(--color-red-700);
}

/* On hero (dark nav background) */
.nav:not(.nav--scrolled) .nav__item a {
  color: rgba(255, 255, 255, 0.55);
}

.nav:not(.nav--scrolled) .nav__item a:hover {
  color: rgba(255, 255, 255, 0.90);
}

.nav:not(.nav--scrolled) .nav__item a.active {
  color: var(--color-white);
  border-bottom-color: var(--color-gold);
}

/* Nav CTA */
.nav__cta {
  flex-shrink: 0;
  margin-left: var(--space-6);
}

/* Mobile hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.nav__toggle-bar {
  width: 22px;
  height: 1.5px;
  background-color: var(--color-white);
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.nav--scrolled .nav__toggle-bar { background-color: var(--color-ink); }

/* Mobile overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-red-950);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-8) var(--space-10);
  transform: translateX(100%);
  transition: transform var(--duration-enter) var(--ease-standard);
}

.nav__overlay.is-open {
  transform: translateX(0);
}

.nav__overlay-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-10);
  flex: 1;
}

.nav__overlay-item a {
  font-family: var(--font-serif);
  font-size: clamp(24px, 5vw, 32px);
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav__overlay-item a:hover,
.nav__overlay-item a.active { color: var(--color-white); }

.nav__overlay-cta { margin-top: var(--space-8); }


/* =============================================================================
   07. BUTTONS
   ============================================================================= */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  min-height: 44px; /* WCAG touch target */
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-blue-800);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(0) !important;
  transition-duration: var(--duration-instant);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ── Primary — Deep Vein Red — light surfaces ───── */
.btn-primary {
  background-color: var(--color-red-800);
  color: var(--color-white);
  box-shadow: var(--shadow-btn-red);
}

.btn-primary:hover {
  background-color: var(--color-red-700);
  box-shadow: var(--shadow-btn-red-hover);
  transform: translateY(-1px);
  color: var(--color-white);
}

/* ── Secondary — Red outline ─────────────────────── */
.btn-secondary {
  background-color: transparent;
  color: var(--color-red-800);
  border: 1.5px solid var(--color-red-800);
}

.btn-secondary:hover {
  background-color: var(--color-red-50);
  color: var(--color-red-800);
}

/* ── Blue — Technical / data actions ─────────────── */
.btn-blue {
  background-color: var(--color-blue-800);
  color: var(--color-white);
  box-shadow: var(--shadow-btn-blue);
}

.btn-blue:hover {
  background-color: var(--color-blue-700);
  box-shadow: var(--shadow-btn-blue-hover);
  transform: translateY(-1px);
  color: var(--color-white);
}

/* ── Gold — PRIMARY on dark surfaces ONLY ────────── */
/*    Use max once per dark section                   */
.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-red-950);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-btn-gold);
}

.btn-gold:hover {
  background-color: var(--color-gold-light);
  box-shadow: var(--shadow-btn-gold-hover);
  transform: translateY(-1px);
  color: var(--color-red-950);
}

/* ── Outline White — secondary on dark surfaces ──── */
.btn-outline-white {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.40);
}

/* ── Ghost — text only ────────────────────────────── */
.btn-ghost {
  background-color: transparent;
  color: var(--color-red-700);
  padding-inline: var(--space-1);
  min-height: auto;
  border-bottom: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--color-red-800);
  border-bottom-color: var(--color-red-700);
}

.btn-ghost--white {
  color: rgba(255, 255, 255, 0.50);
}

.btn-ghost--white:hover {
  color: rgba(255, 255, 255, 0.80);
  border-bottom-color: rgba(255, 255, 255, 0.40);
}

/* Sizes */
.btn--sm { font-size: 12px; padding: 9px 18px; min-height: 36px; }
.btn--lg { font-size: 15px; padding: 14px 32px; min-height: 52px; }

/* Full-width */
.btn--full { width: 100%; }

/* With icon */
.btn__icon { width: 16px; height: 16px; flex-shrink: 0; }


/* =============================================================================
   08. FORMS & INPUTS
   ============================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-red-800);
  display: block;
}

.field__label--required::after {
  content: ' *';
  color: var(--color-red-600);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  min-height: 44px;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  appearance: none;
  -webkit-appearance: none;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--color-ash);
}

/* Focus state — Vein Blue ring */
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--color-blue-800);
  box-shadow: var(--shadow-focus-blue);
}

/* Error state */
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-red-600);
  box-shadow: var(--shadow-focus-error);
}

/* Success state */
.field--success .field__input {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.10);
}

/* Disabled */
.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled {
  background-color: var(--color-fog);
  color: var(--color-pewter);
  cursor: not-allowed;
}

/* Select arrow */
.field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.field__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: var(--leading-relaxed);
}

.field__hint {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.field__error-msg {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-red-700);
  line-height: var(--leading-normal);
}

/* Form groups */
.form {
  display: flex;
  flex-direction: column;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--color-red-800);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.form__subtitle {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: var(--measure-narrow);
}

.form__footer-note {
  font-size: 10px;
  color: var(--color-pewter);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

/* Form card wrapper */
.form-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.form-card--dark {
  background-color: var(--color-red-950);
  border-color: rgba(255, 255, 255, 0.06);
}


/* =============================================================================
   09. CARDS
   ============================================================================= */

/* ── INDUSTRY CARDS ─────────────────────────────────────────────────────── */
.industry-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--duration-slow) var(--ease-standard),
              box-shadow var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}

/* Gradient top bar — signature hover moment */
.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-red-800), var(--color-blue-800));
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.industry-card:hover {
  border-color: var(--color-red-300);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-card:hover .industry-card__arrow {
  transform: translateX(5px);
}

.industry-card__icon {
  width: 32px;
  height: 32px;
  color: var(--color-red-800);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.industry-card__tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-red-600);
  display: block;
  margin-bottom: var(--space-2);
}

.industry-card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.industry-card__body {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  max-width: none;
}

.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--color-blue-700);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.industry-card__link:hover { color: var(--color-blue-800); }

.industry-card__arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* ── STAT / PROOF POINT CARDS ───────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.stat-card--red  { background-color: var(--color-red-900); }
.stat-card--blue { background-color: var(--color-blue-800); }

.stat-card__number {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 54px);
  color: var(--color-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
  display: block;
}

.stat-card__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  display: block;
  margin-bottom: var(--space-1);
}

.stat-card__source {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.22);
  display: block;
}

/* ── INSIGHT / WHITE PAPER CARDS ────────────────────────────────────────── */
.insight-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.insight-card:hover {
  border-color: var(--color-red-200);
  box-shadow: var(--shadow-card);
}

.insight-card__category {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}

.insight-card__category--paper  { color: var(--color-gold-dark); }
.insight-card__category--analysis{ color: var(--color-red-600); }
.insight-card__category--policy  { color: var(--color-blue-700); }

.insight-card__title {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.insight-card__abstract {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  flex: 1;
  max-width: none;
}

.insight-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-mist);
  font-size: 10.5px;
  color: var(--color-pewter);
}

/* Document card (white paper panel) */
.doc-card {
  background-color: var(--color-red-950);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.doc-card .rule-gold {
  margin-bottom: var(--space-4);
}

.doc-card__category {
  font-size: var(--text-micro);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-semibold);
  display: block;
  margin-bottom: var(--space-3);
}

.doc-card__title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--color-white);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.doc-card__meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  line-height: var(--leading-relaxed);
}


/* =============================================================================
   10. HERO SECTION
   ============================================================================= */

.hero {
  min-height: 90vh;
  min-height: 90dvh;
  background-color: var(--color-red-950);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(66px + var(--space-32)); /* nav height + breathing room */
  padding-bottom: var(--space-16);
}

/* Blue radial gradient — top right */
.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(13, 59, 102, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

/* Diagonal structural lines */
.hero__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.045;
}

.hero__lines svg {
  width: 100%;
  height: 100%;
}

/* Gold accent rule — left */
.hero__rule {
  position: absolute;
  left: var(--space-20);
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 80px;
  background-color: var(--color-gold);
}

/* Content */
.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-20);
  width: 100%;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: center;
}

.hero__content {}

/* Gold decorative rule — above eyebrow */
.hero__gold-rule {
  width: 30px;
  height: 1.5px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-5);
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
  display: block;
  margin-bottom: var(--space-5);
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin-bottom: var(--space-5);
  max-width: 600px;
}

/* Gold italic — signature moment */
.hero__headline em {
  color: var(--color-gold);
  font-style: italic;
}

.hero__subheadline {
  font-size: 14px;
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.44);
  max-width: 440px;
  margin-bottom: var(--space-10);
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}

/* Trust strip */
.hero__trust {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__trust-label {
  font-size: 8.5px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

/* Cert pills */
.cert-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.30);
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* Visual area — diagram slot */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =============================================================================
   11. SECTION PATTERNS
   ============================================================================= */

/* ── SECTION HEADER — consistent opener ────────────────────────────────── */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header .rule-gold {
  margin-bottom: var(--space-4);
}

.section-header__title {
  margin-bottom: var(--space-4);
}

.section-header__lead {
  margin-bottom: 0;
}

/* ── CTA PANEL ──────────────────────────────────────────────────────────── */
.cta-panel {
  background-color: var(--color-red-950);
  border-radius: var(--radius-2xl);
  padding: var(--space-24) var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Blue gradient overlay */
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 59, 102, 0.28) 0%, transparent 55%);
  pointer-events: none;
}

.cta-panel__inner {
  position: relative;
  z-index: var(--z-raised);
}

.cta-panel .rule-gold {
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta-panel__headline {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.cta-panel__sub {
  font-size: 13.5px;
  font-weight: var(--weight-light);
  color: rgba(255, 255, 255, 0.42);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-10);
  max-width: 440px;
  margin-inline: auto;
}

.cta-panel__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── AUDIENCE PATHWAY CARDS ─────────────────────────────────────────────── */
.pathway-card {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
}

.pathway-card--government { background-color: var(--color-red-950); }
.pathway-card--enterprise { background-color: var(--color-blue-800); }
.pathway-card--partners   { background-color: var(--color-red-900); border: 1px solid rgba(255,255,255,0.05); }

.pathway-card .rule-gold {
  margin-bottom: var(--space-4);
}

.pathway-card__audience {
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.40);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-semibold);
  display: block;
  margin-bottom: var(--space-3);
}

.pathway-card--government .pathway-card__audience { color: var(--color-gold); }

.pathway-card__title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.pathway-card__desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.36);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: none;
}

/* ── CALLOUT / HIGHLIGHT BOX ─────────────────────────────────────────────── */
.callout {
  background-color: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  border-left: 3px solid var(--color-blue-800);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-6);
}

.callout p {
  font-size: 13px;
  color: var(--color-blue-800);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

.callout strong { font-weight: var(--weight-semibold); color: var(--color-blue-900); }

.callout--warning {
  background-color: #FFFBF0;
  border-color: rgba(201,168,76,0.25);
  border-left-color: var(--color-gold);
}

.callout--warning p { color: var(--color-gold-dark); }

/* ── PROBLEM / NARRATIVE SECTION ─────────────────────────────────────────── */
.narrative-section {
  text-align: center;
}

.narrative-section .section-header {
  max-width: 640px;
  margin-inline: auto;
}

.narrative-section p {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}


/* =============================================================================
   12. TRUST SIGNALS & COMPLIANCE BADGES
   ============================================================================= */

/* Trust badge — used inline and in forms */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--color-graphite);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.trust-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-success);
  flex-shrink: 0;
}

/* Trust badge strip — bottom of forms, near CTAs */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-4);
}

/* Partner / certification logos strip */
.partner-strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.partner-strip__logo {
  height: 24px;
  width: auto;
  opacity: 0.35;
  filter: grayscale(100%);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.partner-strip__logo:hover { opacity: 0.55; }

/* Badges — for content tagging */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.badge--red   { background-color: var(--color-red-50);  color: var(--color-red-700);  border: 1px solid var(--color-red-200);  }
.badge--blue  { background-color: var(--color-blue-50); color: var(--color-blue-700); border: 1px solid var(--color-blue-200); }
.badge--gold  { background-color: rgba(201,168,76,0.10); color: var(--color-gold-dark); border: 1px solid rgba(201,168,76,0.28); }
.badge--green { background-color: #EAF5EF; color: var(--color-success); border: 1px solid #A8D8BC; }
.badge--dark  { background-color: var(--color-red-900); color: rgba(255,255,255,0.65); }
.badge--grey  { background-color: var(--color-fog); color: var(--color-steel); border: 1px solid var(--color-mist); }


/* =============================================================================
   13. DOWNLOAD STRIP (PERSISTENT)
   ============================================================================= */

.download-strip {
  background-color: var(--color-red-900);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  z-index: var(--z-download);
}

/* Fixed at bottom — applied when triggered by scroll */
.download-strip--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.download-strip__icon {
  color: var(--color-gold);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.download-strip__text {}

.download-strip__title {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-white);
  display: block;
  margin-bottom: 2px;
}

.download-strip__meta {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.36);
  display: block;
}

.download-strip__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.download-strip__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.24);
  font-size: 20px;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-standard);
}

.download-strip__dismiss:hover { color: rgba(255, 255, 255, 0.60); }


/* =============================================================================
   14. ARCHITECTURE DIAGRAM COMPONENTS
   ============================================================================= */

/* Layer stack — used in What is HIDaaS and Technology pages */
.arch-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.arch-layer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-mist);
  border-left: 3px solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-white);
  position: relative;
}

.arch-layer--red    { border-left-color: var(--color-red-700); }
.arch-layer--blue   { border-left-color: var(--color-blue-700); }
.arch-layer--gold   { border-left-color: var(--color-gold); background-color: #FFFBF0; }
.arch-layer--teal   { border-left-color: var(--color-success); }

.arch-layer__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  min-width: 22px;
  flex-shrink: 0;
}

.arch-layer--red  .arch-layer__num { color: var(--color-red-700); }
.arch-layer--blue .arch-layer__num { color: var(--color-blue-700); }
.arch-layer--gold .arch-layer__num { color: var(--color-gold); }

.arch-layer__content {}

.arch-layer__title {
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: 2px;
}

.arch-layer--gold .arch-layer__title { color: var(--color-red-800); }

.arch-layer__desc {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  max-width: none;
}

.arch-layer__tag {
  margin-left: auto;
  flex-shrink: 0;
}

/* The category marker */
.arch-layer__marker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-gold);
  margin-left: auto;
  flex-shrink: 0;
}

/* Connector arrow between layers */
.arch-arrow {
  text-align: center;
  font-size: 12px;
  color: var(--color-ash);
  padding-block: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.arch-arrow__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-pewter);
}

/* Application rails at bottom */
.arch-rails {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.arch-rail {
  border-top: 2px solid;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.arch-rail--red  { background-color: var(--color-red-950); border-top-color: var(--color-red-700); }
.arch-rail--blue { background-color: var(--color-blue-900); border-top-color: var(--color-blue-600); }

.arch-rail__name {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.60);
  display: block;
  margin-bottom: var(--space-1);
}

.arch-rail--red .arch-rail__name { color: var(--color-gold); }

.arch-rail__uses {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.5;
  max-width: none;
}

/* Input node strip */
.arch-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.arch-input-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-fog);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.arch-separator {
  color: var(--color-ash);
  font-size: 16px;
}


/* =============================================================================
   15. FOOTER
   ============================================================================= */

.footer {
  background-color: var(--color-red-950);
  padding-top: var(--space-16);
}

/* Gold top line */
.footer::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold) 0%, transparent 60%);
  margin-bottom: var(--space-12);
}

.footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-20);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__brand {}

.footer__logo {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-4);
}

.footer__tagline {
  font-size: 13px;
  font-weight: var(--weight-light);
  color: rgba(255, 255, 255, 0.36);
  line-height: var(--leading-relaxed);
  max-width: 280px;
  margin-bottom: var(--space-6);
}

.footer__col-title {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  display: block;
  margin-bottom: var(--space-4);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__links a:hover { color: rgba(255, 255, 255, 0.80); }

/* Compliance badges in footer */
.footer__compliance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
}

/* Footer bottom bar */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copyright {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.22);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__legal a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__legal a:hover { color: rgba(255, 255, 255, 0.50); }


/* =============================================================================
   16. UTILITY CLASSES
   ============================================================================= */

/* Display */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-none        { display: none; }
.d-inline-flex { display: inline-flex; }

/* Flex utilities */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mx-auto { margin-inline: auto; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Colour utilities */
.text-red-800 { color: var(--color-red-800); }
.text-blue-800{ color: var(--color-blue-800); }
.text-gold    { color: var(--color-gold); }
.text-ink     { color: var(--color-ink); }
.text-steel   { color: var(--color-text-secondary); }
.text-white   { color: var(--color-white); }
.text-dim     { color: var(--color-text-ghost); }

/* Background utilities */
.bg-red-950  { background-color: var(--color-red-950); }
.bg-red-900  { background-color: var(--color-red-900); }
.bg-red-800  { background-color: var(--color-red-800); }
.bg-blue-800 { background-color: var(--color-blue-800); }
.bg-white    { background-color: var(--color-white); }
.bg-paper    { background-color: var(--color-paper); }
.bg-fog      { background-color: var(--color-fog); }

/* Width */
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--measure-narrow); }
.max-w-body   { max-width: var(--measure-body); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Tabular numbers — always use on statistics */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background-color: var(--color-red-800);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 13px;
  font-weight: var(--weight-medium);
  z-index: var(--z-toast);
  transition: top var(--duration-fast);
}

.skip-link:focus { top: 0; }


/* =============================================================================
   17. ANIMATIONS & MOTION
   ============================================================================= */

/* Stat counter — applied via JS intersection observer */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section reveal */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle horizontal pulse — hero identity node */
@keyframes identityPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.04); opacity: 0.85; }
}

/* Gold shimmer — used sparingly on decorative rule only */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Reveal utility — add class via JS to trigger */
.reveal {
  opacity: 0;
  transform: translateY(10px);
}

.reveal.is-visible {
  animation: fadeInUp var(--duration-enter) var(--ease-enter) forwards;
}

/* Stagger children — add to parent */
.stagger-children > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-children > *:nth-child(2)  { animation-delay: 80ms; }
.stagger-children > *:nth-child(3)  { animation-delay: 160ms; }
.stagger-children > *:nth-child(4)  { animation-delay: 240ms; }
.stagger-children > *:nth-child(5)  { animation-delay: 320ms; }
.stagger-children > *:nth-child(6)  { animation-delay: 400ms; }

/* Identity node pulse — hero diagram */
.identity-node {
  animation: identityPulse 3s var(--ease-standard) infinite;
}


/* =============================================================================
   18. ACCESSIBILITY & REDUCED MOTION
   ============================================================================= */

/* All animations respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .identity-node { animation: none; }
}

/* Focus ring — enforced for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-blue-800);
  outline-offset: 3px;
}

/* High contrast mode adjustments */
@media (forced-colors: active) {
  .btn-primary,
  .btn-gold,
  .btn-blue { border: 2px solid ButtonText; }
  .cert-pill,
  .trust-badge { border: 1px solid ButtonText; }
}


/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet — 768px */
@media (max-width: 768px) {
  :root {
    --space-20: 24px;
    --space-24: 64px;
  }

  .container { padding-inline: var(--space-6); }

  .grid { gap: var(--space-4); }
  .col-hero-text,
  .col-hero-visual { grid-column: span 12; }
  .col-cta { grid-column: span 12; }

  .grid-industries { grid-template-columns: 1fr; }
  .grid-stats      { grid-template-columns: repeat(2, 1fr); }
  .grid-insights   { grid-template-columns: 1fr; }
  .grid-two        { grid-template-columns: 1fr; }

  .nav__items  { display: none; }
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }

  .hero { padding-top: calc(66px + var(--space-16)); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer__brand { grid-column: 1 / -1; }

  .cta-panel { padding: var(--space-12) var(--space-6); }

  .form__row { grid-template-columns: 1fr; }

  .arch-rails { grid-template-columns: repeat(3, 1fr); }

  .download-strip { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .download-strip .btn { width: 100%; }
}

/* Mobile — 480px */
@media (max-width: 480px) {
  .grid-stats { grid-template-columns: 1fr 1fr; }

  .footer__grid { grid-template-columns: 1fr; }

  .arch-rails { grid-template-columns: repeat(2, 1fr); }

  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .cta-panel__actions { flex-direction: column; }
  .cta-panel__actions .btn { width: 100%; }
}

/* Wide screens — 1440px+ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--space-32); }
}