* { font-family: "Plus Jakarta Sans", sans-serif; }

/* Smooth theme transitions */
html, body, .benefit-card, .about-text-block, .step-badge, .hero-bg, .section-dark, header {
    transition: background-color 0.4s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Underline accent for headings */
.heading-underline {
    position: relative;
    display: inline-block;
}
.heading-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 48px;
    height: 3px;
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    border-radius: 999px;
}

/* Hero highlight word */
.hero-highlight {
    color: #6366f1;
}

/* ========== LIGHT MODE ========== */

/* Benefit card - Light */
.benefit-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.benefit-card:hover {
    box-shadow: 0 12px 24px rgba(99,102,241,0.15);
    border-color: #ddd;
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 20px;
}

/* About section text block - Light */
.about-text-block {
    background: #f8f8ff;
    border: 1px solid #e8e8f0;
    border-radius: 14px;
    padding: 28px 32px;
    color: #374151;
    line-height: 1.8;
    font-size: 15px;
}

/* Step number badge - Light */
.step-badge {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 4px 12px rgba(99,102,241,0.2);
}

/* Arrow between steps */
.step-arrow {
    color: #9ca3af;
    font-size: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}


/* Footer link - Light */
.footer-link {
    color: #9ca3af;
    font-size: 13px;
    transition: color 0.2s;
}
.footer-link:hover { color: #6366f1; }

/* Footer blur gradient */
.footer-blur {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.caraorder-blur {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.caraorder-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0) 70%),
        radial-gradient(70% 60% at 50% 100%, rgba(139,92,246,0.15) 0%, rgba(139,92,246,0) 72%);
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.caraorder-blur > .max-w-6xl {
    position: relative;
    z-index: 1;
}
.dark .caraorder-blur::before {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(56,189,248,0.13) 0%, rgba(56,189,248,0) 70%),
        radial-gradient(70% 60% at 50% 100%, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0) 72%);
    opacity: 0.42;
}

.footer-blur::before {
    content: "";
    position: absolute;
    inset: auto -20% -130px -20%;
    height: 280px;
    background:
        radial-gradient(60% 85% at 15% 100%, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0) 70%),
        radial-gradient(55% 80% at 85% 100%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 72%);
    filter: blur(42px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.footer-blur > .max-w-6xl {
    position: relative;
    z-index: 1;
}

/* Hero section bg - Light */
.hero-bg {
    background: linear-gradient(135deg, #f0f2ff 0%, #f5f0ff 50%, #fefefe 100%);
}

.section-dark { background: #ffffff; }

/* ========== DARK MODE ========== */

/* Body background - Deep Navy Blue */
.dark body { 
    background-color: #0f1419; 
}

/* Dark mode header */
.dark header {
    background-color: #1a1f2e;
    border-color: #2a2f3f;
}

/* Benefit card - Dark */
.dark .benefit-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #202533 100%);
    border: 1px solid #2a3040;
    box-shadow: 0 8px 24px rgba(99,102,241,0.12);
    color: #e5e7eb;
}
.dark .benefit-card:hover {
    background: linear-gradient(135deg, #202533 0%, #25293d 100%);
    border-color: #3a4050;
    box-shadow: 0 12px 32px rgba(99,102,241,0.2);
}

/* About text block - Dark */
.dark .about-text-block {
    background: linear-gradient(135deg, #1a1f2e 0%, #202533 100%);
    border: 1px solid #2a3040;
    color: #d1d5db;
}

/* Step badge - Dark */
.dark .step-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99,102,241,0.25);
}

/* Step arrow - Dark */
.dark .step-arrow {
    color: #4b5563;
}

/* Footer link - Dark */
.dark .footer-link {
    color: #a5b4fc;
    transition: color 0.2s;
}
.dark .footer-link:hover { 
    color: #818cf8; 
}

.dark .footer-blur::before {
    background:
        radial-gradient(62% 86% at 20% 100%, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 70%),
        radial-gradient(58% 82% at 82% 100%, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 72%);
    opacity: 0.42;
}

/* Footer container - Dark */
.dark footer {
    background: linear-gradient(180deg, #101014 0%, #0a0a0d 100%);
    border-color: #18181b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Footer text - Dark */
.dark footer .text-gray-700 {
    color: #e5e7eb !important;
}
.dark footer .text-gray-500,
.dark footer .text-gray-400 {
    color: #9ca3af !important;
}

/* Hero section - Dark with premium gradient */
.dark .hero-bg {
    background:
        radial-gradient(1400px 700px at 75% 15%, rgba(99,102,241,0.25), rgba(0,0,0,0) 50%),
        radial-gradient(1000px 500px at 20% 80%, rgba(139,92,246,0.15), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #0f1419 0%, #151b28 50%, #0f1419 100%);
    color: #e5e7eb;
}

.dark .hero-bg h1 {
    color: #f3f4f6;
}

.dark .hero-bg p {
    color: #9ca3af;
}

/* Dark section backgrounds */
.dark .section-dark {
    background: linear-gradient(180deg, #0f1419 0%, #151b28 100%);
}

.dark .hero-bg h1,
.dark .section-dark h1,
.dark .section-dark h2,
.dark .section-dark h3,
.dark .section-dark h4 {
    color: #f3f4f6;
}

/* Text normal */
.dark .hero-bg p,
.dark .section-dark p {
    color: #9ca3af;
}

/* Jangan ganggu tailwind utility */
.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-gray-700 { color: #d1d5db !important; }
.dark .text-gray-600 { color: #9ca3af !important; }
.dark .text-gray-500 { color: #9ca3af !important; }

/* Dark mode button enhancement */
.dark button:hover {
    color: #818cf8;
}
.dark .cta-gradient {
    background: linear-gradient(
        135deg,
        #0f172a 0%,
        #111827 50%,
        #020617 100%
    );
}

/* Smooth theme transitions */
html { transition: background 0.3s; }