:root {
    --bg-dark: #000000;
    /* Stark black background */
    --bg-card: #0A0A0A;
    /* Slightly elevated black */
    --border-color: rgba(255, 255, 255, 0.05);
    /* 1px Glass borders */
    --text-primary: #EDEDED;
    --text-secondary: #888888;
    --accent-color: #EDEDED;
    /* Shift from neon Cyan to Stark White for premium feel */
    --accent-glow: rgba(255, 255, 255, 0.05);
    --code-bg: #050505;
    --success: #00FF94;
    --font-heading: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* 
   ----------------------------------------
   ENTERPRISE MODAL (TERMINAL THEME) 
   ----------------------------------------
*/

/* --- TELEMETRY SHOWCASE (DENSE GRID) --- */
.telemetry-deep-dive {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* 
   Unified Card Container 
   - Base style for ALL cards.
   - Default: Stacked (Vertical) for the 1-column cards.
*/
.telemetry-feature-row {
    display: flex;
    flex-direction: column;
    /* Default to vertical stack for narrow cards */
    gap: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* WIDE CARDS (Span 2 Columns) */
.telemetry-feature-row.feature-span-2 {
    grid-column: span 2;
    flex-direction: row;
    /* Side-by-side for wide cards */
    align-items: center;
    padding: 0 50px;
    min-height: 400px;
    /* Slight height for prominence */
}

/* NARROW CARDS (Span 1 Column) */
.telemetry-feature-row.feature-span-1 {
    grid-column: span 1;
    min-height: auto;
    /* Let content dictate height */
}

/* Scroll Animation Trigger */
.telemetry-feature-row.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating Layout - ONLY for Wide Cards */
.telemetry-feature-row.feature-span-2:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

/* Scaling: Consistent visual weight */
.feature-img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 350px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
}

/* Subtle hover effect */
.telemetry-feature-row:hover .feature-img {
    transform: scale(1.03);
}

.feature-text {
    flex: 1;
    padding: 10px 0;
}

/* Align text based on card type */
.telemetry-feature-row.feature-span-1 .feature-text {
    text-align: left;
    /* Keep left aligned for readability even in stack */
    padding-top: 0;
}

.feature-category {
    font-size: 0.75rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.feature-text h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #fff;
    line-height: 1.2;
}

.feature-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .telemetry-deep-dive {
        grid-template-columns: 1fr;
        /* Stack everything on mobile */
        gap: 20px;
    }

    .telemetry-feature-row.feature-span-2,
    .telemetry-feature-row.feature-span-1 {
        grid-column: span 1;
        flex-direction: column !important;
        /* Force stack on mobile */
        padding: 30px 20px;
        min-height: auto;
    }

    .feature-img {
        max-height: 250px;
    }
}


/* --- MODAL (Redesigned Premium) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 225, 255, 0.05);
    width: 100%;
    max-width: 550px;
    border-radius: 24px;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

/* Header */
.modal-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    background: linear-gradient(90deg, #fff, #a0a0a0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}

@keyframes blink-pulse {
    /* Removed unused animation */
}

.telepath-form {
    padding: 32px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.span-2 {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group input,
.form-group select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 0.95rem;
    font-family: var(--font-body);
    /* No more mono */
    transition: all 0.2s ease;
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--accent-color);
    background-color: rgba(0, 225, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 225, 255, 0.1);
}

/* Fix option colors in dropdowns */
.form-group select option {
    background: #1a1a1a;
    color: #fff;
    padding: 10px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 24px;
    margin-top: 8px;
}

.btn-submit {
    background: var(--text-primary);
    color: var(--bg-dark);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .modal-container {
        width: 95%;
        margin: 0 auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.span-2 {
        grid-column: span 1;
    }

    .telepath-form {
        padding: 24px;
    }
}


/* Status Message */
.form-status {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-align: center;
    min-height: 20px;
}

.form-status.success {
    color: var(--success);
}

.form-status.error {
    color: #FF5F56;
}


body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-heading);
    line-height: 1.6;
    overflow-x: hidden;
}

.bg-elevated {
    background-color: var(--bg-card);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    /* Slightly less bold for elegance */
    letter-spacing: -0.04em;
    /* Tighter tracking like Vercel/Linear */
    color: #ffffff;
}

h2 {
    font-size: 2.5rem;
}


a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.mono {
    font-family: var(--font-mono);
}

.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.electric-text {
    color: var(--accent-color);
    text-shadow: 0 0 20px var(--accent-glow);
    background: rgba(0, 225, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.text-gradient-telepath {
    background: linear-gradient(90deg, #FF3C5A 0%, #FFB43C 50%, #00E1FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Tabbed Integration UI (Replaces GSAP Scroll) */
.integration-tabs-container {
    max-width: 900px;
    margin: 80px auto;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.integration-tabs-header {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.integration-tabs-header::-webkit-scrollbar {
    display: none;
}

.integration-tab {
    flex: 1;
    padding: 16px 24px;
    text-align: center;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.integration-tab.active {
    color: #fff;
    border-bottom-color: #fff;
    background: rgba(255, 255, 255, 0.02);
}

.integration-tab:hover:not(.active) {
    color: #ccc;
    background: rgba(255, 255, 255, 0.01);
}

.integration-tab-content {
    display: none;
    padding: 40px;
    animation: fadeIn 0.4s ease forwards;
}

.integration-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Navigation: Floating Glass Pill */
nav {
    padding: 16px 0;
    position: sticky;
    top: 24px;
    z-index: 100;
    margin: 0 auto 40px;
    max-width: 900px;
    /* Constrain width for a pill effect */
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    /* Full rounded pill */
    padding: 8px 16px 8px 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.1rem;
}

.brand-name {
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 800;
    margin-right: -0.3em;
    /* Visual alignment */
}

.nav-logo {
    height: 32px;
    /* Smaller, subtler logo for the pill */
    width: auto;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 0.9rem;
    font-weight: 500;
}

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

.nav-link:hover {
    color: var(--text-primary);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--success);
}

.btn-primary {
    background: #ffffff;
    color: #000000;
    padding: 10px 24px;
    border-radius: 100px;
    /* Fully rounded buttons */
    font-weight: 500;
    font-size: 0.95rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    padding: 10px 24px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.btn-primary.full-width {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    font-size: 1.2rem;
}

/* Hero Section */
.hero {
    padding: 60px 0 20px;
    /* Reduced bottom padding */
    text-align: center;
    position: relative;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-sub {
    font-size: 1.25rem;
    font-weight: 400;
    color: #888888;
    max-width: 650px;
    margin: 0 auto 48px;
}

.hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.latency-badge {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 16px 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.live-status-dot {
    width: 8px;
    height: 8px;
    background-color: #27C93F;
    border-radius: 50%;
    animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(39, 201, 63, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0);
    }
}

/* CRT Terminal Effect */
.crt-terminal {
    border: 1px solid #00ff41;
    /* Hacker Green */
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 255, 65, 0.05);
    background: #060806;
    /* Slightly greenish dark */
    position: relative;
    /* overflow: hidden; Removed to allow other effects if needed, but 'hidden' was in prompt for scanlines. Keeping 'hidden' might clip tooltips etc, but for scanlines it's safer. */
    overflow: hidden;
}

.crt-terminal::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 2;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}


/* Developer Experience Strip */
.dev-strip {
    padding: 80px 20px;
    background: #000000;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.dev-copy h2 {
    font-size: 2.5rem;
}

.dev-copy p {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.code-block {
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
    /* Increased padding for more space */
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Ensure content stays inside */
}

/* Header for Code Block (Traffic Lights) */
.code-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red {
    background: #FF5F56;
}

.dot.yellow {
    background: #FFBD2E;
}

.dot.green {
    background: #27C93F;
}

.code-content {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #A9B7C6;
    /* Standard IDE text color */
    white-space: pre;
    /* Maintain formatting */
    overflow-x: auto;
}

.token-method {
    color: #CC7832;
    font-weight: bold;
}

/* Orange keyword */
.token-string {
    color: #6A8759;
}

/* Green string */
.token-key {
    color: #9876AA;
}

/* Purple keys */
.token-number {
    color: #6897BB;
}

/* Blue numbers */
.token-comment {
    color: #808080;
}

/* Grey comment */

/* Architecture Section */
.architecture {
    padding: 100px 0;
    text-align: center;
}

.arch-visual {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.arch-node {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 32px;
    border-radius: 16px;
    min-width: 200px;
    position: relative;
}

.arch-node.telepath {
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(0, 225, 255, 0.05);
}

.node-icon {
    font-size: 2rem;
    margin-bottom: 16px;
    display: block;
}

.node-label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.node-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.arch-arrow {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    position: relative;
    padding-bottom: 10px;
}

.arch-arrow::after {
    content: '→';
    display: block;
    text-align: center;
    font-size: 1.5rem;
    opacity: 0.5;
}

.guardrail-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 0.7rem;
    padding: 4px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

/* Features Grid */
.features {
    padding: 100px 0;
    background: var(--bg-card);
    /* Kept base background, but cards will pop now */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

/* Redesigned Features Grid */
/* Neural Hub Grid */
.features-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    /* Wider gap for the hub */
    position: relative;
    z-index: 2;
}

/* Central Neural Hub */
.neural-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #000;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0, 225, 255, 0.1);
    z-index: 10;
    color: var(--accent-color);
    font-size: 1.5rem;
}

.neural-hub::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed var(--accent-color);
    animation: spin-slow 10s linear infinite;
    opacity: 0.3;
}

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

/* Wires connecting Hub to Cards */
.features-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    z-index: 1;
}

.features-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    z-index: 1;
}

/* Redesigned Feature Card */
.feature-card {
    background: rgba(10, 10, 10, 0.8);
    /* Opaque enough to hide wires if needed, but wires are behind */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
}

.feature-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    z-index: 5;
}

.feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
}

.feature-icon-sm {
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.feature-card strong {
    color: #fff;
    font-weight: 600;
}

/* Use Cases */
.use-cases {
    padding: 100px 0;
    text-align: center;
}

/* Schematic Cards (Use Cases) */
.schematic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.schematic-card {
    background: rgba(33, 38, 45, 0.3);
    border: 1px solid #30363d;
    padding: 2rem;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.schematic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.schematic-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.schematic-card:hover::before {
    opacity: 1;
}

.card-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px var(--accent-glow);
    display: inline-block;
}

.schematic-card h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 600;
}

.schematic-card p {
    font-size: 0.95rem;
    color: #8b949e;
    line-height: 1.6;
    margin: 0;
}

/* --- Telepath Logo SVG Separator Component */
.logo-separator-section {
    width: 100%;
    padding: 20px 0;
    margin-top: -20px;
    background: transparent;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

/* --- Integration Screen Layout --- */
.integration-layout {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Dashboard Simulation UI */
.dash-sim-container {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    background: #0A0A0A;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.dash-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-header-text {
    letter-spacing: 0.3em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
}

.dash-body {
    padding: 24px 32px;
    color: #E0E0E0;
    overflow: hidden;
    position: relative;
    flex: 1;
    font-family: var(--font-sans);
}

.dash-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 6px;
    font-weight: 600;
}

.dash-input-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Virtual Phone UI */
.virtual-phone-container {
    width: 280px;
    height: 400px;
    border: 12px solid #1a1a1a;
    border-radius: 36px;
    background: #000;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background: #1a1a1a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10;
}

.phone-dialing-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
}

.phone-active-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.telepath-pulse-line {
    /* GSAP handles dash array/offset dynamically on scroll */
    filter: drop-shadow(0 0 12px rgba(0, 225, 255, 0.6));
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    background: #0A0A0A;
    position: relative;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
}

/* Wide "Spec Sheet" Card */
.pricing-card-wide {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 900px;
    /* Match Enterprise width roughly */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card-wide:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pricing-header .nav-logo {
    height: 64px;
    width: auto;
}

.pricing-header .brand-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    cursor: default;
}

.price-group {
    text-align: right;
}

.price-group .price {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.price-group .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.price-group .price-subtext {
    font-size: 0.9rem;
    color: var(--accent-color);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    width: 100%;
    margin-bottom: 30px;
}

.feature-grid-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.feature-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.1rem;
    color: #e0e6ed;
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
    background: rgba(0, 225, 255, 0.1);
    padding: 8px;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
}

.action-row {
    margin-top: auto;
}

.btn.full-width {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 16px;
}

/* Enterprise Section - Simple Business Card */
.enterprise-section-simple {
    margin: 20px auto 0;
    max-width: 900px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center everything vertically */
    gap: 20px;
}

.ent-simple-header {
    padding: 0;
    border: none;
    min-width: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.ent-simple-header h3 {
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.ent-simple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 600px;
    /* Limit width for readability */
    column-gap: 60px;
    row-gap: 12px;
    margin-bottom: 10px;
}

.ent-item {
    font-size: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Optional bullet */
.ent-item::before {
    content: "•";
    color: var(--accent-color);
    font-weight: bold;
}

.ent-simple-cta {
    padding: 0;
    border: none;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Small Button Variant */
.btn.small {
    padding: 10px 24px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn.small:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

@media (max-width: 768px) {
    .pricing-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .brand-group {
        justify-content: center;
    }

    .pricing-header .nav-logo {
        height: 48px;
    }

    .pricing-header .brand-name {
        font-size: 2rem;
    }

    .price-group {
        text-align: center;
    }

    .price-group .price {
        font-size: 2.5rem;
    }

    .feature-grid-wide {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pricing-grid-3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ent-simple-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        /* Tighter gap for list */
        width: fit-content;
        /* Center the block... */
        margin: 0 auto 10px auto;
        /* ...but keep it compact */
    }

    .ent-item {
        justify-content: flex-start;
        /* Align text left */
        width: 100%;
    }

    .ent-item::before {
        display: inline-block;
        /* Show bullet */
        margin-right: 8px;
    }
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card.highlight {
    border-color: var(--accent-color);
    background: linear-gradient(180deg, rgba(0, 225, 255, 0.03) 0%, rgba(10, 10, 10, 1) 100%);
    box-shadow: 0 0 30px rgba(0, 225, 255, 0.05);
}

.pricing-card:hover {
    transform: translateY(-4px);
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--text-primary);
    text-align: center;
}

/* NEW: 2-Tier Matrix Layout */
.pricing-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.matrix-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.matrix-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.matrix-card h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    color: #fff;
}

.matrix-sub {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 1.1rem;
}

.matrix-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    flex-grow: 1;
}

.matrix-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: #d1d5db;
    /* Lighter text for better reading */
    font-size: 1rem;
    line-height: 1.5;
}

.matrix-list li i {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin-top: 2px;
}

.matrix-list .highlight-item {
    font-weight: 600;
    color: #fff;
}

/* Make Tier 1 stark white */
.matrix-card:first-child {
    background: #ffffff;
    border: none;
    color: #000;
}

.matrix-card:first-child h2 {
    color: #000;
}

.matrix-card:first-child .matrix-sub {
    color: #555;
}

.matrix-card:first-child .matrix-list li {
    color: #333;
}

.matrix-card:first-child .matrix-list li i {
    color: #000;
    /* Black checks on white background */
}

.matrix-card:first-child .btn-primary {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.matrix-card:first-child .btn-primary:hover {
    background: transparent;
    color: #000;
}

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

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-sans);
    letter-spacing: -1px;
    text-align: center;
}

.price span {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

.price-subtext {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
    text-align: center;
    margin-bottom: 32px;
}

.features-list {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
    /* Pushes button down */
}

.features-list li {
    margin-bottom: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.features-list li::before {
    content: "✓";
    color: var(--accent-color);
    font-weight: bold;
}

.badge-pop {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 100px;
    letter-spacing: 1px;
    box-shadow: 0 0 15px var(--accent-color);
}

/* Pricing Buttons */
.btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-size: 1rem;
}

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

.btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-secondary);
}

.btn.primary.glow {
    background: var(--accent-color);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 225, 255, 0.3);
}

.btn.primary.glow:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    animation: btn-pulse 1s infinite;
}

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

    50% {
        transform: scale(1.02);
    }

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

footer {
    padding: 60px 0 30px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
    flex-wrap: wrap;
}

.footer-links a:hover {
    color: var(--text-primary);
}

.fine-print {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .dev-strip,
    .pricing-section,
    .capabilities {
        padding: 40px 20px !important;
        /* Force override user complaints about double padding */
    }

    .mega-cta {
        padding: 0 20px 40px !important;
    }

    .observability-section {
        padding: 40px 20px !important;
        overflow-x: hidden;
    }

    .integration-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 5px 0;
    }

    /* Target the new utility classes on mobile */
    .integration-tab-content>.integration-layout>div {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .integration-tab-content>.integration-layout>div h3 {
        margin-bottom: 12px !important;
        font-size: 1.2rem !important;
    }

    .integration-tab-content>.integration-layout>div:nth-child(2) {
        width: auto !important;
    }

    .dash-sim-container {
        width: 320px !important;
        max-width: none;
        height: 350px !important;
        /* Enforce height to prevent jumpiness on scroll */
        margin: 0 auto;
    }

    .virtual-phone-container {
        width: 280px !important;
        /* Fixed width */
        height: 360px !important;
        margin: 0 auto;
    }

    .integration-tabs-header {
        display: none !important;
    }

    .integration-tab {
        padding: 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-left: 2px solid transparent;
    }

    .integration-tab.active {
        border-bottom-color: rgba(255, 255, 255, 0.05);
        /* retain typical separator */
        border-left-color: #fff;
        /* show active state on left now */
    }

    .dash-body {
        padding: 16px 20px !important;
        /* Tighter padding for mobile dashboard */
    }

    .virtual-phone-container {
        max-width: 280px;
        /* Keep phone narrow even while stacked */
    }

    .integration-tab-content p {
        display: none !important;
    }

    .logo-separator-section svg {
        display: none !important;
    }

    .logo-separator-section {
        display: none !important;
    }

    .integration-section {
        padding-bottom: 20px !important;
    }
}

/* SVG Architecture Animation */
.arch-svg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px rgba(0, 225, 255, 0.05));
    /* Scaling up slightly for impact */
    transform: scale(1.1);
    transform-origin: top center;
}

/* Custom Scrollbar for Telemetry */
#telemetry-display::-webkit-scrollbar {
    width: 6px;
}

#telemetry-display::-webkit-scrollbar-track {
    background: #0d1117;
}

#telemetry-display::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

#telemetry-display::-webkit-scrollbar-thumb:hover {
    background: #58a6ff;
}

/* Telemetry Metrics Grid (New) */
.telemetry-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 15px;
    background: #0d1117;
}

.metric-mini-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-mini-label {
    font-size: 9px;
    color: #7d8590;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-mini-value {
    font-size: 13px;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
}

.signal-path-active {
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -20;
    }
}

.pulse-ring {
    transform-origin: center;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

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

/* Integration Strip (Carrier Logos) */
.integration-strip {
    margin-top: 3rem;
    text-align: center;
    opacity: 0.8;
}

.strip-label {
    font-size: 0.75rem;
    color: #666;
    /* Muted text */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}

.logo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.carrier-logo {
    height: 24px;
    width: auto;
    opacity: 1;
    /* Full visibility */
    display: block;
    /* Ensure correct rendering */
}

/* The number highlighting */
.json-key {
    color: #d4d4d4;
}

/* Standard Grey */
.json-string {
    color: #ce9178;
}

/* String Color */
.json-number {
    color: #b5cea8;
}

/* Number Color */

/* The "Money" Highlight */
.flash-latency {
    color: #00ff41 !important;
    /* Hacker Green */
    font-weight: bold;
    animation: latencyPulse 0.5s ease-out;
    display: inline-block;
}

@keyframes latencyPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.2);
        filter: brightness(2);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Terminal Glow & Mobile Safety */
.terminal-glow {
    box-shadow: 0 0 40px rgba(0, 255, 65, 0.05);
    /* Subtle ambient glow */
    border: 1px solid rgba(0, 255, 65, 0.2) !important;
    /* Force Tech border override inline if needed */
    transition: box-shadow 0.3s ease;
    overflow-x: auto;
    /* Mobile safety scrolling */
}

.terminal-glow:hover {
    box-shadow: 0 0 60px rgba(0, 255, 65, 0.1);
    /* Brighter on interaction */
}

/* Custom Scrollbar for Terminal */
.terminal-glow::-webkit-scrollbar {
    height: 8px;
}

.terminal-glow::-webkit-scrollbar-track {
    background: #0d1117;
}

.terminal-glow::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.terminal-glow::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Data Scan Effect */
.data-key {
    color: #444 !important;
}

/* Faded Brackets/Keys */
.data-string {
    color: #888;
}

/* Muted Strings */

/* Values needing highlight */
.val-green {
    color: #00FF94;
}

.val-gold {
    color: #FFBD2E;
}

.val-cyan {
    color: #00E1FF;
}

.val-red {
    color: #FF5F56;
}

/* The Scan Animation */
@keyframes highlightScan {
    0% {
        background-position: 100% 0;
        background-size: 0% 100%;
    }

    50% {
        background-size: 100% 100%;
        background-position: 0 0;
    }

    100% {
        background-size: 0% 100%;
        background-position: 0 0;
    }
}

.scan-highlight {
    position: relative;
    display: inline-block;
    padding: 0 2px;
    border-radius: 2px;
}

.scan-active {
    animation: highlightFade 1.5s ease-out forwards;
}

@keyframes highlightFade {
    0% {
        background-color: transparent;
    }

    10% {
        background-color: rgba(255, 255, 255, 0.15);
    }

    100% {
        background-color: transparent;
    }
}

/* Fast Flash for Dynamic Updates (250ms) */
.flash-update {
    animation: flashBg 0.25s ease-out forwards;
    border-radius: 2px;
}

@keyframes flashBg {
    0% {
        background-color: rgba(255, 255, 255, 0.3);
    }

    100% {
        background-color: transparent;
    }
}

/* REVISED: High-Legibility Terminal Colors */
.data-key {
    color: #7d8590 !important;
}

/* Blue-Grey (Visible but recessive) */
.data-string {
    color: #a5d6ff;
}

/* Pale Blue (Technical) */

/* Status Beacon in Terminal Header */
.terminal-beacon {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #00FF94;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 8px #00FF94;
    animation: beaconPulse 2s infinite;
}

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

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

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

/* Infrastructure Section (Shortest Distance) */
.infrastructure-section {
    padding: 60px 0;
    background: #0b0d10;
    /* Distinct dark background */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Observability Section (Telemetry Demo) */
.observability-section {
    padding: 80px 20px;
    background: #0D1117;
    text-align: center;
}

/* Schematic Cards Tweaks for DX integration */
.schematic-grid-dx {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 80px;
}

/* --- NEW: Capabilities Section (Consolidated) --- */
.capabilities {
    padding: 80px 20px;
    background: #000000;
}

/* --- BENTO GRID SYSTEM --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bento-card.full-width {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: auto;
    /* Allow auto height */
}

/* Responsive: 2 cols on tablet, 1 col on mobile */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

.bento-card {
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.03);
    /* Base border */
    border-radius: 16px;
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
    /* Contains the spotlight */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* Animation Stagger */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.3s ease,
        border-color 0.3s ease;
}

.bento-card.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays (1-6) */
.bento-card:nth-child(1) {
    transition-delay: 0.1s;
}

.bento-card:nth-child(2) {
    transition-delay: 0.2s;
}

.bento-card:nth-child(3) {
    transition-delay: 0.3s;
}

.bento-card:nth-child(4) {
    transition-delay: 0.4s;
}

.bento-card:nth-child(5) {
    transition-delay: 0.5s;
}

.bento-card:nth-child(6) {
    transition-delay: 0.6s;
}

.bento-card:hover {
    transform: translateY(-8px) scale(1.01);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px var(--accent-glow);
    transition-delay: 0s;
}

/* Span classes for Bento Layout */
.span-2 {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .span-2 {
        grid-column: span 1;
    }

    /* Reset on mobile */
}

/* --- HOLOGRAPHIC SPOTLIGHT --- */
/* The spotlight element (injected or pseudo) */
.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 1px;
    /* The border width */
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.4),
            transparent 40%);
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.4s ease;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Reveal spotlight on grid hover (passed via JS class or just hover) */
.bento-grid:hover .bento-card::before {
    opacity: 1;
}

/* Card Content Styling */
.bento-icon {
    font-size: 1.5rem;
    margin-bottom: 24px;
    color: var(--accent-color);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.bento-content h3 {
    font-size: 1.25rem;
    color: #FFFFFF;
    margin-bottom: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bento-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* --- Integration Strip --- */
.integration-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 30px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.integration-logo {
    height: 24px;
    opacity: 0.3;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.integration-logo:hover {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Text fallback for missing logos */
.integration-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    opacity: 0.3;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
}

.integration-text:hover {
    opacity: 0.9;
    color: var(--accent-color, #fff);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.integration-logo {
    height: 32px;
    width: auto;
    max-width: 140px;
    /* Prevent wide logos like Anthropic from dominating */
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.integration-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* --- SIP Config Visual (Hero) --- */
.sip-config-visual {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 450px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Mac-style header dots */
.sip-config-header {
    background: #161b22;
    padding: 12px 16px;
    border-bottom: 1px solid #30363d;
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

/* Mock Tabs */
.sip-tabs {
    display: flex;
    background: #0d1117;
    border-bottom: 1px solid #30363d;
    font-size: 0.85rem;
}

.sip-tab {
    padding: 12px 20px;
    color: #8b949e;
    cursor: default;
    border-right: 1px solid #30363d;
}

.sip-tab.active {
    background: #0d1117;
    color: #58a6ff;
    /* Twilio blue-ish */
    border-top: 2px solid #58a6ff;
    font-weight: 600;
}

/* Dashboard Body */
.sip-body {
    padding: 24px;
}

.sip-label {
    display: block;
    color: #8b949e;
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.sip-input-group {
    display: flex;
    align-items: center;
    background: #010409;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 20px;
}

.sip-input-text {
    flex: 1;
    background: transparent;
    border: none;
    color: #c9d1d9;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.sip-badge {
    background: rgba(39, 201, 63, 0.15);
    color: #27c93f;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 10px;
    border: 1px solid rgba(39, 201, 63, 0.3);
}

.sip-helper-text {
    font-size: 0.8rem;
    color: #484f58;
    line-height: 1.4;
}

/* --- Mega CTA (Footer) --- */
.mega-cta {
    padding: 0 20px 80px 20px;
    text-align: center;
    background: #000000;
}

.mega-cta h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.mega-cta p {
    font-size: 1.2rem;
    color: #8b949e;
    max-width: 600px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Enhancing existing buttons for CTA context */
.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* --- Scroll Animations --- */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    /* Elegant easing */
    will-change: transform, opacity;
}

/* Initial States */
.animate-up {
    transform: translateY(20px);
}

/* Active State */
.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

.schematic-card-dx {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    text-align: left;
}

.schematic-card-dx:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

/* --- Ecosystem Bridge (Carriers vs AI) --- */
/* --- Ecosystem Bridge (Animation) --- */
/* --- Integration Logos (Promoted Section) */
.integrations-section {
    padding: 20px 20px;
    background: #0A0A0A;
    /* Slightly lighter than body #050505 */
    border-top: 1px solid #1A1A1A;
    border-bottom: 1px solid #1A1A1A;
    position: relative;
    z-index: 10;
    text-align: center;
}

.logos-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
    /* max-width: 800px; -- Let it breathe */
    margin: 0 auto;
}

.logo-row {
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.integration-logo {
    height: 32px;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.integration-logo.logo-large {
    height: 48px;
    /* 50% larger than 32px */
}

.integration-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .logo-row {
        gap: 30px;
    }

    .integration-logo {
        height: 24px;
    }

    .integration-logo.logo-large {
        height: 36px;
    }

    /* Mobile SignalWire Fix */
    img[alt="SignalWire"] {
        height: 34px !important;
    }
}

/* Optical Adjustment for Wide Logos */
img[alt="SignalWire"] {
    margin-top: 4px;
    /* Slight centering tweak if needed */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .ecosystem-bridge {
        width: 95%;
        padding: 10px;
        margin-top: 1rem;
    }
}

/* --- Code Terminal (Multi-Language) --- */
.code-terminal {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* ... (previous terminal styles) ... */

/* --- Ecosystem Glass Dock --- */
.ecosystem-glass-panel {
    background: rgba(13, 17, 23, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(48, 54, 61, 0.6);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
    height: 100%;
    /* Ensure it fills the flex column */
    width: 100%;
    /* Ensure full width */
}

.ecosystem-glass-panel:hover {
    border-color: rgba(88, 166, 255, 0.3);
    transform: translateY(-2px);
}

.ecosystem-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: #8b949e;
    font-weight: 600;
    margin-bottom: 0;
    /* Let grid gap handle spacing */
}

/* Ensure grid fits nicely in panel */
.ecosystem-grid {
    width: 100%;
    justify-content: center;
}


.terminal-header {
    background: #161b22;
    border-bottom: 1px solid #30363d;
    display: flex;
    padding: 0 8px;
}

.terminal-tab {
    padding: 12px 24px;
    color: #8b949e;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.terminal-tab:hover {
    color: #c9d1d9;
}

.terminal-tab.active {
    color: #fff;
    border-bottom: 2px solid #58a6ff;
    background: #0d1117;
}

.terminal-window {
    padding: 24px;
    overflow-x: auto;
    background: #0d1117;
    min-height: 380px;
}

.code-block-content {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #c9d1d9;
    display: none;
}

.code-block-content.active {
    display: block;
    /* Requires JS toggle */
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* --- Syntax Highlighting (Manual) --- */
.hl-comment {
    color: #8b949e;
    font-style: italic;
}

.hl-keyword {
    color: #ff7b72;
}

.hl-function {
    color: #d2a8ff;
}

.hl-string {
    color: #a5d6ff;
}

.hl-property {
    color: #79c0ff;
}

.hl-number {
    color: #79c0ff;
}

.hl-visual {
    color: #d2a8ff;
}

/* --- Responsive Fixes (Mobile Retrofit) --- */
.hero-logo-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2rem;
}

.hero-logo {
    height: 96px;
    width: auto;
}

.hero-brand {
    font-size: 3rem;
}

.hero-title {
    font-size: 5rem;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
    line-height: 1;
}

.hero-cta-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.btn-hero {
    padding: 12px 32px;
    font-size: 1.1rem;
}

/* Section Headers Retrofit */
.section-heading-shortcut {
    margin-bottom: 0.5rem;
}

.section-subtext {
    color: #888;
    max-width: 600px;
    margin: 0 auto 1rem;
    font-size: 1.2rem;
}

/* Unified Section Header */
.section-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 3.5rem;
    letter-spacing: -2px;
    color: #fff;
    font-weight: 700;
}

.section-subtext {
    color: #8b949e;
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.section-header.text-left {
    text-align: left;
    margin-left: 0;
}

.section-subtext-visibility {
    text-align: center;
    color: #8b949e;
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.section-heading-pricing {
    text-align: center;
}

.section-subtext-pricing {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}


/* --- Mobile Menu Styles --- */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 101;
    /* Above nav dropdown */
}

@media (max-width: 768px) {

    /* Mobile Nav Toggle */
    .mobile-menu-toggle {
        display: block;
    }

    nav {
        padding: 4px 0 !important;
        top: 8px !important;
        margin-bottom: 20px !important;
    }

    nav .container {
        padding: 6px 16px 6px 12px !important;
    }

    .nav-logo {
        height: 24px !important;
    }

    .nav-right {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .nav-right.active {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

    .nav-link {
        font-size: 1.2rem;
        padding: 12px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .status-indicator {
        margin-top: 20px;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 100px;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    /* Hero Section Mobile */
    .hero-logo-lockup {
        gap: 12px;
        margin-bottom: 1.5rem;
        flex-direction: column;
        /* Stack logo on very small screens? or just shrink */
    }

    .hero-logo {
        height: 64px;
    }

    .hero-brand {
        font-size: 2.5rem;
    }

    .hero-title {
        font-size: 3rem;
        /* Half size */
    }

    .hero-sub {
        font-size: 1.1rem;
        padding: 0 20px;
    }

    .hero-cta-wrapper {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 12px;
    }

    .btn-hero {
        width: 100%;
        text-align: center;
    }

    /* General Section Headers Mobile */
    h2 {
        font-size: 2rem !important;
        /* Force override for inline style remnants if any */
    }

    .section-heading-why,
    .section-heading-visibility,
    .section-heading-pricing {
        font-size: 2rem;
    }

    .section-subtext,
    .section-subtext-visibility,
    .section-subtext-pricing {
        font-size: 1rem;
        padding: 0 20px;
    }

    /* Container Padding */
    .container {
        padding: 0 20px;
    }

    /* Pricing Grid Stack */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* Mega CTA */
    .mega-cta h2 {
        font-size: 2.5rem;
    }

    .mega-cta p {
        padding: 0 20px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    /* Telemetry Mobile Overflow */
    .observability-section .container {
        overflow-x: hidden;
        /* Prevent body scroll */
    }

    .observability-section>.container>div {
        overflow-x: auto;
        /* Allow widget to scroll horizontally if needed, or maybe scale it down? */
        /* Actually the widget is fixed 500px height and flex layout. 
           On mobile, it's best to show just the JSON or stack them.
           For Retrofit speed, let's just ensure it doesn't break layout width.
        */
    }
}

/* --- Step Cards (Integration Section) --- */
.steps-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    margin-top: 2rem;
}

.step-column {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 12px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.step-column:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.step-num {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: -10px;
    right: 10px;
    line-height: 1;
    transition: all 0.3s ease;
}

.step-column:hover .step-num {
    color: var(--accent-color);
    opacity: 0.15;
    text-shadow: 0 0 20px var(--accent-color);
    transform: scale(1.05);
}

.step-column h3 {
    margin-top: 10px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 1.25rem;
}

.step-column p {
    color: #b0b8c3;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0.5;
    align-self: center;
}

@media (max-width: 768px) {
    .steps-grid {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
        height: auto;
        padding: 10px;
    }
}





/* --- OBSERVABILITY GRID (4x2 Compact) --- */
.observability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    /* Wider to allow side-by-side */
    margin: 40px auto 0;
    padding: 0 20px;
}

.observability-card {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Match bento card border */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.observability-visual {
    width: 100%;
    height: 300px;
    /* Reduced height for tighter layout */
    background: transparent;
    /* Remove harsh gray background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Add padding so images aren't flush */
}

.observability-visual img {
    /* Scale down within frame, add soft shadow to look like floating UI */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

/* Tablet: 2x4 */
@media (max-width: 1100px) {
    .observability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .observability-visual {
        height: 300px;
    }
}

/* Mobile: 1x8 */
@media (max-width: 600px) {
    .observability-grid {
        grid-template-columns: 1fr;
    }

    .observability-visual {
        height: 250px;
    }
}

.observability-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
}



.observability-info {
    padding: 24px;
    text-align: left;
    flex-grow: 1;
}

.observability-info h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #fff;
    font-weight: 600;
}

.observability-info p {
    font-size: 0.95rem;
    color: #8b949e;
    line-height: 1.6;
    margin: 0;
}


/* --- NEW FOOTER STYLES (INSIGHTS) --- */
.footer-insights-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
    margin-top: 4px;
}

.insights-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    opacity: 0.5;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-insights-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-separator {
    opacity: 0.3;
}

@media (max-width: 600px) {
    .footer-insights-container {
        flex-direction: column;
        gap: 8px;
    }

    .insights-label {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 4px;
        width: 100%;
        text-align: center;
    }

    .footer-insights-links {
        flex-direction: column;
        gap: 8px;
    }

    .footer-separator {
        display: none;
    }
}

/* 
   ----------------------------------------
   DOCUMENTATION LAYOUT 
   ----------------------------------------
*/

/* Docs Specific Layout */
/* Note: html scroll-behavior is handled globally or per page, can keep here if specific to docs smoothness */

/* Prevent content from sticking under fixed navbar */
.docs-page section,
.docs-page .provider-row,
.docs-page h3[id] {
    scroll-margin-top: 120px;
}

.docs-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 40px;
    min-height: 100vh;
}

/* Sidebar */
.docs-sidebar {
    width: 300px;
    padding: 20px 40px 20px 20px;
    position: sticky;
    top: 100px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
}

.docs-sidebar h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.docs-sidebar h4:first-child {
    margin-top: 0;
}

.docs-nav-link {
    display: block;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: color 0.2s;
    text-decoration: none;
}

.docs-nav-link:hover,
.docs-nav-link.active {
    color: var(--accent-color);
}

/* Main Content */
.docs-content {
    flex-grow: 1;
    padding: 20px 20px 100px 40px;
    max-width: 900px;
}

.docs-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.docs-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2rem;
}

.docs-content h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.docs-content h3 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.docs-content h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--accent-color);
}

.docs-content p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.docs-content ul,
.docs-content ol {
    margin-bottom: 1.5rem;
    padding-left: 20px;
    color: var(--text-secondary);
}

.docs-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.docs-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Links (Use standard style or override) */
.docs-content a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    transition: background 0.2s;
}

.docs-content a:hover {
    background: rgba(0, 225, 255, 0.1);
    color: var(--text-primary);
}

/* Code Blocks */
pre.docs-code-block,
pre {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 20px;
    margin: 1.5rem 0;
    overflow-x: auto;
    white-space: pre;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #e6edf3;
    line-height: 1.5;
    text-align: left;
}

pre.docs-code-block code,
pre code {
    font-family: inherit;
}

.code-keyword {
    color: #ff7b72;
}

.code-string {
    color: #a5d6ff;
}

.code-number {
    color: #79c0ff;
}

.code-boolean {
    color: #79c0ff;
}

.code-func {
    color: #d2a8ff;
}

.code-comment {
    color: #8b949e;
}

/* Tables */
.docs-table,
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.docs-table th,
table th,
.docs-table td,
table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.docs-table th,
table th {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    font-weight: 600;
}

.docs-table td,
table td {
    color: var(--text-secondary);
}

.docs-table tr:hover td,
table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Config Buttons */
.config-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.2s;
}

.config-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.config-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    font-weight: 600;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left: 4px solid;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}

.alert-info {
    background: rgba(0, 212, 255, 0.05);
    border-color: var(--accent-color);
}

.alert-warning {
    background: rgba(255, 170, 0, 0.05);
    border-color: #ffaa00;
}

.alert-error {
    background: rgba(255, 68, 102, 0.05);
    border-color: #ff4466;
}

/* Provider / Carrier List Rows */
.provider-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 2rem 0;
}

.provider-row {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.provider-row:last-child {
    border-bottom: none;
}

.provider-row h3 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.5rem !important;
    color: var(--accent-color) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.provider-row ul {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Security Cards */
.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 2rem 0;
}

.security-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.2s;
}

.security-card:hover {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.04);
}

.security-card h3 {
    margin-top: 0 !important;
    font-size: 1.1rem !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.security-card i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

/* Troubleshooting Cards */
.troubleshoot-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 2rem 0;
}

.troubleshoot-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.troubleshoot-header {
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.troubleshoot-header h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    color: #fff !important;
}

.troubleshoot-body {
    padding: 24px;
}

.troubleshoot-fix {
    margin-top: 16px;
    padding: 16px;
    background: rgba(0, 255, 148, 0.1);
    border: 1px solid rgba(0, 255, 148, 0.3);
    border-radius: 6px;
    color: #e6fff5;
}

.troubleshoot-fix strong {
    color: var(--success);
    display: block;
    margin-bottom: 4px;
}


/* 
   ----------------------------------------
   INSIGHTS / BLOG LAYOUT 
   ----------------------------------------
*/

/* Consolidated Containers */
.insights-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 100px 20px;
}

/* Narrower container for reading-heavy pages */
.insights-reading-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 100px 20px;
}

/* Header */
.insights-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 2rem;
}

.insights-logo-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.insights-logo-lockup img {
    width: 64px;
    height: 64px;
}

/* Adjust logo size for simpler branding on some pages? Keeping 64px standard. */

.insights-logo-lockup .brand-name {
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 800;
    margin-right: -0.3em;
    color: var(--text-primary);
}

.insights-header h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.insights-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.insights-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.insights-meta a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

.insights-meta a:hover {
    opacity: 0.8;
}

/* Feature Sections (Flowing Layout for 'Deep Dives' or Solutions) */
.insights-features {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
}

.feature-block {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.feature-block:last-child {
    border-bottom: none;
}

.feature-block h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.feature-block p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.feature-metric {
    display: inline-block;
    background: rgba(0, 225, 255, 0.1);
    border-left: 3px solid var(--accent-color);
    padding: 8px 12px;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600;
}

/* For You Section */
.for-you-section {
    background: rgba(0, 225, 255, 0.05);
    border: 1px solid rgba(0, 225, 255, 0.2);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.for-you-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.for-you-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

/* How It Works Section */
.how-it-works {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.how-it-works h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step {
    display: flex;
    gap: 1rem;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent-color);
    color: #000;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content h3 {
    margin: 0;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Code Block in How It Works */
.how-it-works-code {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px;
    overflow-x: auto;
    min-height: 240px;
    display: flex;
    align-items: center;
}

.how-it-works-code pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #e6edf3;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .how-it-works-grid {
        grid-template-columns: 1fr;
    }
}

/* Content Styling (for Reading Pages) */
.insights-content {
    line-height: 1.8;
    color: var(--text-secondary);
}

.insights-content h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.insights-content h3 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.insights-content p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.insights-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.insights-content ul,
.insights-content ol {
    margin-bottom: 1.5rem;
    padding-left: 20px;
    color: var(--text-secondary);
}

.insights-content li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

/* Internal Links in Content */
.insights-content a,
.feature-block a,
.for-you-section a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    transition: opacity 0.2s;
}

.insights-content a:hover,
.feature-block a:hover,
.for-you-section a:hover {
    opacity: 0.8;
}

.insights-content code {
    background: rgba(0, 225, 255, 0.1);
    border: 1px solid rgba(0, 225, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    color: var(--accent-color);
    font-size: 0.9em;
}

/* Clean Table for Insights Articles */
.insights-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 2rem;
    font-size: 0.95rem;
}

.insights-table th,
.insights-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.insights-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insights-table td {
    color: var(--text-secondary);
}

.insights-table td strong {
    color: var(--text-primary);
}

.insights-table .success {
    color: var(--success);
    font-weight: 700;
}

.insights-table .accent {
    color: var(--accent-color);
    font-weight: 700;
}

.insights-table .total-row {
    border-top: 2px solid var(--accent-color);
}

.insights-table .total-row td {
    color: var(--text-primary);
    font-weight: 600;
}

/* CTA Section at End */
.insights-cta-section {
    background: rgba(0, 225, 255, 0.05);
    border: 1px solid rgba(0, 225, 255, 0.2);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* If used as a solutions CTA */
.solutions-cta-section {
    /* Retaining old class for compatibility, or alias it */
    background: rgba(0, 225, 255, 0.05);
    border: 1px solid rgba(0, 225, 255, 0.2);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
}

.insights-cta-section h2,
.insights-cta-section h3,
.solutions-cta-section h2 {
    font-size: 1.5rem;
    /* standardized */
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.insights-cta-section p,
.solutions-cta-section p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.insights-cta-section a,
.solutions-cta-section a:not(.primary):not(.secondary) {
    /* For simple link CTAs */
    display: inline-block;
    background: var(--accent-color);
    color: #000;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
}

.insights-cta-section a:hover,
.solutions-cta-section a:not(.primary):not(.secondary):hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Reusing cta-buttons from solutions page */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-buttons a {
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-block;
}

.cta-buttons a.primary {
    background: var(--accent-color);
    color: #000;
    border: 1px solid var(--accent-color);
}

.cta-buttons a.primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.cta-buttons a.secondary {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.cta-buttons a.secondary:hover {
    background: rgba(0, 225, 255, 0.1);
    transform: translateY(-2px);
}


/* Mobile for Insights */
@media (max-width: 768px) {

    .insights-container,
    .insights-reading-container {
        padding: 20px 16px 60px 16px;
    }

    .insights-header h1 {
        font-size: 1.6rem;
    }

    .feature-block h2,
    .insights-content h2 {
        font-size: 1.2rem;
    }

    .insights-content h3 {
        font-size: 1.1rem;
    }

    .insights-header p {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons a {
        width: 100%;
        text-align: center;
    }
}

/* Pricing Grid 3-Column */
.pricing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.brand-header-small {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.brand-header-small .nav-logo {
    height: 24px;
    width: 24px;
}

.brand-header-small .brand-name {
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 600;
}

/* Pricing Grid 2-Column (Matrix) */
.pricing-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.matrix-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
}

.matrix-card h3 {
    font-size: 2rem;
    margin-bottom: 8px;
    color: #fff;
    font-family: var(--font-sans);
    letter-spacing: -1px;
}

.matrix-sub {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 1.1rem;
}

.matrix-list {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

.matrix-list li {
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
}

.matrix-list li i {
    color: var(--accent-color);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.matrix-list li.highlight-item {
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    margin-left: -12px;
}

@media (max-width: 992px) {
    .pricing-grid-3 {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-grid-2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* =============================================
   SVG ANIMATION CONTAINERS (V3)
   ============================================= */
.ecosystem-bridge {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
    overflow: visible;
}

.latency-svg-container {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    overflow: visible;
}

/* Ensure SVGs scale nicely */
.ecosystem-bridge svg,
.latency-svg-container svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Virtual Onboarding Stage (Updated: Auto-Play) */
#virtual-onboarding-stage {
    position: relative;
    width: 100%;
    min-height: 480px;
    /* Fits the 7s animation comfortably */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background: transparent; - Let body bg show */
    overflow: hidden;
}

.sticky-viewport {
    /* Legacy class - reset */
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.stage-context {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    margin-bottom: 12px;
    /* Very tight spacing */
}

.stage-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0px;
    /* Remove extra gap */
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
}

.virtual-screen-frame {
    width: 900px;
    height: 600px;
    background: transparent;
    /* Frameless */
    border: none;
    border-radius: 12px;
    position: relative;
    /* box-shadow: 0 50px 100px rgba(0,0,0,0.8); Removed from frame, added to scene */
    overflow: visible;
    /* Allow shadow to bleed if needed, but scenes are clipped usually. Let's keep hidden for internal content but we want shadow. */
    transform: scale(0.9);
    opacity: 0;
}

/* Scenes */
.virtual-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0d1117;
    border-radius: 12px;
    /* Scene carries the rounding */
    border: 1px solid #30363d;
    /* Scene carries the border */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    /* Scene carries the shadow */
    overflow: hidden;
    /* Clip inner content */
}

.scene-header {
    height: 60px;
    border-bottom: 1px solid #30363d;
    display: flex;
    align-items: center;
    padding: 0 24px;
    justify-content: space-between;
}

.scene-logo {
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.scene-nav {
    display: flex;
    gap: 20px;
}

.nav-pill {
    padding: 6px 12px;
    border-radius: 6px;
    color: #8b949e;
    font-size: 0.85rem;
}

.nav-pill.active {
    background: #21262d;
    color: #c9d1d9;
}

.scene-body {
    flex: 1;
    padding: 40px;
    position: relative;
}

/* Telepath Dashboard Specifics */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.btn-primary-small {
    background: #00E1FF;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Virtual Modal */
.virtual-modal {
    width: 400px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    /* Hidden initially */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.virtual-modal h4 {
    margin-bottom: 20px;
    color: #fff;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: #8b949e;
    margin-bottom: 6px;
}

.fake-input,
.fake-select {
    width: 100%;
    height: 36px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.fake-select {
    cursor: pointer;
    justify-content: space-between;
}

.fake-select::after {
    content: '▼';
    font-size: 0.7rem;
    color: #8b949e;
}

.input-hint {
    font-size: 0.75rem;
    color: #8b949e;
    margin-top: 4px;
}

.highlight {
    color: #00E1FF;
}

/* Carrier Scene Specifics */
#scene-carrier {
    background: #f0f2f5;
    /* Light theme for generic carrier to contrast */
    color: #333;
}

#scene-carrier .scene-header {
    background: #fff;
    border-bottom: 1px solid #e1e4e8;
}

#scene-carrier .scene-logo {
    color: #333;
}

.carrier-form {
    max-width: 400px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carrier-form h3 {
    margin-bottom: 24px;
    color: #1a1f24;
}

.carrier-form .fake-input {
    background: #fff;
    border: 1px solid #d1d5da;
    color: #24292e;
}

.carrier-form label {
    color: #586069;
}

.btn-carrier-call {
    width: 100%;
    height: 40px;
    background: #2ea44f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Cursor */
.virtual-cursor {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    margin-top: -3px;
    /* Tip offset */
    margin-left: -3px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    /* Initial state controlled by JS */
}

/* Success Overlay */
.success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 23, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #00E1FF;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 20px;
    transform: scale(0);
    /* Animate to 1 */
}

.success-text {
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
}

.success-timer {
    font-family: 'JetBrains Mono', monospace;
    color: #00E1FF;
    margin-top: 10px;
    font-size: 1.2rem;
}

/* Typing Cursor Effect */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: currentColor;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}

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

/* Mobile Response */
@media (max-width: 900px) {
    .virtual-screen-frame {
        width: 95%;
        height: 600px;
        /* Taller for mobile content visibility */
    }
}

/* Virtual Dropdown */
.fake-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #161b22;
    border: 1px solid #30363d;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 50;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    /* Controlled by JS */
}

.dropdown-item {
    padding: 10px 12px;
    border-bottom: 1px solid #21262d;
    color: #8b949e;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item.hovered {
    background: #21262d;
    color: #c9d1d9;
}

.dropdown-item.selected-item {
    color: #00E1FF;
}

/* Click Touch Effect (Ripple/Flash) */
.click-active {
    transform: scale(0.95);
    filter: brightness(1.3);
    box-shadow: 0 0 10px rgba(0, 225, 255, 0.3);
}

.virtual-cursor.clicking {
    transform: scale(0.7);
}