/* =========================================================
       ROOT & RESET
    ========================================================= */
    :root{
        --black:#111111;
        --dark:#181818;
        --white:#ffffff;
        --green:#b7e300;
        --green-dark:#9fc900;
        --light:#f5f5f2;
        --gray:#666666;
        --border:#deded8;
        --container:1200px;
        --shadow: 0 15px 40px rgba(0,0,0,.08);
        --radius:16px;
    }

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

    html{
        scroll-behavior:smooth;
    }

    body{
        font-family:Inter,Arial,sans-serif;
        color:var(--black);
        background:#fff;
        line-height:1.5;
        overflow-x:hidden;
    }

    body.no-scroll{
        overflow:hidden;
    }

    img{
        max-width:100%;
        display:block;
    }

    a{
        text-decoration:none;
        color:inherit;
    }

    button, input{
        font-family:inherit;
    }

    /* =========================================================
       COMMON UTILITIES
    ========================================================= */
    .container{
        width:min(var(--container), calc(100% - 40px));
        margin:auto;
    }

    .section{
        padding:90px 0;
    }

    .section-title{
        font-size:clamp(28px, 4.5vw, 54px);
        line-height:1.1;
        font-weight:900;
        letter-spacing:-1.5px;
    }

    .section-subtitle{
        margin-top:15px;
        color:var(--gray);
        font-size:15px;
        max-width:680px;
        line-height:1.7;
    }

    .green{
        color:#5d7000;
    }

    /* =========================================================
       TOP BAR
    ========================================================= */
    .topbar{
        background:#f5f5f2;
        border-bottom:1px solid #e5e5e0;
        font-size:12px;
    }

    .topbar-inner{
        height:36px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .topbar-right{
        display:flex;
        gap:20px;
        font-weight:600;
    }

    /* =========================================================
       HEADER & NAVIGATION
    ========================================================= */
    .header{
        position:sticky;
        top:0;
        z-index:1000;
        background:white;
        border-bottom:1px solid #e8e8e8;
    }

    .nav{
        min-height:72px;
        display:flex;
        align-items:center;
        gap:20px;
    }

    .logo{
        display:flex;
        align-items:center;
        gap:10px;
        margin-right:auto;
    }

    .logo-icon{
        width:42px;
        height:42px;
        border-radius:10px;
        display:grid;
        place-items:center;
        background:var(--green);
        font-size:20px;
        font-weight:900;
    }

    .logo-text{
        font-weight:900;
        font-size:18px;
        letter-spacing:-.8px;
    }

    .logo-text small{
        display:block;
        color:#777;
        font-size:8px;
        letter-spacing:1px;
    }

    .nav-links{
        display:flex;
        align-items:center;
        gap:24px;
    }

    .nav-links a{
        font-size:13px;
        font-weight:600;
        color:#333;
        transition:color .2s;
    }

    .nav-links a:hover{
        color:#536500;
    }

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

    .login{
        font-size:13px;
        font-weight:700;
        padding:8px 12px;
    }

    .nav-cta{
        background:var(--black);
        color:white;
        padding:10px 16px;
        border-radius:7px;
        font-size:12px;
        font-weight:800;
    }

    /* Mobile Hamburger Trigger */
    .menu-toggle{
        display:none;
        background:none;
        border:none;
        font-size:26px;
        cursor:pointer;
        padding:6px;
        line-height:1;
        color:var(--black);
    }

    /* =========================================================
       MODERN RESPONSIVE MOBILE DRAWER
    ========================================================= */
    .nav-backdrop{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.6);
        z-index:1998;
        opacity:0;
        visibility:hidden;
        transition:opacity .3s ease, visibility .3s ease;
    }

    .nav-backdrop.active{
        opacity:1;
        visibility:visible;
    }

    .mobile-drawer{
        position:fixed;
        top:0;
        right:-320px;
        width:300px;
        height:100%;
        background:#ffffff;
        z-index:1999;
        box-shadow:-5px 0 25px rgba(0,0,0,0.15);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        padding:25px 20px;
        transition:right .3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-drawer.active{
        right:0;
    }

    .drawer-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding-bottom:15px;
        border-bottom:1px solid #eee;
    }

    .drawer-close{
        background:none;
        border:none;
        font-size:24px;
        cursor:pointer;
        color:#444;
    }

    .drawer-links{
        display:flex;
        flex-direction:column;
        gap:4px;
        margin-top:15px;
    }

    .drawer-links a{
        padding:12px 14px;
        font-size:15px;
        font-weight:700;
        color:#222;
        border-radius:8px;
        transition:background .2s;
    }

    .drawer-links a:hover{
        background:var(--light);
        color:#536500;
    }

    .drawer-footer{
        padding-top:20px;
        border-top:1px solid #eee;
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    /* =========================================================
       HERO
    ========================================================= */
    .hero{
        background:#f5f5f2;
        padding:60px 0 70px;
    }

    .hero-grid{
        display:grid;
        grid-template-columns:1.05fr .95fr;
        gap:40px;
        align-items:center;
    }

    .hero h1{
        font-size:clamp(36px, 5.5vw, 68px);
        font-weight:900;
        line-height:1.05;
        letter-spacing:-2.5px;
    }

    .hero h1 span{
        color:#526200;
    }

    .hero-text{
        max-width:650px;
        margin-top:18px;
        font-size:16px;
        color:#555;
        line-height:1.7;
    }

    .hero-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:28px;
    }

    .btn{
        min-height:48px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:12px 22px;
        border-radius:7px;
        font-size:13px;
        font-weight:800;
        transition:.2s;
        text-align:center;
    }

    .btn:hover{
        transform:translateY(-2px);
    }

    .btn-black{
        background:#111;
        color:#fff;
    }

    .btn-green{
        background:var(--green);
        color:#111;
    }

    .btn-white{
        background:white;
        border:1px solid #ccc;
    }

    .hero-note{
        margin-top:22px;
        color:#777;
        font-size:12px;
        line-height:1.6;
    }

    .hero-image{
        position:relative;
        min-height:420px;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,.12);
    }

    .hero-image img{
        width:100%;
        height:100%;
        min-height:420px;
        object-fit:cover;
    }

    .hero-image-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75));
    }

    .hero-image-content{
        position:absolute;
        left:24px;
        right:24px;
        bottom:24px;
        color:white;
    }

    .hero-image-content small{
        color:var(--green);
        font-weight:900;
        letter-spacing:1px;
    }

    .hero-image-content h2{
        margin-top:6px;
        font-size:24px;
        line-height:1.2;
    }

    /* =========================================================
       DOMAIN SEARCH
    ========================================================= */
    .domain-section{
        background:#111;
        color:white;
        padding:45px 0;
    }

    .domain-title{
        text-align:center;
        font-size:28px;
        font-weight:900;
        letter-spacing:-1px;
    }

    .domain-title span{
        color:var(--green);
    }

    .domain-search{
        max-width:800px;
        margin:25px auto 0;
        display:flex;
        background:white;
        border-radius:8px;
        padding:5px;
    }

    .domain-search input{
        flex:1;
        min-width:0;
        border:0;
        outline:0;
        padding:14px 16px;
        font-size:15px;
        color:#111;
    }

    .domain-search button{
        border:0;
        background:var(--green);
        color:#111;
        padding:0 24px;
        border-radius:6px;
        font-weight:900;
        cursor:pointer;
    }

    .domain-tags{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
        margin-top:16px;
    }

    .domain-tags span{
        color:#aaa;
        font-size:11px;
    }

    /* =========================================================
       TRUST STRIP
    ========================================================= */
    .trust{
        border-bottom:1px solid #eee;
        padding:28px 0;
    }

    .trust-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }

    .trust-item{
        display:flex;
        gap:12px;
        align-items:center;
        justify-content:center;
    }

    .trust-icon{
        font-size:24px;
    }

    .trust-item strong{
        display:block;
        font-size:13px;
    }

    .trust-item span{
        display:block;
        color:#777;
        font-size:11px;
    }

    /* =========================================================
       SERVICES
    ========================================================= */
    .services{
        background:white;
    }

    .service-header{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        gap:30px;
        margin-bottom:40px;
    }

    .service-header p{
        max-width:470px;
        color:#666;
        font-size:14px;
        line-height:1.7;
    }

    .service-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:15px;
    }

    .service-card{
        padding:25px 20px;
        min-height:240px;
        border:1px solid #ddd;
        border-radius:14px;
        background:white;
        transition:.25s;
    }

    .service-card:hover{
        transform:translateY(-5px);
        box-shadow:var(--shadow);
        border-color:#bbb;
    }

    .service-icon{
        width:46px;
        height:46px;
        border-radius:10px;
        display:grid;
        place-items:center;
        background:#f0f4d9;
        font-size:22px;
        margin-bottom:18px;
    }

    .service-card h3{
        font-size:16px;
        margin-bottom:8px;
        font-weight:800;
    }

    .service-card p{
        color:#666;
        font-size:12px;
        line-height:1.6;
    }

    .service-card a{
        display:inline-block;
        margin-top:16px;
        font-size:11px;
        font-weight:900;
        text-decoration:underline;
    }

    /* =========================================================
       HOSTING PROMO
    ========================================================= */
    .promo{
        background:#f5f5f2;
    }

    .promo-box{
        display:grid;
        grid-template-columns:1fr 1fr;
        overflow:hidden;
        border-radius:20px;
        background:#111;
        color:white;
    }

    .promo-content{
        padding:50px 40px;
    }

    .promo-label{
        color:var(--green);
        font-size:11px;
        font-weight:900;
        letter-spacing:1.5px;
    }

    .promo-content h2{
        margin-top:12px;
        font-size:clamp(28px, 4vw, 50px);
        line-height:1.05;
        letter-spacing:-1.5px;
    }

    .promo-content p{
        margin-top:16px;
        color:#bbb;
        max-width:480px;
        line-height:1.7;
        font-size:14px;
    }

    .promo-image{
        min-height:360px;
    }

    .promo-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /* =========================================================
       UPDATED 4-COLUMN HOSTING PLANS
    ========================================================= */
    .plans{
        background:#fff;
    }

    .plan-grid{
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:18px;
        margin-top:40px;
    }

    .plan{
        border:1px solid #ddd;
        border-radius:16px;
        padding:26px 20px;
        position:relative;
        background:#fff;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        transition:.25s;
    }

    .plan:hover{
        transform:translateY(-5px);
        box-shadow:var(--shadow);
    }

    .plan.featured{
        border:2px solid #9eb900;
        box-shadow:0 15px 40px rgba(130,150,0,.12);
    }

    .badge{
        position:absolute;
        right:14px;
        top:14px;
        padding:4px 8px;
        background:var(--green);
        border-radius:5px;
        font-size:9px;
        font-weight:900;
    }

    .plan h3{
        font-size:18px;
        font-weight:900;
        line-height:1.2;
    }

    .plan-desc{
        color:#666;
        font-size:12px;
        margin-top:8px;
        line-height:1.5;
        min-height:36px;
    }

    .plan-price-box{
        margin:20px 0 15px;
        padding:15px 0;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
    }

    .plan-price-box .price-label{
        font-size:11px;
        color:#777;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.5px;
    }

    .price{
        font-size:32px;
        font-weight:900;
        letter-spacing:-1px;
        color:var(--black);
        margin-top:2px;
    }

    .price small{
        font-size:12px;
        color:#777;
        font-weight:500;
    }

    .plan-btn{
        width:100%;
        margin-top:auto;
    }

    /* =========================================================
       BUSINESS SECTION
    ========================================================= */
    .business{
        background:#f5f5f2;
    }

    .business-grid{
        display:grid;
        grid-template-columns:.8fr 1.2fr;
        gap:50px;
        align-items:center;
    }

    .business h2{
        font-size:clamp(28px, 4vw, 50px);
        line-height:1.1;
        letter-spacing:-1.5px;
    }

    .business p{
        margin-top:16px;
        color:#666;
        font-size:14px;
        line-height:1.7;
    }

    .business-list{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-top:20px;
    }

    .business-list div{
        padding:15px;
        background:white;
        border-radius:10px;
        border:1px solid #e1e1e1;
    }

    .business-list strong{
        display:block;
        font-size:13px;
    }

    .business-list span{
        color:#777;
        font-size:11px;
    }

    /* =========================================================
       SEO SECTION
    ========================================================= */
    .seo-section{
        background:#111;
        color:white;
    }

    .seo-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:50px;
        align-items:center;
    }

    .seo-section .section-title{
        color:white;
    }

    .seo-section .section-subtitle{
        color:#aaa;
    }

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

    .seo-point{
        padding:16px;
        border:1px solid #333;
        border-radius:10px;
        background:#191919;
    }

    .seo-point strong{
        display:block;
        font-size:13px;
    }

    .seo-point span{
        display:block;
        color:#888;
        font-size:11px;
        margin-top:4px;
    }

    /* =========================================================
       ALL SERVICES LIST
    ========================================================= */
    .all-services{
        background:white;
    }

    .service-list{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:10px;
        margin-top:35px;
    }

    .service-list div{
        padding:14px;
        border:1px solid #e2e2e2;
        border-radius:8px;
        font-size:12px;
        font-weight:700;
        background:#fff;
    }

    .service-list div:hover{
        background:#f5f5f2;
    }

    /* =========================================================
       FAQ
    ========================================================= */
    .faq{
        background:#f5f5f2;
    }

    .faq-list{
        max-width:850px;
        margin:35px auto 0;
    }

    details{
        background:white;
        border-bottom:1px solid #ddd;
        padding:18px 20px;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    summary{
        cursor:pointer;
        font-size:14px;
        font-weight:800;
    }

    details p{
        padding-top:12px;
        color:#666;
        font-size:13px;
        line-height:1.7;
    }

    /* =========================================================
       CTA SECTION
    ========================================================= */
    .cta{
        background:var(--green);
        padding:60px 0;
    }

    .cta-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:25px;
    }

    .cta h2{
        font-size:clamp(28px, 4.5vw, 48px);
        line-height:1.1;
        letter-spacing:-1.5px;
    }

    .cta p{
        margin-top:10px;
        font-size:14px;
        max-width:600px;
        color:#424900;
    }

    .cta-buttons{
        display:flex;
        gap:10px;
        flex-shrink:0;
    }

    /* =========================================================
       FOOTER
    ========================================================= */
    .footer{
        background:#111;
        color:#aaa;
        padding:60px 0 30px;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:1.5fr 1fr 1fr 1fr;
        gap:40px;
    }

    .footer-logo{
        color:white;
        font-size:20px;
        font-weight:900;
    }

    .footer-about p{
        margin-top:14px;
        max-width:340px;
        color:#777;
        font-size:12px;
        line-height:1.7;
    }

    .footer h3{
        color:white;
        font-size:13px;
        margin-bottom:16px;
    }

    .footer a{
        display:block;
        color:#777;
        font-size:12px;
        margin-bottom:8px;
    }

    .footer a:hover{
        color:var(--green);
    }

    .footer-contact{
        margin-top:14px;
    }

    .footer-contact strong{
        color:white;
        display:block;
        font-size:13px;
    }

    .footer-bottom{
        margin-top:40px;
        padding-top:20px;
        border-top:1px solid #2a2a2a;
        display:flex;
        justify-content:space-between;
        gap:15px;
        font-size:11px;
        color:#666;
    }

    /* =========================================================
       FLOATING ACTIONS (CALL + WHATSAPP)
    ========================================================= */
    .floating-actions{
        position:fixed;
        right:20px;
        bottom:20px;
        display:flex;
        flex-direction:column;
        gap:12px;
        z-index:2000;
    }

    .float-btn{
        width:52px;
        height:52px;
        border-radius:50%;
        display:grid;
        place-items:center;
        font-size:22px;
        box-shadow:0 8px 25px rgba(0,0,0,.25);
        transition:transform .2s ease;
        color:white;
    }

    .float-btn:hover{
        transform:scale(1.08);
    }

    .float-whatsapp{
        background:#25d366;
    }

    .float-call{
        background:#0d6efd;
    }

    /* =========================================================
       MOBILE BOTTOM STICKY ACTION BAR
    ========================================================= */
    .mobile-action-bar{
        display:none;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        background:#ffffff;
        border-top:1px solid #ddd;
        padding:8px 12px;
        z-index:2500;
        box-shadow:0 -5px 20px rgba(0,0,0,0.08);
    }

    .mobile-action-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .mobile-action-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding:10px;
        border-radius:8px;
        font-weight:800;
        font-size:13px;
        text-align:center;
    }

    .mobile-btn-call{
        background:#111;
        color:#fff;
    }

    .mobile-btn-whatsapp{
        background:#25d366;
        color:#fff;
    }

    /* =========================================================
       RESPONSIVE BREAKPOINTS
    ========================================================= */
    @media(max-width:1050px){
        .nav-links, .nav-actions .login, .nav-actions .nav-cta{
            display:none;
        }

        .menu-toggle{
            display:block;
        }

        .plan-grid{
            grid-template-columns:repeat(2, 1fr);
        }

        .service-grid{
            grid-template-columns:repeat(2,1fr);
        }

        .service-list{
            grid-template-columns:repeat(3,1fr);
        }

        .trust-grid{
            grid-template-columns:repeat(2,1fr);
        }

        .hero-grid,
        .business-grid,
        .seo-grid{
            grid-template-columns:1fr;
        }

        .promo-box{
            grid-template-columns:1fr;
        }

        .promo-image{
            min-height:280px;
        }

        .cta-inner{
            flex-direction:column;
            align-items:flex-start;
        }
    }

    @media(max-width:700px){
        body{
            padding-bottom:65px; /* Space for Mobile Quick Bar */
        }

        .topbar{
            display:none;
        }

        .container{
            width:calc(100% - 28px);
        }

        .section{
            padding:55px 0;
        }

        .hero{
            padding:40px 0 50px;
        }

        .hero-buttons{
            flex-direction:column;
            width:100%;
        }

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

        .hero-image,
        .hero-image img{
            min-height:260px;
        }

        .domain-search{
            flex-direction:column;
            background:transparent;
            gap:8px;
            padding:0;
        }

        .domain-search input,
        .domain-search button{
            min-height:48px;
            border-radius:7px;
            width:100%;
        }

        .trust-grid{
            grid-template-columns:1fr 1fr;
            gap:15px;
        }

        .service-header{
            display:block;
        }

        .service-header p{
            margin-top:10px;
        }

        .service-grid,
        .plan-grid,
        .business-list,
        .seo-points{
            grid-template-columns:1fr;
        }

        .service-list{
            grid-template-columns:repeat(2,1fr);
        }

        .promo-content{
            padding:30px 20px;
        }

        .cta-buttons{
            flex-direction:column;
            width:100%;
        }

        .cta-buttons .btn{
            width:100%;
        }

        .footer-grid{
            grid-template-columns:1fr;
            gap:25px;
        }

        .footer-bottom{
            flex-direction:column;
            gap:8px;
        }

        .floating-actions{
            display:none;
        }

        .mobile-action-bar{
            display:block;
        }
    }