/* ═══════════════════════════════════════════════════════
   inspekta.css — Shared Styles
   Inspekta · Jasa Inspeksi Mobil Bekas · Kediri Raya
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1B2F9A;--navy-dk:#111E6E;
  --yellow:#F5C200;--yellow-lt:#FFF8D6;
  --white:#fff;--dark:#1C1C2E;
  --gray:#666;--light:#F4F6FB;--lavender:#EAECF8;
  --border:#E5E7EF;
}
body{font-family:'Inter',sans-serif;color:var(--dark);overflow-x:hidden}
a{text-decoration:none}
img{display:block;max-width:100%}

/* ── PAGE HEADER (inner pages) ── */
.page-hd{background:var(--navy);padding:52px 6% 56px}
.breadcrumb{display:flex;gap:5px;align-items:center;font-size:12px;font-weight:600;
  color:rgba(255,255,255,.4);margin-bottom:18px;letter-spacing:.3px}
.breadcrumb a{color:rgba(245,194,0,.9);transition:opacity .2s}
.breadcrumb a:hover{opacity:.75}
.breadcrumb-sep{margin:0 2px;opacity:.4}
.page-hd h1{font-size:38px;font-weight:900;color:var(--white);margin-bottom:10px;line-height:1.1}
.page-hd p{font-size:15px;color:rgba(255,255,255,.7);max-width:580px;line-height:1.75}
.page-hd-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.page-hd-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);padding:7px 14px;border-radius:4px;font-size:13px;font-weight:600}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:300;background:var(--white);
  box-shadow:0 2px 16px rgba(0,0,0,.07);display:flex;align-items:center;
  justify-content:space-between;padding:0 6%;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:38px;height:38px;object-fit:contain;display:block;border-radius:7px}
.logo-wordmark{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:18px;font-weight:900;color:var(--navy);letter-spacing:2px;line-height:1.1}
.logo-tagline{font-size:8px;font-weight:500;color:var(--navy);letter-spacing:2.8px;
  text-transform:uppercase;opacity:1;margin-top:3px}
.nav-menu{display:flex;align-items:center;gap:20px;list-style:none}
.nav-menu a{font-size:13.5px;font-weight:600;color:var(--dark);transition:color .2s}
.nav-menu a:hover,.nav-menu a.nav-active{color:var(--navy)}
.btn-nav{background:var(--navy)!important;color:var(--white)!important;padding:11px 20px;
  border-radius:4px;font-size:13px;font-weight:700;letter-spacing:.8px;transition:background .2s}
.btn-nav:hover{background:var(--navy-dk)!important}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.burger span{display:block;width:25px;height:2.5px;background:var(--dark);border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mob-nav{display:none;position:fixed;top:72px;left:0;right:0;z-index:290;background:var(--white);
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px 0 16px}
.mob-nav.open{display:block}
.mob-nav a{display:block;padding:13px 6%;font-size:15px;font-weight:600;color:var(--dark);border-bottom:1px solid #f0f0f0}
.mob-nav .mob-cta{margin:14px 6% 0;display:block;background:var(--navy);color:var(--white);
  text-align:center;padding:15px;border-radius:4px;font-weight:700;font-size:14px;
  letter-spacing:.5px;border-bottom:none}
.mob-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:13px 6%;font-size:15px;font-weight:600;color:var(--dark);border:none;border-bottom:1px solid #f0f0f0;
  background:none;font-family:inherit;text-align:left;cursor:pointer}
.mob-drop-arrow{font-size:11px;opacity:.6;transition:transform .25s ease}
.mob-nav-toggle.open .mob-drop-arrow{transform:rotate(180deg)}
.mob-drop-panel{max-height:0;overflow:hidden;background:var(--light);transition:max-height .3s ease}
.mob-drop-panel.open{max-height:340px}
.mob-drop-panel .mob-sub-all{color:var(--navy);font-weight:700}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;background:var(--white);min-height:580px;
  display:flex;align-items:center;padding:60px 6% 0}
.hero::after{content:'';position:absolute;top:0;bottom:0;right:-120px;width:62%;
  background:var(--lavender);transform:skewX(-8deg);z-index:0}
.hero-content{position:relative;z-index:2;max-width:490px}
.hero-bar{width:56px;height:4px;background:var(--yellow);margin-bottom:22px}
.hero-content h1{font-size:46px;font-weight:900;line-height:1.12;color:var(--dark);margin-bottom:18px}
.hero-content h1 em{font-style:normal;color:var(--navy)}
.hero-content p{font-size:15px;color:var(--gray);line-height:1.8;margin-bottom:36px;max-width:420px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:var(--white);
  padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:1px;border-radius:4px;
  transition:all .25s;border:2px solid var(--navy)}
.btn-primary:hover{background:var(--navy-dk);border-color:var(--navy-dk)}
.btn-outline-w{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--navy);
  color:var(--navy);padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:1px;
  border-radius:4px;transition:all .25s}
.btn-outline-w:hover{background:var(--navy);color:var(--white)}
.hero-car{position:absolute;right:0;bottom:0;z-index:1;width:56%;max-width:660px;pointer-events:none}
.hero-car img{width:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);
  padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;margin-bottom:16px}

/* ── INFO STRIP ── */
.strip{background:var(--navy);display:grid;grid-template-columns:repeat(3,1fr)}
.strip-card{padding:36px 32px;color:var(--white);border-right:1px solid rgba(255,255,255,.12)}
.strip-card:last-child{border-right:none}
.strip-icon{width:48px;height:48px;border-radius:50%;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.strip-icon svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.strip-card h3{font-size:17px;font-weight:700;margin-bottom:10px}
.strip-card p{font-size:14px;opacity:.8;line-height:1.65;margin-bottom:14px}
.check-list{list-style:none}
.check-list li{font-size:14px;opacity:.85;margin-bottom:5px;padding-left:16px;position:relative}
.check-list li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--yellow)}
.strip-link{display:inline-flex;align-items:center;gap:6px;color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:.5px}
.strip-phone{font-size:28px;font-weight:900;margin-bottom:12px;letter-spacing:-.5px}
.strip-call{display:inline-flex;align-items:center;gap:8px;color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:.5px}

/* ── SECTION COMMON ── */
.sec{padding:80px 6%}
.sec-sm{padding:64px 6%}
.sec-hd{margin-bottom:48px}
.sec-hd h2{font-size:34px;font-weight:800;margin-bottom:14px}
.sec-hd p{font-size:15px;color:var(--gray);line-height:1.75;max-width:560px}
.ybar{width:56px;height:4px;background:var(--yellow);margin-bottom:16px}
.ybar-center{margin-left:auto;margin-right:auto}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:48px}
.btn-outline{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--navy);
  color:var(--navy);padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:.5px;
  border-radius:4px;white-space:nowrap;flex-shrink:0;transition:all .2s}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.text-center{text-align:center}
.text-center .sec-hd p,.text-center p{margin-left:auto;margin-right:auto}

/* ── PAIN POINTS ── */
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pain-card{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:28px 24px;border-top:4px solid var(--navy)}
.pain-icon{font-size:32px;margin-bottom:14px}
.pain-card h3{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--navy)}
.pain-card p{font-size:13px;color:var(--gray);line-height:1.65}

/* ── WHY ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-points{display:flex;flex-direction:column;gap:20px}
.why-point{display:flex;gap:16px;align-items:flex-start}
.why-point-num{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--white);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-point h4{font-size:15px;font-weight:700;margin-bottom:5px}
.why-point p{font-size:13px;color:var(--gray);line-height:1.6}

/* ── AREA GRID (services teaser on homepage) ── */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.area-card{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:22px;transition:all .2s}
.area-card:hover{border-color:var(--navy);box-shadow:0 2px 12px rgba(27,47,154,.08)}
.area-num{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--gray);
  margin-bottom:10px;display:block}
.area-ico{width:36px;height:36px;margin-bottom:12px}
.area-ico svg{width:36px;height:36px;stroke:var(--navy);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.area-card h3{font-size:13.5px;font-weight:700;margin-bottom:5px;color:var(--dark)}
.area-card p{font-size:12px;color:var(--gray);line-height:1.55}
.area-card-special{border:2px solid var(--navy);background:var(--lavender)}
.area-card-special .area-num{color:var(--navy)}
.area-card-special h3{color:var(--navy)}

/* ── HOW IT WORKS ── */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps-grid::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:2px;
  background:var(--border);z-index:0}
.step{text-align:center;padding:0 16px;position:relative;z-index:1}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--white);
  font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.step h3{font-size:15px;font-weight:700;margin-bottom:8px}
.step p{font-size:13px;color:var(--gray);line-height:1.65}
.step-detail{background:var(--light);border-radius:8px;padding:14px;margin-top:14px;text-align:left}
.step-detail p{font-size:12.5px;color:var(--gray);line-height:1.6}

/* ── WHAT YOU GET ── */
.get-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.get-list{display:flex;flex-direction:column;gap:16px}
.get-item{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--white);
  border:1px solid var(--border);border-radius:8px;border-left:4px solid var(--yellow)}
.get-item-icon{font-size:24px;flex-shrink:0}
.get-item h4{font-size:14px;font-weight:700;margin-bottom:4px}
.get-item p{font-size:13px;color:var(--gray);line-height:1.55}

/* ── SAMPLE REPORT ── */
.report-wrap{background:var(--dark);padding:80px 6%}
.report-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.report-left h2{font-size:34px;font-weight:800;color:var(--white);margin-bottom:14px}
.report-left p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:32px}
.report-features{display:flex;flex-direction:column;gap:14px}
.report-feat{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85);font-size:14px}
.report-feat::before{content:'✅';font-size:16px;flex-shrink:0}
.report-mockup{background:var(--white);border-radius:12px;overflow:hidden;padding:28px}
.report-header{background:var(--navy);color:var(--white);padding:20px 24px;border-radius:8px;margin-bottom:20px}
.report-header .r-title{font-size:18px;font-weight:800;margin-bottom:4px}
.report-header .r-sub{font-size:12px;opacity:.75}
.report-car-info{background:var(--light);padding:16px;border-radius:6px;margin-bottom:20px}
.report-car-info strong{display:block;font-size:11px;font-weight:700;color:var(--gray);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.info-row{display:flex;justify-content:space-between;margin-bottom:5px;font-size:12px}
.info-row span:last-child{font-weight:600}
.report-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--gray);margin-bottom:10px}
.report-items{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.r-item-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
  background:var(--light);border-radius:4px;font-size:12px}
.r-status{font-size:14px}
.r-ph{background:var(--border);border-radius:6px;height:80px;display:flex;align-items:center;
  justify-content:center;color:var(--gray);font-size:12px;margin-top:4px}
.r-ph-photo{height:auto;aspect-ratio:16/10;background-size:cover;background-position:center}

/* ── PRICING ── */
.pricing-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.price-card{background:var(--white);border:2px solid var(--navy);border-radius:12px;padding:40px;text-align:center}
.price-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--gray);margin-bottom:12px}
.price-amount{font-size:52px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:4px}
.price-sub{font-size:14px;color:var(--gray);margin-bottom:28px}
.price-includes{text-align:left;border-top:1px solid var(--border);padding-top:24px}
.price-includes h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);margin-bottom:14px}
.price-item{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:10px}
.price-item::before{content:'✓';color:var(--navy);font-weight:800;font-size:16px;flex-shrink:0}
.price-note{font-size:12px;color:var(--gray);margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border);line-height:1.6}
.pricing-right h2{font-size:34px;font-weight:800;margin-bottom:14px}
.pricing-right p{font-size:15px;color:var(--gray);line-height:1.75;margin-bottom:28px}
.pricing-perks{display:flex;flex-direction:column;gap:16px}
.perk{display:flex;gap:14px;align-items:flex-start}
.perk-icon{width:40px;height:40px;border-radius:50%;background:var(--yellow-lt);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.perk h4{font-size:14px;font-weight:700;margin-bottom:4px}
.perk p{font-size:13px;color:var(--gray);line-height:1.6}

/* ── INSPEKTA BUKAN ── */
.bukan-wrap{background:var(--dark)}
.bukan-inner{padding:80px 6%}
.bukan-inner h2{font-size:34px;font-weight:800;color:var(--white);margin-bottom:14px}
.bukan-inner > p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:48px;max-width:600px}
.bukan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bukan-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:24px}
.bukan-card .label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.label-bukan{background:rgba(239,68,68,.15);color:#f87171}
.label-adalah{background:rgba(34,197,94,.15);color:#4ade80}
.bukan-card h4{font-size:15px;font-weight:700;color:var(--white);margin-bottom:6px}
.bukan-card p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}

/* ── VALUES ── */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.value-card{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:28px;border-bottom:4px solid var(--yellow)}
.value-icon{font-size:32px;margin-bottom:16px}
.value-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.value-card p{font-size:13px;color:var(--gray);line-height:1.65}

/* ── TEAM ── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.team-card{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.team-photo{background:var(--lavender);height:200px;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:8px;color:var(--navy)}
.team-photo .ph-ico{font-size:52px;opacity:.5}
.team-photo span{font-size:12px;font-weight:600;opacity:.6}
.team-info{padding:20px}
.team-info h4{font-size:15px;font-weight:700;margin-bottom:4px}
.team-info p{font-size:13px;color:var(--gray);line-height:1.55}
.team-info .tag{display:inline-block;background:var(--yellow-lt);color:var(--navy);font-size:11px;
  font-weight:700;padding:3px 10px;border-radius:20px;margin-top:10px}

/* ── AUDIENCE ── */
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.aud-card{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:24px;border-top:4px solid var(--yellow)}
.aud-icon{font-size:28px;margin-bottom:12px}
.aud-card h3{font-size:14px;font-weight:700;margin-bottom:6px}
.aud-card p{font-size:13px;color:var(--gray);line-height:1.6}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px}
.testi-card{padding:28px;border:1px solid var(--border);border-radius:4px;border-bottom:4px solid var(--yellow)}
.t-stars{color:var(--navy);font-size:18px;letter-spacing:3px;margin-bottom:14px}
.testi-card blockquote{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:20px;font-style:italic}
.t-author{display:flex;align-items:center;gap:12px}
.t-avatar{width:44px;height:44px;border-radius:50%;background:var(--lavender);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.t-author strong{display:block;font-size:14px;font-weight:700}
.t-author span{font-size:12px;color:var(--gray)}
.ratings-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.r-item .r-stars{color:var(--navy);font-size:22px;letter-spacing:2px;margin-bottom:4px}
.r-score{font-size:28px;font-weight:900;color:var(--dark);letter-spacing:-1px;margin-bottom:6px}
.r-src{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gray)}
.r-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ratings-row-single{display:flex;justify-content:center;padding:32px;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  border-bottom:4px solid var(--navy)}
.ratings-row-single .r-item{text-align:center}

/* ── CITIES ── */
.cities-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.city-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:20px;
  text-align:center;cursor:pointer;transition:all .2s}
.city-card:hover{border-color:var(--navy);background:var(--lavender)}
.city-card.active{border-color:var(--navy);background:var(--navy);color:var(--white)}
.city-icon{font-size:28px;margin-bottom:8px}
.city-name{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px}
.city-card.active .city-name{color:var(--white)}
.city-areas{font-size:11px;color:var(--gray)}
.city-card.active .city-areas{color:rgba(255,255,255,.7)}
.city-detail{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:32px;margin-top:24px;display:none}
.city-detail.active{display:block}
.city-detail h3{font-size:20px;font-weight:800;margin-bottom:8px}
.city-detail p{font-size:14px;color:var(--gray);line-height:1.7;margin-bottom:20px}
.city-kec-list{display:flex;flex-wrap:wrap;gap:8px}
.city-kec{background:var(--light);padding:6px 12px;border-radius:4px;font-size:12px;font-weight:600}

/* ── WILAYAH (/kota/) PAGE — full per-city detail, same visual language as .city-detail above ── */
.city-detail-expanded{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:36px;margin-top:24px;display:none}
.city-detail-expanded.active{display:block}
.city-tagline{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--navy);
  background:var(--lavender);display:inline-block;padding:5px 10px;border-radius:4px;margin-bottom:12px}
.city-detail-expanded h3{font-size:24px;font-weight:900;margin-bottom:18px}
.city-body{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.city-body-text p{font-size:14px;color:var(--gray);line-height:1.75;margin-bottom:16px}
.city-note{background:var(--yellow-lt);border:1px solid #f0dfa0;border-radius:6px;padding:14px 16px;
  font-size:13px;color:#4d3d00;line-height:1.6;margin-top:8px}
.city-sidebar{display:flex;flex-direction:column;gap:16px}
.city-sidebar-card{background:var(--light);border:1px solid var(--border);border-radius:8px;padding:18px}
.city-sidebar-card h5{font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--navy);
  text-transform:uppercase;margin-bottom:12px}
.city-kec-list-sm{display:flex;flex-wrap:wrap;gap:6px}
.city-kec-sm{background:var(--white);border:1px solid var(--border);padding:4px 9px;
  border-radius:4px;font-size:11px;font-weight:600;color:var(--dark)}
.coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.coverage-card{background:var(--light);border:1px solid var(--border);border-radius:8px;padding:22px}
.coverage-card h4{font-size:15px;font-weight:800;margin-bottom:8px}
.coverage-card p{font-size:13px;color:var(--gray);line-height:1.65}

/* ── EDUCATION ── */
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.edu-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:28px}
.edu-num{font-size:36px;font-weight:900;color:var(--border);margin-bottom:12px;line-height:1}
.edu-card h3{font-size:15px;font-weight:700;margin-bottom:8px}
.edu-card p{font-size:13px;color:var(--gray);line-height:1.65}

/* ── FAQ ── */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:8px;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;background:var(--white);cursor:pointer;border:none;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--dark);
  text-align:left;gap:16px;transition:background .2s}
.faq-q:hover{background:var(--light)}
.faq-q.open{background:var(--navy);color:var(--white)}
.faq-arrow{font-size:18px;flex-shrink:0;transition:transform .3s}
.faq-q.open .faq-arrow{transform:rotate(45deg)}
.faq-a{display:none;padding:20px 24px;font-size:14px;color:var(--gray);line-height:1.75;background:var(--light)}
.faq-a.open{display:block}

/* ── T&C ── */
.tnc-wrap{max-width:760px;margin:0 auto}
.tnc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;background:var(--light);border:1px solid var(--border);border-radius:8px;
  cursor:pointer;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  color:var(--dark);text-align:left;gap:16px}
.tnc-toggle:hover{background:var(--lavender)}
.tnc-body{display:none;background:var(--white);border:1px solid var(--border);border-top:none;
  border-radius:0 0 8px 8px;padding:32px}
.tnc-body.open{display:block}
.tnc-body h4{font-size:14px;font-weight:700;margin:20px 0 8px;color:var(--navy)}
.tnc-body h4:first-child{margin-top:0}
.tnc-body p,.tnc-body li{font-size:13px;color:var(--gray);line-height:1.75;margin-bottom:6px}
.tnc-body ul,.tnc-body ol{padding-left:20px}
.tnc-date{font-size:12px;color:var(--gray);margin-bottom:20px}

/* ── WHY + FORM ── */
.split-wrap{display:grid;grid-template-columns:1fr 1fr}
.split-left{padding:80px 6%;background:var(--dark)}
.split-left h2{font-size:34px;font-weight:800;color:var(--white);margin-bottom:14px}
.split-left > p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:44px}
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.why-feat{display:flex;gap:14px;align-items:flex-start}
.feat-ico{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center}
.feat-ico svg{width:20px;height:20px;stroke:var(--yellow);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.why-feat h4{font-size:14px;font-weight:700;color:var(--white);margin-bottom:5px}
.why-feat p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6}
.split-right{background:var(--white);padding:60px 48px}
.split-right h3{font-size:22px;font-weight:800;margin-bottom:8px}
.price-tag{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);
  padding:7px 14px;border-radius:4px;font-size:14px;font-weight:800;margin-bottom:24px}
.fg{margin-bottom:13px}
.fg input,.fg select,.fg textarea{width:100%;padding:13px 15px;border:1.5px solid var(--border);
  border-radius:4px;font-family:'Inter',sans-serif;font-size:14px;color:var(--dark);
  outline:none;transition:border .2s;background:var(--white)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--navy)}
.fg textarea{height:90px;resize:vertical}
.btn-submit{width:100%;padding:14px;background:var(--navy);color:var(--white);border:none;
  border-radius:4px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.5px;cursor:pointer;transition:background .2s}
.btn-submit:hover{background:var(--navy-dk)}

/* ── CTA BANNER ── */
.cta-banner{background:var(--light);position:relative;overflow:hidden;text-align:center;padding:80px 6%}
.cta-banner::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:65%;
  background:rgba(255,255,255,.55);transform:translateX(-50%) skewX(-8deg)}
.cta-banner > *{position:relative;z-index:1}
.cta-label{font-size:12px;font-weight:700;letter-spacing:2.5px;color:var(--navy);
  margin-bottom:14px;text-transform:uppercase}
.cta-phone{font-size:48px;font-weight:900;color:var(--dark);letter-spacing:-1px;margin-bottom:6px}
.cta-sub{font-size:15px;color:var(--gray);margin-bottom:30px}
.btn-book{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:var(--white);
  padding:16px 36px;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.5px;transition:background .2s}
.btn-book:hover{background:var(--navy-dk)}

/* ── FOOTER ── */
footer{background:var(--navy);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding:64px 6% 32px}
.f-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.f-logo-badge{width:38px;height:38px;background:rgba(255,255,255,.12);border-radius:6px;
  padding:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.f-logo-badge img{width:100%;height:100%;object-fit:contain;display:block;border-radius:5px}
.f-logo-wordmark{display:flex;flex-direction:column;line-height:1}
.f-logo-name{font-size:18px;font-weight:900;color:var(--white);letter-spacing:2px;line-height:1.1}
.f-logo-tagline{font-size:7.5px;font-weight:500;color:var(--white);
  letter-spacing:2.8px;text-transform:uppercase;margin-top:3px}
.f-brand p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:20px}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:background .2s}
.socials a:hover{background:var(--yellow);color:var(--navy)}
.f-col h4{font-size:14px;font-weight:700;color:var(--white);margin-bottom:18px}
.f-col ul{list-style:none}
.f-col li{margin-bottom:9px}
.f-col a{color:rgba(255,255,255,.65);font-size:13px;transition:color .2s}
.f-col a:hover{color:var(--yellow)}
.f-contact-item{display:flex;gap:10px;margin-bottom:11px;align-items:flex-start}
.f-contact-item .ico{font-size:15px;flex-shrink:0;margin-top:1px}
.f-contact-item span{font-size:13px;color:rgba(255,255,255,.65);line-height:1.55}
.f-bottom{background:var(--navy-dk);text-align:center;padding:14px 6%;font-size:13px;color:rgba(255,255,255,.4)}

/* ── FOLDER EXPLORER ── */
.folder-explorer{border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.06);display:grid;grid-template-columns:268px 1fr}
.folder-sidebar{background:rgb(244,246,251);display:flex;flex-direction:column;border-right:1px solid var(--border)}
.folder-sidebar-hd{padding:20px 20px 14px;border-bottom:1px solid rgba(28,28,46,.1)}
.folder-sidebar-hd strong{display:block;font-size:13px;font-weight:800;color:rgb(28,28,46);margin-bottom:3px}
.folder-sidebar-hd span{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(28,28,46,.45)}
.folder-nav{padding:8px 0;flex:1;display:flex;flex-direction:column}
.folder-btn{width:100%;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 20px;
  background:none;border:none;border-left:3px solid transparent;cursor:pointer;
  font-family:'Inter',sans-serif;text-align:left;transition:background .15s}
.folder-btn:hover{background:rgba(28,28,46,.06)}
.folder-btn.active{background:rgb(244,246,251);border-left-color:var(--yellow)}
.folder-btn-ico{width:30px;height:30px;border-radius:6px;background:rgba(28,28,46,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.folder-btn.active .folder-btn-ico{background:var(--yellow)}
.folder-btn-ico svg{width:14px;height:14px;stroke:rgb(28,28,46);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.folder-btn.active .folder-btn-ico svg{stroke:rgb(28,28,46)}
.folder-btn-label{font-size:12.5px;font-weight:600;color:rgb(28,28,46);flex:1;line-height:1.3}
.folder-btn.active .folder-btn-label{color:rgb(28,28,46)}
.folder-btn-count{font-size:10px;font-weight:700;color:rgba(28,28,46,.4);
  background:rgba(28,28,46,.08);padding:2px 7px;border-radius:10px;flex-shrink:0}
.folder-btn.active .folder-btn-count{color:var(--navy);background:var(--yellow)}
.folder-sidebar-footer{padding:14px 18px;border-top:1px solid rgba(28,28,46,.1)}
.folder-content-wrap{background:var(--light);min-height:490px}
.folder-pane{display:none;padding:32px 36px;animation:fpIn .22s ease}
.folder-pane.active{display:block}
@keyframes fpIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.folder-pane-hd{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--border)}
.folder-pane-icon{width:48px;height:48px;border-radius:10px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.folder-pane-icon svg{width:22px;height:22px;stroke:var(--white);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.folder-pane-icon.icon-yellow{background:var(--yellow)}
.folder-pane-icon.icon-yellow svg{stroke:var(--navy)}
.folder-pane-hd h3{font-size:17px;font-weight:800;color:var(--dark);margin-bottom:4px}
.folder-pane-hd p{font-size:13px;color:var(--gray);line-height:1.6}
.subfolder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.subfolder-item{background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:14px 15px;display:flex;gap:12px;align-items:flex-start;transition:border-color .2s,box-shadow .2s}
.subfolder-item:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(27,47,154,.08)}
.subfolder-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);
  border:2px solid var(--navy);margin-top:5px;flex-shrink:0}
.subfolder-item h4{font-size:12.5px;font-weight:700;color:var(--dark);margin-bottom:3px}
.subfolder-item p{font-size:11.5px;color:var(--gray);line-height:1.55}
.folder-pane-cta{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:12px}
.folder-pane-cta p{font-size:12px;color:var(--gray);flex:1;line-height:1.55}

/* ── AREA CARD CHECKLIST ── */
.area-checks{list-style:none;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.area-checks li{font-size:11.5px;color:var(--gray);display:flex;align-items:center;gap:7px;line-height:1.4}
.area-checks li::before{content:'';width:14px;height:14px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6.25' stroke='%231B2F9A' stroke-width='1.25'/%3E%3Cpath d='M4.5 7l2 2 3-3' stroke='%231B2F9A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.area-card-special .area-checks li::before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6.25' stroke='%231B2F9A' stroke-width='1.25'/%3E%3Cpath d='M4.5 7l2 2 3-3' stroke='%231B2F9A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ph-box{background:var(--lavender);border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:10px;color:var(--navy);font-size:13px;font-weight:600;opacity:.7}
.ph-box .ph-ico{font-size:40px;opacity:.5}

/* ── MOBILE ── */
@media(max-width:900px){
  .nav-menu{display:none}
  .burger{display:flex}
  .hero{padding:44px 6% 0;min-height:auto;flex-direction:column;align-items:flex-start}
  .hero::after{display:none}
  .hero-content{max-width:100%}
  .hero-content h1{font-size:30px}
  .hero-car{position:relative;width:100%;max-width:100%;right:auto;bottom:auto;
    margin-top:28px;background:var(--lavender);border-radius:10px;overflow:hidden}
  .hero-car img{mix-blend-mode:normal;border-radius:10px}
  .strip{grid-template-columns:1fr}
  .strip-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .strip-card:last-child{border-bottom:none}
  .sec{padding:52px 6%}
  .sec-top{flex-direction:column;align-items:flex-start}
  .sec-hd h2{font-size:26px}
  .pain-grid,.area-grid{grid-template-columns:1fr 1fr;gap:16px}
  .why-grid,.get-grid,.report-inner,.pricing-wrap{grid-template-columns:1fr;gap:36px}
  .folder-explorer{grid-template-columns:1fr}
  .folder-sidebar{overflow-x:auto}
  .folder-nav{flex-direction:row;overflow-x:auto;padding:0;gap:0}
  .folder-sidebar-hd,.folder-sidebar-footer{display:none}
  .folder-btn{flex-direction:column;align-items:center;text-align:center;padding:12px 8px;
    border-left:none;border-bottom:3px solid transparent;gap:6px;min-width:80px;flex-shrink:0}
  .folder-btn.active{border-bottom-color:var(--yellow);border-left-color:transparent;background:rgba(245,194,0,.12)}
  .folder-btn-count{display:none}
  .folder-btn-label{font-size:9px;line-height:1.3}
  .folder-btn-ico{width:26px;height:26px}
  .subfolder-grid{grid-template-columns:1fr}
  /* Panes sit side-by-side in a horizontally swipeable, scroll-snapping strip —
     showFolder()/scroll-sync in main.js keeps the active tab + pane in sync with it. */
  .folder-content-wrap{min-height:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .folder-content-wrap::-webkit-scrollbar{display:none}
  .folder-pane{display:block!important;flex:0 0 100%;width:100%;scroll-snap-align:start;padding:20px 18px}
  .steps-grid{grid-template-columns:1fr 1fr;gap:32px}
  .steps-grid::before{display:none}
  .bukan-grid{grid-template-columns:1fr;gap:16px}
  .values-grid{grid-template-columns:1fr 1fr;gap:16px}
  .team-grid{grid-template-columns:1fr;gap:20px}
  .audience-grid{grid-template-columns:1fr 1fr;gap:16px}
  .testi-grid{grid-template-columns:1fr;gap:16px}
  .ratings-row{grid-template-columns:1fr 1fr;gap:16px}
  .cities-grid{grid-template-columns:1fr 1fr 1fr}
  .edu-grid{grid-template-columns:1fr;gap:16px}
  .why-feats{grid-template-columns:1fr;gap:20px}
  .split-wrap{grid-template-columns:1fr}
  .split-left{padding:52px 6%}
  .split-right{padding:44px 6%}
  .cta-phone{font-size:30px}
  .cta-banner::before{display:none}
  footer{grid-template-columns:1fr;gap:28px;padding:48px 6% 24px}
  .page-hd h1{font-size:28px}
  .page-hd{padding:40px 6% 44px}
}
@media(max-width:480px){
  .hero-content h1{font-size:26px}
  .pain-grid,.area-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .values-grid,.audience-grid,.ratings-row{grid-template-columns:1fr}
  .cities-grid{grid-template-columns:1fr 1fr}
  .cta-phone{font-size:24px}
}

/* ── TEXT WRAP ── */
p,h1,h2,h3,h4,li{text-wrap:pretty}

/* ── MOB NAV ANIMATION ── */
.mob-nav.open{animation:navDown .2s ease}
@keyframes navDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── FLOATING WA BUTTON ── */
.float-wa{
  position:fixed;bottom:28px;right:28px;z-index:500;
  display:flex;align-items:center;
  background:#25D366;border-radius:32px;border:none;
  box-shadow:0 4px 20px rgba(37,211,102,.5);
  overflow:hidden;transition:box-shadow .25s;
  cursor:pointer;text-decoration:none;
}
.float-wa:hover{box-shadow:0 6px 28px rgba(37,211,102,.7)}
.float-wa-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.float-wa-icon svg{width:26px;height:26px;fill:#fff}
.float-wa-label{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;
  white-space:nowrap;max-width:0;overflow:hidden;
  transition:max-width .3s ease,padding-right .3s ease;
  letter-spacing:.3px;
}
.float-wa:hover .float-wa-label{max-width:160px;padding-right:20px}

/* ── BACK TO TOP ── */
.back-top{
  position:fixed;bottom:96px;right:32px;z-index:500;
  width:38px;height:38px;border-radius:50%;padding:0;
  background:var(--white);border:1.5px solid var(--border);
  color:var(--gray);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  font-size:16px;line-height:1;
  transition:background .2s,color .2s,border-color .2s,opacity .3s,transform .3s;
  opacity:0;transform:translateY(12px);pointer-events:none;
}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── MOBILE STICKY CTA BAR ── */
.mob-sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;
  background:var(--white);border-top:1px solid var(--border);
  padding:10px 16px;gap:10px;
  box-shadow:0 -3px 16px rgba(0,0,0,.08);
}
.mob-sticky-cta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border-radius:6px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.3px;text-decoration:none;
}
.mob-sticky-cta-wa{background:#25D366;color:#fff}
.mob-sticky-cta-pesan{background:var(--navy);color:#fff}
@media(max-width:900px){
  .mob-sticky-cta{display:flex}
  .float-wa{display:none}
  .back-top{bottom:82px;right:16px}
}

/* ── FORM FEEDBACK ── */
.fg label{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:5px;letter-spacing:.3px}
.btn-submit.loading{opacity:.7;pointer-events:none;cursor:not-allowed}
.form-success{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:20px 24px;
  text-align:center;display:none;margin-top:16px}
.form-success h4{font-size:15px;font-weight:700;color:#15803d;margin-bottom:6px}
.form-success p{font-size:13px;color:#166534;line-height:1.6}

/* ── SKIP TO CONTENT (accessibility) ── */
.skip-link{
  position:absolute;top:-40px;left:0;background:var(--navy);color:#fff;
  padding:8px 16px;font-size:13px;font-weight:700;border-radius:0 0 4px 0;
  transition:top .2s;z-index:9999;
}
.skip-link:focus{top:0}


/* ═══════════ V4 ADDITIONS ═══════════ */

/* ── PLACEHOLDER IMAGE ── */
.ph-img{position:relative;width:100%;background:
  repeating-linear-gradient(135deg,var(--lavender) 0 10px,#f2f4fb 10px 20px);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph-img span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.5px;color:var(--navy);opacity:.55;text-align:center;padding:8px 12px;line-height:1.5}
.ph-img.dark{background:repeating-linear-gradient(135deg,#242438 0 10px,#1f1f31 10px 20px)}
.ph-img.dark span{color:#fff;opacity:.4}

/* ── NAV DROPDOWN ── */
.nav-drop{position:relative}
.nav-drop > a{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nav-drop > a::after{content:'▾';font-size:10px;opacity:.6}
.nav-drop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);padding:8px;min-width:190px;list-style:none;
  opacity:0;visibility:hidden;transition:all .18s}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu li{margin:0}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:5px;font-size:13.5px;font-weight:600;color:var(--dark)}
.nav-drop-menu a:hover{background:var(--light);color:var(--navy)}
.mob-nav .mob-sub{padding-left:12%;font-size:14px;color:var(--gray);font-weight:500}

/* ── FOOTER SOCIALS (icon) ── */
.socials a svg{width:16px;height:16px;fill:currentColor}

/* ── PAIN CARD WITH PHOTO ── */
.pain-card-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pain-card-img .ph-img{aspect-ratio:16/10;flex-shrink:0}
.pain-card-img .pain-body{padding:20px 22px 24px}
.pain-card-img h3{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--navy)}
.pain-card-img p{font-size:13px;color:var(--gray);line-height:1.65}
.pain-grid-8{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ── CAROUSEL ── */
.carousel{position:relative;padding:0 44px}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex;gap:20px;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}
.carousel-track > *{flex:0 0 calc((100% - 60px)/4);min-width:0}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border-radius:50%;background:var(--white);border:1.5px solid var(--border);color:var(--gray);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.08);transition:all .2s;z-index:2}
.carousel-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.carousel-arrow[disabled]{opacity:.3;cursor:default}
.carousel-arrow[disabled]:hover{background:var(--white);border-color:var(--border);color:var(--gray)}
.carousel-prev{left:0}
.carousel-next{right:0}
.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
.carousel-dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--border);transition:all .2s}
.carousel-dots button.active{background:var(--navy);width:22px;border-radius:4px}
.carousel-3 .carousel-track > *{flex:0 0 calc((100% - 40px)/3)}
.carousel-4 .carousel-track > *{flex:0 0 calc((100% - 60px)/4)}

/* Carousel that only slides on mobile — desktop/tablet renders the plain static grid it replaced */
@media(min-width:901px){
  .carousel-mobile-only{padding:0}
  .carousel-mobile-only .carousel-arrow,
  .carousel-mobile-only .carousel-dots{display:none}
  .carousel-mobile-only .carousel-viewport{overflow:visible}
  .carousel-mobile-only .carousel-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;transform:none!important}
  .carousel-mobile-only .carousel-track > *{flex:none;min-width:0}
}

/* ── ARTICLE CARDS ── */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.art-card{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.art-card:hover{border-color:var(--navy);box-shadow:0 6px 24px rgba(27,47,154,.09)}
.art-card .ph-img{aspect-ratio:16/9}
.art-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.art-body{padding:22px 24px 0;flex:1;display:flex;flex-direction:column}
.art-cat{display:inline-block;align-self:flex-start;background:var(--yellow-lt);color:#8a6d00;
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;margin-bottom:14px}
.art-card h3{font-size:16px;font-weight:800;line-height:1.4;margin-bottom:10px;color:var(--dark)}
.art-card p{font-size:13px;color:var(--gray);line-height:1.7;margin-bottom:18px;flex:1}
.art-more{display:block;border-top:1px solid var(--border);padding:16px 24px;
  font-size:13px;font-weight:700;color:var(--navy)}
.art-more:hover{color:var(--navy-dk)}

/* ── PAGINATION ── */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:56px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  padding:0 11px;border-radius:5px;font-size:13.5px;font-weight:700;color:var(--dark);
  background:var(--light);transition:all .2s}
.pagination a:hover{background:var(--lavender);color:var(--navy)}
.pagination .pg-active{background:var(--navy);color:#fff}
.pagination .pg-gap{background:none;color:var(--gray)}

/* ── GOOGLE REVIEW CARD ── */
.rev-card{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.rev-card .ph-img{aspect-ratio:3/4}
.rev-note{text-align:center;font-size:14px;color:var(--gray);margin:28px 0 16px}

/* ── FAQ GROUPS ── */
.faq-group-label{font-size:11px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gray);margin:36px 0 14px}
.faq-list > .faq-group-label:first-child{margin-top:0}

/* ── SINGLE ARTICLE PAGE ── */
.page-hd-article h1{font-size:30px}
.article-sec{padding-top:44px}
.article-wrap{max-width:760px;margin:0 auto}
.article-hero{width:100%;aspect-ratio:16/9;border-radius:10px;background-size:cover;
  background-position:center;margin-bottom:22px;background-color:var(--lavender)}
.article-cat{margin-bottom:16px}
.article-body{font-size:15.5px;line-height:1.85;color:var(--dark)}
.article-body p{margin-bottom:20px}
.article-body h2{font-size:22px;font-weight:900;margin:40px 0 16px;color:var(--navy);line-height:1.3}
.article-body h2:first-child{margin-top:0}
.article-body ul,.article-body ol{margin:0 0 20px 22px}
.article-body li{margin-bottom:8px;line-height:1.75}
.article-body strong{color:var(--dark)}
.article-body a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(27,47,154,.3)}
.article-body a:hover{text-decoration-color:var(--navy)}
.article-body img{max-width:100%;height:auto;border-radius:8px;margin:20px 0;display:block}

/* ── PESAN PAGE ── */
.page-hd-split{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.hd-price{background:var(--yellow);color:var(--navy);border-radius:8px;padding:18px 32px;text-align:center;flex-shrink:0}
.hd-price strong{display:block;font-size:38px;font-weight:900;letter-spacing:-1px;line-height:1}
.hd-price strong small{font-size:19px;font-weight:800}
.hd-price span{font-size:12px;font-weight:600;opacity:.8}
.pesan-steps{background:var(--dark);display:grid;grid-template-columns:repeat(4,1fr)}
.pesan-step{display:flex;align-items:center;gap:12px;padding:20px 28px;
  border-right:1px solid rgba(255,255,255,.1)}
.pesan-step:last-child{border-right:none}
.pesan-step b{width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--navy);
  font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pesan-step span{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.4}
.form-note{background:var(--yellow-lt);border:1px solid #f0dfa0;border-radius:6px;padding:14px 16px;
  margin-top:16px;font-size:12.5px;color:#6b5500;line-height:1.7}
.form-note strong{color:#4d3d00}
.split-divider{border:none;border-top:1px solid rgba(255,255,255,.14);margin:36px 0 22px}
.split-left .mini-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:14px}
.btn-wa-full{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--navy);
  color:#fff;padding:16px;border-radius:6px;font-size:13.5px;font-weight:800;letter-spacing:1px}
.btn-wa-full:hover{background:#16269c}
.link-sample{display:block;text-align:center;margin-top:16px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.75);text-decoration:underline}
.link-sample:hover{color:var(--yellow)}
.why-feats-col{display:flex;flex-direction:column;gap:18px}
.why-feats-col .why-feat .feat-ico{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08)}
.why-feats-col .why-feat .feat-ico svg{width:17px;height:17px}

/* ── CITY PAGE ── */
.city-hero{width:100%}
.city-hero .ph-img{aspect-ratio:24/9}
.city-hero img{width:100%;aspect-ratio:24/9;object-fit:cover}
.city-wrap{max-width:1000px;margin:0 auto;padding:56px 6% 0}
.callout{background:var(--light);border-left:4px solid var(--yellow);border-radius:0 6px 6px 0;
  padding:20px 24px;font-size:13.5px;color:var(--gray);line-height:1.85}
.callout strong{color:var(--dark)}
.sec-hd-sm{margin:56px 0 10px}
.sec-hd-sm h2{font-size:22px;font-weight:800;margin-bottom:10px}
.sec-hd-sm .ybar{width:44px;height:3px;margin-bottom:0}
.sec-sub{font-size:13.5px;color:var(--gray);line-height:1.75;margin:16px 0 24px}
.kec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.kec-chips span{background:var(--light);border:1px solid var(--border);padding:6px 12px;
  border-radius:4px;font-size:12px;font-weight:600;color:var(--dark)}
.mini-card{background:var(--white);border:1px solid var(--border);border-radius:8px;
  border-top:3px solid var(--navy);padding:20px 18px;height:100%}
.mini-card .mini-ico{font-size:22px;margin-bottom:12px}
.mini-card h4{font-size:13px;font-weight:800;margin-bottom:7px;color:var(--dark)}
.mini-card p{font-size:12px;color:var(--gray);line-height:1.65}
.check-card{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden;height:100%}
.check-card .ph-img{aspect-ratio:4/3}
.check-card .cc-body{padding:14px 16px 18px}
.check-card .cc-num{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--gray);display:block;margin-bottom:5px}
.check-card h4{font-size:13px;font-weight:800;margin-bottom:6px}
.check-card p{font-size:12px;color:var(--gray);line-height:1.6}
.quote-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:22px 20px;height:100%;
  display:flex;flex-direction:column}
.quote-card .qm{color:var(--yellow);font-size:22px;font-weight:900;line-height:1;margin-bottom:12px}
.quote-card p{font-size:12.5px;color:var(--gray);line-height:1.8;flex:1;margin-bottom:14px}
.quote-card cite{font-style:normal;font-size:12px;font-weight:800;color:var(--navy)}
.step-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.step-row{display:flex;gap:14px;align-items:center;background:var(--light);border-radius:6px;padding:14px 18px}
.step-row b{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-row span{font-size:13px;color:var(--dark);line-height:1.6}
.price-line{background:var(--yellow-lt);border-radius:6px;padding:14px 18px;font-size:13px;
  color:#6b5500;line-height:1.7;margin-bottom:18px}
.price-line strong{color:#4d3d00}
.closing-line{font-size:13.5px;color:var(--gray);line-height:1.85;margin-bottom:8px}
.closing-line a{color:var(--navy);font-weight:700;text-decoration:underline}
.oc-card{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:all .2s}
.oc-card:hover{border-color:var(--navy);box-shadow:0 4px 16px rgba(27,47,154,.08)}
.oc-card .ph-img{aspect-ratio:16/10}
.oc-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.oc-body{padding:14px 16px 18px}
.oc-body strong{display:block;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:5px}
.oc-body span{font-size:12px;color:var(--gray);line-height:1.6}
.city-cta{background:var(--navy);text-align:center;padding:64px 6%;margin-top:64px}
.city-cta h2{font-size:28px;font-weight:900;color:#fff;margin-bottom:12px}
.city-cta p{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:28px}
.btn-yellow{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--navy);
  padding:14px 30px;border-radius:5px;font-size:14px;font-weight:800;transition:background .2s}
.btn-yellow:hover{background:#e0b200}
.faq-sm .faq-q{font-size:13.5px;padding:16px 20px}
.faq-sm .faq-a{font-size:13px;padding:16px 20px}

/* ── V4 MOBILE ── */
@media(max-width:900px){
  .pain-grid-8{grid-template-columns:1fr 1fr;gap:16px}
  .carousel{padding:0}
  .carousel-arrow{display:none}
  .carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .carousel-viewport::-webkit-scrollbar{display:none}
  .carousel-track{transform:none!important;gap:14px}
  .carousel-track > *{flex:0 0 78%!important;scroll-snap-align:start}
  .art-grid{grid-template-columns:1fr;gap:20px}
  .pesan-steps{grid-template-columns:1fr 1fr}
  .pesan-step{padding:14px 18px}
  .pesan-step span{font-size:12px}
  .hd-price{padding:14px 24px}
  .hd-price strong{font-size:30px}
  .city-wrap{padding:40px 6% 0}
  .sec-hd-sm h2{font-size:19px}
  .city-cta h2{font-size:22px}
  .nav-drop-menu{display:none}
}
@media(max-width:480px){
  .pain-grid-8{grid-template-columns:1fr}
  .pesan-steps{grid-template-columns:1fr}
}

/* ── V4 NAV FIT ── */
.nav-menu a{white-space:nowrap}
.nav-menu{gap:18px}
@media(max-width:1180px){.nav-menu{display:none}.burger{display:flex}}
@media(max-width:1180px) and (min-width:901px){.mob-sticky-cta{display:none}.float-wa{display:flex}}

.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fg-row .fg{margin-bottom:0}
.fg-row{margin-bottom:13px}
.form-group-label{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gray);margin:22px 0 10px}
form .form-group-label:first-child{margin-top:0}
@media(max-width:600px){.fg-row{grid-template-columns:1fr}}

/* ── V4: HERO STACK MATCHES NAV BREAKPOINT ── */
@media(max-width:1180px) and (min-width:901px){
  .hero{padding:48px 6% 0;min-height:auto;flex-direction:column;align-items:flex-start}
  .hero::after{display:none}
  .hero-content{max-width:100%}
  .hero-content h1{font-size:38px}
  .hero-car{position:relative;width:100%;max-width:100%;right:auto;bottom:auto;
    margin-top:32px;background:var(--lavender);border-radius:10px;overflow:hidden}
  .hero-car img{mix-blend-mode:normal;border-radius:10px}
}


/* ═══════════ V5: WORDMARK · IKON · HERO · MOBILE ═══════════ */
.logo-tagline,.f-logo-tagline{white-space:nowrap}
.logo-wordmark,.f-logo-wordmark{align-items:flex-start}
.btn-google{margin-bottom:20px;padding:12px 22px;font-size:12.5px}
.g-badge{width:20px;height:20px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.g-badge svg{width:12px;height:12px;display:block}
.btn-outline .g-badge{width:18px;height:18px;background:none}
.btn-outline .g-badge svg{width:16px;height:16px}
.ico-wa,.ico-tel{flex-shrink:0}
.strip-icon svg.solid{fill:var(--navy);stroke:none}
.strip-link svg,.strip-call svg{width:16px;height:16px}
.f-contact-item .ico svg{width:14px;height:14px;fill:currentColor;display:block}
@media(min-width:1181px){
  .hero{display:grid;grid-template-columns:minmax(0,520px) 1fr;align-items:start;gap:48px;min-height:0;padding:64px 6% 60px}
  .hero-content{max-width:520px}
  .hero-car{position:static;width:100%;max-width:640px;justify-self:end;align-self:start;margin-top:93px}
}
@media(max-width:1180px){
  .hero{padding-bottom:36px}
  .hero-car{margin-bottom:0}
}
@media(max-width:900px){
  .hero-car{margin-top:24px}
  .mob-sticky-cta a{padding:14px 10px;min-height:48px}
  .mob-nav a{padding:15px 6%}
  .mob-nav-toggle{padding:15px 6%}
  .strip-card p,.check-list li{font-size:14.5px}
  .why-feat p,.perk p,.step p{font-size:13.5px}
}
@media(max-width:600px){
  nav{padding:0 5%;height:64px}
  .mob-nav{top:64px}
  .logo-img{width:36px!important;height:36px}
  .logo-name{font-size:16.5px}
  .sec,.sec-sm{padding:44px 5%}
  .hero{padding:30px 5% 32px}
  .hero-content h1{font-size:28px;line-height:1.2}
  .hero-content p{font-size:15px;line-height:1.75;margin-bottom:26px}
  .hero-btns{gap:10px}
  .hero-btns a{flex:1 1 100%;justify-content:center;padding:15px 20px;font-size:13.5px}
  .btn-google{align-self:flex-start}
  .strip-card{padding:28px 5%}
  .sec-hd{margin-bottom:32px}
  .sec-hd h2{font-size:23px;line-height:1.25}
  .sec-hd p{font-size:14.5px}
  .btn-outline,.btn-primary,.btn-outline-w,.btn-yellow,.btn-book{min-height:48px}
  .faq-q{padding:16px 18px;font-size:14.5px;min-height:56px}
  .faq-a{padding:16px 18px;font-size:14px}
  .fg input,.fg select,.fg textarea{font-size:16px;padding:14px 15px}
  .btn-submit{padding:16px;font-size:15px;min-height:52px}
  .price-card{padding:28px 20px}
  .price-amount{font-size:42px}
  .city-detail{padding:22px 18px}
  .city-card{padding:14px 8px}
  .city-detail-expanded{padding:22px 18px}
  .city-body{grid-template-columns:1fr;gap:24px}
  .coverage-grid{grid-template-columns:1fr;gap:16px}
  .cta-banner{padding:56px 5%}
  .cta-phone{font-size:28px}
  .split-left,.split-right{padding:40px 5%}
  .carousel-track > *{flex:0 0 84%!important}
  .art-body{padding:18px 18px 0}
  .art-more{padding:15px 18px}
  footer{padding:44px 5% 24px}
  .pain-grid-8{grid-template-columns:1fr 1fr;gap:12px}
  .pain-card-img .pain-body{padding:14px 14px 18px}
  .pain-card-img h3{font-size:13.5px}
  .pain-card-img p{font-size:12.5px;line-height:1.6}
  .area-card{padding:24px 20px}
}
@media(max-width:480px){
  .pain-grid-8{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .ph-img span{font-size:10px}
}

/* ── PAIN CAROUSEL ── */
.pain-carousel .pain-card{height:100%}
.pain-carousel .carousel-track{align-items:stretch}

/* ── TIER PRICING (rate card update — Agustus 2026) ── */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:40px}
.tier-card{background:var(--white);border:2px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.tier-standar{border-color:var(--navy)}
.tier-premium{border-color:var(--yellow)}
.tier-luxury{border-color:var(--dark)}
.tier-hd{padding:24px 26px}
.tier-standar .tier-hd{background:var(--navy);color:var(--white)}
.tier-premium .tier-hd{background:var(--yellow);color:var(--dark)}
.tier-luxury .tier-hd{background:var(--dark);color:var(--yellow)}
.tier-name{font-size:21px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.tier-cat{font-size:12.5px;margin-top:8px;line-height:1.6;opacity:.9}
.tier-standar .tier-cat{color:rgba(255,255,255,.75)}
.tier-premium .tier-cat{color:rgba(28,28,46,.75)}
.tier-luxury .tier-cat{color:rgba(245,194,0,.8)}
.tier-price-row{display:flex;align-items:baseline;gap:6px;margin-top:18px}
.tier-currency{font-size:14px;font-weight:700;opacity:.85}
.tier-price{font-size:36px;font-weight:900;line-height:1}
.tier-unit{font-size:11.5px;margin-left:2px;opacity:.75}
.tier-body{padding:22px 26px;flex:1;display:flex;flex-direction:column}
.tier-examples{font-size:12px;color:var(--gray);line-height:1.7}
.tier-examples strong{display:block;color:var(--dark);font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:8px}
.tier-cta{margin-top:20px}
.tier-cta .btn-outline{width:100%;justify-content:center;padding:12px 20px;font-size:12.5px}
.tier-includes{background:var(--light);border-radius:10px;padding:22px 26px;margin-bottom:40px;
  display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center}
.tier-includes h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--gray);flex-basis:100%;margin-bottom:2px}
.tier-includes .price-item{margin-bottom:0}
@media(max-width:900px){
  .tier-grid{grid-template-columns:1fr;gap:20px}
  .tier-includes{flex-direction:column;align-items:flex-start;gap:10px}
}