html{
    scroll-behavior:smooth;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{

background:#fafafa;
color:#222;

}

header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 8%;

    position:fixed;

    width:100%;

    top:0;
    left:0;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.4);

    transition:.4s;

    z-index:999;

}


.logo{
    display: flex;
    align-items: center;
    gap: 10px;
	font-size:24px;
font-weight:700;
}

.logo-img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo span{
    font-weight: 700;
}

nav{

display:flex;
gap:35px;
align-items:center;

}

nav a{

text-decoration:none;
color:#444;

}

nav a{

    position:relative;

    text-decoration:none;

    color:#444;

    transition:.3s;

    font-weight:500;

}

nav a:not(.btn)::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:50%;

    width:0;

    height:3px;

    border-radius:20px;

    background:#00a651;

    transition:.35s;

    transform:translateX(-50%);

}

nav a:hover:not(.btn){

    color:#00a651;

}

nav a.active{

    color:#00a651;

}

nav a.active::after{

    width:100%;

}

nav a:hover:not(.btn)::after{

    width:100%;

}

.btn{

background:#000;
color:white;
padding:12px 25px;
border-radius:40px;

}





.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}

.hero{

display:flex;
align-items:center;
justify-content:space-between;

padding:160px 8% 80px;

}

.hero-text{

width:48%;

}

.hero-text span{

background:#E8FFF2;

padding:8px 15px;

border-radius:30px;

color:#00a651;

}

.hero-text h1{

font-size:60px;
margin:20px 0;

line-height:1.1;

}

.hero-text p{

font-size:18px;

color:#666;

margin-bottom:40px;

}

.hero-button{

display:flex;
gap:20px;

}

.primary{

    background:#000;
    color:#fff;

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:64px;

    font-size:18px;
    font-weight:600;

    transition:.3s;
}

.primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}

.secondary{

padding:15px 35px;

border:2px solid #ddd;

border-radius:40px;

text-decoration:none;

color:#000;

}

.secondary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}

.hero-image{
    width: 440px;
    height: 440px;
    margin: auto;

    border-radius: 50%;
    overflow: hidden;
	
	position:relative;
    transition:transform .45s ease,
               box-shadow .45s ease;

    background: linear-gradient(145deg,#f8fffc,#dff7ea);

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12),
    inset 0 0 40px rgba(255,255,255,.8);
}

.hero-image::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,166,81,.22),
    rgba(0,166,81,0));

    opacity:0;

    transition:.45s;

    z-index:-1;

    filter:blur(22px);

}

.hero-image:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:
    0 35px 70px rgba(0,0,0,.18),
    inset 0 0 45px rgba(255,255,255,.9);

}

.hero-image:hover::after{

    opacity:1;

}

.hero-image img{
    width:85%;
    height:85%;
    object-fit:cover;
	 animation:floating 3s infinite ease-in-out;

    border-radius:50%;

    transition:.5s;
}

.hero-image:hover img{

    transform:
        scale(1.06)
        rotate(-2deg);

    filter:drop-shadow(0 25px 30px rgba(0,0,0,.18));

}

.hero-image:hover{

animation-play-state:paused;

}

.hero-image{
    position:relative;
}

.hero-image::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(105,214,153,.35) 0%,
    rgba(105,214,153,.08) 45%,
    transparent 70%);

    z-index:-1;

    filter:blur(25px);

}

section{

padding:65px 8%;

}

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

.reveal .card,
.reveal .produk-card,
.reveal .review-card,
.reveal .trust-item,
.reveal .eco-card,
.reveal .faq-item{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.reveal.show .card,
.reveal.show .produk-card,
.reveal.show .review-card,
.reveal.show .trust-item,
.reveal.show .eco-card,
.reveal.show .faq-item{

    opacity:1;

    transform:translateY(0);

}

.card:nth-child(1),
.produk-card:nth-child(1),
.review-card:nth-child(1),
.trust-item:nth-child(1),
.eco-card:nth-child(1),
.faq-item:nth-child(1){

    transition-delay:.1s;

}

.card:nth-child(2),
.produk-card:nth-child(2),
.review-card:nth-child(2),
.trust-item:nth-child(2),
.eco-card:nth-child(2),
.faq-item:nth-child(2){

    transition-delay:.2s;

}

.card:nth-child(3),
.produk-card:nth-child(3),
.review-card:nth-child(3),
.trust-item:nth-child(3),
.eco-card:nth-child(3),
.faq-item:nth-child(3){

    transition-delay:.3s;

}

.card:nth-child(4),
.produk-card:nth-child(4),
.review-card:nth-child(4),
.trust-item:nth-child(4),
.eco-card:nth-child(4),
.faq-item:nth-child(4){

    transition-delay:.4s;

}

h2{

font-size:40px;

margin-bottom:50px;

text-align:center;

}

.benefit{

padding-bottom:40px;

}

.how{

padding-top:30px;

}

h2::after{

content:"";

display:block;

width:80px;

height:4px;

background:#00a651;

border-radius:20px;

margin:18px auto 0;

}

.grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

}

.card{

background:#fff;

padding:28px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.step{

display:flex;

justify-content:center;

gap:20px;

margin-top:15px;

}

.step div{

background:white;

padding:24px;

border-radius:18px;


width:220px;

text-align:center;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.step div:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.produk-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.produk-card{

background:white;

border-radius:20px;

padding:25px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.produk-card img{

    width:100%;
    transition:.6s;

}

.produk-card:hover img{

    transform:
    scale(1.08)
    translateY(-12px);

    filter:drop-shadow(0 25px 25px rgba(0,0,0,.25));

}

@keyframes floating{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0px);
}

}

.produk-card:hover img{

    animation:floating 2.5s infinite ease-in-out;

}

.produk-card h3,
.produk-card p{

transition:.35s;

}

.produk-card:hover h3{

transform:translateY(-6px);

}

.produk-card:hover p{

transform:translateY(-6px);

color:#00a651;

}

.produk-card::after{

content:"";

position:absolute;

width:180px;
height:180px;

background:rgba(255,255,255,.45);

border-radius:50%;

top:45px;
left:50%;

transform:translateX(-50%) scale(.3);

opacity:0;

transition:.45s;

}

.produk-card:hover::after{

opacity:1;

transform:translateX(-50%) scale(1);

}

/* ===========================
   ANIMASI CARD PRODUK
=========================== */

.produk-card{

    position:relative;
    overflow:hidden;
    transition:.45s;
    cursor:pointer;

}

.produk-card::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(101,210,143,.28),
    rgba(101,210,143,0));

    top:-100px;
    left:50%;

    transform:translateX(-50%) scale(.5);

    opacity:0;

    transition:.5s;

}

.produk-card:hover{

    transform:translateY(-15px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.produk-card:hover::before{

    opacity:1;

    transform:translateX(-50%) scale(1);

}

.review-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.review-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.cta{

background:black;

color:white;

text-align:center;

padding:70px 40px;

}

.cta a{

display:inline-block;

margin-top:30px;

background:white;

color:black;

padding:18px 45px;

border-radius:40px;

text-decoration:none;

font-weight:600;

}


.app-section{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

padding:70px 8%;

}

.app-left{

flex:1;

}

.app-right{

flex:1;

text-align:center;

}

.app-right img{

width:100%;

max-width:650px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.15);

transition:.4s;

}

.app-right img:hover{

transform:translateY(-8px);

}

.app-left ul{

margin:30px 0;

}

.app-left li{

list-style:none;

margin-bottom:15px;

font-size:18px;

}






/* ===========================
   TRUST BAR
=========================== */

.trust-bar{

    width:84%;
    margin:0 auto;
    margin-top:-20px;

    background:#fff;

    border-radius:24px;

    padding:28px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.trust-item{

    text-align:center;

    transition:.35s;

}

.trust-item h3{

    font-size:22px;

    color:#00a651;

    margin-bottom:8px;

}

.trust-item p{

    color:#666;

    font-size:15px;

}

.trust-item:hover{

    transform:translateY(-8px);

}

.hero-proof{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:35px;

    color:#666;

    font-size:16px;

    font-weight:500;

}

.hero-proof span:first-child{

    color:#ffb400;

    font-weight:600;

}

.review-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    transition:.4s;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    border:1px solid #f2f2f2;

}

.review-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(135deg,#00a651,#55d38d);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    margin-bottom:20px;

}

.stars{

    color:#ffb400;

    font-size:22px;

    margin-bottom:18px;

    letter-spacing:2px;

}

.review-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

    font-size:15px;

}

.review-card h4{

    font-size:18px;

    margin-bottom:6px;

}

.review-card span{

    color:#888;

    font-size:14px;

}

.review-top{

    text-align:center;

    margin-top:-20px;

    margin-bottom:45px;

    color:#666;

    font-weight:500;

    font-size:18px;

}

/* ===========================
ECOSYSTEM
=========================== */

.ecosystem{

padding:90px 8%;

text-align:center;

background:#fff;

}

.ecosystem p{

max-width:650px;

margin:auto;

margin-bottom:60px;

color:#666;

line-height:1.8;

}

.eco-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.eco-card{

background:#fafafa;

border-radius:24px;

padding:45px 30px;

text-decoration:none;

color:#222;

transition:.4s;

border:1px solid #eee;

}

.eco-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(0,0,0,.10);

border-color:#00a651;

}

.eco-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

background:linear-gradient(145deg,#f3fff8,#dff8ea);

}

.eco-card h3{

margin-bottom:12px;

font-size:22px;

}

.eco-card span{

color:#777;

font-size:15px;

}

/* ===========================
FOOTER PREMIUM
=========================== */

footer{

    background:#fff;

    padding:40px 20px 20px;

    border-top:1px solid #ececec;

    text-align:center;

}

.footer-bottom{

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #ececec;

    color:#888;

    font-size:14px;

}

/* ===========================
FAQ
=========================== */

.faq{

    padding:80px 8%;

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid #ececec;

    transition:.35s;

}

.faq-item:hover{

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    color:#222;

}

.faq-question span{

    font-size:28px;

    color:#00a651;

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    padding:0 28px 24px;

    color:#666;

    line-height:1.8;

}



@media (max-width:900px){

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

/* ================= HEADER ================= */

header{

    padding:18px 20px;

    flex-direction:column;

    gap:18px;

}



/* ================= MENU ================= */

nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

nav a{

    font-size:15px;

}

.btn{

    display:none;

}

/* ================= HERO ================= */

.hero{

    padding:140px 25px 50px;

    flex-direction:column;

    gap:35px;

    text-align:center;

}

.hero-text{

    width:100%;

}

.hero-text span{

    display:inline-block;

    margin-bottom:18px;

}

.hero h1{

    font-size:52px;

    line-height:1.1;

    margin-bottom:20px;

}

.hero p{

    font-size:20px;

    line-height:1.7;

    margin-bottom:30px;

}

/* ================= BUTTON ================= */

.hero-button{

    width:100%;

    display:flex;

    justify-content:center;

}


/* ================= HERO IMAGE ================= */



.hero-right{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-caption{
    margin-top:18px;
    text-align:center;
}

.hero-caption h3{
    margin:0;
    font-size:28px;
    font-weight:700;
}

.hero-caption p{
    margin-top:5px;
    color:#666;
}
/* ================= BENEFIT ================= */

.grid{

    grid-template-columns:1fr;

    gap:18px;

}

.card{

    padding:24px;

    text-align:left;

}

/* ================= STEP ================= */

.step{

    flex-direction:column;

    gap:18px;

}

.step div{

    width:100%;

}

/* ================= VARIAN ================= */

.produk-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.produk-card{

    max-width:360px;

    margin:auto;

}

/* ================= REVIEW ================= */

.review-grid{

    grid-template-columns:1fr;

}

.review-card{

    text-align:center;

}

/* ================= CTA ================= */

.cta{

    padding:60px 25px;

}

.cta h2{

    font-size:34px;

}

.app-section{

    display:flex;

    flex-direction:column-reverse;

    align-items:center;

    text-align:center;

    gap:30px;

    padding:60px 22px;

}

.app-left{

    width:100%;

}

.app-right{

    width:100%;

}

.app-right img{

    width:80%;

    max-width:260px;

    margin:auto;

    display:block;

}

.app-left h2{

    font-size:38px;

    line-height:1.2;

    margin-bottom:18px;

}

.app-left p{

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;

}

.app-left ul{

    text-align:left;

    max-width:260px;

    margin:0 auto 25px;

}

.app-left li{

    margin-bottom:12px;

}

.app-left .primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    max-width:280px;

    padding:16px 20px;

    margin:auto;

}

.trust-bar{

    width:92%;

    grid-template-columns:1fr 1fr;

    padding:22px;

    margin-top:15px;

}

.trust-item{

    padding:10px;

}

.trust-item h3{

    font-size:20px;

}

.counter{

    font-variant-numeric:tabular-nums;

}

.avatar{

    margin:0 auto 20px;

}

.review-card{

    text-align:center;

}

.eco-grid{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.eco-card{

    display:flex;
    align-items:center;
    text-align:left;

    padding:18px 20px;

    min-height:82px;

}

.eco-icon{

    width:56px;
    height:56px;

    margin:0 18px 0 0;

    flex-shrink:0;

    font-size:26px;

}

.eco-card h3{

    font-size:20px;
    margin-bottom:4px;

}

.eco-card span{

    font-size:14px;

}

/* panah kanan */

.eco-card::after{

    content:"→";

    margin-left:auto;

    font-size:22px;

    color:#00a651;

    font-weight:bold;

}

.faq{

    padding:55px 22px;

}

.faq-question{

    font-size:16px;

    padding:20px;

}

.faq-answer p{

    padding:0 20px 20px;

    font-size:15px;

}

.hero-button{

    display:flex;
    gap:15px;
}

.primary,
.secondary{

    flex:1;
    min-height:70px;
    font-size:18px;

}

.hero-image{

    width:320px;
    height:320px;

}

.hero-image::before{

    width:480px;
    height:480px;

}





}