body {
		font-family: 'Segoe UI', sans-serif;
		background-color: #f8fafc;
		color: #1f2937;
}

.navbar {
		background: #ffffff;
		box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.navbar-brand {
		font-weight: 800;
		color: #0f766e !important;
		letter-spacing: .3px;
}

.navbar .nav-link {
		position: relative;
		font-weight: 600;
		color: #334155;
		padding: 8px 14px !important;
		border-radius: 999px;
		transition: all .25s ease;
}

.navbar .nav-link:hover {
		color: #0f766e;
		background: #ccfbf1;
}

.navbar .nav-link:focus,
.navbar .nav-link:active {
		color: #0f766e;
		background: #99f6e4;
}

.navbar .nav-link::after {
		content: "";
		position: absolute;
		left: 18px;
		right: 18px;
		bottom: 2px;
		height: 3px;
		background: #facc15;
		border-radius: 999px;
		transform: scaleX(0);
		transition: transform .25s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-link:active::after {
		transform: scaleX(1);
}

html {
		scroll-behavior: smooth;
		scroll-padding-top: 85px;
}

h1.fw-bold {
		color: #0f766e;
}

.hero {
		background: linear-gradient(135deg, #0f766e, #115e59);
		color: white;
		padding: 90px 0;
		position: relative;
		overflow: hidden;
}

.hero::after {
		content: "";
		position: absolute;
		width: 420px;
		height: 420px;
		background: rgba(255,255,255,0.08);
		border-radius: 50%;
		right: -120px;
		top: -100px;
}

.hero h1 {
		font-size: 3rem;
		font-weight: 800;
}

.hero p {
		font-size: 1.1rem;
		color: #e0f2f1;
}

.badge {
		font-size: 1rem;       /* default badge ~0.75rem */
		font-weight: 700;
		letter-spacing: 0.3px;
		padding: 10px 16px !important;
}

.value-pill {
		background: rgba(255,255,255,0.14);
		border: 1px solid rgba(255,255,255,0.28);
		color: #ffffff;
		border-radius: 999px;
		padding: 8px 14px;
		font-weight: 700;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		margin: 4px;
		font-size: .92rem;
}

.btn-main {
		background: #facc15;
		color: #1f2937;
		border: none;
		font-weight: 700;
}

.btn-main:hover {
		background: #eab308;
		color: #111827;
}

.btn-outline-light-custom {
		border: 1px solid #fff;
		color: #fff;
		font-weight: 600;
}

.btn-outline-light-custom:hover {
		background: #fff;
		color: #0f766e;
}

.section-title {
		font-weight: 800;
		color: #0f766e;
}

.feature-card,
.step-card,
.stat-card,
.testimonial-card,
.value-card {
		border: none;
		border-radius: 18px;
		box-shadow: 0 8px 25px rgba(0,0,0,0.06);
		transition: .25s;
		height: 100%;
}

.feature-card:hover,
.step-card:hover,
.testimonial-card:hover,
.value-card:hover {
		transform: translateY(-5px);
}

.icon-box {
		width: 58px;
		height: 58px;
		border-radius: 16px;
		background: #ccfbf1;
		color: #0f766e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.8rem;
		margin-bottom: 16px;
}

.value-icon {
		width: 62px;
		height: 62px;
		border-radius: 18px;
		background: #fef3c7;
		color: #92400e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.9rem;
		margin: 0 auto 16px;
}

.bg-soft {
		background: #ecfdf5;
}

.preview-box {
		background: #ffffff;
		border-radius: 22px;
		box-shadow: 0 12px 35px rgba(0,0,0,0.08);
		padding: 25px;
}

.preview-screen {
		background: #f1f5f9;
		border-radius: 16px;
		padding: 20px;
		min-height: 280px;
}

.mission-box {
		background: #ffffff;
		border-left: 6px solid #facc15;
		border-radius: 20px;
		box-shadow: 0 8px 25px rgba(0,0,0,0.06);
		padding: 30px;
}

.faq .accordion-button:not(.collapsed) {
		background: #ccfbf1;
		color: #0f766e;
		font-weight: 700;
}

.cta {
		background: linear-gradient(135deg, #115e59, #0f766e);
		color: #fff;
		border-radius: 28px;
		padding: 55px 30px;
}

footer {
		background: #0f172a;
		color: #cbd5e1;
		padding: 35px 0;
}

footer a {
		color: #e2e8f0;
		text-decoration: none;
}

footer a:hover {
		color: #facc15;
}

@media (max-width: 768px) {
		.hero {
				padding: 65px 0;
				text-align: center;
		}

		.hero h1 {
				font-size: 2.2rem;
		}
}

.feature-card,
.step-card,
.testimonial-card,
.value-card {
		transition: all 0.25s ease;
}

.feature-card:hover,
.step-card:hover,
.testimonial-card:hover,
.value-card:hover {
		transform: translateY(-5px);
		background: #ecfdf5; /* hijau muda */
}

.feature-card:hover h5,
.step-card:hover h6,
.value-card:hover h5 {
		color: #065f46; /* hijau lebih gelap */
}

.feature-card:hover .icon-box {
		background: #0f766e;
		color: #ffffff;
}

.feature-card:hover,
.step-card:hover,
.value-card:hover {
		border: 1px solid #a7f3d0;
}

.logo-navbar {
		height: 34px;   /* ukuran ideal navbar */
		width: auto;
		object-fit: contain;
}


       body {
            padding-top: 85px;
        }

        .public-navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;

            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        }

        .logo-navbar {
            height: 42px;
            width: auto;
        }

        @media (max-width: 991px) {
            body {
                padding-top: 75px;
            }

            .navbar-collapse {
                margin-top: 12px;
                background: #fff;
                padding: 15px;
                border-radius: 14px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            }

            .navbar-nav .nav-item {
                width: 100%;
            }

            .navbar-nav .btn {
                width: 100%;
            }
        }