/*
 * AINNA NeuralOps Ecosystem — Extracted Inline Styles
 * Extracted from index.php on 2026-06-27 during section refactor.
 */

.scrolling-section .scrolling-track {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.scrolling-section .scrolling-track:active {
    cursor: grabbing;
}

.scrolling-section .scroll-content {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 32px 8px;
    will-change: transform;
    animation: ainna-marquee-left 28s linear infinite;
}

.scrolling-section .scroll-content.paused,
.scrolling-section .scroll-content.marquee-js {
    animation: none !important;
}

.scrolling-section .scrolling-track.is-dragging {
    cursor: grabbing;
}

.scrolling-section .feature-card {
    flex-shrink: 0;
    min-width: 320px;
    max-width: 320px;
}

@media (min-width: 768px) {
    .scrolling-section .feature-card {
        min-width: 340px;
        max-width: 340px;
    }
}

@keyframes ainna-marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========================================
   NEURALOPS ARCHITECTURE SECTION
   ======================================== */

#architecture-scroll .section-header p:last-of-type {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
}

/* Hub-and-Spoke Vault Card */
.arch-hub-card {
    margin: 40px auto;
    max-width: 960px;
    border-radius: 24px;
    border: 1px solid var(--border-light);
    background:
        linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(245,245,247,0.85) 100%),
        var(--bg-primary);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 20px 60px rgba(0,0,0,0.08);
    overflow: hidden;
}

.arch-hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 22px;
    background: linear-gradient(90deg, rgba(255,122,26,0.08), rgba(255,122,26,0.02));
    border-bottom: 1px solid var(--border-light);
}

.arch-hub-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.arch-hub-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: #16a34a;
}

.arch-hub-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: vault-pulse 2s ease-in-out infinite;
}

.arch-hub-toolbar-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.arch-hub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.arch-hub-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 50px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
}

.arch-hub-chip-secure {
    background: rgba(255,122,26,0.1);
    border-color: rgba(255,122,26,0.28);
    color: var(--accent-primary);
}

.arch-hub-canvas {
    position: relative;
    min-height: 400px;
    padding: 28px 24px 20px;
}

.arch-hub-perimeter {
    position: absolute;
    inset: 16px;
    border: 2px dashed rgba(239,68,68,0.35);
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

.arch-hub-perimeter-label {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 50px;
    background: var(--bg-primary);
    border: 1px solid rgba(239,68,68,0.4);
    color: #dc2626;
    white-space: nowrap;
}

.arch-hub-svg {
    position: absolute;
    inset: 16px 12px 80px;
    width: calc(100% - 24px);
    height: calc(100% - 96px);
    z-index: 1;
    pointer-events: none;
}

.arch-hub-path {
    fill: none;
    stroke: url(#archVpnGrad);
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
    stroke-linecap: round;
    opacity: 0.75;
    animation: arch-path-flow 1.6s linear infinite;
}

@keyframes arch-path-flow {
    to { stroke-dashoffset: -28; }
}

.arch-hub-core {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: min(280px, 90%);
}

.arch-hub-core-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,122,26,0.25);
    pointer-events: none;
}

.arch-hub-core-ring-1 {
    width: 120%;
    height: 120%;
    animation: arch-ring-pulse 3s ease-in-out infinite;
}

.arch-hub-core-ring-2 {
    width: 145%;
    height: 145%;
    border-color: rgba(255,122,26,0.12);
    animation: arch-ring-pulse 3s ease-in-out infinite 0.8s;
}

@keyframes arch-ring-pulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

.arch-hub-core-inner {
    position: relative;
    text-align: center;
    padding: 24px 20px 20px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255,122,26,0.14), rgba(255,122,26,0.04)),
        var(--bg-primary);
    border: 2px solid rgba(255,122,26,0.45);
    box-shadow:
        0 0 40px rgba(255,122,26,0.15),
        0 12px 36px rgba(0,0,0,0.08);
}

.arch-hub-core-icon {
    font-size: 36px;
    margin-bottom: 8px;
    filter: drop-shadow(0 6px 14px rgba(255,122,26,0.3));
}

.arch-hub-core-label {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.arch-hub-core-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.arch-hub-core-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 50px;
    background: rgba(255,122,26,0.12);
    border: 1px solid rgba(255,122,26,0.3);
    color: var(--accent-primary);
}

.arch-hub-spokes {
    position: absolute;
    bottom: 6%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4%;
    z-index: 3;
}

.arch-hub-spoke {
    flex: 1;
    max-width: 200px;
    text-align: center;
    padding: 16px 12px 14px;
    border-radius: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.arch-hub-spoke:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md), 0 0 20px rgba(255,122,26,0.12);
}

.arch-hub-spoke-status {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #16a34a;
    margin-bottom: 8px;
}

.arch-hub-spoke-icon {
    font-size: 26px;
    margin-bottom: 6px;
}

.arch-hub-spoke-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.arch-hub-spoke-meta {
    font-size: 10px;
    color: var(--text-tertiary);
    line-height: 1.35;
}

.arch-hub-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.arch-hub-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.2px;
}

.arch-hub-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.arch-hub-legend-dot-hub {
    background: var(--gradient-accent);
    box-shadow: 0 0 8px rgba(255,122,26,0.5);
}

.arch-hub-legend-dot-vpn {
    background: #ff8a1d;
    box-shadow: 0 0 8px rgba(255,138,29,0.4);
}

.arch-hub-legend-dot-block {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.4);
}

/* Security Shield Tiles */
.arch-shield-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0 16px;
}

.arch-shield-tile {
    position: relative;
    display: flex;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arch-shield-tile:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md), 0 0 24px rgba(255,122,26,0.12);
    transform: translateY(-3px);
}

.arch-shield-bar {
    width: 4px;
    flex-shrink: 0;
    background: var(--gradient-accent);
}

.arch-shield-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    flex: 1;
}

.arch-shield-icon-ring {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,122,26,0.1), rgba(255,122,26,0.03));
    border: 1px solid rgba(255,122,26,0.18);
}

.arch-shield-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.arch-shield-content strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.arch-shield-content span {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.35;
}

/* Vault Cards — Super-Secured Service Model */
.scrolling-section .arch-vault-card {
    flex-shrink: 0;
    min-width: 300px;
    max-width: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
    border-radius: 20px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.95) 0%, rgba(245,245,247,0.8) 100%),
        var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 16px 48px rgba(0,0,0,0.07);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.scrolling-section .arch-vault-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255,122,26,0.6), transparent 50%, rgba(255,122,26,0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.scrolling-section .arch-vault-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 24px 64px rgba(255,122,26,0.16),
        0 8px 24px rgba(0,0,0,0.08);
}

.scrolling-section .arch-vault-card:hover::before {
    opacity: 1;
}

.arch-vault-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.arch-vault-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(255,122,26,0.08);
    border: 1px solid rgba(255,122,26,0.2);
    color: var(--accent-primary);
}

.arch-vault-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: vault-pulse 2s ease-in-out infinite;
}

.arch-vault-deny .arch-vault-status {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.25);
    color: #dc2626;
}

.arch-vault-deny .arch-vault-dot {
    background: #ef4444;
}

.arch-vault-locked .arch-vault-status {
    background: rgba(234,179,8,0.1);
    border-color: rgba(234,179,8,0.3);
    color: #b45309;
}

.arch-vault-locked .arch-vault-dot {
    background: #eab308;
}

.arch-vault-index {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

.arch-vault-icon-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,122,26,0.12), rgba(255,122,26,0.04));
    border: 1px solid rgba(255,122,26,0.15);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
}

.arch-vault-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 12px;
    background: var(--bg-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 0;
}

.arch-vault-icon {
    font-size: 24px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(255,122,26,0.2));
}

.arch-vault-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
    padding-left: 10px;
    border-left: 3px solid var(--accent-primary);
}

.arch-vault-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}

.arch-vault-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.arch-vault-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
}

@keyframes vault-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Data Sovereignty Flow */
.data-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px auto;
    max-width: 900px;
    flex-wrap: wrap;
}

.data-flow-step {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    text-align: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 28px 20px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.data-flow-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
}

.data-flow-step-accent {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea08, #764ba208);
}

.data-flow-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.data-flow-step h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.data-flow-step p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.data-flow-arrow {
    font-size: 28px;
    color: var(--accent-primary);
    font-weight: 700;
    flex-shrink: 0;
}

/* Hero Security Badge */
.hero-security-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(102,126,234,0.12);
    border: 1px solid rgba(102,126,234,0.3);
    border-radius: 50px;
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

/* Dark Mode — Hub Card */
[data-theme="dark"] .arch-hub-card {
    background:
        linear-gradient(160deg, rgba(29,18,9,0.97) 0%, rgba(7,5,3,0.9) 100%),
        var(--bg-primary);
    border-color: rgba(255,122,26,0.22);
    box-shadow:
        0 1px 0 rgba(255,184,107,0.08) inset,
        0 24px 70px rgba(0,0,0,0.55),
        0 0 50px rgba(255,122,26,0.08);
}

[data-theme="dark"] .arch-hub-toolbar {
    background: linear-gradient(90deg, rgba(255,122,26,0.14), rgba(255,122,26,0.03));
    border-bottom-color: rgba(255,122,26,0.18);
}

[data-theme="dark"] .arch-hub-live {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.35);
    color: #4ade80;
}

[data-theme="dark"] .arch-hub-chip {
    background: rgba(255,122,26,0.06);
    border-color: rgba(255,122,26,0.18);
    color: #f3c49d;
}

[data-theme="dark"] .arch-hub-perimeter {
    border-color: rgba(239,68,68,0.45);
}

[data-theme="dark"] .arch-hub-perimeter-label {
    background: rgba(18,12,7,0.95);
    border-color: rgba(239,68,68,0.5);
    color: #fca5a5;
}

[data-theme="dark"] .arch-hub-core-inner {
    background:
        linear-gradient(145deg, rgba(255,122,26,0.2), rgba(255,122,26,0.06)),
        rgba(18,12,7,0.95);
    border-color: rgba(255,122,26,0.55);
    box-shadow:
        0 0 50px rgba(255,122,26,0.2),
        0 16px 48px rgba(0,0,0,0.5);
}

[data-theme="dark"] .arch-hub-spoke {
    background: rgba(18,12,7,0.9);
    border-color: rgba(255,122,26,0.18);
}

[data-theme="dark"] .arch-hub-spoke:hover {
    border-color: rgba(255,122,26,0.5);
    box-shadow: 0 0 28px rgba(255,122,26,0.15);
}

[data-theme="dark"] .arch-hub-legend {
    background: rgba(12,8,5,0.8);
    border-top-color: rgba(255,122,26,0.15);
}

[data-theme="dark"] .arch-shield-tile {
    background: rgba(18,12,7,0.9);
    border-color: rgba(255,122,26,0.18);
}

[data-theme="dark"] .arch-shield-icon-ring {
    background: linear-gradient(135deg, rgba(255,122,26,0.18), rgba(255,122,26,0.06));
    border-color: rgba(255,122,26,0.28);
}

[data-theme="dark"] .data-flow-step {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.15);
}

[data-theme="dark"] .data-flow-step-accent {
    border-color: #00ffff;
}

[data-theme="dark"] .hero-security-badge {
    background: rgba(0,255,255,0.1);
    border-color: rgba(0,255,255,0.3);
    color: #00ffff;
}

[data-theme="dark"] .scrolling-section .arch-vault-card {
    background:
        linear-gradient(160deg, rgba(29,18,9,0.95) 0%, rgba(7,5,3,0.88) 100%),
        var(--bg-primary);
    border-color: rgba(255,122,26,0.2);
    box-shadow:
        0 1px 0 rgba(255,184,107,0.1) inset,
        0 18px 56px rgba(0,0,0,0.5);
}

[data-theme="dark"] .scrolling-section .arch-vault-card:hover {
    border-color: rgba(255,122,26,0.5);
    box-shadow:
        0 1px 0 rgba(255,184,107,0.15) inset,
        0 28px 72px rgba(0,0,0,0.6),
        0 0 48px rgba(255,122,26,0.15);
}

[data-theme="dark"] .arch-vault-icon-wrap::before {
    background: rgba(18,12,7,0.95);
}

[data-theme="dark"] .arch-vault-tag {
    background: rgba(255,122,26,0.08);
    border-color: rgba(255,122,26,0.2);
    color: #f3c49d;
}

[data-theme="dark"] .arch-vault-deny .arch-vault-status {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
}

[data-theme="dark"] .arch-vault-locked .arch-vault-status {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.3);
    color: #fde047;
}

/* Responsive */
@media (max-width: 768px) {
    .arch-shield-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .arch-hub-canvas {
        min-height: 520px;
        padding: 24px 12px 16px;
    }

    .arch-hub-core {
        top: 4%;
        width: min(260px, 88%);
    }

    .arch-hub-core-inner {
        padding: 18px 14px 16px;
    }

    .arch-hub-core-icon {
        font-size: 30px;
    }

    .arch-hub-core-label {
        font-size: 14px;
    }

    .arch-hub-spokes {
        bottom: 4%;
        padding: 0 2%;
        gap: 8px;
    }

    .arch-hub-spoke {
        padding: 12px 8px 10px;
        max-width: none;
    }

    .arch-hub-spoke-icon {
        font-size: 22px;
    }

    .arch-hub-spoke-label {
        font-size: 11px;
    }

    .arch-hub-spoke-meta,
    .arch-hub-spoke-status {
        font-size: 9px;
    }

    .arch-hub-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .arch-hub-legend {
        gap: 12px;
        padding: 12px 16px 14px;
    }

    .data-flow {
        flex-direction: column;
    }
    .data-flow-arrow {
        transform: rotate(90deg);
    }
    .data-flow-step {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .arch-shield-grid {
        grid-template-columns: 1fr;
    }

    .arch-hub-canvas {
        min-height: 580px;
    }

    .arch-hub-svg {
        opacity: 0.5;
    }

    .arch-hub-spokes {
        flex-direction: column;
        align-items: center;
        bottom: 2%;
        gap: 10px;
    }

    .arch-hub-spoke {
        width: 100%;
        max-width: 220px;
    }

    .arch-hub-legend {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .scrolling-section .arch-vault-card {
        min-width: 280px;
        max-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scrolling-section .scroll-content {
        animation: none;
        overflow-x: auto;
        max-width: 100%;
    }
    .scrolling-section .scrolling-track {
        overflow-x: auto;
    }
    .arch-hub-path {
        animation: none;
    }
    .arch-hub-core-ring-1,
    .arch-hub-core-ring-2 {
        animation: none;
    }
    .arch-hub-packet {
        display: none;
    }
}

/* ========================================
   PRICING TABLE
   ======================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
    margin: 0 auto;
    max-width: 1100px;
}

.pricing-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 36px 28px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.pricing-card-featured {
    border: 2px solid var(--accent-primary);
    transform: scale(1.04);
    z-index: 2;
}

.pricing-card-featured:hover {
    transform: scale(1.04) translateY(-6px);
}

.pricing-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--bg-secondary);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    align-self: flex-start;
}

.pricing-badge-featured {
    background: var(--gradient-accent);
    color: #ffffff;
}

.pricing-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1;
}

.pricing-amount .currency {
    font-size: 22px;
    font-weight: 700;
    vertical-align: super;
    margin-right: 2px;
}

.pricing-amount .period {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-tertiary);
    vertical-align: baseline;
    margin-left: 4px;
}

.pricing-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex-grow: 1;
}

.pricing-features li {
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    line-height: 1.5;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-btn {
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    font-size: 16px;
    box-sizing: border-box;
}

[data-theme="dark"] .pricing-card {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.15);
}

[data-theme="dark"] .pricing-card-featured {
    border-color: #00ffff;
}

[data-theme="dark"] .pricing-badge {
    background: rgba(0,255,255,0.1);
    color: #00ffff;
}

/* ========================================
   HOW IT WORKS
   ======================================== */

.hiw-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.hiw-step {
    flex: 1;
    text-align: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 36px 24px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
}

.hiw-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
}

.hiw-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: var(--gradient-accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

.hiw-icon {
    font-size: 48px;
    margin-bottom: 16px;
    margin-top: 8px;
}

.hiw-step h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.hiw-step p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.hiw-connector {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    width: 40px;
}

.hiw-connector-arrow {
    font-size: 28px;
    color: var(--accent-primary);
    font-weight: 700;
}

.hiw-timeline {
    text-align: center;
    margin-top: 32px;
}

.hiw-timeline-badge {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.2);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
}

[data-theme="dark"] .hiw-step {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.15);
}

[data-theme="dark"] .hiw-timeline-badge {
    background: rgba(0,255,255,0.08);
    border-color: rgba(0,255,255,0.2);
    color: #00ffff;
}

/* ========================================
   USE CASES
   ======================================== */

.usecases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.usecase-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.usecase-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.usecase-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

.usecase-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.usecase-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

[data-theme="dark"] .usecase-card {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.15);
}

/* ========================================
   HERO TRUST BADGES
   ======================================== */

.hero-trust-badges {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.hero-trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.15);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

[data-theme="dark"] .hero-trust-badges span {
    background: rgba(0,255,255,0.08);
    border-color: rgba(0,255,255,0.2);
    color: var(--text-primary);
}

/* ========================================
   RESPONSIVE — NEW SECTIONS
   ======================================== */

@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .pricing-card-featured {
        transform: none;
    }
    .pricing-card-featured:hover {
        transform: translateY(-6px);
    }
    .usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hiw-grid {
        flex-direction: column;
    }
    .hiw-connector {
        transform: rotate(90deg);
        padding: 8px 0;
        width: auto;
    }
    .usecases-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* ========================================
   DATA SOVEREIGNTY SECTION
   ======================================== */

.sovereignty-animated-flow {
    position: relative;
    max-width: 900px;
    margin: 0 auto 60px;
}

.sovereignty-flow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
}

.sovereignty-node {
    flex: 1;
    max-width: 240px;
    text-align: center;
    padding: 28px 20px;
    border-radius: 20px;
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.sovereignty-node:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.sov-node-vps {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea12, #764ba212);
}

.sov-node-llm {
    border-color: #764ba2;
    background: linear-gradient(135deg, #764ba212, #667eea12);
}

.sov-node-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 22px;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.sov-node-vps .sov-node-glow {
    box-shadow: 0 0 30px rgba(102,126,234,0.3);
    animation: glow-pulse 3s ease-in-out infinite;
}

.sov-node-llm .sov-node-glow {
    box-shadow: 0 0 30px rgba(118,75,162,0.3);
    animation: glow-pulse 3s ease-in-out infinite 1.5s;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.3; }
}

.sov-node-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.sov-node-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.sov-node-detail {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.sov-node-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.sov-node-vps .sov-node-badge {
    background: rgba(102,126,234,0.15);
    color: #667eea;
}

.sov-node-llm .sov-node-badge {
    background: rgba(118,75,162,0.15);
    color: #764ba2;
}

/* Animated Tunnel */
.sovereignty-tunnel {
    flex-shrink: 0;
    width: 100px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sov-tunnel-bg {
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, #667eea33, #764ba233);
    border-radius: 40px;
    border: 2px dashed rgba(102,126,234,0.4);
    position: relative;
    overflow: hidden;
}

.sov-tunnel-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,255,255,0.1), transparent);
    animation: tunnel-scan 3s linear infinite;
}

@keyframes tunnel-scan {
    0% { left: -100%; }
    100% { left: 200%; }
}

.sov-tunnel-label {
    position: absolute;
    bottom: -18px;
    font-size: 10px;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Animated packets in sovereignty tunnel */
.sov-packet {
    position: absolute;
    font-size: 16px;
    animation: sov-packet-move 4s ease-in-out infinite;
    z-index: 5;
}

.sov-packet-1 { top: 10%; animation-delay: 0s; }
.sov-packet-2 { top: 40%; animation-delay: 1.5s; }
.sov-packet-3 { top: 70%; animation-delay: 3s; }

@keyframes sov-packet-move {
    0% { transform: translateX(-30px); opacity: 0; }
    15% { opacity: 1; }
    50% { transform: translateX(0px); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(30px); opacity: 0; }
}

/* Public barrier */
.sov-public-barrier {
    position: absolute;
    top: 0;
    right: -50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.4;
    z-index: 1;
}

.sov-barrier-line {
    width: 2px;
    flex: 1;
    background: #ef4444;
}

.sov-barrier-text {
    font-size: 10px;
    color: #ef4444;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Sovereignty steps */
.sovereignty-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
}

.sov-step {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.sov-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.sov-step-num {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sov-step h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.sov-step p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Deep dive grid */
.sov-deep-dive {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-light);
}

.sov-deep-dive h3 {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 32px;
    color: var(--text-primary);
}

.sov-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sov-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.sov-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.sov-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.sov-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.sov-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

[data-theme="dark"] .sovereignty-flow-container {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.2);
}

[data-theme="dark"] .sov-node-vps {
    background: rgba(0,255,255,0.08);
    border-color: #00ffff;
}

[data-theme="dark"] .sov-node-llm {
    background: rgba(255,0,255,0.08);
    border-color: #ff00ff;
}

[data-theme="dark"] .sov-tunnel-bg {
    background: linear-gradient(90deg, rgba(0,255,255,0.15), rgba(255,0,255,0.15));
    border-color: rgba(0,255,255,0.3);
}

[data-theme="dark"] .sov-step,
[data-theme="dark"] .sov-card {
    background: rgba(22,22,31,0.8);
    border-color: rgba(0,255,255,0.15);
}

[data-theme="dark"] .sov-node-badge {
    background: rgba(0,255,255,0.1);
    color: #00ffff;
}

/* ========================================
   COMPARISON TABLE
   ======================================== */

.comparison-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    margin: 0 auto 60px;
    max-width: 1100px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.comparison-swipe-hint {
    display: none;
    position: sticky;
    left: 0;
    padding: 10px 14px;
    background: rgba(255,122,26,0.08);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.comparison-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--bg-primary);
    table-layout: auto;
}

.comparison-table thead {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.comparison-table thead th {
    padding: 16px 16px;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-right: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}

.comparison-table thead th:last-child {
    border-right: none;
}

.comparison-table thead th.col-best {
    background: linear-gradient(135deg, #00bfa5, #00e676);
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

.comparison-table tbody tr:hover {
    background: rgba(102,126,234,0.04);
}

.comparison-table tbody td {
    padding: 14px 16px;
    color: var(--text-primary);
    vertical-align: middle;
    border-right: 1px solid var(--border-light);
    white-space: nowrap;
}

.comparison-table tbody td:last-child {
    border-right: none;
}

.comparison-table tbody td.comp-feature {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.col-best {
    background: rgba(0,191,165,0.06);
}

.check-yes {
    color: #00bfa5;
    font-weight: 600;
}

.check-no {
    color: #ef4444;
    font-weight: 500;
}

.check-warn {
    color: #f59e0b;
    font-weight: 500;
}

[data-theme="dark"] .comparison-table {
    background: rgba(22,22,31,0.8);
}

[data-theme="dark"] .comparison-table tbody tr:hover {
    background: rgba(0,255,255,0.04);
}

[data-theme="dark"] .comparison-table thead th.col-best {
    background: linear-gradient(135deg, #00897b, #00bfa5);
}

/* ========================================
   SECURITY LAYERS (Onion Diagram)
   ======================================== */

.security-layers {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}

.security-layers h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 32px;
    color: var(--text-primary);
}

.security-layers-intro {
    max-width: 680px;
    margin: -18px auto 30px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.security-chart {
    position: relative;
    width: min(760px, 100%);
    aspect-ratio: 1 / 0.72;
    margin: 0 auto 28px;
    border-radius: 34px;
    background:
        radial-gradient(circle at center, rgba(255,122,26,0.18), transparent 19%),
        radial-gradient(circle at 18% 16%, rgba(255,184,107,0.16), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(245,245,247,0.78));
    border: 1px solid rgba(210,210,215,0.9);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 28px 90px rgba(0,0,0,0.1);
    overflow: hidden;
}

.security-chart::before {
    content: '';
    position: absolute;
    inset: 28px;
    border-radius: 28px;
    background-image:
        linear-gradient(rgba(255,122,26,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,122,26,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at center, black, transparent 70%);
    pointer-events: none;
}

.security-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255,122,26,0.26);
    border-radius: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: radial-gradient(circle, transparent 62%, rgba(255,122,26,0.035));
}

.security-ring span {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,122,26,0.18);
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
    white-space: nowrap;
}

.ring-outer { width: 88%; height: 92%; animation: ring-pulse 4.8s ease-in-out infinite; }
.ring-6 { width: 76%; height: 78%; animation: ring-pulse 4.8s ease-in-out infinite 0.4s; }
.ring-5 { width: 64%; height: 64%; border-color: rgba(255,122,26,0.5); animation: ring-pulse 4.8s ease-in-out infinite 0.8s; }
.ring-4 { width: 52%; height: 50%; animation: ring-pulse 4.8s ease-in-out infinite 1.2s; }
.ring-3 { width: 40%; height: 38%; animation: ring-pulse 4.8s ease-in-out infinite 1.6s; }
.ring-2 { width: 28%; height: 26%; animation: ring-pulse 4.8s ease-in-out infinite 2s; }

@keyframes ring-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,122,26,0); }
    50% { box-shadow: 0 0 28px rgba(255,122,26,0.16); }
}

.security-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 138px;
    height: 138px;
    border-radius: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    background: linear-gradient(135deg, #ff8a1d, #d9480f);
    color: #fff;
    box-shadow:
        0 22px 60px rgba(255,122,26,0.35),
        inset 0 1px 0 rgba(255,255,255,0.24);
    z-index: 8;
}

.security-core .core-icon {
    font-size: 34px;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.18));
}

.security-core strong {
    font-size: 15px;
    font-weight: 900;
}

.security-core span {
    font-size: 11px;
    opacity: 0.9;
}

.security-node {
    position: absolute;
    z-index: 10;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(210,210,215,0.9);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    box-shadow: 0 16px 45px rgba(0,0,0,0.1);
    backdrop-filter: blur(18px);
}

.security-node small {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
}

.security-node-public {
    left: 6%;
    top: 12%;
    border-color: rgba(239,68,68,0.28);
    background: rgba(254,242,242,0.88);
}

.security-node-vps {
    right: 6%;
    top: 20%;
    border-color: rgba(255,122,26,0.32);
}

.security-node-agent {
    right: 12%;
    bottom: 13%;
    border-color: rgba(34,197,94,0.26);
}

.security-chart-legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.security-chart-legend div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 34px rgba(0,0,0,0.06);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-blocked { background: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.45); }
.dot-allowed { background: #ff7a1a; box-shadow: 0 0 14px rgba(255,122,26,0.45); }
.dot-core { background: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.45); }

[data-theme="dark"] .security-chart {
    background:
        radial-gradient(circle at center, rgba(255,122,26,0.22), transparent 20%),
        radial-gradient(circle at 20% 14%, rgba(255,184,107,0.12), transparent 28%),
        linear-gradient(145deg, rgba(29,18,9,0.92), rgba(7,5,3,0.84));
    border-color: rgba(255,122,26,0.26);
    box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 50px rgba(255,122,26,0.09);
}

[data-theme="dark"] .security-ring {
    border-color: rgba(255,122,26,0.36);
}

[data-theme="dark"] .ring-5 {
    border-color: rgba(255,184,107,0.62);
}

[data-theme="dark"] .security-ring span,
[data-theme="dark"] .security-node,
[data-theme="dark"] .security-chart-legend div {
    background: rgba(18,12,7,0.8);
    border-color: rgba(255,122,26,0.24);
    color: var(--text-primary);
}

[data-theme="dark"] .security-node-public {
    background: rgba(69,10,10,0.72);
    border-color: rgba(239,68,68,0.36);
}

[data-theme="dark"] .security-node small,
[data-theme="dark"] .security-chart-legend div {
    color: var(--text-secondary);
}

.layers-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}

.layer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 14px;
    width: 100%;
    max-width: 650px;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
}

.layer:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.layer-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.layer-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.layer-content strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.layer-content span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Layer colors - inner to outer (reversed in flex) */
.layer-1 { background: #1a1a2e; border-color: #16213e; width: 40%; max-width: 260px; }
.layer-2 { background: #1a1a2eee; border-color: #0f3460; width: 50%; max-width: 325px; }
.layer-3 { background: #1a1a2edd; border-color: #533483; width: 60%; max-width: 390px; }
.layer-4 { background: #1a1a2ecc; border-color: #e94560; width: 70%; max-width: 455px; }
.layer-5 { background: #1a1a2ebb; border-color: #f5a623; width: 80%; max-width: 520px; }
.layer-6 { background: #1a1a2eaa; border-color: #00bfa5; width: 90%; max-width: 585px; }
.layer-7 { background: #1a1a2e99; border-color: #667eea; width: 100%; max-width: 650px; }

[data-theme="dark"] .layer {
    background: rgba(22,22,31,0.6) !important;
    border-color: rgba(0,255,255,0.3) !important;
}

[data-theme="dark"] .layer-1 { background: rgba(22,22,31,0.9) !important; border-color: #00ffff44 !important; }
[data-theme="dark"] .layer-2 { background: rgba(22,22,31,0.85) !important; border-color: #00ffff55 !important; }
[data-theme="dark"] .layer-3 { background: rgba(22,22,31,0.8) !important; border-color: #00ffff66 !important; }
[data-theme="dark"] .layer-4 { background: rgba(22,22,31,0.75) !important; border-color: #00ffff77 !important; }
[data-theme="dark"] .layer-5 { background: rgba(22,22,31,0.7) !important; border-color: #00ffff88 !important; }
[data-theme="dark"] .layer-6 { background: rgba(22,22,31,0.65) !important; border-color: #00ffff99 !important; }
[data-theme="dark"] .layer-7 { background: rgba(22,22,31,0.6) !important; border-color: #00ffffaa !important; }

/* ========================================
   RESPONSIVE — NEW SECTIONS (v2)
   ======================================== */

@media (max-width: 992px) {
    .sovereignty-flow-container {
        flex-direction: column;
        padding: 30px 16px;
    }
    .sovereignty-tunnel {
        width: 100%;
        height: 60px;
    }
    .sov-tunnel-bg {
        height: 30px;
    }
    .sov-packet {
        font-size: 14px;
    }
    @keyframes sov-packet-move {
        0% { transform: translateY(-20px); opacity: 0; }
        15% { opacity: 1; }
        50% { transform: translateY(0px); opacity: 1; }
        85% { opacity: 1; }
        100% { transform: translateY(20px); opacity: 0; }
    }
    .sov-public-barrier {
        display: none;
    }
    .sovereignty-steps {
        grid-template-columns: 1fr;
    }
    .sov-grid {
        grid-template-columns: 1fr;
    }
    .security-layers h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .sov-grid {
        grid-template-columns: 1fr;
    }
    .comparison-table-wrapper {
        max-width: calc(100vw - 32px);
        border-radius: 14px;
    }
    .comparison-swipe-hint {
        display: block;
    }
    .comparison-table {
        font-size: 12px;
        width: max-content;
        min-width: 860px;
        display: table;
    }
    .comparison-table thead {
        display: table-header-group;
    }
    .comparison-table tbody {
        display: table-row-group;
    }
    .comparison-table tr {
        display: table-row;
    }
    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 10px 10px;
        display: table-cell;
        float: none;
        clear: none;
        width: auto;
        text-align: left;
        vertical-align: middle;
    }
}

/* ========================================
   NEURALOPS2 REVAMP — ORANGE/BLACK + 3D CARDS
   ======================================== */

.ainna-ai-page {
    background:
        radial-gradient(circle at top left, rgba(255,122,26,0.06), transparent 32%),
        radial-gradient(circle at bottom right, rgba(29,29,31,0.05), transparent 35%),
        var(--bg-primary);
}

.hero {
    isolation: isolate;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.72), rgba(255,255,255,0.2)),
        radial-gradient(circle at 72% 32%, rgba(255,122,26,0.18), transparent 28%);
    z-index: 0;
    pointer-events: none;
}

[data-theme="dark"] .hero::after {
    background:
        radial-gradient(circle at 28% 22%, rgba(255,122,26,0.28), transparent 30%),
        radial-gradient(circle at 80% 75%, rgba(255,184,107,0.14), transparent 34%),
        linear-gradient(135deg, rgba(7,5,3,0.72), rgba(29,18,9,0.92));
}

.hero-content {
    max-width: 1020px;
    transform-style: preserve-3d;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,122,26,0.25);
    border-radius: 999px;
    background: rgba(255,255,255,0.62);
    color: #d9480f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
    backdrop-filter: blur(18px);
}

.hero-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff7a1a;
    box-shadow: 0 0 16px rgba(255,122,26,0.9);
    animation: hero-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
}

.hero-title {
    font-size: clamp(46px, 7vw, 86px);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #1d1d1f 0%, #4a4a4f 42%, #ff7a1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, #fff7ed 0%, #ffb86b 45%, #ff5a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 28px rgba(255,122,26,0.2));
}

.hero-subtitle {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(18px, 2.2vw, 25px);
    color: var(--text-secondary);
}

.hero-description {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.hero-vpn-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 28px auto 8px;
    padding: 14px;
    border: 1px solid rgba(255,122,26,0.25);
    border-radius: 24px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 24px 70px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
}

.hero-vpn-strip span,
.hero-vpn-strip strong,
.hero-vpn-strip em {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
}

.hero-vpn-strip span {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #e5e5ea;
}

.hero-vpn-strip strong {
    background: linear-gradient(135deg, #ff8a1d, #ff5a00);
    color: #fff;
    box-shadow: 0 10px 28px rgba(255,122,26,0.25);
}

.hero-vpn-strip em {
    background: rgba(239,68,68,0.09);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,0.22);
}

[data-theme="dark"] .hero-kicker,
[data-theme="dark"] .hero-vpn-strip {
    background: rgba(18,12,7,0.72);
    border-color: rgba(255,122,26,0.35);
    box-shadow: 0 28px 80px rgba(255,90,0,0.16), inset 0 1px 0 rgba(255,184,107,0.12);
}

[data-theme="dark"] .hero-vpn-strip span {
    background: rgba(255,247,237,0.08);
    color: #fff7ed;
    border-color: rgba(255,184,107,0.2);
}

[data-theme="dark"] .hero-vpn-strip em {
    background: rgba(255,90,0,0.12);
    color: #ffb86b;
    border-color: rgba(255,122,26,0.35);
}

/* Premium 3D card system */
.feature-card,
.pricing-card,
.hiw-step,
.arch-hub-card,
.arch-shield-tile,
.arch-vault-card,
.data-flow-step,
.usecase-card,
.sov-step,
.sov-card,
.sovereignty-flow-container,
.comparison-table-wrapper,
.layer {
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}

.feature-card,
.pricing-card,
.hiw-step,
.usecase-card,
.sov-step,
.sov-card,
.data-flow-step {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(245,245,247,0.72)),
        var(--bg-primary);
    border-color: rgba(210,210,215,0.9);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.88) inset,
        0 18px 55px rgba(0,0,0,0.08);
}

.feature-card:hover,
.pricing-card:hover,
.hiw-step:hover,
.usecase-card:hover,
.sov-step:hover,
.sov-card:hover,
.data-flow-step:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.92) inset,
        0 26px 80px rgba(255,122,26,0.18),
        0 12px 34px rgba(0,0,0,0.1);
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .hiw-step,
[data-theme="dark"] .usecase-card,
[data-theme="dark"] .sov-step,
[data-theme="dark"] .sov-card,
[data-theme="dark"] .data-flow-step,
[data-theme="dark"] .arch-hub-card,
[data-theme="dark"] .sovereignty-flow-container,
[data-theme="dark"] .comparison-table-wrapper {
    background:
        linear-gradient(145deg, rgba(29,18,9,0.92), rgba(7,5,3,0.84)),
        var(--bg-primary);
    border-color: rgba(255,122,26,0.22);
    box-shadow:
        0 1px 0 rgba(255,184,107,0.12) inset,
        0 22px 70px rgba(0,0,0,0.48),
        0 0 46px rgba(255,122,26,0.08);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .pricing-card:hover,
[data-theme="dark"] .hiw-step:hover,
[data-theme="dark"] .usecase-card:hover,
[data-theme="dark"] .sov-step:hover,
[data-theme="dark"] .sov-card:hover,
[data-theme="dark"] .data-flow-step:hover {
    border-color: rgba(255,122,26,0.55);
    box-shadow:
        0 1px 0 rgba(255,184,107,0.18) inset,
        0 28px 80px rgba(0,0,0,0.6),
        0 0 58px rgba(255,122,26,0.18);
}

/* Orange/black overrides for older cyan dark-mode blocks */
[data-theme="dark"] .arch-hub-core-inner,
[data-theme="dark"] .data-flow-step-accent,
[data-theme="dark"] .pricing-card-featured,
[data-theme="dark"] .sov-node-vps,
[data-theme="dark"] .sov-node-llm,
[data-theme="dark"] .layer {
    border-color: rgba(255,122,26,0.58) !important;
}

[data-theme="dark"] .arch-hub-path,
[data-theme="dark"] .sov-barrier-line {
    box-shadow: 0 0 22px rgba(255,122,26,0.42);
}

[data-theme="dark"] .sov-tunnel-label,
[data-theme="dark"] .section-tag,
[data-theme="dark"] .hero-security-badge,
[data-theme="dark"] .hiw-timeline-badge {
    color: #ffb86b !important;
}

[data-theme="dark"] .hero-security-badge,
[data-theme="dark"] .hiw-timeline-badge,
[data-theme="dark"] .hero-trust-badges span {
    background: rgba(255,122,26,0.11) !important;
    border-color: rgba(255,122,26,0.32) !important;
}

[data-theme="dark"] .sov-tunnel-bg {
    background: linear-gradient(90deg, rgba(255,122,26,0.22), rgba(255,184,107,0.1)) !important;
    border-color: rgba(255,122,26,0.44) !important;
}

[data-theme="dark"] .comparison-table thead,
[data-theme="dark"] .comparison-table thead th.col-best {
    background: linear-gradient(135deg, #ff8a1d, #d9480f) !important;
}

/* Auto scroller polish: looping, swipeable, premium fade edges */
.scrolling-section .scrolling-track {
    position: relative;
    touch-action: pan-x;
    user-select: none;
    cursor: grab;
}

.scrolling-section .scrolling-track::before,
.scrolling-section .scrolling-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(12vw, 120px);
    z-index: 3;
    pointer-events: none;
}

.scrolling-section .scrolling-track::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-primary), transparent);
}

.scrolling-section .scrolling-track::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-primary), transparent);
}

.scrolling-section .scroll-content {
    animation-duration: 36s;
}

.scrolling-section .feature-card {
    border-radius: 26px;
}

.scrolling-section .feature-card .feature-icon {
    filter: drop-shadow(0 12px 22px rgba(255,122,26,0.16));
}

/* Sovereignty expanded flow: user -> VPS -> VPN -> vLLM */
.sovereignty-flow-container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.sovereignty-link {
    flex-shrink: 0;
    width: 86px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sov-node-user {
    border-color: rgba(29,29,31,0.16);
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,245,247,0.76));
}

.sov-node-user .sov-node-badge {
    background: rgba(29,29,31,0.06);
    color: #1d1d1f;
}

.sov-link-public .sov-tunnel-bg {
    background: linear-gradient(90deg, rgba(29,29,31,0.08), rgba(255,122,26,0.1));
    border-color: rgba(29,29,31,0.16);
}

.sov-link-vpn .sov-tunnel-bg {
    box-shadow: 0 0 34px rgba(255,122,26,0.18);
}

[data-theme="dark"] .sov-node-user {
    background: linear-gradient(135deg, rgba(255,247,237,0.07), rgba(255,122,26,0.06)) !important;
    border-color: rgba(255,184,107,0.2);
}

[data-theme="dark"] .sov-node-user .sov-node-badge {
    background: rgba(255,184,107,0.1);
    color: #ffb86b;
}

@media (max-width: 992px) {
    .hero-vpn-strip {
        gap: 8px;
    }
    .sovereignty-link {
        width: 100%;
        height: 58px;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 42px;
        letter-spacing: -0.04em;
    }
    .hero-vpn-strip span,
    .hero-vpn-strip strong,
    .hero-vpn-strip em {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .security-chart {
        aspect-ratio: auto;
        min-height: 720px;
        border-radius: 24px;
        padding: 22px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
    }
    .security-chart::before {
        inset: 12px;
        border-radius: 20px;
    }
    .security-ring,
    .security-core,
    .security-node {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        height: auto;
        min-height: 58px;
        border-radius: 18px;
        z-index: 2;
    }
    .security-ring {
        justify-content: flex-start;
        align-items: center;
        padding: 12px 14px;
        background: rgba(255,122,26,0.05);
        animation: none;
    }
    .security-ring span {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .security-core {
        order: 8;
        width: 100%;
        min-height: 90px;
        border-radius: 22px;
    }
    .security-node-public { order: 1; }
    .ring-outer { order: 2; }
    .ring-6 { order: 3; }
    .ring-5 { order: 4; }
    .ring-4 { order: 5; }
    .ring-3 { order: 6; }
    .ring-2 { order: 7; }
    .security-node-vps { order: 9; }
    .security-node-agent { order: 10; }
    .security-chart-legend {
        grid-template-columns: 1fr;
    }
}

/* Fix shared theme mobile rule that rotates all tables globally. */
@media (max-width: 768px) {
    #comparison-scroll .comparison-table-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: calc(100vw - 32px) !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }

    #comparison-scroll table.comparison-table,
    #comparison-scroll .comparison-table,
    #comparison-scroll table[class*="table"].comparison-table {
        display: table !important;
        transform: none !important;
        transform-origin: initial !important;
        rotate: none !important;
        width: max-content !important;
        min-width: 860px !important;
        max-width: none !important;
        margin: 0 !important;
        table-layout: auto !important;
    }

    #comparison-scroll .comparison-table thead {
        display: table-header-group !important;
    }

    #comparison-scroll .comparison-table tbody {
        display: table-row-group !important;
    }

    #comparison-scroll .comparison-table tr {
        display: table-row !important;
        transform: none !important;
    }

    #comparison-scroll .comparison-table th,
    #comparison-scroll .comparison-table td {
        display: table-cell !important;
        width: auto !important;
        min-width: 120px !important;
        float: none !important;
        clear: none !important;
        transform: none !important;
        white-space: nowrap !important;
        text-align: left !important;
        vertical-align: middle !important;
    }

    #comparison-scroll .comparison-table th:first-child,
    #comparison-scroll .comparison-table td:first-child {
        min-width: 210px !important;
    }
}

/* Top nav — day/night toggle in menu bar (override legacy fixed .theme-toggle) */
.ainna-ai-page .desktop-nav .ainna-theme-switch.theme-toggle,
.ainna-ai-page .desktop-nav .nav-actions .ainna-theme-switch.theme-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}

.ainna-ai-page .desktop-nav .ainna-theme-switch.theme-toggle:hover {
    transform: translateY(-1px);
}

.ainna-ai-page .ainna-mobile-topbar .ainna-theme-switch.theme-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
}