:root {
        --ind: #4F46E5; --ind-l: #818CF8; --ind-d: #4338CA;
        --cyn: #06B6D4; --cyn-l: #22D3EE; --cyn-d: #0891B2;
        --sl-50: #F8FAFC; --sl-100: #F1F5F9; --sl-200: #E2E8F0;
        --sl-300: #CBD5E1; --sl-400: #94A3B8; --sl-500: #64748B;
        --sl-600: #475569; --sl-700: #334155; --sl-800: #1E293B; --sl-900: #0F172A;
        --grad: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
        --grad-soft: linear-gradient(135deg, #EEF2FF 0%, #ECFEFF 100%);
        --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
        --shadow-md: 0 4px 16px rgba(0,0,0,.08);
        --shadow-lg: 0 12px 40px rgba(0,0,0,.1);
        --shadow-glow: 0 8px 32px rgba(79,70,229,.2);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    /* ── PRELOADER ── */
    html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }
    #preloader {
        position: fixed; inset: 0; z-index: 9999; background: #fff; overflow: hidden;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
        opacity: 1; visibility: visible; transition: opacity .5s ease, visibility .5s ease;
    }
    #preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .preloader-logo-wrap { position: relative; width: 220px; height: 138px; animation: preloaderPulse 1.8s ease-in-out infinite; }
    #preloader.opening .preloader-logo-wrap { animation: none; }
    .preloader-logo-half { position: absolute; inset: 0; overflow: hidden; transition: transform .75s cubic-bezier(.76,0,.24,1), opacity .6s ease; }
    .preloader-logo-half img { width: 220px; height: 138px; display: block; }
    .preloader-logo-half.left { clip-path: inset(0 50% 0 0); }
    .preloader-logo-half.right { clip-path: inset(0 0 0 50%); }
    #preloader.opening .preloader-logo-half.left { transform: translateX(-120vw); }
    #preloader.opening .preloader-logo-half.right { transform: translateX(120vw); }
    .preloader-name { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--sl-900); transition: opacity .4s ease, transform .4s ease; }
    .preloader-name span { color: var(--cyn-d); }
    #preloader.opening .preloader-name { opacity: 0; transform: translateY(12px); }
    @keyframes preloaderPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.95); } }
    body { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; background: #fff; color: var(--sl-900); -webkit-font-smoothing: antialiased; line-height: 1.6; }

    /* ── LOGO SVG ── */
    .logo-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .logo-svg { width: 36px; height: 28px; flex-shrink: 0; }
    .logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: var(--sl-900); }
    .logo-text span { color: var(--cyn-d); }

    /* ── NAVBAR ── */
    nav {
        position: fixed; top: 0; left: 0; right: 0; z-index: 200;
        background: rgba(255,255,255,0.9); backdrop-filter: blur(16px) saturate(180%);
        border-bottom: 1px solid rgba(226,232,240,0.8);
    }
    .nav-inner {
        max-width: 1200px; margin: 0 auto; padding: 0 24px;
        height: 68px; display: flex; align-items: center; justify-content: space-between;
    }
    .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }
    .nav-links a { text-decoration: none; color: var(--sl-600); font-size: 14px; font-weight: 500; transition: color .2s; white-space: nowrap; }
    .nav-links a:hover { color: var(--ind); }
    .nav-actions { display: flex; gap: 8px; align-items: center; }
    .btn-text-short { display: none; }

    /* ── MOBILE NAV ── */
    .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; }
    .nav-burger span { display: block; width: 100%; height: 2px; background: var(--sl-700); border-radius: 2px; transition: all .25s; }
    .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; }
    .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 199; padding: 20px; overflow-y: auto; flex-direction: column; gap: 8px; }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a, .nav-mobile-menu button {
        display: flex; align-items: center; gap: 10px; padding: 14px 16px;
        font-size: 15px; font-weight: 600; color: var(--sl-700); text-decoration: none;
        border-radius: 12px; border: 1px solid var(--sl-200); background: #fff;
        cursor: pointer; font-family: inherit; width: 100%; text-align: left;
    }
    .nav-mobile-menu a:hover, .nav-mobile-menu button:hover { background: var(--sl-50); }
    .nav-mobile-menu .nm-grad { background: var(--grad); color: #fff; border: none; }
    .nav-mobile-divider { height: 1px; background: var(--sl-200); margin: 6px 0; }
    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; font-size: 14px; font-weight: 600; border-radius: 9999px; text-decoration: none; cursor: pointer; border: none; transition: all .2s; white-space: nowrap; font-family: inherit; }
    .btn-grad { background: var(--grad); color: #fff; }
    .btn-grad:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
    .btn-ghost { background: transparent; color: var(--ind); border: 1.5px solid var(--sl-300); }
    .btn-ghost:hover { background: #EEF2FF; border-color: var(--ind-l); }
    .btn-white { background: #fff; color: var(--ind); }
    .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
    .btn-outline-w { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); }
    .btn-outline-w:hover { background: rgba(255,255,255,.1); border-color: #fff; }
    .btn-lg { padding: 13px 28px; font-size: 15px; }

    /* ── HERO ── */
    .hero {
        padding: 148px 24px 100px;
        background: #fff;
        position: relative; overflow: hidden;
    }
    .hero::before {
        content: '';
        position: absolute; inset: 0;
        background:
            repeating-linear-gradient(115deg, rgba(79,70,229,.10) 0px, rgba(79,70,229,.10) 2px, transparent 2px, transparent 90px),
            repeating-linear-gradient(115deg, rgba(6,182,212,.07) 0px, rgba(6,182,212,.07) 1px, transparent 1px, transparent 140px),
            radial-gradient(circle at 85% 0%, rgba(6,182,212,.16), transparent 55%);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }
    .hero-grid { display: none; }
    .hero-inner {
        max-width: 1200px; margin: 0 auto;
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 60px; align-items: center; position: relative; z-index: 1;
    }
    .hero-eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 5px 14px; background: linear-gradient(135deg, #EEF2FF, #ECFEFF);
        border: 1px solid #C7D2FE; border-radius: 9999px;
        font-size: 12px; font-weight: 700; color: var(--ind-d);
        text-transform: uppercase; letter-spacing: .8px; margin-bottom: 24px;
    }
    .badge-dot { width: 6px; height: 6px; background: var(--ind); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.5);} }
    .hero h1 {
        font-size: clamp(42px, 5.5vw, 72px); font-weight: 900;
        line-height: 1.06; letter-spacing: -3px; color: var(--sl-900); margin-bottom: 22px;
    }
    .hero h1 .grad { color: var(--ind); }
    .hero-sub { font-size: 18px; color: var(--sl-500); line-height: 1.75; max-width: 480px; margin-bottom: 36px; }
    .hero-sub strong { color: var(--sl-700); font-weight: 600; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
    .hero-social {
        display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sl-400);
        padding-top: 24px; border-top: 1px solid var(--sl-100);
    }
    .avatars { display: flex; }
    .avatars span {
        width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
        margin-left: -8px; background: var(--grad); color: #fff;
        font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    }
    .avatars span:first-child { margin-left: 0; }

    /* hero right: services card */
    .hero-visual { position: relative; }
    .hero-card {
        background: #fff; border-radius: 20px; padding: 28px;
        box-shadow: 0 12px 48px rgba(79,70,229,.1), 0 4px 16px rgba(0,0,0,.06);
        border: 1px solid var(--sl-200);
    }
    .hcard-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--sl-400); margin-bottom: 18px; }
    .hcard-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
    .hcard-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px; background: var(--sl-50); border-radius: 12px; border: 1px solid var(--sl-100); }
    .hcard-ico { width: 36px; height: 36px; background: #EEF2FF; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ind); }
    .hcard-name { font-size: 13px; font-weight: 700; color: var(--sl-900); margin-bottom: 2px; }
    .hcard-desc { font-size: 12px; color: var(--sl-500); line-height: 1.5; }
    .hcard-foot { border-top: 1px solid var(--sl-100); padding-top: 20px; }
    .hcard-note { font-size: 11px; color: var(--sl-400); text-align: center; margin-top: 10px; }
    .dash-card {
        background: #fff; border-radius: 20px; padding: 24px;
        box-shadow: 0 24px 64px rgba(79,70,229,.12), 0 4px 16px rgba(0,0,0,.06);
        border: 1px solid var(--sl-200);
    }
    .dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .dash-title { font-size: 13px; font-weight: 700; color: var(--sl-700); }
    .dash-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; background: #D1FAE5; color: #065F46; border-radius: 9999px; }
    .dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .dstat { background: var(--sl-50); border-radius: 12px; padding: 14px; }
    .dstat-val { font-size: 26px; font-weight: 900; line-height: 1; color: var(--sl-900); }
    .dstat-val.g { color: #10B981; }
    .dstat-val.i { color: var(--ind); }
    .dstat-lbl { font-size: 11px; color: var(--sl-400); margin-top: 4px; }
    .dash-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--sl-500); margin-bottom: 6px; }
    .dash-track { height: 7px; background: var(--sl-200); border-radius: 9999px; overflow: hidden; }
    .dash-fill { height: 100%; background: var(--grad); border-radius: 9999px; animation: grow 2s ease-out forwards; }
    @keyframes grow { from { width: 0; } }
    .dash-activity { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
    .activity-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--sl-50); border-radius: 10px; }
    .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .activity-dot.green { background: #10B981; }
    .activity-dot.blue { background: var(--ind); }
    .activity-dot.cyan { background: var(--cyn); }
    .activity-text { font-size: 12px; color: var(--sl-600); flex: 1; }
    .activity-time { font-size: 11px; color: var(--sl-400); }
    .float-pill {
        position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,.1); border: 1px solid var(--sl-200);
        font-size: 12px; font-weight: 600; color: var(--sl-800);
        display: flex; align-items: center; gap: 8px;
        animation: floatY 4s ease-in-out infinite;
    }
    .float-pill.tl { top: -16px; left: -20px; animation-delay: -2s; }
    .float-pill.br { bottom: -16px; right: -16px; }
    @keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

    /* ── CONTACT TOP ── */
    .contact-top { padding: 72px 24px; background: var(--sl-50); border-top: 1px solid var(--sl-100); }
    .contact-top-inner { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .ct-copy h2 { font-size: 26px; font-weight: 800; color: var(--sl-900); letter-spacing: -.8px; margin-bottom: 10px; }
    .ct-copy p { font-size: 15px; color: var(--sl-500); line-height: 1.7; }
    .ct-copy ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
    .ct-copy ul li { font-size: 14px; color: var(--sl-600); display: flex; align-items: center; gap: 8px; }
    .ct-copy ul li::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--ind); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
    .ct-form { background: #fff; border-radius: 20px; padding: 32px; border: 1px solid var(--sl-200); box-shadow: var(--shadow-md); }
    .ct-form h3 { font-size: 16px; font-weight: 700; color: var(--sl-900); margin-bottom: 20px; }
    .form-group { margin-bottom: 14px; }
    .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--sl-600); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100%; padding: 10px 14px; border: 1.5px solid var(--sl-200); border-radius: 10px;
        font-family: inherit; font-size: 14px; color: var(--sl-900); background: #fff;
        transition: border-color .2s; outline: none;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--ind-l); }
    .form-group textarea { resize: none; height: 80px; }
    .form-submit { width: 100%; padding: 13px; background: var(--grad); color: #fff; font-size: 15px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; transition: opacity .2s; }
    .form-submit:hover { opacity: .9; }
    .form-note { font-size: 11px; color: var(--sl-400); text-align: center; margin-top: 10px; }
    .form-success { display: none; text-align: center; padding: 24px 0; }
    .form-success .ok-icon { font-size: 40px; margin-bottom: 10px; }
    .form-success p { font-size: 15px; color: var(--sl-600); }
    @media (max-width: 768px) { .contact-top-inner { grid-template-columns: 1fr; gap: 32px; } }

    /* ── TRUST BAR ── */
    .trust-bar { padding: 40px 24px; background: linear-gradient(180deg, var(--sl-900), #171717); }
    .trust-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .trust-label { font-size: 13px; color: #94A3B8; font-weight: 500; text-align: center; }
    .trust-stats { display: flex; gap: 48px; flex-wrap: wrap; }
    .trust-stat { text-align: center; }
    .trust-num { font-size: 28px; font-weight: 900; letter-spacing: -1px; color: var(--ind-l); line-height: 1; }
    .trust-lbl { font-size: 12px; color: #94A3B8; margin-top: 3px; }

    /* ── SECTIONS ── */
    section { padding: clamp(32px, 6vw, 64px) 24px; }
    .sec-inner { max-width: 1200px; margin: 0 auto; }
    .sec-header { text-align: center; max-width: 640px; margin: 0 auto clamp(24px, 4vw, 40px); }
    .eyebrow { display: inline-flex; padding: 4px 12px; background: linear-gradient(135deg, #EEF2FF, #ECFEFF); border: 1px solid #C7D2FE; border-radius: 9999px; font-size: 11px; font-weight: 700; color: var(--ind-d); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; }
    .sec-title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; color: var(--sl-900); letter-spacing: -1.5px; line-height: 1.12; margin-bottom: 14px; }
    .sec-title .grad { color: var(--ind); }
    .sec-desc { font-size: 17px; color: var(--sl-500); line-height: 1.7; }

    /* ── SERVICES ── */
    .services { background: var(--sl-50); position: relative; overflow: hidden; }
    .services::before, .industries::before {
        content: '';
        position: absolute; inset: 0;
        background:
            repeating-linear-gradient(115deg, rgba(79,70,229,.10) 0px, rgba(79,70,229,.10) 2px, transparent 2px, transparent 90px),
            repeating-linear-gradient(115deg, rgba(6,182,212,.07) 0px, rgba(6,182,212,.07) 1px, transparent 1px, transparent 140px),
            radial-gradient(circle at 85% 0%, rgba(6,182,212,.16), transparent 55%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }
    .services .sec-inner, .industries .sec-inner { position: relative; z-index: 1; }
    .postventa-diagram-sec {
        background-color: #171717;
        background-image: radial-gradient(circle, rgba(140,140,140,.18) 1px, transparent 1px);
        background-size: 15px 15px;
    }
    .postventa-diagram-sec .eyebrow { background: linear-gradient(135deg,rgba(99,102,241,.15),rgba(6,182,212,.1)); border-color: rgba(99,102,241,.3); color: #818CF8; }
    .postventa-diagram-sec .sec-title { color: #F1F5F9; }
    .postventa-diagram-sec .sec-desc { color: #94A3B8; }
    .postventa-diagram-sec .diagram-card { border-radius: 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
    .postventa-diagram-sec .diagram-card img { display: block; width: 1400px; max-width: none; height: auto; }
    .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .svc-card {
        background: #fff; border-radius: 20px; padding: 32px;
        border: 1px solid var(--sl-200); transition: all .3s; position: relative; overflow: hidden;
    }
    .svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
    .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #C7D2FE; }
    .svc-card:hover::before { transform: scaleX(1); }
    .svc-icon { width: 50px; height: 50px; background: var(--grad-soft); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; color: var(--ind); }
    .svc-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
    .svc-tag { display: inline-flex; padding: 3px 10px; background: #EEF2FF; color: var(--ind); font-size: 11px; font-weight: 700; border-radius: 9999px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
    .svc-name { font-size: 19px; font-weight: 800; color: var(--sl-900); letter-spacing: -.5px; margin-bottom: 10px; }
    .svc-desc { font-size: 14px; color: var(--sl-500); line-height: 1.7; margin-bottom: 18px; }
    .svc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
    .svc-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--sl-600); }
    .svc-list li::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--ind); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
    .svc-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ind); text-decoration: none; transition: gap .2s; }
    .svc-link:hover { gap: 10px; }

    /* ── PROCESS ── */
    .process { background: #fff; }
    .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
    .process-steps::before { content: ''; position: absolute; top: 28px; left: calc(17% + 20px); right: calc(17% + 20px); height: 2px; background: linear-gradient(90deg, var(--ind-l), var(--cyn-l)); }
    .p-step { text-align: center; padding: 0 12px; }
    .p-num { width: 56px; height: 56px; background: var(--grad); color: #fff; font-size: 20px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; z-index: 1; box-shadow: 0 6px 20px rgba(79,70,229,.35); }
    .p-title { font-size: 17px; font-weight: 800; color: var(--sl-900); margin-bottom: 10px; }
    .p-desc { font-size: 14px; color: var(--sl-500); line-height: 1.7; }

    /* ── WHY ── */
    /* TECH STRIP */
    .tech-strip { background: #fff; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; padding: 28px 0; overflow: hidden; }
    .tech-strip-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
    .tech-strip-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #94A3B8; text-align: center; margin-bottom: 20px; }
    .tech-logos { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
    .tech-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .55; transition: opacity .2s; }
    .tech-logo:hover { opacity: 1; }
    .tech-logo span { font-size: 10px; font-weight: 700; color: #475569; letter-spacing: .3px; white-space: nowrap; }
    @media (max-width: 768px) {
        .tech-strip-inner { padding: 0 16px; }
        .tech-logos { gap: 20px; }
    }
    .why { background: var(--sl-900); color: #fff; }
    .why .sec-title { color: #fff; }
    .why .sec-desc { color: rgba(255,255,255,.55); }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .why-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px; transition: all .3s; }
    .why-card:hover { background: rgba(255,255,255,.07); border-color: rgba(99,102,241,.4); transform: translateY(-3px); }
    .why-ico { font-size: 26px; margin-bottom: 14px; }
    .why-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
    .why-desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.7; }
    .why-desc strong { color: var(--cyn-l); font-weight: 600; }

    /* ── INDUSTRIES ── */
    .industries { background: var(--sl-50); position: relative; overflow: hidden; }
    .pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .pill { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #fff; border: 1.5px solid var(--sl-200); border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--sl-700); transition: all .2s; cursor: default; }
    .pill:hover { border-color: var(--ind-l); background: #EEF2FF; color: var(--ind); }

    /* ── CTA ── */
    .cta-section { background: var(--grad); position: relative; overflow: hidden; }
    .cta-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E"); }
    .cta-inner { max-width: 700px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
    .cta-title { font-size: clamp(28px, 4vw, 46px); font-weight: 900; color: #fff; letter-spacing: -2px; line-height: 1.1; margin-bottom: 14px; }
    .cta-desc { font-size: 18px; color: rgba(255,255,255,.82); margin-bottom: 36px; line-height: 1.6; }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    /* ── FOOTER ── */
    footer { background: var(--sl-900); color: rgba(255,255,255,.65); padding: 60px 24px 28px; }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .footer-logo { margin-bottom: 14px; }
    .footer-tagline { font-size: 14px; line-height: 1.7; max-width: 260px; }
    .footer-col-h { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a { font-size: 14px; color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
    .footer-links a:hover { color: rgba(255,255,255,.8); }
    .footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 8px; }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { color: rgba(255,255,255,.35); text-decoration: none; font-size: 13px; }
    .footer-legal a:hover { color: rgba(255,255,255,.7); }

    /* ── WHATSAPP ── */
    .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.5); text-decoration: none; transition: transform .2s, bottom .3s ease, opacity .2s, visibility .2s; }
    .wa-float:hover { transform: scale(1.1); }
    .wa-float svg { width: 28px; height: 28px; fill: white; }
    .tg-float { position: fixed; bottom: 96px; right: 28px; z-index: 999; width: 56px; height: 56px; background: #2AABEE; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(42,171,238,.5); text-decoration: none; transition: transform .2s, bottom .3s ease, opacity .2s, visibility .2s; }
    .tg-float:hover { transform: scale(1.1); }
    .tg-float svg { width: 28px; height: 28px; fill: white; }
    body.chat-open .wa-float, body.chat-open .tg-float { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.5); }
    body.cookies-visible .wa-float { bottom: 112px; }
    body.cookies-visible .tg-float { bottom: 180px; }
    @media (max-width: 600px) { body.cookies-visible .wa-float { bottom: 140px; } body.cookies-visible .tg-float { bottom: 208px; } }
    .wa-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #25D366; opacity: .4; animation: waPulse 2s ease-out infinite; }
    @keyframes waPulse { 0%{transform:scale(1);opacity:.4;} 100%{transform:scale(1.7);opacity:0;} }

    /* ── COOKIE BANNER ── */
    .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; background: var(--sl-900); color: rgba(255,255,255,.85); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(0,0,0,.2); transition: transform .3s; }
    .cookie-banner.hidden { transform: translateY(110%); }
    .cookie-text { font-size: 13px; line-height: 1.6; max-width: 680px; }
    .cookie-text a { color: var(--cyn-l); text-decoration: underline; }
    .cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
    .c-accept { padding: 9px 20px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; border: none; border-radius: 9999px; cursor: pointer; font-family: inherit; }
    .c-reject { padding: 9px 20px; background: transparent; color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; border: 1px solid rgba(255,255,255,.2); border-radius: 9999px; cursor: pointer; font-family: inherit; }

    /* ── ANIMATIONS ── */
    .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
        .hero-inner { grid-template-columns: 1fr; }
        .hero-visual { display: none; }
        .trust-inner { justify-content: center; }
        .footer-top { grid-template-columns: 1fr 1fr; }
    }
    .nav-blog-mobile { display: none; }
    @media (max-width: 768px) {
        .nav-blog-mobile { display: inline-flex; font-size: 14px; font-weight: 600; color: #475569; margin-left: auto; padding: 6px 10px; }
        .nav-blog-mobile:hover { color: #4F46E5; }
        .nav-links { display: none; }
        .nav-inner { padding: 0 16px; }
        .nav-actions { gap: 4px; }
        .nav-actions > a.btn-ghost { display: none; }
        .nav-actions .btn-grad { padding: 9px 14px; font-size: 13px; }
        .nav-burger { display: flex; }
        section, .demo-sec, .db-demo-sec, .contact-top { padding: 60px 16px; }
        .sec-header { margin-bottom: 40px; }
        .svc-grid, .why-grid { grid-template-columns: 1fr; }
        .process-steps { grid-template-columns: 1fr; }
        .process-steps::before { display: none; }
        .footer-top { grid-template-columns: 1fr; gap: 28px; }
        .trust-stats { justify-content: center; gap: 24px; }
        .browser-mockup { border-radius: 10px; margin-bottom: 32px; }
        .browser-url-bar { font-size: 10px; padding: 4px 10px; }
    }
    @media (max-width: 480px) {
        .hero { padding: 120px 16px 80px; }
        .cta-btns { flex-direction: column; align-items: center; }
        .footer-bottom { flex-direction: column; text-align: center; }
        .btn-text-full { display: none; }
        .btn-text-short { display: inline; }
    }

    /* ── DEMO CHAT ── */
    .demo-sec { padding: 88px 24px; background: #0F172A; }
    .demo-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: center; }
    .demo-copy .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cyn-d); margin-bottom: 16px; }
    .demo-copy h2 { font-size: 34px; font-weight: 900; line-height: 1.18; letter-spacing: -.5px; color: #F1F5F9; margin-bottom: 16px; }
    .demo-copy p { font-size: 16px; color: #94A3B8; line-height: 1.7; margin-bottom: 28px; }
    .demo-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .demo-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #CBD5E1; }
    .demo-bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyn-d); flex-shrink: 0; }
    /* Chat widget (navbar popup) */
    .chat-w { background: #fff; border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.5); overflow: hidden; }
    .chat-hdr { background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #1a2744 100%); padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(79,70,229,.25); }
    .chat-hdr-logo-wrap { background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 10px; display: flex; align-items: center; flex-shrink: 0; }
    .chat-hdr-logo { height: 22px; width: auto; display: block; }
    .chat-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--ind),var(--cyn-d)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; }
    .chat-meta { flex: 1; }
    .chat-bot-name { font-size: 13px; font-weight: 700; color: #F1F5F9; }
    .chat-status { font-size: 11px; color: #34D399; display: flex; align-items: center; gap: 4px; }
    .chat-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34D399; animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }
    .chat-msgs { height: 300px; overflow-y: auto; padding: 16px; background-color: #F8FAFC; background-image: repeating-linear-gradient(115deg, rgba(79,70,229,.06) 0px, rgba(79,70,229,.06) 1px, transparent 1px, transparent 26px); display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
    .chat-msgs::-webkit-scrollbar { width: 3px; }
    .chat-msgs::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }
    .chat-msg { display: flex; gap: 8px; align-items: flex-end; }
    .chat-msg.bot .chat-av-sm { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--ind),var(--cyn-d)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; padding: 5px; }
    .chat-msg.bot .chat-av-sm img { width: 100%; height: 100%; object-fit: contain; }
    .chat-msg.user { flex-direction: row-reverse; }
    .chat-bubble { padding: 10px 14px; font-size: 14px; line-height: 1.5; max-width: 240px; word-break: break-word; }
    .chat-msg.bot .chat-bubble { background: #fff; border: 1px solid #E2E8F0; color: #1E293B; border-radius: 16px 16px 16px 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .chat-msg.user .chat-bubble { background: var(--ind); color: #fff; border-radius: 16px 16px 4px 16px; }
    .chat-typing { display: flex; align-items: center; gap: 4px; padding: 10px 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px 16px 16px 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; animation: typing-dot .9s ease-in-out infinite; }
    .chat-typing span:nth-child(2) { animation-delay: .18s; }
    .chat-typing span:nth-child(3) { animation-delay: .36s; }
    @keyframes typing-dot { 0%,80%,100%{ transform:scale(.65); opacity:.4 } 40%{ transform:scale(1); opacity:1 } }
    .chat-inp { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #E2E8F0; background: #fff; }
    .chat-inp input { flex: 1; padding: 9px 14px; border: 1.5px solid #E2E8F0; border-radius: 24px; font-size: 14px; outline: none; font-family: inherit; color: #1E293B; transition: border-color .2s; }
    .chat-inp input:focus { border-color: var(--ind); }
    .chat-inp input::placeholder { color: #94A3B8; }
    .chat-send { width: 38px; height: 38px; border-radius: 50%; background: var(--ind); border: none; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; }
    .chat-send:hover { background: #4338CA; }
    .chat-send svg { width: 16px; height: 16px; }
    /* Navbar bot popup */
    .nav-bot-wrap { position: relative; }
    .nav-chat-pop { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 360px; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.07); overflow: hidden; z-index: 500; }
    .nav-chat-pop.open { display: flex; animation: chatPopIn .18s cubic-bezier(.16,1,.3,1); }
    @keyframes chatPopIn { from{opacity:0;transform:scale(.96) translateY(-8px)} to{opacity:1;transform:scale(1) translateY(0)} }
    .nav-chat-close { background: none; border: none; cursor: pointer; color: #94A3B8; font-size: 18px; line-height: 1; padding: 2px 6px; transition: color .15s; margin-left: auto; flex-shrink: 0; }
    .nav-chat-close:hover { color: #F1F5F9; }
    #navChatMsgs { height: 260px; }
    /* Fullscreen chat overlay (used by "Pruébalo en vivo" on any device) */
    .nav-chat-pop.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: 100%; height: 100dvh; border-radius: 0; z-index: 600; display: flex; flex-direction: column; }
    .nav-chat-pop.fullscreen #navChatMsgs { height: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
    /* Demo preview (static) */
    .demo-preview { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
    .demo-preview-hdr { background: #1E293B; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
    .demo-preview-msgs { padding: 16px; background: #F8FAFC; display: flex; flex-direction: column; gap: 10px; }
    .dp-bot { background: #fff; border: 1px solid #E2E8F0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; color: #1E293B; max-width: 85%; box-shadow: 0 1px 4px rgba(0,0,0,.06); line-height: 1.5; }
    .dp-user { background: var(--ind); color: #fff; padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; align-self: flex-end; max-width: 85%; line-height: 1.5; }
    .demo-try-btn { display: block; width: 100%; padding: 16px; background: var(--grad); color: #fff; border: none; cursor: pointer; font-weight: 700; font-size: 15px; font-family: inherit; transition: opacity .2s; letter-spacing: -.2px; }
    .demo-try-btn:hover { opacity: .88; }
    @media (max-width: 900px) { .demo-inner { grid-template-columns: 1fr; gap: 40px; } }
    @media (max-width: 768px) {
        .nav-bot-wrap { display: block; position: static; }
        #navBotBtn { display: none; }
        .nav-chat-pop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: 100%; height: 100dvh; border-radius: 0; z-index: 600; flex-direction: column; }
        #navChatMsgs { height: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
        .chat-inp input { font-size: 16px; }
        .chat-inp { flex-shrink: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    }

    /* ── DASHBOARD DEMO SECTION ── */
    .db-demo-sec { background: var(--sl-900); padding: clamp(32px, 6vw, 64px) 24px; }
    .db-demo-sec .eyebrow { background: linear-gradient(135deg,rgba(99,102,241,.15),rgba(6,182,212,.1)); border-color: rgba(99,102,241,.3); color: #818CF8; }
    .db-demo-sec .sec-title { color: #F1F5F9; }
    .db-demo-sec .sec-title .grad { color: #A5B4FC; }
    .db-demo-sec .sec-desc { color: #94A3B8; }
    .browser-mockup { max-width: 1080px; margin: 0 auto 48px; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
    .browser-bar { background: #1E293B; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .browser-dots { display: flex; gap: 6px; }
    .browser-dots span { width: 12px; height: 12px; border-radius: 50%; }
    .browser-dots span:nth-child(1) { background: #FF5F57; }
    .browser-dots span:nth-child(2) { background: #FFBD2E; }
    .browser-dots span:nth-child(3) { background: #28CA42; }
    .browser-url-bar { flex: 1; background: rgba(255,255,255,.06); border-radius: 6px; padding: 5px 14px; font-size: 12px; color: #64748B; font-family: monospace; }
    .browser-frame { position: relative; width: 100%; overflow: hidden; background: #0A0F1E; }
    .browser-iframe { width: 1440px; height: 820px; border: none; display: block; transform-origin: 0 0; pointer-events: none; }
    .db-demo-cta { text-align: center; }
    .db-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
    .db-pill { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); color: #818CF8; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; }
    .db-open-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ind), var(--cyn)); color: #fff; padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all .2s; box-shadow: 0 8px 32px rgba(99,102,241,.35); }
    .db-open-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,.5); }
    .db-note { font-size: 13px; color: #475569; margin-top: 14px; }

    /* ── SKIP LINK ── */
    .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; padding: 8px 16px; background: var(--ind); color: #fff; font-size: 14px; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; }
    .skip-link:focus { left: 8px; }

    /* ── HERO PROOF STRIP ── */
    .hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sl-100); }
    .hero-proof-avatars { display: flex; }
    .hero-proof-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .hero-proof-avatars span:first-child { margin-left: 0; }
    .hero-proof-text { font-size: 13px; color: var(--sl-500); line-height: 1.5; }
    .hero-proof-text strong { color: var(--sl-700); }
    .hero-proof-stars { display: block; color: #F59E0B; font-size: 12px; letter-spacing: 1px; margin-top: 2px; }

    /* ── CURSOR ── */
    .btn, .svc-link, .pill, .tech-logo, .db-open-btn, .demo-try-btn,
    .nav-links a, .footer-links a, .wa-float, .tg-float,
    .c-accept, .c-reject, .chat-send, .nav-burger,
    #navBotBtn, #demoTryBtn, #mobileBotBtn { cursor: pointer; }

    /* ── FOCUS VISIBLE ── */
    :focus-visible {
        outline: 2px solid var(--ind);
        outline-offset: 3px;
        border-radius: 4px;
    }
    .btn:focus-visible { outline-offset: 4px; border-radius: 9999px; }
    .nav-links a:focus-visible { border-radius: 6px; }

    /* ── ACTIVE NAV STATE ── */
    .nav-links a.active { color: var(--ind); font-weight: 700; }
    .nav-links a.active::after { content: ''; display: block; height: 2px; background: var(--ind); border-radius: 2px; margin-top: 2px; }

    /* ── LOCAL SEO SECTION ── */
    .local-seo-sec { padding: 72px 24px; background: #F8FAFC; border-top: 1px solid #E2E8F0; }
    .local-seo-inner { max-width: 860px; margin: 0 auto; }
    .local-seo-title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: #0F172A; letter-spacing: -1px; margin-bottom: 20px; font-family: 'Plus Jakarta Sans', sans-serif; }
    .local-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; color: #475569; font-size: 15px; line-height: 1.8; }
    .local-seo-grid p + p { margin-top: 16px; }
    @media (max-width: 640px) { .local-seo-grid { grid-template-columns: 1fr; gap: 20px; } }

    /* ── PREFERS REDUCED MOTION ── */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .fade-up { opacity: 1; transform: none; }
        .badge-dot { animation: none; }
        .wa-pulse { animation: none; }
        .dash-fill { animation: none; width: 78%; }
        .float-pill { animation: none; }
    }