/* =====================================================================
   InCivas — Landing Page
   Gaya visual mengikuti prototipe Figma "Compro InCivas".
   Kelas & struktur mengikuti landing.blade.php agar binding CMS tetap utuh.
   ===================================================================== */

:root {
    /* Palet merek */
    --teal: #0ABAB5;
    --teal-dark: #08918C;
    --teal-darker: #066966;
    --teal-darkest: #033533;

    /* Latar & permukaan */
    --mint-50: #F2FCFB;
    --mint-100: #E7F9F7;
    --mint-200: #CFF1EE;
    --surface: #FFFFFF;
    --grey-50: #F4F5F6;

    /* Teks */
    --ink: #0E2B2A;
    --ink-soft: #47605F;
    --ink-muted: #6B8483;
    --on-dark: #FFFFFF;
    --on-dark-soft: rgba(233, 250, 249, .78);

    --line: #E3F0EE;
    --line-dark: rgba(255, 255, 255, .12);

    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(6, 61, 58, .05), 0 4px 14px -8px rgba(6, 61, 58, .12);
    --shadow-md: 0 2px 6px rgba(6, 61, 58, .06), 0 18px 40px -22px rgba(6, 61, 58, .25);
    --shadow-lg: 0 30px 60px -30px rgba(3, 53, 51, .35);

    --wrap: 1200px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Ikon ditulis sebagai <svg><use href="#..."/></svg> tanpa atribut ukuran.
   Beri ukuran dasar agar tidak melar; aturan khusus di bawah menimpanya. */
svg { width: 20px; height: 20px; flex: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }

/* ------------------------------ Tipografi ------------------------------ */
.section { padding: 96px 0; position: relative; }
.section-head { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); font-size: 1.02rem; }

/* Pil eyebrow di atas judul section */
.eyebrow, .eyebrow-dark, .eyebrow-light {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ink);
    border-radius: var(--r-pill);
    padding: 8px 18px;
    font-size: .82rem; font-weight: 600;
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.eyebrow svg, .eyebrow-dark svg, .eyebrow-light svg,
.eyebrow .ico, .eyebrow-dark .ico, .eyebrow-light .ico { width: 16px; height: 16px; }

.grad-text {
    background: linear-gradient(92deg, var(--teal) 0%, var(--teal-dark) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Eyebrow lama (.kicker) ditampilkan sebagai pil putih seperti desain Figma.
   !important dipakai untuk menimpa sisa inline-style lama yang menunjuk
   variabel warna yang sudah tidak ada. */
.kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--teal-darker) !important;
    border-radius: var(--r-pill); padding: 8px 18px;
    font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.kicker::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--teal); flex: none;
}
.kicker-red { color: #B45309 !important; }
.kicker-red::before { background: #F59E0B; }

/* Alias variabel lama agar inline-style peninggalan tetap terbaca */
:root { --teal-300: #066966; --teal-100: var(--mint-100); --teal-500: var(--teal); --teal-600: var(--teal-dark); }

/* ------------------------------- Tombol -------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 26px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: .95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(8, 145, 140, .8);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(8, 145, 140, .9); }
.btn-outline {
    background: #fff; color: var(--teal-darker); border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--teal-darker); }
.btn-ghost:hover { color: var(--teal-dark); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.link-teal { color: var(--teal-dark); font-weight: 600; }
.link-teal:hover { color: var(--teal-darker); }

/* ------------------------------ Navigasi ------------------------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: 18px 24px; }
.nav-inner {
    max-width: var(--wrap); margin: 0 auto;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(227, 240, 238, .9);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 24px;
    padding: 12px 14px 12px 26px;
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.nav-logo img { height: 30px; width: auto; }
.dark-logo { display: none; }

.nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav-link { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; padding: 4px 0; transition: color .18s ease; }
.nav-link:hover { color: var(--teal-dark); }
.nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--teal); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.btn-login { color: var(--teal-dark); font-weight: 600; font-size: .95rem; padding: 8px 6px; }
.btn-login:hover { color: var(--teal-darker); }
.btn-nav {
    background: var(--teal-darkest); color: #fff;
    padding: 12px 22px; border-radius: var(--r-pill);
    font-weight: 600; font-size: .92rem;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .18s ease, background .18s ease;
}
.btn-nav:hover { background: var(--teal-darker); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }

/* -------------------------------- Hero -------------------------------- */
.hero {
    position: relative; overflow: hidden;
    padding: 168px 0 90px;
    background: linear-gradient(180deg, #44C9C5 0%, #9BE1DE 45%, #E9FCFB 78%, #F2FFFE 100%);
}
/* Garis grid halus seperti pada desain */
.hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(8, 145, 140, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 145, 140, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    pointer-events: none;
}
.hero-glow { display: none; }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.04fr; gap: 40px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 22px; }
.hero-desc { color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 48px; }
.hero-stat .val, .hero-stat .num {
    display: block; font-size: 2.2rem; font-weight: 700; color: var(--teal-dark);
    line-height: 1.1; letter-spacing: -.02em;
}
.hero-stat .lbl, .hero-stat .t { display: block; color: var(--ink-soft); font-size: .95rem; margin-top: 4px; }

.hero-visual { position: relative; }
.hero-visual img {
    display: block; width: auto; max-width: none; height: auto;
    margin-right: calc(50% - 50vw);
    min-width: calc(100% + (50vw - 50%));
    border-radius: 18px 0 0 18px;
    box-shadow: -18px 26px 60px -28px rgba(3, 53, 51, .45);
}
.hero-card {
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #fff; border: 1px solid rgba(255, 255, 255, .7);
}
.hero-card img { width: 100%; height: auto; display: block; }
.hero-float {
    position: absolute; background: #fff; border-radius: 14px;
    box-shadow: var(--shadow-md); padding: 12px 16px;
    border: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
    max-width: 250px;
}
.hero-float .ico {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    background: var(--mint-100); color: var(--teal-dark);
    display: inline-flex; align-items: center; justify-content: center;
}
.hero-float .ico svg { width: 18px; height: 18px; }
.hero-float .t { font-size: .88rem; font-weight: 700; line-height: 1.25; }
.hero-float .s { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }
.hero-float.f1 { left: -26px; top: 16%; }
.hero-float.f2 { right: -26px; bottom: 12%; }
.hero-attrib { margin-top: 26px; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .9rem; }
.attrib-dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; flex: none; }

/* ------------------------------- Klien -------------------------------- */
.clients { padding: 56px 0 64px; background: #fff; }
.clients-lbl { text-align: center; color: var(--ink-soft); font-size: .96rem; margin-bottom: 34px; }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 70px; width: max-content; animation: slide 34s linear infinite; }
.marquee-group { display: flex; gap: 70px; align-items: center; }
/* Logo klien dipasang sebagai background-image (lihat landing.blade.php),
   jadi butuh tinggi eksplisit agar terlihat. */
.m-logo {
    display: inline-block; height: 52px; flex: none;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    filter: grayscale(1); opacity: .6;
    transition: filter .25s ease, opacity .25s ease;
}
.m-logo:hover { filter: grayscale(0); opacity: 1; }
.marquee img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; }
.marquee img:hover { filter: grayscale(0); opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------- Masalah ------------------------------- */
.problem { background: #fff; }
.prob-cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.prob-card { padding: 34px 26px 10px; border-left: 1px solid var(--line); }
.prob-card:last-child { border-right: 1px solid var(--line); }
.prob-ic { width: 76px; height: 76px; margin-bottom: 26px; color: var(--ink); }
.prob-ic svg { width: 100%; height: 100%; }
.prob-card h3 { font-size: 1.03rem; margin-bottom: 12px; }
.prob-card p { color: var(--ink-soft); font-size: .93rem; }

/* -------------------------------- Solusi ------------------------------- */
.solution {
    background:
        radial-gradient(900px 420px at 88% 20%, rgba(10, 186, 181, .16), transparent 62%),
        linear-gradient(160deg, #064541 0%, var(--teal-darkest) 60%, #022220 100%);
    color: var(--on-dark);
    position: relative; overflow: hidden;
}
.solution::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(10, 186, 181, .22) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(60% 70% at 92% 40%, #000, transparent 70%);
    mask-image: radial-gradient(60% 70% at 92% 40%, #000, transparent 70%);
    pointer-events: none;
}
.solution .section-head h2 { color: #fff; }
.solution .section-head p { color: var(--on-dark-soft); }

/* Solusi: daftar tab di kiri + kartu preview di kanan (mengikuti desain Figma) */
.sol-panel {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px;
    align-items: stretch;
}
.sol-tabs { display: flex; flex-direction: column; gap: 10px; }
.sol-tab {
    display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 14px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 14px 18px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-dark);
    color: var(--on-dark-soft);
    font-family: inherit; font-size: .97rem; font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sol-tab:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sol-tab-ic {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(10, 186, 181, .16); color: var(--teal);
    transition: background .2s ease, color .2s ease;
}
.sol-tab-ic svg { width: 21px; height: 21px; }
.sol-tab-ar { opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.sol-tab-ar svg { width: 20px; height: 20px; }
.sol-tab.active {
    background: #fff; border-color: #fff; color: var(--teal-darkest);
    box-shadow: var(--shadow-md);
}
.sol-tab.active .sol-tab-ic { background: var(--mint-100); color: var(--teal-dark); }
.sol-tab.active .sol-tab-ar { opacity: 1; transform: none; color: var(--teal-dark); }
.sol-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.sol-preview {
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(155deg, var(--mint-100) 0%, #fff 70%);
    border-radius: var(--r-lg);
    padding: 40px 38px;
    min-height: 320px;
    box-shadow: var(--shadow-lg);
}
.sol-pane[hidden] { display: none; }
.sol-pane { animation: solFade .28s ease both; }
@keyframes solFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sol-pane-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sol-pane-ic {
    width: 60px; height: 60px; border-radius: 18px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal-dark); color: #fff;
}
.sol-pane-ic svg { width: 28px; height: 28px; }
.sol-pane-n { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--teal-dark); }
.sol-pane h3 { font-size: 1.55rem; color: var(--ink); margin-bottom: 12px; }
.sol-pane p { color: var(--ink-soft); font-size: 1rem; max-width: 56ch; }
@media (max-width: 900px) {
    .sol-panel { grid-template-columns: 1fr; }
    .sol-preview { padding: 30px 24px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sol-pane { animation: none; }
}

/* ------------------------------ Cara kerja ----------------------------- */
.howitworks { background: linear-gradient(180deg, var(--mint-50) 0%, #FFFFFF 100%); }
.milestone { position: relative; max-width: 1060px; margin: 0 auto; }
.milestone::before {
    content: ''; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--mint-200) 8%, var(--mint-200) 92%, transparent);
    transform: translateX(-50%);
}
.mi-step { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; margin-bottom: 44px; }
.mi-step:nth-child(even) .mi-card { grid-column: 3; }
.mi-marker {
    grid-column: 2; justify-self: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 2px solid var(--teal);
    color: var(--teal-darker); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -8px rgba(8, 145, 140, .6);
    position: relative; z-index: 2;
}
/* Kartu langkah berisi teks (ikon + judul + deskripsi) — latar putih agar terbaca.
   Bila diisi gambar, gambar tetap mengikuti sudut membulat kartu. */
.mi-card {
    grid-column: 1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px 28px;
    box-shadow: var(--shadow-md);
}
.mi-card h3 { color: var(--ink); }
.mi-card p { color: var(--ink-soft); }
.mi-card img { border-radius: 12px; width: 100%; margin-top: 14px; }
.mi-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--mint-100); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mi-ic svg { width: 22px; height: 22px; }
.mi-step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.mi-step p { color: var(--ink-soft); font-size: .96rem; max-width: 30rem; }

/* ------------------------------- Manfaat ------------------------------- */
.benefit {
    background:
        radial-gradient(800px 400px at 12% 12%, rgba(10, 186, 181, .16), transparent 60%),
        linear-gradient(160deg, #054845 0%, var(--teal-darkest) 55%, #022826 100%);
    color: var(--on-dark);
}
.benefit .section-head h2 { color: #fff; }
.benefit .section-head p { color: var(--on-dark-soft); }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.benefit-card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 30px 30px 32px; box-shadow: var(--shadow-lg); }
.ben-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--mint-100); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ben-ic svg { width: 24px; height: 24px; }
.benefit-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.benefit-card p { color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------ Studi kasus ---------------------------- */
.case { background: #fff; }
.case-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
    background: linear-gradient(150deg, var(--mint-50), #fff);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 42px; box-shadow: var(--shadow-sm);
}
.case-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.case-copy p { color: var(--ink-soft); }
.case-math { margin-top: 22px; }
.cm-row { margin-bottom: 16px; }
.cm-lbl { font-size: .88rem; color: var(--ink-soft); display: block; margin-bottom: 6px; }
.cm-bar { height: 12px; border-radius: var(--r-pill); background: var(--mint-200); position: relative; overflow: hidden; }
.cm-bar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius: var(--r-pill); }
.cm-val { font-weight: 700; color: var(--teal-darker); font-size: .95rem; }
.case-metrics-head { font-weight: 700; margin-bottom: 16px; }
.cmet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cmet { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.cmet-v { font-size: 1.6rem; font-weight: 700; color: var(--teal-dark); }
.cmet-l { color: var(--ink-soft); font-size: .9rem; }
.case-disc, .case-foot { color: var(--ink-muted); font-size: .84rem; margin-top: 16px; }

/* ------------------------------- Keamanan ------------------------------ */
.security { background: linear-gradient(180deg, var(--mint-50), #fff 70%); }
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
/* Ikon di kiri; judul & deskripsi menumpuk di kanan (seperti desain). */
.sec-card { display: grid; grid-template-columns: 62px 1fr; column-gap: 18px; row-gap: 6px; align-items: start; }
.sec-ic {
    grid-row: span 2; width: 62px; height: 62px; flex: none;
    border-radius: 16px; background: var(--mint-100); color: var(--teal-dark);
    display: inline-flex; align-items: center; justify-content: center;
}
.sec-card h3, .sec-card p { grid-column: 2; }
.sec-ic svg { width: 28px; height: 28px; }
.sec-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.sec-card p { color: var(--ink-soft); font-size: .92rem; }

/* -------------------------------- Harga -------------------------------- */
.pricing { background: #fff; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative; }
.price-card.featured { border-color: var(--teal); box-shadow: 0 26px 50px -30px rgba(8, 145, 140, .55); }
.price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff;
    padding: 6px 16px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}
.pname { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.pdesc { color: var(--ink-soft); font-size: .92rem; margin-bottom: 18px; }
.price-amt { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.price-amt .per { font-size: .9rem; color: var(--ink-muted); font-weight: 500; }
.price-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); }
.ck { color: var(--teal-dark); flex: none; margin-top: 3px; }
.ck svg { width: 18px; height: 18px; }
.price-notes { margin-top: 28px; display: grid; gap: 12px; max-width: 720px; margin-inline: auto; }
.price-note { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: .9rem; }
.price-note svg { width: 20px; height: 20px; flex: none; color: var(--teal-dark); margin-top: 2px; }

/* Banner pilot / promo */
.pilot-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    background: linear-gradient(135deg, var(--teal-darkest), var(--teal-darker));
    color: #fff; border-radius: var(--r-lg); padding: 28px 32px; margin-top: 34px;
}
.pilot-l h3 { color: #fff; font-size: 1.15rem; margin-bottom: 6px; }
.pilot-l p { color: var(--on-dark-soft); font-size: .94rem; }
.pilot-r { flex: none; }

/* --------------------------------- FAQ --------------------------------- */
.faq { background: var(--grey-50); }
.faq-list { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary {
    cursor: pointer; list-style: none;
    padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.fq-chev { flex: none; color: var(--ink-soft); transition: transform .22s ease; }
.fq-chev svg { width: 20px; height: 20px; }
.faq-item[open] .fq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 26px 24px; color: var(--ink-soft); font-size: .95rem; }

/* -------------------------------- Kontak ------------------------------- */
.contact { background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.contact-info h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 16px; }
.contact-lead { color: var(--ink-soft); margin-bottom: 34px; font-size: 1.02rem; }
.contact-list { display: grid; gap: 22px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.ci-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; background: var(--mint-100); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; }
.ci-ic svg { width: 20px; height: 20px; }
.contact-item .lbl { display: block; color: var(--ink-muted); font-size: .82rem; }
.contact-item .val { font-weight: 600; }

.contact-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-md); }
.contact-form { display: grid; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.cf-field label .s { color: #e11d48; }
.cf-field input, .cf-field select, .cf-field textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: .94rem; color: var(--ink); background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 186, 181, .16);
}
.cf-field textarea { min-height: 120px; resize: vertical; }
.cf-submit { display: flex; justify-content: flex-end; }
.cf-note { color: var(--ink-muted); font-size: .84rem; }

/* ------------------------------ CTA akhir ------------------------------ */
.cta {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 420px at 50% 120%, rgba(10, 186, 181, .28), transparent 62%),
        linear-gradient(180deg, #032B29 0%, #021D1C 100%);
    color: #fff; padding: 110px 0;
}
.cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(10, 186, 181, .3) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 70%, #000, transparent 72%);
    mask-image: radial-gradient(80% 70% at 50% 70%, #000, transparent 72%);
}
.cta-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.cta-inner h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 18px; color: #fff; }
.cta-inner p { color: var(--on-dark-soft); font-size: 1.05rem; margin-bottom: 34px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------- Footer ------------------------------- */
.footer { background: var(--mint-50); padding: 72px 0 28px; color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .7fr 1.2fr; gap: 40px; }
.footer-brand img { height: 34px; margin-bottom: 18px; }
.footer-brand p { color: var(--ink-soft); font-size: .95rem; max-width: 22rem; margin-bottom: 22px; }
.foot-contact { display: grid; gap: 12px; }
.foot-contact a, .foot-contact span { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: .95rem; }
.foot-contact svg { width: 18px; height: 18px; color: var(--teal-dark); flex: none; }
.fb-links { display: grid; gap: 12px; align-content: start; }
.fb-links h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.fb-links a { color: var(--ink-soft); font-size: .95rem; }
.fb-links a:hover { color: var(--teal-dark); }
.footer-bottom {
    margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    color: var(--ink-muted); font-size: .88rem;
}
.sm { display: flex; gap: 10px; }
.sm a { width: 34px; height: 34px; border-radius: 9px; background: var(--teal-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sm a:hover { background: var(--teal-darker); }
.sm svg { width: 17px; height: 17px; }

/* Kartu alamat kantor di footer */

/* ------------------------- Tombol WhatsApp apung ------------------------ */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 80;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 26px -10px rgba(37, 211, 102, .8);
    transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* ------------------------------ Halaman legal --------------------------- */
.legal-bar { background: var(--teal-darkest); color: #fff; padding: 16px 0; }
.legal-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal-logo img { height: 28px; }
.legal-back { color: #fff; font-size: .92rem; }
.legal-body { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-body h1 { font-size: 2rem; margin-bottom: 10px; }
.legal-meta { color: var(--ink-muted); font-size: .9rem; margin-bottom: 34px; }
.legal-body h2 { font-size: 1.25rem; margin: 34px 0 12px; }
.legal-body p, .legal-body li { color: var(--ink-soft); }
.legal-body ul { padding-left: 20px; }

/* ------------------------------- Utilitas ------------------------------ */
.good { color: #047857; font-weight: 600; }
.cur { color: var(--ink-muted); }

/* ------------------------------- Animasi ------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; }
.reveal.d5 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .marquee-track { animation: none; }
    html { scroll-behavior: auto; }
}

/* ------------------------------- Responsif ------------------------------ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .prob-cards { grid-template-columns: repeat(2, 1fr); }
    .prob-card:nth-child(2n) { border-right: 1px solid var(--line); }
    .sol-grid { grid-template-columns: repeat(2, 1fr); }
    .sec-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .case-card { grid-template-columns: 1fr; }
    .hero-float { display: none; }
}

@media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-inner { padding: 10px 12px 10px 18px; }
    .nav.open .nav-links {
        display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
        position: absolute; top: 78px; left: 24px; right: 24px;
        background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
        padding: 20px 24px; box-shadow: var(--shadow-md);
    }
    .section { padding: 72px 0; }
    .hero { padding: 148px 0 72px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .mi-step { grid-template-columns: 1fr; gap: 16px; }
    .mi-step .mi-card, .mi-step:nth-child(even) .mi-card { grid-column: 1; }
    .mi-marker { grid-column: 1; justify-self: start; }
    .milestone::before { left: 22px; }
    .hero-stats { gap: 28px; }
}

@media (max-width: 560px) {
    .prob-cards { grid-template-columns: 1fr; }
    .prob-card { border-right: 1px solid var(--line); }
    .sol-grid, .sec-grid, .cf-row, .cmet-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------ Ikuti Kami ----------------------------- */
.social { background: linear-gradient(180deg, #FFFFFF 0%, var(--mint-50) 100%); }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.social-card {
    display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 14px;
    padding: 20px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.social-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mint-200); }
.social-ic {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mint-100); color: var(--teal-dark);
}
.social-ic svg { width: 24px; height: 24px; }
.social-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.social-name { font-weight: 700; color: var(--ink); font-size: 1rem; }
.social-handle { color: var(--ink-muted); font-size: .87rem; }
.social-ar { color: var(--teal-dark); opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.social-ar svg { width: 20px; height: 20px; }
.social-card:hover .social-ar { opacity: 1; transform: translateX(3px); }
@media (max-width: 980px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .social-grid { grid-template-columns: 1fr; } }

/* Footer: kartu Head Office */
.foot-office {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
    align-self: start;
}
.foot-office h5 { margin-bottom: 14px; }
.foot-office .contact-item.sm { margin-bottom: 10px; }
.foot-office .contact-item.sm:last-child { margin-bottom: 0; }

/* Kartu kontak: markup memakai <b> + <span>, bukan .lbl/.val — susun bertumpuk
   agar label tidak menempel dengan nilainya. */
.contact-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-item > div > b { font-size: .82rem; font-weight: 600; color: var(--ink-muted); }
.contact-item > div > span { font-weight: 600; color: var(--ink); }

/* ------------------------ Halaman legal: buka-tutup --------------------- */
/* Atribut hidden hanya berlaku lewat display:none bawaan browser, sehingga
   aturan display apa pun dari stylesheet ini akan membatalkannya. Kunci di
   sini supaya elemen ber-hidden tidak pernah bisa tampil karena aturan lain. */
[hidden] { display: none !important; }

/* Saat halaman legal dibuka, isi landing disembunyikan agar terasa seperti
   halaman tersendiri — bukan menempel di bawah footer. Sprite ikon dan script
   tetap dibiarkan karena dipakai halaman legal. */
body.legal-open > :not(.legal):not(script):not(svg) { display: none !important; }

/* Tautan legal di baris paling bawah footer disusun mendatar. */
.footer-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 20px; }
.legal-body h3 { font-size: 1.12rem; margin: 32px 0 10px; color: var(--ink); }
.legal-body h3 + ul, .legal-body h3 + p { margin-top: 0; }
.legal-body li { margin-bottom: 6px; }

/* ----------------- Hero mengikuti revisi Figma Agt 2026 ----------------- */
/* Judul lebih rapat & gelap; teal hanya pada penggalan yang di-highlight. */
.hero-copy h1 { color: #0B2B2A; font-weight: 800; }
.hero .grad-text { -webkit-text-fill-color: initial; background: none; color: var(--teal-dark); }
/* Angka statistik memakai teal penuh, bukan gradasi. */
.hero-stat .num { -webkit-text-fill-color: initial; background: none; color: var(--teal-dark); }
.hero-stats { gap: 40px; }
/* Tombol kedua bergaya garis putih di atas latar teal. */
.hero-cta .btn-outline { background: #fff; border-color: #fff; color: var(--teal-dark); }
.hero-cta .btn-outline:hover { background: #fff; border-color: #fff; color: var(--teal-darker); }
@media (max-width: 900px) {
    .hero-visual img { width: 100%; min-width: 0; margin-right: 0; border-radius: 18px; }
}
/* Pil navbar selalu berlatar putih, jadi logo yang dipakai versi gelap.
   Versi terang tidak terbaca di atas putih. */
.nav .light-logo { display: none; }
.nav .dark-logo { display: inline-block; }

/* Judul hero: lebar blok teks 680px diukur dari berkas desain 1x
   (x 100..779). Kolom sebelumnya 568px sehingga judul membungkus
   4 baris, bukan 3 seperti pada desain. */
.hero-grid { grid-template-columns: 680px 1fr; }
.hero-copy h1 { max-width: 680px; color: #212121; }
/* Desain memakai satu warna gelap untuk seluruh judul — tanpa penggalan teal. */
.hero-copy h1 .grad-text { color: #212121; }
@media (max-width: 1180px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .hero-copy h1 { max-width: none; }
}

/* Tata letak vertikal hero, diukur dari berkas desain 1x:
   navbar berakhir y=109, judul mulai y=192, kartu dashboard mulai y=194,
   hero berakhir y=914. Judul dan gambar RATA ATAS — bukan rata tengah.
   Perataan tengah sebelumnya membuat teks terdorong turun mengikuti
   tinggi gambar (1132px). */
.hero { padding-top: 192px; }
.hero-grid { align-items: start; }
/* Pemotongan tinggi lewat posisi absolut dicoba, tetapi membuat sisi
   kanan gambar tidak lagi mencapai tepi layar (celah 55px pada 1920px).
   Dikembalikan ke teknik margin negatif yang terukur 0px pada 1440,
   1920, dan 2560. Tinggi hero jadi mengikuti tinggi gambar. */
@media (max-width: 1180px) {
    .hero-visual { height: auto; }
    .hero-visual img { position: static; width: 100%; }
}

/* Dua koreksi terakhir hero, dari hasil pengukuran render:
   1) Puncak huruf judul jatuh 11px di bawah kotaknya karena setengah
      leading baris pertama — padding atas dikurangi sebanyak itu agar
      huruf, bukan kotaknya, yang mendarat di y=192 seperti desain.
   2) Rumus tepi kanan sebelumnya memakai persen terhadap kolom, bukan
      terhadap lebar layar, sehingga menyisakan celah pada layar lebar.
      Diganti nilai yang selalu melewati tepi dan dipotong oleh section. */
.hero { padding-top: 181px; }
/* Percobaan calc(60px - 50vw) justru memperlebar celah 15px -> 55px,
   jadi dikembalikan ke rumus sebelumnya yang lebih baik. */