/* =========================
   GOOGLE FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================
   RESET
========================= */

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

:root{
    --pink:#ff5fa2;
    --pink-soft:#ff86b8;
    --pink-pale:#ffd6e9;
    --ink:#3a2c38;
    --ink-soft:#7a6b76;
}

body{
    background:#ffffff;
    color:var(--ink);
}

/* =========================
   NAVBAR
========================= */

header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
    transition:.3s ease;
}

header.scrolled{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 30px rgba(255,95,162,.12);
}

section[id]{
    scroll-margin-top:90px;
}

.navbar{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    padding:18px 25px;
    position:relative;
}

.menu-btn{
    display:none;
    flex-shrink:0;
    width:48px;
    height:48px;

    border-radius:14px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    font-size:24px;
    color:#ff5fa2;

    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(255,95,162,.15);
    z-index:1002;
}

/* Efek hover hanya aktif di perangkat yang benar-benar punya mouse,
   supaya tidak "nyangkut" pink permanen setelah disentuh di HP */
@media (hover:hover) and (pointer:fine){
    .menu-btn:hover{
        background:#ff5fa2;
        color:#fff;
        transform:scale(1.06);
    }
}

.menu-btn:active{
    transform:scale(.94);
}

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

.logo img{
    width:42px;
    height:42px;
    border-radius:50%;
}

.logo span{
    font-size:22px;
    font-weight:700;
    color:#ff6fa9;
}

.navbar ul{
    display:flex;
    list-style:none;
    gap:28px;
}

.navbar ul li a{
    display: flex;
    align-items: center;
    padding: 15px 18px;
    border-radius: 16px;

    color: #444;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;

    transition: .3s ease;
}

.navbar ul li a.active{
    color:#ff5fa2;
    font-weight:700;
}

@media (hover:hover) and (pointer:fine){
    .navbar ul li a:hover{
        color:#ff6fa9;
    }
}

.nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    z-index: 998;
}

.nav-backdrop.active{
    opacity:1;
    pointer-events:auto;
}

/* =========================
   HERO
   (Konsolidasi: sebelumnya rules ini tercecer di 3 tempat
   berbeda -- termasuk terkunci di dalam media query mobile
   -- sehingga desktop kehilangan layout flex/min-height.
   Sekarang jadi satu sumber kebenaran di sini.)
========================= */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
    padding:150px 8% 120px;
}

.hero::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    background:#ffd2e8;
    filter:blur(120px);
    border-radius:50%;
    top:-120px;
    left:-120px;
    opacity:.6;
    z-index:-1;
}

.hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:#ffe9f4;
    filter:blur(110px);
    border-radius:50%;
    right:-100px;
    bottom:-100px;
    opacity:.8;
    z-index:-1;
}

.hero-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:#ffe8f3;
    color:#ff5fa2;
    font-size:13px;
    font-weight:700;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(255,95,162,.15);
}

.hero-logo{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:20px;
    box-shadow:
        0 12px 30px rgba(255,105,180,.18),
        0 0 35px rgba(255,192,203,.35);
    animation:float 3s ease-in-out infinite;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

.hero h1{
    font-size:54px;
    font-weight:700;
    letter-spacing:-1px;
    background:linear-gradient(135deg,#ff4f97,#ff8fbd 60%,#ffb0d3);
    -webkit-background-clip:text;
    background-clip:text;
    color:#ff5f9f;
    -webkit-text-fill-color:transparent;
    margin-bottom:15px;
}

.hero p{
    font-size:18px;
    color:var(--ink-soft);
    margin-bottom:35px;
}

.hero-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff5fa2,#ff86b8);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 15px 35px rgba(255,95,162,.28);
    transition:.35s ease;
    overflow:hidden;
}

.hero-btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);
}

@media (hover:hover) and (pointer:fine){
    .hero-btn:hover::after{
        animation:heroShine 1s ease forwards;
    }
}

@keyframes heroShine{
    to{ left:130%; }
}

.hero-btn:hover{
    transform:translateY(-4px) scale(1.03);
    background:#ff5fa3;
    box-shadow:0 22px 45px rgba(255,95,162,.38);
}

.hero-btn:active{
    transform:scale(.97);
}

/* Scroll Indicator
   -- Ditempel absolute di dalam .hero yang sekarang sudah
   punya min-height:100vh + padding-bottom 120px, jadi selalu
   punya ruang aman di bawah tombol Hero, tidak akan bertabrakan. */
.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:#999;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
    transition:.3s;
}

.scroll-indicator:hover{
    color:#ff5fa2;
}

.scroll-indicator:hover .mouse{
    border-color:#ff5fa2;
}

.scroll-indicator span{
    font-size:12px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.mouse{
    width:24px;
    height:38px;
    border:2px solid #ff8fbc;
    border-radius:20px;
    position:relative;
}

.wheel{
    width:4px;
    height:8px;
    background:#ff5fa2;
    border-radius:99px;
    position:absolute;
    left:50%;
    top:6px;
    transform:translateX(-50%);
    animation:scrollWheel 1.6s infinite;
}

@keyframes scrollWheel{
    0%{
        opacity:0;
        top:6px;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        top:18px;
    }
}

/* =========================
   FEATURES
========================= */

.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:20px 8% 50px;
}

.feature-card{
    background:#fff;
    border:1.5px solid #ffe1ee;
    border-radius:16px;
    padding:22px 10px;
    text-align:center;
    box-shadow:0 8px 22px rgba(255,105,180,.08);
    transition:.3s ease;
}

.feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(255,105,180,.16);
    border-color:#ffc3dd;
}

.feature-card i{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    border-radius:50%;
    background:linear-gradient(135deg,#fff0f7,#ffe3f0);
    font-size:19px;
    color:var(--pink);
}

.feature-card h3{
    font-size:14px;
    color:var(--ink);
    font-weight:600;
}

/* =========================
   SECTION (umum)
========================= */

section{
    padding:90px 8%;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    background:var(--pink-pale);
    color:var(--pink);
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:16px;
    box-shadow:0 8px 20px rgba(255,105,180,.14);
}

.section-head{
    text-align:center;
    margin-bottom:50px;
}

section h2{
    text-align:center;
    font-size:36px;
    font-weight:700;
    letter-spacing:-.5px;
    background:linear-gradient(135deg,#ff5f9f,#ff8fbd);
    -webkit-background-clip:text;
    background-clip:text;
    color:#ff5f9f;
    -webkit-text-fill-color:transparent;
    margin-bottom:45px;
}

.section-head h2{
    margin-bottom:12px;
}

.section-head p{
    color:var(--ink-soft);
    max-width:520px;
    margin:0 auto;
    line-height:1.8;
}

/* Signature motif: glow lembut yang konsisten hadir di beberapa
   section supaya terasa menyatu dengan Hero & Footer, bukan flat putih */
.glow-section{
    position:relative;
    overflow:hidden;
}

.glow-section::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    background:#ffd6e9;
    filter:blur(130px);
    border-radius:50%;
    opacity:.5;
    z-index:0;
    pointer-events:none;
}

.glow-section.glow-left::before{
    top:-60px;
    left:-100px;
}

.glow-section.glow-right::before{
    bottom:-60px;
    right:-100px;
}

.glow-section > *{
    position:relative;
    z-index:1;
}

/* =========================
   PRODUK
========================= */

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:40px;
}

.product-card{
    position:relative;
    background:#fff;
    border:1px solid #ffe1ee;
    border-radius:20px;
    padding:26px 22px 22px;
    box-shadow:0 10px 30px rgba(255,105,180,.08);
    transition:.35s ease;
    overflow:hidden;
}

.product-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--pink),var(--pink-soft));
    opacity:0;
    transition:.35s ease;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(255,105,180,.18);
    border-color:#ffc3dd;
}

.product-card:hover::before{
    opacity:1;
}

.product-card .img-badge{
    width:84px;
    height:84px;
    border-radius:22px;
    background:linear-gradient(135deg,#fff0f7,#ffe3f0);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
    transition:.35s ease;
}

.product-card:hover .img-badge{
    background:linear-gradient(135deg,#ffe3f0,#ffd0e6);
    transform:scale(1.05);
}

.product-card img{
    width:52px;
    height:52px;
    object-fit:contain;
    display:block;
}

.product-card h3{
    text-align:center;
    color:var(--ink);
    font-weight:700;
    margin-bottom:16px;
    font-size:19px;
}

.product-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.product-card li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px dashed #f2dbe6;
    font-size:14px;
    color:var(--ink-soft);
}

.product-card li:last-child{
    border-bottom:none;
}

.product-card span{
    font-weight:700;
    color:var(--pink);
    background:#fff0f7;
    padding:4px 10px;
    border-radius:8px;
    font-size:13px;
}

.detail-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:20px;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(135deg,var(--pink),var(--pink-soft));
    color:#fff;
    padding:13px;
    border:none;
    border-radius:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 10px 22px rgba(255,95,162,.22);
}

.detail-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 32px rgba(255,95,162,.32);
}

/* =========================
   CARA ORDER (Timeline)
========================= */

.timeline{
    max-width:700px;
    margin:auto;
}

.timeline-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
    position:relative;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:20px;
    top:48px;
    width:2px;
    height:55px;
    background:#ffd3e5;
}

.timeline-item:last-child::before{
    display:none;
}

.circle{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--pink),var(--pink-soft));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
    box-shadow:0 8px 18px rgba(255,95,162,.3);
}

.content{
    background:#fff;
    width:100%;
    padding:18px 20px;
    border-radius:16px;
    border:1px solid #ffe1ec;
    box-shadow:0 8px 24px rgba(255,105,180,.08);
    transition:.3s ease;
}

.timeline-item:hover .content{
    box-shadow:0 14px 30px rgba(255,105,180,.16);
    transform:translateY(-2px);
}

.content h3{
    color:var(--ink);
    font-weight:700;
    margin-bottom:6px;
    font-size:17px;
}

.content p{
    color:var(--ink-soft);
    font-size:14px;
}

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

.faq-section{
    padding:90px 20px;
}

.faq-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 55px;
}

.faq-tag{
    display:inline-block;
    padding:8px 18px;
    background:#ffe8f3;
    color:#ff5fa2;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;
    box-shadow:0 8px 20px rgba(255,105,180,.12);
}

.faq-header h2{
    font-size:42px;
    color:#ff5fa2;
    line-height:1.25;
    margin-bottom:18px;
}

.faq-header p{
    color:#777;
    line-height:1.8;
    max-width:560px;
    margin:auto;
}

.faq-list{
    max-width:820px;
    margin:50px auto 0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{
    background:#fff;
    border:1px solid #ffe0ee;
    border-radius:22px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 30px rgba(255,105,180,.08);
}

.faq-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(255,105,180,.15);
}

.faq-question{
    width:100%;
    padding:22px 25px;
    border:none;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.faq-question h3{
    font-size:17px;
    margin-bottom:4px;
    color:#333;
}

.faq-question small{
    color:#999;
}

.faq-question i{
    font-size:18px;
    color:#ff5fa2;
    transition:.3s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.35s;
    padding:0 25px;
}

.faq-answer p{
    padding-bottom:22px;
    color:#666;
    line-height:1.8;
}

.faq-item.active{
    border-color:#ff8cbc;
}

.faq-item.active i{
    transform:rotate(45deg);
}

.faq-item.active .faq-answer{
    max-height:200px;
}

/* =========================
   CONTACT
========================= */

.contact-section{
    max-width:900px;
    margin:80px auto;
    text-align:center;
    padding:0 20px;
}

.contact-section h2{
    color:#ff69a6;
    margin-bottom:12px;
}

.contact-section p{
    color:#666;
    line-height:1.8;
    margin-bottom:35px;
}

.contact-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.contact-buttons a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 22px;
    text-decoration:none;
    color:#ff69a6;
    border:2px solid #ffd5e6;
    border-radius:14px;
    background:#fff;
    transition:.3s;
    font-weight:600;
}

.contact-buttons a:hover{
    background:#ff69a6;
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(255,105,166,.2);
}

/* =========================
   PRODUCT MODAL (Popup)
========================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:20px;
}

.modal-content{
    background:#fff;
    width:100%;
    max-width:360px;
    padding:25px;
    border-radius:28px;
    text-align:center;
    animation:popup .25s;
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.modal-content img{
    width:80px;
    margin-bottom:15px;
    animation:float 3s ease infinite;
}

.modal-box{
    background:#fff5fa;
    padding:15px;
    border-radius:15px;
    margin:15px 0;
}

.modal-btn{
    display:inline-block;
    margin-top:15px;
    background:#ff5ca8;
    color:#fff;
    padding:12px 28px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

.close{
    float:right;
    font-size:30px;
    cursor:pointer;
}

/* =========================
   WELCOME POPUP
========================= */

.welcome-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:.3s;
}

.welcome-box{
    width:90%;
    max-width:380px;
    background:#fff;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    animation:popup .35s ease;
}

.welcome-box h2{
    color:#ff5f9f;
    margin-bottom:15px;
}

.welcome-box p{
    color:#666;
    margin-bottom:25px;
    line-height:1.7;
}

.welcome-box button{
    border:none;
    background:#ff7eb6;
    color:#fff;
    padding:13px 35px;
    border-radius:35px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.welcome-box button:hover{
    background:#ff5f9f;
    transform:scale(1.05);
}

@keyframes popup{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

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

.footer{
    position:relative;
    margin-top:120px;
    padding-top:80px;
    background:linear-gradient(180deg,#fff,#fff8fc);
    overflow:hidden;
    border-top:1px solid #ffe3f1;
}

.footer-glow{
    position:absolute;
    width:320px;
    height:320px;
    background:#ffc3df;
    filter:blur(120px);
    opacity:.35;
    top:-150px;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}

.footer-content{
    position:relative;
    z-index:2;
    max-width:700px;
    margin:auto;
    text-align:center;
    padding:0 20px 60px;
}

.footer-logo{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:50%;
    background:#fff;
    padding:8px;
    box-shadow:0 15px 35px rgba(255,105,180,.18);
    margin-bottom:20px;
    transition:.35s;
}

.footer-logo:hover{
    transform:translateY(-5px) scale(1.05);
}

.footer-content h2{
    font-size:34px;
    color:#ff5fa2;
    margin-bottom:15px;
    font-weight:700;
}

.footer-content p{
    max-width:520px;
    margin:auto;
    line-height:1.9;
    color:#777;
    font-size:15px;
}

.footer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:35px;
    padding:15px 34px;
    background:#ff5fa2;
    color:white;
    text-decoration:none;
    border-radius:999px;
    font-weight:600;
    transition:.35s;
    box-shadow:0 15px 35px rgba(255,95,162,.25);
}

.footer-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 45px rgba(255,95,162,.35);
}

.footer-divider{
    width:88%;
    height:1px;
    margin:auto;
    background:linear-gradient(90deg,transparent,#ffd6e9,transparent);
}

.footer-bottom{
    padding:28px 20px;
    text-align:center;
}

.footer-bottom p{
    color:#888;
    margin-bottom:8px;
    font-size:14px;
}

.footer-bottom small{
    color:#aaa;
    font-size:13px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .navbar{
        padding:15px 20px;
    }
    .menu-btn{
        display:flex;
    }
    
.logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
    .navbar ul{
    position: fixed;
    top: 0;
    left: -100%;
    width: 290px;
    height: 100vh;
    margin: 0;
    padding: 100px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    background: rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-right: 1px solid rgba(255,105,180,.15);
    box-shadow: 0 20px 60px rgba(255,105,180,.18);

    overflow: hidden;
    transition: left .4s ease;
    z-index: 1001;
}

    .navbar ul.active{
        left:0;
    }

    .navbar ul li{
    list-style: none;
    padding: 0;
}

    .logo span{
        font-size:20px;
    }

    .hero{
        padding:130px 20px 100px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-logo{
        width:100px;
        height:100px;
    }

    section{
        padding:70px 6%;
    }
}

/* =========================
   SCROLL REVEAL ANIMATION
========================= */

.reveal{
    transition:opacity .7s ease, transform .7s ease;
}

body.js-ready .reveal{
    opacity:0;
    transform:translateY(28px);
}

body.js-ready .reveal.in-view{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    body.js-ready .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* Stagger halus untuk grid/list agar muncul bergantian */
.products-grid .reveal:nth-child(2){ transition-delay:.05s; }
.products-grid .reveal:nth-child(3){ transition-delay:.1s; }
.products-grid .reveal:nth-child(4){ transition-delay:.15s; }
.products-grid .reveal:nth-child(5){ transition-delay:.2s; }
.products-grid .reveal:nth-child(6){ transition-delay:.25s; }
.products-grid .reveal:nth-child(7){ transition-delay:.3s; }
.products-grid .reveal:nth-child(8){ transition-delay:.35s; }
.products-grid .reveal:nth-child(9){ transition-delay:.4s; }
.products-grid .reveal:nth-child(10){ transition-delay:.45s; }

.features .reveal:nth-child(2){ transition-delay:.1s; }
.features .reveal:nth-child(3){ transition-delay:.2s; }

.timeline .reveal:nth-child(2){ transition-delay:.1s; }
.timeline .reveal:nth-child(3){ transition-delay:.2s; }
.timeline .reveal:nth-child(4){ transition-delay:.3s; }

.faq-list .reveal:nth-child(2){ transition-delay:.08s; }
.faq-list .reveal:nth-child(3){ transition-delay:.16s; }
.faq-list .reveal:nth-child(4){ transition-delay:.24s; }

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#ff8fbe;
    border-radius:50px;
}

::-webkit-scrollbar-track{
    background:#fff3f8;
}
/* TESTIMONI */

.testi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:10px;
}

.testi-card{
    background:#fff;
    border:1px solid #ffe1ee;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(255,105,180,.1);
    transition:.35s ease;
}

.testi-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(255,105,180,.2);
}

.testi-card img{
    width:100%;
    display:block;
}

.testi-note{
    margin-top:30px;
    padding:18px 20px;
    border-radius:16px;
    background:#fff5fa;
    border:1px solid #ffd7e8;

    display:flex;
    align-items:flex-start;
    gap:12px;

    color:#666;
    font-size:14px;
    line-height:1.7;
}

.testi-note i{
    color:#ff5fa2;
    font-size:18px;
    margin-top:2px;
}