/* ========== ПАЛИТРА / БАЗА ========== */
    :root{
      --green-dark: #1f5d1f;
      --green: #339933;
      --green-light: #66cc33;
      --accent: #ff6600;
      --bg: #66cc33;
      --text: #173c0e;
      --card-bg: rgba(150,255,150,0.78);
      --card-bg-2: rgba(120,235,130,0.72);
    }
    html,body{height:100%; margin:0; padding:0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing:antialiased;}
    body { background-color: var(--bg); color: var(--text); }

    /* ========== КОНТЕЙНЕР ========== */
    main{
      max-width: 960px;
      margin: 36px auto;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 20px;
    }
    main h1{
      font-size: 34px;
      margin: 0 0 26px 0;
      color: #13300a;
      text-align:center;
      text-shadow: 1px 1px 2px rgba(255,255,255,0.35);
    }

    /* ========== ШАХМАТНЫЕ БАННЕРЫ ========== */
    .banner-row {
      display:flex;
      gap:18px;
      align-items:stretch;
      margin-bottom:20px;
      box-sizing:border-box;
    }

    /* зеркалируем порядок для чётных рядов */
    .banner-row:nth-child(even){ flex-direction: row-reverse; }

    .banner {
      flex:1 1 100%;
      padding:26px;
      border-radius:18px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.14);
      display:flex;
      gap:20px;
      align-items:center;
      transition: transform .22s ease, box-shadow .22s ease;
      overflow:hidden;
    }
    /* чередующиеся фоны для шахматного эффекта */
    .banner:nth-child(odd) { background: var(--card-bg); }
    .banner:nth-child(even) { background: var(--card-bg-2); }

    .banner:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.18); }

    /* декоративный акцент в виде круга слева/справа */
    .banner-accent {
      flex: 0 0 84px;
      height:84px;
      border-radius:50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      color: var(--green-dark);
      font-size:36px;
      box-shadow: inset 0 -6px 14px rgba(0,0,0,0.04);
    }
    /* меняем порядок акцента для чётных (тк row-reverse уже меняет порядок, не нужно) */

    .banner-body {
      flex:1;
      font-size:18px;
      line-height:1.45;
      color: var(--text);
    }

    .banner .title { font-weight:800; font-size:20px; color:#0f2e08; margin-bottom:6px; }
    .banner .highlight { font-weight:900; color:#072706; letter-spacing:0.6px; }
    .banner .muted { color:#17421a; opacity:0.9; }

    /* ========== CTA блок ========== */
    .order-info {
      background: rgba(150,255,150,0.85);
      padding:20px 22px;
      border-radius:18px;
      box-shadow:0 10px 30px rgba(0,0,0,0.14);
      color:#0b2706;
      font-weight:700;
      font-size:20px;
      text-align:center;
      max-width:760px;
      margin: 14px auto 18px;
      user-select:none;
    }
    .order-info a.ringing-phone { text-decoration:none; color:inherit; margin-right:8px; font-size:26px; vertical-align:middle; }

    .order-btn-wrap { text-align:center; margin-bottom:30px; }
    .order-a-service{
      display:inline-block;
      padding:14px 26px;
      border-radius:28px;
      background: linear-gradient(180deg,var(--green-light),var(--green));
      color:#fff;
      border:0;
      font-size:17px;
      font-weight:800;
      cursor:pointer;
      box-shadow: 0 14px 34px rgba(51,153,51,0.16);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .order-a-service:hover{ transform: translateY(-3px); box-shadow:0 18px 44px rgba(51,153,51,0.20); }
    .order-a-service:focus{ outline:3px solid rgba(51,153,51,0.14); outline-offset:3px; }

    /* ========== POPUP выбор номера ========== */
    .popup-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.46); z-index:1400; align-items:center; justify-content:center; padding:18px; box-sizing:border-box; }
    .popup-overlay.open{ display:flex; }
    .popup-box{ width:min(520px,96vw); background:#fff; border-radius:12px; padding:18px 20px; box-shadow:0 18px 48px rgba(0,0,0,0.28); color:var(--text); }
    .popup-close{ float:right; font-size:22px; cursor:pointer; border:none; background:transparent; color:#333; }
    .popup-list{ list-style:none; padding-left:0; margin:12px 0 0 0; }
    .popup-list li{ margin:10px 0; font-size:17px; }
    .popup-list a{ text-decoration:none; color:#0b3b06; font-weight:700; }

    /* ========== RESPONSIVE ========== */
    @media (max-width:820px){
      .banner-row { flex-direction:column; }
      .banner { flex-direction:row; padding:18px; gap:12px; }
      .banner-accent { display:none; } /* экономим место */
      main { padding:14px; margin:18px auto; }
      main h1 { font-size:28px; margin-bottom:18px; }
    }