/* Elektro Munja: charcoal and safety yellow. Dark only. */
:root {
  color-scheme: dark;
  --bg: #15171c;
  --surface: #1d2027;
  --ink: #f3f3f0;
  --muted: #b4b8c2;
  --line: #343842;
  --accent: #f5c518;
  --on-accent: #15171c;
  --band: #f5c518;
  --on-band: #15171c;
  --error: #ff8a80;
  --placeholder: #9aa0ac;
  --font-head: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-field: 6px;
}

h1, h2 { letter-spacing: -0.02em; }
.nowrap { white-space: nowrap; }
.logo-bolt { width: 28px; height: 28px; color: var(--accent); }
.hero-media img { border: 1px solid var(--line); }
.band .facts b { font-size: 1.05rem; }
.band :focus-visible { outline-color: var(--on-band); }
.alt { background: var(--surface); border-block: 1px solid var(--line); }

.more-services, .areas { display: flex; flex-wrap: wrap; gap: 8px; }
.more-services { margin-top: 20px; }
.areas { margin-bottom: 16px; }
.more-services li, .areas li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
.area-note, .steps p { color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: korak; }
.steps li { counter-increment: korak; display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.steps li::before {
  content: counter(korak); display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700;
}

.price-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 560px; margin: 0; }
.price-list dt, .price-list dd { margin: 0; padding-block: 12px; border-bottom: 1px solid var(--line); }
.price-list dd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The browser's default placeholder grey is too dim on the dark field. */
.field ::placeholder { color: var(--placeholder); opacity: 1; }

.photo-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-previews img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }

.call-bar { display: none; }

@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* The call bar below is the call button on phones, and the hero repeats it. */
  .site-head .btn { display: none; }
  .call-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
  }
  /* A yellow ring would vanish on the yellow bar, and an outer ring is cut off at the screen edge. */
  .call-bar:focus-visible { outline-color: var(--on-accent); outline-offset: -6px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .demo-notice { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}