:root {
      --cmz-bg: #eef4f1;
      --cmz-bg-soft: #f7fbf9;
      --cmz-panel: rgba(255, 255, 255, 0.92);
      --cmz-card: rgba(255, 255, 255, 0.97);
      --cmz-text: #0b4f4a;
      --cmz-muted: #456a66;
      --cmz-green: #8cc63f;
      --cmz-green-dark: #6fb62f;
      --cmz-teal: #0b4f4a;
      --cmz-teal-2: #14655f;
      --cmz-line: rgba(11, 79, 74, 0.10);
      --cmz-shadow: 0 18px 45px rgba(11, 79, 74, 0.12);
      --cmz-shadow-hover: 0 22px 50px rgba(11, 79, 74, 0.16);
      --cmz-radius-xl: 28px;
      --cmz-radius-pill: 999px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(140,198,63,0.10), transparent 30%),
        linear-gradient(180deg, #f6fbf9 0%, #edf5f2 100%);
      color: var(--cmz-text);
      min-height: 100%;
    }

    .page {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 460px;
      min-height: 100vh;
    }

    .map-demo {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(140deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08)),
        linear-gradient(120deg, #dbe9e5 0%, #edf5f2 34%, #dfece7 100%);
      border-right: 1px solid rgba(11,79,74,0.08);
    }

    .map-demo::before,
    .map-demo::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .map-demo::before {
      background:
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.22) 24.4%, transparent 24.8%),
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.18) 24.4%, transparent 24.8%),
        linear-gradient(45deg, rgba(11,79,74,0.04), rgba(11,79,74,0.01));
      background-size: 180px 180px, 180px 180px, auto;
      opacity: 0.9;
    }

    .map-demo::after {
      background:
        radial-gradient(circle at 20% 30%, rgba(140,198,63,0.14), transparent 18%),
        radial-gradient(circle at 65% 55%, rgba(11,79,74,0.08), transparent 16%),
        radial-gradient(circle at 80% 22%, rgba(140,198,63,0.12), transparent 14%);
    }

    .map-center {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
    }

    .map-badge {
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(11,79,74,0.08);
      border-radius: 28px;
      padding: 24px 28px;
      box-shadow: var(--cmz-shadow);
      text-align: center;
      max-width: 430px;
    }

    .map-badge h2 {
      margin: 0 0 8px;
      font-size: 28px;
      line-height: 1.1;
    }

    .map-badge p {
      margin: 0;
      color: var(--cmz-muted);
      line-height: 1.6;
      font-size: 15px;
    }

    .pin {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(180deg, #b8da6d, #8cc63f);
      box-shadow: 0 0 0 8px rgba(140,198,63,0.16), 0 8px 25px rgba(11,79,74,0.16);
    }

    .pin::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }

    .pin.p1 { top: 18%; left: 24%; }
    .pin.p2 { top: 35%; left: 72%; }
    .pin.p3 { top: 58%; left: 36%; }
    .pin.p4 { top: 72%; left: 64%; }
    .pin.p5 { top: 26%; left: 54%; }

    .cmz-tools-panel {
      position: relative;
      padding: 18px;
      overflow-y: auto;
      background:
        radial-gradient(circle at top right, rgba(140,198,63,0.18), transparent 32%),
        linear-gradient(180deg, rgba(247,251,249,0.96), rgba(235,245,241,0.98));
    }

    .cmz-tools-panel::-webkit-scrollbar { width: 10px; }
    .cmz-tools-panel::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(11,79,74,0.25);
    }

   .cmz-shell {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.2vw, 32px) 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

    .cmz-hero {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 24px;
      border-radius: var(--cmz-radius-xl);
      background: var(--cmz-panel);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.65);
      box-shadow: var(--cmz-shadow);
    }

    .cmz-hero,
.cmz-tools-grid {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
    .cmz-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      padding: 7px 12px;
      border-radius: var(--cmz-radius-pill);
      background: rgba(140,198,63,0.14);
      color: var(--cmz-teal);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .cmz-title {
      margin: 0;
      font-size: 34px;
      line-height: 1.04;
      letter-spacing: -0.03em;
      font-weight: 800;
    }

    .cmz-gradient {
      background: linear-gradient(135deg, #0b4f4a, #8cc63f);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .cmz-description {
      margin: 14px 0 0;
      font-size: 15px;
      line-height: 1.7;
      color: var(--cmz-muted);
    }

    .cmz-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .cmz-main-link,
    .cmz-soft-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 12px 18px;
      border-radius: var(--cmz-radius-pill);
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
    }

    .cmz-main-link {
      color: #fff;
      background: linear-gradient(135deg, #0b4f4a, #14655f);
      box-shadow: 0 12px 24px rgba(11,79,74,0.24);
    }

    .cmz-main-link:hover,
    .cmz-soft-link:hover,
    .cmz-btn-primary:hover { transform: translateY(-2px); }

    .cmz-soft-link {
      color: var(--cmz-text);
      background: rgba(255,255,255,0.8);
      border: 1px solid var(--cmz-line);
    }

    .cmz-tools-grid {
      display: grid;
      gap: 18px;
    }

    .cmz-tool-card {
      position: relative;
      overflow: hidden;
      background: var(--cmz-card);
      border-radius: var(--cmz-radius-xl);
      border: 1px solid rgba(255,255,255,0.72);
      padding: 20px;
      box-shadow: var(--cmz-shadow);
      backdrop-filter: blur(10px);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .cmz-tool-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #0b4f4a, #8cc63f);
    }

    .cmz-tool-card::after {
      content: "";
      position: absolute;
      inset: auto -40px -40px auto;
      width: 100%;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(140,198,63,0.16), transparent 62%);
      pointer-events: none;
    }

    .cmz-tool-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--cmz-shadow-hover);
      border-color: rgba(140,198,63,0.38);
    }

    .cmz-tool-top {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .cmz-icon {
      width: 54px;
      height: 54px;
      min-width: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,245,241,0.98));
      border: 1px solid rgba(11,79,74,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 20px rgba(11,79,74,0.06);
    }

    .cmz-icon svg {
      width: 28px;
      height: 28px;
      stroke: #0b4f4a;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cmz-tool-title {
      margin: 2px 0 0;
      font-size: 20px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .cmz-tag {
      display: inline-block;
      margin-top: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--cmz-teal);
      background: rgba(140,198,63,0.14);
    }

    .cmz-tool-text {
      margin: 14px 0 0;
      font-size: 14px;
      line-height: 1.72;
      color: var(--cmz-muted);
    }

    .cmz-tool-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
    }

    .cmz-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 16px;
      border-radius: var(--cmz-radius-pill);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .cmz-btn-primary {
      background: linear-gradient(135deg, #8cc63f, #6fb62f);
      color: #083d39;
      box-shadow: 0 10px 20px rgba(140,198,63,0.24);
    }

    .cmz-btn-secondary {
      color: var(--cmz-text);
      background: rgba(255,255,255,0.8);
      border: 1px solid var(--cmz-line);
    }

    .cmz-btn-secondary:hover {
      opacity: 0.92;
      transform: translateY(-2px);
    }

    .cmz-arrow { font-size: 15px; line-height: 1; }

    @media (max-width: 1120px) {
      .page { grid-template-columns: 1fr; }
      .map-demo {
        min-height: 320px;
        border-right: none;
        border-bottom: 1px solid rgba(11,79,74,0.08);
      }
      .cmz-hero { position: relative; }
    }

    @media (max-width: 640px) {
      .cmz-tools-panel { padding: 14px; }
      .cmz-hero { padding: 20px; }
      .cmz-title { font-size: 28px; }
      .cmz-tool-card { padding: 18px; }
      .cmz-tool-top { gap: 12px; }
      .cmz-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 16px;
      }
      .cmz-shell {
          padding: 0 14px 20px;
        }

        .cmz-hero,
        .cmz-tools-grid {
          max-width: 100%;
        }
    }
    .cmz-btn{
      cursor: pointer;
    }

    .cmz-contact-form {
  background: #f8fffe;
  border: 1.5px solid #d4edda;
  border-radius: 14px;
  padding: 1.25rem;
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cmz-contact-form__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #d4edda;
}

.cmz-contact-form__icon {
  font-size: 1.5rem;
  background: #e8f5e9;
  padding: 0.4rem;
  border-radius: 8px;
  line-height: 1;
}

.cmz-contact-form__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
  margin: 0;
}

.cmz-contact-form__subtitle {
  font-size: 0.78rem;
  color: #6c757d;
  margin: 0;
}

.cmz-field {
  margin-bottom: 0.85rem;
}

.cmz-field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.35rem;
}

.cmz-field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cmz-field__icon {
  position: absolute;
  left: 0.75rem;
  color: #aaa;
  display: flex;
  align-items: center;
}

.cmz-field__input {
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  color: #1a1a1a;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.cmz-field__input:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}

.cmz-field__textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  color: #1a1a1a;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.cmz-field__textarea:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}

.cmz-contact-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cmz-btn-send {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cmz-success-message {
  text-align: center;
  padding: 1.5rem 1rem;
  animation: slideDown 0.3s ease;
}

.cmz-success-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.cmz-success-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
}

.cmz-success-text {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0 0 1rem;
}