/* Wartek Kembangan — visual override layer
   Base structure remains in css/style.css and css/responsive.css. */
:root {
    --primary-dark: #123b3a;
    --primary: #0f766e;
    --primary-light: #14b8a6;
    --accent-green: #f97316;
    --accent-green-dark: #ea580c;
    --white: #ffffff;
    --gray-50: #f3fbf8;
    --gray-100: #e1f2ed;
    --gray-200: #cde4dd;
    --gray-700: #294945;
    --gray-900: #143331;
}

body { background: #fffdf7; }
.header { background: rgba(255,253,247,.96); border-bottom-color: #d7ebe4; }
.logo img { width: 40px; height: 40px; }
.logo-mark { background: linear-gradient(135deg, #0f766e 0%, #123b3a 100%); }

.hero {
    background: radial-gradient(circle at 84% 18%, rgba(249,115,22,.25), transparent 27%), linear-gradient(135deg, #123b3a 0%, #0f766e 62%, #115e59 100%);
}
.hero::after {
    content: 'KEMBANGAN';
    position: absolute;
    right: -1rem;
    bottom: -2.5rem;
    color: rgba(255,255,255,.06);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 800;
    letter-spacing: .08em;
    pointer-events: none;
}
.hero-content, .hero-content h1, .hero-content p { position: relative; z-index: 1; }
.hero-content h1 { color: #fff; }
.hero-content h1 span { color: #fbbf24; }
.hero-subtitle { color: rgba(255,255,255,.88); }
.hero-image { filter: drop-shadow(0 1.25rem 1.5rem rgba(0,0,0,.22)); }

.eyebrow, .read-more { color: var(--primary); }
.section-alt { background: #f1f8f5; }
.service-card, .feature-card, .testimonial-card, .area-card, .stat-card { border-color: #d7ebe4; box-shadow: 0 10px 26px rgba(18,59,58,.06); }
.service-card:hover, .feature-card:hover, .area-card:hover { border-color: rgba(15,118,110,.38); transform: translateY(-4px); }
.service-icon { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.feature-icon { color: var(--primary); border-color: #cde4dd; background: #f3fbf8; }
.cta-section { background: linear-gradient(110deg, #123b3a 0%, #0f766e 100%) !important; }
.footer { background: #123b3a; }
.btn { cursor: pointer; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { color: var(--primary); border-color: var(--primary); }
.btn-whatsapp { background: var(--accent-green); border-color: var(--accent-green); }
.btn-whatsapp:hover { background: var(--accent-green-dark); border-color: var(--accent-green-dark); }
.process-step::before, .contact-info-icon { background: var(--primary); }
.area-card svg { color: var(--accent-green); }
.wa-float { background: var(--accent-green); }
.wa-float:hover { background: var(--accent-green-dark); }

/* Kembangan-specific additions that reuse existing layout primitives. */
.kembangan-ribbon { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.kembangan-ribbon span { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); border-radius: 999px; padding: .45rem .75rem; font-size: .84rem; }
.service-card .service-tag { display: inline-block; margin-bottom: .7rem; color: var(--accent-green-dark); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zone-note { display: block; color: var(--gray-500); font-size: .82rem; margin-top: .2rem; }
@media (max-width: 768px) { .hero::after { right: -2rem; bottom: -1rem; font-size: 4rem; } .kembangan-ribbon { margin-bottom: 1.25rem; } }