:root {
    --bg-dark: #050505;
    --bg-card: #0A0A0A;
    --border-color: #333333;
    --text-primary: #EDEDED;
    --text-secondary: #888888;
    --accent-color: #00E1FF;
    /* Electric Cyan */
    --accent-glow: rgba(0, 225, 255, 0.15);
    --code-bg: #111111;
    --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-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    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: #0A0A0A;
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 40px rgba(0, 225, 255, 0.15);
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-color);
    letter-spacing: 1px;
}

.status-dot.blink {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-color);
    animation: blink-pulse 2s infinite;
}

@keyframes blink-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Form */
.telepath-form {
    padding: 32px;
}

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

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

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

.form-group label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.form-group input,
.form-group select {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    transition: all 0.2s;
    outline: none;
}

.form-group input::placeholder {
    color: #444;
}

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

/* Submit Button */
.btn-submit {
    width: 100%;
    background: var(--accent-color);
    color: #000;
    border: none;
    padding: 16px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.btn-submit:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 225, 255, 0.5);
}

.btn-submit:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

/* 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;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    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;
}

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

/* Navigation */
nav {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(12px);
    z-index: 100;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Increased gap for larger logo */
    font-weight: 700;
    font-size: 1.4rem;
}

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

.nav-logo {
    height: 56px;
    /* 64px might be a bit too tall for a standard nav, tweaked slightly or keep as is? Let's respect user's 64px logic but maybe control it via max-height if needed. Actually user set it to 64px. I will leave it at 64px in the user's edit, but here I am modifying a block. User edited lines 90+. I need to target the right lines. */
    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: var(--text-primary);
    color: var(--bg-dark);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

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

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

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

.hero-sub {
    font-size: 1.5rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.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(--accent-color);
    background: rgba(0, 225, 255, 0.05);
    padding: 6px 16px 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(0, 225, 255, 0.2);
    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 0;
    border-top: 1px solid var(--border-color);
    background: radial-gradient(circle at 50% 0%, #111 0%, transparent 70%);
}

.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;
}

/* Pricing Section */
.pricing-section {
    padding: 60px 0;
    background: var(--bg-dark);
    /* Contrast against bg-card above/below */
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.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);
}

.price {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 32px;
    font-family: var(--font-mono);
    letter-spacing: -1px;
}

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

.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;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}

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

.fine-print {
    font-size: 0.8rem;
    opacity: 0.6;
}

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

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

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

/* 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: 60px 0;
    background: radial-gradient(circle at 50% 50%, #15191f 0%, #060806 100%);
    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: 60px 0;
    background: #06080a;
    /* Deepest black/blue */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- 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;
}

/* 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(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Base border */
    border-radius: 16px;
    padding: 30px;
    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(-6px) scale(1.01);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    /* Remove transition delay on hover so it reacts instantly */
    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);
    -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: 2rem;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.bento-content h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.bento-content p {
    font-size: 0.95rem;
    color: #9ca3af;
    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: 60px 0;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 148, 0.05) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.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-left {
    transform: translateX(-40px);
}

.animate-right {
    transform: translateX(40px);
}

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

.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) --- */
.ecosystem-bridge {
    display: block;
    width: 80%;
    margin: 2rem auto 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.ecosystem-bridge .integration-logo {
    opacity: 0.4;
    transition: all 0.3s ease;
}

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

/* 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: 6rem;
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-cta-wrapper {
    display: flex;
    gap: 16px;
}

.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;
}

.section-heading-why {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.section-heading-visibility {
    margin-bottom: 1rem;
    color: #fff;
}

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

.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-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: flex-start;
    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;
}

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

.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;
}

.step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    /* Approximate height of cards */
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0.5;
}

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

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