/* ═══════════════════════════════════════════════════════
   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}

/* ── 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}

/* ── 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-expanded{display:none}
.city-detail-expanded.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}

/* ── 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:rgba(255,255,255,.6);
  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}
  .folder-pane{padding:20px 18px}
  .folder-content-wrap{min-height:auto}
  .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}