/* ── Olynx V2.0 (Linear/Stripe Premium Aesthetic) ── */

:root {
    --bg-black: #000000;
    --bento-bg: #09090b;
    --bento-border: #27272a;
    --text-primary: #ffffff;
    --text-muted: #a1a1aa;
    --text-dim: #71717a;
    --accent: #e4e4e7;
    --neon-blue: #3b82f6;
    --neon-purple: #8b5cf6;
    --neon-emerald: #10b981;
    --neon-red: #ef4444;
}

/* Global Page Resets for Olynx */
body.olynx-v2 {
    background-color: var(--bg-black);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* Typography Overrides */
.olynx-v2 h1, .olynx-v2 h2, .olynx-v2 h3, .olynx-v2 h4 {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.olynx-v2 p {
    color: var(--text-muted);
    line-height: 1.6;
}

.olynx-v2 .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8em;
    letter-spacing: 0em;
}

/* ── Hero Section ── */
.premium-hero {
    min-height: 100vh; /* fallback */
    min-height: 100svh; /* shrinks with mobile address bar */
    padding-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Grid Background */
.premium-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, black, transparent);
}

/* Top Glow */
.premium-hero-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15), transparent 70%);
    filter: blur(80px);
    z-index: 0;
}

.hero-pill {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 32px;
    -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

.hero-title {
    position: relative;
    z-index: 10;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
    background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 1000px;
}

.hero-subtitle {
    position: relative;
    z-index: 10;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    max-width: 600px;
    margin-bottom: 48px;
    font-weight: 400;
}

/* Call To Actions */
.hero-ctas {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 16px;
}

.btn-premium-primary {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 20px rgba(255,255,255,0.1);
}
.btn-premium-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 12px 30px rgba(255,255,255,0.2);
}

.btn-premium-secondary {
    background: rgba(255,255,255,0.03);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    cursor: pointer;
}
.btn-premium-secondary:hover {
    background: rgba(255,255,255,0.08);
}


/* Hero Dashboard Mockup Container */
.hero-mockup-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1200px;
    margin-top: 64px;
    perspective: 1000px;
}

.hero-mockup-glow {
    position: absolute;
    top: 20%; left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    height: 60%;
    background: var(--neon-blue);
    filter: blur(120px);
    opacity: 0.15;
    z-index: 1;
}

.hero-dashboard-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bento-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05);
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.9em;
    overflow: hidden;
}

.hero-dashboard-img::before {
    content: "APP MOCKUP PLACEHOLDER";
    letter-spacing: 0.2em;
}

/* ── Section Dividers ── */
.premium-section {
    padding: clamp(60px, 10vh, 120px) clamp(16px, 5vw, 24px);
    max-width: 1200px;
    margin: 0 auto;
}

.section-label {
    display: block;
    color: var(--neon-blue);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 24px;
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: clamp(40px, 8vw, 64px);
    line-height: 1.7;
}

/* ── Bento Box Grid ── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(320px, auto);
    gap: 24px;
}

.bento-card {
    background: rgba(14, 14, 16, 0.4);
    -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 36px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: box-shadow 0.4s, border-color 0.4s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02),
                inset 0 20px 40px -20px rgba(255, 255, 255, 0.05),
                0 10px 40px rgba(0, 0, 0, 0.4);
    transform: perspective(1000px) rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) translateZ(0);
    transform-style: preserve-3d;
}

.bento-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 20px 40px -20px rgba(255, 255, 255, 0.15),
                0 30px 60px rgba(0, 0, 0, 0.7);
}

.bento-grid:has(.bento-card:hover) .bento-card:not(:hover) {
    transform: scale(0.95) perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(-20px);
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* Base Neon Orb */
.bento-card::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: var(--orb-color, rgba(255,255,255,0.05));
    filter: blur(100px);
    top: -150px;
    right: -150px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}
.bento-card:hover::after {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Metallic Mouse Spotlight */
.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(255, 255, 255, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 1; 
}
.bento-card:hover::before { opacity: 1; }

.bento-content {
    position: relative;
    z-index: 10;
    transform: translateZ(30px);
    transition: transform 0.3s;
}
.bento-card:hover .bento-content {
    transform: translateZ(50px);
}

/* Asymmetric Grid Base Classes */
.bento-wide {
    grid-column: span 2;
}
.bento-tall {
    grid-row: span 2;
}

/* ── Asymmetric Grid Responsive Breakpoints ──
   One consolidated block to avoid conflicts */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(280px, auto);
    }
    .bento-tall { 
        grid-row: auto; 
    }
    .bento-wide { 
        grid-column: span 2; 
    }
    .bento-visual-terminal {
        top: clamp(70px, 10vw, 90px);
        height: 180px;
    }
}
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(240px, auto);
        gap: 16px;
    }
    .bento-wide,
    .bento-tall {
        grid-column: span 1;
        grid-row: auto;
    }
    .bento-visual-terminal {
        height: 150px;
    }
    /* Disable 3D tilt on mobile for performance */
    .bento-card {
        transform: none !important;
        transition: box-shadow 0.3s, border-color 0.3s;
    }
    .bento-grid:has(.bento-card:hover) .bento-card:not(:hover) {
        transform: none;
        opacity: 1;
        filter: none;
    }
}

.bento-icon-wrapper {
    position: absolute;
    top: clamp(20px, 3vw, 32px);
    left: clamp(20px, 3vw, 32px);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    transform: translateZ(40px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s, background 0.3s;
}

.bento-card:hover .bento-icon-wrapper {
    transform: translateZ(70px) scale(1.05);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.bento-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.5) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.bento-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #a1a1aa;
}

/* =========================================
   BENTO INTERNAL VISUALS 
========================================= */

/* 1. Terminal (Tall Card) */
.bento-visual-terminal {
    position: absolute;
    top: clamp(80px, 12vw, 110px); /* Shifted down to clear icon */
    left: clamp(20px, 4vw, 40px);
    right: clamp(20px, 4vw, 40px);
    height: 220px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #a1a1aa;
    overflow: hidden;
    transform: translateZ(20px);
    transition: transform 0.3s;
}
.bento-card:hover .bento-visual-terminal { transform: translateZ(40px); }

.terminal-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.terminal-header .dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #10b981; }

.terminal-body { padding: 16px; }
.term-line { margin: 0 0 6px 0; opacity: 0; animation: typingReveal 0.1s forwards; }
.term-line:nth-child(1) { animation-delay: 0.5s; }
.term-line:nth-child(2) { animation-delay: 1.2s; }
.term-line:nth-child(3) { animation-delay: 2.0s; }
.term-line:nth-child(4) { animation-delay: 2.8s; }
.term-blink { display: inline-block; animation: blink 1s step-end infinite; }

@keyframes typingReveal { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

/* 2. Sync Nodes (Wide Card) */
.bento-visual-nodes {
    position: absolute;
    top: clamp(40px, 8vw, 56px);
    left: clamp(80px, 20vw, 100px);
    right: clamp(20px, 5vw, 40px);
    height: 20px; /* Increased so nodes are visible */
    transform: translateZ(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sync-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}
.sync-node {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #18181b;
    z-index: 1;
    position: relative;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02);
}
.sync-node.active { background: #10b981; box-shadow: 0 0 10px #10b981; }
.sync-node.error { background: #f43f5e; box-shadow: 0 0 10px #f43f5e; animation: pulseError 2s infinite; }
.sync-node.pending { background: #f59e0b; }

.sync-packet {
    position: absolute;
    width: 30px; height: 4px;
    background: #10b981;
    border-radius: 2px;
    box-shadow: 0 0 10px #10b981, 0 0 20px #10b981;
    z-index: 2;
    left: 0;
    animation: travelPacket 3s ease-in-out infinite;
}
@keyframes travelPacket {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; width: 30px; }
    40% { width: 50px; }
    90% { left: 95%; opacity: 1; width: 30px; }
    100% { left: 100%; opacity: 0; }
}
@keyframes pulseError { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; box-shadow: none; } }

/* 3. Radar (Square Card) */
.bento-visual-radar {
    position: absolute;
    top: -20px; right: -20px;
    width: 240px; height: 240px;
    border-radius: 50%;
    transform: translateZ(10px);
    opacity: 0.3;
    pointer-events: none;
}
.radar-circle {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 50%;
}
.rc1 { transform: scale(1); }
.rc2 { transform: scale(0.6); border-color: rgba(244, 63, 94, 0.5); }
.rc3 { transform: scale(0.2); background: rgba(244, 63, 94, 0.8); box-shadow: 0 0 20px #f43f5e;}

.radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(244, 63, 94, 0.4) 100%);
    animation: sweep 4s linear infinite;
}
.radar-pin {
    position: absolute;
    top: 30%; right: 40%;
    animation: pulsePin 4s infinite;
}

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulsePin { 0%, 90% { opacity: 0.3; transform: scale(0.8); filter: brightness(1); } 95% { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 5px #f43f5e); } 100% { opacity: 0.3; transform: scale(1); } }

/* 4. Marquee (Square Card) */
.bento-visual-marquee {
    position: absolute;
    top: 30%; right: 0; left: 0;
    overflow: hidden; /* Contain the nowrap text */
    max-width: 100%;
    transform: translateZ(10px) rotate(-5deg);
    opacity: 0.15;
    pointer-events: none;
}
.marquee-track {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    animation: slideMarquee 15s linear infinite;
}
.marquee-track span {
    font-size: 2.5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    font-style: italic;
    text-transform: uppercase;
}
@keyframes slideMarquee { to { transform: translateX(-50%); } }

/* (Removed: a stray .holo-float rule was here. Same selector is also defined
   below at line ~838 for the actual floating glass widgets — this one
   inherited contradictory positioning (top:0; right:0; bottom:30%; left:0)
   and a mask-image that faded the widgets' bottom half. Effect: PowerSync
   Local / Gemini AI badges stretched across the mock dashboard with their
   text bleeding into the icon. Removed because no element in the current
   markup needs the grid backdrop this rule was trying to render.) */

/* Glow orb inside the grid for life */
.bento-visual::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -30%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
    filter: blur(50px);
}

.bento-content {
    position: relative;
    z-index: 10;
}

.bento-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

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

/* Legacy bento-large + old bento-grid override removed — handled above */

/* ── Interactive Feature Showcase (Apple Style) ── */
.features-showcase {
    display: flex;
    gap: 64px;
    align-items: center;
    margin-top: 64px;
}

.features-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
}

.feature-item:hover, .feature-item.active {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.feature-item-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.active .feature-item-title {
    color: var(--text-primary);
}

.feature-item-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.active .feature-item-desc {
    max-height: 150px;
    margin-top: 10px;
}

/* --- V3 SILICON VALLEY HERO UPGRADES --- */

/* 1. Aurora Glow */
.hero-aurora {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(59,130,246,0.18) 40%, transparent 70%);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    animation: aurora-pulse 6s ease-in-out infinite alternate;
}

@keyframes aurora-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* 2. Text Gradient */
.text-gradient-cyan-emerald {
    background: linear-gradient(135deg, #00C6FF, #00E676);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* 3. Animated Pill Border */
@keyframes border-glow-pulse {
    0% { border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); color: var(--text-muted); }
    50% { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); color: #fff; }
    100% { border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); color: var(--text-muted); }
}

.animated-gradient-border {
    animation: border-glow-pulse 3s infinite ease-in-out;
    color: var(--text-primary);
}

/* 4. Pulsing Halo Button */
.pulsing-halo {
    position: relative;
    animation: button-pulse 2.5s infinite;
}

@keyframes button-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --- V4 NEXT-GEN SAAS UPGRADES --- */

/* 1. Film Grain Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* 2. Cursor Spotlight Grid */
.hero-spotlight {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle 300px at var(--mouse-x, 50%) var(--mouse-y, -100%), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 300px at var(--mouse-x, 50%) var(--mouse-y, -100%), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* 3. Holographic 3D Dashboard */
.hero-mockup-wrapper {
    perspective: 1200px;
    transform-style: preserve-3d;
    margin-bottom: 80px;
}

.gsap-dashboard-3d {
    position: relative;
    width: 600px;
    height: 380px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(8deg) rotateY(0deg);
}

.holo-base {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 25, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateZ(0); /* Base level */
    display: flex;
    overflow: hidden;
}

.holo-sidebar {
    width: 80px;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.05);
}

.holo-header {
    height: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.holo-metrics {
    flex: 1;
    padding: 30px;
}

.holo-skeleton {
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.holo-chart {
    height: 140px;
    background: linear-gradient(0deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%);
    border-bottom: 2px solid var(--neon-emerald);
    border-radius: 8px;
    margin-top: 40px;
}

.holo-float {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(16, 18, 27, 0.7);
    -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.holo-widget-1 {
    width: 220px; height: 80px;
    right: -40px; top: 100px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.holo-widget-2 {
    width: 260px; height: 110px;
    left: -50px; bottom: 40px;
}

.holo-ai-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    margin: 12px;
    display: inline-block;
}

/* =========================================================
   # GLOBALS & CORE COMPONENTS */

.features-image-container {
    flex: 1.5;
    background: var(--bento-bg);
    border: 1px solid var(--bento-border);
    border-radius: 20px;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
}
.features-image-container::before {
    content: "DYNAMIC DASHBOARD IMAGE";
    color: var(--text-dim);
    letter-spacing: 0.2em;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .features-showcase { flex-direction: column-reverse; }
}

/* ── Tech Stack Banner ── */
.tech-banner {
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 40px 0;
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0.6;
}

.tech-item {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

/* ── Diff Checker (Pain vs Solution) ── */
.diff-container {
    background: var(--bento-bg);
    border: 1px solid var(--bento-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
}

.diff-header {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--bento-border);
    padding: 12px 16px;
    color: var(--text-dim);
    display: flex;
    gap: 16px;
}

.diff-row {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.diff-row:last-child {
    border-bottom: none;
}

.diff-pain {
    flex: 1;
    padding: 16px;
    background: rgba(239, 68, 68, 0.05); /* very faint red */
    color: #fca5a5;
    border-right: 1px solid var(--bento-border);
    display: flex;
    gap: 12px;
}
.diff-pain::before {
    content: '-';
    color: var(--neon-red);
    font-weight: bold;
}

.diff-solution {
    flex: 1;
    padding: 16px;
    background: rgba(16, 185, 129, 0.05);
    color: #6ee7b7;
    display: flex;
    gap: 12px;
}
.diff-solution::before {
    content: '+';
    color: var(--neon-emerald);
    font-weight: bold;
}

/* Base Buttons */
.cta-banner {
    text-align: center;
    padding: 100px 24px;
    background: radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.1), transparent 50%);
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── V2.5 UPGRADES ── */

/* 1. Light Rays Animation (Grid) */
.hero-rays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* Under content, above grid */
    overflow: hidden;
}

.ray {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
    height: 1px;
    width: 200px;
    opacity: 0;
    animation: rayFlow 4s linear infinite;
}

.ray-vertical {
    background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.8), transparent);
    width: 1px;
    height: 200px;
    animation: rayFlowY 5s linear infinite;
}

@keyframes rayFlow {
    0% { transform: translateX(-100vw); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes rayFlowY {
    0% { transform: translateY(-100vh); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* 2. Glassmorphic Floating Cards (Hero Mockups) */
.glass-floating-card {
    position: absolute;
    background: rgba(20, 20, 24, 0.6);
    -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 20;
    pointer-events: none;
}

.glass-floating-card.right-mid {
    top: 30%; right: -60px;
    transform: rotate(2deg);
}

.glass-floating-card.left-bot {
    bottom: 20%; left: -50px;
    transform: rotate(-3deg);
}

.floating-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

.icon-green { background: rgba(16, 185, 129, 0.1); color: var(--neon-emerald); }
.icon-purple { background: rgba(139, 92, 246, 0.1); color: var(--neon-purple); }

/* 3. Infinite Integration Marquee */
.infinite-ticker-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    background: rgba(0,0,0,0.3);
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: tickerAnim 35s linear infinite;
    gap: 64px;
    padding-left: 64px;
    align-items: center;
}

.ticker-content:hover {
    animation-play-state: paused;
}

.infinite-ticker-wrapper::before,
.infinite-ticker-wrapper::after {
    content: "";
    position: absolute;
    top: 0; width: 200px; height: 100%;
    z-index: 2;
    pointer-events: none;
}
.infinite-ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-black), transparent);
}
.infinite-ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-black), transparent);
}

@keyframes tickerAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: var(--text-muted);
    opacity: 0.6;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticker-item:hover {
    opacity: 1;
    color: var(--text-primary);
    transform: scale(1.05);
}

/* 4. Pricing Tiers & Toggle */
.pricing-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 40px 0;
}

.pricing-toggle-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.3s;
}

.pricing-toggle-label.active {
    color: var(--text-primary);
}

.pricing-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.pricing-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pricing-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .pricing-slider {
    background-color: var(--neon-emerald);
}

input:checked + .pricing-slider:before {
    transform: translateX(22px);
}

.pricing-save-badge {
    background: rgba(16, 185, 129, 0.15);
    color: var(--neon-emerald);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-left: -4px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    position: relative;
    z-index: 5;
}

.pricing-card {
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.5) 0%, rgba(9, 9, 11, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

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

.pricing-pro {
    background: linear-gradient(180deg, rgba(20, 20, 28, 0.9) 0%, rgba(9, 9, 16, 1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 50px rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}
.pricing-pro:hover {
    transform: translateY(-5px) scale(1.02);
}

.pricing-badge {
    position: absolute;
    top: -12px; right: 24px;
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.pricing-name {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.pricing-period {
    font-size: 1rem;
    color: var(--text-dim);
    font-weight: 500;
    padding-bottom: 8px;
}

.pricing-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 32px;
    min-height: 48px;
}

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

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.4;
}

.pricing-feature svg {
    flex-shrink: 0;
    color: var(--neon-emerald);
    width: 20px; height: 20px;
}

.btn-pricing {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* .btn-outline removed (Phase 4): conflicted with the global rule in
   components.css and silently broke button consistency on Olynx pages.
   Olynx-specific button needs use .btn-emerald, .btn-premium-primary,
   etc., which are defined locally without name collisions. */

.btn-emerald {
    background: var(--neon-emerald);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-emerald:hover {
    background: #059669;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-pro { transform: none; }
    .pricing-pro:hover { transform: translateY(-4px); }
    .infinite-ticker-wrapper::before, .infinite-ticker-wrapper::after { width: 40px; }
}

/* =========================================================
   # V5: HYPER-IMMERSIVE ARCHITECTURE 
   ========================================================= */

/* 1. Apple-style Sticky Horizontal Scroll */
.h-scroll-viewport {
    width: 100vw;
    max-width: 100%; /* Safety cap */
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: 60px 0;
}

.h-scroll-track {
    display: flex;
    gap: 40px;
    padding: 0 10vw;
    width: max-content;
    will-change: transform;
}

/* Base style for magnetic items */
.magnetic {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
    will-change: transform;
}

.h-scroll-card {
    width: 80vw;
    max-width: 900px;
    height: 500px;
    flex-shrink: 0;
    display: flex;
    background: var(--bento-bg);
    border: 1px solid var(--bento-border);
    border-radius: 24px;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.h-card-content {
    flex: 1;
    min-width: 0;
    width: 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h-card-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.h-card-content p {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.h-card-visual {
    flex: 1;
    min-width: 0;
    width: 50%;
    border-left: 1px solid var(--bento-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.holo-skeleton, .holo-chart {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 1024px) {
    .h-scroll-viewport { 
        overflow: hidden; 
        width: 100%; 
        max-width: 100%;
        margin: 0; 
        padding: 20px 0;
    }
    .h-scroll-track { flex-direction: column; width: 100%; padding: 0 20px; gap: 40px; transform: none !important; }
    .h-scroll-card {
        flex-direction: column;
        height: auto;
        min-width: 100%;
        width: 100%;
    }
    .h-card-content { padding: 30px 20px; width: 100%; }
    .h-card-visual { border-left: none; border-top: 1px solid var(--bento-border); height: 350px; width: 100%; }
}

/* ════════ OLYNX SYNC ENGINE ════════ */
.sync-engine-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    transform-style: preserve-3d;
}

/* Device: iPhone Field App */
.sync-device-mobile {
    width: 280px;
    height: 560px;
    background: #000;
    border: 12px solid #222;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 2px #444;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2;
}

.mobile-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #222;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

.mobile-ui-app {
    padding: 50px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top, rgba(59,130,246,0.1), #000);
}

.mobile-camera-btn {
    margin-top: auto;
    width: 100%;
    padding: 16px;
    border-radius: 50px;
    background: var(--neon-emerald);
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(16,185,129,0.4);
    transition: transform 0.1s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-camera-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 5px rgba(16,185,129,0.8);
}

.mobile-photo-preview {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: auto;
    overflow: hidden;
    position: relative;
    color: rgba(255,255,255,0.3);
}

/* The Data Bridge */
.sync-bridge {
    flex: 1;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
}

.bridge-line {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.bridge-packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px 5px var(--neon-cyan), 0 0 40px var(--neon-blue);
    opacity: 0; 
}

/* Device: Laptop Office Dashboard */
.sync-device-laptop {
    width: 600px;
    height: 480px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    z-index: 2;
}

.laptop-header {
    height: 32px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
}

.mac-dot { width: 12px; height: 12px; border-radius: 50%; background: #444; }
.mac-dot.red { background: #ff5f56; }
.mac-dot.yellow { background: #ffbd2e; }
.mac-dot.green { background: #27c93f; }

.laptop-ui-dashboard {
    flex: 1;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}

.laptop-toast {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    z-index: 100;
}

.toast-icon {
    width: 32px;
    height: 32px;
    background: var(--neon-emerald);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.laptop-skeleton-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px;
}

.laptop-photo-slot {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    border: 1px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
    overflow: hidden;
}

@media (max-width: 1024px) {
    .sync-engine-wrapper {
        flex-direction: column;
    }
    .sync-bridge {
        width: 2px;
        height: 80px;
    }
    .bridge-line {
        width: 2px;
        height: 100%;
    }
    .sync-device-laptop {
        width: 100%;
        max-width: 500px;
        height: 300px;
    }
}