/* =========================================================
   LumiTone — Stylesheet
   Table of Contents:
   1. CSS Variables & Reset
   2. Base Typography & Layout Helpers
   3. Buttons
   4. Navbar
   5. Hero
   6. Trusted
   7. Section Heading (shared)
   8. Features
   9. How It Works
   10. Statistics
   11. Testimonials
   12. FAQ
   13. CTA
   14. Footer
   15. Animations
   16. Auth Modal (Masuk / Daftar)
   17. Responsive
========================================================= */

/* ---------------------------------------------------------
   1. CSS Variables & Reset
--------------------------------------------------------- */
:root {
    /* Colors */
    --color-bg: #FAF8F3;
    --color-primary: #7C9473;
    --color-secondary: #7C9473;
    --color-accent: #DCE4D3;
    --color-text: #1B2A16;
    --color-border: #ECE7DD;

    --color-white: #FFFFFF;
    --color-text-soft: #5B6B54;
    --color-text-muted: #8A9583;

    /* Gradients (kept as solid sage, no gradation) */
    --gradient-primary: #7C9473;
    --gradient-highlight: #7C9473;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(27, 42, 22, 0.05);
    --shadow-md: 0 8px 24px rgba(27, 42, 22, 0.08);
    --shadow-lg: 0 20px 48px rgba(27, 42, 22, 0.12);
    --shadow-glow: 0 10px 40px rgba(124, 148, 115, 0.25);

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-full: 999px;

    /* Type */
    --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --container-width: 1200px;
    --nav-height: 84px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s var(--ease);
    --transition-base: 0.4s var(--ease);
    --transition-slow: 0.7s var(--ease);

    /* Shared "glass card" tokens — used by every transparent card
       (features, testimonials, FAQ). Centralized here so all cards
       stay visually consistent and easy to retune later. */
    --glass-bg: rgba(255, 255, 255, 0.22);
    --glass-bg-hover: rgba(255, 255, 255, 0.32);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-border-hover: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(20px) saturate(140%);

    /* Raised-glass shadow: outer lift so the card floats above the
       background, plus a thin inner top highlight that reads as a
       light reflection on glass, and a faint inner bottom line for depth. */
    --glass-shadow:
        0 8px 32px rgba(27, 42, 22, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    --glass-shadow-hover:
        0 20px 48px rgba(27, 42, 22, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: var(--font-base);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(124, 148, 115, 0.16) 0%, transparent 28%),
        radial-gradient(circle at 80% 12%, rgba(140, 160, 128, 0.12) 0%, transparent 20%),
        radial-gradient(circle at 50% 75%, rgba(108, 132, 98, 0.10) 0%, transparent 24%),
        radial-gradient(circle at 25% 75%, rgba(124, 148, 115, 0.08) 0%, transparent 18%);
    opacity: 0.8;
    z-index: -1;
    animation: bg-fade 16s ease-in-out infinite alternate;
}

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

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

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

ul, ol { list-style: none; }

::selection {
    background: var(--color-secondary);
    color: var(--color-white);
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------
   2. Base Typography & Layout Helpers
--------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-accent);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 18px;
}

.section-heading {
    max-width: 620px;
    margin: 0 auto 64px;
    text-align: center;
}

.section-title {
    font-size: clamp(28px, 3.6vw, 42px);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 17px;
    color: var(--color-text-soft);
    font-weight: 400;
}

section {
    padding: 120px 0;
    position: relative;
}

/* ---------------------------------------------------------
   3. Buttons
--------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn--text {
    color: var(--color-text);
    padding: 13px 8px;
    font-weight: 500;
}
.btn--text:hover { color: var(--color-primary); }

.btn--pill {
    background: var(--color-accent);
    color: var(--color-text);
}
.btn--pill:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 48px rgba(124, 148, 115, 0.35);
}

.btn--white {
    background: var(--color-white);
    color: var(--color-primary);
}
.btn--white:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.btn--lg {
    padding: 18px 38px;
    font-size: 16px;
}

.btn__sparkle {
    display: inline-block;
    animation: sparkle-pulse 2s ease-in-out infinite;
}

/* Ripple Effect */
.ripple {
    position: relative;
}
.ripple span.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-anim 0.6s var(--ease);
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(3); opacity: 0; }
}

/* ---------------------------------------------------------
   4. Navbar
--------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: transparent;
}

/* The inner bar carries the visible background. On scroll it shrinks
   into a centered, floating pill — Linear/Vercel style — and drops the
   nav links so only the essentials remain: logo + auth actions. */
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
    border-radius: var(--radius-full);
    background: transparent;
    box-shadow: none;
    border: 1px solid transparent;
    transition: max-width var(--transition-base), margin var(--transition-base),
                padding var(--transition-base), border-radius var(--transition-base),
                background var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.navbar.is-scrolled .navbar__inner {
    max-width: 620px;
    margin-top: 14px;
    padding: 10px 12px 10px 24px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 10px 34px rgba(27, 42, 22, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Hide the link group once floating — only logo + Masuk/Daftar remain */
.navbar.is-scrolled .navbar__nav {
    display: none;
}

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

.navbar__logo-icon { color: var(--color-primary); }

.navbar__logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.navbar__link {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding: 4px 0;
    transition: color var(--transition-fast);
}

.navbar__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-fast);
}

.navbar__link:hover { color: var(--color-primary); }
.navbar__link:hover::after { width: 100%; }

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    z-index: 1100;
}

.navbar__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.navbar__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-active span:nth-child(2) { opacity: 0; }
.navbar__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navbar__mobile {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 24px 32px 32px;
    background: rgba(250, 248, 243, 0.98);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-border);
}

.navbar__mobile.is-open { display: flex; }

.navbar__mobile-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* ---------------------------------------------------------
   5. Hero  (left untouched, per request)
--------------------------------------------------------- */
.hero {
    position: relative;
    padding: calc(var(--nav-height) + 80px) 0 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 92vh;
}

.hero {
    position: relative;
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero__inner {
    position: relative;
    z-index: 2;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(18, 22, 14, 0.55) 0%,
        rgba(18, 22, 14, 0.62) 55%,
        rgba(18, 22, 14, 0.72) 100%
    );
}

/* Video-mode text needs to stay readable regardless of light/dark theme,
   so it's pinned to light colors rather than following --color-text. */
.hero--video .hero__headline,
.hero--video .hero__desc,
.hero--video .hero__trust {
    color: #F6F1E5;
}
.hero--video .hero__desc,
.hero--video .hero__trust {
    color: rgba(246, 241, 229, 0.82);
}

.hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
}

.hero__glow--1 {
    width: 480px;
    height: 480px;
    background: var(--color-accent);
    top: -140px;
    left: -120px;
    animation: float-slow 12s ease-in-out infinite;
}

.hero__glow--2 {
    width: 420px;
    height: 420px;
    background: var(--color-secondary);
    top: 60px;
    right: -140px;
    opacity: 0.35;
    animation: float-slow 14s ease-in-out infinite reverse;
}

.hero__glow--3 {
    width: 360px;
    height: 360px;
    background: var(--color-accent);
    bottom: -160px;
    left: 40%;
    opacity: 0.4;
    animation: float-slow 16s ease-in-out infinite;
}

.sparkle {
    position: absolute;
    color: var(--color-secondary);
    font-size: 22px;
    animation: sparkle-pulse 3s ease-in-out infinite;
}
.sparkle--1 { top: 34%; left: 12%; font-size: 26px; animation-delay: 0s; }
.sparkle--2 { top: 48%; right: 10%; font-size: 20px; animation-delay: 0.6s; }
.sparkle--3 { top: 14%; right: 26%; font-size: 16px; animation-delay: 1.2s; }
.sparkle--4 { bottom: 20%; left: 22%; font-size: 14px; animation-delay: 1.8s; }
.sparkle--5 { bottom: 30%; right: 20%; font-size: 18px; animation-delay: 0.9s; }

.hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__headline {
    font-size: clamp(38px, 6vw, 50px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
}

.hero__highlight {
    background: var(--gradient-highlight);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(241, 251, 236, 0.95), rgba(219, 236, 201, 0.95));
    border: 1px solid rgba(124, 148, 115, 0.26);
    padding: 24px 52px;
    border-radius: 66px;
    box-shadow: 0 25px 80px rgba(124, 148, 115, 0.18);
    margin-bottom: 28px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    animation: float-slow 8s ease-in-out infinite;
}

.hero__badge::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    filter: blur(2px);
    opacity: 0.9;
}

.hero__badge::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow: inset -5px -5px 14px rgba(255, 255, 255, 0.7);
}

.hero__badge-text {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.hero__badge-sparkle {
    color: var(--color-secondary);
    font-size: 22px;
    animation: sparkle-pulse 2.4s ease-in-out infinite;
}

.hero__badge span {
    position: relative;
    z-index: 1;
}

.hero__desc {
    font-size: 18px;
    color: var(--color-text-soft);
    max-width: 560px;
    margin-bottom: 36px;
}

.hero__trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-soft);
}

/* ---------------------------------------------------------
   6. Trusted
--------------------------------------------------------- */
.trusted {
    padding: 60px 0;
}

.trusted__label {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 32px;
}

.trusted__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 48px;
}

.trusted__logo {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-muted);
    opacity: 0.6;
    letter-spacing: -0.01em;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.trusted__logo:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* ---------------------------------------------------------
   8. Features
   Cards are frosted glass — translucent white over whatever
   sits behind the section, with a blur so it reads as glass
   rather than flat low-opacity color. Layout untouched.
--------------------------------------------------------- */
.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base), background var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-hover);
    background: var(--glass-bg-hover);
}

.feature-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: 22px;
    transition: transform var(--transition-base), background var(--transition-base);
}

.feature-card:hover .feature-card__icon {
    background: var(--gradient-primary);
    color: var(--color-white);
    transform: scale(1.08) rotate(-4deg);
}

.feature-card__title {
    font-size: 19px;
    margin-bottom: 10px;
}

.feature-card__desc {
    font-size: 15px;
    color: var(--color-text-soft);
}

/* ---------------------------------------------------------
   9. How It Works
--------------------------------------------------------- */
.how-it-works {
    background: var(--color-white);
}

.timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.timeline__step {
    flex: 1;
    max-width: 240px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline__marker {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.timeline__step:hover .timeline__marker {
    background: var(--gradient-primary);
    color: var(--color-white);
    transform: scale(1.1);
}

.timeline__title {
    font-size: 17px;
    margin-bottom: 8px;
}

.timeline__desc {
    font-size: 14px;
    color: var(--color-text-soft);
}

.timeline__connector {
    flex: 0 0 60px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-secondary) 0 8px, transparent 8px 16px);
    margin-top: 34px;
}

/* ---------------------------------------------------------
   10. Statistics
--------------------------------------------------------- */
.statistics {
    padding: 90px 0;
}

.statistics__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    padding: 56px 40px;
    box-shadow: 
        var(--shadow-glow),
        0 24px 60px rgba(27, 42, 22, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.stat-card {
    text-align: center;
    color: var(--color-white);
}

.stat-card__number {
    display: block;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.stat-card__label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

/* ---------------------------------------------------------
   11. Testimonials
   Cards use the same shared glass tokens as Features/FAQ
   so all cards on the page look consistent.
--------------------------------------------------------- */
.testimonials {
    position: relative;
    overflow: hidden;
}

.testimonials__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, var(--color-accent) 0%, transparent 45%),
                radial-gradient(circle at 80% 70%, var(--color-secondary) 0%, transparent 45%);
    opacity: 0.35;
    z-index: 0;
}

.testimonials .container { position: relative; z-index: 1; }

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.testimonial-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base), background var(--transition-base);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--glass-border-hover);
    background: var(--glass-bg-hover);
}

.testimonial-card__stars {
    color: var(--color-primary);
    letter-spacing: 3px;
    margin-bottom: 16px;
    font-size: 15px;
}

.testimonial-card__text {
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 24px;
    line-height: 1.7;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.testimonial-card__name {
    font-size: 14px;
    font-weight: 600;
}

.testimonial-card__role {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   12. FAQ
   Each question row is a glass card, matching Features/Testimonials.
--------------------------------------------------------- */
.faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast);
}

.faq-item:hover {
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-shadow-hover);
}

.faq-item.is-open {
    border-color: var(--color-secondary);
    box-shadow: var(--glass-shadow-hover);
    background: var(--glass-bg-hover);
}

.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: var(--color-text);
}

.faq-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 18px;
    transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
    background: var(--gradient-primary);
    color: var(--color-white);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-base);
    padding: 0 26px;
}

.faq-item__answer p {
    font-size: 15px;
    color: var(--color-text-soft);
    padding-bottom: 22px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   13. CTA
--------------------------------------------------------- */
.cta__box {
    position: relative;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
    box-shadow: 
        var(--shadow-glow),
        0 24px 60px rgba(27, 42, 22, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.cta__title {
    position: relative;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--color-white);
    margin-bottom: 16px;
    max-width: 600px;
    margin-inline: auto;
}

.cta__subtitle {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
    font-size: 16px;
}

/* ---------------------------------------------------------
   14. Footer
--------------------------------------------------------- */
.footer {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 80px 0 0;
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 56px;
}

.footer__brand { max-width: 260px; }

.footer__tagline {
    font-size: 14px;
    color: var(--color-text-soft);
    margin-top: 16px;
}

.footer__heading {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

.footer__link {
    display: block;
    font-size: 14px;
    color: var(--color-text-soft);
    margin-bottom: 12px;
    transition: color var(--transition-fast);
}

.footer__link:hover { color: var(--color-primary); }

.footer__socials { display: flex; gap: 10px; }

.footer__social {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 50%;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer__social:hover {
    background: var(--gradient-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}

.footer__bottom {
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   15. Animations
--------------------------------------------------------- */
@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}

@keyframes sparkle-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes bg-fade {
    0% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.02); }
    100% { opacity: 0.8; transform: scale(1); }
}

.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--delay, 0s);
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------
   16. Auth Modal (Masuk / Daftar)
   Split layout: a colored brand pane + white form pane.
   The colored pane physically slides to the other side when
   switching between "Masuk" and "Daftar" (data-mode on
   #authShell), background stays blurred via the overlay.
--------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(27, 42, 22, 0.28);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
                -webkit-backdrop-filter 0.4s var(--ease), visibility 0s linear 0.4s;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
                -webkit-backdrop-filter 0.4s var(--ease), visibility 0s linear 0s;
}

.modal-box {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 44px 38px 38px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.9) translateY(24px);
    opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.4s var(--ease);
}

.modal-overlay.is-open .modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ---------- Split variant: kaca transparan + timbul ---------- */
.modal-box--split {
    max-width: 880px;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 20px 50px rgba(27, 42, 22, 0.22),
        0 4px 14px rgba(27, 42, 22, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    color: #7C9473;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(27, 42, 22, 0.15);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover {
    background: #7C9473;
    color: var(--color-white);
    transform: rotate(90deg);
}

/* ---------- Sliding shell ---------- */
.auth-shell {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
}

.auth-colorpane,
.auth-formpane {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transition: transform 0.6s var(--ease);
}

.auth-colorpane {
    left: 0;
    transform: translateX(0%);
    background: #7C9473;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    z-index: 2;
}

.auth-formpane {
    left: 50%;
    transform: translateX(0%);
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    z-index: 1;
}

/* Login mode: colorpane slides right, formpane slides left */
.auth-shell[data-mode="login"] .auth-colorpane {
    transform: translateX(100%);
}
.auth-shell[data-mode="login"] .auth-formpane {
    transform: translateX(-100%);
}

.auth-colorpane__inner {
    max-width: 260px;
}

.auth-colorpane__brand {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
}

.auth-colorpane__content {
    display: none;
}

.auth-shell[data-mode="login"] .auth-colorpane__content[data-for="login"],
.auth-shell[data-mode="register"] .auth-colorpane__content[data-for="register"] {
    display: block;
    animation: modal-panel-in 0.5s var(--ease);
}

.auth-colorpane__text {
    font-size: 15px;
    opacity: 0.92;
    margin-bottom: 20px;
}

.auth-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.auth-switch-btn:hover {
    background: var(--color-white);
    color: #7C9473;
    transform: translateY(-2px);
}

.auth-formpane__inner {
    width: 100%;
    padding: 56px 48px;
}

.auth-form {
    display: none;
}

.auth-shell[data-mode="login"] .auth-form[data-for="login"],
.auth-shell[data-mode="register"] .auth-form[data-for="register"] {
    display: block;
    animation: modal-panel-in 0.5s var(--ease);
}

.auth-form__title {
    font-size: 26px;
    margin: 14px 0 26px;
}

.modal-badge {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Input: cekung ke dalam ---------- */
.modal-field input {
    width: 100%;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    padding: 14px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: #EDEAE0;
    color: var(--color-text);
    box-shadow:
        inset 3px 3px 7px rgba(27, 42, 22, 0.16),
        inset -3px -3px 7px rgba(255, 255, 255, 0.75);
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.modal-field input::placeholder {
    color: var(--color-text-muted);
}

.modal-field input:focus {
    outline: none;
    background: #EDEAE0;
    box-shadow:
        inset 3px 3px 7px rgba(27, 42, 22, 0.2),
        inset -3px -3px 7px rgba(255, 255, 255, 0.85),
        0 0 0 3px rgba(124, 148, 115, 0.18);
}

.modal-forgot {
    align-self: flex-end;
    font-size: 13px;
    font-weight: 500;
    color: #7C9473;
    margin-top: -4px;
    transition: opacity var(--transition-fast);
}

.modal-forgot:hover { opacity: 0.7; }

/* ---------- Tombol: timbul keluar ---------- */
.btn--block {
    width: 100%;
    margin-top: 8px;
    border: none;
    border-radius: var(--radius-full);
    background: #7C9473;
    color: var(--color-white);
    box-shadow:
        5px 5px 12px rgba(60, 74, 51, 0.28),
        -4px -4px 10px rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn--block:hover {
    transform: translateY(-2px);
    box-shadow:
        7px 7px 16px rgba(60, 74, 51, 0.32),
        -5px -5px 12px rgba(255, 255, 255, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--block:active {
    transform: translateY(0);
    box-shadow:
        2px 2px 6px rgba(60, 74, 51, 0.26),
        -1px -1px 4px rgba(255, 255, 255, 0.4);
}

@keyframes modal-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .modal-box--split {
        max-width: 420px;
    }

    .auth-shell {
        flex-direction: column;
        min-height: auto;
        overflow: visible;
    }

    .auth-colorpane,
    .auth-formpane {
        position: relative;
        width: 100%;
        left: auto;
        top: auto;
        transform: none !important;
        transition: none;
    }

    .auth-colorpane {
        order: 2;
        padding: 28px;
    }

    .auth-formpane {
        order: 1;
    }

    .auth-formpane__inner {
        padding: 40px 28px 32px;
    }

    .auth-colorpane__inner {
        max-width: none;
    }

    .auth-colorpane__brand {
        font-size: 20px;
        margin-bottom: 14px;
    }
}

/* ---------------------------------------------------------
   17. Responsive
--------------------------------------------------------- */
@media (max-width: 1024px) {
    .features__grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials__grid { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
    .statistics__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .navbar__nav,
    .navbar__actions { display: none; }
    .navbar__burger { display: flex; }
    .navbar__mobile { position: fixed; top: var(--nav-height); left: 0; width: 100%; }

    .timeline { flex-direction: column; align-items: stretch; gap: 32px; }
    .timeline__connector { display: none; }
    .timeline__step { max-width: 100%; }

    section { padding: 84px 0; }
    .container { padding: 0 22px; }
}

@media (max-width: 767px) {
    .navbar__nav,
    .navbar__actions { display: none; }
    .navbar__burger { display: none; }
    .navbar__mobile { display: none; }
}

@media (max-width: 640px) {
    .features__grid { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; max-width: 100%; }
    .statistics__grid { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
    .hero__badge {
        padding: 18px 32px;
        border-radius: 999px;
        box-shadow: 0 20px 60px rgba(124, 148, 115, 0.18);
    }
    .trusted__logos { gap: 28px; }
    .hero { min-height: auto; }
}