@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #0b1733;
  --green: #315f76;
  --mint: #eaf1f4;
  --orange: #3d6f89;
  --cream: #f6f8fa;
  --line: #d7e0e5;
  --muted: #596975;
  --s247-navy: #10283a;
  --s247-blue: #315f76;
  --s247-cyan: #4f8792;
  --s247-violet: #3d6f89;
}

html, body, button, input, select, textarea {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  background: #f8faff;
  color: var(--ink);
}

.hero h1,
.card-body h2,
.modal h2,
.section-heading h2,
.process h2,
.impact h2,
.install-strip h2,
.ai-intro h2,
.mini-stats b,
.impact-stat b,
.image-badge b {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.eyebrow,
.section-label,
.section-heading > div > span,
.process-intro > span,
.impact > div > span,
.ai-kicker,
.card-top small,
.card-top strong,
.report-main small,
.install-strip > div > span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .11em;
}

.hero {
  background:
    linear-gradient(rgba(36, 87, 214, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 87, 214, .055) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(6, 182, 212, .16), transparent 34%),
    linear-gradient(135deg, #f8faff 0%, #edf3ff 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.hero h1 em {
  color: var(--s247-blue);
  font-style: normal;
}

.live-dot {
  background: var(--s247-cyan);
  box-shadow: 0 0 0 5px rgba(6, 182, 212, .16);
}

.nav-report,
.card-top,
footer {
  background: var(--s247-navy);
}

.primary,
.input-wrap button,
.ai-analyze,
.chat-form button,
.chat-avatar {
  background: var(--s247-blue);
  box-shadow: 0 10px 26px rgba(36, 87, 214, .22);
}

.primary:hover,
.ai-analyze:hover,
.nav-report:hover {
  background: #244c63;
}

.text-link span,
.steps i,
.upload span,
.image-badge b {
  color: var(--s247-violet);
}

.tracking-card,
.category-card,
.modal,
.location-picker,
.report-list article {
  border-color: #d6deef;
  box-shadow: 0 20px 55px rgba(13, 35, 79, .1);
}

.category-card:hover {
  border-color: var(--s247-blue);
  box-shadow: 0 18px 45px rgba(36, 87, 214, .13);
}

.process,
.install-strip,
.ai-console,
.chat-head {
  background: linear-gradient(135deg, #07142f, #153a86);
}

.impact {
  background: linear-gradient(120deg, #315f76, #274b62);
}

.chat-launcher {
  background: linear-gradient(135deg, #315f76, #244c63);
  box-shadow: 0 16px 38px rgba(36, 87, 214, .3);
}

.track-result,
.success > i,
.category-card i,
.location-icon,
.report-icon {
  background: #e8efff;
  color: var(--s247-blue);
}

.pulse-icon,
.card-top i,
.chat-head small i,
.ai-kicker i {
  color: var(--s247-cyan);
  background-color: var(--s247-cyan);
}

.public-test-banner {
  background: #111d3c !important;
  color: #f4f7ff !important;
  border-bottom: 1px solid #304678;
}

.public-test-banner b {
  background: var(--s247-blue) !important;
  color: #fff !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.public-test-note {
  background: #edf2ff !important;
  border-color: #9eb3ea !important;
  color: #172b62 !important;
}

.test-mode-inline {
  color: #3856a3 !important;
}

@media (max-width: 900px) {
  .topbar nav {
    box-shadow: 0 12px 35px rgba(13, 35, 79, .18);
  }
}

/* Unified technical icon system */
.category-card i,
.location-icon,
.report-icon {
  position: relative;
  overflow: hidden;
  font-size: 0;
}

.category-card i::before,
.location-icon::before,
.report-icon::before {
  content: '';
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask: var(--s247-icon) center / contain no-repeat;
  mask: var(--s247-icon) center / contain no-repeat;
}

.category-card:nth-child(1) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M9 18h6M10 22h4M8.5 14.5A6 6 0 1 1 15.5 14.5c-.9.7-1.4 1.5-1.5 2.5h-4c-.1-1-.6-1.8-1.5-2.5Z'/%3E%3C/svg%3E");
}

.category-card:nth-child(2) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 2S5.5 9.2 5.5 14.2a6.5 6.5 0 0 0 13 0C18.5 9.2 12 2 12 2Zm-3.2 12.6c.3 2 1.5 3.1 3.4 3.5'/%3E%3C/svg%3E");
}

.category-card:nth-child(3) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M8 3 5 21M16 3l3 18M12 4v3m0 4v3m0 4v2M6.3 15h11.4'/%3E%3C/svg%3E");
}

.category-card:nth-child(4) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 7h16M9 3h6l1 4H8l1-4Zm-3 4 1 14h10l1-14M10 11v6m4-6v6'/%3E%3C/svg%3E");
}

.category-card:nth-child(5) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M20 4C12 4 6 7.5 6 14c0 3.3 2.7 6 6 6 6.5 0 8-8 8-16ZM4 21c2.5-6 6.7-9.7 12-12'/%3E%3C/svg%3E");
}

.category-card:nth-child(6) i {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14.7 6.3a4 4 0 0 0-5-5l2.1 2.1-2.4 2.4-2.1-2.1a4 4 0 0 0 5 5l7 7a2.1 2.1 0 0 1-3 3l-7-7a4 4 0 0 1-5-5l2.1 2.1 2.4-2.4-2.1-2.1'/%3E%3C/svg%3E");
}

.location-icon,
.report-icon {
  --s247-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Zm-5 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

.category-card strong {
  font-size: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #edf2ff;
  position: relative;
}

.category-card strong::before {
  content: '→';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--s247-blue);
  font: 700 14px/1 'IBM Plex Mono', monospace;
  transform: rotate(-45deg);
}

.category-card:hover strong {
  background: var(--s247-blue);
}

.category-card:hover strong::before {
  color: #fff;
}

.primary span,
.text-link span,
.input-wrap > span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Desktop readability: slightly larger supporting copy without inflating the layout. */
@media (min-width: 701px) {
  body {
    font-size: 17px;
    line-height: 1.55;
  }

  .hero p,
  .section-heading p,
  .ai-intro p,
  .process-intro p,
  .install-strip p,
  .tracking-card p,
  .report-main p {
    font-size: 17px !important;
    line-height: 1.55;
  }

  .category-card b {
    font-size: 18px !important;
  }

  .category-card p,
  .category-card small {
    font-size: 15px !important;
    line-height: 1.45;
  }

  .topbar nav a,
  .nav-report,
  .primary,
  .text-link,
  .input-wrap button,
  .ai-analyze {
    font-size: 16px !important;
  }
}

/* Mobile readability: keep supporting text at a comfortable phone size. */
@media (max-width: 700px) {
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  .public-test-banner {
    font-size: 13px !important;
    line-height: 1.45;
  }

  .section-heading p,
  .ai-intro p,
  .process-intro p,
  .install-strip p,
  .tracking-card p,
  .report-main p {
    font-size: 15px !important;
    line-height: 1.5;
  }

  .eyebrow,
  .section-label,
  .section-heading > div > span,
  .process-intro > span,
  .impact > div > span,
  .ai-kicker,
  .card-top small,
  .report-main small {
    font-size: 12px !important;
    line-height: 1.45;
    letter-spacing: .08em;
  }

  .category-card {
    min-height: 94px;
    padding: 18px 16px !important;
  }

  .category-card b {
    font-size: 17px !important;
    line-height: 1.25;
  }

  .category-card p,
  .category-card small {
    font-size: 14px !important;
    line-height: 1.4;
  }

  .hero {
    background:
      radial-gradient(circle at 85% 15%, rgba(79, 135, 146, .10), transparent 38%),
      linear-gradient(145deg, #f8fafb 0%, #eef3f5 100%);
    background-size: auto;
  }

  .hero-actions {
    width: 100%;
    align-items: stretch !important;
  }

  .hero-actions .primary {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .hero-actions .text-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    text-align: center;
  }

  .location-picker label small,
  .card-body label,
  .card-top small,
  .card-top strong,
  .mini-stats span {
    font-size: 12px !important;
    line-height: 1.4;
  }

  .location-picker label b,
  .trust-row,
  .ai-points,
  .steps p,
  .report-main p {
    font-size: 14px !important;
    line-height: 1.5;
  }

  .location-picker {
    width: 100%;
  }

  .primary,
  .nav-report,
  .text-link,
  .input-wrap button,
  .ai-analyze,
  .chat-launcher,
  .install-strip button {
    font-size: 16px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .mini-stats span,
  .steps p,
  footer,
  footer a {
    font-size: 14px !important;
    line-height: 1.45;
  }
}

/* =========================================================
   SISTEM247 — CIVIC OPERATIONS INTERFACE
   A distinct public-infrastructure visual language.
   ========================================================= */
:root {
  --ops-ink: #0a1b28;
  --ops-ink-2: #102c3b;
  --ops-signal: #35b9a5;
  --ops-signal-dark: #237f75;
  --ops-paper: #f4f6f3;
  --ops-panel: #ffffff;
  --ops-line: #d9e1df;
  --ops-muted: #61706f;
}

body {
  background: var(--ops-paper);
}

.topbar {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--ops-line);
}

.topbar nav {
  background: #f7f9f8;
  border: 1px solid #e1e7e5;
  box-shadow: none;
}

.topbar nav a {
  color: #354847;
}

.topbar nav a:hover {
  color: var(--ops-signal-dark);
}

.nav-report,
.primary,
.input-wrap button,
.ai-analyze,
.chat-form button {
  background: var(--ops-signal);
  color: var(--ops-ink);
  box-shadow: none;
}

.nav-report {
  background: var(--ops-ink);
  color: #fff;
}

.nav-report:hover,
.primary:hover,
.ai-analyze:hover {
  background: var(--ops-signal-dark);
  color: #fff;
}

.hero {
  min-height: 720px;
  color: #fff;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(53, 185, 165, .20), transparent 32%),
    linear-gradient(112deg, transparent 0 58%, rgba(255,255,255,.035) 58% 74%, transparent 74%),
    linear-gradient(145deg, #081925 0%, #0c2331 60%, #123847 100%);
  isolation: isolate;
}

.hero::after {
  width: 420px;
  height: 420px;
  right: -170px;
  top: 55px;
  border: 1px solid rgba(135, 210, 199, .17);
  box-shadow:
    0 0 0 54px rgba(135, 210, 199, .035),
    0 0 0 108px rgba(135, 210, 199, .025);
}

.hero::before {
  content: '43.8914° N  ·  20.3497° E';
  position: absolute;
  left: max(32px, calc((100vw - 1180px)/2));
  bottom: 25px;
  width: auto;
  height: auto;
  border-radius: 0;
  color: rgba(193, 223, 218, .55);
  background: none;
  font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}

.hero h1,
.hero h1 em {
  color: #f8fbfa;
}

.hero h1 em {
  display: inline-block;
  color: #80dfcf;
}

.hero-copy > p {
  color: #bdcdca;
}

.eyebrow,
.section-label,
.section-heading > div > span,
.ai-kicker {
  color: var(--ops-signal);
}

.location-picker {
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(164, 214, 207, .25);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.location-icon {
  background: rgba(53, 185, 165, .15);
  color: #7edbce;
}

.location-picker label small {
  color: #7edbce;
}

.location-picker label b {
  color: #fff;
}

.location-picker select {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.32);
  color: var(--ops-ink);
}

.text-link {
  color: #f2f7f6;
}

.text-link span {
  color: #7edbce;
}

.trust-row {
  color: #aebfbc;
}

.trust-row b {
  color: #70d8c8;
}

.hero-art {
  filter: saturate(.78) contrast(1.04);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 34px 80px rgba(0, 10, 18, .42);
}

.image-badge {
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 15px 35px rgba(4, 23, 31, .22);
}

.image-badge b {
  color: var(--ops-signal-dark);
}

.tracking-card {
  border: 1px solid rgba(151, 199, 192, .28);
  box-shadow: 0 28px 65px rgba(0, 13, 22, .30);
}

.card-top,
.process,
.ai-console,
.chat-head,
footer {
  background: var(--ops-ink);
}

.card-top {
  border-bottom: 1px solid rgba(118, 196, 184, .24);
}

.pulse-icon,
.card-top i,
.chat-head small i,
.ai-kicker i {
  color: var(--ops-signal);
  background-color: var(--ops-signal);
}

.campaign-visual {
  background: var(--ops-ink);
  padding-top: 1px;
}

.campaign-visual img {
  border-radius: 0 !important;
  filter: saturate(.72) contrast(1.05);
}

.ai-demo {
  background:
    linear-gradient(90deg, rgba(10,27,40,.035) 1px, transparent 1px),
    #f4f6f3;
  background-size: 80px 100%;
}

.ai-console {
  border: 1px solid #284657;
  box-shadow: 14px 14px 0 #dce5e2;
}

.ai-console textarea {
  background: #122f3c;
  border-color: #315161;
}

.install-strip {
  background: var(--ops-ink-2);
  border: 1px solid #294b59;
  box-shadow: none;
}

.install-strip > div > span {
  color: #76d5c7;
}

.categories {
  counter-reset: civic-category;
}

.category-grid {
  gap: 1px;
  padding: 1px;
  background: #ccd7d4;
  border: 1px solid #ccd7d4;
  border-radius: 18px;
  overflow: hidden;
}

.category-card {
  counter-increment: civic-category;
  border: 0;
  border-radius: 0;
  min-height: 118px;
  background: #fff;
  box-shadow: none;
  position: relative;
}

.category-card::after {
  content: '0' counter(civic-category);
  position: absolute;
  top: 12px;
  right: 14px;
  color: #9aaba7;
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
}

.category-card:hover {
  z-index: 1;
  transform: none;
  background: #edf6f3;
  border-color: transparent;
  box-shadow: inset 4px 0 0 var(--ops-signal);
}

.category-card i {
  background: #e7f2ef;
  color: var(--ops-signal-dark);
}

.category-card strong {
  background: #edf2f0;
}

.category-card strong::before {
  color: var(--ops-signal-dark);
}

.category-card:hover strong {
  background: var(--ops-signal);
}

.process {
  position: relative;
  border-top: 1px solid #264451;
  border-bottom: 1px solid #264451;
}

.process::after {
  content: 'TOK OBRADE / 24·7';
  position: absolute;
  right: 28px;
  top: 28px;
  color: rgba(137, 202, 192, .55);
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .15em;
}

.steps div {
  border-color: #34505c;
}

.steps i {
  color: #72d4c5;
  font-family: 'IBM Plex Mono', monospace;
}

.public-reports {
  background: #fff;
  max-width: none;
  padding-left: max(30px, calc((100vw - 1180px)/2));
  padding-right: max(30px, calc((100vw - 1180px)/2));
}

.report-list article {
  border-radius: 0;
  border-bottom-color: #dbe3e1;
  box-shadow: none;
}

.report-list article:hover {
  background: #f1f6f4;
}

.report-icon {
  background: #e7f2ef;
  color: var(--ops-signal-dark);
}

.impact {
  background: var(--ops-signal-dark);
}

.chat-launcher {
  background: var(--ops-ink);
  border: 1px solid #345463;
  box-shadow: 0 14px 32px rgba(5, 22, 31, .24);
}

@media (max-width: 700px) {
  .topbar {
    background: #fff;
  }

  .hero {
    min-height: auto;
    padding-top: 42px;
    padding-left: 20px;
    padding-right: 20px;
    background:
      radial-gradient(circle at 100% 4%, rgba(53, 185, 165, .18), transparent 32%),
      linear-gradient(155deg, #081925 0%, #102f3d 100%);
  }

  .hero::after {
    width: 230px;
    height: 230px;
    right: -115px;
    top: 150px;
  }

  .hero::before {
    display: none;
  }

  .hero h1 {
    font-size: 42px !important;
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  .hero-copy > p {
    color: #becdca;
    font-size: 16px !important;
  }

  .hero-actions {
    margin: 24px 0 !important;
  }

  .hero-actions .primary {
    border-radius: 12px;
    min-height: 60px;
    background: var(--ops-signal);
    color: #071b24;
  }

  .trust-row {
    justify-content: space-between;
    gap: 10px !important;
  }

  .hero-visual {
    margin-left: -20px;
    margin-right: -20px;
  }

  .hero-art {
    border: 0;
    border-radius: 0 !important;
  }

  .tracking-card {
    width: calc(100% - 32px) !important;
    border-radius: 16px;
  }

  .campaign-visual {
    padding: 0;
  }

  .ai-demo {
    background: var(--ops-paper);
  }

  .ai-console {
    box-shadow: 7px 7px 0 #dce5e2;
  }

  .install-strip {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 16px;
  }

  .category-grid {
    gap: 1px;
    border-radius: 14px;
  }

  .category-card {
    min-height: 104px;
  }

  .process::after {
    display: none;
  }

  .chat-launcher {
    background: var(--ops-ink);
  }
}