:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-light: #60a5fa;
  --ink: #0f172a;
  --ink-soft: #475569;
  --bg-soft: #f6f8fc;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); scroll-behavior: smooth; }

/* ===== Navbar ===== */
.navbar-modern {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: .85rem 0; transition: background .3s ease, padding .3s ease;
}
.navbar-modern.scrolled { background: rgba(15, 23, 42, .92); padding: .55rem 0; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.navbar-modern .navbar-brand { color: #fff; font-weight: 800; font-size: 1.35rem; }
.navbar-modern .navbar-brand span { color: var(--brand-light); }
.navbar-modern .nav-link { color: rgba(255,255,255,.85); font-weight: 500; padding: .5rem 1rem !important; }
.navbar-modern .nav-link:hover, .navbar-modern .nav-link.active { color: #fff; }
.navbar-modern .btn-nav-cta { background: var(--brand); color: #fff; border-radius: 50px; padding: .5rem 1.25rem; font-weight: 600; font-size: .9rem; }
.navbar-modern .btn-nav-cta:hover { background: var(--brand-dark); color: #fff; }

/* ===== Hero ===== */
.hero-modern {
  min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, #1e40af 0%, #0f172a 55%, #020617 100%);
  color: #fff;
}
.hero-modern::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle, rgba(96,165,250,.25) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: driftBg 30s linear infinite;
}
@keyframes driftBg { from { background-position: 0 0; } to { background-position: 260px 260px; } }
.hero-modern .blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; z-index: 0;
}
.hero-modern .blob-1 { width: 420px; height: 420px; background: #2563eb; top: -100px; right: -80px; animation: floatY 9s ease-in-out infinite; }
.hero-modern .blob-2 { width: 320px; height: 320px; background: #06b6d4; bottom: -80px; left: -60px; animation: floatY 11s ease-in-out infinite reverse; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(30px); } }
.hero-modern .container { position: relative; z-index: 2; }
.hero-modern h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; }
.hero-modern h1 span { color: var(--brand-light); }
.hero-modern p.lead { color: rgba(255,255,255,.75); font-size: 1.15rem; max-width: 560px; }
.hero-modern .badge-pill { background: rgba(96,165,250,.15); border: 1px solid rgba(96,165,250,.4); color: #93c5fd; border-radius: 50px; padding: .4rem 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.btn-hero-primary { background: var(--brand); border: none; color: #fff; padding: .8rem 1.9rem; border-radius: 50px; font-weight: 700; box-shadow: 0 10px 25px rgba(37,99,235,.35); }
.btn-hero-primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,.45); }
.btn-hero-outline { border: 1.5px solid rgba(255,255,255,.35); color: #fff; padding: .8rem 1.9rem; border-radius: 50px; font-weight: 700; }
.btn-hero-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; }
.hero-stats .stat-num { font-size: 2rem; font-weight: 800; color: #fff; }
.hero-stats .stat-label { color: rgba(255,255,255,.6); font-size: .85rem; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); z-index: 2; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ===== Section generic ===== */
.section-pad { padding: 6rem 0; }
.section-tag { color: var(--brand); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); margin-top: .4rem; }
.section-desc { color: var(--ink-soft); max-width: 620px; }
.bg-soft-section { background: var(--bg-soft); }

/* ===== Service cards ===== */
.service-card {
  background: #fff; border-radius: 1.25rem; padding: 2rem 1.75rem; height: 100%;
  border: 1px solid #eef1f7; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(15,23,42,.08); border-color: transparent; }
.service-card .icon-wrap {
  width: 58px; height: 58px; border-radius: 1rem; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; font-size: 1.5rem; margin-bottom: 1.2rem;
}
.service-card h4 { font-size: 1.15rem; font-weight: 700; }
.service-card p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 0; }

/* ===== About ===== */
.about-img-wrap { position: relative; }
.about-img-wrap img { border-radius: 1.5rem; box-shadow: 0 25px 50px rgba(15,23,42,.15); }
.about-check-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.about-check-list li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; color: var(--ink-soft); }
.about-check-list li i { color: var(--brand); font-size: 1.15rem; margin-top: .1rem; }

/* ===== Berita cards ===== */
.berita-card { background: #fff; border-radius: 1.25rem; overflow: hidden; border: 1px solid #eef1f7; transition: transform .25s ease, box-shadow .25s ease; height: 100%; }
.berita-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(15,23,42,.08); }
.berita-card .berita-img { height: 190px; width: 100%; object-fit: cover; background: #e2e8f0; }
.berita-card .berita-body { padding: 1.4rem; }
.berita-card .berita-date { color: var(--brand); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.berita-card h5 { font-size: 1.05rem; font-weight: 700; margin: .4rem 0 .6rem; }
.berita-card p { color: var(--ink-soft); font-size: .88rem; }
.berita-card a.stretched-link { color: inherit; text-decoration: none; }

/* ===== Galeri ===== */
.galeri-item { border-radius: 1rem; overflow: hidden; position: relative; aspect-ratio: 1/1; }
.galeri-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeri-item:hover img { transform: scale(1.08); }

/* ===== Klien ===== */
.klien-logo-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.2rem; text-align: center; }
.klien-logo-wrap img { max-height: 52px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s ease, opacity .25s ease; }
.klien-logo-wrap:hover img { filter: grayscale(0); opacity: 1; }
.klien-logo-wrap .klien-nama { font-size: .78rem; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }

/* ===== Contact ===== */
.contact-info-card { background: #fff; border-radius: 1.25rem; padding: 1.6rem; border: 1px solid #eef1f7; height: 100%; }
.contact-info-card i { font-size: 1.4rem; color: var(--brand); margin-bottom: .6rem; }
.map-modern-wrap { border-radius: 1.25rem; overflow: hidden; box-shadow: 0 20px 40px rgba(15,23,42,.1); }
.form-modern .form-control { border-radius: .8rem; border: 1px solid #e2e8f0; padding: .75rem 1rem; }
.form-modern .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
.btn-submit-modern { background: var(--brand); color: #fff; border: none; border-radius: .8rem; padding: .8rem 1.6rem; font-weight: 700; }
.btn-submit-modern:hover { background: var(--brand-dark); color: #fff; }

/* ===== Footer ===== */
.footer-modern { background: #0f172a; color: rgba(255,255,255,.65); padding: 3.5rem 0 1.5rem; }
.footer-modern h5 { color: #fff; font-weight: 800; }
.footer-modern h5 span { color: var(--brand-light); }
.footer-modern a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-modern a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; }

/* ===== Scroll-to-top ===== */
.btn-scrolltop {
  position: fixed; bottom: 100px; right: 24px; z-index: 999; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(37,99,235,.4);
}
.btn-scrolltop.show { display: flex; }

/* ===== Reveal animation (fallback tanpa AOS) ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ===== Page banner (untuk sub-halaman seperti Tentang Kami) ===== */
.page-banner {
  padding: 150px 0 70px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle at 15% 20%, #1e40af 0%, #0f172a 60%, #020617 100%);
}
.page-banner .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .3; }
.page-banner .blob-1 { width: 320px; height: 320px; background: #2563eb; top: -80px; right: -60px; }
.page-banner h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; position: relative; z-index: 2; }
.page-banner .breadcrumb-modern { position: relative; z-index: 2; font-size: .88rem; color: rgba(255,255,255,.65); }
.page-banner .breadcrumb-modern a { color: rgba(255,255,255,.85); text-decoration: none; }
.page-banner .breadcrumb-modern a:hover { color: #fff; }

.value-card { background: #fff; border: 1px solid #eef1f7; border-radius: 1.1rem; padding: 1.6rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15,23,42,.08); }
.value-card i { font-size: 1.6rem; color: var(--brand); margin-bottom: .8rem; display: block; }
.value-card h6 { font-weight: 700; margin-bottom: .4rem; }
.value-card p { color: var(--ink-soft); font-size: .88rem; margin-bottom: 0; }