body {
            font-family: 'Poppins', sans-serif;
            color: #101010;
            background-color: #FFFFFF;
            overflow-x: hidden;
        }

        /* Hero Grid Background - Fades out on left/right, visible full height */
        .hero-grid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(to right, rgba(0, 86, 238, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 86, 238, 0.05) 1px, transparent 1px);
            background-size: 100px 100px;
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
            z-index: 0;
            pointer-events: none;
        }

        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-16px); }
        }
        .floating-badge { 
            animation: float 4s ease-in-out infinite; 
        }

        /* Scroll Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Accordion transition */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
            opacity: 0;
        }
        .accordion-content.expanded {
            opacity: 1;
        }



   /* Gradient backgrounds */
    .bg-gradient-1 { background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%); }
    .bg-gradient-2 { background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); }
    .bg-gradient-3 { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }
    .bg-gradient-4 { background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%); }

    /* Histogram animation */
    @keyframes growBar1 { 0%, 100% { height: 30%; } 50% { height: 80%; } }
    @keyframes growBar2 { 0%, 100% { height: 60%; } 50% { height: 100%; } }
    @keyframes growBar3 { 0%, 100% { height: 40%; } 50% { height: 70%; } }
    @keyframes growBar4 { 0%, 100% { height: 90%; } 50% { height: 50%; } }
    @keyframes growBar5 { 0%, 100% { height: 50%; } 50% { height: 90%; } }
    @keyframes growBar6 { 0%, 100% { height: 20%; } 50% { height: 60%; } }
    
    .mini-bar-1 { animation: growBar1 2s ease-in-out infinite; }
    .mini-bar-2 { animation: growBar2 2.2s ease-in-out infinite; }
    .mini-bar-3 { animation: growBar3 1.8s ease-in-out infinite; }
    .mini-bar-4 { animation: growBar4 2.4s ease-in-out infinite; }
    .mini-bar-5 { animation: growBar5 2.1s ease-in-out infinite; }
    .mini-bar-6 { animation: growBar6 1.9s ease-in-out infinite; }

    /* Wave animation for Uptime */
    @keyframes moveWave {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .wave-path {
        animation: moveWave 4s linear infinite;
    }

    /* Floating Lines Animation for Card 4 */
    @keyframes floatLine1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes floatLine2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
    @keyframes floatLine3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    
    .float-line-1 { animation: floatLine1 3s ease-in-out infinite; }
    .float-line-2 { animation: floatLine2 4s ease-in-out infinite; }
    .float-line-3 { animation: floatLine3 3.5s ease-in-out infinite; }


.cl-mac-window{background:#fff;border:1px solid #E5E7EB;border-radius:20px;overflow:hidden;box-shadow:0 24px 48px -12px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.06)}
.cl-mac-bar{background:#F8F9FA;border-bottom:1px solid #E5E7EB;height:44px;display:flex;align-items:center;padding:0 16px;gap:8px}
.cl-mac-dot{width:12px;height:12px;border-radius:50%}
.cl-mac-dot.r{background:#FF5F57}.cl-mac-dot.y{background:#FEBC2E}.cl-mac-dot.g{background:#28C840}
.cl-mac-bar-title{margin-left:auto;margin-right:auto;font-size:12px;font-weight:600;color:#9CA3AF;letter-spacing:.02em}
.cl-mac-body{display:flex;height:520px}
.cl-mac-sidebar{width:200px;min-width:200px;border-right:1px solid #E5E7EB;background:#FAFAFA;padding:16px 0;overflow-y:auto;flex-shrink:0}
.cl-sidebar-label{font-size:10px;font-weight:700;color:#9CA3AF;letter-spacing:.1em;text-transform:uppercase;padding:0 16px;margin-bottom:8px}
.cl-version-btn{width:100%;padding:9px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;text-align:left;transition:background .15s;font-family:'Poppins',sans-serif}
.cl-version-btn:hover{background:#F3F4F6}
.cl-version-btn.active{background:#E5F0FF}
.cl-v-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:#E5E7EB;color:#6B7280;flex-shrink:0;transition:all .15s}
.cl-version-btn.active .cl-v-badge{background:#0056EE;color:#fff}
.cl-v-name{font-size:12.5px;font-weight:600;color:#101010}
.cl-v-date{font-size:10.5px;color:#6B7280}
.cl-mac-content{flex:1;padding:24px;overflow-y:auto;min-width:0}
.cl-cp-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #E5E7EB}
.cl-cp-version-title{font-size:20px;font-weight:700;color:#101010;letter-spacing:-.3px;margin-bottom:4px}
.cl-cp-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cl-cp-date{font-size:12px;color:#6B7280}
.cl-cp-tag{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px}
.cl-tag-stable{background:#D1FAE5;color:#065F46}
.cl-tag-major{background:#DBEAFE;color:#1D4ED8}
.cl-tag-beta{background:#FEF3C7;color:#92400E}
.cl-tag-legacy{background:#F3F4F6;color:#6B7280}
.cl-group{margin-bottom:18px}
.cl-group-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;color:#6B7280}
.cl-group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cl-dot-added{background:#10B981}.cl-dot-changed{background:#0056EE}.cl-dot-fixed{background:#F59E0B}.cl-dot-removed{background:#EF4444}.cl-dot-security{background:#8B5CF6}
.cl-items{display:flex;flex-direction:column;gap:4px}
.cl-item{display:flex;gap:8px;font-size:12.5px;color:#374151;line-height:1.55}
.cl-item::before{content:'—';color:#D1D5DB;flex-shrink:0;margin-top:1px}
.cl-mobile-nav{display:none;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;gap:8px;padding:0 0 8px;border-bottom:1px solid #E5E7EB;margin-bottom:20px}
.cl-mobile-nav::-webkit-scrollbar{display:none}
.cl-m-btn{flex-shrink:0;padding:7px 14px;border-radius:99px;border:1px solid #E5E7EB;background:#fff;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;color:#6B7280;cursor:pointer;transition:all .15s;white-space:nowrap}
.cl-m-btn.active{background:#0056EE;color:#fff;border-color:#0056EE}
.cl-mobile-content{display:none}
.cl-m-cp-header{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #E5E7EB}
.cl-m-cp-ver{font-size:18px;font-weight:700;color:#101010;letter-spacing:-.3px;margin-bottom:6px}
@media(max-width:700px){
    .cl-mac-window{display:none}
    .cl-mobile-nav{display:flex}
    .cl-mobile-content{display:block}
}
@media(min-width:701px){
    .cl-mobile-nav{display:none!important}
    .cl-mobile-content{display:none!important}
}

.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sc-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .2s}
.sc-card:hover{border-color:#93C5FD;transform:translateY(-3px)}
.sc-card-body{padding:18px 18px 14px;flex:1;display:flex;flex-direction:column;gap:12px}
.sc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sc-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-card-icon svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.04em;white-space:nowrap;flex-shrink:0}
.sc-card-name{font-size:14px;font-weight:700;color:#101010;line-height:1.3;margin-bottom:2px}
.sc-card-sub{font-size:11.5px;color:#6B7280;line-height:1.5}
.sc-features{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.sc-feat{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#374151}
.sc-feat svg{width:13px;height:13px;flex-shrink:0;stroke:#0056EE;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sc-card-footer{border-top:1px solid #E5E7EB;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#FAFAFA}
.sc-footer-info{display:flex;align-items:center;gap:6px}
.sc-footer-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sc-footer-label{font-size:11px;font-weight:600;color:#6B7280}
.sc-footer-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 11px;border-radius:99px;border:none;cursor:pointer;transition:all .15s;font-family:'Poppins',sans-serif}
.sc-card-plus{background:linear-gradient(135deg,#0056EE 0%,#0041B8 100%);border:none}
.sc-card-plus .sc-card-body{padding:22px 20px 18px}
.sc-card-plus:hover{transform:translateY(-3px)}
.sc-plus-count{font-size:36px;font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1}
.sc-plus-label{font-size:12px;color:rgba(255,255,255,.7);font-weight:500;margin-top:4px}
.sc-plus-features{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.sc-plus-feat{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.85)}
.sc-plus-feat svg{width:12px;height:12px;flex-shrink:0;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sc-plus-footer{border-top:1px solid rgba(255,255,255,.15);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-plus-footer-label{font-size:11px;color:rgba(255,255,255,.6);font-weight:500}
.sc-dl-btn{display:flex;align-items:center;gap:6px;background:#fff;color:#0056EE;border:none;border-radius:99px;padding:7px 15px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .15s}
.sc-dl-btn:hover{background:#E5F0FF}
.sc-dl-btn svg{width:13px;height:13px;stroke:#0056EE;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}


.cmp-table{width:100%;border-collapse:collapse;font-family:'Poppins',sans-serif;min-width:700px}
.cmp-th{padding:13px 16px;font-size:12px;font-weight:700;color:#6B7280;text-align:center;background:#F9FAFB;border-bottom:1px solid #E5E7EB;white-space:nowrap}
.cmp-th-feature{text-align:left;width:220px}
.cmp-th-sirhurt{background:#EFF6FF;color:#1D4ED8}
.cmp-head-sirhurt{display:flex;align-items:center;justify-content:center;gap:6px}
.cmp-head-dot{width:6px;height:6px;border-radius:50%;background:#0056EE;flex-shrink:0}
.cmp-head-badge{font-size:9px;font-weight:700;background:#0056EE;color:#fff;padding:2px 7px;border-radius:99px;letter-spacing:.04em}
.cmp-row:hover td{background:#F9FAFB}
.cmp-row:hover .cmp-td-sirhurt{background:#EFF6FF}
.cmp-td{padding:13px 16px;font-size:12.5px;border-bottom:1px solid #F3F4F6;text-align:center;vertical-align:middle;transition:background .15s}
.cmp-td-feature{text-align:left}
.cmp-td-sirhurt{background:#F5F9FF;border-left:2px solid #BFDBFE;border-right:2px solid #BFDBFE}
.cmp-feat-cell{display:flex;align-items:center;gap:10px}
.cmp-feat-icon{width:30px;height:30px;border-radius:8px;background:#F3F4F6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmp-feat-icon svg{width:15px;height:15px;stroke:#6B7280}
.cmp-feat-name{font-size:12.5px;font-weight:600;color:#101010}
.cmp-feat-sub{font-size:10.5px;color:#9CA3AF}
.cmp-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.cmp-pill-green{background:#D1FAE5;color:#065F46}
.cmp-pill-yellow{background:#FEF3C7;color:#92400E}
.cmp-pill-red{background:#FEE2E2;color:#991B1B}
.cmp-pill-blue{background:#DBEAFE;color:#1E40AF}
.cmp-check{font-size:11px;font-weight:700;white-space:nowrap}
.cmp-check-yes{color:#059669}
.cmp-check-partial{color:#D97706}
.cmp-check-no{color:#DC2626}


.faq-item{background:#F5F5F7;border-radius:16px;border:1px solid #E5E7EB;overflow:hidden;transition:box-shadow .2s}
.faq-item:hover{box-shadow:0 20px 40px -10px rgba(0,0,0,.08),0 0 1px 1px rgba(0,0,0,.04)}
.faq-btn{width:100%;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:none;cursor:pointer;text-align:left;font-family:'Poppins',sans-serif}
.faq-q{font-size:13.5px;font-weight:600;color:#101010;line-height:1.4}
.faq-icon{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #E5E7EB;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.faq-icon svg{width:14px;height:14px;stroke:#0056EE;transition:transform .3s}
.faq-icon.open{background:#E5F0FF;border-color:#BFDBFE}
.faq-icon.open svg{transform:rotate(180deg)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease;opacity:0;padding:0 20px}
.faq-body.open{opacity:1;padding:0 20px}
.faq-body p{font-size:13px;color:#6B7280;line-height:1.7;padding-bottom:18px}


.ft-link{font-size:13px;color:#6B7280;transition:color .15s;text-decoration:none}
.ft-link:hover{color:#0056EE}
.ft-social{width:34px;height:34px;border-radius:8px;border:1px solid #E5E7EB;background:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.ft-social:hover{border-color:#0056EE;background:#E5F0FF}
.ft-social svg{width:15px;height:15px;fill:#9CA3AF;transition:fill .2s}
.ft-social:hover svg{fill:#0056EE}