/* =============================================================================
   CORE NOVA, main.css
   Mirrors the ~/Claude/www/frontend/assets/css/main.css structure with the
   Core Nova brand palette (shared navy anchor + violet/cyan/indigo accents).
   Canonical sources:
     Brand guide:    ~/Claude/branding/core-nova-brand/core-nova-brand-guide.md
     KB tokens:      ~/Claude/kb/core-nova/design/tokens.md
     Shared scales:  ~/Claude/kb/shared/design/scales.md
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. FONTS (self-hosted, latin subset)
   Inter is the shared web typeface across Cyber Node and Core Nova.
   Email signatures and print/decks use Helvetica Neue / Arial (system fonts).
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-variable.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;
}

/* -----------------------------------------------------------------------------
   1. TOKENS: Core Nova palette, type, spacing, layout, radii, shadows
   ----------------------------------------------------------------------------- */
:root {
  /* Backgrounds (navy anchor shared with Cyber Node) */
  --bg:           #13294B;
  --bg-card:      #1a3560;
  --bg-card-alt:  #172f55;
  --bg-deep:      #0d1e38;
  --bg-surface:   #1e3d6e;

  /* Accents (Core Nova-specific: violet + cyan + indigo) */
  --violet:       #A78BFA;
  --violet-dim:   #8B6FE0;
  --violet-glow:  rgba(167, 139, 250, 0.12);
  --cyan:         #22D3EE;
  --cyan-glow:    rgba(34, 211, 238, 0.15);
  --indigo:       #818CF8;

  /* Text */
  --white:        #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-dim:     #64748B;
  --text-on-light: #13294B;
  --table-band:   #E8EAF0;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.08);
  --border-violet: rgba(167, 139, 250, 0.25);
  --border-cyan:   rgba(34, 211, 238, 0.25);

  /* Typography */
  --font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Roboto Mono', 'Fira Code', 'Courier New', monospace;

  /* Type scale (shared) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-display: clamp(2.5rem, 5.5vw, 4rem);
  --text-section: clamp(1.875rem, 3.5vw, 2.75rem);

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

  /* Layout (shared) */
  --container:        1200px;
  --container-narrow: 800px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows (accent-tinted) */
  --shadow-violet: 0 0 24px rgba(167, 139, 250, 0.15);
  --shadow-cyan:   0 0 16px rgba(34, 211, 238, 0.20);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.40);

  /* Transitions (shared) */
  --transition:      200ms ease;
  --transition-slow: 400ms ease;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Page-level grid texture, faint, fixed to viewport so it never scrolls away.
   Removes the "flat navy field" reading and signs every page with the same
   atmospheric vocabulary as the PCC deck (presentation.md §section::before). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

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

a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.40);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  font-weight: 600;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover, a:focus {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
}

/* Structural-link contexts override the prose treatment: nav, footer, buttons
   and card "Read more" links should not carry the inline-link underline tone
   or the bold weight. The text-rash only matters inside lead paragraphs. */
.site-nav a, .site-footer a {
  font-weight: 500;
  text-decoration: none;
}
.btn { font-weight: 700; text-decoration: none; }
.card > p > a, .sister a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-violet);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY (per brand guide: titles violet, body white, scarcity for cyan)
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--violet);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-section); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.015em; }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin: 0 0 var(--space-4);
  max-width: 65ch;
}

.card p { max-width: none; }

/* Section H2 needs proper breathing room before its body content. */
section h2 { margin-top: var(--space-10); margin-bottom: var(--space-6); }
section h2:first-child,
section .container > h2:first-child,
section .container > .container > h2:first-child {
  margin-top: 0;
}
/* Card grids always sit with clear separation from preceding heading or
   intro paragraph. */
section .card-grid { margin-top: var(--space-8); }
/* Intro paragraph immediately under an H2 carries the H2's breathing
   discipline. */
section h2 + p { margin-bottom: var(--space-6); }

/* Body lists inside sections: bullets stay inside the column, with spacing. */
section ul, section ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-6);
  max-width: 65ch;
}
section li { margin-bottom: var(--space-2); line-height: 1.55; }
section li::marker { color: var(--cyan); }
section ul ul, section ol ol { margin-block: var(--space-2); }

/* Card body lists do not get the section padding (cards have their own). */
.card ul, .card ol { padding-left: var(--space-5); max-width: none; }

/* Buttons placed below text need separation. */
section .btn-row { margin-top: var(--space-8); }

.kicker {
  display: inline-block;
  max-width: 100%;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius-sm);
  background: rgba(34, 211, 238, 0.06);
  margin-bottom: var(--space-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Section-anchor signpost prefix. Mono "// " mark before the kicker label
   gives every section a clear typographic anchor at desktop padding. */
.kicker::before {
  content: '// ';
  color: var(--violet);
  margin-right: 2px;
  letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------------
   STATS STRIP, three display-scale numbers below the hero. Premium-brand
   pattern (Stripe, Linear): the offer in three bites, gradient text, dividers.
   ----------------------------------------------------------------------------- */
.stats-strip {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  padding-block: var(--space-12);
  border-block: 1px solid var(--border);
}
.stats-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  text-align: center;
}
@media (min-width: 768px) {
  .stats-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .stats-strip__cell + .stats-strip__cell { border-left: 1px solid var(--border); }
}
.stats-strip__cell { padding-inline: var(--space-6); }
.stats-strip__value {
  display: block;
  font-family: var(--font);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}
.stats-strip__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   TESTIMONIALS, operator-voice quote cards.
   Anonymised attribution (role + sector + location) until consented case
   studies unlock named attribution.
   ----------------------------------------------------------------------------- */
.testimonials { padding-block: var(--space-20); }
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .testimonials__grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
  border: 1px solid var(--border-violet);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -12px;
  left: 14px;
  font-family: var(--font);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--violet);
  opacity: 0.35;
  pointer-events: none;
}
.testimonial:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-violet);
}
.testimonial blockquote {
  margin: 0 0 var(--space-5);
  font-family: var(--font);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.testimonial cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border-violet);
  padding-top: var(--space-4);
}
.testimonial__role {
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-sm);
}
.testimonial__org {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.testimonials__note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 64ch;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   PULL QUOTE, a single founder-voice line mid-page, set in display weight.
   ----------------------------------------------------------------------------- */
.pull-quote {
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
  padding-block: var(--space-20);
  text-align: center;
  position: relative;
}
.pull-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events: none;
}
.pull-quote .container { position: relative; max-width: 920px; }
.pull-quote__text {
  font-family: var(--font);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--white);
  margin: 0 auto;
}
.pull-quote__text strong {
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
  font-weight: 800;
}
.pull-quote__attr {
  display: inline-block;
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* -----------------------------------------------------------------------------
   HERO PILLARS, three quick-scan chips below the lead on the home page.
   Visible on all sizes; on mobile they replace the missing hero SVG.
   ----------------------------------------------------------------------------- */
.hero-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
  max-width: 520px;
}
.hero-pillars a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid var(--border-violet);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--violet);
  text-align: center;
  line-height: 1.3;
  transition: all var(--transition);
}
.hero-pillars a:hover, .hero-pillars a:focus {
  background: rgba(34, 211, 238, 0.08);
  border-color: var(--border-cyan);
  color: var(--cyan);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
   MOBILE STICKY CTA BAR, always visible on phone, hides on contact page.
   ----------------------------------------------------------------------------- */
.mobile-cta {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: rgba(13, 30, 56, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-violet);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  opacity: 1;
  transition: opacity 220ms ease;
}
/* Hidden state — fade out only. iOS Safari can mis-composite a
   transform-animated fixed element during scroll, so we avoid any
   transform here. Element stays anchored at bottom:0 throughout. */
.mobile-cta[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mobile-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}
@media (max-width: 768px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 76px; } /* clear the sticky bar */
  /* On the contact page itself, no sticky bar (user is at the destination). */
  body[data-page="contact"] .mobile-cta { display: none; }
  body[data-page="contact"] { padding-bottom: 0; }
  /* Push the consent banner up so it does not collide with the sticky CTA. */
  .cn-banner { bottom: 76px; }
}

/* -----------------------------------------------------------------------------
   MOBILE HERO: kill the SVG art below 600px, scale up the H1, single CTA,
   make the hero its own art piece.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__art { display: none; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .hero .btn-secondary { display: none; }
  .hero .btn-primary { width: 100%; text-align: center; }
  .stats-strip__value { font-size: clamp(2rem, 8vw, 3rem); }
  .pull-quote { padding-block: var(--space-12); }
}
@media (max-width: 600px) {
  .kicker { letter-spacing: 0.12em; padding: 3px 8px; }
}

.lead {
  font-size: var(--text-lg);
  color: var(--text-primary);
  max-width: 60ch;
}

.muted {
  color: var(--text-secondary);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* -----------------------------------------------------------------------------
   4. LAYOUT: containers, sections
   ----------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

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

@media (max-width: 480px) {
  .container, .container-narrow { padding-inline: var(--space-4); }
}

section {
  padding-block: var(--space-16);
  position: relative;
}

@media (min-width: 768px) {
  section {
    padding-block: var(--space-20);
  }
}

/* Section background helpers used to alternate depth across the page. */
.section--deep {
  background: var(--bg-deep);
  border-block: 1px solid var(--border);
}
.section--surface {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-surface) 100%);
}

/* Sister-brand strip, ribbon at the foot of every page. Compact, signed. */
.sister {
  background: var(--bg-deep);
  padding-block: var(--space-8);
  border-top: 1px solid var(--border-violet);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.sister .container { max-width: var(--container-narrow); }
.sister p { margin: 0 auto; max-width: 70ch; }
.sister a {
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid var(--border-violet);
}
.sister a:hover { color: var(--cyan); border-bottom-color: var(--border-cyan); }

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--violet);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 100;
}

/* -----------------------------------------------------------------------------
   5. HEADER & NAV
   ----------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 30, 56, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-6);
}

.site-header .logo img {
  height: 48px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .site-header .logo img { height: 38px; }
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  align-items: center;
}

.site-nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a[aria-current="page"] {
  color: var(--cyan);
}

.site-nav .cta {
  background: var(--violet);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 700;
}

.site-nav .cta:hover,
.site-nav .cta:focus {
  background: var(--cyan);
  color: var(--bg);
}

/* Mobile nav toggle (hamburger). Hidden on desktop, replaces nav <900px. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-violet);
  border-radius: var(--radius);
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--violet);
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle span { top: 50%; transform: translateY(-50%); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-violet);
    box-shadow: var(--shadow-lg);
  }
  .site-nav[data-open="true"] { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4);
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-base);
  }
  .site-nav .cta {
    margin-top: var(--space-2);
    text-align: center;
  }

  .site-header .container { position: relative; gap: var(--space-3); }

  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }
}

/* -----------------------------------------------------------------------------
   6. FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.site-footer .container {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer .container {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* Footer column 1: logo, tagline, and entity stacked vertically and
   left-aligned to one shared edge. The logo sits above the text group;
   the entity line sits tight beneath the tagline. */
.site-footer .container > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.site-footer .container > div:first-child > .logo {
  line-height: 0;
  margin-bottom: var(--space-4);
}
.site-footer .container > div:first-child > .logo img { height: 56px; width: auto; display: block; }
.site-footer .container > div:first-child > p.muted { margin: 0; }
.site-footer .container > div:first-child > p.entity { margin: 0; }

.site-footer h2 {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--cyan);
}

.site-footer .entity {
  font-size: var(--text-xs);
  color: var(--text-dim);
  /* margin-top dropped 2026-05-24: the grid above stacks tagline +
     entity with row-gap:space-1, so adding margin-top here pushed the
     entity line down by 24px and broke the intended tight stack. */
}

/* -----------------------------------------------------------------------------
   7. HERO - gradient block, violet grid texture, soft radial glow,
   tightened display H1 with violet-to-cyan accent rule.
   Visual vocabulary lifted from the PCC deck title and lead slides.
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-20) var(--space-16);
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg) 55%, var(--bg-surface) 100%);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-24) var(--space-20);
  }
}

/* Localised violet grid masked to the upper-left to give the hero its own
   weight without competing with the body-level grid. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(167, 139, 250, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 30% 35%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 35%, black 0%, transparent 75%);
  pointer-events: none;
}

/* Violet glow behind the headline column. The --mx and --my CSS variables
   are written by main.js on pointermove inside the hero, so the glow
   tracks the cursor for a subtle parallax wow effect. Fallback values
   match the original static positioning. */
.hero {
  --mx: 22%;
  --my: 50%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 520px at var(--mx) var(--my), rgba(167, 139, 250, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 80%, rgba(34, 211, 238, 0.10) 0%, transparent 60%);
  pointer-events: none;
  transition: background-position 400ms ease;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  color: var(--white);
  letter-spacing: -0.028em;
  line-height: 1.04;
  font-weight: 800;
  max-width: 22ch;
  margin-bottom: var(--space-3);
  overflow-wrap: break-word;
}

/* Gradient-fill emphasis inside the H1. Reads as the brand spark on the
   most important phrase of the page. */
.hero-h1-accent {
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
}

/* Punch line under the H1: display-weight, gradient text, real presence. */
.hero .lead--punch {
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  max-width: 36ch;
}
.hero .lead--punch strong {
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet);
  font-weight: 800;
}

/* Two-line H1 pattern: each sentence renders as its own block so the
   two-pillar headline reads as two declarative lines, not a run-on. */
.hero-h1-line {
  display: block;
  max-width: 22ch;
}
.hero-h1-line--alt {
  color: var(--violet);
  margin-top: var(--space-1);
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(1.5rem, 6.5vw, 2.25rem);
    letter-spacing: -0.015em;
    max-width: none;
  }
  .hero-h1-line { max-width: none; }
  .hero .lead { font-size: var(--text-base); }
}

/* Violet-to-cyan accent rule under the headline. PCC title-slide vocabulary. */
.hero h1::after {
  content: '';
  display: block;
  width: 96px;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  margin-top: var(--space-6);
  border-radius: 2px;
}

.hero .lead {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  color: var(--text-primary);
  max-width: 56ch;
}

@media (min-width: 768px) {
  .hero .lead {
    font-size: var(--text-xl);
  }
}

/* SVG art floats on its own soft cyan glow so it stops sitting on flat navy. */
.hero-split__art {
  position: relative;
}
.hero-split__art::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.10) 0%, transparent 65%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   8. BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--text-base);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.btn:hover, .btn:focus {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--violet);
  color: var(--bg);
  box-shadow: var(--shadow-violet);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 6px 24px rgba(34, 211, 238, 0.30);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.30);
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(34, 211, 238, 0.05);
}

/* Ghost cyan button. Paired secondary CTA next to btn-primary (violet-
   filled). Translucent cyan tint with cyan border and cyan text at rest;
   fills to solid cyan on hover. Lower visual weight than btn-primary so
   the two CTAs read as primary + secondary, not two equal primaries. */
.btn-cyan {
  background: rgba(34, 211, 238, 0.08);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: none;
}
.btn-cyan:hover,
.btn-cyan:focus {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: var(--shadow-cyan);
}

.btn-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   9. CARDS - base + featured/flagship variants. Top accent stripe + hover lift.
   ----------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Default card top stripe, faint violet so all cards carry the brand without
   shouting. Featured/flagship variants below override to brighter accents. */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.35) 50%, transparent 100%);
  opacity: 0.7;
  transition: opacity var(--transition), background var(--transition);
}

.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--border-violet);
  box-shadow: var(--shadow-lg), var(--shadow-violet);
}

.card:hover::before,
.card:focus-within::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}

/* Stretched-link pattern: when a card's last paragraph holds a single
   "Read more" link, expand that link's hit area to cover the whole card.
   Anywhere on the card now navigates to the destination. The visible
   "Read more" text remains as a clear affordance for readers and screen
   readers; the ::after only handles the click target. */
.card:has(> p:last-child > a[href]:only-child) {
  cursor: pointer;
}
.card > p:last-child > a[href]:only-child::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

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

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
}

.card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  color: var(--white);
}

.card > p > a {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border-violet);
  padding-bottom: 2px;
}

/* Featured: the lead use-case card on the homepage. Visible elevation.        */
.card--featured {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
  border-color: var(--border-violet);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(167, 139, 250, 0.10);
}
.card--featured::before {
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  opacity: 1;
  height: 3px;
}
.card--featured h3 {
  font-size: var(--text-2xl);
  color: var(--white);
}

/* Flagship: the AI IP Protection (Pillar 2) tile on the services grid. */
.card--flagship {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
  border-color: var(--border-cyan);
}
.card--flagship::before {
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  opacity: 1;
  height: 3px;
}
.card--flagship .kicker {
  background: rgba(34, 211, 238, 0.10);
  border-color: var(--border-cyan);
  margin-bottom: var(--space-3);
}

/* -----------------------------------------------------------------------------
   10. TABLES - PCC deck chrome: card surface, violet header underline, soft
   zebra, rounded corners with overflow hidden.
   ----------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-block: var(--space-6);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

thead {
  background: var(--bg-deep);
}

thead th {
  color: var(--white);
  font-weight: 700;
  border-bottom: 2px solid var(--violet);
  letter-spacing: -0.01em;
}

tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child td { border-bottom: none; }

td strong { color: var(--violet); }
td em     { color: var(--cyan); font-style: normal; font-weight: 600; }

/* -----------------------------------------------------------------------------
   11. UTILITIES
   ----------------------------------------------------------------------------- */
.text-highlight { color: var(--cyan); font-weight: 700; }
.text-violet    { color: var(--violet); }
.text-center    { text-align: center; }
.mt-0  { margin-top: 0; }
.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); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   12. GRIDS (multi-column layouts beyond .card-grid)
   ----------------------------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* -----------------------------------------------------------------------------
   13. FORMS (contact form fields)
   ----------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__group { display: grid; gap: var(--space-2); }
.form__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.form__input, .form__textarea, .form__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-deep);
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__textarea { resize: vertical; min-height: 8rem; }
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: var(--shadow-violet);
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--text-dim); }
.form__confirm-url { position: absolute; left: -9999px; }
.form__note { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2); }
.form__status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  display: none;
}
.form__status--success {
  display: block;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid var(--cyan);
  color: var(--cyan);
}
.form__status--error {
  display: block;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #FCA5A5;
  color: #FCA5A5;
}

/* -----------------------------------------------------------------------------
   14. CHECKLIST (numbered "what happens next" steps)
   ----------------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.checklist__item { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-4); align-items: start; }
.checklist__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--violet);
  color: var(--bg);
  font-weight: 700;
  font-size: var(--text-sm);
}
.checklist__title { font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-1); }
.checklist__desc  { color: var(--text-secondary); margin: 0; font-size: var(--text-sm); }

/* -----------------------------------------------------------------------------
   15. FAQ (accordion)
   ----------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.faq__item:hover,
.faq__item:focus-within {
  border-color: var(--border-violet);
  background: var(--bg-card-alt);
}
.faq__item.open { border-color: var(--border-violet); }
.faq__question {
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-6);
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq__question::after {
  content: '+';
  color: var(--violet);
  font-size: var(--text-2xl);
  transition: transform var(--transition);
  line-height: 1;
}
.faq__item.open .faq__question::after { transform: rotate(45deg); }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
  padding: 0 var(--space-6);
}
.faq__item.open .faq__answer {
  max-height: 1000px;
  padding-bottom: var(--space-4);
}

/* -----------------------------------------------------------------------------
   16. PRICE BLOCK (the A$6,000 First Workflow callout)
   ----------------------------------------------------------------------------- */
.price-block {
  background: var(--bg-card);
  border: 1px solid var(--violet);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-block: var(--space-8);
}
.price-block__amount {
  font-family: var(--font);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 var(--space-2);
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet); /* fallback for browsers that ignore background-clip */
}
.price-block__terms { color: var(--text-secondary); margin: 0 0 var(--space-6); }
.price-block .btn { margin-top: var(--space-4); }

/* -----------------------------------------------------------------------------
   17. HERO SPLIT LAYOUT (text left, illustration right)
   ----------------------------------------------------------------------------- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
}
.hero-split__art { display: flex; justify-content: center; align-items: center; min-width: 0; }
.hero-split__art svg { width: 100%; max-width: 640px; height: auto; }
@media (max-width: 900px) {
  .hero-split__art svg { max-width: 360px; margin-inline: auto; }
}

/* -----------------------------------------------------------------------------
   18. VALUE STATEMENT ICONS
   ----------------------------------------------------------------------------- */
.value-icon {
  width: 48px; height: 48px; margin-bottom: var(--space-3);
  display: block;
}
.value-icon circle, .value-icon path, .value-icon rect, .value-icon line {
  vector-effect: non-scaling-stroke;
}

/* -----------------------------------------------------------------------------
   19. ANIMATED SVG (subtle motion)
   ----------------------------------------------------------------------------- */
@keyframes cn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 rgba(167, 139, 250, 0)); }
  50%      { opacity: 0.85; transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.55)); }
}
@keyframes cn-flow {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes cn-fade {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
@keyframes cn-halo {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.42; }
}
/* Spark heartbeat: the cyan spark inside the white knob brightens and
   dims with a drop-shadow glow. Suggests AI "working" without scaling
   the brand mark. */
@keyframes cn-spark {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0)); }
  50%      { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.75)); }
}
/* Outward ring: a single ring expanding from the mark and fading.
   Reads as a radio wave / signal pulse without touching the mark itself. */
@keyframes cn-ring {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes cn-drift {
  0%   { transform: translate(0%, 0%); }
  50%  { transform: translate(2%, -1.5%); }
  100% { transform: translate(0%, 0%); }
}
.anim-pulse { transform-origin: center; animation: cn-pulse 2.8s ease-in-out infinite; }
.anim-flow  { stroke-dasharray: 6 5; animation: cn-flow 2.4s linear infinite; }
.anim-fade  { animation: cn-fade 2.5s ease-in-out infinite; }
.anim-fade--delay { animation-delay: 0.5s; }
.anim-fade--delay2 { animation-delay: 1s; }
.anim-halo  { transform-origin: center; animation: cn-halo 3.2s ease-in-out infinite; }
.anim-drift { animation: cn-drift 18s ease-in-out infinite; }
.anim-spark { transform-origin: center; animation: cn-spark 2.4s ease-in-out infinite; }
.anim-ring  { transform-origin: center; animation: cn-ring 3.6s ease-out infinite; }
.anim-ring--delay { animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .anim-pulse, .anim-flow, .anim-fade, .anim-halo, .anim-drift,
  .anim-spark, .anim-ring { animation: none; }
}

/* -----------------------------------------------------------------------------
   20. 4-STEP TIMELINE (First Workflow day-by-day)
   ----------------------------------------------------------------------------- */
.timeline {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(4, 1fr); position: relative; }
  .timeline::before {
    content: ''; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: 0.3;
  }
}
.timeline__step { position: relative; text-align: center; padding-top: 2px; }
.timeline__marker {
  width: 64px; height: 64px; margin: 0 auto var(--space-3);
  border-radius: 50%; background: var(--bg-card);
  border: 2px solid var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--violet); font-size: 1.25rem;
  position: relative; z-index: 2;
}
.timeline__step:nth-child(4n) .timeline__marker { border-color: var(--cyan); color: var(--cyan); }
.timeline__title { color: var(--violet); font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); }
.timeline__desc  { color: var(--text-secondary); font-size: 0.875rem; margin: 0; }

/* -----------------------------------------------------------------------------
   21. CONSENT BANNER (matches cybernode pattern, Core Nova palette)
   ----------------------------------------------------------------------------- */
.cn-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-violet);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cn-banner--visible { transform: translateY(0); }
.cn-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
@media (min-width: 768px) {
  .cn-banner__inner {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-6);
  }
}
.cn-banner__text {
  margin: 0; color: var(--text-secondary); font-size: var(--text-sm);
  max-width: 70ch;
}
.cn-banner__link { color: var(--violet); text-decoration: underline; }
.cn-banner__link:hover { color: var(--cyan); }
.cn-banner__actions {
  display: flex; gap: var(--space-3); flex-shrink: 0;
}
.cn-banner__btn {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700; font-size: var(--text-sm);
  cursor: pointer; transition: all var(--transition);
  border: 1px solid transparent;
}
.cn-banner__btn--decline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.cn-banner__btn--decline:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.cn-banner__btn--accept {
  background: var(--violet);
  color: var(--bg);
}
.cn-banner__btn--accept:hover {
  background: var(--cyan);
}

/* -----------------------------------------------------------------------------
   22. FOUNDER PORTRAIT (about page)
   ----------------------------------------------------------------------------- */
.founder-portrait {
  margin: 0;
  max-width: 400px;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-violet);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.founder-portrait figcaption {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-3);
  text-align: center;
  gap: 2px;
}
.founder-portrait__name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--text-base);
}
.founder-portrait__role {
  color: var(--cyan);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   FINAL MOBILE OVERRIDES, last in the cascade to win over earlier
   unscoped .hero-split__art rules elsewhere in this file.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .hero-split__art { display: none !important; }
  .hero .btn-secondary { display: none; }
  .hero .btn-primary { width: 100%; text-align: center; }
}