From 56ecf751fd7ac799a2da7c410e2fb657cc1138d9 Mon Sep 17 00:00:00 2001
From: "Anton.AE" <ab.an.ev@yandex.ru>
Date: Sat, 18 Apr 2026 19:05:33 +0300
Subject: [PATCH] refactor

---
 .../assets/css/test1-landing.css              | 1653 +++++++++++++++++
 .../assets/js/test1-landing.js                |  343 ++++
 .../themes/twentytwentyfour/functions.php     |   16 +-
 .../themes/twentytwentyfour/page-test1.php    |   12 +-
 .../template-parts/test1-landing-static.php   |  764 ++++++++
 5 files changed, 2777 insertions(+), 11 deletions(-)
 create mode 100644 wp-content/themes/twentytwentyfour/assets/css/test1-landing.css
 create mode 100644 wp-content/themes/twentytwentyfour/assets/js/test1-landing.js
 create mode 100644 wp-content/themes/twentytwentyfour/template-parts/test1-landing-static.php

diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css b/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css
new file mode 100644
index 00000000..ed888288
--- /dev/null
+++ b/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css
@@ -0,0 +1,1653 @@
+:root {
+      --bg: #f4f8ff;
+      --surface: rgba(255, 255, 255, 0.76);
+      --surface-solid: #ffffff;
+      --surface-dark: #0a2b6d;
+      --text: #123059;
+      --muted: #5f7496;
+      --line: rgba(18, 48, 89, 0.12);
+      --primary: #0d4fd6;
+      --primary-strong: #08338d;
+      --accent: #3cc8ff;
+      --accent-soft: #dbf6ff;
+      --success: #19a76f;
+      --warning: #ffd166;
+      --shadow: 0 30px 80px rgba(10, 43, 109, 0.16);
+      --radius-xl: 32px;
+      --radius-lg: 24px;
+      --radius-md: 18px;
+      --radius-sm: 14px;
+      --container: 1180px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      scroll-behavior: smooth;
+    }
+
+    body {
+      margin: 0;
+      font-family: "Manrope", sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(60, 200, 255, 0.16), transparent 32%),
+        radial-gradient(circle at 85% 15%, rgba(13, 79, 214, 0.18), transparent 22%),
+        linear-gradient(180deg, #eef6ff 0%, #f9fcff 48%, #eef5ff 100%);
+      min-width: 320px;
+    }
+
+    body.menu-open,
+    body.modal-open {
+      overflow: hidden;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-image:
+        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+      background-size: 24px 24px;
+      opacity: 0.45;
+      mix-blend-mode: soft-light;
+    }
+
+    img {
+      max-width: 100%;
+      display: block;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    a:focus-visible,
+    button:focus-visible,
+    input:focus-visible,
+    textarea:focus-visible,
+    select:focus-visible {
+      outline: 3px solid rgba(13, 79, 214, 0.44);
+      outline-offset: 3px;
+    }
+
+    button,
+    input,
+    textarea,
+    select {
+      font: inherit;
+    }
+
+    button {
+      cursor: pointer;
+      border: 0;
+      background: none;
+      color: inherit;
+    }
+
+    .container {
+      width: min(var(--container), calc(100% - 32px));
+      margin: 0 auto;
+    }
+
+    .section {
+      padding: 32px 0 0;
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 14px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.65);
+      border: 1px solid rgba(255, 255, 255, 0.75);
+      box-shadow: 0 10px 30px rgba(13, 79, 214, 0.08);
+      font-size: 13px;
+      margin-bottom: 15px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--primary-strong);
+    }
+
+    .eyebrow::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--primary));
+      box-shadow: 0 0 0 6px rgba(60, 200, 255, 0.16);
+    }
+
+    .section-head {
+      display: flex;
+      align-items: end;
+      justify-content: space-between;
+      gap: 24px;
+      margin-bottom: 28px;
+    }
+
+    .section-title {
+      margin: 14px 0 0;
+      font-family: "Manrope", sans-serif;
+      font-size: clamp(30px, 4.6vw, 56px);
+      line-height: 1.02;
+      letter-spacing: -0.03em;
+    }
+
+    .section-copy {
+      max-width: 560px;
+      color: var(--muted);
+      line-height: 1.7;
+    }
+
+    .site-header {
+      position: sticky;
+      top: 0;
+      z-index: 30;
+      backdrop-filter: blur(20px);
+      background: rgba(244, 248, 255, 0.74);
+      border-bottom: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .header-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+      min-height: 82px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      font-weight: 800;
+    }
+
+    .brand-mark {
+      width: 48px;
+      height: 48px;
+      display: grid;
+      place-items: center;
+      border-radius: 18px;
+      background: #fff;
+      color: #fff;
+      box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24);
+    }
+
+    .brand-text strong {
+      display: block;
+      font-size: 16px;
+    }
+
+    .brand-text span {
+      font-size: 12px;
+      color: var(--muted);
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      gap: 22px;
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--muted);
+    }
+
+    .nav a:hover,
+    .nav a:focus-visible {
+      color: var(--primary-strong);
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .cart-button,
+    .header-phone,
+    .button,
+    .ghost-button,
+    .mobile-toggle,
+    .chip,
+    .toggle-button,
+    .mini-button {
+      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
+    }
+
+    .header-phone {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px 18px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px solid rgba(18, 48, 89, 0.1);
+      font-weight: 800;
+      box-shadow: 0 10px 30px rgba(10, 43, 109, 0.08);
+    }
+
+    .cart-button {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px 16px;
+      border-radius: 999px;
+      color: #fff;
+      background: linear-gradient(135deg, var(--primary-strong), var(--primary));
+      box-shadow: 0 16px 30px rgba(13, 79, 214, 0.25);
+      font-weight: 800;
+    }
+
+    .cart-count {
+      min-width: 22px;
+      height: 22px;
+      display: inline-grid;
+      place-items: center;
+      border-radius: 999px;
+      background: #fff;
+      color: var(--primary-strong);
+      font-size: 12px;
+    }
+
+    .mobile-toggle {
+      display: none;
+      width: 46px;
+      height: 46px;
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.84);
+      border: 1px solid rgba(18, 48, 89, 0.1);
+      box-shadow: 0 10px 30px rgba(10, 43, 109, 0.08);
+    }
+
+    .mobile-panel {
+      display: none;
+      padding: 0 0 18px;
+    }
+
+    .mobile-card {
+      display: grid;
+      gap: 14px;
+      padding: 18px;
+      border-radius: 24px;
+      background: rgba(255, 255, 255, 0.88);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+      box-shadow: var(--shadow);
+    }
+
+    .mobile-nav {
+      display: grid;
+      gap: 10px;
+    }
+
+    .mobile-nav a,
+    .mobile-card .header-phone,
+    .mobile-card .cart-button {
+      justify-content: center;
+    }
+
+    .hero {
+      position: relative;
+      padding: 34px 0 0;
+      overflow: hidden;
+    }
+
+    .hero-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
+      gap: 28px;
+      align-items: stretch;
+    }
+
+    .hero-copy,
+    .hero-panel,
+    .catalog-card,
+    .glass-card,
+    .step-card,
+    .segment-card,
+    .promo-card,
+    .review-card,
+    .contact-card,
+    .faq-item,
+    .footer-card {
+      border-radius: var(--radius-xl);
+      background: var(--surface);
+      border: 1px solid rgba(255, 255, 255, 0.72);
+      backdrop-filter: blur(22px);
+      box-shadow: var(--shadow);
+    }
+
+    .hero-copy {
+      position: relative;
+      padding: clamp(28px, 4vw, 46px);
+      overflow: hidden;
+      isolation: isolate;
+    }
+
+    .hero-copy::before {
+      content: "";
+      position: absolute;
+      inset: auto auto -24% -10%;
+      width: 64%;
+      height: 54%;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(60, 200, 255, 0.22), transparent 62%);
+      z-index: -1;
+    }
+
+    .hero-copy::after {
+      content: "";
+      position: absolute;
+      top: -18%;
+      right: -8%;
+      width: 280px;
+      height: 280px;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(13, 79, 214, 0.16), transparent 58%);
+      z-index: -1;
+    }
+
+    .hero-title {
+      margin: 18px 0 18px;
+      font-family: "Manrope", sans-serif;
+      font-size: clamp(38px, 7vw, 62px);
+      line-height: 0.98;
+      letter-spacing: -0.05em;
+    }
+
+    .hero-title span {
+      color: var(--primary);
+    }
+
+    .hero-text {
+      max-width: 640px;
+      color: var(--muted);
+      font-size: clamp(16px, 2vw, 18px);
+      line-height: 1.72;
+    }
+
+    .hero-toggle {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin: 28px 0 18px;
+      padding: 8px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .toggle-button {
+      padding: 14px 18px;
+      border-radius: 999px;
+      font-weight: 800;
+      color: var(--muted);
+    }
+
+    .toggle-button.active {
+      background: linear-gradient(135deg, var(--primary-strong), var(--primary));
+      color: #fff;
+      box-shadow: 0 16px 30px rgba(13, 79, 214, 0.22);
+    }
+
+    .hero-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 14px;
+      margin-top: 22px;
+    }
+
+    .button,
+    .ghost-button,
+    .mini-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      border-radius: 999px;
+      font-weight: 800;
+    }
+
+    .button {
+      padding: 16px 22px;
+      color: #fff;
+      background: linear-gradient(135deg, var(--primary-strong), var(--primary));
+      box-shadow: 0 18px 34px rgba(13, 79, 214, 0.26);
+    }
+
+    .ghost-button {
+      padding: 16px 22px;
+      background: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(18, 48, 89, 0.1);
+      color: var(--primary-strong);
+    }
+
+    .mini-button {
+      padding: 13px 18px;
+      background: linear-gradient(135deg, var(--primary), #2d78ff);
+      color: #fff;
+      box-shadow: 0 14px 28px rgba(13, 79, 214, 0.22);
+    }
+
+    .button:hover,
+    .ghost-button:hover,
+    .mini-button:hover,
+    .cart-button:hover,
+    .header-phone:hover,
+    .chip:hover,
+    .mobile-toggle:hover {
+      transform: translateY(-2px);
+    }
+
+    .button:focus-visible,
+    .ghost-button:focus-visible,
+    .mini-button:focus-visible,
+    .cart-button:focus-visible,
+    .mobile-toggle:focus-visible,
+    .faq-question:focus-visible,
+    .close-button:focus-visible,
+    .header-phone:focus-visible,
+    .mobile-nav a:focus-visible,
+    .footer-links a:focus-visible,
+    .footer-legal a:focus-visible {
+      box-shadow: 0 0 0 4px rgba(13, 79, 214, 0.18);
+    }
+
+    .hero-stats {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: 30px;
+    }
+
+    .stat-card {
+      padding: 16px;
+      border-radius: 22px;
+      background: rgba(255, 255, 255, 0.74);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .stat-card strong {
+      display: block;
+      font-size: 24px;
+      color: var(--primary-strong);
+    }
+
+    .stat-card span {
+      display: block;
+      margin-top: 4px;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .hero-panel {
+      display: grid;
+      gap: 18px;
+      padding: 22px;
+      background: linear-gradient(180deg, rgba(9, 54, 145, 0.94), rgba(10, 43, 109, 0.97));
+      color: #fff;
+      overflow: hidden;
+    }
+
+    .panel-top {
+      display: flex;
+      justify-content: space-between;
+      gap: 18px;
+      align-items: start;
+    }
+
+    .signal-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.12);
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .signal-pill::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #6ff7ca;
+      box-shadow: 0 0 0 6px rgba(111, 247, 202, 0.14);
+    }
+
+    .hero-panel h2 {
+      margin: 14px 0 10px;
+      font-family: "Manrope", sans-serif;
+      font-size: clamp(28px, 4.2vw, 42px);
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+    }
+    h2 {
+      margin: 14px 0 10px;
+      font-family: "Manrope", sans-serif;
+      font-size: clamp(28px, 4.2vw, 42px);
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+    }
+    .hero-panel p {
+      margin: 0;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 1.72;
+    }
+
+    .route-map {
+      position: relative;
+      min-height: 280px;
+      padding: 18px;
+      border-radius: 28px;
+      background:
+        radial-gradient(circle at 20% 20%, rgba(60, 200, 255, 0.28), transparent 22%),
+        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.18), transparent 20%),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      overflow: hidden;
+    }
+
+    .route-map::before,
+    .route-map::after {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border-radius: 22px;
+      border: 1px dashed rgba(255, 255, 255, 0.14);
+    }
+
+    .route-map::after {
+      inset: 44px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.08);
+    }
+
+    .map-line {
+      position: absolute;
+      inset: auto 24px 50px 24px;
+      height: 160px;
+      border-radius: 120px;
+      border: 2px solid rgba(111, 247, 202, 0.45);
+      border-color: rgba(111, 247, 202, 0.45) transparent transparent transparent;
+      transform: rotate(-8deg);
+    }
+
+    .map-chip,
+    .delivery-chip {
+      position: absolute;
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.12);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(12px);
+      font-size: 13px;
+      font-weight: 800;
+      box-shadow: 0 12px 20px rgba(4, 18, 51, 0.2);
+    }
+
+    .map-chip.one { top: 32px; left: 24px; }
+    .map-chip.two { top: 112px; right: 34px; }
+    .map-chip.three { bottom: 34px; left: 78px; }
+    .delivery-chip { bottom: 28px; right: 24px; color: #062764; background: rgba(111, 247, 202, 0.88); }
+
+    .hero-notes {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .hero-note {
+      padding: 16px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .hero-note strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 15px;
+    }
+
+    .hero-note span {
+      color: rgba(255, 255, 255, 0.74);
+      font-size: 14px;
+      line-height: 1.6;
+    }
+
+    .ticker {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: 22px;
+    }
+
+    .ticker-item {
+      padding: 16px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+      text-align: center;
+    }
+
+    .ticker-item strong {
+      display: block;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--primary-strong);
+      margin-bottom: 8px;
+    }
+
+    .ticker-item span {
+      color: var(--muted);
+      font-weight: 700;
+      font-size: 14px;
+    }
+
+    .catalog-grid,
+    .delivery-grid,
+    .steps-grid,
+    .segments-grid,
+    .promo-grid,
+    .reviews-grid,
+    .contacts-grid,
+    .footer-grid {
+      display: grid;
+      gap: 18px;
+    }
+
+    .catalog-grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .catalog-card {
+      padding: 22px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
+      min-height: 100%;
+    }
+
+    .catalog-icon {
+      width: 62px;
+      height: 62px;
+      display: grid;
+      place-items: center;
+      border-radius: 22px;
+      background: linear-gradient(135deg, rgba(60, 200, 255, 0.2), rgba(13, 79, 214, 0.12));
+      color: var(--primary-strong);
+    }
+
+    .catalog-card h3,
+    .segment-card h3,
+    .promo-card h3,
+    .contact-card h3,
+    .glass-card h3 {
+      margin: 0;
+      font-size: 22px;
+      line-height: 1.2;
+    }
+
+    .catalog-card p,
+    .segment-card p,
+    .promo-card p,
+    .contact-card p,
+    .glass-card p,
+    .review-card p,
+    .faq-answer,
+    .about-copy p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.7;
+    }
+
+    .tag-row,
+    .chip-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+.chip {
+      padding: 10px 14px;
+      border-radius: 999px;
+      border: 1px solid rgba(18, 48, 89, 0.08);
+      background: rgba(255, 255, 255, 0.7);
+      font-size: 13px;
+      font-weight: 800;
+      color: var(--primary-strong);
+    }
+
+    .chip-row-spaced {
+      margin: 18px 0 20px;
+    }
+
+    .card-price {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      margin-top: auto;
+    }
+
+    .card-price strong {
+      font-size: 32px;
+      color: var(--primary-strong);
+      line-height: 1;
+    }
+
+    .card-price span {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .featured-grid,
+    .about-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+      gap: 18px;
+    }
+
+    .glass-card {
+      padding: 28px;
+    }
+
+    .product-table {
+      display: grid;
+      gap: 14px;
+      margin-top: 18px;
+    }
+
+    .product-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      gap: 14px;
+      align-items: center;
+      padding: 18px;
+      border-radius: 22px;
+      background: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .product-row strong {
+      display: block;
+      margin-bottom: 4px;
+      font-size: 18px;
+    }
+
+    .product-row span {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .product-row .price {
+      font-size: 30px;
+      font-weight: 800;
+      color: var(--primary-strong);
+      white-space: nowrap;
+    }
+
+    .delivery-grid,
+    .segments-grid,
+    .contacts-grid,
+    .footer-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .delivery-map,
+    .about-visual,
+    .map-placeholder {
+      position: relative;
+      min-height: 100%;
+      overflow: hidden;
+    }
+
+    .delivery-map {
+      padding: 28px;
+      background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92));
+      color: #fff;
+    }
+
+    .zone-card {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.12);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .zones {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 18px;
+    }
+
+    .delivery-highlights {
+      display: grid;
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .delivery-highlight-card {
+      padding: 16px;
+      border-radius: 18px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+    }
+
+    .delivery-highlight-card strong {
+      display: block;
+      font-size: 16px;
+      line-height: 1.25;
+    }
+
+    .delivery-highlight-card span {
+      display: block;
+      margin-top: 6px;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 1.55;
+      font-size: 14px;
+    }
+
+    .delivery-cta {
+      width: 100%;
+      margin-top: 6px;
+    }
+
+    .delivery-wave {
+      position: absolute;
+      width: 180%;
+      height: 180px;
+      left: -30%;
+      bottom: 40px;
+      border-radius: 50%;
+      border: 2px solid rgba(111, 247, 202, 0.3);
+      border-color: rgba(111, 247, 202, 0.3) transparent transparent transparent;
+    }
+
+    .delivery-pins {
+      position: relative;
+      min-height: 300px;
+      margin-top: 20px;
+      border-radius: 24px;
+      background: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      overflow: hidden;
+    }
+
+.delivery-pins::before {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border-radius: 20px;
+      border: 1px dashed rgba(255, 255, 255, 0.18);
+    }
+
+    .eyebrow-inverse {
+      background: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.16);
+      color: #fff;
+    }
+
+    .section-heading-compact {
+      margin: 16px 0 0;
+      line-height: 1.1;
+    }
+
+    .section-heading-delivery {
+      font-size: 30px;
+    }
+
+    .section-heading-map {
+      font-size: 28px;
+      max-width: 12ch;
+    }
+
+    .pin {
+      position: absolute;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.14);
+      font-size: 13px;
+      font-weight: 800;
+      backdrop-filter: blur(10px);
+    }
+
+    .pin::before {
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #6ff7ca;
+    }
+
+    .pin.one { top: 36px; left: 28px; }
+    .pin.two { top: 96px; right: 22px; }
+    .pin.three { bottom: 84px; left: 54px; }
+    .pin.four { bottom: 24px; right: 54px; }
+
+    .steps-grid,
+    .promo-grid,
+    .reviews-grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .step-card,
+    .promo-card,
+    .review-card {
+      padding: 24px;
+    }
+
+    .step-number {
+      width: 52px;
+      height: 52px;
+      display: grid;
+      place-items: center;
+      margin-bottom: 18px;
+      border-radius: 18px;
+      background: linear-gradient(135deg, rgba(60, 200, 255, 0.26), rgba(13, 79, 214, 0.18));
+      color: var(--primary-strong);
+      font-weight: 800;
+      font-size: 20px;
+    }
+
+    .segment-card,
+    .contact-card,
+    .footer-card {
+      padding: 28px;
+    }
+
+    .segment-card.featured {
+      background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92));
+      color: #fff;
+    }
+
+    .segment-card.featured p,
+    .segment-card.featured li,
+    .segment-card.featured .segment-meta {
+      color: rgba(255, 255, 255, 0.82);
+    }
+
+    .segment-list,
+    .contact-list,
+    .footer-links,
+    .footer-legal {
+      display: grid;
+      gap: 12px;
+      margin: 18px 0 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .segment-meta {
+      font-size: 14px;
+      color: var(--muted);
+    }
+
+    .promo-card.highlight {
+      background: linear-gradient(135deg, rgba(255, 209, 102, 0.34), rgba(255, 255, 255, 0.9));
+    }
+
+    .faq-list {
+      display: grid;
+      gap: 12px;
+    }
+
+    .faq-item {
+      padding: 10px;
+    }
+
+    .faq-question {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      padding: 16px 18px;
+      text-align: left;
+      border-radius: 20px;
+      font-weight: 800;
+    }
+
+    .faq-question span:last-child {
+      width: 34px;
+      height: 34px;
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
+      background: rgba(13, 79, 214, 0.08);
+      color: var(--primary-strong);
+      flex-shrink: 0;
+    }
+
+    .faq-item.open .faq-question span:last-child {
+      background: rgba(13, 79, 214, 0.14);
+      transform: rotate(45deg);
+    }
+
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      padding: 0 18px;
+      transition: max-height 0.28s ease, padding 0.28s ease;
+    }
+
+    .faq-item.open .faq-answer {
+      max-height: 180px;
+      padding: 0 18px 16px;
+    }
+
+.about-visual {
+      min-height: 420px;
+      padding: 28px;
+      background: linear-gradient(180deg, rgba(219, 246, 255, 0.74), rgba(255, 255, 255, 0.9));
+    }
+
+    .about-copy-secondary {
+      margin-top: 16px;
+    }
+
+    .quality-stack {
+      position: absolute;
+      inset: auto 28px 28px 28px;
+      display: grid;
+      gap: 12px;
+    }
+
+    .quality-card {
+      padding: 16px 18px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.82);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+      box-shadow: 0 16px 28px rgba(10, 43, 109, 0.12);
+    }
+
+    .droplet {
+      position: absolute;
+      top: 38px;
+      right: 38px;
+      width: 180px;
+      aspect-ratio: 0.84;
+      border-radius: 60% 60% 70% 70% / 80% 80% 40% 40%;
+      background: linear-gradient(180deg, rgba(60, 200, 255, 0.52), rgba(13, 79, 214, 0.3));
+      transform: rotate(18deg);
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 30px 50px rgba(13, 79, 214, 0.16);
+    }
+
+    .droplet::before {
+      content: "";
+      position: absolute;
+      inset: 18px 40px 44px 30px;
+      border-radius: 60% 60% 70% 70% / 80% 80% 40% 40%;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent);
+      opacity: 0.58;
+    }
+
+    .review-card strong {
+      display: block;
+      margin-bottom: 10px;
+      font-size: 18px;
+    }
+
+.review-meta {
+      margin-top: 16px;
+      font-size: 14px;
+      color: var(--muted);
+      font-weight: 700;
+    }
+
+    .hero-actions-spaced {
+      margin-top: 22px;
+    }
+
+    .map-placeholder {
+      min-height: 320px;
+      padding: 24px;
+      border-radius: var(--radius-xl);
+      background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92));
+      color: #fff;
+      box-shadow: var(--shadow);
+      display: grid;
+      gap: 14px;
+    }
+
+    .map-copy {
+      max-width: 56ch;
+      color: rgba(255, 255, 255, 0.78);
+      line-height: 1.7;
+    }
+
+    .contact-fast-facts {
+      display: grid;
+      gap: 10px;
+    }
+
+    .contact-fact-card {
+      padding: 14px;
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+    }
+
+    .contact-fact-card strong {
+      display: block;
+      font-size: 15px;
+      line-height: 1.25;
+    }
+
+    .contact-fact-card span {
+      display: block;
+      margin-top: 5px;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 1.55;
+      font-size: 14px;
+    }
+
+    .contact-quick-actions {
+      display: grid;
+      gap: 10px;
+      margin-top: 2px;
+    }
+
+    .contact-quick-link {
+      display: block;
+      padding: 12px 14px;
+      border-radius: 14px;
+      color: #fff;
+      font-weight: 700;
+      background: rgba(255, 255, 255, 0.12);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+    }
+
+    .contact-quick-link:hover {
+      background: rgba(255, 255, 255, 0.18);
+    }
+
+    .contact-form {
+      display: grid;
+      gap: 12px;
+      margin-top: 18px;
+    }
+
+    .field {
+      width: 100%;
+      padding: 16px 18px;
+      border-radius: 18px;
+      border: 1px solid rgba(18, 48, 89, 0.1);
+      background: rgba(255, 255, 255, 0.82);
+      color: var(--text);
+      outline: none;
+    }
+
+    .field:focus {
+      border-color: rgba(13, 79, 214, 0.4);
+      box-shadow: 0 0 0 4px rgba(13, 79, 214, 0.08);
+    }
+
+    textarea.field {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    .contact-list li,
+    .footer-links a,
+    .footer-legal a {
+      color: var(--muted);
+    }
+
+    .footer {
+      padding: 32px 0 42px;
+    }
+
+    .classic-footer {
+      width: 100%;
+      margin-top: 24px;
+      padding: 44px 0 28px;
+      background: #0a1f47;
+      border-top: 1px solid rgba(255, 255, 255, 0.16);
+    }
+
+    .classic-footer-shell {
+      display: grid;
+      gap: 22px;
+    }
+
+    .classic-footer-main {
+      display: grid;
+      grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 1fr));
+      gap: 28px;
+      align-items: start;
+    }
+
+    .classic-footer-col {
+      min-width: 0;
+    }
+
+    .classic-footer-col h3 {
+      margin: 0;
+      color: #ffffff;
+      font-size: 18px;
+      line-height: 1.2;
+    }
+
+    .classic-footer .brand-text strong,
+    .classic-footer .brand-text span,
+    .classic-footer .footer-description,
+    .classic-footer .footer-links a,
+    .classic-footer .footer-legal a,
+    .classic-footer .footer-bottom {
+      color: rgba(255, 255, 255, 0.78);
+    }
+
+    .classic-footer .footer-links,
+    .classic-footer .footer-legal {
+      margin-top: 14px;
+    }
+
+    .classic-footer .footer-links a,
+    .classic-footer .footer-legal a {
+      transition: color 0.2s ease;
+    }
+
+    .classic-footer .footer-links a:hover,
+    .classic-footer .footer-legal a:hover,
+    .classic-footer .footer-links a:focus-visible,
+    .classic-footer .footer-legal a:focus-visible {
+      color: #ffffff;
+    }
+
+    .classic-footer-bottom {
+      margin-top: 8px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(255, 255, 255, 0.16);
+      font-size: 13px;
+    }
+
+    .footer-grid {
+      align-items: start;
+    }
+
+.footer-bottom {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+      align-items: center;
+      margin-top: 18px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .footer-description {
+      margin: 20px 0 0;
+      color: var(--muted);
+      line-height: 1.7;
+    }
+
+    .cart-drawer,
+    .modal-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 60;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.24s ease;
+    }
+
+    .cart-drawer.open,
+    .modal-backdrop.open {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    .cart-drawer::before,
+    .modal-backdrop::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: rgba(3, 17, 45, 0.42);
+      backdrop-filter: blur(10px);
+    }
+
+    .cart-panel,
+    .modal-card {
+      position: absolute;
+      background: rgba(255, 255, 255, 0.94);
+      border: 1px solid rgba(255, 255, 255, 0.82);
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(24px);
+    }
+
+    .cart-panel {
+      top: 0;
+      right: 0;
+      width: min(440px, 100%);
+      height: 100%;
+      padding: 22px;
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      gap: 16px;
+      transform: translateX(100%);
+      transition: transform 0.28s ease;
+    }
+
+    .cart-drawer.open .cart-panel {
+      transform: translateX(0);
+    }
+
+    .modal-card {
+      top: 50%;
+      left: 50%;
+      width: min(560px, calc(100% - 24px));
+      padding: 24px;
+      border-radius: 28px;
+      transform: translate(-50%, -50%) scale(0.96);
+      transition: transform 0.24s ease;
+    }
+
+    .modal-backdrop.open .modal-card {
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    .drawer-head,
+    .modal-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 18px;
+      align-items: start;
+    }
+
+.drawer-head h3,
+    .modal-head h3 {
+      margin: 0;
+      font-size: 28px;
+      line-height: 1.1;
+    }
+
+    .dialog-copy {
+      margin: 8px 0 0;
+      color: var(--muted);
+    }
+
+    .close-button {
+      width: 42px;
+      height: 42px;
+      display: grid;
+      place-items: center;
+      border-radius: 14px;
+      background: rgba(13, 79, 214, 0.08);
+      color: var(--primary-strong);
+      font-size: 18px;
+      font-weight: 800;
+    }
+
+    .cart-list {
+      display: grid;
+      align-content: start;
+      gap: 12px;
+      overflow: auto;
+      padding-right: 4px;
+    }
+
+    .cart-item {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 14px;
+      padding: 16px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.76);
+      border: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .cart-item strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    .cart-item span {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .cart-item button {
+      justify-self: end;
+      color: #d53b5c;
+      font-weight: 800;
+    }
+
+    .cart-summary {
+      display: grid;
+      gap: 12px;
+      padding: 18px;
+      border-radius: 22px;
+      background: linear-gradient(135deg, rgba(13, 79, 214, 0.08), rgba(60, 200, 255, 0.12));
+      border: 1px solid rgba(18, 48, 89, 0.08);
+    }
+
+    .summary-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      font-weight: 700;
+    }
+
+    .summary-row strong {
+      font-size: 28px;
+      color: var(--primary-strong);
+    }
+
+    .cart-actions {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .cart-actions .ghost-button,
+    .cart-actions .button {
+      justify-content: center;
+      text-align: center;
+    }
+
+    .empty-state {
+      padding: 20px;
+      border-radius: 22px;
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px dashed rgba(18, 48, 89, 0.14);
+      text-align: center;
+      color: var(--muted);
+      line-height: 1.7;
+    }
+
+    .success-note {
+      display: none;
+      margin-top: 14px;
+      padding: 14px 16px;
+      border-radius: 16px;
+      background: rgba(25, 167, 111, 0.12);
+      color: #0d6d49;
+      font-weight: 700;
+    }
+
+    .success-note.visible {
+      display: block;
+    }
+
+    .reveal {
+      opacity: 0;
+      transform: translateY(28px);
+      animation: rise 0.8s ease forwards;
+    }
+
+    .reveal-delay-1 { animation-delay: 0.08s;
+    border-radius: var(--radius-xl); }
+    .reveal-delay-2 { animation-delay: 0.16s; }
+    .reveal-delay-3 { animation-delay: 0.24s; }
+    .reveal-delay-4 { animation-delay: 0.32s; }
+
+    @keyframes rise {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @media (max-width: 1120px) {
+      .catalog-grid,
+      .steps-grid,
+      .promo-grid,
+      .reviews-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .hero-grid,
+      .featured-grid,
+      .about-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .ticker {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 820px) {
+      .nav,
+      .header-actions .header-phone,
+      .header-actions .cart-button {
+        display: none;
+      }
+
+      .mobile-toggle,
+      .mobile-panel.active {
+        display: block;
+      }
+
+      .delivery-grid,
+      .segments-grid,
+      .contacts-grid,
+      .footer-grid,
+      .hero-notes,
+      .hero-stats {
+        grid-template-columns: 1fr;
+      }
+
+      .section-head,
+      .footer-bottom,
+      .product-row {
+        grid-template-columns: 1fr;
+        display: grid;
+      }
+
+      .product-row {
+        justify-items: start;
+      }
+
+      .classic-footer-main {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .classic-footer-main .brand-col {
+        grid-column: 1 / -1;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .container {
+        width: min(var(--container), calc(100% - 20px));
+      }
+
+      .hero,
+      .section,
+      .footer {
+        padding-top: 22px;
+      }
+
+      .catalog-grid,
+      .steps-grid,
+      .promo-grid,
+      .reviews-grid,
+      .ticker {
+        grid-template-columns: 1fr;
+      }
+
+      .hero-toggle {
+        width: 100%;
+      }
+
+      .toggle-button,
+      .button,
+      .ghost-button,
+      .mini-button {
+        width: 100%;
+      }
+
+      .hero-actions {
+        display: grid;
+      }
+
+      .panel-top,
+      .footer-bottom {
+        flex-direction: column;
+        align-items: start;
+      }
+
+      .classic-footer {
+        padding-top: 32px;
+      }
+
+      .classic-footer-main {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+
+      .classic-footer-main .brand-col {
+        grid-column: auto;
+      }
+
+      .cart-actions {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      html {
+        scroll-behavior: auto;
+      }
+
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+
+      .reveal {
+        opacity: 1;
+        transform: none;
+        animation: none !important;
+      }
+    }
diff --git a/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js b/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js
new file mode 100644
index 00000000..1433a970
--- /dev/null
+++ b/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js
@@ -0,0 +1,343 @@
+const mobileToggle = document.getElementById('mobileToggle')
+    const mobilePanel = document.getElementById('mobilePanel')
+    const cartDrawer = document.getElementById('cartDrawer')
+    const cartOpenButton = document.getElementById('cartOpenButton')
+    const mobileCartOpenButton = document.getElementById('mobileCartOpenButton')
+    const cartCloseButton = document.getElementById('cartCloseButton')
+    const modalBackdrop = document.getElementById('orderModal')
+    const modalCloseButton = document.getElementById('modalCloseButton')
+    const viewCartButton = document.getElementById('viewCartButton')
+    const checkoutButton = document.getElementById('checkoutButton')
+    const orderButtons = document.querySelectorAll('[data-open-order]')
+    const addToCartButtons = document.querySelectorAll('.add-to-cart')
+    const faqItems = document.querySelectorAll('.faq-item')
+    const cartCount = document.getElementById('cartCount')
+    const mobileCartCount = document.getElementById('mobileCartCount')
+    const cartItemsCount = document.getElementById('cartItemsCount')
+    const cartTotal = document.getElementById('cartTotal')
+    const cartList = document.getElementById('cartList')
+    const orderForm = document.getElementById('orderForm')
+    const contactForm = document.getElementById('contactForm')
+    const orderItemsField = document.getElementById('orderItemsField')
+    const orderSuccess = document.getElementById('orderSuccess')
+    const contactSuccess = document.getElementById('contactSuccess')
+    const wooCommerceConfig = window.test1WooCommerce || null
+    const cartPageUrl = (wooCommerceConfig && wooCommerceConfig.cartUrl) ? wooCommerceConfig.cartUrl : '/cart/'
+    const checkoutPageUrl = (wooCommerceConfig && wooCommerceConfig.checkoutUrl) ? wooCommerceConfig.checkoutUrl : '/checkout/'
+    const cartPanel = cartDrawer?.querySelector('.cart-panel')
+    const modalCard = modalBackdrop?.querySelector('.modal-card')
+
+    let cart = []
+    let lastCartTrigger = null
+    let lastModalTrigger = null
+
+    const getFocusableElements = container => {
+      if (!container) {
+        return []
+      }
+
+      return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'))
+        .filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]'))
+    }
+
+    const focusFirstElement = container => {
+      const [first] = getFocusableElements(container)
+
+      if (first) {
+        first.focus()
+      }
+    }
+
+    const openMobileMenu = () => {
+      mobilePanel.classList.add('active')
+      mobileToggle.setAttribute('aria-expanded', 'true')
+      document.body.classList.add('menu-open')
+    }
+
+    const closeMobileMenu = () => {
+      mobilePanel.classList.remove('active')
+      mobileToggle.setAttribute('aria-expanded', 'false')
+      document.body.classList.remove('menu-open')
+    }
+
+    const openCart = triggerElement => {
+      lastCartTrigger = triggerElement || document.activeElement
+      cartDrawer.classList.add('open')
+      cartDrawer.setAttribute('aria-hidden', 'false')
+      document.body.classList.add('modal-open')
+      focusFirstElement(cartPanel)
+    }
+
+    const closeCart = () => {
+      const shouldRestoreFocus = cartDrawer.classList.contains('open')
+      cartDrawer.classList.remove('open')
+      cartDrawer.setAttribute('aria-hidden', 'true')
+      document.body.classList.remove('modal-open')
+
+      if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') {
+        lastCartTrigger.focus()
+      }
+
+      lastCartTrigger = null
+    }
+
+    const openModal = triggerElement => {
+      lastModalTrigger = triggerElement || document.activeElement
+      orderItemsField.value = cart.length
+        ? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
+        : ''
+      modalBackdrop.classList.add('open')
+      modalBackdrop.setAttribute('aria-hidden', 'false')
+      document.body.classList.add('modal-open')
+      focusFirstElement(modalCard)
+    }
+
+    const closeModal = () => {
+      const shouldRestoreFocus = modalBackdrop.classList.contains('open')
+      modalBackdrop.classList.remove('open')
+      modalBackdrop.setAttribute('aria-hidden', 'true')
+      document.body.classList.remove('modal-open')
+
+      if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
+        lastModalTrigger.focus()
+      }
+
+      lastModalTrigger = null
+    }
+
+    const renderCart = () => {
+      const total = cart.reduce((sum, item) => sum + item.price, 0)
+      const count = cart.length
+
+      cartCount.textContent = count
+      mobileCartCount.textContent = count
+      cartItemsCount.textContent = count
+      cartTotal.textContent = `${total} ₽`
+
+      if (!count) {
+        cartList.innerHTML = '<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>'
+        return
+      }
+
+      cartList.innerHTML = cart.map((item, index) => `
+        <div class="cart-item">
+          <div>
+            <strong>${item.name}</strong>
+            <span>${item.volume} · ${item.price} ₽</span>
+          </div>
+          <button type="button" data-remove-index="${index}" aria-label="Удалить ${item.name} из корзины">Удалить</button>
+        </div>
+      `).join('')
+
+      cartList.querySelectorAll('[data-remove-index]').forEach(button => {
+        button.addEventListener('click', () => {
+          const index = Number(button.dataset.removeIndex)
+          cart.splice(index, 1)
+          renderCart()
+        })
+      })
+    }
+
+    const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
+      if (!formElement || !successElement) {
+        return
+      }
+
+      formElement.addEventListener('submit', async event => {
+        event.preventDefault()
+
+        const leadFormConfig = window.test1LeadForm || null
+
+        if (!leadFormConfig?.ajaxUrl || !leadFormConfig?.action || !leadFormConfig?.nonce) {
+          window.alert('Форма временно недоступна. Обновите страницу и попробуйте снова.')
+          return
+        }
+
+        const formData = new window.FormData(formElement)
+        formData.append('action', leadFormConfig.action)
+        formData.append('nonce', leadFormConfig.nonce)
+        formData.append('form_type', formType)
+        formData.append('page_url', window.location.href)
+
+        try {
+          const response = await window.fetch(leadFormConfig.ajaxUrl, {
+            method: 'POST',
+            credentials: 'same-origin',
+            body: formData,
+          })
+
+          const payload = await response.json().catch(() => null)
+
+          if (!response.ok || !payload?.success) {
+            throw new Error('submit_failed')
+          }
+
+          successElement.classList.add('visible')
+          if (typeof onSuccess === 'function') {
+            onSuccess()
+          }
+
+          setTimeout(() => {
+            formElement.reset()
+            successElement.classList.remove('visible')
+          }, 2200)
+        } catch (error) {
+          window.alert('Не удалось отправить заявку. Попробуйте еще раз.')
+        }
+      })
+    }
+
+    mobileToggle.addEventListener('click', () => {
+      const isOpen = mobilePanel.classList.contains('active')
+      if (isOpen) {
+        closeMobileMenu()
+        return
+      }
+      openMobileMenu()
+    })
+
+    document.querySelectorAll('.mobile-nav a').forEach(link => {
+      link.addEventListener('click', closeMobileMenu)
+    })
+
+    addToCartButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const productId = Number(button.dataset.productId || 0)
+
+        if (wooCommerceConfig && productId && wooCommerceConfig.addToCartUrl && wooCommerceConfig.checkoutUrl) {
+          button.disabled = true
+
+          fetch(wooCommerceConfig.addToCartUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            },
+            body: new URLSearchParams({
+              product_id: String(productId),
+              quantity: '1'
+            })
+          })
+            .then(async response => {
+              let payload = null
+
+              try {
+                payload = await response.json()
+              } catch (error) {
+                payload = null
+              }
+
+              if (!response.ok) {
+                throw new Error('add_to_cart_failed')
+              }
+
+              if (payload && payload.error && payload.product_url) {
+                window.location.href = payload.product_url
+                return
+              }
+
+              cart.push({
+                name: button.dataset.name,
+                volume: button.dataset.volume,
+                price: Number(button.dataset.price)
+              })
+              renderCart()
+              openCart(button)
+              button.disabled = false
+            })
+            .catch(() => {
+              button.disabled = false
+            })
+
+          return
+        }
+
+        cart.push({
+          name: button.dataset.name,
+          volume: button.dataset.volume,
+          price: Number(button.dataset.price)
+        })
+        renderCart()
+        openCart(button)
+      })
+    })
+
+    cartOpenButton.addEventListener('click', () => openCart(cartOpenButton))
+    mobileCartOpenButton.addEventListener('click', () => {
+      closeMobileMenu()
+      openCart(mobileCartOpenButton)
+    })
+    cartCloseButton.addEventListener('click', closeCart)
+    viewCartButton.addEventListener('click', () => {
+      window.location.href = cartPageUrl
+    })
+    checkoutButton.addEventListener('click', () => {
+      window.location.href = checkoutPageUrl
+    })
+
+    orderButtons.forEach(button => {
+      button.addEventListener('click', () => openModal(button))
+    })
+
+    modalCloseButton.addEventListener('click', closeModal)
+
+    cartDrawer.addEventListener('click', event => {
+      if (event.target === cartDrawer) {
+        closeCart()
+      }
+    })
+
+    modalBackdrop.addEventListener('click', event => {
+      if (event.target === modalBackdrop) {
+        closeModal()
+      }
+    })
+
+    faqItems.forEach(item => {
+      const trigger = item.querySelector('.faq-question')
+      const answer = item.querySelector('.faq-answer')
+
+      if (!trigger || !answer) {
+        return
+      }
+
+      trigger.addEventListener('click', () => {
+        const isOpen = item.classList.contains('open')
+        faqItems.forEach(entry => {
+          const entryTrigger = entry.querySelector('.faq-question')
+          const entryAnswer = entry.querySelector('.faq-answer')
+
+          entry.classList.remove('open')
+          entryTrigger?.setAttribute('aria-expanded', 'false')
+
+          if (entryAnswer) {
+            entryAnswer.hidden = true
+          }
+        })
+        if (!isOpen) {
+          item.classList.add('open')
+          trigger.setAttribute('aria-expanded', 'true')
+          answer.hidden = false
+        }
+      })
+    })
+
+    submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
+      cart = []
+      renderCart()
+      setTimeout(() => {
+        closeModal()
+      }, 700)
+    })
+
+    submitLeadForm(contactForm, contactSuccess, 'landing_contacts')
+
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') {
+        return
+      }
+      closeCart()
+      closeModal()
+      closeMobileMenu()
+    })
+
+    renderCart()
diff --git a/wp-content/themes/twentytwentyfour/functions.php b/wp-content/themes/twentytwentyfour/functions.php
index ea879bf4..86fbffac 100644
--- a/wp-content/themes/twentytwentyfour/functions.php
+++ b/wp-content/themes/twentytwentyfour/functions.php
@@ -458,8 +458,8 @@ function twentytwentyfour_test1_assets() {
 		return;
 	}
 
-	$css_file = ABSPATH . 'index3.css';
-	$js_file  = ABSPATH . 'index3.js';
+	$landing_css_file = get_theme_file_path( 'assets/css/test1-landing.css' );
+	$landing_js_file  = get_theme_file_path( 'assets/js/test1-landing.js' );
 
 	if ( $use_test1_assets ) {
 		wp_dequeue_style( 'global-styles' );
@@ -475,21 +475,21 @@ function twentytwentyfour_test1_assets() {
 		null
 	);
 
-	if ( file_exists( $css_file ) ) {
+	if ( file_exists( $landing_css_file ) ) {
 		wp_enqueue_style(
 			'twentytwentyfour-test1-style',
-			home_url( '/index3.css' ),
+			get_theme_file_uri( 'assets/css/test1-landing.css' ),
 			array( 'twentytwentyfour-test1-fonts' ),
-			(string) filemtime( $css_file )
+			(string) filemtime( $landing_css_file )
 		);
 	}
 
-	if ( ( is_front_page() || is_page( 'test1' ) ) && file_exists( $js_file ) ) {
+	if ( ( is_front_page() || is_page( 'test1' ) ) && file_exists( $landing_js_file ) ) {
 		wp_enqueue_script(
 			'twentytwentyfour-test1-script',
-			home_url( '/index3.js' ),
+			get_theme_file_uri( 'assets/js/test1-landing.js' ),
 			array(),
-			(string) filemtime( $js_file ),
+			(string) filemtime( $landing_js_file ),
 			true
 		);
 
diff --git a/wp-content/themes/twentytwentyfour/page-test1.php b/wp-content/themes/twentytwentyfour/page-test1.php
index fdfd87a6..8c69fbac 100644
--- a/wp-content/themes/twentytwentyfour/page-test1.php
+++ b/wp-content/themes/twentytwentyfour/page-test1.php
@@ -82,8 +82,14 @@ function twentytwentyfour_test1_catalog_markup() {
 	return (string) ob_get_clean();
 }
 
-$landing_file = ABSPATH . 'index3.html';
-$landing_html = file_exists( $landing_file ) ? file_get_contents( $landing_file ) : false;
+$landing_template = get_theme_file_path( 'template-parts/test1-landing-static.php' );
+$landing_html     = false;
+
+if ( file_exists( $landing_template ) ) {
+	ob_start();
+	require $landing_template;
+	$landing_html = (string) ob_get_clean();
+}
 
 if ( $landing_html ) {
 	$catalog_markup = twentytwentyfour_test1_catalog_markup();
@@ -186,7 +192,7 @@ HTML;
 		?>
 		<main class="site-main" role="main">
 			<div style="padding:48px 16px;max-width:1180px;margin:0 auto;">
-				<p>Не удалось загрузить шаблон страницы `index3.html`.</p>
+				<p>Не удалось загрузить шаблон страницы `template-parts/test1-landing-static.php`.</p>
 			</div>
 		</main>
 		<?php
diff --git a/wp-content/themes/twentytwentyfour/template-parts/test1-landing-static.php b/wp-content/themes/twentytwentyfour/template-parts/test1-landing-static.php
new file mode 100644
index 00000000..79c8b8d9
--- /dev/null
+++ b/wp-content/themes/twentytwentyfour/template-parts/test1-landing-static.php
@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Доставка питьевой воды в Севастополе — 19 л для дома и офиса</title>
+  <meta name="description" content="Питьевая вода с доставкой по Севастополю для дома и офиса. Бутыли 19 л, компактные форматы, удобные интервалы, подъем на этаж и возвратная тара.">
+  <meta name="theme-color" content="#0d4fd6">
+  <meta property="og:title" content="Питьевая вода с доставкой в Севастополе — удобно для дома и офиса">
+  <meta property="og:description" content="Закажите воду для дома, офиса или небольшого бизнеса: 19 л, 5 л и другие форматы с доставкой по Севастополю.">
+  <meta property="og:type" content="website">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="index3.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="container">
+      <div class="header-row">
+        <a class="brand" href="#top" aria-label="Перейти в начало страницы">
+          <span class="brand-mark" aria-hidden="true">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
+            </svg>
+          </span>
+          <span class="brand-text">
+            <strong>АкваЛиния</strong>
+            <span>питьевая вода для дома и офиса</span>
+          </span>
+        </a>
+
+        <nav class="nav" aria-label="Основная навигация">
+          <a href="#catalog">Каталог</a>
+          <a href="#delivery">Доставка</a>
+          <a href="#business">Для дома и офиса</a>
+          <a href="#faq">FAQ</a>
+          <a href="#contacts">Контакты</a>
+        </nav>
+
+        <div class="header-actions">
+          <a class="header-phone" href="tel:+79781234567" aria-label="Позвонить по номеру плюс семь девятьсот семьдесят восемь сто двадцать три сорок пять шестьдесят семь">
+            <span aria-hidden="true">+7 (978) 123-45-67</span>
+          </a>
+          <button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
+            <span aria-hidden="true">Корзина</span>
+            <span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
+          </button>
+          <button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <path d="M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              <path d="M4 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="mobile-panel" id="mobilePanel">
+        <div class="mobile-card">
+          <nav class="mobile-nav" aria-label="Мобильная навигация">
+            <a href="#catalog">Каталог</a>
+            <a href="#delivery">Условия доставки</a>
+            <a href="#business">Для дома и офиса</a>
+            <a href="#faq">FAQ</a>
+            <a href="#contacts">Контакты</a>
+          </nav>
+          <a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
+          <button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
+            <span>Корзина</span>
+            <span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <main id="top">
+    <section class="hero">
+      <div class="container">
+        <div class="hero-grid">
+          <div class="hero-copy reveal">
+            <span class="eyebrow">Чистая вода каждый день</span>
+            <h1 class="hero-title">Питьевая вода с доставкой в <span>Севастополе</span> — привезём в удобное время</h1>
+            <div class="hero-actions">
+              <button class="button" data-open-order aria-label="Открыть форму заказа воды">Заказать воду</button>
+              <a class="ghost-button" href="#catalog" aria-label="Перейти к каталогу воды">Посмотреть каталог</a>
+            </div>
+
+            <div class="hero-stats">
+              <div class="stat-card reveal reveal-delay-1">
+                <strong>от 290 ₽</strong>
+                <span>Бутыль 19 л для дома и офиса</span>
+              </div>
+              <div class="stat-card reveal reveal-delay-2">
+                <strong>2 часа</strong>
+                <span>среднее время доставки по городу в будни</span>
+              </div>
+              <div class="stat-card reveal reveal-delay-3">
+                <strong>7 дней</strong>
+                <span>работаем без выходных для дома и офиса</span>
+              </div>
+            </div>
+          </div>
+
+          <aside class="hero-panel reveal reveal-delay-1" aria-label="Информация о доставке">
+            <div class="panel-top">
+              <div>
+                <span class="signal-pill">Сегодня работаем по городу</span>
+                <h2>Сегодня в доставке: центральные и прибрежные районы</h2>
+              </div>
+              <div class="chip">бутыли 19 л</div>
+            </div>
+
+            <div class="hero-notes">
+              <div class="hero-note">
+                <strong>Для дома</strong>
+                <span>Удобные форматы для кухни и семьи, без лишней тяжести и походов в магазин.</span>
+              </div>
+              <div class="hero-note">
+                <strong>Для офиса</strong>
+                <span>Регулярные поставки, документы для бухгалтерии и запас воды без авралов.</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        <div class="ticker reveal reveal-delay-2" aria-label="Ключевые преимущества сервиса">
+          <div class="ticker-item">
+            <strong>Источник</strong>
+            <span>артезианская вода с многоступенчатым контролем</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Сервис</strong>
+            <span>подъем на этаж и помощь с заменой бутыли</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Оплата</strong>
+            <span>наличные, карта, перевод и безнал для компаний</span>
+          </div>
+          <div class="ticker-item">
+            <strong>Автодоставка</strong>
+            <span>гибкий график без повторных звонков</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="catalog">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Каталог</span>
+            <h2 class="section-title">Выберите формат воды</h2>
+          </div>
+          <p class="section-copy">В каталоге — популярные объемы для дома и офиса: от небольших бутылей до стандартных 19 литров. 
+Можно заказать разово или подключить регулярную доставку, чтобы не следить за остатками.</p>
+        </div>
+
+        <div class="catalog-grid">
+          <article class="catalog-card reveal">
+            <div class="catalog-icon" aria-hidden="true">💧</div>
+            <h3>Вода 19 литров</h3>
+            <p>Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.</p>
+            <div class="tag-row">
+              <span class="chip">хит продаж</span>
+              <span class="chip">для кулера</span>
+            </div>
+            <div class="card-price"><strong>290 ₽</strong><span>за бутыль</span></div>
+            <button class="mini-button add-to-cart" data-name="Вода артезианская 19 л" data-volume="19 л" data-price="290">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-1">
+            <div class="catalog-icon" aria-hidden="true">🫙</div>
+            <h3>Вода 5 литров</h3>
+            <p>Удобный домашний формат для кухни, поездок и дачи. Легко хранить, просто переносить.</p>
+            <div class="tag-row">
+              <span class="chip">домой</span>
+              <span class="chip">компактно</span>
+            </div>
+            <div class="card-price"><strong>95 ₽</strong><span>за бутылку</span></div>
+            <button class="mini-button add-to-cart" data-name="Питьевая вода 5 л" data-volume="5 л" data-price="95">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-2">
+            <div class="catalog-icon" aria-hidden="true">🥤</div>
+            <h3>0.5 / 1.5 литра</h3>
+            <p>Для тренировок, поездок, мероприятий и ежедневного запаса питьевой воды дома или на работе.</p>
+            <div class="tag-row">
+              <span class="chip">спорт</span>
+              <span class="chip">мероприятия</span>
+            </div>
+            <div class="card-price"><strong>39 ₽</strong><span>от 0.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Питьевая вода 1.5 л" data-volume="1.5 л" data-price="49">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-3">
+            <div class="catalog-icon" aria-hidden="true">⛰️</div>
+            <h3>Минеральная вода</h3>
+            <p>Освежающий вариант для гостей, кафе и тех, кто предпочитает яркий минеральный вкус.</p>
+            <div class="tag-row">
+              <span class="chip">для кафе</span>
+              <span class="chip">рестораны</span>
+            </div>
+            <div class="card-price"><strong>68 ₽</strong><span>за 1.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Минеральная вода 1.5 л" data-volume="1.5 л" data-price="68">Добавить в корзину</button>
+          </article>
+
+          <article class="catalog-card reveal reveal-delay-4">
+            <div class="catalog-icon" aria-hidden="true">✨</div>
+            <h3>Газированная / негазированная</h3>
+            <p>Соберите микс под привычки семьи или офиса: мягкая вода на каждый день и газированная к столу.</p>
+            <div class="tag-row">
+              <span class="chip">микс заказ</span>
+              <span class="chip">на выбор</span>
+            </div>
+            <div class="card-price"><strong>45 ₽</strong><span>за 0.5 л</span></div>
+            <button class="mini-button add-to-cart" data-name="Газированная вода 0.5 л" data-volume="0.5 л" data-price="45">Добавить в корзину</button>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="bestsellers">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Бестселлеры</span>
+            <h2 class="section-title">Что заказывают чаще всего</h2>
+          </div>
+          <p class="section-copy">Если заказывают впервые, чаще всего начинают с бутыли 19 литров. Для дома, поездок или редкого использования обычно добавляют компактные форматы.</p>
+        </div>
+
+        <div class="featured-grid">
+          <div class="glass-card reveal">
+            <span class="eyebrow">Хит по Севастополю</span>
+            <h3>Вода 19 л — то, что чаще всего берут на постоянку</h3>
+            <p>Хороший вариант на каждый день: для дома, офиса и мест, где вода нужна постоянно. Удобно ставить в кулер и не вспоминать о запасах каждый день.</p>
+
+            <div class="product-table">
+              <div class="product-row">
+                <div>
+                  <strong>АкваЛиния Классик</strong>
+                  <span>19 л, мягкий вкус, ежедневное потребление</span>
+                </div>
+                <div class="price">290 ₽</div>
+                <button class="mini-button add-to-cart" data-name="АкваЛиния Классик" data-volume="19 л" data-price="290">Заказать</button>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>АкваЛиния Премиум</strong>
+                  <span>19 л, артезианская вода, усиленный контроль</span>
+                </div>
+                <div class="price">340 ₽</div>
+                <button class="mini-button add-to-cart" data-name="АкваЛиния Премиум" data-volume="19 л" data-price="340">Заказать</button>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Стартовый комплект</strong>
+                  <span>2 бутыли 19 л + помпа для первого заказа</span>
+                </div>
+                <div class="price">690 ₽</div>
+                <button class="mini-button add-to-cart" data-name="Стартовый комплект 19 л + помпа" data-volume="2 x 19 л" data-price="690">Заказать</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="glass-card reveal reveal-delay-1">
+            <span class="eyebrow">Почему выбирают</span>
+            <h3>Почему этот формат выбирают на постоянной основе</h3>
+            <div class="chip-row chip-row-spaced">
+              <span class="chip">быстрая доставка</span>
+              <span class="chip">чистая бутыль</span>
+              <span class="chip">возврат тары</span>
+              <span class="chip">выгодно для офиса</span>
+            </div>
+            <p>Многие берут воду по графику, чтобы не вспоминать о заказе в последний момент. Это удобно и для семьи, и для офиса, где запас должен быть всегда под рукой.</p>
+            <div class="hero-actions hero-actions-spaced">
+              <button class="button" data-open-order>Заказать воду</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="delivery">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Условия доставки</span>
+            <h2 class="section-title">Доставка воды по районам Севастополя</h2>
+          </div>
+          <p class="section-copy">Работаем по основным районам Севастополя. При оформлении заказа подскажем ближайшее окно и заранее подтвердим удобное время доставки.</p>
+        </div>
+
+        <div class="delivery-grid">
+          <div class="glass-card reveal">
+            <h3>Что важно знать перед заказом</h3>
+            <div class="product-table">
+              <div class="product-row">
+                <div>
+                  <strong>Зоны доставки</strong>
+                  <span>Гагаринский, Ленинский, Нахимовский, Балаклава, Камышовая бухта, Остряки, Стрелецкая</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Время доставки</strong>
+                  <span>Ежедневно с 8:00 до 21:00, срочные окна по возможности в день обращения</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Минимальный заказ</strong>
+                  <span>От 1 бутыли 19 л или от 500 ₽ для малых форматов</span>
+                </div>
+              </div>
+              <div class="product-row">
+                <div>
+                  <strong>Возвратная тара</strong>
+                  <span>Пустые бутыли забираем при следующей доставке или при отдельном выезде по согласованию</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="delivery-map reveal reveal-delay-1" aria-label="Информация о маршрутах доставки">
+            <span class="eyebrow eyebrow-inverse">Активные маршруты</span>
+            <h3 class="section-heading-compact section-heading-delivery">Доставляем по всем районам города</h3>
+            <div class="zones">
+              <span class="zone-card">Гагаринский район</span>
+              <span class="zone-card">Ленинский район</span>
+              <span class="zone-card">Нахимовский район</span>
+              <span class="zone-card">Балаклава</span>
+            </div>
+
+            <div class="delivery-highlights">
+              <article class="delivery-highlight-card">
+                <strong>Ближайшее окно</strong>
+                <span>Подберём ближайший доступный интервал и заранее согласуем время.</span>
+              </article>
+              <article class="delivery-highlight-card">
+                <strong>Быстрое подтверждение</strong>
+                <span>Связываемся в течение 15 минут в рабочее время.</span>
+              </article>
+              <article class="delivery-highlight-card">
+                <strong>Сервис на месте</strong>
+                <span>Подъем воды, замена бутыли и вывоз пустой тары по запросу.</span>
+              </article>
+              <button class="button delivery-cta" data-open-order>Оставить заявку на доставку</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="how-order">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Как заказать</span>
+            <h2 class="section-title">Четыре быстрых шага до чистой воды</h2>
+          </div>
+          <p class="section-copy">Все просто: выбираете воду, оставляете заявку, а мы уточняем детали и привозим заказ в согласованное время.</p>
+        </div>
+
+        <div class="steps-grid">
+          <article class="step-card reveal">
+            <div class="step-number">1</div>
+            <h3>Выберите объем воды </h3>
+            <p>Определите нужный объем: вода 19 литров, 5 литров, малые бутылки, минеральная или газированная вода.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-1">
+            <div class="step-number">2</div>
+            <h3>Оставьте заявку на сайте или по телефону</h3>
+            <p>Соберите заказ прямо на сайте и проверьте итоговую сумму до подтверждения.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-2">
+            <div class="step-number">3</div>
+            <h3>Подтвердите удобное время доставки</h3>
+            <p>Оставьте телефон и адрес в Севастополе, а мы уточним время и детали по таре.</p>
+          </article>
+          <article class="step-card reveal reveal-delay-3">
+            <div class="step-number">4</div>
+            <h3>Получите воду с доставкой до двери</h3>
+            <p>Курьер привезет воду, поможет с выгрузкой и при необходимости заберет пустые бутыли.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="business">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Для дома и офиса</span>
+            <h2 class="section-title">Для дома и офиса — без лишних сложностей</h2>
+          </div>
+          <p class="section-copy">У домашних и корпоративных заказов разные задачи, поэтому мы отдельно продумали условия для семьи и для компаний.</p>
+        </div>
+
+        <div class="segments-grid">
+          <article class="segment-card reveal">
+            <span class="eyebrow">Доставка воды на дом</span>
+            <h3>Когда воду удобно заказывать домой</h3>
+            <p>Такой формат выбирают семьи, пожилые клиенты и все, кто не хочет носить тяжелые бутыли из магазина.</p>
+            <ul class="segment-list">
+              <li>Удобные интервалы утром, днем и вечером</li>
+              <li>Подъем на этаж и помощь с установкой</li>
+              <li>Можно заказать и 19 л, и компактные форматы</li>
+              <li>Напоминание о повторном заказе</li>
+            </ul>
+            <div class="segment-meta">Часто выбирают: 2 бутыли 19 л + вода 5 л для кухни</div>
+          </article>
+
+          <article class="segment-card featured reveal reveal-delay-1">
+            <span class="eyebrow eyebrow-inverse">Доставка воды в офис</span>
+            <h3>Регулярные поставки для команды и клиентов</h3>
+            <p>Офисам, салонам, кафе, фитнес-клубам и студиям нужен предсказуемый сервис. Мы строим график так, чтобы запас воды не заканчивался в рабочие часы.</p>
+            <ul class="segment-list">
+              <li>Безналичная оплата и закрывающие документы</li>
+              <li>Автодоставка воды по графику</li>
+              <li>Приоритетные интервалы на будни</li>
+              <li>Комбинированные заказы для кулеров и гостей</li>
+            </ul>
+            <div class="segment-meta">Часто выбирают: 6-12 бутылей 19 л в неделю + минеральная вода для переговорных</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="promotions">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Акции</span>
+            <h2 class="section-title">Выгоднее с первого заказа и еще удобнее по подписке</h2>
+          </div>
+          <p class="section-copy">Для новых и постоянных клиентов периодически действуют акции. Это удобный способ попробовать сервис или сделать регулярные заказы выгоднее.</p>
+        </div>
+
+        <div class="promo-grid">
+          <article class="promo-card highlight reveal">
+            <h3>Скидка на первый заказ</h3>
+            <p>На первый заказ действует скидка 10%. Это удобно, если хотите сначала попробовать сервис и оценить качество воды.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-1">
+            <h3>Автодоставка воды</h3>
+            <p>Настройте регулярный график: раз в 3 дня, неделю или по вашему потреблению. Мы напомним и приедем вовремя.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-2">
+            <h3>Помпа в подарок</h3>
+            <p>При заказе стартового комплекта для дома дарим механическую помпу, чтобы пользоваться 19-литровой бутылью было проще.</p>
+          </article>
+          <article class="promo-card reveal reveal-delay-3">
+            <h3>Офисный тариф</h3>
+            <p>Для корпоративных клиентов действует персональная цена при регулярном объеме и закрепленном графике поставок.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="faq">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">FAQ</span>
+            <h2 class="section-title">Частые вопросы о доставке воды в Севастополе</h2>
+          </div>
+          <p class="section-copy">Собрали вопросы, которые чаще всего задают перед первым заказом.</p>
+        </div>
+
+        <div class="faq-list">
+          <article class="faq-item reveal open">
+            <button class="faq-question" id="faq-question-1" aria-expanded="true" aria-controls="faq-answer-1">
+              <span>Как быстро вы привозите воду по Севастополю?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-1" role="region" aria-labelledby="faq-question-1">Обычно привозим воду в течение дня, а по активным маршрутам — быстрее. Точное время зависит от района и загрузки, поэтому ближайший интервал всегда подтверждаем заранее.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-1">
+            <button class="faq-question" id="faq-question-2" aria-expanded="false" aria-controls="faq-answer-2">
+              <span>Какие способы оплаты доступны?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-2" role="region" aria-labelledby="faq-question-2" hidden>Принимаем наличные, оплату картой при получении, перевод по номеру телефона и безналичный расчет для компаний. Для офисов можем выставить счет.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-2">
+            <button class="faq-question" id="faq-question-3" aria-expanded="false" aria-controls="faq-answer-3">
+              <span>Нужен ли залог за бутыль 19 литров?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-3" role="region" aria-labelledby="faq-question-3" hidden>Если у вас нет своей тары, при первом заказе может взиматься возвратный депозит за бутыль. При возврате тары депозит учитывается в следующих заказах.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-3">
+            <button class="faq-question" id="faq-question-4" aria-expanded="false" aria-controls="faq-answer-4">
+              <span>Как часто лучше заказывать воду домой?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-4" role="region" aria-labelledby="faq-question-4" hidden>Для семьи из 2-4 человек обычно достаточно заказа 2-4 бутылей 19 литров раз в 1-2 недели. Точный график зависит от потребления и наличия кулера.</div>
+          </article>
+
+          <article class="faq-item reveal">
+            <button class="faq-question" id="faq-question-5" aria-expanded="false" aria-controls="faq-answer-5">
+              <span>Откуда поступает вода и как контролируется качество?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-5" role="region" aria-labelledby="faq-question-5" hidden>Мы используем артезианскую воду из защищенного источника, проводим фильтрацию, санитарную обработку тары и регулярный лабораторный контроль. По запросу предоставляем информацию о сертификатах качества.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-1">
+            <button class="faq-question" id="faq-question-6" aria-expanded="false" aria-controls="faq-answer-6">
+              <span>Можно ли оформить доставку воды в офис?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-6" role="region" aria-labelledby="faq-question-6" hidden>Да, мы регулярно обслуживаем офисы, кафе, фитнес-клубы, студии и медицинские кабинеты. Настраиваем график, безнал и объем под ваш режим работы.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-2">
+            <button class="faq-question" id="faq-question-7" aria-expanded="false" aria-controls="faq-answer-7">
+              <span>Какой минимальный заказ действует для доставки?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-7" role="region" aria-labelledby="faq-question-7" hidden>Для воды 19 литров можно заказать от одной бутыли. Для небольших упаковок минимальная сумма заказа составляет 500 ₽, чтобы доставка оставалась быстрой и выгодной.</div>
+          </article>
+
+          <article class="faq-item reveal reveal-delay-3">
+            <button class="faq-question" id="faq-question-8" aria-expanded="false" aria-controls="faq-answer-8">
+              <span>Что делать с пустыми бутылками после использования?</span>
+              <span aria-hidden="true">+</span>
+            </button>
+            <div class="faq-answer" id="faq-answer-8" role="region" aria-labelledby="faq-question-8" hidden>Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="about">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">О компании</span>
+            <h2 class="section-title">Чистый источник, строгий контроль, понятный сервис</h2>
+          </div>
+          <p class="section-copy">Важно не только откуда вода, но и как она проходит обработку, розлив и доставку. Поэтому мы уделяем внимание качеству на каждом этапе.</p>
+        </div>
+
+        <div class="about-grid">
+          <div class="glass-card about-copy reveal">
+            <h3>Следим не только за водой, но и за тем, в каком виде она приезжает к клиенту</h3>
+            <p>Вода поступает из артезианского источника, проходит очистку и контроль перед розливом. Не меньше внимания уделяем бутылям: их состояние и санитарная обработка напрямую влияют на вкус и качество воды.</p>
+            <p class="about-copy-secondary">По запросу можно получить информацию о качестве воды и условиях поставки. Для офисов и коммерческих объектов отдельно настраиваем регулярный график, чтобы запас воды не заканчивался в рабочее время.</p>
+            <div class="chip-row hero-actions-spaced">
+              <span class="chip">артезианская вода</span>
+              <span class="chip">контроль качества</span>
+              <span class="chip">сертификаты</span>
+              <span class="chip">санобработка тары</span>
+            </div>
+          </div>
+
+          <div class="about-visual reveal reveal-delay-1" aria-hidden="true">
+            <div class="droplet"></div>
+            <div class="quality-stack">
+              <div class="quality-card"><strong>Источник</strong><br>Защищенный артезианский горизонт</div>
+              <div class="quality-card"><strong>Проверка</strong><br>Регулярный лабораторный анализ качества</div>
+              <div class="quality-card"><strong>Тара</strong><br>Санитарная обработка и контроль оборота бутылей</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="reviews">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Отзывы</span>
+            <h2 class="section-title">Что говорят клиенты о нашей воде и доставке</h2>
+          </div>
+          <p class="section-copy">Несколько отзывов от клиентов, которые заказывают воду домой, в офис и для коммерческих объектов.</p>
+        </div>
+
+        <div class="reviews-grid">
+          <article class="review-card reveal">
+            <strong>«Привозят точно в обещанный интервал»</strong>
+            <p>Заказываем воду 19 литров домой в Гагаринский район. Курьер всегда заранее звонит, поднимает бутыли и забирает пустые. Удобно, что не нужно снова объяснять адрес.</p>
+            <div class="review-meta">Марина, Севастополь</div>
+          </article>
+          <article class="review-card reveal reveal-delay-1">
+            <strong>«Для офиса это реально спасение»</strong>
+            <p>У нас небольшая команда, вода уходит быстро. С автодоставкой больше не вспоминаем в последний момент, что кулер пустой. Документы присылают без задержек.</p>
+            <div class="review-meta">Андрей, управляющий офисом</div>
+          </article>
+          <article class="review-card reveal reveal-delay-2">
+            <strong>«Вкус воды мягкий, без постороннего запаха»</strong>
+            <p>Переходили с другого поставщика и сразу почувствовали разницу. Вода приятная и для питья, и для чайника. Заказываем и 19 литров, и 5 литров домой.</p>
+            <div class="review-meta">Елена, Ленинский район</div>
+          </article>
+          <article class="review-card reveal reveal-delay-3">
+            <strong>«Хорошо работают с коммерческими заказами»</strong>
+            <p>Для нашего фитнес-клуба важна стабильность. Ребята привозят четко по графику, можно комбинировать большие бутыли и маленькие бутылки для стойки продаж.</p>
+            <div class="review-meta">Игорь, фитнес-клуб в Стрелецкой</div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="contacts">
+      <div class="container">
+        <div class="section-head">
+          <div>
+            <span class="eyebrow">Контакты</span>
+            <h2 class="section-title">Свяжитесь с нами и оформите заказ</h2>
+          </div>
+          <p class="section-copy">Позвоните нам или оставьте заявку на сайте — уточним детали и подберём удобное время доставки.</p>
+        </div>
+
+        <div class="contacts-grid">
+          <div class="contact-card reveal">
+            <h3>Контактные данные</h3>
+            <ul class="contact-list">
+              <li><strong>Телефон:</strong> <a href="tel:+79117748923">+7 (911) 774-89-23</a></li>
+              <li><strong>Адрес:</strong> г. Севастополь, ул. Генерала Острякова, 92</li>
+              <li><strong>График:</strong> ежедневно с 8:00 до 21:00</li>
+              <li><strong>E-mail:</strong> sygorenkomisha17@gmail.com</li>
+            </ul>
+
+            <form class="contact-form" id="contactForm">
+              <input class="field" type="text" name="name" placeholder="Ваше имя" aria-label="Ваше имя" required>
+              <input class="field" type="tel" name="phone" placeholder="Телефон" aria-label="Телефон" required>
+              <input class="field" type="text" name="address" placeholder="Адрес доставки в Севастополе" aria-label="Адрес доставки" required>
+              <textarea class="field" name="comment" placeholder="Что нужно доставить: например, 2 бутыли 19 л и 1 упаковка 1.5 л" aria-label="Комментарий к заказу"></textarea>
+              <button class="button" type="submit">Отправить заявку</button>
+              <div class="success-note" id="contactSuccess" role="status" aria-live="polite">Спасибо! Заявка принята. Мы свяжемся с вами для подтверждения заказа.</div>
+            </form>
+          </div>
+
+          <div class="map-placeholder reveal reveal-delay-1" aria-label="Условия обслуживания по городу">
+            <span class="eyebrow eyebrow-inverse">Зона обслуживания</span>
+            <h3 class="section-heading-compact section-heading-map">Принимаем заявки по всему Севастополю</h3>
+            <p class="map-copy">Работаем ежедневно и подбираем удобный интервал доставки для дома, офиса, кафе и небольших коммерческих точек.</p>
+
+            <div class="contact-fast-facts">
+              <article class="contact-fact-card">
+                <strong>Подтверждение заявки</strong>
+                <span>До 15 минут в рабочие часы, без долгого ожидания.</span>
+              </article>
+              <article class="contact-fact-card">
+                <strong>Окна доставки</strong>
+                <span>С 8:00 до 21:00 ежедневно, срочные слоты по возможности.</span>
+              </article>
+              <article class="contact-fact-card">
+                <strong>Дополнительный сервис</strong>
+                <span>Подъем воды и вывоз пустой тары при следующем визите.</span>
+              </article>
+            </div>
+
+            <div class="contact-quick-actions">
+              <a class="contact-quick-link" href="tel:+79117748923">Позвонить: +7 (911) 774-89-23</a>
+              <a class="contact-quick-link" href="mailto:sygorenkomisha17@gmail.com">Написать: sygorenkomisha17@gmail.com</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-card">
+          <a class="brand" href="#top" aria-label="Перейти в начало страницы">
+            <span class="brand-mark" aria-hidden="true">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
+              </svg>
+            </span>
+            <span class="brand-text">
+              <strong>АкваЛиния</strong>
+              <span>вода с доставкой для Севастополя</span>
+            </span>
+          </a>
+          <p class="footer-description">Питьевая вода для дома, офиса, кафе и небольших коммерческих точек в Севастополе. Удобный заказ на сайте и понятные условия доставки.</p>
+        </div>
+        <div class="footer-card">
+          <h3>Навигация и документы</h3>
+          <div class="footer-links">
+            <a href="#catalog">Каталог</a>
+            <a href="#delivery">Условия доставки</a>
+            <a href="#business">Для дома и офиса</a>
+            <a href="#faq">Частые вопросы</a>
+            <a href="#contacts">Контакты</a>
+          </div>
+          <div class="footer-legal">
+            <a href="#">Политика конфиденциальности</a>
+            <a href="#">Пользовательское соглашение</a>
+            <a href="#">Условия использования</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer-bottom">
+        <span>© 2026 АкваЛиния. Все права защищены.</span>
+        <span>Работаем для дома, офиса и небольшого бизнеса</span>
+      </div>
+    </div>
+  </footer>
+
+  <div class="cart-drawer" id="cartDrawer" aria-hidden="true">
+    <div class="cart-panel" role="dialog" aria-modal="true" aria-labelledby="cartTitle">
+      <div class="drawer-head">
+        <div>
+          <h3 id="cartTitle">Корзина</h3>
+          <p class="dialog-copy">Проверьте состав заказа и переходите к оформлению.</p>
+        </div>
+        <button class="close-button" id="cartCloseButton" aria-label="Закрыть корзину">×</button>
+      </div>
+
+      <div class="cart-summary">
+        <div class="summary-row"><span>Товаров</span><span id="cartItemsCount" aria-live="polite" aria-atomic="true">0</span></div>
+        <div class="summary-row"><span>Сумма</span><strong id="cartTotal" aria-live="polite" aria-atomic="true">0 ₽</strong></div>
+      </div>
+
+      <div class="cart-list" id="cartList">
+        <div class="empty-state">Корзина пока пуста. Добавьте нужные позиции из каталога и переходите к оформлению.</div>
+      </div>
+
+      <div class="cart-actions">
+        <button class="ghost-button" id="viewCartButton">Смотреть корзину</button>
+        <button class="button" id="checkoutButton">Оформить заказ</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="orderModal" aria-hidden="true">
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
+      <div class="modal-head">
+        <div>
+          <h3 id="orderModalTitle">Оформление заказа</h3>
+          <p class="dialog-copy">Оставьте контакты, и мы свяжемся с вами для подтверждения заказа.</p>
+        </div>
+        <button class="close-button" id="modalCloseButton" aria-label="Закрыть форму заказа">×</button>
+      </div>
+
+      <form class="contact-form" id="orderForm">
+        <input class="field" type="text" name="customerName" placeholder="Ваше имя" aria-label="Ваше имя" required>
+        <input class="field" type="tel" name="customerPhone" placeholder="Телефон" aria-label="Телефон" required>
+        <input class="field" type="text" name="customerAddress" placeholder="Адрес доставки" aria-label="Адрес доставки" required>
+        <select class="field" name="customerType" aria-label="Тип клиента">
+          <option value="Для дома">Для дома</option>
+          <option value="Для офиса">Для офиса</option>
+        </select>
+        <textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea>
+        <button class="button" type="submit">Подтвердить заказ</button>
+        <div class="success-note" id="orderSuccess" role="status" aria-live="polite">Спасибо! Ваш заказ сохранен. Мы свяжемся с вами в ближайшее время.</div>
+      </form>
+    </div>
+  </div>
+  <script src="index3.js"></script>
+</body>
+</html>
\ No newline at end of file