:root {
  --green: #0b7017;
  --green-2: #16851e;
  --green-dark: #075411;
  --green-deep: #043d0b;
  --red: #cd1117;
  --red-dark: #a5080e;
  --gold: #f6b800;
  --ink: #162018;
  --muted: #667168;
  --paper: #f7f8f2;
  --cream: #fffdf7;
  --white: #ffffff;
  --line: #dde3d8;
  --soft-green: #edf7ec;
  --soft-red: #fff0f0;
  --shadow: 0 24px 70px rgba(28, 58, 28, .12);
  --shadow-small: 0 10px 30px rgba(28, 58, 28, .09);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 11%, rgba(246,184,0,.08), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(11,112,23,.08), transparent 22%),
    linear-gradient(180deg, #fffdf8 0, var(--paper) 36%, #f5f8f1 100%);
}

.topbar {
  min-height: 86px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-logo { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,.08); flex: 0 0 auto; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-size: 15px; letter-spacing: .01em; color: var(--green-deep); }
.brand-copy small { color: var(--muted); font-size: 12px; margin-top: 1px; }
.topnav { display: flex; align-items: center; gap: 8px; }
.topnav a { text-decoration: none; font-size: 13px; font-weight: 750; padding: 10px 13px; border-radius: 999px; }
.topnav a:hover { background: rgba(11,112,23,.07); }
.topnav .nav-cta { background: var(--green); color: #fff; padding-inline: 16px; }
.topnav .nav-cta:hover { background: var(--green-dark); }

.hero {
  max-width: 1240px;
  min-height: 610px;
  margin: 0 auto;
  padding: 66px 24px 92px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 74px;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-block; color: var(--green); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
h1, h2, h3 { margin-top: 0; line-height: 1.07; }
h1 { max-width: 760px; margin: 14px 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6.4vw, 84px); font-weight: 500; letter-spacing: -.045em; }
h1 span { color: var(--green); }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 4vw, 52px); font-weight: 500; letter-spacing: -.03em; }
h3 { font-size: 20px; }
.hero-lead { max-width: 690px; margin: 0; font-size: 19px; color: #4e5c51; }
.hero-principle { max-width: 690px; margin: 18px 0 0; padding: 14px 17px; border-left: 4px solid var(--gold); border-radius: 0 15px 15px 0; background: rgba(246,184,0,.08); color: var(--green-deep); font-size: 16px; line-height: 1.5; }
.hero-principle strong { color: var(--green); }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.button { border: 0; border-radius: 999px; padding: 14px 21px; color: #fff; font-weight: 850; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-problem { background: var(--red); box-shadow: 0 10px 24px rgba(205,17,23,.18); }
.button-problem:hover { background: var(--red-dark); }
.button-idea { background: var(--green); box-shadow: 0 10px 24px rgba(11,112,23,.18); }
.button-idea:hover { background: var(--green-dark); }
.button-ghost-dark { background: #eef0e9; color: var(--ink); box-shadow: none; }
.hero-note { margin-top: 18px; display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }
.hero-note-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: var(--soft-green); font-weight: 900; }

.hero-visual { min-height: 460px; position: relative; display: grid; place-items: center; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-visual::before { width: 420px; height: 420px; background: rgba(11,112,23,.08); }
.hero-visual::after { width: 335px; height: 335px; border: 1px dashed rgba(11,112,23,.25); }
.logo-card { position: relative; z-index: 2; width: min(390px, 88%); aspect-ratio: 1; border-radius: 50%; padding: 10px; background: #fff; box-shadow: var(--shadow); }
.logo-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.logo-halo { position: absolute; inset: -12px; z-index: -1; border-radius: 50%; border: 1px solid rgba(246,184,0,.42); }
.float-card { position: absolute; z-index: 4; min-width: 190px; padding: 13px 16px; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-small); border: 1px solid rgba(255,255,255,.8); display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; backdrop-filter: blur(8px); }
.float-card strong, .float-card small { grid-column: 2; }
.float-card strong { font-size: 14px; }
.float-card small { color: var(--muted); font-size: 11px; }
.float-problem { top: 54px; right: -12px; transform: rotate(2deg); }
.float-idea { left: -26px; bottom: 62px; transform: rotate(-2deg); }
.float-dot { width: 13px; height: 13px; border-radius: 50%; grid-row: 1 / span 2; }
.float-dot.problem { background: var(--red); }
.float-dot.idea { background: var(--green); }

.map-section { max-width: 1240px; margin: 0 auto; padding: 84px 24px 72px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.section-heading h2 { max-width: 810px; margin: 8px 0 10px; }
.section-heading p { max-width: 740px; margin: 0; color: var(--muted); }
.legend { flex: 0 0 auto; display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.red { background: var(--red); }
.legend-dot.green { background: var(--green); }

.map-toolbar { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.map-mode { flex: 0 0 auto; min-width: 205px; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 11px 14px; display: flex; gap: 10px; align-items: center; text-align: left; color: var(--ink); box-shadow: 0 3px 10px rgba(30,50,30,.035); transition: .18s ease; }
.map-mode span:last-child { display: grid; }
.map-mode strong { font-size: 13px; }
.map-mode small { color: var(--muted); font-size: 11px; }
.map-mode:hover { border-color: #c8d4c5; transform: translateY(-1px); }
.map-mode.active[data-map-type="problem"] { border-color: rgba(205,17,23,.45); background: var(--soft-red); box-shadow: 0 7px 18px rgba(205,17,23,.08); }
.map-mode.active[data-map-type="idea"] { border-color: rgba(11,112,23,.42); background: var(--soft-green); box-shadow: 0 7px 18px rgba(11,112,23,.08); }
.mode-symbol { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; flex: 0 0 auto; font-size: 13px; }
.mode-symbol.problem { background: var(--red); }
.mode-symbol.idea { background: var(--green); }
.map-instruction { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--green-dark); font-size: 13px; font-weight: 750; padding: 0 12px; }
.map-instruction span { font-size: 22px; color: var(--gold); }

.map-shell { position: relative; overflow: hidden; border-radius: 30px; background: #e2eadf; border: 1px solid #d0dccd; box-shadow: var(--shadow); }
#map { height: min(68vh, 650px); min-height: 500px; width: 100%; z-index: 1; }
.map-tip { position: absolute; left: 50%; bottom: 22px; z-index: 500; transform: translateX(-50%); max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 999px; color: #fff; background: rgba(4,61,11,.92); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 750; font-size: 13px; opacity: .98; pointer-events: none; white-space: nowrap; }
.map-tip span { color: #fff; margin-right: 5px; }
.status-row { min-height: 42px; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 12px 4px 0; color: var(--muted); font-size: 13px; }
.link-button { border: 0; padding: 4px 0; background: transparent; color: var(--green); font-weight: 800; }
.link-button:hover { text-decoration: underline; }

.custom-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,.22); }
.custom-pin::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; left: 8px; top: 8px; }
.custom-pin.problem { background: var(--red); }
.custom-pin.idea { background: var(--green); }
.custom-pin.pending { background: var(--gold); }
.leaflet-popup-content-wrapper { border-radius: 18px; box-shadow: 0 12px 35px rgba(0,0,0,.16); }
.leaflet-popup-content { margin: 16px 18px; min-width: 210px; }
.popup-type { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.popup-type.problem { color: var(--red-dark); background: var(--soft-red); }
.popup-type.idea { color: var(--green-dark); background: var(--soft-green); }
.popup-title { font-weight: 850; margin-bottom: 5px; }
.popup-description { margin: 0; color: #465048; }
.popup-name { margin-top: 9px; color: var(--muted); font-size: 12px; }

.how { max-width: 1240px; margin: 0 auto; padding: 92px 24px; }
.how-heading { max-width: 760px; margin-bottom: 32px; }
.how-heading h2 { margin: 8px 0 10px; }
.how-heading p { margin: 0; color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps article { position: relative; overflow: hidden; min-height: 270px; padding: 27px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.8); box-shadow: 0 10px 35px rgba(41,65,41,.045); }
.step-number { position: absolute; right: 20px; top: 12px; font-family: Georgia, serif; font-size: 58px; color: rgba(11,112,23,.08); line-height: 1; }
.step-icon { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 34px; background: var(--soft-green); color: var(--green); font-weight: 900; font-size: 20px; }
.steps h3 { margin-bottom: 9px; }
.steps p { margin: 0; color: var(--muted); }

.trust { max-width: 1192px; margin: 28px auto 90px; padding: 46px; border-radius: 34px; color: #fff; background: linear-gradient(135deg, var(--green-deep), var(--green)); box-shadow: var(--shadow); display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; }
.trust .eyebrow { color: #c8efc6; }
.trust h2 { margin: 10px 0 15px; }
.trust-copy > p { margin: 0; color: rgba(255,255,255,.75); }
.trust-list { display: grid; gap: 14px; }
.trust-list > div { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.trust-list > div:last-child { border-bottom: 0; }
.trust-list span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.11); color: #fff; font-weight: 850; font-size: 12px; }
.trust-list p { margin: 0; color: rgba(255,255,255,.74); font-size: 14px; }
.trust-list strong { color: #fff; }

.closing-cta { max-width: 1192px; margin: 0 auto 88px; padding: 30px 34px; border: 1px solid var(--line); border-radius: 28px; background: #fff; display: grid; grid-template-columns: 78px 1fr auto; gap: 22px; align-items: center; box-shadow: var(--shadow-small); }
.closing-cta img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
.closing-cta h2 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 38px); }

footer { max-width: 1240px; margin: 0 auto; padding: 28px 24px 38px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.footer-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.footer-brand strong, .footer-brand small { display: block; }
.footer-brand strong { font-size: 13px; color: var(--green-deep); }
.footer-brand small { font-size: 11px; color: var(--muted); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: var(--muted); font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--green); text-decoration: underline; }
.admin-link { opacity: .55; }

/* Dialog */
dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: #fff; box-shadow: 0 28px 100px rgba(0,0,0,.28); overflow: auto; }
dialog::backdrop { background: rgba(10,25,12,.58); backdrop-filter: blur(4px); }
#submissionForm { padding: 30px; }
.dialog-close { position: absolute; right: 18px; top: 16px; border: 0; width: 36px; height: 36px; border-radius: 50%; background: #f1f3ee; font-size: 25px; color: #475049; line-height: 1; }
.dialog-head { padding-right: 48px; }
.dialog-head h2 { font-size: clamp(31px, 5vw, 42px); margin: 8px 0 7px; }
.dialog-head p { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 22px; padding: 5px; border-radius: 18px; background: #f2f4ef; }
.type-button { border: 0; padding: 10px 12px; border-radius: 14px; color: #586258; background: transparent; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 7px; }
.type-button .mode-symbol { width: 23px; height: 23px; font-size: 9px; }
.type-button.active[data-type="problem"] { background: #fff; color: var(--red-dark); box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.type-button.active[data-type="idea"] { background: #fff; color: var(--green-dark); box-shadow: 0 3px 14px rgba(0,0,0,.07); }
label { display: block; margin: 15px 0; color: #344038; font-size: 13px; font-weight: 800; }
label > span { font-weight: 500; color: var(--muted); }
input, select, textarea { width: 100%; margin-top: 6px; border: 1px solid #ccd5ca; border-radius: 13px; padding: 12px 13px; color: var(--ink); background: #fff; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: rgba(11,112,23,.72); box-shadow: 0 0 0 4px rgba(11,112,23,.08); }
textarea { min-height: 130px; resize: vertical; }
.char-counter { display: block; margin-top: 4px; text-align: right; color: var(--muted); font-weight: 500; }
.optional span { display: block; font-size: 11px; margin-top: 1px; }
.consent-row { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; font-weight: 500; line-height: 1.4; }
.consent-row input { width: 18px; height: 18px; margin: 2px 0 0; }
.consent-row a { color: var(--green); }
.hp { position: absolute !important; left: -9999px !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.form-message { min-height: 20px; color: var(--red-dark); font-size: 12px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translate(-50%, 24px); padding: 12px 17px; border-radius: 999px; color: #fff; background: var(--green-deep); box-shadow: 0 10px 32px rgba(0,0,0,.23); opacity: 0; pointer-events: none; transition: .22s ease; font-weight: 750; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Admin + privacy */
.subpage-top { max-width: 1050px; margin: 0 auto; padding: 8px 24px 0; }
.subpage { max-width: 1050px; margin: 0 auto; padding: 65px 24px 90px; }
.subpage h1 { font-size: clamp(44px, 6vw, 72px); }
.subpage-intro { max-width: 760px; color: var(--muted); font-size: 17px; }
.panel { margin-top: 25px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-small); }
.admin-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: end; }
.admin-toolbar label { margin: 0; }
.admin-list { display: grid; gap: 12px; margin-top: 20px; }
.admin-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fbfcfa; }
.admin-card-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.admin-card-head a { color: var(--green); font-size: 12px; font-weight: 750; white-space: nowrap; }
.admin-meta { margin-top: 3px; color: var(--muted); font-size: 11px; }
.admin-card p { margin: 13px 0; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions button { border: 0; border-radius: 999px; padding: 8px 11px; font-weight: 800; font-size: 12px; }
.admin-actions .approve { color: #fff; background: var(--green); }
.admin-actions .reject { color: #fff; background: var(--red); }
.admin-actions .pending-btn { color: var(--ink); background: #ebeee7; }
code { padding: 2px 5px; border-radius: 6px; background: #edf0ea; }
.info-block { margin: 22px 0; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.info-block h2 { font-family: inherit; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.info-block p, .info-block li { color: #4f5c51; }

@media (max-width: 900px) {
  .topnav a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 42px; }
  .hero-visual { min-height: 390px; }
  .logo-card { width: min(330px, 76vw); }
  .float-problem { right: 0; }
  .float-idea { left: 0; }
  .section-heading { align-items: start; flex-direction: column; }
  .map-toolbar { flex-wrap: wrap; }
  .map-instruction { order: -1; width: 100%; margin: 0; padding: 0 0 5px; }
  .map-mode { flex: 1 1 210px; }
  .steps { grid-template-columns: 1fr; }
  .steps article { min-height: auto; }
  .trust { margin-inline: 24px; grid-template-columns: 1fr; gap: 28px; padding: 34px; }
  .closing-cta { margin-inline: 24px; grid-template-columns: 64px 1fr; }
  .closing-cta img { width: 64px; height: 64px; }
  .closing-cta .button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 620px) {
  .topbar { min-height: 74px; padding-inline: 16px; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 10px; }
  .topnav .nav-cta { font-size: 11px; padding: 9px 12px; }
  .hero { min-height: auto; padding: 46px 18px 62px; }
  h1 { font-size: clamp(44px, 13vw, 61px); }
  .hero-lead { font-size: 17px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 340px; }
  .hero-visual::before { width: 310px; height: 310px; }
  .hero-visual::after { width: 265px; height: 265px; }
  .float-card { min-width: 160px; padding: 10px 12px; }
  .float-problem { top: 22px; right: -4px; }
  .float-idea { bottom: 25px; left: -4px; }
  .map-section, .how { padding-inline: 16px; }
  .map-section { padding-top: 68px; }
  #map { min-height: 470px; height: 66vh; }
  .map-tip { bottom: 14px; font-size: 11px; white-space: normal; text-align: center; }
  .status-row { align-items: start; flex-direction: column; gap: 3px; }
  .trust { margin: 10px 16px 66px; padding: 27px 22px; border-radius: 26px; }
  .closing-cta { margin: 0 16px 65px; padding: 21px; grid-template-columns: 54px 1fr; gap: 13px; }
  .closing-cta img { width: 54px; height: 54px; }
  .closing-cta .eyebrow { font-size: 9px; }
  footer { padding-inline: 16px; align-items: start; flex-direction: column; }
  .footer-links { justify-content: start; }
  #submissionForm { padding: 24px 18px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dialog-actions .button { width: 100%; padding-inline: 12px; }
  .admin-toolbar { grid-template-columns: 1fr; }
  .admin-card-head { flex-direction: column; }
}