:root{--bg:#06030a;
    --bg-soft:rgba(255,255,255,.04);
    --bg-strong:rgba(255,255,255,.08);
    --text:#f7f4fb;--muted:#a59eb3;
    --primary:#d306de;
    --primary-2:#47024a;
    --accent:#11df06;
    --border:rgba(255,255,255,.12);
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --radius:24px
}

:root[data-theme="light"]{
    --bg:#f4ecfb;
    --bg-soft:rgba(71,2,74,.05);
    --bg-strong:rgba(71,2,74,.09);
    --text:#14091f;
    --muted:#5f516f;
    --border:rgba(71,2,74,.14);
    --shadow:0 20px 60px rgba(71,2,74,.15)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Inter,sans-serif;
    background:radial-gradient(circle at top left,rgba(211,6,222,.16),transparent 25%),radial-gradient(circle at 85% 20%,rgba(17,223,6,.12),transparent 20%),var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden
}
    
img{
    max-width:100%;
    display:block
}

a{color:inherit;
    text-decoration:none
}
    
button,input,textarea{font:inherit}button{cursor:pointer}

.loader{
    position:fixed;
    inset:0;background:var(--bg);
    display:grid;
    place-items:center;
    z-index:9999;transition:opacity .6s ease
}
    
.loader.is-hidden{
    opacity:0;pointer-events:none
}

.loader__ring{
    width:54px;
    height:54px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.15);
    border-top-color:var(--primary);
    animation:spin .8s linear infinite
}
    
@keyframes spin{
    to{transform:rotate(360deg)}
}
    
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 2rem;
    backdrop-filter:blur(20px);
    background:rgba(6,3,10,.72);
    border-bottom:1px solid var(--border)
}
    
:root[data-theme="light"]

.site-header{
    background:rgba(244,236,251,.8)
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-weight:700;
    letter-spacing:.02em
}

.logo{
    width: 25px;
    height: auto;
}

    
    
.site-nav{
    display:flex;
    align-items:center;
    gap:1.35rem}
    
.site-nav a{
    color:var(--muted);
    transition:color .2s ease
}
    
.site-nav a:hover,.site-nav a:focus-visible{
    color:var(--text)
}

.nav-toggle,.theme-toggle{
    display:none;
    background:var(--bg-soft);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:999px;
    padding:.65rem .8rem
}
    
.section{
    width:min(1180px,calc(100% - 2rem));
    margin:0 auto;padding:6rem 0
}
    
.hero{
    position:relative;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:2rem;
    align-items:center;
    min-height:100svh;
    padding-top:4rem
}
    
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--accent);
    font-size:.9rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
    margin-bottom:1rem;
}

.hero h1,.section-heading h2,.contact-card__copy h2{
    font-size:clamp(2rem,4.2vw,4.3rem);
    line-height:1.04;
    margin:0 0 1rem;
}

.hero p,.section-heading p,.contact-card__copy p,.service-card p,.process-step p,.benefit-card p,.portfolio-card__copy p,.testimonial-card p,.price-card p,.faq-answer p{
    color:var(--muted);
    font-size:1.02rem;
}

.hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:1.75rem
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.9rem 1.3rem;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:600;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease
}

.btn:hover,.btn:focus-visible{
    transform:translateY(-2px)
}

.btn--primary{
    background:linear-gradient(135deg,var(--primary),#f04fe8);
    color:#fff;
    box-shadow:0 12px 30px rgba(211,6,222,.25)
}

.btn--secondary{
    background:var(--bg-soft);
    border-color:var(--border);
    color:var(--text)
}

.btn--full{
    width:100%
}

.status-pill{
    padding:.55rem .8rem;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
    color:var(--muted);
    font-size:.92rem
}

.hero__stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin-top:2rem
}

.hero__stats div{
    padding:1rem;
    border-radius:18px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    backdrop-filter:blur(16px)
}

.hero__stats strong{
    display:block;
    font-size:1.2rem;
    color:var(--text)
}

.hero__stats span{
    color:var(--muted);
    font-size:.9rem
}

.glass-card,.service-card,.process-step,.benefit-card,.portfolio-card,.testimonial-card,.price-card,.faq-item,.contact-card{
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(24px)
}

.hero__card{
    padding:1.4rem;
    border-radius:32px
}

.hero__card-top{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:1rem
}


.check-list{
    display:grid;
    gap:.6rem;
    padding:0;
    margin:1rem 0 1.2rem;
    list-style:none
}

.check-list li::before{
    content:"✓";
    color:var(--accent);
    margin-right:.6rem
}

.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(56px);
    opacity:.28;
    pointer-events:none
}

.orb--one{
    width:260px;
    height:260px;
    background:var(--primary);
    top:8%;
    right:-8%
}

.orb--two{
    width:180px;
    height:180px;
    background:var(--accent);
    bottom:8%;
    left:-6%
}

.orb--three{
    width:140px;
    height:140px;
    background:#6ee7ff;
    top:35%;
    left:40%
}

.section-heading{
    margin-bottom:2rem;
    max-width:760px
}

.services-grid,.benefits-grid,.testimonials-grid,.pricing-grid{
    display:grid;
    gap:1.2rem
}

.services-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.service-card{
    padding:1.35rem;
    border-radius:var(--radius);
    transition:transform .2s ease,border-color .2s ease
}

.service-card:hover,.service-card:focus-within{
    transform:translateY(-4px);
    border-color:rgba(211,6,222,.3)
}

.service-card--featured{
    grid-column:span 2;
    min-height:220px
}

.service-icon{
    font-size:1.5rem;
    margin-bottom:.8rem
}

.process-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem
}

.process-step{
    position:relative;
    padding:1.3rem;
    border-radius:var(--radius)
}

.process-step::after{
    display:none;
}

.process-step:last-child::after{
    display:none
}

.step-number{
    display:inline-block;
    padding:.3rem .65rem;
    border-radius:999px;
    background:rgba(17,223,6,.12);
    color:var(--accent);
    margin-bottom:.7rem;
    font-size:.85rem;
    font-weight:700
}

.benefits-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.benefit-card{
    padding:1.2rem;
    border-radius:var(--radius)
}

.portfolio-card{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:1.4rem;
    padding:1.4rem;
    border-radius:32px;
    align-items:start
}

.portfolio-card__visual {
    margin-top: -20px;
}

.mockup-window{
    padding:1rem;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border)
}

..portfolio-card__visual {
    margin-top: -20px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
}

.mockup-window__hero{

}

.BaliPure {
    border-radius: 20px;
}
.portfolio-card ul{
    padding-left:1.1rem;
    color:var(--muted)
}

.portfolio-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin:1rem 0 .8rem
}

.portfolio-tags span{
    padding:.45rem .7rem;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    font-size:.9rem
}

.portfolio-results{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    color:var(--muted);
    padding-top: 1rem;

}

.list-projects{
    margin-top: -5px;
}

.testimonials-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.testimonial-card{
    padding:1.3rem;
    border-radius:var(--radius)
}

.testimonial-author{
    margin-top:1rem;
    display:flex;
    flex-direction:column;
    gap:.2rem
}

.testimonial-author span{
    color:var(--muted);
    font-size:.92rem
}

.pricing-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.price-card{
    position:relative;
    padding:1.35rem;
    border-radius:32px
}

.price-card--featured{
    transform:translateY(-6px);
    border-color:rgba(211,6,222,.3)
}

.price-badge{
    position:absolute;
    top:1rem;
    right:1rem;
    padding:.35rem .7rem;
    border-radius:999px;
    background:rgba(17,223,6,.16);
    color:var(--accent);
    font-size:.8rem;
    font-weight:700
}

.price{
    font-size:2rem;
    font-weight:800;
    margin:.6rem 0 .4rem
}

.price-card ul{
    list-style:none;
    padding:0;
    margin:1rem 0 1.2rem;
    display:grid;
    gap:.55rem;
    color:var(--muted)
}

.faq-list{
    display:grid;
    gap:.8rem
}

.faq-item{
    border-radius:18px;
    overflow:hidden
}

.faq-question{
    width:100%;
    padding:1rem 1.2rem;
    background:transparent;
    border:0;
    color:var(--text);
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    padding:0 1.2rem
}

.faq-item.is-open .faq-answer{
    max-height:140px;
    padding-bottom:1rem
}

.faq-item.is-open .faq-icon{
    transform:rotate(45deg)
}

.contact-card{
    display:grid;
    gap:1.4rem;
    grid-template-columns:.9fr 1.1fr;
    padding:1.4rem;
    border-radius:32px
}

.contact-details{
    display:grid;
    gap:.5rem;
    margin-top:1rem
}

.contact-details a{
    color:var(--muted)
}

.contact-form{
    display:grid;
    gap:.9rem
}

.contact-form label{
    display:grid;
    gap:.45rem;
    color:var(--text);
    font-weight:600
}


.contact-form input,.contact-form textarea{
    width:100%;
    padding:.9rem 1rem;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text)
}

.contact-form input::placeholder,.contact-form textarea::placeholder{
    color:var(--muted)
}

.site-footer{
    width:min(1180px,calc(100% - 2rem));
    margin:0 auto;
    padding:1.5rem 0 2.5rem;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    color:var(--muted);
    border-top:1px solid var(--border)
}

.brand--footer{
    margin-bottom:.4rem
}

.footer-links{
    display:flex;
    gap:1rem;
    flex-wrap:wrap
}

.whatsapp-float{
    position:fixed;
    right:1.2rem;
    bottom:1.2rem;
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:1.35rem;
    background:linear-gradient(135deg,var(--accent),#45f26e);
    color:#061306;
    box-shadow:0 12px 30px rgba(17,223,6,.3);
    z-index:900
}

.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease,transform .6s ease
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0)
}

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px
}

@media (max-width:980px){
    .services-grid,.benefits-grid,.pricing-grid,.testimonials-grid,.process-list{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .portfolio-card,.contact-card{
        grid-template-columns:1fr
    }
    .service-card--featured{
        grid-column:span 2
    }
}

@media (max-width:760px){
    .site-header{
        padding:1rem
    }.nav-toggle{
        display:inline-flex;
        flex-direction:column;
        gap:.25rem;
        padding:.7rem .85rem
    }
    .nav-toggle span{
        display:block;
        width:18px;
        height:2px;
        background:var(--text);
        border-radius:999px
    }
    .site-nav{
        position:absolute;
        top:calc(100% + .6rem);
        right:1rem;
        flex-direction:column;
        align-items:flex-start;
        padding:1rem;
        background:var(--bg-soft);
        border:1px solid var(--border);
        border-radius:18px;
        transform:translateY(-8px);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease,transform .2s ease
    }
    .site-nav.is-open{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .theme-toggle{
        display:inline-flex
    }
    .hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:2rem
    }
    .hero__stats{
        grid-template-columns:1fr
    }
    .services-grid,.benefits-grid,.pricing-grid,.testimonials-grid,.process-list{
        grid-template-columns:1fr
    }
    .service-card--featured{
        grid-column:span 1
    }
    .process-step::after{
        display:none
    }
    .site-footer{
        flex-direction:column
    }
}