:root {
    /* Colors */
    --color-bg-body: #FFFFFF;
    --color-bg-alt: #F8F9FA;
    --color-text-main: #1A1A1A;
    --color-text-muted: #4A5568;
    --color-primary: #2B6CB0;
    --color-primary-dark: #1A4971;
    --color-border: #E2E8F0;

    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* New Mono Font */
    --font-size-base: 16px;
    --line-height-base: 1.5;

    /* Spacing */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 4rem;
    /* 64px */
    --spacing-xl: 8rem;
    /* 128px */

    /* Container */
    --container-width: 1200px;
    --container-padding: 2rem;

    /* Component */
    --radius-sm: 0px;
    /* Sharp edges for technical feel */
    --radius-md: 0px;
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05);
    /* Flat borders */
    --shadow-md: 0 4px 0 rgba(0, 0, 0, 0.05);
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
}

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

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

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

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

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.btn-secondary:hover {
    border-color: var(--color-text-muted);
    background-color: var(--color-bg-alt);
}

/* Header */
.site-header {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.95);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 700;
    font-size: 1.125rem;
    /* Slightly smaller, more tech */
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.main-nav {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.main-nav a:not(.btn) {
    font-size: 0.9rem;
    font-family: var(--font-mono);
    /* Technical nav */
    color: var(--color-text-muted);
    letter-spacing: -0.03em;
}

.main-nav a:not(.btn):hover {
    color: var(--color-text-main);
}

/* Hero Section */
.hero-section {
    padding: 3rem 0 6rem 0;
    /* Heavy top reduction to lock to header */
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    /* Reduced further to remove floating feel */
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 40px 40px;
    background-color: #FAFAFA;
    /* Very light subtle technical grid */
    background-size: 4rem 4rem;
    /* Grid size */
}

/* Faint grid overlay fix */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    z-index: 1;
    /* Above grid */
}

@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: 4fr 5fr;
        /* 40/60 Split */
        align-items: start;
        /* CRITICAL: Align top edges */
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    max-width: 600px;
    padding-top: 0;
    /* Remove any padding that fights top alignment */
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-section h1 {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.04em;
    margin-bottom: var(--spacing-sm);
    /* Tighter grouping */
    color: var(--color-text-main);
}

.hero-subhed {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    /* Reduced from lg */
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.hero-specs {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.75rem;
    /* Slightly smaller for context role */
    color: var(--color-text-muted);
    border-top: none;
    /* Remove border */
    padding-top: 0;
    margin-bottom: var(--spacing-sm);
    /* Add space below */
    opacity: 0.8;
    /* Slight weight reduction */
}

.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 4s infinite ease-in-out;
}

.dot-green {
    background-color: #38C172;
    animation-delay: 0s;
}

.dot-blue {
    background-color: #3490DC;
    animation-delay: 1.2s;
}

.dot-gray {
    background-color: #B8C2CC;
    animation-delay: 2.4s;
    /* Often keeps static, but subtle pulse is okay per instruction */
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hero-visual {
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    /* Slight stagger */
    opacity: 0;
    /* Start hidden for animation */
}

.diagram-card {
    width: 100%;
    border: 1px solid var(--color-border);
    background: white;
    box-shadow: none;
    /* No shadow per request */
    margin: 0;
    padding: 0;
}

.diagram-image {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--spacing-md);
}

.diagram-placeholder {
    width: 100%;
    height: 300px;
    /* Fixed height for placeholder */
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Subtle grid background for placeholder */
    background-image:
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px),
        linear-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Subtle shimmer overlay */
.diagram-placeholder::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite linear;
}

.placeholder-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    opacity: 0.7;
}

.loader-icon {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-text-muted);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

.pipeline-labels {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fafafa;
    /* Slight difference for caption area */
    border-top: 1px solid var(--color-border);
    /* Solid structural divider */
    margin: 0;
}

/* Sections General */
section {
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.section-intro {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    /* max-width removed to allow full width per user request */
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

/* ... existing css ... */

/* Typewriter (inline, baseline-aligned, no weird dot spacing) */
.typewrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    /* keeps period tight */
    margin-left: 0.5ch;
    /* space after “by” */
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
}

#typeword {
    font: inherit;
    line-height: inherit;
}

.caret {
    display: inline-block;
    width: 0.6ch;
    transform: translateY(0.08em);
    border-left: 2px solid var(--color-text-main);
    margin-left: 0.1ch;
    animation: caretBlink 1s steps(1, end) infinite;
}

@keyframes caretBlink {
    50% {
        opacity: 0;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .caret {
        animation: none;
    }
}

/* What We Do Section - System Specs */
.what-we-do {
    background-color: var(--color-bg-body);
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 992px) {
    .spec-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--spacing-xl);
        /* Increase gap for balance */
    }
}

.capability-list {
    list-style: none;
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.capability-list li {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-main);
    background: white;
    border: 1px solid var(--color-border);
    padding: 6px 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, border-color 0.2s ease;
    /* Hover interaction */
}

.capability-list li:hover {
    transform: translateY(-2px);
    border-color: var(--color-text-muted);
}

.spec-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    border: none;
    background: transparent;
}

@media (min-width: 992px) {
    .spec-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .spec-item:last-child {
        grid-column: 1 / -1;
        /* Span full width */
    }
}

.spec-item {
    background: white;
    padding: var(--spacing-md);
    cursor: default;
    border: 1px solid var(--color-border);
    /* Individual card borders */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* Staggered Reveal State */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.spec-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.spec-item:hover {
    background-color: white;
    box-shadow: var(--shadow-md);
    /* Lift on hover */
    border-color: var(--color-text-muted);
    /* Darker border on hover */
    transform: translateX(4px);
    /* Subtle interaction */
}

.spec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.spec-title {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.spec-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.spec-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: auto;
}

.card-tags span {
    background: #F1F5F9;
    /* Very light gray */
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: 20px;
    /* Rounded pills */
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    /* Prevent breaking within chips */
}

.rotate-line {
    margin-top: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.typewrap {
    display: inline-flex;
    align-items: baseline;
    margin-left: 0.5ch;
    font: inherit;
    line-height: 1;
    vertical-align: baseline;
}

/* typed word */
.typewriter {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    color: var(--color-text-main);
    line-height: 1;
    white-space: nowrap;
    /* Removed min-width to let caret and period hug the text tight */
}

/* caret */
.caret {
    display: inline-block;
    width: 0.7ch;
    margin-left: 0px;
    /* touching the word */
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em);
    animation: caretBreathe 1.5s ease-in-out infinite;
    /* softer breathing */
    opacity: 1;
}

@keyframes caretBreathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Scalability Section - Metrics Dashboard */
.scalability {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--color-border);
    /* Grid lines */
    border: 1px solid var(--color-border);

    /* Reveal State */
    opacity: 0;
    transform: translateY(10px);
    position: relative;
    /* for scanline */
    overflow: hidden;
    /* for scanline */
}

.metric-grid.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Scan Line Animation */
.metric-grid::after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .04), transparent);
    transform: skewX(-12deg);
    opacity: 0;
    pointer-events: none;
}

.metric-grid.is-visible::after {
    opacity: 1;
    animation: scanOnce 900ms ease-out forwards;
}

@keyframes scanOnce {
    from {
        transform: translateX(0) skewX(-12deg);
    }

    to {
        transform: translateX(460%) skewX(-12deg);
    }
}

.metric-card {
    background: var(--color-bg-body);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: left;
    transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.2s ease;

    /* Staggered Reveal */
    opacity: 0;
    transform: translateY(8px);
    border: 1px solid transparent;
    /* Prepare for hover border if needed, or rely on grid gap */
}

.metric-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.metric-card:hover {
    /* Hover precision - border darken only */
    /* Since cards are in a grid with gap 1px showing background, border-color logic might need check. 
       User said: .metric-card:hover { border-color: var(--color-text-muted); }
       But separate borders might double up visually or shift layout if not solid transparent initially. 
       Assuming grid gap handles dividers, this adds an inner border or outline?
       Actually, standard is background-clip or box-shadow for grid items. 
       Let's trust the user CSS: "No scale, no glow".
    */
    /* Note: Previous CSS relies on grid-gap for borders. Adding explicit border might shift things unless box-sizing is border-box (standard).
       The user simplified request: "border-color: var(--color-text-muted)".
       I will apply a subtle inset box-shadow to avoid layout shift, OR just trust standard border behavior.
       Actually, let's look at existing code: .metric-grid has bg color-border (lines). Cards are transparent or white?
       Cards are var(--color-bg-body).
       So the "borders" are the gaps.
       If I add border to card, it subtracts padding.
       Let's stick to user request exactly.
    */
    /* BUT standard grid card often doesn't have border property set. I'll add border: 1px solid transparent above. */
    border-color: var(--color-text-muted);
    z-index: 1;
    /* Ensure border sits on top if overlapping */
    position: relative;
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-xs);
    display: block;
    line-height: 1;
}

.metric-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.metric-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Global Reach Section - Network Status */
.global-reach {
    background-color: var(--color-bg-body);
    border-bottom: 1px solid var(--color-border);
}

.network-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

@media (min-width: 992px) {
    .network-layout {
        flex-direction: row;
        align-items: flex-start;
        /* Better alignment */
        justify-content: space-between;
    }

    .text-content {
        flex: 1;
        max-width: 500px;
    }

    .status-log {
        flex: 1;
        border-left: 1px solid var(--color-border);
        /* Base border */
        /* Upgrade to signal line with gradient */
        border-image: linear-gradient(to bottom,
                var(--color-border) 0%,
                var(--color-text-muted) 10%,
                var(--color-border) 20%,
                var(--color-border) 100%) 1;
        padding-left: var(--spacing-xl);
        margin-left: var(--spacing-xl);
        /* Tighter vertical rhythm check: margin-top handled by flex alignment */
    }
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38C172;
    /* Green pulse */
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {

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

    50% {
        transform: scale(.85);
        opacity: .55;
    }
}

.status-log {
    position: relative;
    /* Ensure relative for pseudo-cursor */
}

.status-log::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 14px;
    background: var(--color-text-main);
    opacity: .15;
    animation: logCursor 1.4s ease-in-out infinite;
}

@keyframes logCursor {

    0%,
    100% {
        transform: translateY(0);
        opacity: .08;
    }

    50% {
        transform: translateY(18px);
        opacity: .18;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-log::after {
        animation: none;
    }
}

.status-entry {
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    display: flex;
    gap: var(--spacing-sm);

    /* Stagger Reveal Base */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s ease, transform .5s ease;
}

.status-entry.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.status-time {
    color: var(--color-text-muted);
    opacity: 0.6;
    /* Lower contrast for readability */
    font-size: 0.75rem;
    /* Smaller */
    letter-spacing: -0.02em;
    /* Tighter tracking */
}

.status-msg {
    color: var(--color-text-main);
}

/* Ethics Section */
.ethics {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
}

.check-list {
    list-style: none;
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);

    /* Container for scanline */
    position: relative;
    overflow: hidden;
}

/* scanline */
.check-list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -40%;
    height: 40%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(43, 108, 176, 0.06) 50%,
            transparent 100%);
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;
}

/* run scan once */
.check-list.is-running::after {
    opacity: 1;
    animation: scanDown 1.6s ease-in-out 0.15s 1 forwards;
}

@keyframes scanDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(260%);
        opacity: 0;
    }
}

.check-list li {
    background: white;
    font-size: 1rem;
    color: var(--color-text-main);
    padding: var(--spacing-sm) var(--spacing-md);
    position: relative;
    font-family: var(--font-mono);

    /* Row Reveal Base */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .38s ease, transform .38s ease, background-color .2s ease;
}

.check-list li.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.check-list li:hover {
    background: #F8FAFC;
    transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
    .check-list li:hover {
        transform: none;
    }
}

.check-list li::before {
    content: '[PASS]';
    color: var(--color-primary);
    font-weight: 500;
    margin-right: var(--spacing-sm);
    font-size: 0.85rem;

    /* Stamp Effect */
    display: inline-block;
    transform: scale(0.96);
    opacity: 0.85;
    transition: transform .28s ease, opacity .28s ease;
}

.check-list li.is-visible::before {
    transform: scale(1);
    opacity: 1;
}

.check-list li:hover::before {
    opacity: 1;
}

/* Dataset Structure Section */
.dataset-structure {
    background-color: var(--color-bg-body);
}

/* Dataset Structure – balanced grid */
.structure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: stretch;
}

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

@media (min-width: 1100px) {
    .structure-grid {
        grid-template-columns: repeat(3, 1fr);
        /* KEY FIX */
    }
}

/* Make cards equal height + consistent rhythm */
.structure-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    /* Square corners already set globally */
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 260px;

    /* reveal animation */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease, border-color .2s ease;
}

.structure-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* hover (very subtle) */
.structure-card:hover {
    border-color: var(--color-border);
    transform: translateY(-2px);
    background: #fbfbfb;
    /* Light tint instead of border darken */
}

/* remove any focus ring if it appears */
.structure-card:focus,
.structure-card:focus-within {
    outline: none;
    border-color: var(--color-border);
}

/* keep list from looking “heavy” */
.structure-card .sm-list {
    margin-top: 0.25rem;
    padding-left: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    /* tighter */
}

.structure-card .sm-list li {
    margin: 0.2rem 0;
    /* tighter spacing */
}

.structure-card h3 {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-bg-alt);
    color: var(--color-text-main);
}

.file-tree {
    margin-top: auto;
    /* pushes to bottom */
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    background: #fafafa;
    font-size: 0.75rem;
    /* smaller */
    line-height: 1.35;
    /* tighter */
    color: var(--color-text-muted);
    overflow: hidden;
    max-width: 100%;
}

/* ... existing structure styles ... */

.structure-card h3 {
    font-family: var(--font-mono);
    /* Update to mono */
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-bg-alt);
    color: var(--color-text-main);
}

/* Why Us Section */
.why-us {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .why-card-wide {
        grid-column: 2 / span 2;
    }

    /* centered wide card */
}

.why-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    transition: transform .2s ease, background .2s ease;
}

.why-card:hover {
    transform: translateY(-2px);
    background: #fbfbfb;
}

.why-kicker {
    font-size: .75rem;
    opacity: .55;
    margin-bottom: .5rem;
}

.why-card h3 {
    font-family: var(--font-mono);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
    /* Reset from previous h3 specificity collisions if any, but explicit class handles it */
    font-weight: 600;
    color: var(--color-text-main);
    border: none;
    /* Reset if inheriting */
    padding: 0;
}

.why-card p {
    color: var(--color-text-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

/* Use Cases Section */
/* Use Cases Section (card-like, similar to Why Us) */
.use-cases {
    background-color: var(--color-bg-body);
}

.use-case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    background: transparent;
    border: none;
}

@media (min-width: 992px) {
    .use-case-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.use-case-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;

    /* reveal */
    opacity: 0;
    transform: translateY(8px);
}

.use-case-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.use-case-card:hover {
    transform: translateY(-2px);
    background: #fbfbfb;
    border-color: var(--color-text-muted);
}

.uc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: .5rem;
}

.uc-id {
    font-size: .75rem;
    opacity: .55;
    font-family: var(--font-mono);
}

.uc-tag {
    font-size: .75rem;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 3px 10px;
    background: #fafafa;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.uc-title {
    font-family: var(--font-mono);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.uc-desc {
    color: var(--color-text-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .use-case-card:hover {
        transform: none;
    }
}

/* CTA Section */
.cta-section {
    background-color: var(--color-text-main);
    /* Dark background */
    color: white;
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.cta-section .btn-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-section .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Footer */
.site-footer {
    background-color: #111;
    color: #888;
    padding: var(--spacing-lg) 0 var(--spacing-md);
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #333;
    padding-bottom: var(--spacing-lg);
}

.footer-brand .logo {
    color: white;
    margin-bottom: var(--spacing-xs);
}

.footer-info p {
    margin-bottom: var(--spacing-xs);
}

.footer-info a {
    color: #ccc;
}

.footer-info a:hover {
    color: white;
    text-decoration: underline;
}

.footer-sub {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: var(--spacing-sm);
}

.footer-copy {
    text-align: center;
    font-size: 0.8rem;
}