/* =========================================================
   Exobyte AI — BridgeConcept
   ========================================================= */

/* ---------- Tokens shared across themes ---------- */
:root {
    --shell: 1160px;
    --transition: 260ms ease;

    /* Type */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display1: 'Manrope', 'Inter', sans-serif;
    --font-display: 'Iowan Old Style BT', Georgia, serif;
    --font-body: 'Iowan Old Style BT', Georgia, serif;
    --font-sans: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --paper:      #f6f3ec;
    --paper-deep: #efeae0;
    --ink:        #1b1916;
    --ink-soft:   #4c4942;
    --ink-faint:  #8c887d;
    --ink-accent:     #2f3f6e;   /* ink indigo */
    --ink-accent-2:   #9a6a3c;   /* warm sienna */


    /* Spacing rhythm */
    --section-y: 84px;
    --section-y-lg: 110px;
}

/* ---------- Theme: Flat Dark (default) ---------- */
:root,
[data-theme="flat-dark"] {
    --bg: #061018;
    --bg: #191919;
    --bg: #0C0C0C;
    --bg: #0A0A0A;
    --bg-overlay: visible;
    --line: rgba(174, 203, 236, 0.12);
    --line-strong: rgba(174, 203, 236, 0.22);
    --text-strong: #DFE0E2;
    --text-primary: rgba(229, 237, 246, 0.9);
    --text-primary: #f4f7fb;
    --text-primary: #CDCDCD;
    --text-secondary: rgba(186, 201, 220, 0.72);
    --text-muted: rgba(186, 201, 220, 0.5);
    --accent: #FF6933;
    --accent-alt: #FF6933;
    --surface: rgba(255, 255, 255, 0.02);
    --surface-strong: rgba(255, 255, 255, 0.04);
    --shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

/* ---------- Theme: Soft Dark ---------- */
[data-theme="soft-dark"] {
    --bg: #061018;
    --bg-overlay: visible;
    --line: rgba(174, 203, 236, 0.12);
    --line-strong: rgba(174, 203, 236, 0.22);
    --text-strong: #f4f7fb;
    --text-primary: rgba(229, 237, 246, 0.9);
    --text-secondary: rgba(186, 201, 220, 0.72);
    --text-muted: rgba(186, 201, 220, 0.5);
    --accent: #FF6933;
    --accent-alt: #FF6933;
    --surface: rgba(255, 255, 255, 0.025);
    --surface-strong: rgba(255, 255, 255, 0.045);
    --shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

/* ---------- Theme: Light ---------- */
[data-theme="light"] {
    --bg: #fafbfd;
    --bg-overlay: transparent;
    --line: rgba(30, 50, 80, 0.1);
    --line-strong: rgba(30, 50, 80, 0.18);
    --text-strong: #0c1524;
    --text-primary: rgba(12, 21, 36, 0.82);
    --text-secondary: rgba(12, 21, 36, 0.58);
    --text-muted: rgba(12, 21, 36, 0.42);
    --accent: #FF6933;
    --accent-alt: #FF6933;
    --surface: rgba(74, 108, 247, 0.03);
    --surface-strong: rgba(74, 108, 247, 0.06);
    --shadow: 0 20px 70px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .site-header,
[data-theme="light"] .hero {
    --bg: #061018;
    --line: rgba(174, 203, 236, 0.12);
    --line-strong: rgba(174, 203, 236, 0.22);
    --text-strong: #f4f7fb;
    --text-primary: rgba(229, 237, 246, 0.9);
    --text-secondary: rgba(186, 201, 220, 0.72);
    --text-muted: rgba(186, 201, 220, 0.5);
    --surface: rgba(255, 255, 255, 0.02);
    --surface-strong: rgba(255, 255, 255, 0.04);
    /* Run the WebGL backdrop at full dark-mode opacity, overriding the
       reduced light-mode value declared lower down in the file. */
    --hero-canvas-opacity: 1.0;
    background: var(--bg);
    color: var(--text-primary);
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition), color var(--transition);
}

/* Hide glow layer in non-soft themes */
[data-theme="flat-dark"] .page-glow,
[data-theme="light"] .page-glow {
    display: none;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ---------- Layout primitives ---------- */
.shell {
    width: min(calc(100% - 40px), var(--shell));
    margin: 0 auto;
}

.section {
    padding: var(--section-y) 0;
}

.section-line {
    border-top: 1px solid var(--line);
}

.section-stack {
    display: grid;
    gap: 28px;
}


  /* Styling all lists on the page */
 li {
    font-size: 17px;         /* Sets text and bullet size */
    margin-bottom: 12px;    /* Space between bullet points */
    padding-left: 15px;     /* Space between bullet and text */
  }

  /* Specific sizing for just the bullet marker */
  li::marker {
    font-size: 16px;        /* Makes just the bullet larger */
  }



/* ---------- Section kicker / eyebrow ---------- */
.eyebrow,
.section-kicker {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    color: var(--accent);
}

.section-para {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    font-size: 1.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.0em;
    color: var(--accent);
}

.section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

  blockquote {
    margin: 2.4rem 0;
    padding: 0 0 0 1.0rem;   
    border-left: 2px solid var(--accent);
    font-size: 1.3rem;
    line-height: 1.42;
    font-style: italic;
    letter-spacing: -0.005em;
    margin-top: 0; 
    margin-bottom:0;
  } 
  blockquote p { margin: 0; color: inherit; }


/* ---------- Header ---------- */
.site-header {
    padding: 10px 0 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    background: #0A0A0A;
}

[data-theme="soft-dark"] .site-header {
    background: rgba(6, 16, 24, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.brand-logo {
    height: 38px;
    width: auto;
    display: none;
}

[data-theme="flat-dark"] .brand-logo--dark,
[data-theme="light"] .brand-logo--dark {
    display: block;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, var(--accent-alt) 12%, transparent));
    color: var(--text-strong);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: 1rem;
}

.brand-text {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.site-nav a {
    color: var(--text-secondary);
    font-size: 0.94rem;
    font-weight: 600;
    transition: color var(--transition);
}

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


/* ---------- Headline scale (preview) ---------- */
.display-1 {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(3.1rem, 7vw, 6rem);
    line-height: 1.03;
    letter-spacing: -0.05em;
    font-weight: 700;
}

.display-2 {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.display-3 {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 600;
}

.lede {
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 62ch;
}

.body-copy {
    color: var(--text-secondary);
    font-size: 1.03rem;
    line-height: 1.8;
    max-width: 68ch;
}

/* ---------- Scaffold placeholder marker ---------- */
.placeholder {
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    padding: 28px 24px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.6;
    background: var(--surface);
}

.placeholder strong {
    display: block;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.placeholder-figure {
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-height: 220px;
}

/* ---------- Section frame layout ---------- */
.section-frame {
    display: grid;
    gap: 18px;
}

.section-head {
    display: grid;
    gap: 14px;
    max-width: 760px;
}

/* ---------- Footer ---------- */
.site-footer {
    padding: 28px 0 56px;
    margin-top: 60px;
}

.footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.footer-brand {
    display: grid;
    gap: 12px;
    max-width: 56ch;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.footer-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-align: right;
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 10px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: color 180ms ease, transform 180ms ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: var(--accent-alt);
    transform: translateY(-1px);
    outline: none;
}

.footer-social svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Reveal-on-scroll ----------
   Sections fade up softly when scrolled into view. The figure sub-block has a
   short additional delay so its motion trails the text — one consistent
   animation language across the site, restrained throughout. */

[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity 900ms ease, transform 900ms ease 400ms;
}

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
}

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Figure inside a revealing section trails the text by ~200ms */
html.js [data-reveal] .section-figure-block {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease 200ms, transform 700ms ease 400ms;
}

html.js [data-reveal].is-visible .section-figure-block {
    opacity: 1;
    transform: none;
}


/* Float treatment: blend cream background into page background per theme. */
[data-theme="light"] .hero-figure img {
    mix-blend-mode: multiply;
}

[data-theme="flat-dark"] .hero-figure img,

.hero-tagline {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 1.4vw, 1.18rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.92;
}

.hero-rule {
    width: 56px;
    height: 1px;
    background: var(--line-strong);
    margin: 0 0 36px;
    border: 0;
}

.hero-statement {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 600;
    max-width: 22ch;
}

.hero-body {
    display: grid;
    gap: 18px;
    max-width: 62ch;
    font-size: 2rem;
    line-height: 1.8;
    font-weight: 700;
}

.hero-body p {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1.8;
    font-weight: 700;
}

@media (max-width: 760px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero-figure {
        order: 2;
    }
}

@media (max-width: 720px) {
    .hero {
        padding: 64px 0 48px;
    }

    .hero-stack {
        gap: 28px;
    }

    .hero-statement {
        max-width: none;
    }
}


/* --- Outer container --- */
.history {
    min-width: 0;
    margin-top: 18px;
    padding-top: 18px;
}

.history-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    position: relative;
}

/* Connecting rule running through the year-marker line */
.history-track::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 24px;
    top: 14px;
    height: 1px;
    background: var(--line);
    pointer-events: none;
}

/* --- Single entry --- */
.history-entry {
    display: grid;
    gap: 16px;
    align-content: start;
    position: relative;
    padding-top: 30px;       /* room above for the dot + year line */
}

.history-entry::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg);
}

/* --- Entry typography --- */
.history-year {
    font-family: var(--font-sans);
    color: var(--accent);
    font-size: 1.0rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.history-name {
    color: var(--text-strong);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.0rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    font-weight: 520;
    max-width: 65ch;
    margin: 0;
}

.history-desc {
    color: var(--text-secondary);
    color: #8B8C8E;
    font-size: 1.01em;
    line-height: 1.4;
    max-width: 65ch;
    margin: 0;
    margin-top:0;
}

.history-end {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.72;
    max-width: 85ch;
    margin: 0;
    margin-top:24px;
}


.history-entry--today::before {
    background: var(--accent-alt);
}

.history-entry--today .history-year {
    color: var(--accent-alt);
}

/* --- Responsive: collapse to vertical timeline ---
   Below 1100px, six narrow columns crowd the longer name lines
   (notably "Jean-David Benamou & Yann Brenier"). The timeline
   is restated as a vertical stack with a left-hand spine,
   preserving the timeline metaphor at narrow widths without
   resorting to horizontal scroll. */
@media (max-width: 1000px) {
    .history-track {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-left: 28px;
    }

    /* Connecting rule becomes a vertical spine on the left edge */
    .history-track::before {
        left: 4px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
    }

    .history-entry {
        padding-top: 0;
    }

    .history-entry::before {
        top: 8px;
        left: -28px;
    }

    .history-name {
        max-width: none;
    }

    .history-desc {
        max-width: 64ch;
    }
}

@media (max-width: 560px) {
    .history {
        margin-top: 64px;
        padding-top: 40px;
    }

    .history-intro {
        margin-bottom: 32px;
    }
}

.section-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: 56px;
    align-items: start;
}

.section-content--reverse {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
}

.section-content--reverse .section-text {
    order: 2;
}

.section-text {
    display: grid;
    gap: 26px;
}

.section-headline {
    color: #0A0A0A;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.6vw, 2.0rem);
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-weight: 600;
    max-width: 50ch;
    margin-top: 6;
    margin-bottom: 0;
}

.section-body {
    display: grid;
    gap: 18px;
    max-width: 58ch;
}

.section-body p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.85;
}

.section-takeaway {
    margin: 64px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: lightcoral;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.6vw, 1.8rem);
    line-height: 1.32;
    letter-spacing: -0.022em;
    font-weight: 50;
    max-width: 40ch;
}

.section-figure {
    aspect-ratio: 4 / 3;
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Figure block: floating image + takeaway in the figure column */
.section-figure-block {
    align-self: start;
    min-width: 0;
}

.section-figure-block > .section-figure {
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    overflow: visible;
    display: block;
    margin: 0;
}

.section-figure-block > .section-figure img {
    padding-top: 0px; 
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

[data-theme="light"] .section-figure-block img {
    mix-blend-mode: multiply;
}

[data-theme="flat-dark"] .section-figure-block img{
    filter: invert(1) hue-rotate(180deg) brightness(1.5) saturate(0.95) contrast(1.0);
}

[data-theme="soft-dark"] .section-figure-block img {
    filter: invert(1) hue-rotate(180deg);
}

/* Polarity override: image was rendered for a dark background.
   Darken (no invert) so its light-rendered content reads as mid-toned on the
   light page while preserving the original composition and color relationships. */
[data-theme="light"] .section-figure-block img.figure--for-dark,
[data-theme="light"] .hero-figure img.figure--for-dark {
    mix-blend-mode: normal;
    filter: brightness(0.9) saturate(0.8) contrast(1.0);
}

[data-theme="flat-dark"] .section-figure-block img.figure--for-dark,
[data-theme="soft-dark"] .section-figure-block img.figure--for-dark,
[data-theme="flat-dark"] .hero-figure img.figure--for-dark,
[data-theme="soft-dark"] .hero-figure img.figure--for-dark {
    filter: none;
    mix-blend-mode: normal;
}

.section-takeaway--inline {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    max-width: none;
}

/* Reduce figure size in specific body sections for visual balance with text */
#why-this-matters .section-figure-block > .section-figure,
#why-different .section-figure-block > .section-figure {
    max-width: 78%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 760px) {
    .section-content,
    .section-content--reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .section-content--reverse .section-text {
        order: 0;
    }

    .section-figure {
        aspect-ratio: 3 / 2;
    }

    .section-takeaway {
        margin-top: 40px;
    }
}


/* =========================================================
   Section: Closing statement (08)
   ========================================================= */
.closing {
    padding-top: 96px;
    padding-bottom: 120px;
    text-align: center;
}

.closing-rule {
    width: 56px;
    height: 1px;
    background: var(--line-strong);
    margin: 0 auto 36px;
    border: 0;
}

.left {
    padding-top: 96px;
    padding-bottom: 120px;
    text-align: left; 
}
.left-rule {
    width: 56px;
    height: 1px;
    background: var(--line-strong);
    margin: 0 auto 36px;
    border: 0;
}

.closing-statement {
    margin: 0 auto;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-family: var(--font-display1);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.8;
    letter-spacing: 0.01em;
    font-weight: 500;
    max-width: 42ch;
}

@media (max-width: 720px) {
    .closing {
        padding-top: 64px;
        padding-bottom: 80px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .header-inner {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    .site-nav {
        order: 3;
        width: 100%;
        gap: 22px;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-meta {
        text-align: left;
    }
}

@media (max-width: 560px) {
    :root {
        --section-y: 64px;
        --section-y-lg: 80px;
    }

    .site-nav {
        gap: 18px;
    }
}

/* =========================================================
   v3 — Full-viewport hero with Veo ambient backdrop
   ========================================================= */
.hero.hero--full {
    position: relative;
    min-height: 90vh;
    min-height: 90dvh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

:root { --hero-canvas-opacity: 1.0; }
[data-theme="light"] { --hero-canvas-opacity: 1.0; }

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: var(--hero-canvas-opacity);
    z-index: 0;
    pointer-events: none;
    transition: opacity 700ms cubic-bezier(.4, 0, .6, 1);
    will-change: opacity;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 60% at 50% 10%,
            transparent 01%,
            color-mix(in oklab, var(--bg) 70%, transparent) 95%),
        linear-gradient(180deg,
            color-mix(in oklab, var(--bg) 45%, transparent) 0%,
            transparent 22%,
            transparent 70%,
            color-mix(in oklab, var(--bg) 75%, transparent) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), var(--shell));
    margin: 0 auto;
    padding: clamp(10px, 11vh, 120px) 0 clamp(10px, 16vh, 140px);
}

.hero.hero--full .hero-stack {
    display: grid;
    gap: 40px;
    max-width: 30ch;
}

.hero.hero--full .hero-wordmark {
    font-family: var(--font-sans);
    font-size: clamp(5.4rem, 6.0vw, 6rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    font-weight: 500;
    max-width: 30ch;
    margin: 0;
  font-color: #cdcdcd,
  opacity: 1.0;
  /*text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3), 
               -1px -1px 0px rgba(255, 255, 255, 0.6); */
} 


.hero.hero--full .hero-body {
    max-width: 60ch;
}

.hero.hero--full .hero-body p {
    font-size: clamp(1.15rem, 1.3vw, 1.35rem);
    font-color: #DFE0E2;
    font-color: var(--text-primary);
    color: #CDCDCD;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin-bottom:6px;
    max-width: 50ch;
    font-weight: 100;
  background: linear-gradient(135deg, 
    #b0b3b9 0%, 
    #cdcdcd 50%,
    #b0b3b9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
  
 /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 
               -1px -1px 0px rgba(255, 255, 255, 0.9); */
}

.hero.hero--full .hero-stack { margin-top: -18px; max-width: 65ch; }

.hero.hero--full .hero-body em {
    font-style: normal;
    font-weight: 700;
    color: color-mix(in oklab, var(--text-strong) 55%, var(--accent-alt) 95%);
}

.hero.hero--full .hero-body strong {
    font-weight: 700;
    color: var(--text-strong);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.hero-link {
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 0.90rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
    transition: color var(--transition), border-color var(--transition);
}

.hero-link:hover {
    color: var(--accent-alt);
    border-color: var(--accent-alt);
}

.hero-link--alt { color: var(--text-secondary); }

.hero-credits {
    position: absolute;
    top: min(calc(100dvh - 108px), calc(100% - 56px));
    right: max(40px, calc((100vw - var(--shell)) / 2));
    z-index: 4;
    font-family: var(--font-sans);
}

.hero-credits-trigger {
    appearance: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 6px 0;
    background: transparent;
    color: rgba(186, 201, 220, 0.52);
    font: 600 0.95rem/1.2 var(--font-sans);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.hero-credits-trigger:hover,
.hero-credits-trigger:focus-visible,
.hero-credits.is-open .hero-credits-trigger {
    color: rgba(229, 237, 246, 0.82);
    border-color: rgba(229, 237, 246, 0.36);
}

.hero-credits-trigger:focus-visible {
    outline: none;
    border-color: rgba(229, 237, 246, 0.54);
}

.hero-credits-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(340px, calc(100vw - 40px));
    padding: 12px 18px 12px;
    border: 1px solid rgba(174, 203, 236, 0.18);
    border-radius: 18px;
    background: rgba(8, 10, 13, 0.78);
    background: #1D1F21;
    color: rgba(229, 237, 246, 0.78);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.hero-credits.is-open .hero-credits-panel {
    opacity: 0.95;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-credits-panel p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0;
}

.hero-credits-panel p + p {
    margin-top: 6px;
}

.hero-credits-panel .hero-credits-title {
    color: rgba(244, 247, 251, 0.92);
    font-size: 0.8rem;
    font-weight: 500;
}

.hero-credits-source {
    color: rgba(229, 237, 246, 0.72);
}

.hero-credits-source strong {
    color: rgba(244, 247, 251, 0.88);
    font-weight: 500;
}

/* Our-Approach Brownian-bridge canvas (the cofounder's beautiful animation,
   relocated from hero into the section that's actually about bridge learning) */
.section-figure--canvas {
    aspect-ratio: 3.5 / 2;
    width: 100%;
    border: 0;
    background: transparent;
    overflow: visible;
    padding: 0;
    display: block;
}

.section-figure--canvas canvas {
    width: 100%;
    height: 100%;
    background: transparent;
    display: block;
    transform: perspective(1000px) rotateY(5deg) rotateX(15deg) rotateZ(-6deg);
    transform-origin: center 60%;
}

/* Scroll indicator at bottom of hero */
.hero-scroll {
    position: absolute;
    bottom: clamp(28px, 5vh, 36px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    z-index: 3;
    transition: color var(--transition);
}

.hero-scroll:hover { color: var(--accent-alt); }

.hero-scroll-label { opacity: 0.72; }

.hero-scroll-rail {
    width: 1px;
    height: 64px;
    background: linear-gradient(180deg, currentColor, transparent);
    position: relative;
    overflow: hidden;
    opacity: 0.5;
}

.hero-scroll-rail::after {
    content: '';
    position: absolute;
    top: -52px;
    left: 0;
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, var(--accent-alt));
    animation: hero-scroll-pulse 2.4s cubic-bezier(.5, .1, .5, .9) infinite;
}

@keyframes hero-scroll-pulse {
    0%   { transform: translateY(0); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(96px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* The WebGL bridge module already renders a static "midpoint" frame
       when reduced motion is requested (see hero-lagoon-bridge.js boot
       branch). No need to hide the canvas — a still nebula image is
       fine accessibility-wise and looks nicer than an empty hero. */
    .hero-scroll-rail::after { animation: none; opacity: 0.8; transform: translateY(40px); }
}

@media (max-width: 880px) {
    .hero-content { padding: 96px 0 130px; }
    .hero-credits {
        top: min(calc(100dvh - 78px), calc(100% - 52px));
        right: 20px;
    }

    .hero-credits-panel {
        right: 0;
        width: min(320px, calc(100vw - 40px));
    }
}

/* =========================================================
   v3 — Worldview / Discovery
   ========================================================= */
.worldview {
    position: relative;
    isolation: isolate;
}

.worldview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15%;
    width: 75%;
    height: 100%;
    /* Soft gradient — no filter:blur (avoids first-paint stutter on reveal). */
    background: radial-gradient(ellipse 60% 50% at center,
        color-mix(in oklab, var(--accent-alt) 7%, transparent),
        color-mix(in oklab, var(--accent-alt) 3%, transparent) 35%,
        transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.worldview-grid {
    display: grid;
    gap: 40px;
    align-items: start;
}

.worldview-side { position: sticky; top: 0px; }

.worldview-headline {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
    max-width: 22ch;
    margin-bottom: 36px;
}

.worldview-body {
    display: grid;
    gap: 22px;
    max-width: 60ch;
}

.worldview-body p {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.78;
}

.worldview-body strong {
    color: var(--text-strong);
    font-weight: 700;
}

.worldview-claim {
    margin-top: 12px;
    padding: 24px 24px;
    border-left: 1px solid var(--accent-alt);
    background: #1D1F21;
    border-radius: 0 14px 14px 0;
    color: #CDCDCD;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.3vw, 1.3rem);
    line-height: 1.7;
    letter-spacing: 0.04em;
    font-weight: 100;
}


.worldview-claim-light {
    margin-top: 24px;
    padding: 24px 24px;
    border-left: 2px solid var(--accent);
    background: #FDFDFD;
    border-radius: 0 18px 18px 0;
    box-shadow: 0px -1px 2px 2px color-mix(in oklab, var(--accent-alt) 4%, transparent);
    
}

.worldview-claim-light p{
    margin-top: 20px;
    margin-left: 12px;
    font-color: var(--ink); 
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.45vw, 1.5rem);
    line-height: 1.7;
    letter-spacing: 0.04em;
    font-weight: 500;
    max-width: 120ch;
}


.worldview-block {
    display: grid;
    gap: 28px;
    max-width: 105ch;
}

.worldview-block p {
    color: var(--text-primary);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
}



.worldview-claim-light:hover {
    border-color: var(--accent);
    background: #FDFDFD;
    opacity: 1.0;
    border-left: 2.0px solid var(--accent);
    box-shadow: 0px 0px 2px 2px color-mix(in oklab, var(--accent-alt) 10%, transparent);
}

@media (max-width: 880px) {
    .worldview-grid { grid-template-columns: 1fr; gap: 18px; }
    .worldview-side { position: static; }
}

/* =========================================================
   v3 — Thesis
   ========================================================= */
.thesis-grid {
    display: grid;
    /* Columns rebalanced from `1fr | 1.2fr` → `1fr | 1fr`: the right
       column was claiming ~55% of the shell, leaving the prose on the
       left too narrow at default zoom (the body text was wrapping into
       very short lines unless the viewer zoomed out). Equal columns give
       the text ~50px more on a 1120px shell, which is enough to bring
       the wrap back to a comfortable reading width. The right column
       still has plenty of room for the canvas + LLM blocks since both
       are width: min(95%, 620px) — the canvas just shrinks from ~578px
       wide to ~531px wide, still visually dominant in the section. */
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
    gap: 12px;
    align-items: start;
}

.thesis-main {
    display: grid;
    gap: 36px;
    min-width: 0;
}

.thesis-head {
    display: grid;
    gap: 20px;
    max-width: 60ch;
}

.thesis-text {
    display: grid;
    gap: 24px;
    max-width: 70ch;
}

.thesis-text p {
    color: var(--text-primary);
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.thesis-text strong {
    color: var(--text-strong);
    font-weight: 700;
}

.constraint-section {
    display: grid;
    /* Explicit single column capped at the container width (0 minimum).
       Without this, the implicit `auto` column sizes toward its content's
       max-content — and Safari/WebKit lets that expand with the available
       width (so it grows on zoom-out), overflowing the shell. The nested
       wide grids inside .history (5-col timeline, 2-col approach grid,
       3-col challenge cards) are what drive that large max-content.
       Chromium clamps the auto column to the container, hiding the bug. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 4px 0 42px;
}

.constraint-head {
    max-width: 50ch;
}

.constraint-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 500px);
    gap: clamp(20px, 1vw, 12px);
    align-items: start;
}

.constraint-copy {
    max-width: 60ch;
}

.constraint-cards {
    display: grid;
    gap: 24px;
}

.constraint-card {
    position: relative;
    overflow: hidden;
    padding: 14px 16px 15px;
    border: 1px #FDFDFD var(--line-strong);
    border-radius: 16px;
    box-shadow: -1px -1px 10px -1px rgba(0, 0, 0, 0.1);
}

.constraint-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0.9;
    background: #FDFDFD;
    pointer-events: none;
}

.constraint-card > * {
    position: relative;
}

.constraint-title {
    margin: 0px 2px 0;
    padding-bottom: 2px;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.constraint-card p {
    margin: 10px 2px 0px;
    color: var(--ink);
    font-size: 1.1em;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.constraint-card:hover {
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.1);
}

/* ---------- Key-section divider ----------
   Full-bleed horizontal rule separating the major sub-sections of the long
   #thesis section (Stochastic Bridge Dynamics · Today's scaling · Why a
   Rethink · The Way Forward · Our Approach). Breaks out of the .shell with
   the 100vw centering trick so it reads like the hero/section .section-line
   divider — one consistent divider language down the page. body has
   overflow-x:hidden, so the 100vw width never adds a horizontal scrollbar. */
.key-sep {
    border: 0;
    border-top: 1px solid var(--line);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: clamp(48px, 6vw, 84px);
    margin-bottom: clamp(48px, 6vw, 84px);
}

/* ---------- "Why a Rethink is Necessary Now?" two-column layout ----------
   Left: the energy argument. Right: the BloombergNEF data-centre power-demand
   forecast, top-aligned just under the section subtitle. Mirrors the
   .constraint-layout grid so the column rhythm matches the rest of the page. */
.rethink-section {
    display: grid;
    gap: 28px;
    margin: 4px 0 42px;
}

.rethink-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 500px);
    gap: clamp(12px, 3vw, 20px);
    align-items: start;
}

.rethink-copy {
    max-width: 62ch;
}

.rethink-aside {
    /* Hold the chart near the top of the column so it lines up with the
       first paragraph beneath the subtitle as the copy runs longer. */
    position: sticky;
    top: 96px;
}

.rethink-figure {
    margin: 0;
}

.rethink-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    /* The chart art is dark-on-black; a faint inset keeps it from floating. */
    background: #000;
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
    .rethink-layout {
        grid-template-columns: 1fr;
    }
    .rethink-aside {
        position: static;
        max-width: 520px;
    }
}

.thesis-text-wide {
    display: grid;
    gap: 28px;
    max-width: 80ch;
}

.thesis-text-wide p {
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.thesis-pull {
    padding: 16px 16px;
    border: 1.0px #0A0A0A var(--line-strong);
    border-radius: 18px;
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6);
    box-shadow: -1px -1px 10px -1px rgba(0, 0, 0, 0.2);
    position: relative;
}

.thesis-pull::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 1.0;
    background: #0A0A0A;
    pointer-events: none;
}


.thesis-pull:hover {
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 1.0);
}

.thesis-pull > * { position: relative; }

.thesis-pull-label {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    max-width: 120ch;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 6px;
}

.thesis-pull p {
    background: #0A0A0A;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.4vw, 1.3rem);
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 8px;
    margin-left: 10px;
    max-width: 120ch;

    font-color: var(--text-primary);
    color: #CDCDCD;
    color: #FDFDFD;
    line-height: 1.5;
  background: linear-gradient(135deg, 
    #fdfdfd 0%,
    #FFFDF7 50%,
    #fefefe 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
}

.thesis-pull--banner {
    max-width: 980px;
    margin: 38px auto 48px;
    padding: 22px 32px;
}

.thesis-pull--banner p {
    line-height: 1.7;
    gap: 2px;
}

.thesis-lineage-intro {
    max-width: 64ch;
    margin: 24px auto 12px;
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.72;
}

@media (max-width: 880px) {
    .thesis-pull--banner {
        max-width: 100%;
        padding: 18px 20px;
        margin: 28px 0 20px;
    }
    .thesis-lineage-intro {
        text-align: left;
        margin: 18px 0 8px;
    }
}

/* Right column wrapper: pull card on top, Brownian-bridge canvas below it */
.thesis-aside {
    display: grid;
    gap: 12px;
    align-self: start;
}


.language-dynamics {
    position: relative;
    margin: 0;
    width: min(100%, 720px);
    justify-self: center;
    padding: 26px 26px 6px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 12px;
}

.language-prompt {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 11px 16px;
    background: color-mix(in oklab, #5b8def 20%, var(--surface-strong));
    border: 1px solid #0A0A0A, var(--line));
    border-radius: 18px 18px 4px 18px;
    color: var(--text-strong);
    background: #0A0A0A;
    opacity: 0.9;
    color: #FDFDFD;
    font-family: var(--font-sans);
    font-size: clamp(1.0rem, 1vw, 1.1rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
}

.language-response {
    max-width: 28em;
    margin: 0 0 0 auto;
    min-height: 4.0em;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: clamp(1.0rem, 1vw, 1.1rem);
    line-height: 1.3;
    letter-spacing: 0.005em;
}


.language-word {
    color: var(--word-color, var(--text-strong));
    transition:
        color 320ms cubic-bezier(.4, 0, 1, 1),
        opacity 320ms ease,
        filter 320ms ease;
}

.language-word.is-shifting {
    color: color-mix(in oklab, var(--word-color, var(--accent-alt)) 55%, var(--text-secondary));
    opacity: 0.6;
    filter: blur(0.8px);
}

.language-word.is-stable {
    color: var(--word-color, var(--text-strong));
    opacity: 1.0;
    filter: none;
    font-weight: 500;
}

.language-cursor {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 3px;
    background: color-mix(in oklab, var(--accent-alt) 10%, var(--text-strong));
    vertical-align: text-bottom;
    border-radius: 1px;
    animation: language-cursor-blink 2.05s steps(2, end) infinite;
}

@keyframes language-cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.thesis-canvas-wrap {
    position: relative;
    width: min(95%, 550px);
    aspect-ratio: 3.9 / 2.9;
    margin: 0;
    margin-top: 6px;
    margin-left: 16px;
    justify-self: right; 
    background: transparent;
    border-radius: 18px;
    overflow: visible;
    padding: 12px 6px 6px;
    display: grid;
    gap: 0px;
}

.thesis-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    background: transparent;
    display: block;
    transform: perspective(1000px) rotateY(4deg) rotateX(12deg) rotateZ(-4deg);
    transform-origin: center 20%;
}

.thesis-canvas-cap {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding-top:12px;
    padding-bottom: 12px;
}

@media (max-width: 880px) {
    .thesis-grid { grid-template-columns: 1fr; gap: 2px; }
    .language-dynamics {
        padding-top: 14px;
        gap: 18px;
    }
    .thesis-canvas-wrap {
        width: 100%;
        aspect-ratio: 4 / 2.8;
        padding-top: 28px;
    }
    .constraint-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .constraint-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .language-prompt { max-width: 100%; }
    .language-response { min-height: 5.5em; }
}

@media (prefers-reduced-motion: reduce) {
    .language-cursor { animation: none; opacity: 0.6; }
    .language-word { transition: none; }
}

/* =========================================================
   v3 — Section figure animated SVG (Our Approach replacement)
   ========================================================= */
.section-figure--anim {
    aspect-ratio: 3 / 2;
    border: 0;
    background: transparent;
    overflow: visible;
    color: var(--accent-alt);
    display: block;
    padding: 0;
}

.figure-anim {
    width: 100%;
    height: auto;
    display: block;
    color: inherit;
    filter: drop-shadow(0 0 18px color-mix(in oklab, var(--accent-alt) 30%, transparent));
}

[data-theme="light"] .figure-anim {
    filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent-alt) 22%, transparent));
}

.unified-hub {
    transform-origin: 200px 140px;
    transform-box: fill-box;
    animation: unified-hub-pulse 2.6s ease-in-out infinite;
}

@keyframes unified-hub-pulse {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .unified-hub { animation: none; }
}

/* =========================================================
   v3 — CTA / Email signup
   ========================================================= */
.cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
    gap: 56px;
    align-items: center;
}

.cta-text {
    display: grid;
    gap: 18px;
}

.cta-headline {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.038em;
    font-weight: 800;
    max-width: 16ch;
}

.cta-sub {
    color: var(--text-secondary);
    font-size: 1.04rem;
    line-height: 1.7;
    max-width: 50ch;
}

.cta-form {
    display: grid;
    gap: 12px;
}

.cta-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cta-input-row {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color var(--transition);
}

.cta-input-row:focus-within { border-color: var(--accent-alt); }

.cta-input-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 0.98rem;
    padding: 10px 18px;
}

.cta-input-row input::placeholder { color: var(--text-muted); }

.cta-input-row button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--text-strong);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    transition: opacity var(--transition), transform var(--transition);
}

.cta-input-row button:hover { opacity: 0.88; }
.cta-input-row button:active { transform: translateY(1px); }

.cta-status {
    color: var(--text-secondary);
    font-size: 0.88rem;
    min-height: 1.2em;
    padding-left: 18px;
}

.cta-status.is-success { color: var(--accent-alt); }
.cta-status.is-error   { color: #ff8b8b; }

@media (max-width: 880px) {
    .cta-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   v3 — Closing rallying statement
   ========================================================= */
.closing-statement {
    font-family: var(--font-display);
    font-family: var(--font-display1);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 24ch;
    color: var(--text-strong);
}

.closing-statement em {
    font-style: normal;
    color: color-mix(in oklab, var(--text-strong) 05%, var(--accent-alt) 95%);
}

.closing-sign {
    margin-top: 36px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* =========================================================
   v3 — Stronger accent-alt usage + section labels
   ========================================================= */
.section-label {
    color: var(--accent-alt);
}

.section-takeaway {
    color: var(--text-strong);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.6vw, 1.7rem);
}

.section-takeaway--inline {
    color: var(--text-strong);
    font-weight: 600;
}

/* =========================================================
   v3 — Footer touch
   ========================================================= */
.footer-tagline {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.5;
    margin-top: 4px;
    font-weight: 500;
}

.footer-brand {
    display: grid;
    gap: 6px;
}

/* =========================================================
   v3 — Glass header on dark themes (matches modern lab feel)
   ========================================================= */
[data-theme="flat-dark"] .site-header,
[data-theme="soft-dark"] .site-header {
    background: rgba(6, 16, 24, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] .site-header {
    background: rgba(6, 16, 24, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* =========================================================
   v4 — Header nav (Systems link + future tabs)
   ========================================================= */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-left: auto;
    margin-right: 28px;
}

.site-nav a {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color var(--transition);
    position: relative;
}

.site-nav a:hover {
    color: var(--text-strong);
}

@media (max-width: 720px) {
    .site-nav { margin-right: 12px; gap: 16px; }
}

/* =========================================================
   v4 — Application breadth (circular hover layout)
   ========================================================= */
.apps {
    position: relative;
    isolation: isolate;
}

.apps-stack {
    display: grid;
    gap: 36px;
}

.apps-head {
    display: grid;
    gap: 18px;
    max-width: 60ch;
}

.apps-intro {
    color: var(--text-secondary);
    font-size: 1.06rem;
    line-height: 1.8;
}

.apps-hint {
    color: var(--accent-alt);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.apps-circle {
    position: relative;
    width: 100%;
    max-width: 980px;
    aspect-ratio: 1 / 1;
    margin: 18px auto 2px;
}

.apps-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background:  #0A0A0A;
    border: 2px solid color-mix(in oklab, var(--accent-alt) 88%, #fff);
    box-shadow:
        0 0 40px -8px color-mix(in oklab, var(--accent-alt) 15%, transparent),
        0 0 28px -6px color-mix(in oklab, var(--accent-alt) 15%, transparent),
        inset 0 0 14px -2px rgba(255, 255, 255, 0.22),
        inset 0 -10px 22px -10px rgba(48, 14, 2, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 2px;
    pointer-events: none;
}

.apps-center-pretitle {
    color: var(--accent-alt);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.apps-center-divider {
    width: 36px;
    height: 1px;
    background: color-mix(in oklab, var(--accent-alt) 50%, transparent);
}

.apps-center-title {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.9vw, 2.0rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(60, 16, 2, 0.45);
}

.apps-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 292px;
    height: 292px;
    margin: -116px 0 0 -116px;
    transform:
        rotate(var(--ang))
        translateY(-372px)
        rotate(calc(-1 * var(--ang)));
    background: black; # var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    overflow: hidden;
    transition:
        background-color 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        transform 280ms ease;
    cursor: default;
    color: var(--accent-alt);
}

.apps-card-figure {
    width: 180px;
    height: 94px;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apps-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.apps-card-figure img.apps-card-img {
    display: none;
}

[data-theme="flat-dark"] .apps-card-figure img.apps-card-img--dark,
[data-theme="soft-dark"] .apps-card-figure img.apps-card-img--dark {
    display: block;
}

[data-theme="light"] .apps-card-figure img.apps-card-img--light {
    display: block;
}

[data-theme="flat-dark"] .apps-card-figure img.apps-card-img--dark {
    filter: hue-rotate(0deg) brightness(0.95) saturate(0.95) contrast(0.95);
}

[data-theme="soft-dark"] .apps-card-figure img.apps-card-img--dark {
    filter: hue-rotate(0deg) brightness(1.0) saturate(0.95) contrast(0.95);
}

[data-theme="light"] .apps-card-figure img.apps-card-img--light {
    filter: hue-rotate(0deg) brightness(1.0) saturate(0.95) contrast(0.9);
}

.apps-card-title {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.42;
    letter-spacing: -0.018em;
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}

.apps-card-detail {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    transition: opacity 320ms ease;
    flex-shrink: 0;
}

.apps-card:hover {
    z-index: 10;
    border-color: var(--accent-alt);
    background: color-mix(in oklab, var(--accent-alt) 6%, var(--surface-strong));
    box-shadow: 0 18px 50px -18px color-mix(in oklab, var(--accent-alt) 70%, transparent);
}

.apps-card:hover .apps-card-detail {
    opacity: 1;
}

/* Mobile fallback: stack as a tight grid (the circular layout doesn't work
   in narrow viewports; cards would overlap or shrink unreadably). */
@media (max-width: 880px) {
    .apps-circle {
        aspect-ratio: auto;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 28px 0 18px;
    }
    .apps-center { display: none; }
    .apps-card {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        transform: none;
        padding: 18px 16px;
    }
    .apps-card-detail {
        opacity: 1;
        max-height: 200px;
    }
    .apps-card:hover {
        height: auto;
        transform: none;
    }
}

@media (max-width: 540px) {
    .apps-circle { grid-template-columns: 1fr; }
}

/* =========================================================
   Principle grid — text + mini icon ring (post-timeline block)
   ========================================================= */
.principle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr);
    gap: 2px;
    align-items: start;
    margin-top: 2px;
}

.principle-aside {
    align-self: start;
    min-width: 0;
    margin-top: 90px;
    margin-bottom:30px;
}

/* Three numbered challenge cards (replaces the inline <ol>) */
.challenges-grid {
    list-style: none;
    margin: 28px 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.challenge-card {
    position: relative;
    padding: 18px 18px 20px;
    border: 1.0px #0A0A0A var(--line-strong);
    border-radius: 18px;
    background: #0A0A0A;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6);
    box-shadow: -1px -1px 10px -1px rgba(0, 0, 0, 0.2);
}

.challenge-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: #0A0A0A;
    pointer-events: none;
}

.challenge-card:hover {
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 1.0);
}

.challenge-card > * { position: relative; }

.challenge-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--accent-alt) 18%, transparent);
}

.challenge-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in oklab, var(--accent-alt) 44%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent-alt) 4%, transparent);
}

.challenge-title {
    margin: 4px;
    font-family: var(--font-display);
    color: var(--accent-alt);
    opacity: 0.9;
    font-size: clamp(1.11rem, 1.15vw, 1.2rem);
    letter-spacing: 0.06em;
    font-weight: 510;
    line-height: 1.7;
}

.challenge-text {
    margin-left: 16px;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-right: 6px;

    font-size: 1.1rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    background: linear-gradient(135deg, 
      #fdfdfd 0%,
      #FFFDF7 50%,
      #fefefe 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 1;
  
}

.challenge-text p {
}

@media (max-width: 880px) {
    .challenges-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.apps-circle--mini {
    max-width: 480px;
    margin: 0 auto;
}

.apps-circle--mini .apps-center {
    width: 36%;
    height: 36%;
    padding: 10px;
    gap: 6px;
}

.apps-circle--mini .apps-center-pretitle,
.apps-circle--mini .apps-center-divider {
    display: none;
}

.apps-circle--mini .apps-center-title {
    font-size: clamp(1.3rem, 1.45vw, 1.18rem);
    line-height: 1.4;
    font-weight: 500;
}

.apps-circle--mini .apps-card {
    width: 108px;
    height: 96px;
    margin: -48px 0 0 -54px;        /* margin = -(half height) 0 0 -(half width) */
    padding: 0;
    border-radius: 14px;
    gap: 0;
    transform:
        rotate(var(--ang))
        translateY(-188px)            /* ring radius — kept so 2·(R + half-h) ≤ wrapper max-width */
        rotate(calc(-1 * var(--ang)));
}

.apps-circle--mini .apps-card-figure {
    width: 102%;
    height: 102%;
    transition: opacity 240ms ease;
}

.apps-circle--mini .apps-card-detail {
    display: none;
}

.apps-circle--mini .apps-card-title {
    position: absolute;
    inset: 2px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    font-size: 0.85rem;
    line-height: 1.18;
    font-weight: 700;
    color: var(--text-strong);
    background: color-mix(in oklab, var(--accent-alt) 10%, var(--surface-strong));
    border-radius: 10px;
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}

.apps-circle--mini .apps-card:hover .apps-card-title {
    opacity: 1;
}

.apps-circle--mini .apps-card:hover .apps-card-figure {
    opacity: 0;
}

.apps-circle--mini .apps-card:hover {
    transform:
        rotate(var(--ang))
        translateY(-188px)            /* must mirror the radius used in the non-hover rule above */
        rotate(calc(-1 * var(--ang)))
        scale(1.06);
}

@media (max-width: 1024px) {
    .principle-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
        gap: 12px;
    }
    .apps-circle--mini { max-width: 400px; }
    .apps-circle--mini .apps-card {
        width: 88px;
        height: 88px;
        margin: -44px 0 0 -44px;
        transform:
            rotate(var(--ang))
            translateY(-156px)
            rotate(calc(-1 * var(--ang)));
    }
    .apps-circle--mini .apps-card:hover {
        transform:
            rotate(var(--ang))
            translateY(-156px)
            rotate(calc(-1 * var(--ang)))
            scale(1.06);
    }
    .apps-circle--mini .apps-card-figure { width: 100%; height: 100%; }
}

@media (max-width: 880px) {
    .principle-grid { grid-template-columns: 1fr; gap: 24px; }
    .apps-circle--mini {
        aspect-ratio: 1 / 1;
        display: block;
        max-width: 360px;
    }
    .apps-circle--mini .apps-center { display: flex; }
    .apps-circle--mini .apps-card {
        position: absolute;
        width: 82px;
        height: 82px;
        margin: -41px 0 0 -41px;
        transform:
            rotate(var(--ang))
            translateY(-144px)
            rotate(calc(-1 * var(--ang)));
        padding: 0;
    }
    .apps-circle--mini .apps-card:hover {
        transform:
            rotate(var(--ang))
            translateY(-144px)
            rotate(calc(-1 * var(--ang)))
            scale(1.06);
    }
}

.apps-circle--mini .apps-card {
    background: #01030D;
    border-color: transparent;
    border: 1.0px solid var(--line);
    box-shadow: 0 18px 24px -18px color-mix(in oklab, var(--accent-alt) 65%, transparent);
}

.apps-circle--mini .apps-card-title {
    color: #f4f7fb;
    background: color-mix(in oklab, var(--accent-alt) 14%, #01030D);
}

.apps-circle--mini .apps-card:hover {
    background: color-mix(in oklab, var(--accent-alt) 9%, #01030D);
    border-color: var(--accent-alt);
    box-shadow: 0 18px 50px -18px color-mix(in oklab, var(--accent-alt) 65%, transparent);
}

[data-theme="light"] .apps-circle--mini {
    background: none;
}

[data-theme="light"] .apps-circle--mini .apps-card {
    background: #ffffff;
    background: #01030D;
    border-color: transparent;
    box-shadow:
        0 6px 18px -8px rgba(12, 21, 36, 0.14),
        0 0 26px -10px color-mix(in oklab, var(--accent-alt) 22%, transparent);
}

[data-theme="light"] .apps-circle--mini .apps-card-title {
    color: white;
    background: color-mix(in oklab, var(--accent-alt) 16%, #01030D);
}

[data-theme="light"] .apps-circle--mini .apps-card:hover {
    background: color-mix(in oklab, var(--accent-alt) 7%, #01030D);
    border-color: var(--accent-alt);
    box-shadow:
        0 18px 50px -18px color-mix(in oklab, var(--accent-alt) 50%, transparent),
        0 8px 22px -10px rgba(12, 21, 36, 0.18);
}