/* =====================
   RESET & ROOT
===================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    /* Dark hero & navbar — rose-tinted dark */
    --dark:      #110f1a;
    --dark-2:    #141121;
    --dark-3:    #1a162b;
    --dark-4:    #2c1e3d;

    /* Light sections */
    --light:     #fff7f9;
    --light-2:   #fdf0f4;
    --light-3:   #fce4ec;
    --text-dark: #2d1a22;
    --text-mid:  #5c3347;
    --text-muted:#9e6b80;

    /* Brand — rose + lavender */
    --blue:      #3b82f6;
    --blue-2:    #2563eb;
    --blue-dim:  rgba(59,130,246,.1);
    --blue-border: rgba(59,130,246,.25);
    --cyan:      #22d3ee;
    --white:     #ffffff;

    /* Misc */
    --line-dark: rgba(255,255,255,.08);
    --line-light:rgba(0,0,0,.07);
    --radius:    12px;
    --radius-sm: 8px;
    --max:       960px;
    --shadow:    0 4px 24px rgba(180,60,100,.08);
    --shadow-md: 0 8px 32px rgba(180,60,100,.13);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.65;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,.logo { font-family:'Space Grotesk',sans-serif; }
h2 {
    font-size: clamp(1.6rem,3vw,2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 32px;
    color: var(--text-dark);
}
p { font-size:0.88rem; line-height:1.75; color:var(--text-muted); }

.container {
    width:92%;
    max-width:var(--max);
    margin:0 auto;
}
section { padding:80px 0; }

/* =====================
   REVEAL
===================== */
.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity:1; transform:none; }

/* =====================
   SECTION LABEL
===================== */
.section-label-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:12px;
}
.section-label-text {
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.14em;
    color:var(--blue);
}
.dot-accent {
    width:6px; height:6px;
    border-radius:50%;
    background:var(--blue);
    flex-shrink:0;
}

/* =====================
   NAVBAR
===================== */
#navbar {
    position:fixed;
    inset:0 0 auto 0;
    z-index:999;
    padding:0;
    transition:background .3s, border-color .3s, box-shadow .3s;
    border-bottom:1px solid transparent;
}
#navbar.scrolled {
    background:rgba(11,14,26,.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-color:var(--line-dark);
    box-shadow:0 4px 24px rgba(0,0,0,.3);
}

.nav-inner {
    width:92%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 0;
    transition:padding .3s;
}
#navbar.scrolled .nav-inner { padding:12px 0; }

/* Logo */
.logo {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--white);
    flex-shrink:0;
}
.logo-img {
    height:36px;
    width:auto;
    object-fit:contain;
}
.logo-img-footer {
    height:32px;
    /* Logo di footer — kalau logo gelap, pakai filter ini untuk versi putih:
       filter: brightness(0) invert(1); */
}

.menu {
    display:flex;
    gap:28px;
    align-items:center;
}
.nav-link {
    font-size:0.88rem;
    font-weight:500;
    color:rgba(255,255,255,.75);
    padding-bottom:3px;
    border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
}
.nav-link:hover,
.nav-link.active {
    color:var(--white);
    border-color:var(--blue);
}

.btn-pesan {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 22px;
    background:var(--blue);
    color:#fff;
    font-weight:600;
    font-size:0.88rem;
    border-radius:var(--radius-sm);
    transition:background .2s, transform .2s, box-shadow .2s;
    white-space:nowrap;
    flex-shrink:0;
}
.btn-pesan:hover {
    background:var(--blue-2);
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(59,130,246,.4);
}

.hamburger {
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    flex-shrink:0;
}
.hamburger span {
    display:block;
    width:22px; height:2px;
    background:var(--white);
    border-radius:2px;
    transition:.3s;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* =====================
   HERO  (dark background)
===================== */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 0 0;
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg,#0b0e1a 0%,#0f1a3a 55%,#0b1a2e 100%);
}

/* Glow kiri bawah */
.hero::before {
    content:'';
    position:absolute;
    width:600px; height:600px;
    background:radial-gradient(circle,rgba(161, 193, 245, 0.2) 0%,transparent 65%);
    bottom:200px; right:-80px;
    pointer-events:none;
}

.hero-inner {
    position:relative;
    z-index:2;
    padding-bottom:120px;
}

.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px;
    border-radius:999px;
    border:1px solid rgba(59,130,246,.3);
    background:rgba(59,130,246,.08);
    color:#93c5fd;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.06em;
    margin-bottom:20px;
}
.badge-dot {
    width:7px; height:7px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 8px #22c55e;
    animation:blink 2s infinite;
    flex-shrink:0;
}
@keyframes blink{50%{opacity:.3;}}

.hero-sub-top {
    font-size:0.92rem;
    color:rgba(255,255,255,.55);
    margin-bottom:16px;
    letter-spacing:0.04em;
}

.hero h1 {
    font-size:clamp(2.2rem,6vw,3.8rem);
    font-weight:700;
    letter-spacing:-0.04em;
    line-height:1.1;
    margin-bottom:32px;
    color:var(--white);
}
.hero-accent {
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.btn-metode {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:13px 28px;
    border:1.5px solid rgba(255,255,255,.3);
    color:var(--white);
    font-weight:600;
    font-size:0.9rem;
    border-radius:var(--radius-sm);
    font-family:'Space Grotesk',sans-serif;
    transition:border-color .2s, background .2s, transform .2s;
}
.btn-metode:hover {
    border-color:var(--blue);
    background:rgba(59,130,246,.12);
    transform:translateY(-2px);
}

/* Wave bawah hero → masuk ke section putih */
.hero-wave {
    position:absolute;
    bottom:-2px; left:0; right:0;
    height:80px;
    pointer-events:none;
}
.hero-wave svg { width:100%; height:100%; }
/* warna fill di HTML sudah #f8fafc, update via inline SVG di HTML */

/* =====================
   METODE  (light bg)
===================== */
.metode-section {
    background:var(--light);
    padding-top:72px;
}

.metode-list {
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:640px;
    margin:20px auto 0;
}

/* Step row */
.metode-step {
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.step-num {
    width:40px; height:40px;
    border-radius:50%;
    background:var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
    margin-top:4px;
}

.step-card {
    flex:1;
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 24px;
    background:var(--white);
    border:1px solid var(--line-light);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.step-icon-wrap {
    width:48px; height:48px;
    border-radius:12px;
    background:var(--blue-dim);
    border:1px solid var(--blue-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue);
    flex-shrink:0;
}

.step-text h3 {
    font-size:0.98rem;
    font-weight:600;
    color:var(--text-dark);
    margin-bottom:4px;
}
.step-text p { font-size:0.83rem; color:var(--text-muted); }

/* Konektor vertikal */
.step-connector {
    width:2px;
    height:24px;
    background:linear-gradient(to bottom,var(--blue),rgba(59,130,246,.2));
    border-radius:2px;
    margin-left:19px;
}

/* Sub cards */
.sub-cards {
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 0 14px 56px;
    overflow-x:auto;
    scrollbar-width:none;
}
.sub-cards::-webkit-scrollbar{display:none;}

.sub-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    padding:12px 14px;
    background:var(--white);
    border:1px solid var(--line-light);
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    font-size:0.73rem;
    font-weight:500;
    white-space:nowrap;
    min-width:76px;
    box-shadow:var(--shadow);
    transition:border-color .2s, color .2s;
    flex-shrink:0;
}
.sub-card svg { color:inherit; }
.sub-card.active {
    border-color:var(--blue-border);
    background:var(--blue-dim);
    color:var(--blue);
}
.sub-arrow {
    color:var(--text-muted);
    font-size:0.8rem;
    flex-shrink:0;
}

/* =====================
   PORTFOLIO  (light bg)
===================== */
.portfolio-section { background:var(--light-2); }

.portfolio-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:36px;
}

.portfolio-card {
    background:var(--white);
    border:1px solid var(--line-light);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform .3s, box-shadow .3s;
}
.portfolio-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.portfolio-img-wrap {
    position:relative;
    aspect-ratio:16/10;
    background:var(--light-3);
    overflow:hidden;
}
.portfolio-img-wrap img {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s;
    z-index:2;
}
.portfolio-card:hover .portfolio-img-wrap img{transform:scale(1.05);}

.portfolio-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Space Grotesk',sans-serif;
    font-size:2rem;
    font-weight:700;
    color:var(--text-muted);
    background:linear-gradient(135deg,var(--light-2),var(--light-3));
    z-index:1;
}
.portfolio-img-wrap img + .portfolio-placeholder{display:none;}
.portfolio-img-wrap.no-img img{display:none;}
.portfolio-img-wrap.no-img .portfolio-placeholder{z-index:2;}

.portfolio-info {
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.portfolio-info h4 {
    font-family:'Space Grotesk',sans-serif;
    font-size:0.95rem;
    font-weight:600;
    color:var(--text-dark);
    line-height:1.3;
}
.portfolio-info p { font-size:0.82rem; }
.portfolio-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.8rem;
    font-weight:600;
    color:var(--blue);
    margin-top:4px;
    transition:color .2s;
}
.portfolio-link:hover{color:var(--blue-2);}

.portfolio-more {
    text-align:center;
    margin-top:8px;
}
.btn-more {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:12px 28px;
    border:1.5px solid var(--blue-border);
    color:var(--blue);
    font-weight:600;
    font-size:0.88rem;
    border-radius:var(--radius-sm);
    transition:background .2s, transform .2s;
    font-family:'Space Grotesk',sans-serif;
}
.btn-more:hover {
    background:var(--blue-dim);
    transform:translateY(-2px);
}

/* =====================
   FAQ  (light bg)
===================== */
.faq-section { background:var(--light); }

.faq-list {
    max-width:680px;
    margin:8px auto 0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.faq-item {
    background:var(--white);
    border:1px solid var(--line-light);
    border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:border-color .2s, box-shadow .2s;
}
.faq-item.open {
    border-color:var(--blue-border);
    box-shadow:0 4px 20px rgba(59,130,246,.1);
}

.faq-q {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-family:'Inter',sans-serif;
    font-size:0.9rem;
    font-weight:500;
    color:var(--text-dark);
    transition:color .2s;
}
.faq-q:hover{color:var(--blue);}

.faq-icon {
    font-size:1.2rem;
    color:var(--blue);
    font-weight:300;
    flex-shrink:0;
    transition:transform .3s;
    line-height:1;
    font-family:'Inter',sans-serif;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}

.faq-a {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding .3s ease;
    padding:0 20px;
    border-top:0px solid var(--line-light);
}
.faq-item.open .faq-a {
    max-height:300px;
    padding:0 20px 18px;
    border-top:1px solid var(--line-light);
}
.faq-a p{font-size:0.87rem; padding-top:14px;}

/* =====================
   FOOTER
===================== */
footer {
    background:var(--dark-2);
    border-top:1px solid var(--line-dark);
    padding:32px 0;
}
.footer-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
footer p{font-size:0.8rem; color:rgba(255,255,255,.35);}

/* =====================
   RESPONSIVE
===================== */
@media(max-width:768px){
    .portfolio-grid{grid-template-columns:1fr;}
    .sub-cards{padding-left:0;}

    .menu {
        position:fixed;
        inset:0;
        background:rgba(11,14,26,.97);
        backdrop-filter:blur(20px);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:32px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3s;
        z-index:998;
    }
    .menu.open{opacity:1;pointer-events:all;}
    .nav-link{font-size:1.3rem;}
    .hamburger{display:flex;z-index:999;}
    .btn-pesan.hide-mobile{display:none;}

    .footer-inner{flex-direction:column;text-align:center;}
    .hero-inner{padding-bottom:100px;}
}

@media(min-width:560px) and (max-width:860px){
    .portfolio-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:480px){
    h2{font-size:1.5rem;}
    .step-card{flex-direction:column;align-items:flex-start;}
    section{padding:64px 0;}
}