:root {
    --bg-color: #060913;
    --bg-secondary: #0c1222;
    --bg-tertiary: #162038;
    
    --text-color: #f9fafb;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;
    
    --primary-color: #4f8fff;
    --primary-glow: rgba(79, 143, 255, 0.35);
    --accent-color: #8b5cf6;
    --accent-glow: rgba(139, 92, 246, 0.35);
    --cyan-color: #06b6d4;
    --cyan-glow: rgba(6, 182, 212, 0.35);
    
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    
    --glass-bg: rgba(12, 18, 34, 0.75);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-heading: 'Outfit', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.light-theme {
    --bg-color: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --text-color: #0f172a;
    --text-muted: #334155;
    --text-dim: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(15, 23, 42, 0.12);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

.light-theme footer {
    background: #f1f5f9;
    border-top-color: rgba(15, 23, 42, 0.1);
}

.light-theme .engine-simulator-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.light-theme .simulator-console {
    background: #e2e8f0;
    border-top-color: rgba(15, 23, 42, 0.1);
    color: #1e293b;
}

.light-theme .bpmn-node {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.light-theme .node-icon-box {
    background: rgba(15, 23, 42, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

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

/* --- Particle Canvas --- */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
}

.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 60%, transparent 100%);
    pointer-events: none;
}

/* --- Navbar --- */
.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition);
    view-transition-name: navbar;
}

.glass-nav.scrolled {
    height: 68px;
    box-shadow: var(--glass-shadow);
}

.nav-container {
    max-width: 1320px;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.85rem;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.accent-dot {
    color: var(--cyan-color);
    text-shadow: 0 0 15px var(--cyan-glow);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.nav-actions .btn-primary,
.nav-actions .btn-secondary {
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* --- Buttons --- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 25px var(--primary-glow);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 35px var(--accent-glow);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

.btn-trigger {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    padding: 0.85rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.45);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    animation: pulse-glow 2.5s infinite;
}

.btn-trigger:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 45px rgba(6, 182, 212, 0.75);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.4); }
    50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.8); }
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    padding-top: 130px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 4rem;
    align-items: center;
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.15rem;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.35);
    border-radius: 9999px;
    color: var(--cyan-color);
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
    letter-spacing: 0.02em;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 4.75rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.gradient-text {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 540px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

.trust-bar {
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
}

.trust-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-bottom: 1rem;
    font-weight: 600;
}

.trust-logos {
    display: flex;
    /* Four fixed-width sector labels in a non-wrapping row ran off the right edge on narrow
       viewports — the last one ("RETAIL & E-COMMERCE") was clipped. Wrapping lets them stack. */
    flex-wrap: wrap;
    gap: 2.25rem;
    align-items: center;
    opacity: 0.7;
}

/* --- Live Interactive Workflow Engine Simulator Canvas --- */
.engine-simulator-card {
    background: rgba(12, 18, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 80px rgba(79, 143, 255, 0.12);
    backdrop-filter: blur(30px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.simulator-header {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.window-controls {
    display: flex;
    gap: 0.5rem;
}

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

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.instance-badge {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--cyan-color);
    background: rgba(6, 182, 212, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

/* Interactive Scenario Switcher Tabs */
.scenario-tabs {
    display: flex;
    /* Was overflow-x: auto with a hidden scrollbar, so on anything but a wide screen the last
       scenarios scrolled off-screen with no visible cue — users never knew they existed. Wrapping
       keeps every scenario visible so all four are discoverable and clickable. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--glass-border);
}

/* Prompt so it reads as an interactive control, not a static label. */
.scenario-tabs-hint {
    display: block;
    padding: 0.75rem 1.5rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan-color);
}

.scenario-tab {
    /* Brighter resting state than the old muted look, which read as disabled — these are the main
       call to interact with the live simulator. */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.scenario-tab:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--cyan-color);
    color: var(--text-color);
    transform: translateY(-1px);
}

.scenario-tab.active {
    background: linear-gradient(135deg, rgba(79, 143, 255, 0.25), rgba(6, 182, 212, 0.25));
    border-color: var(--cyan-color);
    color: #fff;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

.light-theme .scenario-tab.active {
    color: #0f172a;
    font-weight: 700;
}

/* Relatable Example Workflows Showcase Section */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.scenario-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.scenario-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transform: translateY(-4px);
}

.gateway-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.gateway-badge.parallel {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.3);
}

.scenario-diagram {
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.light-theme .scenario-diagram {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.simulator-canvas-area {
    padding: 2.5rem 1.5rem;
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Connection Lines */
.canvas-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.flow-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3px;
    stroke-dasharray: 6 6;
}

.flow-path-active {
    fill: none;
    stroke: var(--cyan-color);
    stroke-width: 3px;
    stroke-dasharray: 12 12;
    animation: flow-dash 1s linear infinite;
    filter: drop-shadow(0 0 6px var(--cyan-color));
}

@keyframes flow-dash {
    to { stroke-dashoffset: -24; }
}

.packet-tracer {
    fill: var(--cyan-color);
    filter: drop-shadow(0 0 12px #06b6d4);
}

/* Nodes Layout */
.canvas-nodes-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    z-index: 2;
    position: relative;
}

.bpmn-node {
    background: var(--bg-tertiary);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.bpmn-node:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(79, 143, 255, 0.25);
}

/* Captivating Workflow Execution Animations */
@keyframes active-pulse-glow {
    0% {
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.8);
        transform: scale(1.03);
    }
    50% {
        box-shadow: 0 0 40px rgba(6, 182, 212, 0.9), inset 0 0 20px rgba(6, 182, 212, 0.4);
        border-color: #06b6d4;
        transform: scale(1.07);
    }
    100% {
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.8);
        transform: scale(1.03);
    }
}

@keyframes complete-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1.02); }
}

@keyframes spin-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bpmn-node.active-executing {
    border-color: var(--cyan-color);
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.18), rgba(59, 130, 246, 0.12));
    animation: active-pulse-glow 1.2s infinite ease-in-out;
    z-index: 10;
}

.bpmn-node.active-executing .node-icon-box {
    background: rgba(6, 182, 212, 0.3) !important;
    color: #fff !important;
    position: relative;
}

.bpmn-node.active-executing .node-icon-box::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px dashed #06b6d4;
    border-radius: 14px;
    animation: spin-ring 3s linear infinite;
}

.bpmn-node.node-completed {
    border-color: #10b981;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.08));
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
    animation: complete-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.bpmn-node.node-completed .node-icon-box {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #10b981 !important;
}

.node-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    transition: var(--transition);
}

.node-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
}

.node-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.node-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--accent-color);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
    transition: var(--transition);
}

.bpmn-node.active-executing .node-badge {
    background: #06b6d4;
    box-shadow: 0 0 12px #06b6d4;
}

.bpmn-node.node-completed .node-badge {
    background: #10b981;
    box-shadow: 0 0 12px #10b981;
}

/* Console Output Widget */
.simulator-console {
    background: #03050a;
    border-top: 1px solid var(--glass-border);
    padding: 1.25rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.console-logs {
    height: 110px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.log-entry {
    display: flex;
    gap: 0.75rem;
    line-height: 1.4;
}

.log-time { color: var(--text-dim); }
.log-info { color: #60a5fa; }
.log-success { color: #34d399; font-weight: 600; }
.log-warn { color: #fbbf24; }
.log-gis { color: #c084fc; }

/* Custom scrollbar for console */
.console-logs::-webkit-scrollbar {
    width: 6px;
}
.console-logs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

/* --- Features Section --- */
.section {
    padding: 100px 2rem;
    max-width: 1320px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 5rem auto;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 3.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2.25rem;
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.75rem 2.25rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 50px var(--primary-glow);
}

.feature-icon-wrapper {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(79,143,255,0.30), rgba(139,92,246,0.30));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 28px rgba(79,143,255,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin-bottom: 1.75rem;
    position: relative;
    z-index: 2;
}
.feature-icon-wrapper .material-symbols-outlined {
    font-size: 2.9rem !important;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.feature-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.feature-desc {
    color: var(--text-muted);
    font-size: 0.98rem;
}

/* --- Animated Stats Band --- */
.stats-band {
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 4.5rem 2rem;
}

.stats-grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.counter-num {
    font-family: var(--font-heading);
    font-size: 3.75rem;
    font-weight: 800;
    color: var(--cyan-color);
    margin-bottom: 0.25rem;
    text-shadow: 0 0 25px rgba(6,182,212,0.3);
}

.counter-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1.05rem;
}

/* --- Pricing --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
}

.pricing-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 3.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
}

.pricing-card.popular {
    border-color: var(--cyan-color);
    box-shadow: 0 0 60px rgba(6, 182, 212, 0.2);
    transform: scale(1.03);
}

.popular-badge {
    align-self: flex-start;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 15px rgba(6,182,212,0.4);
}

.plan-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.plan-price {
    font-size: clamp(2.8rem, 4.5vw + 1rem, 4.2rem);
    font-weight: 800;
    font-family: var(--font-heading);
    margin-bottom: 1.75rem;
    color: var(--text-color);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plan-price .plan-price-amount {
    font-size: inherit;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.1;
}

.plan-price .plan-price-period,
.plan-price span:not(.plan-price-amount) {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-weight: 500;
}

.plan-features {
    list-style: none;
    margin-bottom: 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-muted);
    font-size: 0.98rem;
}

.plan-features li .material-symbols-outlined {
    color: var(--success-color);
    font-size: 1.35rem;
}

/* --- CTA Banner --- */
.cta-banner {
    background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(139,92,246,0.15));
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 32px;
    padding: 6rem 3rem;
    text-align: center;
    margin: 8rem auto;
    max-width: 1320px;
    box-shadow: 0 0 100px rgba(139,92,246,0.15);
}

/* --- Footer --- */
footer {
    border-top: 1px solid var(--glass-border);
    padding: 5rem 2rem 2.5rem 2rem;
    background: #03050a;
}

.footer-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-desc {
    color: var(--text-muted);
    margin-top: 1.25rem;
    max-width: 320px;
    font-size: 0.95rem;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--cyan-color);
}

.footer-bottom {
    max-width: 1320px;
    margin: 0 auto;
    border-top: 1px solid var(--glass-border);
    padding-top: 2.25rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.88rem;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 4rem; }
    .hero-subtitle { margin: 0 auto 2.5rem auto; }
    .hero-cta { justify-content: center; }
    .trust-logos { justify-content: center; }
    .canvas-nodes-container { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .pricing-card.popular { transform: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* .hero-title is NOT set here: the premium layer below defines it with a clamp() at equal
       specificity and later in the file, so anything set here is dead. Change it there. */
    .canvas-nodes-container { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; }
}

/* Feature Page Diagram Utilities */
.sketch-svg { width: 100%; max-height: 120px; overflow: visible; }
.sketch-path { fill: none; stroke: var(--cyan-color); stroke-width: 2.5px; stroke-dasharray: 4 4; animation: flow-dash 1.5s linear infinite; }
.sketch-node { fill: rgba(79, 143, 255, 0.2); stroke: #38bdf8; stroke-width: 2px; }

/* ==========================================================================
   PREMIUM ENHANCEMENT LAYER
   Layered on top of the base system above. Preserves every existing class;
   refines tokens, typography, depth, motion, accessibility and responsiveness.
   ========================================================================== */

:root {
    /* Slightly lifted muted tones for comfortable contrast on the dark canvas */
    --text-muted: #aab4c5;
    --text-dim: #828da0;

    /* Elevation + radius scale */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --shadow-1: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-2: 0 12px 34px rgba(0,0,0,0.45);
    --shadow-3: 0 30px 80px rgba(0,0,0,0.55);
    --ring: 0 0 0 3px rgba(79,143,255,0.55);
}

/* --- Ambient aurora depth behind the grid --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(42rem 42rem at 12% -12%, rgba(79,143,255,0.20), transparent 60%),
        radial-gradient(46rem 46rem at 102% -4%, rgba(139,92,246,0.18), transparent 60%),
        radial-gradient(38rem 38rem at 50% 118%, rgba(6,182,212,0.12), transparent 62%);
}
body.light-theme::before { opacity: 0.45; }

::selection { background: rgba(79,143,255,0.35); color: #fff; }

/* --- Accessibility: visible keyboard focus --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-trigger:focus-visible,
.scenario-tab:focus-visible,
.icon-btn:focus-visible,
.connector-card:focus-visible {
    outline: 2px solid #8fb6ff;
    outline-offset: 3px;
    border-radius: 8px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link for keyboard/screen-reader users (add <a class="skip-link" href="#main">) */
.skip-link {
    position: fixed;
    top: -60px;
    left: 1rem;
    z-index: 2000;
    background: var(--primary-color);
    color: #fff;
    padding: 0.7rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.25s ease;
}
.skip-link:focus { top: 1rem; }

/* --- Respect reduced-motion preferences --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    #particles-canvas { display: none !important; }
}

/* --- Fluid, responsive typography --- */
/* Lower bound is what phones actually get: at 375px the vw term lands ~36px, so a 2.6rem floor
   pinned it back to 41.6px and the headline ran to four lines. */
.hero-title { font-size: clamp(2.05rem, 5.4vw + 1rem, 5rem); }
.hero-subtitle { font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem); line-height: 1.7; }
.section-title { font-size: clamp(2rem, 3.2vw + 1rem, 3.35rem); }
.section-subtitle { font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.2rem); line-height: 1.7; }
.plan-price, .plan-price .plan-price-amount { font-size: clamp(2.8rem, 4.5vw + 1rem, 4.2rem); }

/* --- Navbar polish --- */
.glass-nav { border-bottom: 1px solid rgba(255,255,255,0.08); }
.glass-nav.scrolled { background: color-mix(in srgb, var(--bg-color) 82%, transparent); }
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--cyan-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    border-radius: 2px;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* --- Buttons: subtle sheen + press feedback --- */
.btn-primary, .btn-secondary, .btn-trigger { position: relative; overflow: hidden; }
.btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active, .btn-secondary:active, .btn-trigger:active { transform: translateY(0) scale(0.99); }

/* --- Glass cards: gradient hairline border + richer hover --- */
.feature-card, .pricing-card, .scenario-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--glass-bg);
}
.feature-card::before, .pricing-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}
.feature-card:hover {
    box-shadow: 0 22px 60px rgba(79,143,255,0.22), 0 0 0 1px rgba(79,143,255,0.45);
}

/* Eyebrow-style section pill centering when used in headers */
.section-header .pill-badge { margin-left: auto; margin-right: auto; }

/* --- Sub-page header ---------------------------------------------------------
   features.html and solutions.html each carried their own copy of this in a <style>
   block, both with a fixed 8rem/2rem padding that did not step down on phones.
   Defined once here so the sub-pages share the site's spacing scale. */
.page-header {
    padding: clamp(6.5rem, 9vw, 8rem) clamp(1.15rem, 4vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

/* --- Sub-page content card ----------------------------------------------------
   The same surface treatment as .feature-card / .pricing-card so a sub-page reads as
   part of the site: glass background rather than a flat --bg-secondary panel, the
   gradient hairline border, and padding that scales down instead of holding 3rem on a
   375px screen. */
.surface-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: clamp(1.5rem, 4.5vw, 3rem);
}
.surface-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}
.surface-card > * { position: relative; z-index: 1; }

/* Sub-page section heading, on the same responsive scale as .section-title rather than
   a hardcoded 2rem. */
.subsection-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw + 0.85rem, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin: 0;
}
.subsection-copy {
    color: var(--text-secondary);
    font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.05rem);
    line-height: 1.65;
    margin-top: 0.75rem;
    max-width: 700px;
}

/* --- Pricing highlight refinement --- */
.pricing-card.popular { box-shadow: 0 0 70px rgba(6,182,212,0.22), 0 0 0 1px rgba(6,182,212,0.5); }

/* --- Footer polish --- */
footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)), #04070e; }
.footer-col a { position: relative; }
.footer-col a:hover { padding-left: 2px; }

/* --- Connector cards (features page) — depth + accessible flip cue --- */
.connector-card { transition: var(--transition); }
.connector-card:hover { transform: translateY(-4px); }

/* --- Mobile navigation (injected toggle) --- */
.nav-toggle {
    display: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    width: 44px; height: 44px;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.nav-toggle .material-symbols-outlined { font-size: 1.6rem; }

/* --- Refined responsive breakpoints --- */
@media (max-width: 1100px) {
    .footer-container { gap: 2.5rem; }
}

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; order: 3; }
    .nav-actions { gap: 0.5rem; }
    .nav-links {
        display: flex;
        position: fixed;
        top: 72px; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.35rem;
        padding: 1.75rem 2rem 2.25rem;
        /* Opaque, deliberately. This was a translucent color-mix() over a blur, but --bg-color is
           near-black and the hero headline behind it is near-white, so even at 97% the heading
           ghosted through the menu items — and where backdrop-filter is unsupported (or dropped in
           a screenshot pipeline) the page showed through outright. A drop-down menu on a phone has
           to be readable before it is glassy. */
        background: var(--bg-color);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: var(--shadow-2);
        transform: translateY(-140%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, visibility 0.25s;
    }
    .glass-nav.nav-open .nav-links {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav-links a { font-size: 1.1rem; }

    /* main.js moves .nav-actions into the drop-down panel at this breakpoint, so the bar holds only
       the logo and the toggle. It previously kept the logo, the theme button, a pill CTA and the
       toggle side by side inside 375px minus 4rem of container padding — roughly 450px of content in
       311px of space, which pushed the toggle off the right edge. */
    .nav-links .nav-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--glass-border);
    }
    .nav-links .nav-actions .btn-primary,
    .nav-links .nav-actions .btn-secondary {
        flex: 1 1 10rem;
        text-align: center;
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 560px) {
    .section { padding: 72px 1.35rem; }
    .hero { padding-top: 118px; }
    .feature-card { padding: 2rem 1.6rem; }
    .pricing-card { padding: 2.5rem 1.9rem; }
    .cta-banner { padding: 3.5rem 1.5rem; border-radius: 24px; }

    /* The bar itself: 2rem of side padding is a sixth of a 375px screen. */
    .nav-container { padding: 0 1.15rem; }
    .logo { font-size: 1.5rem; }

    /* Card furniture was sized for desktop and never stepped down. The icon tile was 84px and its
       glyph 2.9rem inside a card only ~343px wide; the watermark was a fixed 10rem (160px), so it
       read as a graphic rather than a wash. */
    .feature-icon-wrapper {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        margin-bottom: 1.25rem;
    }
    .feature-icon-wrapper .material-symbols-outlined { font-size: 2.05rem !important; }
    .feature-title { font-size: 1.25rem; }
    /* .card-watermark and .connector-icon .logo-monogram are stepped down at the end of this file
       instead — they are defined in the uplift layer BELOW this block, so an override here loses on
       source order regardless of !important. */
}

@media (max-width: 380px) {
    .logo { font-size: 1.35rem; }
    .nav-container { padding: 0 0.9rem; }
    .section { padding: 64px 1.1rem; }
    .feature-card { padding: 1.75rem 1.35rem; }
}

/* ==========================================================================
   SITE UPLIFT: prominent icons, icon watermark, dense grids, logo marquee
   ========================================================================== */

/* Large translucent icon watermark that fills the card (injected by main.js) */
.feature-card { position: relative; overflow: hidden; }
.feature-card > *:not(.card-watermark) { position: relative; z-index: 1; }
.card-watermark {
    position: absolute;
    right: -1.25rem;
    bottom: -2rem;
    font-size: 10rem !important;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.feature-card:hover .card-watermark { opacity: 0.13; transform: scale(1.06) rotate(-4deg); }
.light-theme .card-watermark { opacity: 0.06; }
.light-theme .feature-card:hover .card-watermark { opacity: 0.1; }

/* Dense grids: don't stretch a lone trailing card across the row — center incomplete rows */
.features-grid { justify-content: center; }
.features-grid .feature-card { max-width: 420px; }

/* ── Infinite logo marquee (connector showcase) ───────────────────────────── */
.logo-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1.25rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 1.25rem;
    animation: marquee-scroll 48s linear infinite;
}
.logo-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
    white-space: nowrap;
    flex-shrink: 0;
}
.marquee-chip img {
    width: 30px; height: 30px;
    border-radius: 7px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
}
.marquee-chip span {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-color);
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* Crisp monogram fallback for connector logos that fail to load (better than a blurry favicon) */
.logo-monogram {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 800; color: #fff; line-height: 1;
}
.connector-icon .logo-monogram { width: 100%; height: 100%; border-radius: 50%; font-size: 2.8rem; }
.marquee-chip .logo-monogram { width: 30px; height: 30px; border-radius: 7px; font-size: 1rem; }

/* --- Billing period toggle --- */
.billing-toggle {
    display: inline-flex;
    gap: 0.35rem;
    margin: 0 auto 2.75rem;
    padding: 0.35rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--bg-secondary);
    /* center within the pricing section (which is otherwise left-aligned content) */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.billing-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.billing-toggle-option:hover { color: var(--text-color); }
.billing-toggle-option.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 18px var(--primary-glow);
}
.billing-save {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--text-color);
    white-space: nowrap;
}
.billing-toggle-option.active .billing-save { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --- Checkout Modal --- */
.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(3, 6, 15, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: checkout-fade 0.2s ease;
}
.checkout-overlay[hidden] { display: none; }
@keyframes checkout-fade { from { opacity: 0; } to { opacity: 1; } }

.checkout-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    padding: 2.25rem 2rem 2rem;
}

.checkout-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.checkout-close:hover { color: var(--text-color); border-color: var(--primary-color); }

.checkout-title { font-family: 'Outfit', sans-serif; font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--text-color); }
.checkout-title span { color: var(--primary-color); }
.checkout-subtitle { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.5rem; }

.checkout-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.checkout-input {
    width: 100%;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.checkout-providers { display: grid; gap: 0.6rem; margin: 0.5rem 0 1.25rem; }
.provider-option { display: block; cursor: pointer; }
.provider-option input { position: absolute; opacity: 0; pointer-events: none; }
.provider-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--bg-tertiary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.provider-option input:checked + .provider-card {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.provider-option input:focus-visible + .provider-card { border-color: var(--primary-color); }
.provider-name { font-weight: 600; color: var(--text-color); }
.provider-hint { font-size: 0.8rem; color: var(--text-dim); }

.checkout-error {
    color: #f87171;
    font-size: 0.9rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
}
.checkout-error[hidden] { display: none; }

.checkout-submit[disabled] { opacity: 0.7; cursor: not-allowed; }

/* --- UI ARCHITECTURE UPDATES --- */

/* 1. Reveal Animations (JS Fallback) */
.reveal, .feature-card, .pricing-card, .connector-card, .scenario-box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active, .feature-card.active, .pricing-card.active, .connector-card.active, .scenario-box.active {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Grid Spotlight (:has() pseudo-class) */
.pricing-grid:has(.pricing-card:hover) .pricing-card:not(:hover),
.connectors-grid:has(.connector-card:hover) .connector-card:not(:hover),
.scenario-grid:has(.scenario-box:hover) .scenario-box:not(:hover) {
    opacity: 0.5;
    filter: blur(2px);
    transform: scale(0.98);
}
.pricing-card, .connector-card, .scenario-box {
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

/* 3. Static Border (Replaced animated border for performance) */
.animated-border {
    position: relative;
    border-radius: inherit;
}
.animated-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: rgba(6, 182, 212, 0.2);
    z-index: -1;
}

/* --- VIEW TRANSITIONS API --- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-out;
    }

    ::view-transition-new(root) {
        animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-in;
    }

    @keyframes vt-fade-out {
        to { opacity: 0; transform: scale(0.98); }
    }

    @keyframes vt-fade-in {
        from { opacity: 0; transform: scale(1.02); }
    }
}

/* --- SCROLL-DRIVEN ANIMATIONS --- */
@supports (animation-timeline: view()) and (animation-range: entry) {
    /* Reveal sections natively instead of JS IntersectionObserver */
    .reveal, .feature-card, .pricing-card, .connector-card, .scenario-box {
        animation: scroll-reveal linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 25%;
        /* Reset any initial JS state if native is supported */
        opacity: 1 !important;
        transform: none !important;
    }
    
    .bg-grid {
        animation-timeline: scroll(root block);
        animation: parallax-bg linear both;
    }

    @keyframes scroll-reveal {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes parallax-bg {
        to { transform: translateY(15vh); }
    }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Page container
   ──────────────────────────────────────────────────────────────────────────────
   `.container` was used by solutions.html and features.html but never defined, so
   `max-width` was applied with no auto margins: the whole page pinned itself to the
   left edge and left the leftover width as dead space on the right. Defining it once
   here fixes both pages rather than patching each inline style.  */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ==========================================================================
   MOBILE REFINEMENTS FOR THE UPLIFT LAYER
   Must live at the end of the file: the rules below are defined above with
   !important, so an override placed earlier loses on source order.
   ========================================================================== */

@media (max-width: 560px) {
    /* 10rem is 160px of glyph inside a card only ~340px wide — it reads as a graphic rather
       than the faint wash it is meant to be. */
    .card-watermark {
        font-size: 5.5rem !important;
        right: -0.5rem;
        bottom: -1rem;
    }

    .connector-icon .logo-monogram { font-size: 1.9rem; }
    .marquee-chip .logo-monogram { width: 26px; height: 26px; font-size: 0.85rem; }
}

/* ==========================================================================
   USE CASES
   A grid of concrete jobs rather than capabilities — the pattern every
   comparable automation platform leads with, because an evaluator looks for
   their own process before they read a feature list.
   ========================================================================== */

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
}

.use-case-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--glass-bg);
    border: 1px solid var(--glass-border);
    text-decoration: none;
    color: inherit;
    /* Transform and border only. The rest of the site animates `all`, which quietly
       transitions paint properties on hover and costs more than it looks like. */
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.use-case-card:hover {
    transform: translateY(-4px);
    border-color: rgba(79,143,255,0.55);
    box-shadow: 0 18px 44px rgba(79,143,255,0.16);
}

.use-case-icon {
    font-size: 1.9rem !important;
    color: var(--cyan-color);
    background: rgba(6,182,212,0.12);
    border: 1px solid rgba(6,182,212,0.28);
    border-radius: 14px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
}

.use-case-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

.use-case-desc {
    color: var(--text-muted);
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
}

.use-case-link {
    margin-top: auto;
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--primary-color);
}

.use-case-link .material-symbols-outlined {
    font-size: 1.1rem !important;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

.use-case-card:hover .use-case-link .material-symbols-outlined { transform: translateX(4px); }

.light-theme .use-case-desc { color: var(--text-dim); }

/* ==========================================================================
   MOTION DISCIPLINE
   Ambient animation that never stops competes with the content and drains a
   phone battery. Motion here is tied to intent — entrances and interactions —
   and every perpetual loop either stops or yields to prefers-reduced-motion.
   ========================================================================== */

/* The primary CTA pulsed forever. It draws the eye once and then just moves. */
.btn-trigger { animation: none; }
.btn-trigger:hover,
.btn-trigger:focus-visible { animation: pulse-glow 2.5s infinite; }

@media (prefers-reduced-motion: reduce) {
    /* The base rule covers transitions/animations; these are the ones driven by
       JS or by scroll position, which that rule cannot reach. */
    .marquee-track { animation: none !important; transform: none !important; }
    .btn-trigger, .btn-trigger:hover, .btn-trigger:focus-visible { animation: none !important; }
    .use-case-card:hover { transform: none; }
    #particles-canvas { display: none; }
    .ambient-orb { animation: none !important; }
}

/* ==========================================================================
   AMBIENT BACKGROUND LAYERS
   Promoted out of features.html's page-local <style>. It defined .ambient-orb
   there only, while solutions.html used the same class names and never styled
   them — so identical markup rendered a soft glow on one page and nothing at
   all on the other. Shared here so every page draws the same stack:
   .bg-grid + #particles-canvas + optional .ambient-orb.
   ========================================================================== */

.ambient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
    animation: float-orb 20s infinite alternate ease-in-out;
}

.orb-1 { width: 40vw; height: 40vw; top: -10vw; left: -10vw; background: rgba(79, 143, 255, 0.15); }
.orb-2 { width: 30vw; height: 30vw; bottom: 10vw; right: -5vw; background: rgba(124, 92, 252, 0.15); animation-delay: -5s; }

@keyframes float-orb {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5vw, 5vw) scale(1.1); }
}

.light-theme .orb-1 { background: rgba(79, 143, 255, 0.10); }
.light-theme .orb-2 { background: rgba(124, 92, 252, 0.10); }