/* ============================================================
   ALZEERA — Frontend Gabungan
   PALETTE & VISUAL : ALZEERA-1 (identitas utama, tidak diubah)
   MOTION & REVEAL  : ALZEERA-2 (Lenis + reveal 2-level + parallax)
   TOPBAR BAR       : ALZEERA-1 (.site-progress)
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — palette ALZEERA-1
   ------------------------------------------------------------ */
:root {
  --navy: #09285d;
  --blue: #1268e8;
  --blue-2: #2b8cff;
  --sky: #6cc9ff;
  --green: #18b96b;
  --green-2: #55cf75;
  --yellow: #ffc928;
  --orange: #ff9f1c;
  --purple: #8b43d8;
  --teal: #1bb6c9;
  --ink: #10244a;
  --muted: #667793;
  --paper: #f7fbff;
  --white: #ffffff;
  --line: rgba(24, 76, 137, .12);

  --shadow-sm: 0 8px 25px rgba(9, 40, 93, .05);
  --shadow: 0 22px 60px rgba(24, 76, 137, .12);

  --radius-md: 20px;
  --radius-full: 999px;

  /* motion — timing dari ALZEERA-2 */
/* Easing motion.
   Nilai LAMA cubic-bezier(.16,1,.3,1)/problems: kurvanya nyaris identik
   dengan easing Lenis — 49% progress sudah terjadi pada 10% durasi, jadi
   opacity reveal mencapai ~85% dalam ~120ms dari 600ms dan TERLIHAT INSTANT.
   Kurva di bawah landai (31% pada 10%, 76% pada 30%) sehingga motion
   benar-benar terlihat, tetap monoton dan tanpa overshoot. */
--ease-out: cubic-bezier(.22,.68,.24,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--dur-fast: .25s;
--dur-med: .6s;
--dur-reveal: .7s;      /* reveal butuh lebih lama agar terlihat, komponen lain tidak */

  --nav-h: 78px;          /* tinggi navbar, dipakai juga sebagai scroll offset */
  --reveal-y: 28px;       /* jarak reveal dari ALZEERA-2 */
  --reveal-step: .06s;    /* stagger antar anak dari ALZEERA-2 */
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Penting: Lenis mengambil alih scroll native. CSS scroll-behavior:smooth
   akan melawan Lenis, jadi harus tetap auto. */
  scroll-behavior: auto;
  scroll-padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
i[class^="bi-"] { line-height: 1; }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* Indikator fokus keyboard */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------
   3. NOISE OVERLAY (ALZEERA-2)
   ------------------------------------------------------------ */
.noise-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   4. TOPBAR ANIMATED BAR (ALZEERA-1 — WAJIB dipertahankan)
   ------------------------------------------------------------ */
.site-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1000; }
.site-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow));
  box-shadow: 0 0 14px rgba(43, 140, 255, .6);
}

/* ------------------------------------------------------------
   5. REVEAL 2-LEVEL (ALZEERA-2)
   Parent [data-reveal] dipantau IO, anak [data-reveal-child] di-stagger.
   Pakai properti `translate` (bukan transform) supaya tidak berebut
   dengan transform milik komponen (hover lift, parallax).
   ------------------------------------------------------------ */
.js-reveal [data-reveal-child] {
  opacity: 0;
  translate: 0 var(--reveal-y);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
}
.js-reveal [data-reveal].is-visible [data-reveal-child] { opacity: 1; translate: 0 0; }

.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(1)  { transition-delay: .02s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(2)  { transition-delay: .08s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(3)  { transition-delay: .14s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(4)  { transition-delay: .20s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(5)  { transition-delay: .26s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(6)  { transition-delay: .32s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(7)  { transition-delay: .38s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(8)  { transition-delay: .44s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(9)  { transition-delay: .50s; }
.js-reveal [data-reveal].is-visible [data-reveal-child]:nth-child(n+10) { transition-delay: .56s; }

/* ------------------------------------------------------------
   6. TOMBOL (visual ALZEERA-1, motion ALZEERA-2)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 50px; padding: 0 21px; border-radius: 14px;
  font-size: 13px; font-weight: 800;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn i { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translateY(-3px); }
.btn:hover i { transform: translate(2px, -2px); }
.btn-primary { color: #fff; background: linear-gradient(110deg, var(--blue), #0d77e8, var(--green)); box-shadow: 0 15px 30px rgba(18, 104, 232, .2); }
.btn-secondary { color: var(--navy); border-color: var(--line); background: rgba(255, 255, 255, .72); }
.btn-block { width: 100%; margin-top: 10px; }

/* ------------------------------------------------------------
   7. NAVBAR (visual ALZEERA-1, struktur & auto-hide ALZEERA-2)
   ------------------------------------------------------------ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  padding: 14px 0;
  transition: transform var(--dur-med) var(--ease-in-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              padding var(--dur-fast) var(--ease-out);
}
.navbar.nav-scrolled {
  padding: 9px 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgba(9, 40, 93, .08);
}
.navbar.nav-hidden { transform: translateY(-100%); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px 13px 13px 5px;
  background: linear-gradient(145deg, var(--blue), var(--green));
  color: #fff; transform: rotate(-2deg);
  box-shadow: 0 9px 20px rgba(18, 104, 232, .22);
}
.brand-mark-inner { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 20px; transform: rotate(2deg); }
.brand strong { display: block; font-family: "Plus Jakarta Sans"; letter-spacing: .06em; font-size: 17px; line-height: 1; }
.brand small { display: block; color: #7890ae; font-size: 7px; letter-spacing: .18em; margin-top: 5px; font-weight: 800; }

.nav-menu { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; color: #45617e; }
.nav-menu a { position: relative; transition: color var(--dur-fast) var(--ease-out); }
.nav-menu a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--orange);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav-menu a:not(.nav-cta):hover { color: var(--blue); }
.nav-menu a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  padding: 11px 17px; border-radius: var(--radius-full); color: #fff !important;
  background: linear-gradient(110deg, var(--blue), #1477ef 55%, var(--green));
  box-shadow: 0 9px 24px rgba(18, 104, 232, .2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18, 104, 232, .28); }

.nav-toggle { display: none; width: 42px; height: 42px; }
.nav-toggle span {
  display: block; height: 2px; width: 22px; margin: 5px auto;
  background: var(--navy); border-radius: 4px;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast), width var(--dur-med) var(--ease-out);
}
/* Lebar bar hanya saat BELUM terbuka — kalau tidak, hover mencerca lebar
   dua garis yang sudah berotasi 45° sehingga ikon "X" terlihat goyah. */
.nav-toggle:not([aria-expanded="true"]):hover span { width: 26px; }
.nav-toggle[aria-expanded="true"] span { width: 22px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   8. HERO (visual ALZEERA-1, parallax ALZEERA-2)
   ------------------------------------------------------------ */
.hero {
  position: relative; min-height: 860px;
  display: flex; align-items: center;
  padding: 150px 0 95px; overflow: hidden;
  background:
    radial-gradient(circle at 83% 20%, rgba(104, 202, 255, .35), transparent 27%),
    radial-gradient(circle at 15% 80%, rgba(24, 185, 107, .13), transparent 25%),
    linear-gradient(180deg, #eff9ff 0%, #fff 74%, #f7fbff 100%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(20, 104, 232, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20, 104, 232, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); animation: float 8s ease-in-out infinite; pointer-events: none; }
.hero-glow-1 { width: 320px; height: 320px; right: -90px; top: 170px; background: rgba(255, 201, 40, .22); }
.hero-glow-2 { width: 250px; height: 250px; left: -80px; bottom: 80px; background: rgba(139, 67, 216, .12); animation-delay: -2s; }

/* Orb dekoratif tambahan (ALZEERA-3).
   Sengaja TIDAK memakai .hero-glow / @keyframes float: selector bersama
   akan mengubah perilaku orb existing saat aturan ini diesain ulang.
   Aturan motion di sini hanya transform + opacity (tidak ada width/height/
   top/left/border-radius/filter yang dianimasikan) => jalur compositor,
   tanpa relayout per frame. will-change sengaja TIDAK dipakai supaya 3
   lapis ini tidak dipromosikan permanen (memicu cache raster 60fps penuh). */
.hero-orb {
  position: absolute; z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
}
.hero-orb-a {
  width: 280px; height: 280px; right: 2%; top: 60px;
  background: rgba(27, 182, 201, .20);          /* --teal */
  filter: blur(20px);
  animation-name: orbDriftA; animation-duration: 21s; animation-delay: -3s;
}
.hero-orb-b {
  width: 190px; height: 190px; left: 33%; bottom: 5%;
  background: rgba(108, 201, 255, .24);         /* --sky */
  filter: blur(16px);
  animation-name: orbDriftB; animation-duration: 29s; animation-delay: -11s;
}
.hero-orb-c {
  width: 130px; height: 130px; right: 40%; top: 40px;
  background: rgba(18, 104, 232, .13);          /* --blue */
  filter: blur(12px);
  animation-name: orbDriftC; animation-duration: 37s; animation-delay: -19s;
}

/* Tiga keyframes terpisah, durasi + delay + arah berbeda =>
   pola geraknya tidak pernah sinkron antar orb. */
@keyframes orbDriftA {                 /* didominasi vertikal */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .78; }
  33%      { transform: translate3d(14px, -18px, 0); opacity: 1; }
  66%      { transform: translate3d(-10px, 10px, 0); opacity: .88; }
}
@keyframes orbDriftB {                 /* didominasi horizontal */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .82; }
  30%      { transform: translate3d(-22px, 8px, 0); opacity: 1; }
  70%      { transform: translate3d(16px, -6px, 0); opacity: .9; }
}
@keyframes orbDriftC {                 /* diagonal, amplitudo kecil */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .8; }
  40%      { transform: translate3d(10px, 16px, 0); opacity: 1; }
  75%      { transform: translate3d(-14px, -12px, 0); opacity: .9; }
}

/* Reference parallax (ALZEERA-2). Diperbesar 10% supaya saat bergeser
   tidak pernah terlihat tepi kosong. */
.hero-bg {
  position: absolute; inset: -10%; z-index: 0;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 201, 40, .18), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(104, 202, 255, .22), transparent 46%),
    radial-gradient(circle at 52% 88%, rgba(27, 182, 201, .12), transparent 52%);
}

.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; gap: 55px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 4px;
  border: 1px solid rgba(18, 104, 232, .15); background: rgba(255, 255, 255, .72);
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--blue);
}
.eyebrow i { color: var(--orange); }

.hero h1 {
  margin: 20px 0 18px; max-width: 680px;
  font-family: "Plus Jakarta Sans"; font-size: clamp(42px, 5vw, 68px);
  line-height: 1.08; letter-spacing: -.055em; color: var(--navy);
}
.gradient-text {
  background: linear-gradient(100deg, var(--blue) 0%, #217eea 38%, var(--green) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { max-width: 600px; font-size: 17px; color: var(--muted); line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.hero-proof { display: flex; align-items: center; gap: 19px; margin-top: 40px; }
.proof-item strong { display: block; font-family: "Plus Jakarta Sans"; font-size: 19px; }
.proof-item span { display: block; color: #71839b; font-size: 10px; margin-top: 2px; }
.proof-line { width: 1px; height: 29px; background: var(--line); }

.hero-scroll-cue {
  position: absolute; bottom: 26px; left: 50%; z-index: 3;
  width: 24px; height: 38px; margin-left: -12px;
  border: 2px solid var(--line); border-radius: var(--radius-full);
}
.hero-scroll-cue span {
  position: absolute; top: 7px; left: 50%; margin-left: -2px;
  width: 4px; height: 8px; border-radius: var(--radius-full); background: var(--blue);
  animation: scrollCue 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollCue { 0% { opacity: 1; top: 7px; } 70%, 100% { opacity: 0; top: 18px; } }

/* Mockup dashboard */
.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.dashboard-card {
  position: relative; z-index: 2; width: min(620px, 100%); overflow: hidden;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px; box-shadow: 0 40px 100px rgba(9, 40, 93, .19), 0 0 0 10px rgba(255, 255, 255, .3);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
  transition: transform .5s ease;
}
.hero-visual:hover .dashboard-card { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px); }
.dash-top { height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #edf2f8; }
.dash-brand { font-weight: 800; color: var(--navy); font-size: 12px; display: flex; gap: 7px; align-items: center; }
.mini-logo { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue), var(--green)); border-radius: 7px 7px 7px 2px; font-size: 10px; font-weight: 800; }
.dash-dots { display: flex; gap: 5px; }
.dash-dots i { width: 6px; height: 6px; border-radius: 50%; background: #cdd7e4; }
.dash-body { display: grid; grid-template-columns: 58px 1fr; min-height: 375px; }
.dash-sidebar { padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 17px; border-right: 1px solid #edf2f8; color: #9caec3; }
.dash-sidebar span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: 12px; }
.dash-sidebar .active { background: rgba(18, 104, 232, .1); color: var(--blue); }
.dash-content { padding: 25px; background: linear-gradient(145deg, #fff, #f8fbff); }
.dash-welcome { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-welcome small { color: #8293a9; font-size: 9px; }
.dash-welcome h3 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.02em; }
.status { padding: 6px 9px; color: #15995b; background: #e9faf1; border-radius: var(--radius-full); font-size: 9px; font-weight: 800; }
.status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: middle; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 12px; }
.stat-box { padding: 13px; border-radius: 14px; background: #fff; border: 1px solid #edf2f8; }
.stat-box span, .stat-box small { display: block; font-size: 8px; color: #8b9aae; }
.stat-box b { display: block; font-size: 20px; margin: 4px 0; }
.stat-box.blue b { color: var(--blue); }
.stat-box.green b { color: var(--green); }
.stat-box.yellow b { color: #e49a00; }
.dash-chart { padding: 15px; border: 1px solid #edf2f8; background: #fff; border-radius: 15px; }
.chart-head { display: flex; justify-content: space-between; font-size: 9px; color: #6f8198; }
.chart-head b { color: var(--ink); }
.bars { height: 105px; display: flex; align-items: end; gap: 7px; padding-top: 13px; }
.bars i { display: block; flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, var(--blue), var(--sky)); opacity: .82; }

.visual-orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(18, 104, 232, .17); pointer-events: none; }
.orbit-one { width: 560px; height: 560px; animation: spin 24s linear infinite; }
.orbit-two { width: 690px; height: 690px; border-color: rgba(24, 185, 107, .12); animation: spin 34s linear infinite reverse; }

.float-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(9, 40, 93, .15); border: 1px solid rgba(255, 255, 255, .8);
  animation: float 5s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 11px; }
.float-card small { display: block; font-size: 8px; color: #8798ad; margin-top: 2px; }
.float-card b { font-size: 13px; color: var(--green); }
.float-icon { width: 33px; height: 33px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 14px; }
.float-icon.whatsapp { background: var(--green); }
.float-icon.service { background: linear-gradient(145deg, var(--purple), var(--blue)); }
.float-card-top { top: 18px; right: -5px; }
.float-card-bottom { bottom: 40px; left: -15px; animation-delay: -2s; }

.hero-wave {
  position: absolute; left: -5%; right: -5%; bottom: -1px; height: 70px;
  background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ------------------------------------------------------------
   9. SECTION HEADING (ALZEERA-1) + numbering ALZEERA-2
   ------------------------------------------------------------ */
.section-intro { max-width: 690px; margin-bottom: 42px; }
.section-intro.centered { text-align: center; margin-inline: auto; }
.section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; }
.section-intro h2, .contact-left h2 {
  font-family: "Plus Jakarta Sans"; font-size: clamp(31px, 4vw, 46px);
  line-height: 1.12; letter-spacing: -.045em; margin: 10px 0 14px; color: var(--navy);
}
.section-intro p { color: var(--muted); font-size: 15px; max-width: 650px; }
.section-intro.centered p { margin-inline: auto; }

/* ------------------------------------------------------------
   10. LAYANAN — kartu ALZEERA-1, hover motion ALZEERA-2
   ------------------------------------------------------------ */
.service-strip { padding: 80px 0 110px; background: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.service-card {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 16px; border-radius: 17px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.service-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--blue), var(--green));
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-fast) var(--ease-out);
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(9, 40, 93, .1); border-color: rgba(18, 104, 232, .18); }
.service-card:hover::before { transform: scaleY(1); }
.service-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 12px; font-size: 17px;
  background: linear-gradient(145deg, #edf7ff, #f0fff6); color: var(--blue);
  transition: color var(--dur-fast) var(--ease-out);
}
.service-card:hover .service-icon { color: var(--orange); }
.service-card-title { font-size: 12px; font-weight: 800; }
.service-card > b { margin-left: auto; color: #a7b6c7; font-size: 12px; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.service-card:hover > b { color: var(--blue); transform: translate(2px, -2px); }

/* ------------------------------------------------------------
   11. FITUR — bento ALZEERA-2 + mockup Service Manager ALZEERA-1
   ------------------------------------------------------------ */
.platform-section { padding: 120px 0; background: #fff; position: relative; overflow: hidden; }
/* Section #keunggulan bergantian agar tidak menyatu dengan #fitur (putih). */
.platform-section-alt { background: var(--paper); }
.platform-section-alt .bento-item { background: #fff; }
.platform-section-alt .bento-lg { background: var(--navy); }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.bento-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue); }
.bento-item > i { font-size: 24px; color: var(--blue); margin-bottom: 14px; display: block; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.bento-item:hover > i { transform: scale(1.12); color: var(--orange); }
.bento-item h3 { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.bento-item p { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.6; }
.bento-lg { grid-column: span 2; background: var(--navy); color: #fff; border-color: transparent; }
.bento-lg > i { color: var(--yellow); }
.bento-lg h3 { color: #fff; font-size: 18px; }
.bento-lg p { color: rgba(247, 251, 255, .72); }

.feature-showcase {
  position: relative; margin-top: 34px; padding: 25px;
  border-radius: 30px; min-height: 460px;
  background: linear-gradient(145deg, #eaf6ff, #f4fff9);
  display: grid; place-items: center;
}
.feature-panel {
  position: relative; z-index: 2; width: 100%;
  border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 25px 60px rgba(9, 40, 93, .14);
  transform: rotate(1.2deg);
  transition: transform var(--dur-med) var(--ease-out);
}
.feature-showcase:hover .feature-panel { transform: rotate(0deg) translateY(-4px); }
.feature-panel-top { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #edf2f8; }
.feature-panel-top > div { flex: 1; }
.feature-panel-top b { display: block; font-size: 11px; }
.feature-panel-top small { display: block; color: #8c9bad; font-size: 8px; }
.panel-menu { color: #9aaabc; letter-spacing: 3px; }
.feature-preview { padding: 17px; }
.preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.preview-header span { font-size: 12px; font-weight: 800; }
.preview-header button { background: var(--blue); color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 8px; font-weight: 800; transition: background var(--dur-fast) var(--ease-out); }
.preview-header button:hover { background: var(--navy); }
.preview-row { display: flex; align-items: center; gap: 10px; padding: 12px 7px; border-top: 1px solid #f0f3f7; border-radius: 10px; transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); }
.preview-row:hover { background: #f7fbff; padding-left: 12px; }
.preview-row > div { flex: 1; }
.preview-row b { display: block; font-size: 10px; }
.preview-row small { display: block; font-size: 8px; color: #91a0b1; margin-top: 2px; }
.preview-row em { font-style: normal; font-size: 8px; color: var(--green); background: #ecfbf3; padding: 5px 7px; border-radius: var(--radius-full); }
.preview-thumb { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 13px; }
.preview-thumb.hotel { background: var(--blue); }
.preview-thumb.transport { background: var(--green); }
.preview-thumb.package { background: var(--orange); }
.preview-thumb.medical { background: var(--purple); }
.accent-card {
  position: absolute; z-index: 3; right: -14px; bottom: 22px;
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-radius: 15px; background: var(--navy); color: #fff;
  box-shadow: 0 16px 35px rgba(9, 40, 93, .22);
}
.accent-card > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--yellow); color: var(--navy); }
.accent-card b { display: block; font-size: 11px; }
.accent-card small { display: block; font-size: 8px; color: #b9c9de; }

/* ------------------------------------------------------------
   12. CARA KERJA — 5 langkah (ALZEERA-2), styling ALZEERA-1
   ------------------------------------------------------------ */
.how-section { padding: 110px 0; background: linear-gradient(180deg, #f8fcff, #eef9ff); }
.steps { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 10px; }
.step {
  position: relative; padding: 28px 18px; min-height: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step-number { position: absolute; right: 17px; top: 15px; color: #c9d5e2; font-size: 10px; font-weight: 800; }
.step-icon {
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 15px; font-size: 20px; color: var(--blue);
  background: linear-gradient(145deg, #e8f4ff, #eafbf1);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.step:hover .step-icon { transform: scale(1.08); color: var(--orange); }
.step h3 { font-size: 14px; margin: 22px 0 6px; }
.step p { margin: 0; color: #8291a4; font-size: 10px; line-height: 1.7; }
.step-connector { height: 2px; background: linear-gradient(90deg, var(--blue), var(--green)); position: relative; }
.step-connector::after { content: "\203A"; position: absolute; right: -2px; top: -14px; color: var(--blue); font-size: 24px; }

/* ------------------------------------------------------------
   13. JOURNEY / PERJALANAN PELANGGAN (konten ALZEERA-2)
   ------------------------------------------------------------ */
.journey-section {
  /* Anchor legacy #profesional diposisikan relatif ke section (lihat index.php). */
  position: relative;
  padding: 120px 0; background: #fff;
  /* Warna teks deskripsi + footnote: 5.3:1 di atas #fff dan 5.1:1 di atas
     #f7fbff (WCAG AA untuk teks normal). Nilai lama #8796a8 hanya ~3:1. */
  --journey-text: #5f6c82;
}
.journey-anchor-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
.journey-flow {
  position: relative;
  /* Satu sumber koordinat untuk badge DAN garis vertikal, supaya garis
     selalu tepat di tengah badge tanpa angka yang bisa tidak sinkron.
     --journey-half = pusat badge; --journey-indent + half = titik tengah. */
  --journey-badge: 40px;
  --journey-rail: 2px;
  --journey-indent: 55px;
  --journey-half: calc(var(--journey-badge) / 2);
}
.journey-line {
  position: absolute;
  left: calc(var(--journey-indent) + var(--journey-half) - var(--journey-rail) / 2);
  top: var(--journey-half); bottom: var(--journey-half);
  width: var(--journey-rail);
  background: linear-gradient(var(--blue), var(--green), var(--yellow));
}
/* Reset UA untuk <ol>: margin/padding bawaan dihapus supaya koordinat
   --journey-indent tetap berlaku dan bullet tidak muncul. */
.journey-steps { list-style: none; margin: 0; padding: 0 0 0 var(--journey-indent); }
.journey-item { position: relative; display: flex; align-items: flex-start; gap: 17px; padding: 0 0 22px; }
.journey-item:last-child { padding-bottom: 0; }
.journey-item > span {
  position: relative; z-index: 2; width: var(--journey-badge); height: var(--journey-badge); flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: #edf6ff; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .02em;
  border: 4px solid #fff; box-shadow: 0 0 0 1px rgba(18, 104, 232, .08);
}
/* .active adalah state statis, bukan trigger transisi — sebelumnya ada
   transition tanpa hover/focus yang pernah menyalakannya (dead code). */
.journey-item.active > span { background: var(--green); color: #fff; box-shadow: 0 0 0 6px rgba(24, 185, 107, .1); }
/* Hierarchy: nomor (11px/800 + badge) > judul (15px/700) > deskripsi (12px).
   line-height ditulis eksplisit supaya 2-3 baris deskripsi tetap nyaman. */
.journey-item h3 { margin: 0; padding-top: 1px; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); }
.journey-desc { display: block; margin-top: 6px; font-size: 12px; line-height: 1.65; color: var(--journey-text); }
.journey-footnote { margin-top: 34px; }
.journey-footnote span {
  display: inline-block; font-size: 14px; font-style: italic; color: var(--journey-text);
  padding: 16px 26px; border-left: 3px solid var(--orange);
  background: #f7fbff; border-radius: 0 12px 12px 0;
}

/* ------------------------------------------------------------
   13b. PANEL VISUAL + CAROUSEL (section 05 saja)
   Tanpa asset gambar: visual disusun dari token gradient + glyph
   Bootstrap Icons yang sudah dimuat. Tidak ada file eksternal baru.
   ------------------------------------------------------------ */
/* Base = satu kolom (mobile dan tablet). Dua kolom pada >=1021px, batas
   breakpoint yang sudah dipakai project (@media max-width:1020px). */
.journey-body { display: grid; gap: 34px; }

.journey-panel {
  --jp-pad: 28px;
  --jp-fade: .62s;
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 380px;
  padding: var(--jp-pad);
  border-radius: var(--radius-md);          /* 20px — token design system */
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(118% 88% at 86% 0%, rgba(108,201,255,.30) 0%, rgba(108,201,255,0) 58%),
    radial-gradient(90% 70% at 6% 100%, rgba(24,185,107,.22) 0%, rgba(24,185,107,0) 60%),
    linear-gradient(158deg, var(--navy) 0%, #06203f 100%);
  box-shadow: 0 26px 62px rgba(9,40,93,.22), inset 0 0 0 1px rgba(255,255,255,.09);
}
/* Branding halus di pojok panel — watermark, bukan elemen interaktif. */
.journey-brand {
  position: absolute; top: 22px; right: 26px; z-index: 4;
  font-size: 10px; font-weight: 800; letter-spacing: .22em;
  color: rgba(255,255,255,.34); pointer-events: none;
}

/* Stage = grid 1x1. Semua slide menumpuk di sel yang sama, jadi tinggi
   panel = slide TERPANJANG dan TIDAK pernah berubah saat slide berganti
   (nol layout shift). Bukan position:absolute, jadi tidak butuh min-height
   per breakpoint. */
.journey-stage { position: relative; z-index: 2; display: grid; align-content: start; flex: 1 1 auto; }

.journey-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; visibility: hidden;
  /* Cross-fade murni: hanya opacity. visibility di-delay sebesar durasi
     fade supaya slide yang keluar tetap terlihat selama transisi, lalu
     hilang — tanpa flash, tanpa dua slide bertumpuk setelah selesai. */
  transition: opacity var(--jp-fade) var(--ease-out),
              visibility 0s linear var(--jp-fade);
}
.journey-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--jp-fade) var(--ease-out), visibility 0s;
}
.journey-slide[data-accent="sky"]    { --jp-accent: var(--sky); }
.journey-slide[data-accent="blue"]   { --jp-accent: var(--blue-2); }
.journey-slide[data-accent="teal"]   { --jp-accent: var(--teal); }
.journey-slide[data-accent="orange"] { --jp-accent: var(--orange); }
.journey-slide[data-accent="green"]  { --jp-accent: var(--green); }

/* Bloom warna accent ikut cross-fade bersama slide-nya. Memakai solid +
   blur (bukan color-mix) supaya tidak bergantung fungsi CSS baru; tidak ada
   radius/filter yang dianimasikan, jadi tidak ada layout/paint per frame. */
.journey-slide__glow {
  position: absolute; top: -20%; right: -12%; z-index: 0;
  width: 240px; height: 240px; border-radius: 50%;
  background: var(--jp-accent);
  filter: blur(58px); opacity: .28;
  pointer-events: none;
}
.journey-slide__icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 60px; height: 60px; margin-bottom: 20px;
  border-radius: 18px;
  font-size: 27px; line-height: 1;
  color: var(--jp-accent);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.journey-slide__kicker {
  position: relative; z-index: 1; margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--jp-accent);
}
.journey-slide__title {
  position: relative; z-index: 1; margin: 0 0 12px;
  font-family: "Plus Jakarta Sans"; font-size: 27px; font-weight: 700;
  line-height: 1.18; letter-spacing: -.03em; color: #fff;
}
.journey-slide__text {
  position: relative; z-index: 1; margin: 0; max-width: 42ch;
  font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.76);
}

/* Nav: counter + 5 indikator + pause. Lebar tetap semua -> tidak ada geser. */
.journey-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.journey-counter { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.journey-counter b { color: #fff; font-weight: 800; }
.journey-counter i { margin: 0 3px; font-style: normal; color: rgba(255,255,255,.32); }
.journey-dots { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.journey-dot {
  width: 24px; height: 5px; flex: none; padding: 0;
  border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.26);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.journey-dot.is-on { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.journey-playpause {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none; padding: 0;
  border-radius: 50%; cursor: pointer;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.journey-playpause:hover { color: #fff; background: rgba(255,255,255,.18); }
/* State rotasi dijeda -> ikon jadi "play" (di-toggle main.js) + aksen kuning. */
.journey-playpause.is-paused { color: var(--yellow); background: rgba(255,255,255,.16); }
.journey-panel :is(.journey-dot, .journey-playpause) { -webkit-tap-highlight-color: transparent; }

/* MD/LG: timeline kiri, panel kanan. Breakpoint 1021px = kebalikan dari
   @media (max-width:1020px) yang sudah ada. Aturan ini scoped .journey-body
   sehingga tidak menyentuh section lain. */
@media (min-width: 1021px) {
  .journey-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .journey-panel { --jp-pad: 32px; min-height: 430px; position: sticky; top: calc(var(--nav-h) + 20px); }
  .journey-slide__title { font-size: 29px; }
}

/* Reduced motion: fade dimatikan (durasi global .01ms) + rotasi dihentikan
   oleh main.js. Ditambah reset eksplisit supaya tidak ada state tertinggal. */
@media (prefers-reduced-motion: reduce) {
  .journey-slide, .journey-slide.is-active { transition: none !important; }
}

/* ------------------------------------------------------------
   14. UNTUK SIAPA (konten ALZEERA-2, kartu ALZEERA-1)
   ------------------------------------------------------------ */
.target-section { padding: 105px 0; background: var(--paper); }
.target-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.target-card {
  padding: 26px 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.target-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.target-card > span {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px;
  border-radius: 15px; font-size: 19px; color: var(--blue);
  background: linear-gradient(145deg, #edf7ff, #f0fff6);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.target-card:hover > span { color: var(--orange); transform: scale(1.08); }
.target-card b { display: block; font-size: 14px; }
.target-card p { font-size: 10px; color: #8796a8; line-height: 1.7; margin: 7px 0 0; }

/* ------------------------------------------------------------
   15. CTA BAND (ALZEERA-1)
   ------------------------------------------------------------ */
.cta-section {
  position: relative; overflow: hidden; padding: 115px 0; text-align: center; color: #fff;
  background: linear-gradient(125deg, #07255a 0%, #0a438f 48%, #087b72 100%);
}
.cta-noise { position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 16px 16px; }
.cta-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); }
.cta-orb-a { width: 500px; height: 500px; right: -170px; top: -220px; background: radial-gradient(circle, rgba(255, 201, 40, .22), transparent 65%); }
.cta-orb-b { width: 370px; height: 370px; left: -180px; bottom: -220px; background: radial-gradient(circle, rgba(24, 185, 107, .28), transparent 65%); }
.cta-inner { position: relative; z-index: 2; max-width: 850px; margin-inline: auto; }
.cta-brand-line {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px; margin-bottom: 26px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-full);
}
.cta-brand-line strong { display: block; font-size: 16px; }
.cta-brand-line small { display: block; font-size: 10px; color: rgba(255, 255, 255, .6); }
.cta-brand-line .brand-mark { box-shadow: none; }
.cta-badge {
  display: inline-block; padding: 7px 11px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 9px; letter-spacing: .14em; font-weight: 800;
}
.cta-section h2 { font-family: "Plus Jakarta Sans"; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.055em; margin: 22px 0 17px; }
.cta-section h2 span { color: var(--yellow); }
.cta-section p { max-width: 650px; margin: 0 auto; color: #c8d9ed; font-size: 15px; }

/* ------------------------------------------------------------
   16. KONTAK (struktur ALZEERA-2, data nyata ALZEERA-1)
   ------------------------------------------------------------ */
.contact-section { padding: 110px 0; background: var(--paper); }
.contact-wrap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px;
  background: #fff; border: 1px solid var(--line); border-radius: 30px;
  padding: 52px; box-shadow: var(--shadow);
}
.contact-left h2 { font-size: clamp(28px, 3.4vw, 40px); }
.contact-left > p { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.check-list { display: grid; gap: 2px; }
.check-list li {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  font-size: 14px; font-weight: 600; color: var(--navy);
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.check-list li:hover { gap: 16px; color: var(--blue); }
.check-list i { color: var(--green); font-size: 15px; }
.contact-right { background: #f2f8ff; border-radius: var(--radius-md); padding: 30px; }
.contact-right h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); margin: 0 0 18px; }
.contact-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--line);
  transition: gap var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.contact-row:hover { gap: 18px; background: rgba(18, 104, 232, .04); }
.contact-row > i { font-size: 19px; color: var(--orange); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.contact-row:hover > i { transform: scale(1.12); }
.contact-row div { display: flex; flex-direction: column; }
.contact-row span { font-size: 12px; color: var(--muted); }
.contact-row strong { font-size: 14px; color: var(--navy); font-weight: 700; word-break: break-all; }

/* ------------------------------------------------------------
   17. FOOTER (struktur ALZEERA-2, visual ALZEERA-1)
   ------------------------------------------------------------ */
.footer { background: #061c42; color: #fff; padding: 70px 0 0; }
.footer-main { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 44px; }
.footer-brand { max-width: 340px; }
.footer-brand p { color: #8ea6c4; font-size: 12px; margin: 15px 0 18px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--orange); color: var(--navy); transform: translateY(-4px); }
/* Grid 2 kolom, bukan flex + wrap. Grid memberi kontrol eksplisit atas
   pemisahan baris; flex-wrap hanya "membuang" widget ke baris berikutnya
   tanpa bisa mengatur jarak baris itu secara proporsional.

   - Dua blok link (Platform | Bisnis) tetap berdampingan di baris 1.
   - Flag Counter menjadi grid item baris 2, melebar penuh (grid-column: 1/-1).
   - Kolom `auto`, BUKAN 1fr. .footer-links adalah flex item max-content di
     .footer-main, jadi total lebarnya hanya ~255px. Kalau kolom dipaksa
     sama lebar (1fr), tiap kolom jadi ~90px dan link terpanjang
     "Perjalanan Pelanggan" (~120px) membungkus ke 2 baris — regresi visual.
     `auto` menjaga tiap blok selebar isinya, sama seperti flex aslinya.
   - column-gap 75px: jarak antar kolom link, NILAI LAMA dari aturan
     `.footer-links` yang sebelumnya (display:flex; gap:75px).
   - row-gap 30px: jarak baris link ke baris Flag Counter. Sengaja terpisah
     dari column-gap supaya baris Flag Counter tidak mewarisi 75px yang
     membuat widget terlihat "jatuh ke baris berikutnya". */
.footer-links {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 75px;
  row-gap: 30px;
  align-content: start;
  justify-content: start;
}
/* Baris penuh di bawah Platform + Bisnis. justify-self: start menjaga widget
   di sisi kiri, tidak ikut melebar. color/transform: none menetralkan aturan
   `.footer-links a` dan `.footer-links a:hover` di bawah — Flag Counter
   adalah widget gambar, bukan link navigasi footer, jadi tidak boleh
   translateX saat hover. */
.footer-links > a[href^="https://info.flagcounter.com/"] {
  grid-column: 1 / -1;
  justify-self: start;
  color: inherit;
  transform: none;
}
.footer-links > a[href^="https://info.flagcounter.com/"]:hover { color: inherit; transform: none; }
.footer-links > a[href^="https://info.flagcounter.com/"] img { max-width: 100%; height: auto; }
.footer-links div { display: grid; gap: 8px; align-content: start; }
.footer-links b { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: #dce8f5; margin-bottom: 4px; }
.footer-links a { font-size: 12px; color: #8ea6c4; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: #fff; transform: translateX(3px); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; color: #6883a5; font-size: 10px;
}

/* ------------------------------------------------------------
   18. BACK TO TOP
   ------------------------------------------------------------ */
.back-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 43px; height: 43px; border-radius: 50%;
  background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(9, 40, 93, .22);
  opacity: 0; transform: translateY(15px); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--blue); }

/* ------------------------------------------------------------
   18b. MODAL PILIHAN WHATSAPP (SECTION #kontak)
   Native <dialog> — top-layer browser, sehingga otomatis berada di
   atas .noise-overlay (z-index 9999) tanpa z-index tambahan.
   Semua aturan scoped .wa-modal / .wa-option agar tidak mungkin
   menabrak komponen lain. Fokus memakai :focus-visible global (bagian 2).
   ------------------------------------------------------------ */
/* Scroll lock. Dialog top-layer tidak mengunci scroll body dengan sendirinya
   di semua browser. overflow:hidden pada <html> aman terhadap Lenis karena
   Lenis menulis scroll, bukan layout — dan posisinya tidak berubah saat
   dikunci, sehingga tidak ada lompatan (jump) saat dialog ditutup. */
html.wa-modal-open { overflow: hidden; }

.wa-modal {
  width: min(460px, calc(100% - 32px));
  max-height: min(86vh, 720px);
  margin: auto;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(9, 40, 93, .28);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Animasi buka HANYA opacity + translate (pola reveal yang sudah dipakai
   project). Tidak ada transform pada isi pilihan, jadi tidak ada layout
   shift. Reduced motion dimatikan oleh blok global di bagian 21. */
.wa-modal[open] { animation: waModalIn var(--dur-fast) var(--ease-out); }
.wa-modal::backdrop {
  background: rgba(9, 40, 93, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@keyframes waModalIn { from { opacity: 0; translate: 0 14px; } }

.wa-modal__head { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.wa-modal__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 15px; font-size: 19px; color: var(--blue);
  background: linear-gradient(145deg, #edf7ff, #f0fff6);
}
.wa-modal__title { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 21px; font-weight: 800; line-height: 1.35; color: var(--navy); margin: 0 34px 6px 0; }
.wa-modal__desc { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }
.wa-modal__close {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 14px; color: var(--navy);
  background: #f2f8ff;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wa-modal__close:hover { background: var(--blue); color: #fff; }

.wa-modal__form { display: grid; gap: 16px; }
/* Fieldset/legend dibersihkan total supaya tidak ada styling bawaan UA
   yang bentrok, tapi semantiknya (group nama) tetap terjaga. */
.wa-modal__set { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.wa-modal__legend {
  padding: 0; margin: 0 0 2px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}

.wa-option {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wa-option:hover { border-color: rgba(18, 104, 232, .32); background: var(--white); }
/* .is-checked di-toggle main.js (pola .is-open/.is-active yang sudah dipakai
   project), bukan :has() — supaya tidak bergantung dukungan :has() browser
   dan tetap konsisten dengan komponen lain. */
.wa-option.is-checked { border-color: var(--blue); background: var(--white); box-shadow: 0 10px 26px rgba(18, 104, 232, .13); }
.wa-option.is-focus { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Radio asli disembunyikan secara visual tapi tetap fokusable dan tetap
   terbaca screen reader — memakai clip-path, bukan display:none / hidden,
   yang akan membuang input dari tab order. */
.wa-option__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.wa-option__icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 11px; font-size: 16px; color: var(--blue);
  background: linear-gradient(145deg, #edf7ff, #f0fff6);
}
.wa-option__text { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.4; }
/* Check mark hanya muncul saat terpilih — notify-state, bukan state layout. */
.wa-option__mark {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-left: auto;
  border-radius: 50%; font-size: 11px; color: #fff;
  background: var(--blue);
  opacity: 0; scale: .6;
  transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
}
.wa-option.is-checked .wa-option__mark { opacity: 1; scale: 1; }

/* .btn-block memberi margin-top:10px yang tidak relevan di dalam grid ini. */
.wa-modal__cta { margin-top: 0; }
.wa-modal__cta:disabled { opacity: .48; box-shadow: none; cursor: not-allowed; }
.wa-modal__cta:disabled:hover { transform: none; }
.wa-modal__hint { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------
   19. KEYFRAMES
   ------------------------------------------------------------ */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1020px) {
  .hero-layout { grid-template-columns: 1fr; gap: 55px; }
  .hero { min-height: auto; padding-top: 135px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { min-height: 470px; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .step-connector { display: none; }
  .target-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; padding: 40px; }
}
@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  .container { width: min(100% - 28px, 1180px); }
  .navbar { padding: 10px 0; }
  .nav-toggle { display: block; }
  /* Drawer: visibility + translate supaya transisi bisa jalan (ALZEERA-2).
     position:absolute (bukan fixed) — navbar memakai transform saat
     auto-hide, dan transform membuat ancestor menjadi containing block
     untuk anak position:fixed. Akibatnya drawer meloncat saat navbar
     sedang transitioning. Dengan absolute, drawer mengikuti navbar. */
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 20px; background: #fff; box-shadow: 0 22px 60px rgba(24, 76, 137, .12);
    opacity: 0; visibility: hidden; translate: 0 -10px; pointer-events: none;
    /* Buka & tutup sama-sama responsif, tanpa gerak memantul. */
    transition: opacity var(--dur-fast) var(--ease-out),
                translate var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast);
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
  .nav-menu a { padding: 13px 0; border-bottom: 1px solid rgba(24, 76, 137, .08); }
  .nav-menu a::after { display: none; }
  .nav-cta { text-align: center; margin-top: 12px; border: 0; }

  .hero { padding-top: 115px; }
  .hero h1 { font-size: 40px; }
  .hero-lead { font-size: 14px; }
  .hero-visual { min-height: 380px; }
  .dashboard-card { transform: none; }
  .orbit-one { width: 390px; height: 390px; }
  .orbit-two { width: 470px; height: 470px; }
  /* Orb baru tetap proporsional di layar kecil: dikecilkan, blur ikut
     diturunkan supaya beban visual + gpu tidak naik. */
  .hero-orb-a { width: 180px; height: 180px; filter: blur(16px); }
  .hero-orb-b { width: 130px; height: 130px; filter: blur(13px); }
  .hero-orb-c { width: 90px;  height: 90px;  filter: blur(10px); }
  .dash-body { min-height: 300px; }
  .dash-content { padding: 18px; }
  .stat-grid { gap: 6px; }
  .stat-box { padding: 9px; }
  .stat-box b { font-size: 16px; }
  .hero-scroll-cue { display: none; }

  .service-strip, .platform-section, .how-section, .journey-section, .target-section, .contact-section { padding: 78px 0; }
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .service-card { padding: 12px 10px; }
  .service-icon { width: 33px; height: 33px; font-size: 14px; }
  .service-card-title { font-size: 10px; }
  .section-intro h2, .contact-left h2 { font-size: 30px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-lg { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .target-grid { grid-template-columns: 1fr; }
  .feature-showcase { padding: 14px; min-height: 400px; }
  .accent-card { right: -4px; bottom: 12px; }
  .contact-wrap { padding: 26px; }
  .footer-main { flex-direction: column; }
  /* Panjang (longhand), bukan `gap` shorthand: pada grid, shorthand gap akan
     menimpa row-gap 30px dari aturan base dan jarak baris Flag Counter
     kembali jadi 50px. Nilai 50px dipertahankan untuk column-gap (semula
     dengan flex) dan row-gap diturunkan ke 24px supaya proporsional di
     layar sempit. Breakpoint tidak ditambah. */
  .footer-links { column-gap: 50px; row-gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}
@media (max-width: 460px) {
  .hero h1 { font-size: 34px; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .proof-line { display: none; }
  .dash-sidebar { width: 45px; }
  .dash-body { grid-template-columns: 45px 1fr; }
  .dash-welcome h3 { font-size: 13px; }
  .status { display: none; }
  .float-card { scale: .88; }
  .float-card-top { top: 3px; }
  .float-card-bottom { bottom: 12px; }
}

/* ------------------------------------------------------------
   21. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* Konten langsung tampil, tanpa animasi reveal */
  .js-reveal [data-reveal-child] { opacity: 1 !important; translate: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .hero-glow, .hero-orb, .visual-orbit, .float-card, .hero-scroll-cue span { animation: none !important; }
  .btn:hover, .service-card:hover, .bento-item:hover, .step:hover, .target-card:hover,
  .feature-showcase:hover .feature-panel, .hero-visual:hover .dashboard-card { transform: none !important; }
  html { scroll-behavior: auto !important; }
}