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


    body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; background: #ffffff; color: #1e2a3a; line-height: 1.5; -webkit-font-smoothing: antialiased; }
    h1, h2, h3, h4, h5, h6, p, span, li, a, button, input, select, textarea, div { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
    .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; font-family: inherit; }
    ul { list-style: none; }

    /* ─── COMMON ─── */
    .text-gradient { background: linear-gradient(90deg,#37D7FA 0%,#4B72FE 50%,#FF8DF2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .section-tag { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.75rem; display: block; background: linear-gradient(90deg, #37D7FA, #4B72FE, #FF8DF2, #FF8705); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .section-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; margin-bottom: 12px !important; color: #1e2a3a !important; line-height: 1.2 !important; }
    .hero h2, .how-it-works h2, .platforms h2, .problems h2, .value-pillars h2, .enterprise h2, .audience h2, .integrations h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; padding: 0 !important; }
    .check-icon { width: 16px; height: 16px; color: #10b981; flex-shrink: 0; }
    .feature-list li { display: flex; align-items: center; gap: 0.625rem; font-size: 14px; color: #6b7a8d; margin-bottom: 0.75rem; }
    .feature-list{margin: 18px 0px 18px 0px;}

    /* ─── BUTTONS ─── */
    .btn-hero-primary { display: inline-flex !important; align-items: center !important; gap: 12px; padding: 0 40px !important; height: 56px !important; border-radius: 9999px !important; background: linear-gradient(90deg, #00D3F3 0%, #2B7FFF 50%, #9810FA 100%) !important; color: #fff !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0.02em; border: none !important; box-shadow: 0 4px 14px rgba(12,192,223,0.35); transition: opacity 0.2s; position: relative; overflow: hidden; }
    .btn-hero-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%, transparent 100%); animation: shimmer 3s ease-in-out infinite; }
    @keyframes shimmer { 0% { left: -100%; } 50%,100% { left: 120%; } }
    .btn-hero-primary:hover { opacity: 0.9; }
    .btn-hero-outline { display: inline-flex !important; align-items: center !important; gap: 12px; padding: 0 40px !important; height: 56px !important; border-radius: 9999px !important; background: transparent !important; color: #1e2a3a !important; font-size: 18px !important; font-weight: 600 !important; border: 1px solid rgba(226,230,234,0.6) !important; transition: background 0.2s; }
    .btn-hero-outline:hover { background: #f3f5f7; }
    .btn-cta-outline { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0 2.5rem; height: 3.5rem; border-radius: 9999px; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); color: #1e2a3a; font-size: 18px; font-weight: 600; border: 1px solid rgba(226,230,234,0.6); transition: background 0.2s; }
    .btn-cta-outline:hover { background: rgba(255,255,255,0.95); }
    .arrow-icon { width: 20px; height: 20px; }

    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

    /* ─── HERO ─── */
    .hero { padding: 14rem 0 6rem !important; text-align: center; position: relative; overflow: hidden; }
    .hero-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; border-radius: 9999px; background: rgba(12,192,223,0.05); filter: blur(48px); pointer-events: none; }
    .hero .container { position: relative; }
    .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 9999px; border: 1px solid rgba(12,192,223,0.2); background: rgba(12,192,223,0.05); font-size: 12px; font-weight: 600; color: #0cc0df; margin-bottom: 2rem; }
    .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: pulse 2s infinite; }
    .hero h1 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 64px !important; font-weight: 800 !important; line-height: 1.08 !important; max-width: 800px !important; margin: 0 auto 28px !important; color: #1e2a3a !important; }
    .hero p { font-size: 18px; color: #6b7a8d; max-width: 576px; margin: 0 auto 40px; line-height: 1.7; }
    .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
    .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; font-size: 13px; color: #6b7a8d; margin-bottom: 3.5rem; }
    .trust-badges span { display: flex; align-items: center; gap: 0.5rem; }
    .dot-green { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
    .hero-screenshot { position: relative; max-width: 85rem; margin: 0 auto; padding: 1.5px; border-radius: 1rem; background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 33%, #FF8DF2 66%, #FF8705 100%); }
    .hero-screenshot-inner { border-radius: calc(1rem - 1.5px); overflow: hidden; background: white; }
    .hero-screenshot-glow { position: absolute; inset: -2rem; background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 33%, #FF8DF2 66%, #FF8705 100%); opacity: 0.35; filter: blur(48px); z-index: -1; border-radius: 2rem; }
    .screenshot-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(226,230,234,0.5); background: rgba(243,245,247,0.4); }
    .screenshot-dots { display: flex; gap: 6px; }
    .screenshot-dot { width: 12px; height: 12px; border-radius: 50%; }
    .screenshot-dot-r { background: rgba(229,62,62,0.4); }
    .screenshot-dot-a { background: rgba(245,158,11,0.4); }
    .screenshot-dot-g { background: rgba(16,185,129,0.4); }
    .screenshot-url { flex: 1; margin: 0 2rem; height: 24px; border-radius: 0.375rem; background: rgba(243,245,247,0.7); border: 1px solid rgba(226,230,234,0.4); }
    .screenshot-body { overflow: hidden; }
    .screenshot-body img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover; object-position: top; cursor: pointer; max-width: 100% !important; }

    /* ─── LOGO STRIP ─── */
    .logo-strip { padding: 1.5rem 0; border-top: 1px solid rgba(226,230,234,0.5); border-bottom: 1px solid rgba(226,230,234,0.5); }
    .logo-strip .container { display: flex; align-items: center; gap: 2rem; }
    .logo-strip-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7a8d; font-weight: 600; white-space: nowrap; }
    .logo-placeholders { display: flex; gap: 1.25rem; overflow: hidden; }
    .logo-placeholder { height: 32px; width: 96px; border-radius: 0.5rem; background: #f3f5f7; }

    /* ─── HOW IT WORKS ─── */
    .how-it-works { padding: 6rem 0; }
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .step-card { position: relative; padding: 2rem 2rem 0rem 2rem; background: rgba(243,245,247,0.4); border: 1px solid rgba(226,230,234,0.6); }
    .step-card:first-child { border-radius: 1rem 0 0 1rem; }
    .step-card:last-child { border-radius: 0 1rem 1rem 0; }
    .step-num { font-size: 11px; letter-spacing: 0.15em; color: rgba(107,122,141,0.6); font-weight: 700; margin-bottom: 1.25rem; }
    .step-icon { width: 44px; height: 44px; border-radius: 0.75rem; border: 1px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
    .step-icon-primary { background: rgba(12,192,223,0.1); border-color: rgba(12,192,223,0.2); color: #0cc0df; }
    .step-icon-green { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #059669; }
    .step-icon-violet { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.2); color: #7c3aed; }
    .step-card h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 18px !important; margin-bottom: 8px !important; color: #1e2a3a !important; }
    .step-card > p { font-size: 14px; color: #6b7a8d; line-height: 1.6; margin-bottom: 1rem; }
    .step-img { border-radius: 0.75rem; border: none; overflow: hidden; aspect-ratio: 4/3; background: transparent; position: relative; } .step-img img { object-fit: cover; width: 100%; height: 100%; display: block; aspect-ratio: 4/3; position: absolute; bottom: -17px; }
    .step-card:nth-child(2) .step-img img { bottom: -27px; }
    .step-arrow { display: none; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); z-index: 10; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; border: 1px solid #e2e6ea; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

    /* ─── PLATFORMS ─── */
    .platforms { padding: 6rem 0; background: rgba(243,245,247,0.5); }
    .platform-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
    .platform-card { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; overflow: hidden; box-shadow: 0 4px 24px rgba(30,42,58,0.06); transition: box-shadow 0.3s; }
    .platform-card:hover { box-shadow: 0 8px 32px rgba(12,192,223,0.12); }
    .platform-band { height: 4px; }
    .band-primary { background: #0cc0df; }
    .band-violet { background: #8b5cf6; }
    .band-green { background: #10b981; }
    .platform-card-body { padding: 1.75rem; }
    .platform-card-icon { width: 44px; height: 44px; border-radius: 0.75rem; border: 1px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
    .platform-card h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 18px !important; margin-bottom: 8px !important; color: #1e2a3a !important; }
    .platform-card > .platform-card-body > p { font-size: 14px; color: #6b7a8d; line-height: 1.6; margin-bottom: 1.25rem; }
    .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .chip { font-size: 11px; padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid; font-weight: 500; }
    .chip-primary { color: #0cc0df; background: rgba(12,192,223,0.05); border-color: rgba(12,192,223,0.2); }
    .chip-violet { color: #7c3aed; background: rgba(139,92,246,0.05); border-color: rgba(139,92,246,0.2); }
    .chip-green { color: #059669; background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.2); }

    /* Divider */
    .divider-text { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
    .divider-line { flex: 1; height: 1px; background: rgba(226,230,234,0.6); }
    .divider-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(30,42,58,0.7); font-weight: 700; white-space: nowrap; }

    /* Cross-platform card */
    .cross-platform { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; overflow: hidden; box-shadow: 0 4px 24px rgba(30,42,58,0.06); }
    .cross-platform-band { height: 4px; background: linear-gradient(90deg, #0cc0df, #8b5cf6, #10b981); }
    .cross-platform-body { padding: 2rem 2.5rem; }
    .cross-platform-body h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #1e2a3a !important; }
    .cross-platform-body > p { font-size: 14px; color: #6b7a8d; max-width: 42rem; margin-bottom: 1.5rem; line-height: 1.6; }
    .legend { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
    .legend span { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; color: #6b7a8d; }
    .legend-dot { width: 10px; height: 10px; border-radius: 2px; }
    .flow-container { background: rgba(243,245,247,0.5); border-radius: 0.75rem; border: 1px solid rgba(226,230,234,0.6); padding: 1.5rem; overflow-x: auto; }
    .flow-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(107,122,141,0.7); font-weight: 600; margin-bottom: 1.25rem; }
    .flow-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
    .flow-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; min-width: 750px; }
    .flow-step { display: flex; align-items: center; }
    .flow-block { border-radius: 0.75rem; border: 1px solid; overflow: hidden; width: 100%; }
    .flow-block-header { padding: 0.375rem 0.75rem; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    .flow-block-body { padding: 0.75rem; }
    .flow-block-title { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
    .flow-block-desc { font-size: 10px; color: #6b7a8d; }
    .flow-arrow { width: 1.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(107,122,141,0.5); }
    /* Flow block colors */
    .fb-primary { border-color: rgba(12,192,223,0.2); background: rgba(12,192,223,0.03); }
    .fb-primary .flow-block-header { background: rgba(12,192,223,0.1); color: #0cc0df; }
    .fb-violet { border-color: rgba(139,92,246,0.2); background: rgba(139,92,246,0.03); }
    .fb-violet .flow-block-header { background: rgba(139,92,246,0.1); color: #7c3aed; }
    .fb-amber { border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.03); }
    .fb-amber .flow-block-header { background: rgba(245,158,11,0.1); color: #d97706; }
    .fb-green { border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.03); }
    .fb-green .flow-block-header { background: rgba(16,185,129,0.1); color: #059669; }
    .flow-footer { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(226,230,234,0.5); }
    .flow-footer-chip { font-size: 11px; padding: 0.375rem 0.75rem; border-radius: 9999px; border: 1px solid rgba(226,230,234,0.6); color: #6b7a8d; display: flex; align-items: center; gap: 0.5rem; background: #ffffff; }

    /* ─── PROBLEMS ─── */
    .problems { padding: 6rem 0; }
    .problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .problem-card { border-radius: 1rem; border: 1px solid rgba(229,62,62,0.1); background: rgba(229,62,62,0.02); padding: 1.75rem; transition: border-color 0.3s; }
    .problem-card:hover { border-color: rgba(229,62,62,0.2); }
    .problem-icon { width: 36px; height: 36px; border-radius: 0.5rem; background: rgba(229,62,62,0.1); border: 1px solid rgba(229,62,62,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: #e53e3e; }
    .problem-card h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 18px !important; margin-bottom: 8px !important; color: #1e2a3a !important; }
    .problem-card p { font-size: 14px; color: #6b7a8d; line-height: 1.6; }

    /* ─── VALUE PILLARS ─── */
   .value-full > div > p {
  margin-bottom: 12px;
}
    .value-pillars { padding: 6rem 0; background: rgba(243,245,247,0.5); }
    .value-pillars > .container > h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 30px !important; font-weight: 800 !important; margin-bottom: 56px !important; max-width: 512px !important; color: #1e2a3a !important; line-height: 1.2 !important; }
    .value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
    .value-card { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; padding: 2rem 2rem 0 2rem; box-shadow: 0 4px 24px rgba(30,42,58,0.06); }
    .value-card .section-tag { margin-bottom: 0.75rem; }
    .value-card h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: #1e2a3a !important; }
    .value-card > p { font-size: 14px; color: #6b7a8d; line-height: 1.7; margin-bottom: 1.25rem; }
    .value-img { border-radius: 0.75rem 0.75rem 0 0; border: none; overflow: hidden; aspect-ratio: 14/7; background: transparent; margin-bottom: 0; position: relative; box-shadow: -6px 0px 12px rgb(0 0 0 / 5%), 6px 0px 12px rgba(0, 0, 0, 5%), 0px -6px 12px rgba(0, 0, 0, 5%); clip-path: inset(-20px -20px 0px -20px round 0.75rem 0.75rem 0 0); } .value-img img { object-fit: cover; width: 100%; height: 100%; display: block; aspect-ratio: 14/7; position: absolute; top: 6px; left: 0; box-shadow: none; }
    .value-full { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; padding: 2rem 2rem 0 2rem; box-shadow: 0 4px 24px rgba(30,42,58,0.06); }
    .value-full h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: #1e2a3a !important; }
    .value-full > p { font-size: 14px; color: #6b7a8d; max-width: 42rem; line-height: 1.7; margin-bottom: 1.25rem; }
    .value-full-img { border-radius: 0.75rem; border: 1px solid rgba(226,230,234,0.5); overflow: hidden; aspect-ratio: 3/1; max-width: 42rem; background: #f3f5f7; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #6b7a8d; }
    .value-full-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
    .self-healing-img { border-radius: 0.75rem 0.75rem 0 0; /* border: 1px solid rgba(226,230,234,0.5); */ overflow: hidden; /* background: linear-gradient(135deg, rgba(55,215,250,0.07) 0%, rgba(255,141,242,0.07) 50%, rgba(255,135,5,0.07) 100%); */ position: relative; box-shadow: -6px 0px 12px rgb(0 0 0 / 5%), 6px 0px 12px rgba(0, 0, 0, 5%), 0px -6px 12px rgba(0, 0, 0, 5%); clip-path: inset(-20px -20px 0px -20px round 0.75rem 0.75rem 0 0); } .self-healing-img img { width: 100%; height: auto; display: block; }
    .export-note { border-radius: 0.5rem; border: 1px solid rgba(12,192,223,0.15); background: rgba(12,192,223,0.03); padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; }
    .export-note-icon { width: 28px; height: 28px; border-radius: 0.375rem; background: rgba(12,192,223,0.1); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0cc0df; }
    .export-note p { font-size: 14px; color: rgba(30,42,58,0.7); line-height: 1.6; }
    .export-note strong { color: #1e2a3a; font-weight: 600; }

    /* ─── ENTERPRISE ─── */
    .enterprise { padding: 6rem 0; background: rgba(16,185,129,0.03); border-top: 1px solid rgba(16,185,129,0.1); border-bottom: 1px solid rgba(16,185,129,0.1); }
    .enterprise-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3.5rem !important; align-items: center !important; }
    .enterprise h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; margin-bottom: 20px !important; color: #1e2a3a !important; }
    .enterprise > .container > .enterprise-grid > div:first-child > p { color: #6b7a8d; line-height: 1.7; margin-bottom: 1.75rem; font-size: 16px; }
    .model-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
    .model-tag { font-size: 12px; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid rgba(16,185,129,0.25); color: #15803d; background: rgba(16,185,129,0.05); font-weight: 500; }
    .model-tag.muted { border-color: #e2e6ea; color: #6b7a8d; background: rgba(243,245,247,0.5); }
    .data-flow-card { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; padding: 1.75rem; box-shadow: 0 4px 24px rgba(30,42,58,0.06); }
    .data-flow-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(107,122,141,0.7); font-weight: 700; margin-bottom: 1.5rem; }
    .data-flow-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
    .data-flow-box { flex: 1; border-radius: 0.75rem; padding: 1rem; text-align: center; font-size: 14px; font-weight: 600; }
    .data-flow-box.qp-agent { background: rgba(12,192,223,0.05); border: 1px solid rgba(12,192,223,0.15); color: #0cc0df; }
    .data-flow-box.llm { background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15); color: #15803d; }
    .data-flow-box.llm small { display: block; font-size: 10px; color: #6b7a8d; font-weight: 400; margin-top: 0.25rem; }
    .data-flow-box.neutral { background: rgba(243,245,247,0.7); border: 1px solid rgba(226,230,234,0.6); color: #6b7a8d; font-weight: 500; }
    .data-flow-center { text-align: center; font-size: 12px; color: rgba(107,122,141,0.6); font-weight: 500; margin: 0.75rem 0; }
    .data-flow-footer { font-size: 12px; color: rgba(107,122,141,0.5); margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(226,230,234,0.5); }
    .arrow-sm { color: rgba(107,122,141,0.5); flex-shrink: 0; }

    /* ─── AUDIENCE ─── */
    .audience { padding: 6rem 0; background: rgba(243,245,247,0.5); }
    .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .audience-card { border-radius: 1rem; border: 1px solid rgba(226,230,234,0.6); background: #ffffff; padding: 2rem; box-shadow: 0 4px 24px rgba(30,42,58,0.06); }
    .audience-card h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: #1e2a3a !important; }
    .audience-card > p { font-size: 14px; color: #6b7a8d; line-height: 1.6; margin-bottom: 1.5rem; }
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .stat-box { background: rgba(243,245,247,0.7); border-radius: 0.75rem; padding: 1.25rem; border: 1px solid rgba(226,230,234,0.4); }
    .stat-box .stat-value { font-size: 24px; font-weight: 800; }
    .stat-box .stat-label { font-size: 11px; color: #6b7a8d; margin-top: 0.375rem; line-height: 1.4; }

    /* ─── INTEGRATIONS ─── */
    .integrations { padding: 5rem 0; }
    .int-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .int-left .section-tag { margin-bottom: 0.75rem; }
    .int-left h2 { margin-bottom: 1rem !important; }
    .int-left > p { font-size: 15px; color: #6b7a8d; line-height: 1.7; margin-bottom: 1.5rem; max-width: 420px; }
    .int-features { display: flex; flex-direction: column; gap: 0.625rem; }
    .int-feature { display: flex; align-items: center; gap: 0.625rem; font-size: 14px; color: #6b7a8d; }
    .int-right { position: relative; }
    .int-fade { position: absolute; z-index: 10; pointer-events: none; }
    .int-fade-left  { top: 0; bottom: 0; left: 0; width: 4rem; background: linear-gradient(to right, #ffffff, transparent); }
    .int-fade-right { top: 0; bottom: 0; right: 0; width: 4rem; background: linear-gradient(to left, #ffffff, transparent); }
    .int-fade-top   { left: 0; right: 0; top: 0; height: 3rem; background: linear-gradient(to bottom, #ffffff, transparent); }
    .int-fade-bottom{ left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(to top, #ffffff, transparent); }
    .int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
    .int-item { aspect-ratio: 1/1; border-radius: 0.75rem; background: rgba(243,245,247,0.6); border: 1px solid rgba(226,230,234,0.5); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #6b7a8d; font-weight: 500; transition: background 0.2s, border-color 0.2s; }
    .int-item:hover { background: #f3f5f7; border-color: #e2e6ea; }

    .photo-initial { font-size: 40px; font-weight: 700; color: rgba(12,192,223,0.3); }



    /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .steps-grid, .platform-cards, .problem-cards { grid-template-columns: 1fr; }
      .step-card:first-child, .step-card:last-child { border-radius: 1rem; }
      .step-arrow { display: none; }
      .value-grid, .audience-grid { grid-template-columns: 1fr; }
      .enterprise-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
      .value-full-layout { grid-template-columns: 1fr !important; }
      .int-layout { grid-template-columns: 1fr; gap: 2rem; }
      .int-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 768px) {
          .steps-grid{margin-bottom: 10px;}
      .container { padding: 0 1rem; }
      .hero h1 { font-size: 36px !important; }
      .section-title { font-size: 28px !important; }
      .value-pillars > .container > h2 { font-size: 26px !important; }
      .hero-buttons { flex-direction: column; align-items: center; }
      .trust-badges { flex-direction: column; align-items: center; gap: 0.5rem; }
      .int-layout { grid-template-columns: 1fr; gap: 1.5rem; }
      .int-grid { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
      .int-item { font-size: 10px; border-radius: 0.5rem; }
      .int-left > p { max-width: 100%; }
      .value-full { padding: 1.25rem; }
      .enterprise-grid { grid-template-columns: 1fr !important; }
    }
    @media (max-width: 480px) {
          .steps-grid{margin-bottom: 10px;}
      .int-grid { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
      .int-item { font-size: 9px; padding: 0.25rem; }
      .stat-grid { grid-template-columns: 1fr; }
      
      .value-full { padding: 1rem; }
    }
    @media (min-width: 768px) {
      .step-arrow { display: flex; }
      .value-pillars > .container > h2 { font-size: 36px !important; }
    }

    /* ─── SCROLL ANIMATIONS ─── */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(50px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .anim { opacity: 0; }
    .anim.visible { animation-fill-mode: both; }
    .anim-fade-up.visible { animation: fadeInUp 0.6s ease-out forwards; }
    .anim-fade-left.visible { animation: fadeInLeft 0.6s ease-out forwards; }
    .anim-fade-right.visible { animation: fadeInRight 0.6s ease-out forwards; }
    .anim-fade.visible { animation: fadeIn 0.5s ease-out forwards; }
    .anim-scale.visible { animation: scaleIn 0.6s ease-out forwards; }
    .anim-slide-up.visible { animation: slideUp 0.7s ease-out forwards; }

    .delay-1 { animation-delay: 0.1s !important; }
    .delay-2 { animation-delay: 0.2s !important; }
    .delay-3 { animation-delay: 0.3s !important; }
    .delay-4 { animation-delay: 0.4s !important; }
    .delay-5 { animation-delay: 0.5s !important; }

    /* Hover enhancements */
    .platform-card { transition: box-shadow 0.3s, transform 0.3s; }
    .platform-card:hover { transform: translateY(-4px); }
    .problem-card { transition: border-color 0.3s, transform 0.3s; }
    .problem-card:hover { transform: translateY(-2px); }
    .audience-card { transition: transform 0.3s, box-shadow 0.3s; }
    .audience-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(12,192,223,0.12); }
    .int-item { transition: background 0.2s, border-color 0.2s, transform 0.2s; }
    .int-item:hover { transform: translateY(-2px); }
    .int-item-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 0.5rem; }
    .int-item-label { font-size: 11px; color: #746AAA; font-weight: 500; text-align: center; line-height: 1.3; }
    .environment-cta-section{padding: 6rem 0;}