/* ===== GLOBAL BASE STYLES ===== */
    /* Dark canvas, smooth fonts, prevent horizontal scroll from pinned scenes */
    html, body { background: #07070d; color: #e5e7eb; overscroll-behavior: none; }
    body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

    /* ===== GRID BACKGROUND TEXTURE ===== */
    /* Subtle dot grid used behind hero and CTA sections */
    .grid-bg {
      background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* ===== GRADIENT TEXT ===== */
    /* Violet → cyan gradient for highlighted words in headlines */
    .text-gradient {
      background: linear-gradient(92deg, #a78bfa 0%, #22d3ee 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* ===== GLASS CARD ===== */
    /* Semi-transparent card with soft border used across features/pricing/testimonials */
    .glass {
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
    }
    .glass:hover { border-color: rgba(167,139,250,0.35); }

    /* ===== GLOW ORBS ===== */
    /* Blurred color blobs for atmosphere behind hero */
    .orb { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: 0.45; pointer-events: none; }

    /* ===== TOOLS MARQUEE ===== */
    /* CSS-only infinite horizontal scroll of integrated tool names */
    .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ===== STACK SCENE (PINNED GSAP MOMENT) ===== */
    /* Scattered SaaS cards that converge into the SuperStack OS core while scrolling */
    .stack-card { position: absolute; will-change: transform, opacity; }
    .stack-core { box-shadow: 0 0 0 1px rgba(167,139,250,0.35), 0 0 80px rgba(139,92,246,0.45), 0 0 160px rgba(34,211,238,0.25); }
    .stack-scene { height: 100svh; min-height: 640px; }
    .stack-headline-a { top: 88px; }
    .stack-headline-a h2 { max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.15; }
    .stack-scene .stack-card { z-index: 2; }
    .stack-scene .stack-card:nth-of-type(3),
    .stack-scene .stack-card:nth-of-type(4) { top: 35%; }
    .stack-scene .stack-card:nth-of-type(9),
    .stack-scene .stack-card:nth-of-type(10) { top: 44%; }
    @media (max-width: 639px) {
      .stack-scene .stack-card:nth-of-type(9) { left: 8%; }
      .stack-scene .stack-card:nth-of-type(10) { right: 8%; }
      .stack-headline-b { bottom: 28px; }
    }

    /* ===== FLOW PATH (SVG DRAW) ===== */
    /* Stroke stays the same thickness even though the SVG is stretched vertically */
    .flow-path { vector-effect: non-scaling-stroke; }

    /* ===== FAQ ACCORDION ===== */
    /* Rotate chevron when <details> is open; hide default marker */
    details summary::-webkit-details-marker { display: none; }
    details[open] .faq-chevron { transform: rotate(180deg); }
    .faq-chevron { transition: transform .3s ease; }

    /* ===== DASHBOARD MOCK BARS ===== */
    /* Simple animated bar chart in hero dashboard preview */
    .bar { transform-origin: bottom; animation: barpulse 3.2s ease-in-out infinite; }
    .bar:nth-child(2) { animation-delay: .3s } .bar:nth-child(3) { animation-delay: .6s }
    .bar:nth-child(4) { animation-delay: .9s } .bar:nth-child(5) { animation-delay: 1.2s }
    .bar:nth-child(6) { animation-delay: 1.5s } .bar:nth-child(7) { animation-delay: 1.8s }
    @keyframes barpulse { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.72) } }

    /* ===== ALERT CARD ===== */
    /* Notification drops into its existing dashboard position on scroll. */
    .alert-card { will-change: transform, opacity; }

    /* ===== LIVE DOT ===== */
    /* Pulsing green indicator for "agents online" */
    .live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6) } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0) } }

    /* ===== INTEGRATIONS ===== */
    /* Logo tiles: brand color comes from --c on each tile (one tile per brand, no duplicates) */
    .int-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 18px; padding: 22px 12px 18px; overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08);
      transition: border-color .3s ease, translate .3s ease, box-shadow .3s ease; }
    .int-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
      background: radial-gradient(160px circle at 50% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%); }
    /* "translate" (not "transform") so the hover lift is not overridden by GSAP's inline reveal transform */
    .int-tile:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--c) 55%, transparent); }
    .int-tile:hover::before { opacity: 1; }
    .int-logo { position: relative; display: grid; place-items: center; height: 56px; width: 56px; border-radius: 16px; background: #0b0b14; border: 1px solid rgba(255,255,255,0.08); transition: border-color .3s ease; }
    .int-tile:hover .int-logo { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
    @media (max-width: 639px) { .int-tile { padding: 18px 8px 16px; border-radius: 14px; } .int-logo { height: 50px; width: 50px; border-radius: 14px; } }
    @media (prefers-reduced-motion: reduce) { .int-tile { transition: none; } }

    #push-dialog { width: min(92vw, 540px); padding: 0; color: #e5e7eb; background: #111120; border: 1px solid rgba(34,211,238,.3); border-radius: 24px; box-shadow: 0 32px 100px rgba(0,0,0,.65); }
    #push-dialog::backdrop { background: rgba(7,7,13,.8); backdrop-filter: blur(8px); }
    #push-dialog[open] { animation: push-dialog-in .35s ease-out; }
    @keyframes push-dialog-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

    #mobile-menu{display:none}
    #mobile-menu.open{display:block}
    @media (min-width:1024px){#mobile-menu,#mobile-menu.open{display:none !important}}