/* ==========================================================================
   GoSpot — Design System
   Tokens mapped 1:1 from the Figma variable collection.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Neutral / dark ramp -------------------------------------------- */
  --dark-100: #1a1a17;
  --dark-88: rgba(26, 26, 23, .88);
  --dark-64: rgba(26, 26, 23, .64);
  --dark-16: rgba(26, 26, 23, .16);
  --dark-8: rgba(26, 26, 23, .08);
  --dark-4: rgba(26, 26, 23, .04);
  --light-100: #f4f3ea;

  /* --- Brand ----------------------------------------------------------- */
  --brand: #4541fc;          /* primary button */
  --brand-hover: #3733e8;
  --blue: #1067fe;           /* logomark, progress, accent copy */
  --blue-ink: #070619;

  /* --- Surfaces -------------------------------------------------------- */
  --bg: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-table-head: #f9f9fb;
  --bg-tab: #f6f6f6;
  --neutral-lightest: #eee;

  /* --- Text / line ----------------------------------------------------- */
  --text-primary: #1f2228;
  --text-secondary: rgba(31, 34, 40, .7);
  --ink-70: rgba(6, 4, 19, .7);
  --line: rgba(31, 34, 40, .08);
  --stroke: #dee0e3;

  /* --- Status ---------------------------------------------------------- */
  --green-bg: #e1f6d9;
  --green-text: #13a305;
  --mint-bg: #d3f5f0;
  --mint-text: #155b51;
  --info-bg: #d8e5f4;
  --info-text: #0158ff;
  --danger: #e94008;

  /* --- Metric accents --------------------------------------------------- */
  --acc-sewa: #ffa00d;
  --acc-omzet: #2b86f4;
  --acc-modal: #5a49f8;
  --acc-bep: #8360be;

  /* --- Typography ------------------------------------------------------- */
  --font-heading: 'Switzer', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: '42dot Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Switzer', system-ui, sans-serif;

  --size-h1: 60px;   --lh-h1: 64px;   --ls-h1: -2.5px;
  --size-h2: 48px;   --lh-h2: 52px;   --ls-h2: -2px;
  --size-h4: 32px;   --lh-h4: 40px;   --ls-h4: -1px;
  --size-h5: 28px;   --lh-h5: 32px;   --ls-h5: -1px;
  --size-h6: 24px;   --lh-h6: 28px;   --ls-h6: -.5px;
  --size-b1: 20px;   --lh-b1: 28px;
  --size-b2: 16px;   --lh-b2: 24px;
  --size-b3: 12px;   --lh-b3: 16px;
  --size-btn1: 14px; --lh-btn1: 20px;
  --size-btn2: 12px; --lh-btn2: 16px;
  --size-label2: 10px; --lh-label2: 12px;

  /* --- Layout ----------------------------------------------------------- */
  --page-padding: 64px;
  --section-padding: 112px;
  --container: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 32px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--dark-100);
  font-family: var(--font-body);
  font-size: var(--size-b2);
  line-height: var(--lh-b2);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Typography primitives
   ========================================================================== */
.h1, .h2, .h4, .h6 { font-family: var(--font-heading); font-weight: 500; margin: 0; }
.h5, .b1 { font-family: var(--font-display); font-weight: 500; margin: 0; }

.h1 { font-size: var(--size-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--size-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h4 { font-size: var(--size-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.h5 { font-size: var(--size-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.h6 { font-size: var(--size-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-family: var(--font-body); }
.b1 { font-size: var(--size-b1); line-height: var(--lh-b1); }
.b2 { font-size: var(--size-b2); line-height: var(--lh-b2); margin: 0; }
.b3 { font-size: var(--size-b3); line-height: var(--lh-b3); margin: 0; }
.btn-txt-1 { font-family: var(--font-heading); font-weight: 400; font-size: var(--size-btn1); line-height: var(--lh-btn1); }

.accent { color: var(--blue); }
.accent-brand { color: var(--brand); }
.muted { color: var(--dark-64); }
.muted-88 { color: var(--dark-88); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.section { padding: var(--section-padding) var(--page-padding); }
.section--tight { padding-block: 96px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--size-b2); line-height: var(--lh-b2);
  white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--secondary {
  background: var(--bg-secondary); color: var(--dark-100);
  border: 1.5px solid var(--line); height: 42px; padding: 16px 20px;
}
.btn--secondary:hover { border-color: var(--dark-16); }
.btn--ai {
  background: linear-gradient(90deg, #fff9ed, #dad9fe);
  border: 1px solid var(--blue); color: var(--dark-100);
}
.btn--ghost {
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .08);
  height: 44px; padding: 10px 12px; border-radius: var(--radius-md); gap: 4px;
}
.btn--ghost:hover { border-color: var(--dark-16); }
.btn--block { width: 100%; }

/* ==========================================================================
   Eyebrow pill  (badge above section headings)
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 8px;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1);
  color: var(--text-primary);
}
.eyebrow--split { padding: 4px 8px 4px 4px; gap: 6px; }
.eyebrow__tag {
  background: var(--brand); color: #fff; border-radius: 16px;
  padding: 4px 10px; font-family: var(--font-body); font-weight: 400;
  font-size: var(--size-btn2); line-height: var(--lh-btn2);
}
.eyebrow__rule { width: 1px; height: 14px; background: var(--dark-16); }

/* ==========================================================================
   Section title
   ========================================================================== */
.section-title { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.section-title__body { display: flex; flex-direction: column; gap: 24px; max-width: 768px; }
.section-title__lead { font-family: var(--font-body); font-weight: 700; font-size: var(--size-b1); line-height: var(--lh-b1); color: var(--dark-64); margin: 0; }

/* ==========================================================================
   Announcement banner (marquee)
   ========================================================================== */
.banner {
  height: 46px; display: flex; align-items: center;
  background: var(--bg-secondary); overflow: hidden;
}
.banner__track { display: flex; align-items: center; gap: 20px; padding-inline: 48px; margin-inline: auto; }
.banner__tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.banner__tag img { width: 18px; height: 18px; }
.banner__tag span { font-family: var(--font-body); font-weight: 500; font-size: var(--size-b3); line-height: var(--lh-b3); color: var(--dark-88); }
.banner__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dark-16); flex: none; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: sticky; top: 0; z-index: 60;
  height: 72px; display: flex; align-items: center;
  padding-inline: var(--page-padding);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--dark-8);
}
.navbar__inner { display: flex; align-items: center; gap: 32px; width: 100%; }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo img { width: 113px; height: 36px; }
.navbar__links { display: flex; align-items: center; gap: 32px; margin-inline: auto; }
.navbar__links a {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--size-b2); line-height: var(--lh-b2); color: #000;
  transition: color .18s ease;
}
.navbar__links a:hover { color: var(--brand); }
.navbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.navbar__toggle { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.navbar__toggle span { display: block; width: 16px; height: 1.5px; background: var(--dark-100); position: relative; }
.navbar__toggle span::before,
.navbar__toggle span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--dark-100); }
.navbar__toggle span::before { top: -5px; }
.navbar__toggle span::after { top: 5px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 80px var(--page-padding); }
.hero__grid { display: grid; grid-template-columns: 601px 1fr; gap: 80px; align-items: center; }
.hero__col { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }


/* Decorative measuring frame around the hero visual */
.hero__visual { position: relative; padding: 24px 12px; }
.hero__visual::before,
.hero__visual::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dark-8); }
.hero__visual::before { left: 10%; }
.hero__visual::after { right: 2px; }
.hero__rule { position: absolute; left: 6%; right: 0; height: 1px; background: var(--dark-8); }
.hero__rule--top { top: 24px; }
.hero__rule--bottom { bottom: 24px; }
.hero__node { position: absolute; width: 24px; height: 24px; display: grid; place-items: center; }
.hero__node i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: block; }
.hero__node--tl { top: 12px; left: 8%; }
.hero__node--tr { top: 12px; right: -6px; }
.hero__node--bl { bottom: 12px; left: 8%; }
.hero__node--br { bottom: 12px; right: -6px; }
.hero__visual img { width: 100%; height: auto; position: relative; }

/* ==========================================================================
   Steps  (Layout / 241)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 80px; }
.step {
  background: var(--dark-4); border-radius: var(--radius-xl);
  padding: 40px 32px; display: flex; flex-direction: column; gap: 32px;
  transition: background-color .2s ease;
}
.step:hover { background: rgba(26, 26, 23, .06); }
.step--highlight {
  background: linear-gradient(135deg, #fff9ed, #dad9fe);
  border: 1px solid var(--brand);
}
.step--highlight:hover { background: linear-gradient(135deg, #fff9ed, #dad9fe); }
.step__icon { width: 60px; height: 60px; }
.step__icon--lg { width: 80px; height: 80px; }
.step__body { display: flex; flex-direction: column; gap: 16px; }
.step__body h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); }
.step__body p { margin: 0; color: var(--dark-64); }
.steps__cta { display: flex; justify-content: center; margin-top: 80px; }

/* ==========================================================================
   Feature bento
   ========================================================================== */
.bento { display: flex; flex-direction: column; gap: 24px; margin-top: 80px; }
.bento__row { display: flex; gap: 24px; align-items: stretch; }
.bento__row > .bento-card--wide   { flex: 700 1 0; min-width: 0; }
.bento__row > .bento-card--narrow { flex: 516 1 0; min-width: 0; }

.bento-card {
  background: var(--dark-4); border-radius: var(--radius-xl); padding: 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.bento-card__media {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--dark-8);
}
.bento-card__media img { width: 100%; height: auto; }
.bento-card__body { padding: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.bento-card__body h3 { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: var(--size-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.bento-card__body p { margin: 0; color: var(--dark-64); font-size: var(--size-b1); line-height: var(--lh-b1); }

/* ==========================================================================
   Split section (Layout / 192)
   ========================================================================== */
.split { display: grid; grid-template-columns: 600px 1fr; gap: 80px; align-items: center; }
.split__media {
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--dark-4); aspect-ratio: 600 / 640;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 24px;
}
.split__media img {
  width: 100%; flex: 1 1 0; min-height: 0;
  object-fit: contain; border-radius: var(--radius-lg);
}
.split__content { display: flex; flex-direction: column; gap: 44px; align-items: flex-start; }
.split__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.split__copy p { margin: 0; font-family: var(--font-display); font-size: var(--size-b1); line-height: var(--lh-b1); color: var(--dark-64); }

.ticks { display: flex; flex-direction: column; gap: 16px; }
.tick { display: flex; align-items: center; gap: 12px; }
.tick img { width: 20px; height: 20px; flex: none; }
.tick span { font-family: var(--font-body); font-weight: 500; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: start; margin-top: 80px; max-width: 760px; margin-inline: auto; }
.plan { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--dark-8); background: #fff; }
.plan--featured { border-color: var(--blue); box-shadow: 0 12px 32px rgba(16, 103, 254, .15); }
.plan__head { padding: 40px 32px; display: flex; flex-direction: column; gap: 40px; }
.plan__head .btn--primary { background: var(--dark-100); }
.plan__head .btn--primary:hover { background: #000; }
.plan--featured .plan__head { background: var(--blue); }
.plan--featured .plan__head .btn--primary { background: #fff; color: var(--blue); }
.plan--featured .plan__head .btn--primary:hover { background: #eef3ff; }
.plan--featured .plan__title p { color: rgba(255, 255, 255, .72); }
.plan--featured .plan__name h3 { color: #fff; }
.plan--featured .plan__price strong { color: #fff; }
.plan__title { display: flex; flex-direction: column; gap: 14px; }
.plan__name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plan__name h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); }
.plan__flag { background: #e8effb; color: #115bdb; border-radius: 100px; padding: 6px 8px; font-size: var(--size-btn1); line-height: var(--lh-btn1); }
.plan__title p { margin: 0; color: var(--dark-64); font-size: var(--size-b1); line-height: var(--lh-b1); }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price strong { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
.plan__price span { color: var(--dark-64); font-size: var(--size-b2); }
.plan__benefits { padding: 40px 32px; border-top: 1px solid var(--dark-8); background: var(--dark-4); display: flex; flex-direction: column; gap: 22px; }
.plan__benefits h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); }
.plan__benefits .tick img { width: 24px; height: 24px; }

/* ==========================================================================
   Wizard payment step — selectable plan cards (mocked payment for now)
   ========================================================================== */
.pay-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pay-plan {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--radius-lg); border: 1.5px solid var(--dark-16); background: #fff;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.pay-plan:hover { border-color: var(--dark-16); background: var(--dark-4); }
.pay-plan.is-selected { border-color: var(--brand); background: rgba(69, 65, 252, .04); }
.pay-plan__name { font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); color: var(--dark-100); }
.pay-plan__price { font-family: var(--font-heading); font-weight: 500; font-size: 24px; color: var(--dark-100); }
.pay-plan__price small { font-family: var(--font-body); font-weight: 400; font-size: var(--size-b3); color: var(--dark-64); }
.pay-plan__desc { color: var(--dark-64); font-size: var(--size-b3); }
.pay-plan__badge {
  align-self: flex-start; background: var(--green-bg); color: var(--green-text);
  border-radius: 100px; padding: 4px 8px; font-size: var(--size-btn1); line-height: var(--lh-btn1);
}
@media (max-width: 767px) {
  .pay-plans { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 768px; margin: 80px auto 0; border-bottom: 1px solid var(--dark-16); }
.faq__item { border-top: 1px solid var(--dark-16); }
.faq__q {
  width: 100%; display: flex; align-items: center; gap: 24px; padding: 20px 0;
  text-align: left; font-family: var(--font-display); font-weight: 500;
  font-size: var(--size-b1); line-height: var(--lh-b1);
}
.faq__q span { flex: 1; }
.faq__q img { width: 32px; height: 32px; flex: none; transition: transform .25s ease; }
.faq__item.is-open .faq__q img { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding-bottom: 24px; color: var(--dark-88); }

/* ==========================================================================
   Closing CTA + footer
   ========================================================================== */
.closing { padding: 20px; }
.closing__inner { border-radius: var(--radius-2xl); overflow: hidden; }
.closing__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 80px 60px; background: var(--blue); color: #fff;
}
.closing__cta h2 { max-width: 567px; color: #fff; }
.closing__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.closing__actions .btn--primary { background: #fff; color: var(--blue-ink); }
.closing__actions .btn--primary:hover { background: #eef3ff; }
.closing__actions .btn--secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.closing__actions .btn--secondary:hover { background: rgba(255, 255, 255, .2); }

.footer { padding: 0 60px 32px; background: var(--blue-ink); }
.footer__top { display: flex; justify-content: space-between; gap: 40px; padding-block: 90px 60px; }
.footer__brand { display: flex; flex-direction: column; gap: 32px; }
.footer__contact { display: flex; flex-direction: column; gap: 20px; }
.footer__contact a { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .7); }
.footer__contact img { width: 24px; height: 24px; }
.footer__menu h4 { margin: 0 0 30px; font-family: var(--font-body); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); color: #fff; }
.footer__menu ul { display: flex; flex-direction: column; gap: 12px; }
.footer__menu a { color: rgba(255, 255, 255, .7); }
.footer__menu a:hover, .footer__contact a:hover { color: #fff; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer__bottom p { margin: 0; color: rgba(255, 255, 255, .5); }
.footer__social { display: flex; gap: 24px; }
.footer__social img { width: 24px; height: 24px; opacity: .5; transition: opacity .18s ease; }
.footer__social a:hover img { opacity: 1; }

/* ==========================================================================
   Modal / wizard
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .25);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--section-padding) var(--page-padding);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__dialog {
  background: #fff; border-radius: var(--radius-2xl); padding: 48px;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 32px;
  transform: translateY(12px); transition: transform .22s ease;
}
.modal.is-open .modal__dialog { transform: none; }
.modal__dialog--wide { max-width: 1312px; }

.progress { display: flex; flex-direction: column; gap: 8px; }
.progress__track { height: 4px; border-radius: 100px; background: var(--neutral-lightest); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 100px; background: var(--blue); transition: width .3s ease; }
.progress__meta { display: flex; justify-content: space-between; }
.progress__meta span:first-child { color: var(--dark-88); }
.progress__meta span:last-child { color: var(--dark-64); }

.step-pane { display: none; flex-direction: column; gap: 32px; }
.step-pane.is-active { display: flex; }
.step-head { display: flex; flex-direction: column; gap: 16px; }
.step-head p { margin: 0; color: var(--dark-64); }

/* Industry chips */
.chips { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 16px;
  border: 1px solid var(--stroke); border-radius: 100px; padding: 12px 16px;
  transition: border-color .18s ease, background-color .18s ease;
}
.chip img { width: 36px; height: 36px; }
.chip span { font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); color: var(--dark-88); }
.chip:hover { border-color: var(--blue); }
.chip.is-selected { border-color: var(--blue); background: rgba(16, 103, 254, .05); }

/* Form controls */
.form-grid { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--suggest { position: relative; }
.field > label {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1); color: var(--dark-100);
}
.suggest-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--dark-16); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(16, 16, 40, .12);
  max-height: 260px; overflow-y: auto;
}
.suggest-list[hidden] { display: none; }
.suggest-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.suggest-item:hover, .suggest-item.is-active { background: var(--dark-4); }
.suggest-item__title { font-family: var(--font-body); font-weight: 500; font-size: var(--size-b2); color: var(--dark-100); }
.suggest-item__meta { font-family: var(--font-body); font-size: var(--size-btn1); color: var(--dark-64); }
.control {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--dark-16); border-radius: var(--radius-lg);
  padding: 16px; background: #fff; transition: border-color .18s ease;
}
.control:focus-within { border-color: var(--blue); }
.control input, .control select {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--size-b2); line-height: var(--lh-b2); color: var(--dark-100);
  appearance: none;
}
.control__suffix { color: var(--dark-64); white-space: nowrap; }
.control__icon { width: 24px; height: 24px; flex: none; }
.control--pw { height: 56px; }

.map-frame { border: 1px solid var(--dark-8); border-radius: var(--radius-md); overflow: hidden; height: 300px; position: relative; }
/* Google Places Autocomplete's dropdown is appended to <body> with its own
   fixed positioning — it needs a z-index above the modal (100) to be
   visible/clickable while the wizard is open. */
.pac-container { z-index: 10000; }

.modal__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal__actions--end { justify-content: flex-end; }

/* ==========================================================================
   Result panel  (step 4 / dashboard detail)
   ========================================================================== */
.result { background: var(--dark-4); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.result__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.result__head p { margin: 0; color: var(--dark-64); }

.score-card {
  background: var(--blue); color: #fff; border-radius: var(--radius-xl);
  min-height: 130px; padding: 20px; display: flex; justify-content: space-between; align-items: flex-start;
  transition: background-color .2s ease;
}
.score-card--risk { background: var(--danger); }
.score-card__label { margin: 0 0 2px; color: rgba(255, 255, 255, .7); }
.score-card__value { color: #fff; margin: 0 0 6px; }
.score-card__flag {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .08); border-radius: 100px; padding: 6px 8px;
  font-size: var(--size-b3); line-height: var(--lh-b3);
}
.score-card__flag svg { width: 12px; height: 12px; }
.score-card__icon { width: 54px; height: 54px; border-radius: 100px; background: #fff; display: grid; place-items: center; flex: none; }
.score-card__icon img { width: 30px; height: 30px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric {
  background: #fff; border-radius: var(--radius-xl); min-height: 130px; padding: 20px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.metric__body { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 90px; }
.metric__label { margin: 0; color: rgba(17, 21, 20, .7); }
.metric__value { margin: 0; color: var(--dark-88); }
.metric__note { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--size-btn1); line-height: var(--lh-btn1); color: rgba(17, 21, 20, .7); }
.metric__icon { width: 54px; height: 54px; flex: none; }
.pill-green { display: inline-flex; background: var(--green-bg); color: var(--green-text); border-radius: 100px; padding: 6px 8px; font-size: var(--size-b3); line-height: var(--lh-b3); }

.result__split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.panel { background: #fff; border-radius: var(--radius-xl); }
.panel--score { padding: 24px 20px; display: flex; flex-direction: column; gap: 32px; }
.panel--ai { padding: 24px; }

.scorebar {
  display: flex; align-items: center; gap: 4px;
  border: 1.25px solid rgba(6, 4, 19, .08);
  border-radius: var(--radius-md); padding: 8px;
}
/* Segment fills come straight from the Figma gradient stops. The diagonal
   hatch is layered on top so the bar can stretch to any width. */
.scorebar__seg {
  height: 18px; border-radius: 4px; flex: none;
  background-image:
    repeating-linear-gradient(105deg, rgba(255,255,255,.28) 0 2px, transparent 2px 7px),
    var(--seg-fill);
}
.scorebar__seg--pasar   { --seg-fill: linear-gradient(184deg, #a29af1 16%, #7167ea 53%); width: 137px; }
.scorebar__seg--traffic { --seg-fill: linear-gradient(182deg, #4ed6e8 16%, #10aabf 53%); flex: 1 1 0; min-width: 0; }
.scorebar__seg--kompetisi { --seg-fill: linear-gradient(#b6e400, #b6e400); width: 63px; }
.scorebar__seg--sewa    { --seg-fill: linear-gradient(#ececec, #ececec); width: 63px; }

.legend { display: flex; flex-direction: column; gap: 20px; }
.legend__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legend__key { display: flex; align-items: center; gap: 8px; }
.legend__key img { width: 14px; height: 14px; border-radius: 4px; }
.legend__key span { color: var(--ink-70); }

.ai-box { border: 1px solid var(--brand); border-radius: var(--radius-lg); overflow: hidden; }
.ai-box__head {
  background: linear-gradient(90deg, #fff9ed, #dad9fe);
  padding: 4px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ai-box__head img { width: 24px; height: 24px; }
.ai-box__head strong { font-family: var(--font-display); font-weight: 500; font-size: var(--size-b1); line-height: var(--lh-b1); }
.ai-box__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-box__body > p { margin: 0; color: var(--blue-ink); }
.ai-box__rule { height: 1px; background: var(--dark-8); }
.ai-checks { display: flex; flex-direction: column; gap: 12px; }
.ai-check {
  display: flex; align-items: center; gap: 8px;
  opacity: .38; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.ai-check.is-in { opacity: 1; transform: none; }
.ai-check img { width: 20px; height: 20px; flex: none; }
.ai-check span { color: var(--ink-70); }
.ai-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--blue); vertical-align: -0.15em;
  animation: ai-caret-blink .9s steps(1) infinite;
}
@keyframes ai-caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-caret { animation: none; }
  .ai-check { transition: none; }
}

.disclaimer {
  align-self: center; display: flex; align-items: center; gap: 18px;
  background: var(--mint-bg); border-radius: var(--radius-lg); padding: 1px 12px 1px 0; overflow: hidden;
}
.disclaimer img { width: 91px; height: 82px; flex: none; }
.disclaimer p {
  margin: 0; font-family: var(--font-heading); font-weight: 500;
  font-size: 14px; line-height: 20px; letter-spacing: -.28px; color: var(--mint-text);
}

/* ==========================================================================
   App shell  (dashboard + settings)
   ========================================================================== */
.app-nav { justify-content: space-between; }
.account { position: relative; }
.account__btn { display: flex; align-items: center; gap: 12px; border-radius: 6px; padding: 2px; }
.account__avatar { width: 40px; height: 40px; border-radius: 9999px; background: #cfcfcc center/cover; flex: none; }
.account__meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.account__name { font-family: var(--font-body); font-weight: 400; font-size: var(--size-btn2); line-height: var(--lh-btn2); }
.account__plan { font-family: var(--font-body); font-weight: 500; font-size: var(--size-label2); line-height: var(--lh-label2); letter-spacing: 1px; text-transform: uppercase; color: var(--dark-64); }
.account__chev { width: 20px; height: 20px; transition: transform .2s ease; }
.account.is-open .account__chev { transform: rotate(180deg); }
.account__menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 184px;
  background: #fff; border-radius: 16px; padding: 6px;
  filter: drop-shadow(0 5px 2.5px rgba(180, 188, 208, .2));
  display: none; flex-direction: column;
}
.account.is-open .account__menu { display: flex; }
.account__menu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; color: #403f3f; }
.account__menu a:hover { background: var(--dark-4); }
.account__menu img { width: 24px; height: 24px; }
.account__menu .is-danger { color: var(--danger); }

.app-main { padding: 48px; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.app-head__actions { display: flex; gap: 12px; }

/* Table */
.table { display: flex; flex-direction: column; gap: 10px; }
.table__head, .table__row { display: grid; grid-template-columns: 300px repeat(5, 1fr); align-items: center; }
.table__head { background: var(--bg-table-head); border-radius: var(--radius-md); overflow: hidden; }
.table__head > div { padding: 14px 20px; color: var(--ink-70); white-space: nowrap; }
.table__head > div:first-child { padding-inline: 16px; }
.table__head > div:last-child { text-align: right; padding-inline: 16px; }
.table__row { border: 1px solid var(--dark-8); border-radius: var(--radius-lg); min-height: 65px; }
.table__row > div { padding: 20px; }
.table__row > div:first-child { padding-inline: 16px; }
.table__row > div:last-child { display: flex; justify-content: flex-end; padding-inline: 16px; }
.cell { display: flex; flex-direction: column; }
.cell small { font-family: var(--font-heading); font-weight: 400; font-size: var(--size-btn1); line-height: var(--lh-btn1); color: var(--dark-64); }
.cell--loc { flex-direction: row; align-items: center; gap: 12px; }

/* Table — billing (5 columns instead of the analyses table's 6) */
.table--billing .table__head, .table--billing .table__row { grid-template-columns: 160px repeat(2, 1fr) 130px 160px; }

.billing-plans { margin-top: 64px; }

.status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 100px; font-size: var(--size-b3); line-height: var(--lh-b3); font-weight: 500; white-space: nowrap; }
.status-badge--paid { background: var(--green-bg); color: var(--green-text); }
.status-badge--pending { background: rgba(230, 162, 12, .14); color: #a16207; }
.status-badge--expired { background: var(--dark-8); color: var(--dark-64); }
.status-badge--failed { background: rgba(233, 64, 8, .12); color: var(--danger); }
.cell__pin { width: 48px; height: 48px; border-radius: 100px; background: #e4e4e4; display: grid; place-items: center; flex: none; }
.cell__pin img { width: 22px; height: 22px; }

.empty { padding: 64px 24px; text-align: center; color: var(--dark-64); border: 1px dashed var(--dark-16); border-radius: var(--radius-lg); }

/* Settings */
.settings { display: flex; justify-content: center; padding-block: 40px; }
.settings__col { width: 448px; max-width: 100%; }
.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-tab); border-radius: var(--radius-md); padding: 4px; gap: 0; }
.tabs__btn {
  height: 32px; border-radius: 6px;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1); color: var(--dark-64);
  transition: color .18s ease;
}
.tabs__btn.is-active { background: #fff; color: #000; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.1)); }
.settings__card { margin-top: 24px; background: var(--dark-4); border-radius: var(--radius-lg); padding: 32px; min-height: 490px; }
.settings__pane { display: none; flex-direction: column; gap: 16px; }
.settings__pane.is-active { display: flex; }
.avatar-upload { display: flex; justify-content: center; padding-bottom: 8px; }
.avatar-upload__ring { position: relative; width: 120px; height: 120px; border: 1px dashed #2a2b2c; border-radius: 9999px; padding: 2px; }
.avatar-upload__img { width: 114px; height: 114px; border-radius: 9999px; background: #cfcfcc center/cover; }
.avatar-upload__btn {
  position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px;
  background: #070708; border: 1px solid #2a2b2c; border-radius: 9999px;
  display: grid; place-items: center;
}
.avatar-upload__btn svg { width: 16px; height: 16px; }
.pw-intro { display: flex; flex-direction: column; gap: 8px; }
.pw-intro p { margin: 0; color: var(--dark-64); }
.divider { height: 1px; background: var(--dark-16); }
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--info-bg); border-radius: var(--radius-md); padding: 10px 12px;
  color: var(--info-text); font-family: var(--font-body); font-weight: 400;
  font-size: var(--size-btn2); line-height: var(--lh-btn2);
}
.toast svg { width: 16px; height: 16px; flex: none; }
.icon-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 16px; height: 16px; color: var(--dark-64); }
/* 32px is under the ~44px touch-target guideline — widened just for this
   one (mobile users reported it was hard to tap) without resizing every
   other .icon-btn (e.g. the password show/hide toggles). */
#locateBtn { width: 44px; height: 44px; }

/* ==========================================================================
   Responsive — mobile frame is 393px with 20px page padding
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --page-padding: 40px; --section-padding: 96px; }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .modal__dialog--wide { max-width: 100%; }
  .table__head, .table__row { grid-template-columns: 240px repeat(5, 1fr); }
  .table--billing .table__head, .table--billing .table__row { grid-template-columns: 140px repeat(2, 1fr) 110px 140px; }
}

@media (max-width: 991px) {
  :root { --size-h1: 48px; --lh-h1: 52px; --ls-h1: -2px; --size-h2: 36px; --lh-h2: 42px; --ls-h2: -1.4px; }
  .navbar__links { display: none; }
  .navbar__toggle { display: flex; }
  .navbar__inner { justify-content: space-between; }
  .navbar__actions { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split__media { aspect-ratio: 16 / 10; }
  .steps, .pricing { grid-template-columns: 1fr; }
  .bento__row { flex-direction: column; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .result__split { grid-template-columns: 1fr; }
  .app-main { padding: 24px; }
  .app-head { flex-direction: column; align-items: flex-start; }
  .app-head__actions { flex-direction: column; width: 100%; }
  .app-head__actions .btn { width: 100%; }
  .table__head { display: none; }
  .table__row, .table--billing .table__row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .table__row > div, .table__row > div:first-child, .table__row > div:last-child { padding: 8px; }
  .table__row > div:first-child { grid-column: 1 / -1; }
  .table__row > div[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-family: var(--font-heading); font-weight: 400;
    font-size: var(--size-btn2); line-height: var(--lh-btn2);
    color: var(--dark-64); text-transform: uppercase; letter-spacing: .4px;
  }
  .table__row > div:last-child { grid-column: 1 / -1; justify-content: stretch; }
  .table__row > div:last-child .btn { width: 100%; }
  .closing__cta { flex-direction: column; align-items: flex-start; padding: 48px 32px; }
  .footer { padding-inline: 32px; }
  .footer__top { flex-direction: column; padding-block: 48px 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
  .account__meta { display: none; }
  :root {
    --page-padding: 20px; --section-padding: 64px;
    --size-h1: 40px; --lh-h1: 44px; --ls-h1: -1.6px;
    --size-h2: 28px; --lh-h2: 32px; --ls-h2: -1px;
    --size-h4: 26px; --lh-h4: 32px;
    --size-b1: 16px; --lh-b1: 24px;
  }
  .hero { padding-block: 48px; }
  .modal { padding: 24px 16px 48px; align-items: flex-start; }
  .modal__dialog { padding: 24px; border-radius: var(--radius-xl); gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .chips { justify-content: flex-start; gap: 10px; }
  .chip { padding: 8px 12px; gap: 10px; }
  .chip img { width: 28px; height: 28px; }
  .result__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .disclaimer { flex-direction: column; text-align: center; padding: 0 16px 16px; gap: 8px; }
  .bento-card__body p { font-size: var(--size-b2); line-height: var(--lh-b2); }
  .steps, .bento { margin-top: 48px; }
  .steps__cta, .faq, .pricing { margin-top: 48px; }
  .settings__card { padding: 20px; }
  .banner__track { padding-inline: 20px; }
  .section-title__lead { font-size: var(--size-b2); line-height: var(--lh-b2); }
}

/* Banner marquee only where it overflows */
@media (max-width: 900px) {
  .banner__track { margin-inline: 0; animation: marquee 22s linear infinite; will-change: transform; }
  .banner:hover .banner__track { animation-play-state: paused; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Mobile nav dropdown
   ========================================================================== */
@media (max-width: 991px) {
  body.nav-open .navbar__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; left: var(--page-padding); right: var(--page-padding);
    top: calc(100% + 8px); margin: 0;
    background: #fff; border: 1px solid var(--dark-8); border-radius: var(--radius-lg);
    padding: 8px; box-shadow: 0 12px 32px rgba(26, 26, 23, .08);
  }
  body.nav-open .navbar__links a { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; }
  body.nav-open .navbar__links a:hover { background: var(--dark-4); }
  .navbar { position: sticky; }
  .navbar__inner { position: relative; }
}

/* ==========================================================================
   Auth  (Login / Sign Up)
   ========================================================================== */
.auth { display: flex; justify-content: center; padding-block: 40px; }
.auth__col { width: 448px; max-width: 100%; }
.auth__card { margin-top: 24px; background: var(--dark-4); border-radius: var(--radius-lg); overflow: hidden; }
.auth__body { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.auth__pane { display: none; flex-direction: column; gap: 16px; }
.auth__pane.is-active { display: flex; }

/* 44px logomark tile — the lockup SVG cropped to its mark and scaled 36 → 44 */
.logomark {
  width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  position: relative; flex: none;
  box-shadow:
    inset 0 0 0 .917px rgba(16, 24, 40, .24),
    inset 0 2.75px 2.75px rgba(255, 255, 255, .1),
    inset 0 -2.75px 2.75px rgba(0, 0, 0, .1);
}
.logomark img { width: 138px; height: 44px; max-width: none; }
.logomark::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1.833px solid rgba(255, 255, 255, .12);
  background: linear-gradient(178deg, rgba(255,255,255,0) 2%, rgba(255,255,255,.12) 98%);
  pointer-events: none;
}

.btn--google {
  background: #fff; border-radius: 100px; height: 36px; width: 100%;
  gap: 8px; padding: 8px 16px;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1); color: #000;
  border: 1px solid var(--line);
}
.btn--google:hover { background: #fafafa; }
.btn--google svg { width: 20px; height: 20px; flex: none; }

.divider-or {
  display: flex; align-items: center; gap: 12px; padding-top: 16px;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1); color: var(--dark-100);
}
.divider-or::before, .divider-or::after {
  content: ''; flex: 1; height: 1px; background: var(--dark-16);
}

.field__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field__link {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dark-100);
}
.field__link:hover { color: var(--brand); }

.auth__foot {
  padding: 0 24px 24px; display: flex; align-items: center;
  justify-content: center; gap: 4px; text-align: center;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--size-btn1); line-height: var(--lh-btn1); color: var(--dark-88);
}
.auth__foot a { text-decoration: underline; }
.auth__foot--legal {
  background: var(--dark-4); padding: 24px 53px;
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--size-btn2); line-height: var(--lh-btn2); color: var(--dark-100);
}

@media (max-width: 767px) {
  .auth__body { padding: 20px; }
  .auth__foot--legal { padding: 20px; }
}

/* ------------------------------------------------------------------ */
/* Legal pages (Terms of Use, Privacy Policy)                          */
/* ------------------------------------------------------------------ */
.legal { max-width: 760px; margin: 0 auto; padding: 64px var(--page-padding) 96px; }
.legal__updated { color: var(--dark-64); margin: 8px 0 40px; }
.legal h2 {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--size-h6); line-height: var(--lh-h6);
  color: var(--dark-100); margin: 40px 0 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--dark-88); font-size: var(--size-b2); line-height: var(--lh-b2); margin: 0 0 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; list-style: disc; }
.legal li { margin-bottom: 8px; }

/* ------------------------------------------------------------------ */
/* Real-data POI map, heatmap, and competitor table (paid plans only)   */
/* ------------------------------------------------------------------ */
.poi-section {
  border: 1.5px solid var(--dark-16); border-radius: var(--radius-lg);
  padding: 20px; margin-top: 24px; position: relative;
}
/* Trial plan: the real map/heatmap/table still render (simulated location,
   real map tiles, no competitor pins since there's no real data to plot),
   just blurred behind a paywall card instead of being hidden outright. */
.poi-section.is-locked .poi-section__content {
  filter: blur(6px); pointer-events: none; user-select: none;
}
.poi-lock {
  position: absolute; inset: 20px; display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 2;
}
.poi-lock__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  max-width: 380px; padding: 28px 24px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .92); box-shadow: 0 8px 32px rgba(16, 24, 40, .12);
  border: 1.5px solid var(--dark-16);
}
.poi-lock__card p { color: var(--dark-64); font-size: var(--size-b2); margin: 0; }
.poi-tabs--main { margin-bottom: 20px; border-bottom: 1.5px solid var(--dark-16); padding-bottom: 16px; }
.poi-tabs--main .poi-tab { font-weight: 600; }
.poi-panel { display: flex; flex-direction: column; gap: 16px; }
.poi-section__desc { color: var(--dark-64); font-size: var(--size-b2); margin: -8px 0 0; }

.poi-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.poi-tab {
  padding: 8px 14px; border-radius: 100px; border: 1.5px solid var(--dark-16);
  background: #fff; color: var(--dark-88); font-size: var(--size-btn1);
  font-family: var(--font-body); font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.poi-tab:hover { border-color: var(--dark-16); background: var(--dark-4); }
.poi-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.poi-map { width: 100%; height: 380px; border-radius: var(--radius-md); overflow: hidden; background: var(--dark-4); }

.poi-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.poi-legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--size-b3); color: var(--dark-64); }
.poi-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.poi-loading, .poi-empty {
  padding: 32px; text-align: center; color: var(--dark-64); font-size: var(--size-b2);
}

.competitor-table { width: 100%; overflow-x: auto; }
.competitor-table table { width: 100%; border-collapse: collapse; min-width: 640px; }
.competitor-table th {
  text-align: left; font-size: var(--size-b3); font-weight: 600; color: var(--dark-64);
  text-transform: uppercase; letter-spacing: .02em; padding: 8px 12px; border-bottom: 1.5px solid var(--dark-16);
}
.competitor-table td {
  padding: 12px; font-size: var(--size-b2); color: var(--dark-100); border-bottom: 1px solid var(--dark-8);
  vertical-align: top;
}
.competitor-table td.is-muted { color: var(--dark-64); }
.strength-badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: var(--size-btn2); font-weight: 500; white-space: nowrap;
}
.strength-badge--kuat { background: rgba(233, 64, 8, .12); color: var(--danger); }
.strength-badge--sedang { background: rgba(230, 162, 12, .14); color: #a16207; }
.strength-badge--lemah { background: var(--dark-8); color: var(--dark-64); }

@media (max-width: 767px) {
  .poi-map { height: 280px; }
}

/* Cookie notice */
.cookie-banner {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 200;
  max-width: 640px; margin-inline: auto;
  background: #fff; border: 1px solid var(--dark-16); border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(16, 16, 40, .16);
  padding: 20px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.cookie-banner p { margin: 0; flex: 1 1 280px; color: var(--dark-88); }
.cookie-banner p a { color: var(--blue); }
.cookie-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 767px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; padding: 16px; flex-direction: column; align-items: stretch; }
  .cookie-banner__actions .btn { flex: 1; }
}