:root{
            --primary:#5b5df0;
            --primary-dark:#4345d8;
            --secondary:#21c7d9;
            --accent:#ffb84d;
            --bg:#ffffff;
            --bg-soft:#f7f9ff;
            --card:#ffffff;
            --text:#172033;
            --muted:#6f7890;
            --border:#e8ebf5;
            --shadow:0 20px 60px rgba(46,61,125,.12);
            --radius:24px;
        }

        *{
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:"Manrope",sans-serif;
            color:var(--text);
            background:var(--bg);
            overflow-x:hidden;
        }

        a{
            text-decoration:none;
        }

        img{
            max-width:100%;
        }

        .section-padding{
            padding:95px 0;
        }

        .section-soft{
            background:var(--bg-soft);
        }

        .text-muted-custom{
            color:var(--muted);
        }

        .section-label{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:8px 14px;
            border-radius:999px;
            color:var(--primary);
            background:rgba(91,93,240,.08);
            font-size:.75rem;
            font-weight:800;
            letter-spacing:.06em;
            text-transform:uppercase;
        }

        .section-title{
            font-size:clamp(2rem,4vw,3.4rem);
            line-height:1.08;
            letter-spacing:-.045em;
            font-weight:800;
        }

        .btn{
            border-radius:14px;
            padding:12px 20px;
            font-weight:700;
        }

        .btn-primary-custom{
            color:#fff;
            background:linear-gradient(135deg,var(--primary),#7b5cff);
            border:none;
        }

        .btn-primary-custom:hover{
            color:#fff;
            transform:translateY(-1px);
            box-shadow:0 10px 28px rgba(91,93,240,.25);
        }

        /* NAVBAR */

        .main-navbar{
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index:1050;
            padding:16px 0;
            transition:.3s ease;
        }

        .main-navbar.scrolled{
            padding:9px 0;
            background:rgba(255,255,255,.94);
            backdrop-filter:blur(16px);
            box-shadow:0 8px 30px rgba(42,55,110,.07);
        }

        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            color:var(--text);
            font-weight:800;
            font-size:1.1rem;
        }

        .brand-icon{
            width:42px;
            height:42px;
            border-radius:13px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            font-size:1.25rem;
        }

        .nav-link{
            color:var(--text) !important;
            font-size:.88rem;
            font-weight:700;
            padding:12px 13px !important;
        }

        .nav-link:hover{
            color:var(--primary) !important;
        }

        .nav-icon{
            width:42px;
            height:42px;
            border:none;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#f1f3fb;
            color:var(--text);
            font-size:1.1rem;
        }

        /* HERO */

        .hero{
            position:relative;
            min-height:100vh;
            display:flex;
            align-items:center;
            padding-top:105px;
            overflow:hidden;
            background:
                radial-gradient(circle at 10% 20%,rgba(33,199,217,.14),transparent 28%),
                radial-gradient(circle at 90% 15%,rgba(123,92,255,.18),transparent 30%),
                linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
        }

        .hero::before{
            content:"";
            position:absolute;
            width:520px;
            height:520px;
            right:-150px;
            bottom:-180px;
            border-radius:50%;
            background:rgba(91,93,240,.12);
            filter:blur(90px);
        }

        .hero-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 14px;
            border-radius:999px;
            color:var(--primary);
            background:#fff;
            border:1px solid var(--border);
            box-shadow:0 10px 30px rgba(57,70,120,.08);
            font-size:.78rem;
            font-weight:800;
        }

        .hero-badge span{
            width:8px;
            height:8px;
            border-radius:50%;
            background:#22c55e;
            box-shadow:0 0 0 5px rgba(34,197,94,.12);
        }

        .hero-title{
            margin-top:22px;
            font-size:clamp(3rem,6vw,5.7rem);
            line-height:.98;
            letter-spacing:-.065em;
            font-weight:800;
            max-width:850px;
        }

        .hero-title .gradient-text{
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
        }

        .hero-desc{
            max-width:670px;
            margin-top:25px;
            color:var(--muted);
            line-height:1.8;
            font-size:1.02rem;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:30px;
        }

        .hero-trust{
            display:flex;
            flex-wrap:wrap;
            gap:24px;
            margin-top:42px;
        }

        .hero-trust span{
            display:flex;
            align-items:center;
            gap:7px;
            color:var(--muted);
            font-size:.82rem;
            font-weight:600;
        }

        .hero-trust i{
            color:#22c55e;
        }

        .hero-visual{
            position:relative;
            min-height:560px;
            display:flex;
            justify-content:center;
            align-items:center;
        }

        .mockup{
            position:relative;
            width:100%;
            max-width:560px;
            padding:18px;
            border-radius:30px;
            background:#fff;
            border:1px solid var(--border);
            box-shadow:0 30px 80px rgba(53,68,130,.16);
            transform:rotate(2deg);
        }

        .mockup-top{
            display:flex;
            align-items:center;
            gap:6px;
            padding:4px 3px 14px;
        }

        .mockup-dot{
            width:9px;
            height:9px;
            border-radius:50%;
            background:#d8dcec;
        }

        .mockup-screen{
            overflow:hidden;
            border-radius:20px;
            background:#f7f8fd;
        }

        .mockup-screen img{
            width:100%;
            display:block;
        }

        .float-card{
            position:absolute;
            padding:16px 18px;
            border-radius:18px;
            background:#fff;
            border:1px solid var(--border);
            box-shadow:var(--shadow);
        }

        .float-card.one{
            left:-35px;
            top:110px;
        }

        .float-card.two{
            right:-30px;
            bottom:90px;
        }

        .float-icon{
            width:42px;
            height:42px;
            border-radius:13px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(91,93,240,.09);
            color:var(--primary);
            font-size:1.2rem;
        }

        /* STATS */

        .stats-wrap{
            position:relative;
            z-index:5;
            margin-top:-40px;
        }

        .stats-box{
            background:#fff;
            border:1px solid var(--border);
            border-radius:24px;
            box-shadow:var(--shadow);
            padding:26px;
        }

        .stat-item{
            text-align:center;
            padding:10px;
        }

        .stat-number{
            font-size:2rem;
            font-weight:800;
            color:var(--primary);
        }

        .stat-label{
            color:var(--muted);
            font-size:.8rem;
        }

        /* SERVICES */

        .service-card{
            height:100%;
            padding:30px;
            border-radius:24px;
            background:var(--card);
            border:1px solid var(--border);
            transition:.3s ease;
        }

        .service-card:hover{
            transform:translateY(-8px);
            box-shadow:var(--shadow);
        }

        .service-icon{
            width:58px;
            height:58px;
            border-radius:17px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,rgba(91,93,240,.12),rgba(33,199,217,.12));
            color:var(--primary);
            font-size:1.5rem;
            margin-bottom:22px;
        }

        .service-card h3{
            font-size:1.08rem;
            font-weight:800;
        }

        .service-card p{
            color:var(--muted);
            line-height:1.75;
            font-size:.88rem;
            margin-bottom:0;
        }

        .service-list{
            margin:18px 0 0;
            padding:0;
            list-style:none;
        }

        .service-list li{
            display:flex;
            gap:8px;
            margin-bottom:9px;
            color:var(--muted);
            font-size:.82rem;
        }

        .service-list i{
            color:#22c55e;
        }

        /* WHY */

        .why-visual{
            position:relative;
            overflow:hidden;
            min-height:520px;
            border-radius:28px;
            background:
                linear-gradient(135deg,rgba(91,93,240,.92),rgba(33,199,217,.86)),
                url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=85")
                center/cover;
        }

        .why-content-card{
            position:absolute;
            left:30px;
            right:30px;
            bottom:30px;
            padding:28px;
            border-radius:22px;
            background:rgba(255,255,255,.94);
            backdrop-filter:blur(12px);
        }

        .check-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            margin-bottom:17px;
        }

        .check-icon{
            width:38px;
            height:38px;
            flex:0 0 38px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:11px;
            background:rgba(34,197,94,.1);
            color:#16a34a;
        }

        .check-item strong{
            display:block;
            font-size:.92rem;
        }

        .check-item small{
            color:var(--muted);
        }

        /* PORTFOLIO */

        .portfolio-filter{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:8px;
            margin-bottom:35px;
        }

        .portfolio-btn{
            padding:9px 16px;
            border-radius:999px;
            border:1px solid var(--border);
            background:#fff;
            color:var(--text);
            font-size:.82rem;
            font-weight:700;
        }

        .portfolio-btn.active,
        .portfolio-btn:hover{
            background:var(--primary);
            border-color:var(--primary);
            color:#fff;
        }

        .portfolio-card{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            min-height:340px;
            background:#ddd;
        }

        .portfolio-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            position:absolute;
            inset:0;
            transition:.5s;
        }

        .portfolio-card:hover img{
            transform:scale(1.06);
        }

        .portfolio-overlay{
            position:absolute;
            inset:0;
            display:flex;
            align-items:flex-end;
            padding:24px;
            color:#fff;
            background:linear-gradient(to top,rgba(19,26,44,.85),rgba(19,26,44,.05) 65%);
        }

        .portfolio-tag{
            display:inline-flex;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.16);
            backdrop-filter:blur(10px);
            font-size:.7rem;
            margin-bottom:8px;
        }

        .portfolio-overlay h4{
            font-size:1.05rem;
            font-weight:800;
            margin:0;
        }

        /* PROCESS */

        .process-card{
            position:relative;
            padding:28px;
            height:100%;
            border-radius:22px;
            border:1px solid var(--border);
            background:#fff;
        }

        .process-number{
            width:46px;
            height:46px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            color:#fff;
            font-weight:800;
            margin-bottom:20px;
        }

        .process-card h4{
            font-size:1rem;
            font-weight:800;
        }

        .process-card p{
            color:var(--muted);
            font-size:.86rem;
            line-height:1.7;
            margin-bottom:0;
        }

        /* SEO */

        .seo-box{
            overflow:hidden;
            border-radius:30px;
            background:linear-gradient(135deg,#4f55e7,#7067ff 60%,#21c7d9);
            color:#fff;
        }

        .seo-content{
            padding:55px;
        }

        .seo-points{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            margin-top:28px;
        }

        .seo-point{
            display:flex;
            align-items:center;
            gap:9px;
            padding:12px 14px;
            border-radius:13px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.12);
            font-size:.83rem;
        }

        .seo-visual{
            min-height:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:40px;
        }

        .seo-chart{
            width:100%;
            max-width:450px;
            padding:22px;
            border-radius:24px;
            background:#fff;
            color:var(--text);
            box-shadow:0 25px 60px rgba(0,0,0,.18);
        }

        .seo-bars{
            display:flex;
            align-items:flex-end;
            gap:12px;
            height:180px;
            margin-top:20px;
        }

        .seo-bar{
            flex:1;
            border-radius:10px 10px 3px 3px;
            background:linear-gradient(180deg,var(--secondary),var(--primary));
        }


        /* BLOG */

        .blog-card{
            height:100%;
            overflow:hidden;
            border:1px solid var(--border);
            border-radius:22px;
            background:var(--card);
            box-shadow:0 14px 38px rgba(46,61,125,.08);
            transition:.3s ease;
        }

        .blog-card:hover{
            transform:translateY(-6px);
            box-shadow:var(--shadow);
        }

        .blog-image{
            display:block;
            aspect-ratio:16/10;
            overflow:hidden;
            background:var(--bg-soft);
        }

        .blog-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .45s ease;
        }

        .blog-card:hover .blog-image img{
            transform:scale(1.04);
        }

        .blog-content{
            padding:24px;
        }

        .blog-meta{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:12px;
            margin-bottom:12px;
            color:var(--muted);
            font-size:.76rem;
            font-weight:700;
        }

        .blog-category{
            color:var(--primary);
        }

        .blog-title{
            margin-bottom:10px;
            font-size:1.12rem;
            line-height:1.45;
            font-weight:800;
        }

        .blog-title a{
            color:var(--text);
        }

        .blog-title a:hover{
            color:var(--primary);
        }

        .blog-excerpt{
            display:-webkit-box;
            overflow:hidden;
            margin-bottom:18px;
            color:var(--muted);
            font-size:.86rem;
            line-height:1.7;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
        }

        .blog-read-more{
            display:inline-flex;
            align-items:center;
            gap:6px;
            color:var(--primary);
            font-size:.84rem;
            font-weight:800;
        }
        /* TESTIMONIAL */

        .testimonial-card{
            height:100%;
            padding:28px;
            border-radius:22px;
            background:#fff;
            border:1px solid var(--border);
        }

        .stars{
            color:#fbbf24;
            margin-bottom:14px;
        }

        .testimonial-card p{
            color:var(--muted);
            line-height:1.75;
            font-size:.88rem;
        }

        .client{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .client-avatar{
            width:44px;
            height:44px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#eef1ff;
            color:var(--primary);
            font-weight:800;
        }

        /* CTA */

        .cta-box{
            position:relative;
            overflow:hidden;
            padding:55px;
            border-radius:30px;
            color:#fff;
            background:
                radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 25%),
                linear-gradient(135deg,#5759ee,#865cff);
        }

        /* FAQ */

        .accordion-item{
            margin-bottom:12px;
            overflow:hidden;
            border:1px solid var(--border)!important;
            border-radius:16px!important;
        }

        .accordion-button{
            padding:20px;
            font-weight:800;
            color:var(--text);
            box-shadow:none!important;
        }

        .accordion-button:not(.collapsed){
            color:var(--primary);
            background:#f6f7ff;
        }

        .accordion-body{
            color:var(--muted);
            line-height:1.8;
        }

        /* FOOTER */

        footer{
            padding:70px 0 90px;
            background:#11162a;
            color:#fff;
        }

        footer p,
        footer a{
            color:#9aa4bd;
        }

        footer a:hover{
            color:#fff;
        }

        /* WHATSAPP */

        .wa-floating{
            position:fixed;
            right:22px;
            bottom:24px;
            z-index:1080;
        }

        .wa-main{
            width:60px;
            height:60px;
            border:none;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            background:#25d366;
            font-size:1.8rem;
            box-shadow:0 14px 35px rgba(37,211,102,.4);
        }

        .wa-chat{
            position:absolute;
            right:0;
            bottom:75px;
            width:350px;
            max-width:calc(100vw - 35px);
            display:none;
            overflow:hidden;
            border-radius:18px;
            background:#efeae2;
            box-shadow:0 25px 60px rgba(0,0,0,.25);
        }

        .wa-chat.show{
            display:block;
            animation:waShow .25s ease;
        }

        @keyframes waShow{
            from{opacity:0;transform:translateY(10px) scale(.96)}
            to{opacity:1;transform:none}
        }

        .wa-header{
            display:flex;
            align-items:center;
            gap:10px;
            padding:14px;
            color:#fff;
            background:#075e54;
        }

        .wa-avatar{
            width:43px;
            height:43px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#fff;
            color:#075e54;
            font-weight:800;
        }

        .wa-info{
            flex:1;
        }

        .wa-info strong{
            display:block;
            font-size:.87rem;
        }

        .wa-info small{
            opacity:.8;
            font-size:.68rem;
        }

        .wa-body{
            min-height:220px;
            padding:20px 15px;
        }

        .wa-bubble{
            position:relative;
            max-width:88%;
            padding:11px 12px 18px;
            border-radius:0 10px 10px 10px;
            background:#fff;
            color:#222;
            font-size:.79rem;
            line-height:1.55;
        }

        .wa-time{
            position:absolute;
            bottom:3px;
            right:7px;
            font-size:.58rem;
            color:#aaa;
        }

        .wa-footer{
            display:flex;
            gap:7px;
            align-items:center;
            padding:10px;
            background:#f5f5f5;
        }

        .wa-input{
            flex:1;
            border:none;
            outline:none;
            padding:11px 14px;
            border-radius:999px;
            font-size:.78rem;
        }

        .wa-send{
            width:42px;
            height:42px;
            flex:0 0 42px;
            border:none;
            border-radius:50%;
            color:#fff;
            background:#075e54;
        }

        /* OFFCANVAS */

        .mobile-link{
            display:block;
            padding:13px 0;
            border-bottom:1px solid var(--border);
            color:var(--text);
            font-weight:700;
        }

        /* ANIMATION */

        .reveal{
            opacity:0;
            transform:translateY(35px);
            transition:.7s ease;
        }

        .reveal-left{
            opacity:0;
            transform:translateX(-40px);
            transition:.7s ease;
        }

        .reveal-right{
            opacity:0;
            transform:translateX(40px);
            transition:.7s ease;
        }

        .revealed{
            opacity:1;
            transform:none;
        }

        .delay-1{transition-delay:.08s}
        .delay-2{transition-delay:.16s}
        .delay-3{transition-delay:.24s}

        @media(max-width:991.98px){
            .hero{
                min-height:auto;
                padding:150px 0 110px;
            }

            .hero-visual{
                min-height:480px;
                margin-top:30px;
            }

            .float-card.one{
                left:0;
            }

            .float-card.two{
                right:0;
            }

            .seo-content{
                padding:40px;
            }
        }

        @media(max-width:767.98px){
            body{
                padding-bottom:0;
            }

            .section-padding{
                padding:75px 0;
            }

            .hero-title{
                font-size:2.8rem;
            }

            .hero-actions .btn{
                width:100%;
            }

            .hero-visual{
                min-height:390px;
            }

            .mockup{
                transform:none;
            }

            .float-card{
                display:none;
            }

            .stats-wrap{
                margin-top:-20px;
            }

            .why-visual{
                min-height:450px;
            }

            .why-content-card{
                left:18px;
                right:18px;
                bottom:18px;
                padding:20px;
            }

            .seo-content{
                padding:32px 25px;
            }

            .seo-points{
                grid-template-columns:1fr;
            }

            .cta-box{
                padding:40px 25px;
            }
        }

/* Multilevel navigation */
.nav-item{position:relative}.submenu .submenu{top:0;left:100%;margin-left:2px}.submenu .nav-link{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}.mobile-menu-list{list-style:none;margin:0;padding:0}.mobile-menu-list .mobile-menu-list{padding-left:16px;border-left:1px solid var(--border)}.mobile-menu-list .mobile-link{display:flex;width:100%;align-items:center;justify-content:space-between;padding:11px 0;color:var(--text);background:none;border:0;text-align:left;font-weight:700}
@media(max-width:991.98px){.offcanvas{max-width:min(88vw,360px)}}
/* Content pages reuse the active landing typography and spacing. */
.content-page { padding-top: 120px; }
.content-page .article-detail { max-width: 880px; margin-inline: auto; }
.content-page .article-breadcrumb { display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:1.5rem;color:var(--muted);font-size:.9rem; }
.content-page .article-breadcrumb a { color:var(--primary);text-decoration:none; }
.content-page .article-header { margin-bottom:2rem; }
.content-page .detail-title { font-size:3.25rem;font-weight:800;line-height:1.15;margin-bottom:1rem; }
.content-page .article-figure { margin:0 0 2rem; }
.content-page .article-figure img { display:block;width:100%;height:auto;max-height:620px;object-fit:cover;border-radius:8px; }
.content-page .article-caption,.content-page .article-body figcaption { margin-top:.65rem;color:var(--muted);font-size:.875rem;text-align:center; }
.content-page .article-body { font-size:1.075rem;line-height:1.85;overflow-wrap:anywhere; }
.content-page .article-body img { display:block;max-width:100%;height:auto;margin-inline:auto; }
.content-page .article-body figure { margin:2rem 0; }
.content-page .article-body h2,.content-page .article-body h3 { margin-top:2rem;margin-bottom:.75rem;font-weight:700; }
.content-page .content-extra { margin-top:2rem;padding:1.5rem 0;border-top:1px solid rgba(0,0,0,.1); }
.content-page .content-related { margin-top:1rem; }
.content-page .content-related.section-soft { padding-inline:1.5rem;border-radius:8px; }
@media (max-width:767.98px) {
  .content-page { padding-top:96px; }
  .content-page .detail-title { font-size:2rem; }
  .content-page .article-body { font-size:1rem;line-height:1.75; }
  .content-page .content-related.section-soft { padding-inline:.75rem; }
}