/* ============================================
   VaagaTech Ecosystem Pages — Design System
   Matches www.vaagatech.com visual language:
   IBM Plex Sans · Light panels · Cobalt accent
   Aurora hero · Signal field particles
   ============================================ */

/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* === Design Tokens === */
:root {
    --color-paper: #f2f4f7;
    --color-panel: #ffffff;
    --color-ink: #0b1220;
    --color-muted: #4b5568;
    --color-void: #10243f;
    --color-void-soft: #1a3560;
    --color-cobalt: #1d4ed8;
    --color-cobalt-bright: #3b82f6;
    --color-signal: #f59e0b;
    --color-haze: #c7d2fe;

    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--color-paper);
    background-image: linear-gradient(180deg, #f7f8fa 0%, #f2f4f7 45%, #e8ecf1 100%);
    color: var(--color-ink);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body.nav-open {
    overflow: hidden;
}

a { color: inherit; text-decoration: none; transition: color 0.2s; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

::selection {
    background: color-mix(in oklab, var(--color-cobalt) 28%, white);
    color: var(--color-ink);
}

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

/* === Utility Classes === */
.container {
    width: 100%;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 768px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.md-hidden { display: block; }
@media (min-width: 768px) { .md-hidden { display: none !important; } }

.md-only { display: none !important; }
@media (min-width: 768px) { .md-only { display: block !important; } }

.font-display { font-family: var(--font-sans); letter-spacing: -0.025em; }
.font-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.text-cobalt { color: var(--color-cobalt); }
.text-muted { color: var(--color-muted); }
.text-haze { color: var(--color-haze); }
.text-panel { color: var(--color-panel); }
.text-ink { color: var(--color-ink); }
.text-balance { text-wrap: balance; }

/* === Reveal Animation === */
html.js .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Header / Navigation === */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgba(11, 18, 32, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.logo-text {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-ink);
    transition: color 0.2s;
}

.logo:hover .logo-text { color: var(--color-cobalt); }

@media (min-width: 768px) { .logo-text { font-size: 1.5rem; } }

.nav-desktop { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }

.nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted);
    transition: color 0.2s;
}

.nav-link:hover { color: var(--color-ink); }
.nav-link.active { color: var(--color-cobalt); }

.nav-cta {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.5rem 0.875rem;
    margin-left: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--color-ink);
    color: var(--color-panel);
    transition: background 0.2s;
}

.nav-cta:hover { background: var(--color-void-soft); }

/* Mobile toggle */
.nav-toggle {
    display: inline-flex;
    min-height: 2.75rem;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid rgba(11, 18, 32, 0.12);
    background: #ffffff;
    cursor: pointer;
    color: var(--color-ink);
    padding: 0;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
    background: var(--color-paper);
    border-color: var(--color-cobalt);
    color: var(--color-cobalt);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--color-cobalt);
    outline-offset: 2px;
}

.nav-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
}

.nav-toggle .hidden {
    display: none !important;
}

/* Mobile Nav - strictly hidden by default and on desktop */
.mobile-nav,
#mobile-nav,
[data-mobile-nav] {
    display: none;
}

@media (min-width: 768px) {
    .nav-toggle,
    [data-menu-toggle],
    .mobile-nav,
    #mobile-nav,
    [data-mobile-nav] {
        display: none !important;
    }
}

/* Mobile Nav - open state on screens < 768px */
@media (max-width: 767px) {
    .mobile-nav.open,
    #mobile-nav.open,
    [data-mobile-nav].open {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid rgba(11, 18, 32, 0.08);
        border-bottom: 1px solid rgba(11, 18, 32, 0.12);
        box-shadow: 0 16px 32px -8px rgba(11, 18, 32, 0.18);
        z-index: 50;
        animation: mobileNavSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes mobileNavSlideIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-nav-inner {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem 1.25rem 1.25rem;
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
    }

    .mobile-nav-link {
        display: flex;
        min-height: 2.875rem;
        align-items: center;
        padding: 0.625rem 0.875rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-muted);
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:focus-visible {
        background-color: var(--color-paper);
        color: var(--color-ink);
    }

    .mobile-nav-link.active {
        background-color: rgba(29, 78, 216, 0.08);
        color: var(--color-cobalt);
        font-weight: 600;
    }

    .mobile-nav-cta {
        margin-top: 0.75rem;
        display: flex;
        min-height: 2.875rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        background: var(--color-ink);
        color: #ffffff !important;
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .mobile-nav-cta:hover {
        background: var(--color-void-soft);
    }
}

/* === Hero (Aurora Dark) === */
.hero-section {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-panel);
    min-height: auto;
    padding: 3.5rem 0 3.5rem;
    display: flex;
    align-items: flex-end;
}

@media (min-width: 768px) {
    .hero-section { min-height: 85vh; padding: 6rem 0 7rem; }
}

.hero-section.hero-subpage {
    min-height: auto;
    padding: 3.5rem 0 3rem;
}

@media (min-width: 768px) {
    .hero-section.hero-subpage {
        min-height: 45vh;
        padding: 5.5rem 0 4rem;
    }
}

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

.surface-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(59, 130, 246, 0.45), transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 12%, rgba(14, 165, 233, 0.32), transparent 55%),
        radial-gradient(ellipse 50% 40% at 72% 78%, rgba(245, 158, 11, 0.18), transparent 60%),
        linear-gradient(155deg, #16345f 0%, #1e4a86 42%, #2456a0 78%, #1a3f73 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 20%, transparent 75%);
    animation: grid-drift 28s linear infinite;
}

.aurora-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
    opacity: 0.55;
    animation: orb-float 14s ease-in-out infinite;
}

.aurora-orb-a { width: 18rem; height: 18rem; background: rgba(59, 130, 246, 0.55); top: -4rem; right: 8%; }
.aurora-orb-b { width: 14rem; height: 14rem; background: rgba(14, 165, 233, 0.4); bottom: 10%; left: 6%; animation-delay: -4s; }
.aurora-orb-c { width: 11rem; height: 11rem; background: rgba(245, 158, 11, 0.28); bottom: -2rem; right: 22%; animation-delay: -7s; }

.hero-gradient-bottom {
    position: absolute;
    inset: auto 0 0;
    height: 9rem;
    background: linear-gradient(to top, rgba(16, 36, 63, 0.85), transparent);
}

.hero-signal {
    position: absolute;
    bottom: 28%;
    left: 0;
    height: 1px;
    width: 42%;
    background: linear-gradient(to right, transparent, var(--color-cobalt-bright), var(--color-signal));
    transform-origin: left center;
    animation: signal-draw 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero-signal-pulse {
    position: absolute;
    bottom: 32%;
    left: 8%;
    height: 1px;
    width: 18%;
    background: rgba(59, 130, 246, 0.7);
    animation: signal-pulse 3.2s ease-in-out infinite;
    animation-delay: 0.45s;
}

.signal-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; pointer-events: none; }

.hero-content { position: relative; z-index: 2; width: 100%; }

.hero-brand {
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-panel);
    animation: fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 640px) { .hero-brand { font-size: 3rem; } }
@media (min-width: 768px) { .hero-brand { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-brand { font-size: 4.5rem; } }

.hero-title {
    margin-top: 1.25rem;
    max-width: 48rem;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.025em;
    color: var(--color-panel);
    text-wrap: balance;
    animation: fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}

@media (min-width: 640px) { .hero-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .hero-title { font-size: 2.25rem; } }

.hero-lead {
    margin-top: 1.25rem;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(199, 210, 254, 0.9);
    animation: fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}

@media (min-width: 768px) { .hero-lead { font-size: 1.125rem; } }

.hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.3s;
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* === Buttons (matching vaagatech.com) === */
.btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary-light {
    background: var(--color-panel);
    color: var(--color-ink);
}

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

.btn-outline-light {
    background: transparent;
    color: var(--color-panel);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }

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

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

.btn-outline-dark {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid rgba(11, 18, 32, 0.15);
}

.btn-outline-dark:hover { border-color: var(--color-cobalt); color: var(--color-cobalt); }

/* === Content Sections === */
.section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
    .section {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.section.container,
.container.section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
@media (min-width: 768px) {
    .section.container,
    .container.section {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

.section-bordered { border-top: 1px solid rgba(11, 18, 32, 0.1); background: rgba(255, 255, 255, 0.7); }

.section-header { margin-bottom: 2.5rem; max-width: 42rem; }
@media (min-width: 768px) { .section-header { margin-bottom: 3.5rem; } }

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt);
}

.section-title {
    margin-top: 0.75rem;
    font-family: var(--font-sans);
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-ink);
    text-wrap: balance;
}

@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }

.section-lead {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-muted);
}

@media (min-width: 768px) { .section-lead { font-size: 1.125rem; } }

/* === Product List Items (matching vaagatech.com pattern) === */
.product-list-item {
    display: block;
    border-top: 1px solid rgba(11, 18, 32, 0.1);
    padding: 2rem 0;
    transition: border-color 0.2s;
}

.product-list-item:hover { border-top-color: var(--color-cobalt); }

.product-list-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .product-list-inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2.5rem;
    }
}

.product-list-content { max-width: 40rem; }

.product-list-category {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt);
}

.product-list-name {
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-ink);
}

@media (min-width: 768px) { .product-list-name { font-size: 1.875rem; } }

.product-list-desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.product-list-arrow {
    display: inline-flex;
    min-height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    transition: transform 0.2s, color 0.2s;
}

.product-list-item:hover .product-list-arrow {
    transform: translateX(0.25rem);
    color: var(--color-cobalt);
}

/* === Product Cards (Grid layout for detail pages) === */
.product-card {
    background: var(--color-panel);
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

@media (min-width: 768px) {
    .product-card { padding: 2rem; }
}

.product-card:hover {
    border-color: rgba(29, 78, 216, 0.25);
    box-shadow: 0 4px 24px rgba(29, 78, 216, 0.08);
}

.product-card-image {
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .product-card-image { width: 72px; height: 72px; }
}

.product-card-image img { width: 100%; height: 100%; object-fit: cover; }

.product-card-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt);
    margin-bottom: 0.5rem;
}

.product-card h3 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-ink);
}

.product-card-role {
    font-size: 0.875rem;
    color: var(--color-cobalt);
    margin-top: 0.25rem;
    font-weight: 500;
}

.product-card-desc {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.product-card-tech {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.product-card-tech span {
    padding: 0.2rem 0.625rem;
    background: var(--color-paper);
    border-radius: 100px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-muted);
}

.product-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-paper);
    border-radius: 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .product-card-metrics {
        display: flex;
        gap: 1.25rem;
        background: transparent;
        padding: 1rem 0 0;
        border-radius: 0;
        border-top: 1px solid rgba(11, 18, 32, 0.06);
        text-align: left;
    }
}

.metric-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-cobalt);
}

.metric-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-top: 0.125rem;
}

/* === Product Card Actions & GitHub Links === */
.product-card-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 18, 32, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-cobalt);
    background: rgba(29, 78, 216, 0.08);
    padding: 0.4rem 0.85rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.product-link-btn:hover {
    background: var(--color-cobalt);
    color: #ffffff;
}

.product-link-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.775rem;
    font-family: var(--font-mono);
    color: var(--color-muted);
    transition: color 0.2s;
    text-decoration: none;
}

.product-link-sub:hover {
    color: var(--color-ink);
}

/* === Grid Layouts === */
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* === Architecture Tiers === */
.tier-block {
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-panel);
    transition: border-color 0.3s;
}

.tier-block:hover { border-color: rgba(29, 78, 216, 0.2); }

.tier-head {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tier-head-1 { background: rgba(29, 78, 216, 0.06); }
.tier-head-2 { background: rgba(139, 92, 246, 0.06); }
.tier-head-3 { background: rgba(16, 185, 129, 0.06); }
.tier-head-4 { background: rgba(245, 158, 11, 0.06); }
.tier-head-5 { background: rgba(239, 68, 68, 0.06); }
.tier-head-6 { background: rgba(75, 85, 104, 0.06); }

.tier-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    min-width: 3rem;
}

.tier-head h3 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

.tier-body {
    padding: 1.25rem 1.5rem;
}

.tier-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.chip {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
}

.chip-blue { background: rgba(29, 78, 216, 0.1); color: var(--color-cobalt); }
.chip-purple { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.chip-green { background: rgba(16, 185, 129, 0.1); color: #059669; }
.chip-amber { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.chip-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.chip-gray { background: rgba(75, 85, 104, 0.1); color: var(--color-muted); }

.tier-body p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; }

.tier-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
}

.tier-conn-line {
    width: 2px;
    height: 1.5rem;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.06), var(--color-cobalt), rgba(11, 18, 32, 0.06));
    animation: signal-pulse 3.2s ease-in-out infinite;
}

.tier-conn-dot {
    width: 8px;
    height: 8px;
    background: var(--color-cobalt);
    border-radius: 50%;
    margin: 0.25rem 0;
    box-shadow: 0 0 8px rgba(29, 78, 216, 0.4);
}

.tier-conn-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

/* === Vertical Detail Cards === */
.vertical-block {
    background: var(--color-panel);
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: grid;
    gap: 1.5rem;
    transition: border-color 0.3s;
}

@media (min-width: 768px) {
    .vertical-block {
        grid-template-columns: 200px 1fr;
        padding: 2.5rem;
        gap: 2.5rem;
    }
}

.vertical-block:hover { border-color: rgba(29, 78, 216, 0.2); }

.vertical-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .vertical-image {
        max-width: 200px;
        aspect-ratio: 1;
    }
}

.vertical-image img { width: 100%; height: 100%; object-fit: cover; }

.vertical-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgba(11, 18, 32, 0.8);
    color: var(--color-panel);
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 100px;
    backdrop-filter: blur(8px);
}

.vertical-content h3 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.vertical-tagline {
    font-size: 0.95rem;
    color: var(--color-cobalt);
    font-weight: 500;
    margin-top: 0.25rem;
}

.vertical-content > p {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.75;
}

.vertical-features { margin-top: 1.25rem; }

.vertical-features li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--color-muted);
    border-bottom: 1px solid rgba(11, 18, 32, 0.05);
    display: flex;
    gap: 0.5rem;
    line-height: 1.6;
}

.vertical-features li:last-child { border: none; }
.vertical-features strong { color: var(--color-ink); font-weight: 600; }

.feature-dot {
    margin-top: 0.5rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--color-signal);
    flex-shrink: 0;
}

.synergy-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

.synergy-chip {
    padding: 0.3rem 0.75rem;
    background: var(--color-paper);
    border: 1px solid rgba(11, 18, 32, 0.06);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
    transition: all 0.2s;
}

.synergy-chip:hover { background: rgba(29, 78, 216, 0.06); color: var(--color-cobalt); border-color: rgba(29, 78, 216, 0.15); }

/* === Infrastructure Cards === */
.infra-card {
    background: var(--color-panel);
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.75rem;
    padding: 2rem;
    border-top: 3px solid transparent;
    transition: all 0.3s;
}

.infra-card:hover { border-top-color: var(--color-cobalt); box-shadow: 0 4px 20px rgba(29, 78, 216, 0.06); }

.infra-icon { font-size: 2rem; margin-bottom: 1rem; }

.infra-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

.infra-card p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; }

.infra-tags { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 1rem; }

.infra-tags span {
    padding: 0.2rem 0.6rem;
    background: rgba(29, 78, 216, 0.06);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-cobalt);
}

/* === CTA Band (Aurora Dark) === */
.cta-band {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-panel);
}

.cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2.75rem 0;
}

@media (min-width: 768px) {
    .cta-inner { flex-direction: row; align-items: center; padding: 4rem 0; }
}

@media (max-width: 640px) {
    .cta-inner .btn { width: 100%; justify-content: center; }
}

.cta-text { max-width: 36rem; }

.cta-text h2 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) { .cta-text h2 { font-size: 1.875rem; } }

.cta-text p { margin-top: 0.75rem; color: rgba(199, 210, 254, 0.9); }

/* === Footer (Aurora Dark) === */
.site-footer {
    position: relative;
    margin-top: auto;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-panel);
}

.footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 2.5rem;
    padding: 3.5rem 0;
}

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

.footer-brand-name {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.footer-brand-desc {
    margin-top: 0.75rem;
    max-width: 24rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(199, 210, 254, 0.9);
}

.footer-brand-email {
    margin-top: 1rem;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s;
}

.footer-brand-email:hover { color: white; }

.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-haze);
}

.footer-links-list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; }

.footer-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.25s ease;
}

.footer-link:hover { color: white; background-size: 100% 1px; }

.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0;
    font-size: 0.75rem;
    color: rgba(199, 210, 254, 0.8);
}

@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer-mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* === Ecosystem SVG Diagram === */
.diagram-wrap {
    background: var(--color-panel);
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .diagram-wrap {
        padding: 2rem;
        overflow: hidden;
    }
}

.diagram-svg {
    min-width: 720px;
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .diagram-svg {
        min-width: 100%;
    }
}

.scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--color-cobalt);
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.15);
    padding: 0.375rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.scroll-hint-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/* === Responsive Table === */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: 0.5rem;
    background: var(--color-panel);
}

.table-responsive table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
}

.diagram-svg .node {
    cursor: pointer;
    transition: all 0.3s;
}

.diagram-svg .node-blue { fill: rgba(29, 78, 216, 0.06); stroke: rgba(29, 78, 216, 0.3); stroke-width: 1.5; }
.diagram-svg .node-green { fill: rgba(16, 185, 129, 0.06); stroke: rgba(16, 185, 129, 0.3); stroke-width: 1.5; }
.diagram-svg .node-purple { fill: rgba(139, 92, 246, 0.06); stroke: rgba(139, 92, 246, 0.3); stroke-width: 1.5; }
.diagram-svg .node-amber { fill: rgba(245, 158, 11, 0.06); stroke: rgba(245, 158, 11, 0.3); stroke-width: 1.5; }
.diagram-svg .node-red { fill: rgba(239, 68, 68, 0.06); stroke: rgba(239, 68, 68, 0.3); stroke-width: 1.5; }

.diagram-svg .node:hover { filter: drop-shadow(0 0 12px rgba(29, 78, 216, 0.2)); }

.diagram-svg .node-emoji { font-size: 16px; }
.diagram-svg .node-label { fill: var(--color-ink); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }
.diagram-svg .node-sub { fill: var(--color-muted); font-size: 9px; font-family: var(--font-sans); }
.diagram-svg .tier-label { fill: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; font-family: var(--font-mono); }

/* Animated Paths */
.diagram-svg .flow-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-path 2s ease forwards;
}

.flow-delay-1 { animation-delay: 0.15s; }
.flow-delay-2 { animation-delay: 0.3s; }
.flow-delay-3 { animation-delay: 0.45s; }
.flow-delay-4 { animation-delay: 0.6s; }
.flow-delay-5 { animation-delay: 0.75s; }
.flow-delay-6 { animation-delay: 0.9s; }
.flow-delay-7 { animation-delay: 1.05s; }

/* === Pillar Cards === */
.pillar-card {
    border-top: 1px solid rgba(11, 18, 32, 0.1);
    padding-top: 1.5rem;
}

.pillar-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-cobalt);
}

.pillar-card h3 {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-ink);
}

.pillar-card p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.7;
}

/* === Keyframes === */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes grid-drift {
    from { background-position: 0 0; }
    to { background-position: 48px 48px; }
}

@keyframes orb-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

@keyframes signal-draw {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes signal-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}

@keyframes draw-path {
    to { stroke-dashoffset: 0; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    .hero-signal, .hero-grid, .aurora-orb, .signal-field canvas,
    .animate-fade-up, .flow-path {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .aurora-orb { opacity: 0.4; }
}