/* BioXR Public Site — Section-Specific Styles */

/* ── Hero Eyebrow ── */
.hero-eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin-bottom: var(--space-lg);
}

/* ── Hero ── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--nav-height);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 70% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
}

/* ── Hero atmospheric waveform — anchored to the bottom so it
       doesn't intersect the title, subtitle, or CTA buttons. ── */
.hero-waveform {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    width: 200%;
    height: 110px;
    opacity: 0.22;
    pointer-events: none;
    animation: wave-drift 28s linear infinite;
}

.hero-waveform path {
    fill: none;
    stroke: var(--color-cyan);
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

@keyframes wave-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

[data-theme="light"] .hero-waveform { opacity: 0.22; }

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 880px;
    padding: var(--space-3xl) var(--space-xl);
}

.hero.hero-subpage .hero-content {
    max-width: 960px;
    position: relative;
    z-index: 2;
}

/* ── Vertical-specific graphic in the Problem narrative (subpages) ── */
.narrative-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centre vertically against the text block so the graphic sits
       beside the body paragraphs, not stuck up next to the heading. */
    align-self: center;
}

.narrative-graphic svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    color: var(--color-blue);
    opacity: 0.9;
    overflow: visible;
}

[data-theme="light"] .narrative-graphic svg { opacity: 0.85; }

@media (max-width: 960px) {
    .narrative-graphic svg { max-width: 240px; }
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: -0.03em;
    line-height: var(--line-tight);
    margin-bottom: var(--space-xl);
    text-wrap: balance;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-gray-300);
    line-height: var(--line-normal);
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-3xl);
}

/* ── Hero vertical chooser (homepage) ── */
.hero-verticals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}

.hero-vertical-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.9rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-weight: 500;
    font-size: var(--text-sm);
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    transition: background var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                transform var(--duration-fast) ease,
                color var(--duration-fast) ease;
}

.hero-vertical-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-blue);
    color: var(--color-white);
    transform: translateY(-2px);
}

.hero-vertical-arrow {
    color: var(--color-blue-light);
    font-size: var(--text-base);
    transition: transform var(--duration-fast) ease;
}

.hero-vertical-card:hover .hero-vertical-arrow {
    transform: translateX(3px);
}

.hero-secondary {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.hero-secondary a {
    color: var(--color-gray-300);
    font-size: var(--text-sm);
}

.hero-secondary a:hover { color: var(--color-white); }

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

.hero-metrics {
    display: flex;
    gap: var(--space-3xl);
    justify-content: center;
    flex-wrap: wrap;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.metric-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-white);
    font-family: var(--font-mono);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metric-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.hero-scroll-hint {
    position: absolute;
    bottom: var(--space-2xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-arrow {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, var(--color-gray-500), transparent);
    animation: scroll-hint 2s ease-in-out infinite;
}

@keyframes scroll-hint {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.3; transform: translateY(8px); }
}

@media (max-width: 640px) {
    .hero-metrics {
        gap: var(--space-2xl);
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Technology Section ── */
.tech-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

@media (max-width: 960px) {
    .tech-layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
}

.tech-text h2 {
    margin-bottom: var(--space-lg);
}

.tech-text > p {
    margin-bottom: var(--space-2xl);
}

/* ── Subpage Hero (shorter than home) ── */
.hero.hero-subpage {
    min-height: 60vh;
}

.hero.hero-subpage .hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/* ── Feature Trio (3-column on vertical subpages) ── */
.feature-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.feature-card {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}

.feature-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.feature-card p {
    font-size: var(--text-base);
    line-height: var(--line-normal);
}

@media (max-width: 960px) {
    .feature-trio {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* ── Validated library / evidence section ── */
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.evidence-grid.evidence-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.evidence-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.evidence-tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.evidence-card p {
    margin: 0;
    line-height: var(--line-normal);
    flex-grow: 1;
}

.evidence-card a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-blue);
}

.evidence-card a:hover {
    color: var(--color-blue-light);
}

.publications {
    max-width: 880px;
    margin: 0 auto var(--space-3xl);
    padding: var(--space-lg) var(--space-2xl);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.publications summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    user-select: none;
    padding: var(--space-sm) 0;
}

.publications summary::-webkit-details-marker { display: none; }
.publications summary::marker { content: ''; }

.publications summary::after {
    content: '+';
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-gray-500);
    transition: transform var(--duration-fast) ease;
    margin-left: auto;
}

.publications[open] summary::after {
    transform: rotate(45deg);
}

.publications[open] summary {
    margin-bottom: var(--space-lg);
}

.publications-heading {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
    font-weight: 600;
    margin: 0;
}

.publications-count {
    font-size: var(--text-xs);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-gray-500);
    font-weight: 500;
}

.publications summary:hover .publications-count,
.publications summary:hover::after {
    color: var(--color-gray-700);
}

.publications ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0 0 var(--space-md);
}

.publications li {
    font-size: var(--text-sm);
    line-height: var(--line-normal);
    color: var(--color-gray-700);
    margin-bottom: var(--space-md);
    padding-left: 0.25rem;
}

.publications li:last-child {
    margin-bottom: 0;
}

.publications em {
    color: var(--color-gray-900);
    font-style: italic;
}

.publications a {
    color: var(--color-blue);
    word-break: break-word;
}

.publications a:hover { color: var(--color-blue-light); }

.library-collab {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: var(--radius-lg);
}

.library-stack {
    display: block;
    width: 240px;
    height: 140px;
    margin: 0 auto var(--space-md);
    color: var(--color-gray-500);
}

/* ── Biometric capture event-alignment diagram ── */
.event-alignment {
    margin-top: var(--space-3xl);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.event-alignment-caption {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.event-alignment-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    color: var(--color-gray-400);
    overflow: visible;
}

.library-collab h3 {
    margin-bottom: var(--space-sm);
}

.library-collab p {
    margin-bottom: var(--space-lg);
}

@media (max-width: 960px) {
    .evidence-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── CTA Block ── */
.cta-block {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cta-block h2 {
    margin-bottom: var(--space-md);
}

.cta-block p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
}

.tech-pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

/* Two pillars side-by-side under the full-width tech section header */
.tech-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 768px) {
    .tech-pillars-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
}

.tech-pillar {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 8px);
}

.tech-pillar h4 {
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
}

.tech-pillar p {
    color: var(--color-gray-300, var(--color-gray-400));
    font-size: var(--text-sm);
    margin: 0 0 var(--space-md) 0;
}

.tech-pillar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tech-pillar-list li {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    padding-left: var(--space-md);
    position: relative;
}

.tech-pillar-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradient-accent);
}

.tech-pillar-list strong {
    color: var(--color-white);
    font-weight: 600;
}

.tech-signals {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Variant for the standalone biometric capture section — 3-up grid */
.tech-signals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl) var(--space-2xl);
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 880px) {
    .tech-signals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .tech-signals-grid {
        grid-template-columns: 1fr;
    }
}

/* Subtle separator when two section-dark blocks are adjacent */
.section-dark.section-bordered-top {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.signal-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.signal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gradient-accent);
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.signal-item strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 2px;
}

.signal-item span {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

/* Tech diagram */
.tech-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tech-diagram {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagram-ring {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid;
}

.diagram-ring span {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--color-gray-300);
}

.diagram-ring-outer {
    width: 320px;
    height: 320px;
    border-color: rgba(59, 130, 246, 0.15);
    animation: ring-rotate 30s linear infinite;
}

.diagram-ring-outer span {
    position: absolute;
    top: -10px;
    background: var(--color-navy);
    padding: 0 var(--space-sm);
}

.diagram-ring-mid {
    width: 210px;
    height: 210px;
    border-color: rgba(6, 182, 212, 0.2);
    animation: ring-rotate 20s linear infinite reverse;
}

.diagram-ring-mid span {
    position: absolute;
    bottom: -10px;
    background: var(--color-navy);
    padding: 0 var(--space-sm);
}

.diagram-ring-inner {
    width: 100px;
    height: 100px;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
}

.diagram-ring-inner span {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-blue-light);
    line-height: 1.2;
}

.diagram-pulse {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.3);
    animation: pulse-ring 3s ease-out infinite;
}

@keyframes ring-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.2); opacity: 0; }
}

/* ── SVG tech diagram (curved labels via textPath) ── */
.tech-diagram-svg {
    display: block;
    width: 320px;
    height: 320px;
    /* Curved labels at the top of the outer ring extend a few px above
       the viewBox; let them bleed out instead of getting clipped. */
    overflow: visible;
    color: var(--color-gray-300);
}

.diagram-ring-svg {
    fill: none;
    stroke-width: 1.5;
}

.diagram-ring-outer-svg { stroke: rgba(59, 130, 246, 0.18); }
.diagram-ring-mid-svg   { stroke: rgba(6, 182, 212, 0.22); }
.diagram-ring-inner-svg {
    fill: rgba(59, 130, 246, 0.06);
    stroke: rgba(59, 130, 246, 0.4);
}

.diagram-label-svg {
    fill: currentColor;
    font-family: var(--font-sans);
}

.diagram-inner-svg {
    fill: var(--color-blue-light);
    font-family: var(--font-sans);
}

.diagram-pulse-svg {
    fill: none;
    stroke: rgba(59, 130, 246, 0.3);
    stroke-width: 1;
    animation: pulse-r 3s ease-out infinite;
}

@keyframes pulse-r {
    0%   { r: 160; opacity: 0;   }
    20%  { r: 148; opacity: 0.5; }
    100% { r: 50;  opacity: 0;   }
}

/* ── How It Works — Steps ── */
.steps-grid {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.step {
    flex: 1;
    text-align: center;
    padding: 0 var(--space-lg);
}

.step-number {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-md);
}

.step h3 {
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.step p {
    font-size: var(--text-sm);
}

.step-connector {
    width: 40px;
    min-width: 40px;
    height: 2px;
    background: var(--color-gray-200);
    margin-top: 1.8rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .steps-grid {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xl);
    }
    .step-connector {
        width: 2px;
        min-width: 2px;
        height: 32px;
        margin-top: 0;
    }
    .step {
        padding: 0;
        max-width: 400px;
    }
}

/* ── Platform Features ── */
.platform-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.platform-feature {
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    transition: all var(--duration-normal) var(--ease-out);
}

.platform-feature:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.pf-icon {
    width: 40px;
    height: 40px;
    color: var(--color-cyan);
    margin-bottom: var(--space-md);
}

.platform-feature h4 {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
}

.platform-feature p {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

@media (max-width: 960px) {
    .platform-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .platform-features {
        grid-template-columns: 1fr;
    }
}

/* ── Contact Section ── */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

@media (max-width: 960px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
}

.contact-info h2 {
    margin-bottom: var(--space-lg);
}

.contact-info > p {
    margin-bottom: var(--space-2xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-gray-600);
}

.contact-item svg {
    color: var(--color-blue);
    flex-shrink: 0;
}

.contact-item a {
    color: var(--color-gray-600);
}

.contact-item a:hover {
    color: var(--color-blue);
}

.contact-illustration {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-top: var(--space-2xl);
    color: var(--color-gray-500);
    overflow: visible;
}

/* Contact section — single centred CTA block (no form). */
.contact-cta {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.contact-cta h2 {
    margin-bottom: var(--space-md);
}

.contact-cta > p {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin-bottom: var(--space-xl);
}

.contact-cta .contact-diagram {
    margin: 0 auto var(--space-2xl);
}

/* Tech ring diagram repurposed for the contact section.
   The .tech-diagram-svg base rule sets fixed 320x320; in the contact
   column we want it responsive and slightly smaller, centred. */
.contact-diagram {
    width: 100% !important;
    max-width: 280px;
    height: auto !important;
    margin: var(--space-2xl) auto 0;
    display: block;
}

.contact-form-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.contact-form .btn {
    margin-top: var(--space-sm);
}

/* ── Footer ── */
.site-footer {
    background: var(--color-gray-900);
    color: var(--color-gray-400);
    padding: var(--space-4xl) 0 var(--space-xl);
}

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

.footer-logo {
    height: 32px;
    margin-bottom: var(--space-md);
    opacity: 0.8;
}

.footer-brand p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    max-width: 300px;
}

.footer-links-group h4 {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-lg);
}

.footer-links-group ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links-group a {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    transition: color var(--duration-fast) ease;
}

.footer-links-group a:hover {
    color: var(--color-white);
}

.footer-bottom {
    padding-top: var(--space-xl);
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    text-align: center;
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

/* ── Narrative / Problem Section ── */
.narrative-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

/* When the narrative has only one column (no quote/visual sibling),
   collapse to a single centred reading column instead of leaving
   half the section empty. Used on the vertical subpages. */
.narrative-layout:has(> :only-child) {
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .narrative-layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
}

.narrative-text h2 {
    margin-bottom: var(--space-lg);
}

.narrative-lead {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
    line-height: var(--line-normal);
}

.narrative-text p {
    line-height: var(--line-normal);
}

.narrative-highlight blockquote {
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-blue);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-2xl);
    margin: 0;
}

.narrative-highlight blockquote p {
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-gray-700);
    line-height: var(--line-normal);
    margin-bottom: var(--space-md);
}

.narrative-highlight cite {
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 600;
    color: var(--color-blue);
}

/* ── Solution Section ── */
.solution-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-3xl);
    align-items: center;
}

.solution-content {
    max-width: 580px;
}

.solution-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.signal-traces {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    color: var(--color-gray-400);
    overflow: visible;
}

@media (max-width: 960px) {
    .solution-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .solution-content {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }
    .solution-content .solution-metrics { justify-content: center; }
}

.solution-content h2 {
    margin-bottom: var(--space-lg);
}

.solution-lead {
    font-size: var(--text-lg);
    color: var(--color-gray-300);
    line-height: var(--line-normal);
    margin-bottom: var(--space-3xl);
}

.solution-metrics {
    display: flex;
    gap: var(--space-3xl);
    justify-content: center;
    flex-wrap: wrap;
}

.solution-metrics .metric {
    max-width: 200px;
}

.solution-metrics .metric-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .solution-metrics {
        gap: var(--space-2xl);
    }
}

/* ── Section alt background ── */
.section-alt {
    background: var(--color-gray-50);
}

/* ── Card links ── */
.card-link {
    display: inline-block;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-blue);
    transition: color var(--duration-fast) ease;
}

.card-link:hover {
    color: var(--color-blue-light);
}