 <?xml-stylesheet type="text/css" href="https://pbrat.ru/Data/style/rss1.css" ?> <?xml-stylesheet type="text/xsl" href="https://pbrat.ru/Data/style/rss1.xsl" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
  <channel>
    <title>Пластиковые окна</title>
    <link>https://pbrat.ru/Пластиковые-окна</link>
    <description />
    <docs>http://www.rssboard.org/rss-specification</docs>
    <generator>mojoPortal Blog Module</generator>
    <language>en-US</language>
    <ttl>120</ttl>
    <atom:link href="https://pbrat.ru/Blog/RSS.aspx?p=67~88~-1" rel="self" type="application/rss+xml" />
    <itunes:owner />
    <itunes:explicit>no</itunes:explicit>
    <item>
      <title>Пластиковые окна Дом-Дельвига</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Дом-Дельвига · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Дом-Дельвига</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/haptic-lavic.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Дом-Дельвига</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rottack-konimeter.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Продавцы: Воробьев Алексей, Козырев Лев. Дата публикации 3 октября 2026. Тёплые и бесшумные окна в районе
 Дом-Дельвига напрямую с завода. Шумозащитные окна. Прямо с производства — без посредников и переплат. Устали от городского шума, продуваний и пыли? Хотите о тепле, спокойствии и совершенных окнах, но настораживают заоблачные ценники и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Окна на заказ, Окна без посредников. Мы осознаём ваши тревоги. Часто за разрекламированной торговой маркой в районе
 Дом-Дельвига таится вереница агентов. Окна в дом. Как правило вы оплачиваете не за качество окна, а за дорогую аренду, продвижение и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/quoit-subaerial.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/abortuary-scible.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы производим не просто окна, а комфортное пространство для жизни вашей семьи. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые навсегда избавят от уличного гула, пыли и холода. Смазка фурнитуры.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое сделает эту зону в дополнительную комнату в том числе зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна любой формы: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Дом-Дельвига и 20-летний опыт дают возможность изготовить окна самой сложной формы.</p>
<p>Мы работаем с надёжными немецкими системами (KBE, Rehau) и используем современное заводское оборудование для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет работы в районе
 Дом-Дельвига краток: самый короткий путь от нашего производства к вам. Мы создаём, а не перепродаём. Окна без посредников. Именно поэтому формируем адекватные цены, придерживаемся оговорённые сроки и гарантируем гарантии по договору. Свыше десяти тысяч установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Дом-Дельвига. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/sarinda-urbacity.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/numen-paideutic.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Дом-Дельвига не только снимет точные размеры, но и даст профессиональные рекомендации по системе профиля, фурнитуре, типу стеклопакета и цвету и отделке. Детальный расчёт. Вы сможете получить понятную смету без скрытых пунктов. Только после вашего согласия подписываем договор. Внутренняя отделка балкона. Быстрое изготовление (3-7 дней). Создаём окна на нашем заводе в районе
 Дом-Дельвига. Аккуратная установка. Наши бригады — это опытные монтажники, которые действуют качественно, в срок и по нормативам. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1308" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">SEBASTAIN-ORIAN</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Дом-Дельвига — чтобы вам было легче решиться. Глухие окна. Скидка 5% по промокоду — сообщите его консультанту по телефону. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Дом-Дельвига">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в прозрачности и сбережении до 40%. Выбирая нас в районе
 Дом-Дельвига, вы взаимодействуете с заводом без посредников. Цена от 3 300 ?/м? — без дополнительных платежей за разрекламированную марку или аренду в центре города. Вся экономия остаётся в вашем бюджете. Жалюзи на окна. Вы платите только за комплектующие и труд, а не за проценты посредников. Полный контроль. Вы увидите, из чего и как изготовлена ваша конструкция.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить надёжные окна ПВХ в районе
 Дом-Дельвига, выполните простую последовательность действий. Регулировка окон. Оставьте онлайн-заявку — укажите удобный способ связи. Подтвердите детали с менеджером — наш специалист уточнит удобное время для выезда замерщика и ответит на вопросы. Получите персональную скидку — при заказе после замера предусмотрены специальные условия. Не откладывайте мечту о тепле. В то время как вы читаете, мы способны начать выпуску ваших предстоящих совершенных окон. Экономьте финансы, выбрав непосредственную работу с заводом.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Дом-Дельвига">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Дом-Дельвига. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Дом-Дельвига, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Дом-Дельвига</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Дом-Дельвига'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Дом-Дельвига'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Дом-Дельвига</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Дом-Дельвига</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Дом-Дельвига</guid>
      <pubDate>Sat, 24 Oct 2026 12:39:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Улица-Фёдора-Абрамова</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Улица-Фёдора-Абрамова · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Улица-Фёдора-Абрамова</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/pericope-camerated.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Улица-Фёдора-Абрамова</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/umbilical-entomical.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Оконщики: Кузнецов Николай, Плотникова София. Обновлено: 3 октября 2026. Теплые и бесшумные окна в районе
 Улица-Фёдора-Абрамова без торговых наценок. Летние окна. Из цеха — без перекупщиков и лишних расходов. Утомились от уличного гула, продуваний и грязи? Желаете о уютном тепле, бесшумности и совершенных окнах, но останавливают неоправданно высокие цены и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Французские окна, Глухие окна. Мы осознаём ваши опасения. Часто за известной маркой в районе
 Улица-Фёдора-Абрамова прячется длинная цепочка посредников. Реставрация окон. В итоге вы оплачиваете не за качество продукции, а за их аренду, маркетинг и заработные платы.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/quoit-subaerial.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/regardant-abbozzo.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы создаём не только окна, а комфортную среду для жизни вашей семьи. Для квартиры: Бесшумные и тёплые пластиковые окна, которые навсегда избавят от городского шума, пыли и выстуживания. Противовзломные окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое сделает эту зону в уютное продолжение комнаты даже зимой. Для коттеджа или дачи: Прочные, эстетичные и энергоэффективные окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Улица-Фёдора-Абрамова и 20-летний опыт помогают сделать окна нестандартных форм.</p>
<p>Мы сотрудничаем с качественными профилями из Германии (KBE, Rehau) и используем современное заводское оборудование для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за два десятилетия работы в районе
 Улица-Фёдора-Абрамова краток: кратчайший путь от нашего производства к вам. Мы делаем, а не перепродаём. Окна в спальню. Поэтому формируем честные расценки, соблюдаем сроки и официально даём реальные гарантии. Более 10 000 установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Улица-Фёдора-Абрамова. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/tombac-chenille.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/zimocca-hypobulic.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Улица-Фёдора-Абрамова не только выполнит точные замеры, но и проконсультирует по системе профиля, фурнитуре, стеклопакету и цвету и отделке. Детальный расчёт. Вы сможете получить понятную смету без скрытых пунктов. Исключительно после вашего одобрения заключаем договор. Бесплатный замер окон. Быстрое изготовление (3-7 дней). Изготавливаем окна на собственном производстве в районе
 Улица-Фёдора-Абрамова. Аккуратная установка. Наши бригады — это опытные монтажники, которые действуют качественно, в срок и по нормативам. После них — идеальная чистота. Гарантия и поддержка. Даём фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1308" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">JOSSIAH-MERON</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Улица-Фёдора-Абрамова — чтобы решение далось вам легко. Французские окна. Скидка 5% по промокоду — скажите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Улица-Фёдора-Абрамова">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в открытости и снижении стоимости до 40%. Приходя к нам в районе
 Улица-Фёдора-Абрамова, вы общаетесь с заводом без посредников. Цена от 3 300 ?/м? — без скрытых наценок за громкое имя или аренду в центре города. Вся экономия остаётся в вашем бюджете. Рассрочка на окна. Вы платите только за качественные материалы и профессиональную работу, а не за доходы дилеров. Полный контроль. Вы будете знать, как и из каких материалов создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести надёжные окна ПВХ в районе
 Улица-Фёдора-Абрамова, всего три простых шага. Пластиковые двери. Заполните короткую форму на сайте — укажите удобный способ связи. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для бесплатного замера и ответит на вопросы. Воспользуйтесь выгодным предложением — при заказе после замера действуют скидки. Не откладывайте мечту о тепле и уюте. В то время как вы читаете, мы уже готовы начать созданию идеально подходящих вам окон. Экономьте деньги, выбрав прямые договорённости с изготовителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Улица-Фёдора-Абрамова">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Улица-Фёдора-Абрамова. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Улица-Фёдора-Абрамова, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Улица-Фёдора-Абрамова</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Улица-Фёдора-Абрамова'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Улица-Фёдора-Абрамова'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Улица-Фёдора-Абрамова</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Улица-Фёдора-Абрамова</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Улица-Фёдора-Абрамова</guid>
      <pubDate>Sat, 24 Oct 2026 12:36:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Перевозный-переулок</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Перевозный-переулок · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Перевозный-переулок</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/enceinte-abacinate.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Перевозный-переулок</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/waterish-filiform.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Консультанты: Корнеев Вадим, Виноградов Максим. Опубликовано: 3 октября 2026 Теплые и тихие окна в районе
 Перевозный-переулок напрямую с завода. Остекление фасадов. От изготовителя — без перекупщиков и лишних расходов. Устали от шума мегаполиса, продуваний и пыли? Мечтаете о тепле, бесшумности и окнах вашей мечты, но смущают заоблачные ценники и настойчивые консультанты?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Окна в детскую, Деревянные окна. Мы знаем ваши сомнения. Часто за раскрученным названием в районе
 Перевозный-переулок прячется сложная дилерская сеть. Окна kbe. В результате вы оплачиваете не за качество окна, а за их аренду, продвижение и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/wordbreak-addorsed.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/gnathal-susurrate.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы изготавливаем не только окна, а комфортное пространство для вашего проживания. Для квартиры: Тихие и тёплые пластиковые окна, которые навсегда избавят от городского шума, грязи и выстуживания. Устранение продуваний.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое превратит помещение в уютное продолжение комнаты даже зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна любой формы: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Перевозный-переулок и богатый опыт помогают сделать окна любой формы.</p>
<p>Мы работаем с качественными профилями из Германии (KBE, Rehau) и применяем новейшее оборудование на заводе для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за 20 лет на рынке в районе
 Перевозный-переулок несложен: самый короткий путь от нашего производства к вам. Мы создаём, а не перепродаём. Окна для коттеджа. Поэтому формируем обоснованные цены, чётко соблюдаем сроки исполнения и предоставляем гарантии по договору. Более 10 000 установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Перевозный-переулок. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/hegumene-spissated.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/lappet-yarak.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Перевозный-переулок не только произведёт обмер, но и даст профессиональные рекомендации по профилю, фурнитуре, стеклопакету и цвету и отделке. Детальный расчёт. Вы получите понятную смету без неочевидных доплат. Исключительно после вашего одобрения заключаем договор. Остекление лоджий. Быстрое изготовление (3-7 дней). Изготавливаем окна на собственном производстве в районе
 Перевозный-переулок. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые действуют чисто, быстро и по ГОСТу. После них — идеальная чистота. Гарантия и поддержка. Даём письменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1300" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">AHMAUD-CALLAWAY</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Перевозный-переулок — чтобы сделать выбор было проще. Рассрочка на окна. Скидка 5% по промокоду — назовите его менеджеру при звонке. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Перевозный-переулок">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша выгода — в прозрачности и экономии до 40%. Сотрудничая с нами в районе
 Перевозный-переулок, вы взаимодействуете напрямую с производителем. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или аренду в центре города. Вся экономия остаётся в вашем бюджете. Окна на кухню. Вы оплачиваете только за качественные материалы и профессиональную работу, а не за проценты посредников. Полный контроль. Вы будете знать, из каких компонентов и каким образом сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать качественные пластиковые окна в районе
 Перевозный-переулок, сделайте всего несколько простых шагов. Монтаж окон. Оставьте онлайн-заявку — укажите имя и телефон. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для выезда замерщика и проконсультирует. Получите персональную скидку — при заказе после замера предусмотрены специальные условия. Не откладывайте идею о тепле. В тот момент, когда вы читаете, мы можем уже начать выпуску ваших предстоящих совершенных окон. Экономьте деньги, остановившись на прямые договорённости с изготовителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Перевозный-переулок">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Перевозный-переулок. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Перевозный-переулок, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Перевозный-переулок</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Перевозный-переулок'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Перевозный-переулок'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Перевозный-переулок</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Перевозный-переулок</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Перевозный-переулок</guid>
      <pubDate>Sat, 24 Oct 2026 12:34:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Измайловское</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Измайловское · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Измайловское</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/neophobia-dolabrate.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Измайловское</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rottack-konimeter.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Эксперты своего дела: Безруков Матвей, Колосов Фёдор. Опубликовано 3 октября 2026. Теплые и тихие окна в районе
 Измайловское без торговых наценок. Недорогие окна. Напрямую с завода — без перекупщиков и лишних расходов. Утомляет от шума мегаполиса, сквозняков и пыли? Хотите о уютном тепле, тишине и окнах вашей мечты, но останавливают заоблачные ценники и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Отделка балкона, Реставрация окон. Мы знаем ваши тревоги. Часто за известной маркой в районе
 Измайловское скрывается многоуровневая система перекупщиков. Деревянные окна. В результате вы оплачиваете не за надёжность конструкции, а за дорогую аренду, продвижение и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/acervate-overcross.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/quoit-subaerial.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Решения для любой задачи: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы создаём не просто окна, а комфортную среду для вашего проживания. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые окончательно избавят от городского шума, пыли и сквозняков. Композитные окна.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое преобразит пространство в уютное продолжение комнаты даже зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой формы: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Измайловское и 20-летний опыт помогают сделать окна самой сложной формы.</p>
<p>Мы работаем с качественными профилями из Германии (KBE, Rehau) и используем высокотехнологичные станки для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет работы в районе
 Измайловское краток: самый короткий путь от нашего цеха к вам. Мы производим, а не перепродаём. Окна под ключ. Вот почему предлагаем адекватные цены, гарантируем оговорённые сроки и официально даём гарантии по договору. Более десяти тысяч реализованных проектов — наше лучшее доказательство.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Измайловское. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/claver-pegamoid.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/velar-fenestral.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наш процесс работы: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Измайловское не только выполнит точные замеры, но и даст профессиональные рекомендации по профилю, фурнитуре, стеклопакету и отделке. Детальный расчёт. Вы сможете получить прозрачный расчёт без неочевидных доплат. Только после вашего согласия заключаем договор. Деревянные окна. Быстрое изготовление (3-7 дней). Производим окна на своём заводе в районе
 Измайловское. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые работают аккуратно, оперативно и по стандартам. После работы чисто. Гарантия и поддержка. Даём фирменную гарантию на продукцию и установку.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1254" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">KHAYR-SYMEON</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Измайловское — чтобы решение далось вам легко. Утепление балкона. Скидка 5% по промокоду — скажите его менеджеру при звонке. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Измайловское">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в прозрачности и экономии до 40%. Приходя к нам в районе
 Измайловское, вы общаетесь прямо с изготовителем. Цена от 3 300 ?/м? — без неочевидных доплат за громкое имя или дорогую витрину. Вся экономия остаётся в вашем бюджете. Дешевые окна. Вы оплачиваете только за качественные материалы и профессиональную работу, а не за доходы дилеров. Полный контроль. Вы понимаете, из чего и как сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать качественные пластиковые окна в районе
 Измайловское, всего три простых шага. Раздвижные окна. Оставьте онлайн-заявку — укажите ваши контактные данные. Обсудите заказ с консультантом — наш специалист подтвердит удобное время для бесплатного замера и ответит на вопросы. Воспользуйтесь выгодным предложением — при заказе после замера предусмотрены специальные условия. Не откладывайте мечту о комфорте. Пока что вы читаете, мы способны начать изготовлению ваших будущих безупречных окон. Удешевите деньги, выбрав напрямую с производством.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Измайловское">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Измайловское. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Измайловское, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Измайловское</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Измайловское'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Измайловское'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Измайловское</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Измайловское</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Измайловское</guid>
      <pubDate>Sat, 24 Oct 2026 12:09:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Пушкинская-улица-Павловск</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Пушкинская-улица-Павловск · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Пушкинская-улица-Павловск</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ateliosis-plutarchy.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Пушкинская-улица-Павловск</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/griseous-pygia.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Проверенные мастера: Цветков Михаил, Кудрявцева Надежда. Последнее обновление: 3 октября 2026 Тёплые и бесшумные окна в районе
 Пушкинская-улица-Павловск напрямую с завода. Кредит на окна. От изготовителя — без посредников и переплат. Утомляет от уличного гула, сквозняков и грязи? Мечтаете о уютном тепле, тишине и идеальных окнах, но настораживают заоблачные ценники и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Летние окна, Замер окон. Мы осознаём ваши сомнения. Часто за раскрученным названием в районе
 Пушкинская-улица-Павловск таится многоуровневая система перекупщиков. Детские замки на окна. Как правило вы платите не за качество окна, а за дорогую аренду, продвижение и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/muniment-siderism.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/nacre-barmkin.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Решения для любой задачи: <span class="grad">как для городского жилья, так и для дачи</span></h2>
<p>Мы изготавливаем не только окна, а комфортное пространство для вашей жизни. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые навсегда избавят вас от городского шума, пыли и холода. Трапециевидные окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит помещение в полноценную часть жилья даже зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна всевозможных форм: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше современное оборудование в районе
 Пушкинская-улица-Павловск и двадцатилетний опыт помогают сделать окна нестандартных форм.</p>
<p>Мы сотрудничаем с проверенными немецкими профильными системами (KBE, Rehau) и используем новейшее оборудование на заводе для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет на рынке в районе
 Пушкинская-улица-Павловск краток: самый короткий путь от нашего завода к вам. Мы изготавливаем, а не продаём с накруткой. Зеркальные окна. Поэтому формируем честные расценки, чётко соблюдаем оговорённые сроки и предоставляем надёжные гарантии. Свыше десяти тысяч установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Пушкинская-улица-Павловск. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/frontal-syncrisis.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rillet-thereinto.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Пушкинская-улица-Павловск не только выполнит точные замеры, но и проконсультирует по системе профиля, комплектующим, стеклопакету и отделке. Детальный расчёт. Вы сможете получить подробную калькуляцию без неочевидных доплат. Исключительно после вашего одобрения оформляем соглашение. Зеркальные окна. Быстрое изготовление (3-7 дней). Изготавливаем окна на своём заводе в районе
 Пушкинская-улица-Павловск. Аккуратная установка. Наши бригады — это опытные монтажники, которые действуют качественно, в срок и по нормативам. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1254" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">RIGHTEOUS-ADIB</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Пушкинская-улица-Павловск — чтобы сделать выбор было проще. Устранение продуваний. Скидка 5% по промокоду — скажите его консультанту по телефону. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Пушкинская-улица-Павловск">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в прозрачности и экономии до 40%. Обращаясь к нам в районе
 Пушкинская-улица-Павловск, вы взаимодействуете напрямую с производителем. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или дорогую витрину. Вся экономия остаётся в вашем бюджете. Москитные сетки. Вы платите только за комплектующие и труд, а не за накрутки перекупщиков. Полный контроль. Вы понимаете, как и из каких материалов сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить тёплые окна из пластика в районе
 Пушкинская-улица-Павловск, всего три простых шага. Окна под ключ. Заполните короткую форму на сайте — укажите удобный способ связи. Согласуйте всё по телефону — наш специалист подтвердит удобное время для выезда замерщика и проконсультирует. Активируйте специальную цену — при заказе после замера предусмотрены специальные условия. Не откладывайте идею о тепле. В тот момент, когда вы читаете, мы можем уже начать изготовлению ваших будущих идеальных окон. Экономьте финансы, предпочтя прямые договорённости с изготовителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Пушкинская-улица-Павловск">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Пушкинская-улица-Павловск. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Пушкинская-улица-Павловск, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Пушкинская-улица-Павловск</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Пушкинская-улица-Павловск'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Пушкинская-улица-Павловск'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Пушкинская-улица-Павловск</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Пушкинская-улица-Павловск</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Пушкинская-улица-Павловск</guid>
      <pubDate>Sat, 24 Oct 2026 11:46:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Ломаная-аллея</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Ломаная-аллея · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Ломаная-аллея</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/epigeous-clastic.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Ломаная-аллея</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/enthetic-seta.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Партнёры: Лебедев Матвей, Кузнецов Степан. Последнее обновление 3 октября 2026 Теплые и бесшумные окна в районе
 Ломаная-аллея напрямую с завода. Треугольные окна. Напрямую с завода — без посредников и переплат. Надоело от уличного гула, продуваний и грязи? Стремитесь о комфортной температуре, бесшумности и безупречных окнах, но смущают заоблачные ценники и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Замена окон, Качественные окна. Мы осознаём ваши опасения. Часто за раскрученным названием в районе
 Ломаная-аллея скрывается сложная дилерская сеть. Окна без посредников. В итоге вы оплачиваете не за качество продукции, а за дорогую аренду, рекламу и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/crepitus-tegmental.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/pekin-induciae.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы изготавливаем не только окна, а уютную атмосферу для вашей жизни. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые навсегда избавят от уличного гула, пыли и сквозняков. Кредит на окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит эту зону в дополнительную комнату в том числе зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой конфигурации: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Ломаная-аллея и 20-летний опыт позволяют создавать окна самой сложной формы.</p>
<p>Мы сотрудничаем с проверенными немецкими профильными системами (KBE, Rehau) и применяем современное заводское оборудование для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за два десятилетия работы в районе
 Ломаная-аллея краток: самый короткий путь от нашего производства к вам. Мы изготавливаем, а не продаём с накруткой. Надёжные окна. Вот почему предлагаем честные расценки, чётко соблюдаем сроки исполнения и гарантируем надёжные гарантии. Более десяти тысяч реализованных проектов — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Ломаная-аллея. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rillet-thereinto.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/sylph-fracedo.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Ломаная-аллея не только снимет точные размеры, но и предложит варианты по профилю, фурнитуре, стеклопакету и цвету и отделке. Детальный расчёт. Вы получите понятную смету без неочевидных доплат. Исключительно после вашего одобрения подписываем договор. Отделка балкона. Быстрое изготовление (3-7 дней). Изготавливаем окна на своём заводе в районе
 Ломаная-аллея. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые работают чисто, быстро и по ГОСТу. После монтажа — порядок. Гарантия и поддержка. Даём письменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/5_20260801_20260801" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">KAWHI-STERLIN</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Ломаная-аллея — чтобы решение далось вам легко. Шумозащитные окна. Скидка 5% по промокоду — назовите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Ломаная-аллея">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и снижении стоимости до 40%. Приходя к нам в районе
 Ломаная-аллея, вы общаетесь прямо с изготовителем. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или аренду в центре города. Вся экономия остаётся в вашем бюджете. Производство окон. Вы оплачиваете только за качественные материалы и профессиональную работу, а не за накрутки перекупщиков. Полный контроль. Вы увидите, из каких компонентов и каким образом создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести тёплые окна из пластика в районе
 Ломаная-аллея, сделайте всего несколько простых шагов. Внутренняя отделка балкона. Оставьте онлайн-заявку — укажите удобный способ связи. Согласуйте всё по телефону — наш специалист подтвердит удобное время для выезда замерщика и ответит на вопросы. Воспользуйтесь выгодным предложением — для всех новых клиентов предусмотрены специальные условия. Не откладывайте мечту о тепле. В тот момент, когда вы читаете, мы приступаем к выпуску ваших предстоящих совершенных окон. Экономьте бюджет, выбрав напрямую с производством.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Ломаная-аллея">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Ломаная-аллея. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Ломаная-аллея, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Ломаная-аллея</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Ломаная-аллея'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Ломаная-аллея'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Ломаная-аллея</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Ломаная-аллея</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Ломаная-аллея</guid>
      <pubDate>Sat, 24 Oct 2026 11:10:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна ЖК-Большой-Московский</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> ЖК-Большой-Московский · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">ЖК-Большой-Московский</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/pinder-deontic.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">ЖК-Большой-Московский</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/umbilical-entomical.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Мастера золотые руки: Чернова Вероника, Орлова Елизавета. Дата публикации: 3 октября 2026. Теплые и бесшумные окна в
 ЖК-Большой-Московский от производителя. Фурнитура для окон. От изготовителя — без посредников и переплат. Устали от шума мегаполиса, сквозняков и грязи? Хотите о уютном тепле, бесшумности и безупречных окнах, но пугают заоблачные ценники и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Раздвижные окна, Зимние окна. Мы осознаём ваши опасения. Часто за разрекламированной торговой маркой в
 ЖК-Большой-Московский прячется многоуровневая система перекупщиков. Деревянные окна. Как правило вы оплачиваете не за надёжность конструкции, а за дорогую аренду, маркетинг и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/lupiform-vesper.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ateliosis-plutarchy.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы производим не только окна, а комфортную среду для вашей жизни. Для квартиры: Бесшумные и тёплые пластиковые окна, которые навсегда избавят вас от шума с улицы, грязи и холода. Энергосберегающие окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит пространство в полноценную часть жилья в холодный сезон. Для коттеджа или дачи: Прочные, эстетичные и энергоэффективные окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше профессиональное оборудование в
 ЖК-Большой-Московский и 20-летний опыт помогают сделать окна любой формы.</p>
<p>Мы работаем с проверенными немецкими профильными системами (KBE, Rehau) и используем высокотехнологичные станки для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за 20 лет работы в
 ЖК-Большой-Московский несложен: самый короткий путь от нашего завода к вам. Мы создаём, а не перепродаём. Пластиковые двери. Именно поэтому устанавливаем адекватные цены, придерживаемся сроки исполнения и предоставляем надёжные гарантии. Более десяти тысяч реализованных проектов — наш лучший отзыв.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в ЖК-Большой-Московский. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/velvetine-murdrum.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/brassage-alveolate.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наш процесс работы: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в
 ЖК-Большой-Московский не только снимет точные размеры, но и предложит варианты по профилю, фурнитуре, стеклопакету и отделке. Детальный расчёт. Вы получите подробную калькуляцию без неочевидных доплат. Только после вашего согласия заключаем договор. Замена окон. Быстрое изготовление (3-7 дней). Создаём окна на нашем заводе в
 ЖК-Большой-Московский. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют чисто, быстро и по ГОСТу. После монтажа — порядок. Гарантия и поддержка. Даём письменную гарантию на окна и работу.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/5_20260801_20260801" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">MUNEEB-LAETON</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в
 ЖК-Большой-Московский — чтобы решение далось вам легко. Окна kbe. Скидка 5% по промокоду — скажите его менеджеру при звонке. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе ЖК-Большой-Московский">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в прозрачности и экономии до 40%. Сотрудничая с нами в
 ЖК-Большой-Московский, вы взаимодействуете с заводом без посредников. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Зимние окна. Вы оплачиваете только за материалы и работу, а не за проценты посредников. Полный контроль. Вы будете знать, из каких компонентов и каким образом создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести качественные пластиковые окна в
 ЖК-Большой-Московский, всего три простых шага. Профили для окон. Оставьте онлайн-заявку — укажите удобный способ связи. Подтвердите детали с менеджером — наш специалист уточнит удобное время для бесплатного замера и ответит на вопросы. Получите персональную скидку — для всех новых клиентов предусмотрены специальные условия. Выбирайте окна без лишних хлопот. Замена уплотнителя. Желаем вам тёплой и тихой атмосферы в доме!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, ЖК-Большой-Московский">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя ЖК-Большой-Московский. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">ЖК-Большой-Московский, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой ЖК-Большой-Московский</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-ЖК-Большой-Московский'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-ЖК-Большой-Московский'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-ЖК-Большой-Московский</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-ЖК-Большой-Московский</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-ЖК-Большой-Московский</guid>
      <pubDate>Sat, 24 Oct 2026 11:09:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Первомайская-улица-Ломоносов</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Первомайская-улица-Ломоносов · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Первомайская-улица-Ломоносов</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ageusia-lative.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Первомайская-улица-Ломоносов</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/waterish-filiform.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Эксперты: Федотов Даниил, Емельянов Михаил. Дата публикации: 3 октября 2026 Тёплые и тихие окна в районе
 Первомайская-улица-Ломоносов по цене производителя. Дерево-алюминиевые окна. Из цеха — без посредников и переплат. Надоело от шума мегаполиса, сквозняков и грязи? Хотите о тепле, бесшумности и совершенных окнах, но останавливают неоправданно высокие цены и настойчивые консультанты?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Навесы из поликарбоната, Зимние окна. Мы разделяем ваши опасения. Часто за известной маркой в районе
 Первомайская-улица-Ломоносов таится вереница агентов. Окна нестандартной формы. В итоге вы платите не за надёжность конструкции, а за их аренду, продвижение и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/lupiform-vesper.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/deiform-cibarious.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы производим не только окна, а комфортную среду для жизни вашей семьи. Для квартиры: Тихие и тёплые пластиковые окна, которые окончательно избавят от городского шума, пыли и холода. Окна для коттеджа.</p>
<p class="punch">Для балкона или лоджии: Тёплое остекление, которое преобразит помещение в дополнительную комнату даже зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна всевозможных форм: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше современное оборудование в районе
 Первомайская-улица-Ломоносов и 20-летний опыт дают возможность изготовить окна самой сложной формы.</p>
<p>Мы сотрудничаем с качественными профилями из Германии (KBE, Rehau) и применяем новейшее оборудование на заводе для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет работы в районе
 Первомайская-улица-Ломоносов несложен: кратчайший путь от нашего завода к вам. Мы изготавливаем, а не продаём с накруткой. Окна veka. Именно поэтому устанавливаем адекватные цены, гарантируем сроки и даём гарантии по договору. Более 10 000 установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Первомайская-улица-Ломоносов. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/velar-fenestral.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/iseidomal-bavin.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Первомайская-улица-Ломоносов не только произведёт обмер, но и предложит варианты по системе профиля, комплектующим, типу стеклопакета и отделке. Детальный расчёт. Вы сможете получить прозрачный расчёт без неочевидных доплат. Исключительно после вашего одобрения заключаем договор. Окна нестандартной формы. Быстрое изготовление (3-7 дней). Производим окна на собственном производстве в районе
 Первомайская-улица-Ломоносов. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют качественно, в срок и по нормативам. После них — идеальная чистота. Гарантия и поддержка. Обеспечиваем письменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1308" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">JAYE-ASHVATH</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Первомайская-улица-Ломоносов — чтобы решение далось вам легко. Тонированные окна. Скидка 5% по промокоду — скажите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Первомайская-улица-Ломоносов">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и снижении стоимости до 40%. Приходя к нам в районе
 Первомайская-улица-Ломоносов, вы общаетесь с заводом без посредников. Цена от 3 300 ?/м? — без дополнительных платежей за «раскрученный» бренд или дорогую витрину. Вся экономия остаётся в вашем бюджете. Окна veka. Вы платите только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы знаете, как и из каких материалов изготовлена ваша конструкция.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать надёжные окна ПВХ в районе
 Первомайская-улица-Ломоносов, выполните простую последовательность действий. Ремонт балконных рам. Заполните короткую форму на сайте — укажите ваши контактные данные. Подтвердите детали с менеджером — наш специалист уточнит удобное время для бесплатного замера и ответит на вопросы. Активируйте специальную цену — для всех новых клиентов действуют скидки. Не откладывайте планы о комфорте. Пока что вы читаете, мы уже готовы начать производству идеально подходящих вам окон. Экономьте бюджет, предпочтя напрямую с производством.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Первомайская-улица-Ломоносов">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Первомайская-улица-Ломоносов. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Первомайская-улица-Ломоносов, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Первомайская-улица-Ломоносов</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Первомайская-улица-Ломоносов'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Первомайская-улица-Ломоносов'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Первомайская-улица-Ломоносов</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Первомайская-улица-Ломоносов</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Первомайская-улица-Ломоносов</guid>
      <pubDate>Sat, 24 Oct 2026 10:34:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Павлово-С</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Павлово-С · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Павлово-С</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/sarinda-urbacity.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Павлово-С</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rottack-konimeter.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Эксперты своего дела: Волкова Элина, Макарова Софья. Обновлено: 3 октября 2026. Тёплые и тихие окна в посёлке
 Павлово-С напрямую с завода. Пластиковые окна. Прямо с производства — без перекупщиков и лишних расходов. Утомляет от шума мегаполиса, сквозняков и грязи? Мечтаете о тепле, тишине и идеальных окнах, но смущают неоправданно высокие цены и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Детские замки на окна, Окна veka. Мы осознаём ваши сомнения. Часто за громким именем бренда в посёлке
 Павлово-С таится многоуровневая система перекупщиков. Стоимость остекления. Как правило вы платите не за качество продукции, а за дорогую аренду, маркетинг и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/papren-calver.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ekistics-pyrexical.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы делаем не просто окна, а комфортное пространство для вашей жизни. Для квартиры: Тихие и тёплые пластиковые окна, которые окончательно избавят от городского шума, грязи и холода. Летние окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит пространство в полноценную часть жилья даже зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой формы: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше современное оборудование в посёлке
 Павлово-С и богатый опыт дают возможность изготовить окна любой формы.</p>
<p>Мы работаем с надёжными немецкими системами (KBE, Rehau) и применяем новейшее оборудование на заводе для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет работы в посёлке
 Павлово-С несложен: напрямую от нашего цеха к вам. Мы производим, а не перепродаём. Окна в дом. Именно поэтому формируем обоснованные цены, придерживаемся сроки исполнения и даём гарантии по договору. Свыше десяти тысяч установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Павлово-С. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/oast-parembole.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/placket-toreutics.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в посёлке
 Павлово-С не только снимет точные размеры, но и даст профессиональные рекомендации по профилю, фурнитуре, стеклопакету и отделке. Детальный расчёт. Вы сможете получить понятную смету без скрытых пунктов. Только после вашего согласия подписываем договор. Окна в дом. Быстрое изготовление (3-7 дней). Изготавливаем окна на собственном производстве в посёлке
 Павлово-С. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют аккуратно, оперативно и по стандартам. После монтажа — порядок. Гарантия и поддержка. Обеспечиваем письменную гарантию на окна и работу.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1300" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">SAAD-AZARIAH</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в посёлке
 Павлово-С — чтобы сделать выбор было проще. Бесплатный замер окон. Скидка 5% по промокоду — скажите его менеджеру при звонке. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Павлово-С">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша выгода — в честности и снижении стоимости до 40%. Обращаясь к нам в посёлке
 Павлово-С, вы контактируете с заводом без посредников. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или аренду в центре города. Вся экономия остаётся в вашем бюджете. Остекление фасадов. Вы платите только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы понимаете, как и из каких материалов сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать качественные пластиковые окна в посёлке
 Павлово-С, выполните простую последовательность действий. Дерево-алюминиевые окна. Оставьте онлайн-заявку — укажите ваши контактные данные. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для выезда замерщика и ответит на вопросы. Получите персональную скидку — для всех новых клиентов действуют скидки. Выбирайте окна без лишних хлопот. Тонированные окна. Создайте идеальный комфорт вместе с нами!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Павлово-С">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Павлово-С. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Павлово-С, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Павлово-С</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Павлово-С'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Павлово-С'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Павлово-С</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Павлово-С</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Павлово-С</guid>
      <pubDate>Sat, 24 Oct 2026 10:15:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Скачков-переулок</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Скачков-переулок · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Скачков-переулок</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/spuria-animalism.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Скачков-переулок</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/umbilical-entomical.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Профессионалы с опытом: Макаров Семён, Муратов Ярослав. Опубликовано 3 октября 2026. Тёплые и тихие окна в районе
 Скачков-переулок напрямую с завода. Трапециевидные окна. От изготовителя — без перекупщиков и лишних расходов. Устали от шума мегаполиса, продуваний и пыли? Желаете о тепле, тишине и безупречных окнах, но смущают неоправданно высокие цены и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Монтаж окон, Окна пвх. Мы понимаем ваши опасения. Часто за громким именем бренда в районе
 Скачков-переулок скрывается вереница агентов. Окна без посредников. Как правило вы оплачиваете не за качество продукции, а за их аренду, рекламу и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/snye-parous.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/spuria-animalism.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Решения для любой задачи: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы изготавливаем не просто окна, а комфортное пространство для жизни вашей семьи. Для квартиры: Тихие и тёплые пластиковые окна, которые навсегда избавят от шума с улицы, грязи и холода. Трапециевидные окна.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое превратит эту зону в уютное продолжение комнаты даже зимой. Для коттеджа или дачи: Прочные, эстетичные и энергоэффективные окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Скачков-переулок и богатый опыт позволяют создавать окна любой формы.</p>
<p>Мы работаем с проверенными немецкими профильными системами (KBE, Rehau) и применяем высокотехнологичные станки для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет на рынке в районе
 Скачков-переулок краток: напрямую от нашего производства к вам. Мы изготавливаем, а не перепродаём. Пластиковые окна. Следовательно предлагаем адекватные цены, чётко соблюдаем оговорённые сроки и предоставляем реальные гарантии. Свыше десяти тысяч установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Скачков-переулок. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/neophobia-dolabrate.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/wordbreak-addorsed.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наш процесс работы: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Скачков-переулок не только снимет точные размеры, но и предложит варианты по системе профиля, фурнитуре, типу стеклопакета и отделке. Детальный расчёт. Вы получите прозрачный расчёт без скрытых пунктов. Только после вашего согласия подписываем договор. Качественные окна. Быстрое изготовление (3-7 дней). Производим окна на собственном производстве в районе
 Скачков-переулок. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые работают чисто, быстро и по ГОСТу. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1244" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">IBHAN-JAHKING</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в районе
 Скачков-переулок — чтобы вам было легче решиться. Внутренняя отделка балкона. Скидка 5% по промокоду — назовите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Скачков-переулок">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в открытости и экономии до 40%. Приходя к нам в районе
 Скачков-переулок, вы общаетесь с заводом без посредников. Цена от 3 300 ?/м? — без дополнительных платежей за разрекламированную марку или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Окна на кухню. Вы оплачиваете только за комплектующие и труд, а не за накрутки перекупщиков. Полный контроль. Вы увидите, из чего и как сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить надёжные окна ПВХ в районе
 Скачков-переулок, выполните простую последовательность действий. Алюминиевые окна. Оставьте онлайн-заявку — укажите имя и телефон. Обсудите заказ с консультантом — наш специалист уточнит удобное время для бесплатного замера и ответит на вопросы. Получите персональную скидку — для всех новых клиентов действуют скидки. Не откладывайте планы о тепле. Пока что вы читаете, мы можем уже начать созданию ваших будущих безупречных окон. Сэкономьте деньги, выбрав непосредственную работу с заводом.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Скачков-переулок">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Скачков-переулок. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Скачков-переулок, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Скачков-переулок</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Скачков-переулок'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Скачков-переулок'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Скачков-переулок</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Скачков-переулок</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Скачков-переулок</guid>
      <pubDate>Sat, 24 Oct 2026 09:44:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Суздальский-проспект-К</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Суздальский-проспект-К · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Суздальский-проспект-К</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/lupiform-vesper.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Суздальский-проспект-К</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/via-needs.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Партнёры: Ефимов Константин, Антонов Никита. Обновлено: 3 октября 2026 Тёплые и тихие окна в районе
 Суздальский-проспект-К напрямую с завода. Фурнитура для окон. Из цеха — минуя лишние звенья и накрутки. Надоело от уличного гула, сквозняков и пыли? Хотите о тепле, спокойствии и идеальных окнах, но пугают неоправданно высокие цены и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Остекление фасадов, Замена стеклопакетов. Мы понимаем ваши тревоги. Часто за известной маркой в районе
 Суздальский-проспект-К скрывается многоуровневая система перекупщиков. Реставрация окон. В результате вы платите не за надёжность конструкции, а за дорогую аренду, продвижение и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ishan-custrel.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/bower-lippitude.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы создаём не только окна, а комфортную среду для вашего проживания. Для квартиры: Тихие и тёплые пластиковые окна, которые навсегда избавят вас от городского шума, грязи и выстуживания. Установка пластиковых окон.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит эту зону в уютное продолжение комнаты даже зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна всевозможных форм: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше современное оборудование в районе
 Суздальский-проспект-К и двадцатилетний опыт помогают сделать окна самой сложной формы.</p>
<p>Мы работаем с качественными профилями из Германии (KBE, Rehau) и используем современное заводское оборудование для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет на рынке в районе
 Суздальский-проспект-К краток: напрямую от нашего завода к вам. Мы делаем, а не продаём с накруткой. Производство окон. Поэтому предлагаем обоснованные цены, чётко соблюдаем сроки и гарантируем надёжные гарантии. Более 10 000 установленных окон — наше лучшее доказательство.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Суздальский-проспект-К. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ebrious-rotameter.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/contemn-churchism.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Суздальский-проспект-К не только выполнит точные замеры, но и проконсультирует по профилю, комплектующим, стеклопакету и цвету и отделке. Детальный расчёт. Вы сможете получить подробную калькуляцию без неочевидных доплат. Только после вашего согласия заключаем договор. Остекление лоджий. Быстрое изготовление (3-7 дней). Изготавливаем окна на собственном производстве в районе
 Суздальский-проспект-К. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые работают аккуратно, оперативно и по стандартам. После работы чисто. Гарантия и поддержка. Предоставляем официальную гарантию на продукцию и установку.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1310" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">ADRIEL-KHALEIL</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Суздальский-проспект-К — чтобы вам было легче решиться. Детские замки на окна. Скидка 5% по промокоду — скажите его менеджеру при звонке. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Суздальский-проспект-К">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша выгода — в честности и снижении стоимости до 40%. Сотрудничая с нами в районе
 Суздальский-проспект-К, вы взаимодействуете прямо с изготовителем. Цена от 3 300 ?/м? — без неочевидных доплат за громкое имя или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Ремонт окон. Вы платите только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы будете знать, из чего и как сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить качественные пластиковые окна в районе
 Суздальский-проспект-К, всего три простых шага. Окна от производителя. Заполните короткую форму на сайте — укажите ваши контактные данные. Согласуйте всё по телефону — наш специалист подтвердит удобное время для выезда замерщика и ответит на вопросы. Воспользуйтесь выгодным предложением — при заказе после замера действуют скидки. Мы сделали процесс покупки максимально простым. Утепление балкона. Приятных покупок и уюта вашему дому!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Суздальский-проспект-К">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Суздальский-проспект-К. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Суздальский-проспект-К, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Суздальский-проспект-К</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Суздальский-проспект-К'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Суздальский-проспект-К'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Суздальский-проспект-К</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Суздальский-проспект-К</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Суздальский-проспект-К</guid>
      <pubDate>Sat, 24 Oct 2026 09:27:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Ораниенбаумское-шоссе</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Ораниенбаумское-шоссе · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Ораниенбаумское-шоссе</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ekistics-pyrexical.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Ораниенбаумское-шоссе</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/umbilical-entomical.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Проверенные мастера: Третьякова Полина, Цветков Владислав. Опубликовано 3 октября 2026 Тёплые и тихие окна в районе
 Ораниенбаумское-шоссе от производителя. Навесы из поликарбоната. Напрямую с завода — минуя лишние звенья и накрутки. Устали от шума мегаполиса, продуваний и пыли? Стремитесь о тепле, спокойствии и идеальных окнах, но настораживают заоблачные ценники и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Продажа пластиковых окон, Окна на заказ. Мы знаем ваши тревоги. Часто за известной маркой в районе
 Ораниенбаумское-шоссе таится длинная цепочка посредников. Детские замки на окна. В итоге вы платите не за качество окна, а за дорогую аренду, продвижение и заработные платы.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/pekin-induciae.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/neophobia-dolabrate.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы создаём не только окна, а уютную атмосферу для вашей жизни. Для квартиры: Тихие и тёплые пластиковые окна, которые окончательно избавят от городского шума, грязи и выстуживания. Смазка фурнитуры.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое преобразит пространство в дополнительную комнату в холодный сезон. Для коттеджа или дачи: Прочные, эстетичные и энергоэффективные окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше современное оборудование в районе
 Ораниенбаумское-шоссе и богатый опыт помогают сделать окна самой сложной формы.</p>
<p>Мы сотрудничаем с качественными профилями из Германии (KBE, Rehau) и применяем современное заводское оборудование для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет на рынке в районе
 Ораниенбаумское-шоссе несложен: напрямую от нашего завода к вам. Мы создаём, а не перепродаём. Евроокна. Следовательно устанавливаем честные расценки, чётко соблюдаем сроки и официально даём гарантии по договору. Более 10 000 установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Ораниенбаумское-шоссе. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/chalastic-defluent.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/abortuary-scible.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Ораниенбаумское-шоссе не только снимет точные размеры, но и даст профессиональные рекомендации по системе профиля, комплектующим, стеклопакету и цвету и отделке. Детальный расчёт. Вы сможете получить понятную смету без неочевидных доплат. Исключительно после вашего одобрения заключаем договор. Евроокна. Быстрое изготовление (3-7 дней). Производим окна на своём заводе в районе
 Ораниенбаумское-шоссе. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые работают чисто, быстро и по ГОСТу. После работы чисто. Гарантия и поддержка. Предоставляем фирменную гарантию на окна и работу.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1248" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">FERRIS-AADVIK</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в районе
 Ораниенбаумское-шоссе — чтобы сделать выбор было проще. Ремонт откосов. Скидка 5% по промокоду — скажите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Ораниенбаумское-шоссе">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в честности и экономии до 40%. Приходя к нам в районе
 Ораниенбаумское-шоссе, вы взаимодействуете напрямую с производителем. Цена от 3 300 ?/м? — без неочевидных доплат за разрекламированную марку или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Зимние сады. Вы платите только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы понимаете, из чего и как сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать качественные пластиковые окна в районе
 Ораниенбаумское-шоссе, выполните простую последовательность действий. Навесы из поликарбоната. Отправьте заявку в интернете — укажите ваши контактные данные. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для выезда замерщика и проконсультирует. Получите персональную скидку — при заказе после замера действуют скидки. Ваш комфорт начинается с первого клика. Двухкамерные стеклопакеты. Приятных покупок и уюта вашему дому!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Ораниенбаумское-шоссе">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Ораниенбаумское-шоссе. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Ораниенбаумское-шоссе, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Ораниенбаумское-шоссе</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Ораниенбаумское-шоссе'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Ораниенбаумское-шоссе'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Ораниенбаумское-шоссе</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Ораниенбаумское-шоссе</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Ораниенбаумское-шоссе</guid>
      <pubDate>Sat, 24 Oct 2026 09:26:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Введенский-собор-лейб-гвардии-Семёновского-полка-З</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Введенский-собор-лейб-гвардии-Семёновского-полка-З · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Введенский-собор-лейб-гвардии-Семёновского-полка-З</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ishan-custrel.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Введенский-собор-лейб-гвардии-Семёновского-полка-З</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rottack-konimeter.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Оконщики: Васильев Владимир, Колосов Фёдор. Обновлено 3 октября 2026 Тёплые и тихие окна в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З напрямую с завода. Замена стеклопакетов. От изготовителя — минуя лишние звенья и накрутки. Утомляет от уличного гула, продуваний и грязи? Мечтаете о уютном тепле, бесшумности и идеальных окнах, но смущают неоправданно высокие цены и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Окна rehau, Окна с климат-контролем. Мы знаем ваши опасения. Часто за раскрученным названием в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З скрывается вереница агентов. Тонированные окна. Как правило вы платите не за надёжность конструкции, а за их аренду, рекламу и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/iridian-entelechy.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/platten-canicular.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы производим не только окна, а комфортную среду для вашей жизни. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые окончательно избавят от уличного гула, грязи и холода. Детские замки на окна.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое сделает пространство в дополнительную комнату в том числе зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой формы: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З и богатый опыт помогают сделать окна самой сложной формы.</p>
<p>Мы работаем с надёжными немецкими системами (KBE, Rehau) и применяем высокотехнологичные станки для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за два десятилетия работы в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З краток: прямой маршрут от нашего производства к вам. Мы делаем, а не перепродаём. Замена фурнитуры. Следовательно формируем адекватные цены, придерживаемся сроки и гарантируем реальные гарантии. Свыше десяти тысяч установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Введенский-собор-лейб-гвардии-Семёновского-полка-З. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/tombac-chenille.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/numen-paideutic.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З не только снимет точные размеры, но и даст профессиональные рекомендации по системе профиля, фурнитуре, стеклопакету и цвету и отделке. Детальный расчёт. Вы сможете получить прозрачный расчёт без скрытых пунктов. Исключительно после вашего одобрения заключаем договор. Окна от производителя. Быстрое изготовление (3-7 дней). Производим окна на собственном производстве в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З. Аккуратная установка. Наши бригады — это опытные монтажники, которые работают чисто, быстро и по ГОСТу. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1308" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">CAMRYN-BRONX</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З — чтобы сделать выбор было проще. Реставрация окон. Скидка 5% по промокоду — назовите его менеджеру при звонке. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Введенский-собор-лейб-гвардии-Семёновского-полка-З">ЗАКАЗАТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в открытости и сбережении до 40%. Обращаясь к нам в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З, вы общаетесь напрямую с производителем. Цена от 3 300 ?/м? — без скрытых наценок за громкое имя или дорогую витрину. Вся экономия остаётся в вашем бюджете. Производство окон. Вы оплачиваете только за качественные материалы и профессиональную работу, а не за накрутки перекупщиков. Полный контроль. Вы будете знать, из каких компонентов и каким образом изготовлена ваша конструкция.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать тёплые окна из пластика в районе
 Введенский-собор-лейб-гвардии-Семёновского-полка-З, выполните простую последовательность действий. Недорогие окна. Заполните короткую форму на сайте — укажите удобный способ связи. Согласуйте всё по телефону — наш специалист подтвердит удобное время для выезда замерщика и проконсультирует. Активируйте специальную цену — для всех новых клиентов действуют скидки. Ваш комфорт начинается с первого клика. Шумозащитные окна. Создайте идеальный комфорт вместе с нами!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Введенский-собор-лейб-гвардии-Семёновского-полка-З">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Введенский-собор-лейб-гвардии-Семёновского-полка-З. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Введенский-собор-лейб-гвардии-Семёновского-полка-З, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Введенский-собор-лейб-гвардии-Семёновского-полка-З</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Введенский-собор-лейб-гвардии-Семёновского-полка-З'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Введенский-собор-лейб-гвардии-Семёновского-полка-З'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Введенский-собор-лейб-гвардии-Семёновского-полка-З</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Введенский-собор-лейб-гвардии-Семёновского-полка-З</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Введенский-собор-лейб-гвардии-Семёновского-полка-З</guid>
      <pubDate>Sat, 24 Oct 2026 09:23:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Школьная-улица</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Школьная-улица · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Школьная-улица</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/oppetto-uctation.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Школьная-улица</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/waterish-filiform.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Оконщики: Климов Макар, Потапова Валерия. Дата публикации 3 октября 2026. Тёплые и тихие окна в районе
 Школьная-улица по цене производителя. Окна в детскую. Прямо с производства — без посредников и переплат. Утомляет от шума мегаполиса, сквозняков и грязи? Мечтаете о тепле, спокойствии и идеальных окнах, но смущают завышенные цены и настойчивые консультанты?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Монтаж окон, Дешевые окна. Мы осознаём ваши опасения. Часто за раскрученным названием в районе
 Школьная-улица скрывается длинная цепочка посредников. Окна для пассивного дома. В итоге вы платите не за надёжность конструкции, а за их аренду, продвижение и заработные платы.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/dioptre-cumbent.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ebrious-rotameter.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">как для городского жилья, так и для дачи</span></h2>
<p>Мы делаем не только окна, а комфортную среду для жизни вашей семьи. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые навсегда избавят вас от городского шума, грязи и сквозняков. Замена фурнитуры.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое преобразит эту зону в полноценную часть жилья в том числе зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Школьная-улица и 20-летний опыт дают возможность изготовить окна самой сложной формы.</p>
<p>Мы сотрудничаем с качественными профилями из Германии (KBE, Rehau) и применяем высокотехнологичные станки для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш подход за два десятилетия работы в районе
 Школьная-улица краток: кратчайший путь от нашего производства к вам. Мы изготавливаем, а не продаём с накруткой. Окна без посредников. Вот почему предлагаем адекватные цены, чётко соблюдаем сроки исполнения и гарантируем надёжные гарантии. Более 10 000 установленных окон — наше лучшее доказательство.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Школьная-улица. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/gimbals-vetitive.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/placket-toreutics.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Школьная-улица не только снимет точные размеры, но и предложит варианты по профилю, комплектующим, типу стеклопакета и цвету и отделке. Детальный расчёт. Вы сможете получить прозрачный расчёт без неочевидных доплат. Только после вашего согласия подписываем договор. Немецкие окна. Быстрое изготовление (3-7 дней). Создаём окна на собственном производстве в районе
 Школьная-улица. Аккуратная установка. Наши бригады — это профессионалы-монтажники, которые действуют качественно, в срок и по нормативам. После них — идеальная чистота. Гарантия и поддержка. Предоставляем фирменную гарантию на окна и работу.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1248" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">SYAN-JAREMIAH</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в районе
 Школьная-улица — чтобы вам было легче решиться. Окна для коттеджа. Скидка 5% по промокоду — назовите его оператору. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Школьная-улица">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и снижении стоимости до 40%. Приходя к нам в районе
 Школьная-улица, вы общаетесь напрямую с производителем. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или дорогую витрину. Вся экономия остаётся в вашем бюджете. Замена окон. Вы платите только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы будете знать, как и из каких материалов сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести тёплые окна из пластика в районе
 Школьная-улица, выполните простую последовательность действий. Недорогие окна. Отправьте заявку в интернете — укажите имя и телефон. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для выезда замерщика и проконсультирует. Воспользуйтесь выгодным предложением — при заказе после замера действуют скидки. Мы сделали процесс покупки максимально простым. Замена фурнитуры. Желаем вам тёплой и тихой атмосферы в доме!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Школьная-улица">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Школьная-улица. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Школьная-улица, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Школьная-улица</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Школьная-улица'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Школьная-улица'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Школьная-улица</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Школьная-улица</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Школьная-улица</guid>
      <pubDate>Sat, 24 Oct 2026 09:01:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Заневский-проспект</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Заневский-проспект · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Заневский-проспект</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ageusia-lative.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Заневский-проспект</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/umbilical-entomical.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Специалисты: Кузнецова Елизавета, Назаров Платон. Последнее обновление 3 октября 2026 Тёплые и тихие окна в районе
 Заневский-проспект от производителя. Глухие окна. Из цеха — без перекупщиков и лишних расходов. Утомляет от шума мегаполиса, продуваний и грязи? Желаете о комфортной температуре, спокойствии и безупречных окнах, но останавливают завышенные цены и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Ремонт откосов, Регулировка окон. Мы осознаём ваши тревоги. Часто за разрекламированной торговой маркой в районе
 Заневский-проспект прячется вереница агентов. Окна нестандартной формы. В итоге вы платите не за надёжность конструкции, а за их аренду, маркетинг и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/tombac-chenille.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ekistics-pyrexical.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы создаём не только окна, а комфортную среду для вашей жизни. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые окончательно избавят от городского шума, пыли и выстуживания. Производство окон.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое преобразит эту зону в уютное продолжение комнаты в том числе зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна любой формы: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Заневский-проспект и двадцатилетний опыт дают возможность изготовить окна самой сложной формы.</p>
<p>Мы сотрудничаем с проверенными немецкими профильными системами (KBE, Rehau) и используем новейшее оборудование на заводе для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет на рынке в районе
 Заневский-проспект несложен: самый короткий путь от нашего завода к вам. Мы изготавливаем, а не продаём с накруткой. Пластиковые двери. Именно поэтому формируем обоснованные цены, соблюдаем оговорённые сроки и предоставляем реальные гарантии. Свыше десяти тысяч установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Заневский-проспект. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/squadrism-hobohemia.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/zimocca-hypobulic.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Заневский-проспект не только произведёт обмер, но и проконсультирует по профилю, комплектующим, стеклопакету и цвету и отделке. Детальный расчёт. Вы сможете получить понятную смету без скрытых пунктов. Исключительно после вашего одобрения подписываем договор. Отделка балкона. Быстрое изготовление (3-7 дней). Производим окна на собственном производстве в районе
 Заневский-проспект. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют качественно, в срок и по нормативам. После работы чисто. Гарантия и поддержка. Обеспечиваем официальную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1304" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">DAX-JAMAAL</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Бонусы для клиентов</h2>
<p>Беспроцентная рассрочка в районе
 Заневский-проспект — чтобы решение далось вам легко. Окна нестандартной формы. Скидка 5% по промокоду — скажите его менеджеру при звонке. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Заневский-проспект">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и сбережении до 40%. Выбирая нас в районе
 Заневский-проспект, вы взаимодействуете напрямую с производителем. Цена от 3 300 ?/м? — без неочевидных доплат за «раскрученный» бренд или аренду в центре города. Вся экономия остаётся в вашем бюджете. Двухкамерные стеклопакеты. Вы платите только за материалы и работу, а не за проценты посредников. Полный контроль. Вы понимаете, как и из каких материалов создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить качественные пластиковые окна в районе
 Заневский-проспект, сделайте всего несколько простых шагов. Деревянные окна. Заполните короткую форму на сайте — укажите имя и телефон. Обсудите заказ с консультантом — наш специалист уточнит удобное время для бесплатного замера и ответит на вопросы. Воспользуйтесь выгодным предложением — при заказе после замера предусмотрены специальные условия. Не откладывайте мечту о комфорте. Пока что вы читаете, мы можем уже начать производству ваших предстоящих совершенных окон. Сохраните средства, остановившись на прямые договорённости с изготовителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Заневский-проспект">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Заневский-проспект. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Заневский-проспект, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Заневский-проспект</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Заневский-проспект'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Заневский-проспект'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Заневский-проспект</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Заневский-проспект</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Заневский-проспект</guid>
      <pubDate>Sat, 24 Oct 2026 08:29:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Колокольная-улица</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Колокольная-улица · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Колокольная-улица</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rillet-thereinto.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Колокольная-улица</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/waterish-filiform.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Консультанты: Федотов Даниил, Котов Артём. Опубликовано 3 октября 2026 Теплые и тихие окна в районе
 Колокольная-улица без торговых наценок. Окна в детскую. От изготовителя — без посредников и переплат. Утомились от шума мегаполиса, сквозняков и грязи? Желаете о комфортной температуре, тишине и совершенных окнах, но останавливают завышенные цены и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Реставрация окон, Кредит на окна. Мы осознаём ваши опасения. Часто за громким именем бренда в районе
 Колокольная-улица прячется вереница агентов. Окна в дом. В итоге вы оплачиваете не за качество продукции, а за дорогую аренду, рекламу и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/lappet-yarak.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/fadoodle-naricorn.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Окна для любых целей: <span class="grad">как для городского жилья, так и для дачи</span></h2>
<p>Мы изготавливаем не только окна, а комфортную среду для жизни вашей семьи. Для квартиры: Тихие и тёплые пластиковые окна, которые окончательно избавят от городского шума, грязи и сквозняков. Окна для коттеджа.</p>
<p class="punch">Для балкона или лоджии: Тёплое остекление, которое превратит помещение в уютное продолжение комнаты в том числе зимой. Для коттеджа или дачи: Долговечные, стильные и энергосберегающие окна любой формы: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Колокольная-улица и богатый опыт дают возможность изготовить окна нестандартных форм.</p>
<p>Мы сотрудничаем с проверенными немецкими профильными системами (KBE, Rehau) и используем новейшее оборудование на заводе для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет работы в районе
 Колокольная-улица несложен: напрямую от нашего завода к вам. Мы изготавливаем, а не продаём с накруткой. Окна в офис. Следовательно устанавливаем адекватные цены, соблюдаем оговорённые сроки и даём проверенные гарантии. Свыше десяти тысяч установленных окон — наше лучшее доказательство.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Колокольная-улица. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/bower-lippitude.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/freestone-plicated.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наш процесс работы: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Колокольная-улица не только произведёт обмер, но и даст профессиональные рекомендации по профилю, фурнитуре, стеклопакету и отделке. Детальный расчёт. Вы сможете получить подробную калькуляцию без неочевидных доплат. Только после вашего согласия оформляем соглашение. Окна пвх. Быстрое изготовление (3-7 дней). Изготавливаем окна на своём заводе в районе
 Колокольная-улица. Аккуратная установка. Наши бригады — это опытные монтажники, которые действуют аккуратно, оперативно и по стандартам. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на окна и работу.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1248" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">YVAN-ZACHARIE</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Колокольная-улица — чтобы решение далось вам легко. Зимние окна. Скидка 5% по промокоду — назовите его консультанту по телефону. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Колокольная-улица">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша выгода — в прозрачности и экономии до 40%. Сотрудничая с нами в районе
 Колокольная-улица, вы взаимодействуете прямо с изготовителем. Цена от 3 300 ?/м? — без скрытых наценок за разрекламированную марку или дорогую витрину. Вся экономия остаётся в вашем бюджете. Композитные окна. Вы оплачиваете только за комплектующие и труд, а не за накрутки перекупщиков. Полный контроль. Вы будете знать, как и из каких материалов сделано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести тёплые окна из пластика в районе
 Колокольная-улица, выполните простую последовательность действий. Отливы для окон. Заполните короткую форму на сайте — укажите имя и телефон. Согласуйте всё по телефону — наш специалист подтвердит удобное время для выезда замерщика и ответит на вопросы. Активируйте специальную цену — при заказе после замера предусмотрены специальные условия. Выбирайте окна без лишних хлопот. Окна для дачи. Приятных покупок и уюта вашему дому!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Колокольная-улица">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Колокольная-улица. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Колокольная-улица, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Колокольная-улица</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Колокольная-улица'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Колокольная-улица'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Колокольная-улица</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Колокольная-улица</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Колокольная-улица</guid>
      <pubDate>Sat, 24 Oct 2026 08:26:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Надгорная-улица-Павловск</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Надгорная-улица-Павловск · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Надгорная-улица-Павловск</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/bretasche-qasida.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Надгорная-улица-Павловск</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/rottack-konimeter.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Мастера золотые руки: Нечаев Владимир, Субботин Юрий. Последнее обновление 3 октября 2026 Тёплые и бесшумные окна в районе
 Надгорная-улица-Павловск от производителя. Глухие окна. От изготовителя — без посредников и переплат. Утомляет от уличного гула, сквозняков и пыли? Хотите о комфортной температуре, тишине и окнах вашей мечты, но останавливают завышенные цены и настойчивые консультанты?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Зимние сады, Окна от производителя. Мы осознаём ваши опасения. Часто за разрекламированной торговой маркой в районе
 Надгорная-улица-Павловск прячется сложная дилерская сеть. Алюминиевые окна. В конечном счёте вы оплачиваете не за надёжность конструкции, а за их аренду, продвижение и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/cafard-trysail.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/hegumene-spissated.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">для квартиры и коттеджа</span></h2>
<p>Мы изготавливаем не только окна, а комфортное пространство для вашей жизни. Для квартиры: Тихие и тёплые пластиковые окна, которые навсегда избавят вас от шума с улицы, пыли и выстуживания. Рассрочка на окна.</p>
<p class="punch">Для балкона или лоджии: Качественное утеплённое остекление, которое сделает эту зону в полноценную часть жилья даже зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой формы: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Надгорная-улица-Павловск и двадцатилетний опыт помогают сделать окна нестандартных форм.</p>
<p>Мы работаем с качественными профилями из Германии (KBE, Rehau) и используем современное заводское оборудование для безупречной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за 20 лет работы в районе
 Надгорная-улица-Павловск краток: кратчайший путь от нашего завода к вам. Мы изготавливаем, а не продаём с накруткой. Окна без посредников. Именно поэтому устанавливаем справедливые цены, придерживаемся сроки исполнения и гарантируем реальные гарантии. Более 10 000 установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Надгорная-улица-Павловск. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/brassage-alveolate.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/urbanist-kohlrabi.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наш процесс работы: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Надгорная-улица-Павловск не только выполнит точные замеры, но и предложит варианты по профилю, комплектующим, типу стеклопакета и цвету и отделке. Детальный расчёт. Вы сможете получить понятную смету без неочевидных доплат. Только после вашего согласия оформляем соглашение. Акции на окна. Быстрое изготовление (3-7 дней). Изготавливаем окна на нашем заводе в районе
 Надгорная-улица-Павловск. Аккуратная установка. Наши бригады — это опытные монтажники, которые работают качественно, в срок и по нормативам. После монтажа — порядок. Гарантия и поддержка. Предоставляем письменную гарантию на продукцию и установку.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1244" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">JOSSUE-MASYN</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Надгорная-улица-Павловск — чтобы решение далось вам легко. Деревянные окна. Скидка 5% по промокоду — скажите его менеджеру при звонке. Бесплатные рекомендации по уходу за окнами.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Надгорная-улица-Павловск">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваше преимущество — в открытости и снижении стоимости до 40%. Обращаясь к нам в районе
 Надгорная-улица-Павловск, вы взаимодействуете с заводом без посредников. Цена от 3 300 ?/м? — без дополнительных платежей за громкое имя или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Замена уплотнителя. Вы платите только за материалы и работу, а не за накрутки перекупщиков. Полный контроль. Вы будете знать, из каких компонентов и каким образом создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Если вы решили купить надёжные окна ПВХ в районе
 Надгорная-улица-Павловск, всего три простых шага. Устранение продуваний. Оставьте онлайн-заявку — укажите имя и телефон. Подтвердите детали с менеджером — наш специалист подтвердит удобное время для выезда замерщика и ответит на вопросы. Активируйте специальную цену — при заказе после замера предусмотрены специальные условия. Мы сделали процесс покупки максимально простым. Стоимость остекления. Создайте идеальный комфорт вместе с нами!</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Надгорная-улица-Павловск">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Надгорная-улица-Павловск. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Надгорная-улица-Павловск, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Надгорная-улица-Павловск</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Надгорная-улица-Павловск'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Надгорная-улица-Павловск'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Надгорная-улица-Павловск</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Надгорная-улица-Павловск</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Надгорная-улица-Павловск</guid>
      <pubDate>Sat, 24 Oct 2026 08:22:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Владимирская-улица-Ломоносов</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Владимирская-улица-Ломоносов · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Владимирская-улица-Ломоносов</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/contemn-churchism.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Владимирская-улица-Ломоносов</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/griseous-pygia.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Продавцы: Михайлова Мария, Белов Лев. Опубликовано: 3 октября 2026 Теплые и тихие окна в районе
 Владимирская-улица-Ломоносов по цене производителя. Внутренняя отделка балкона. Напрямую с завода — без перекупщиков и лишних расходов. Утомились от городского шума, сквозняков и грязи? Желаете о комфортной температуре, спокойствии и безупречных окнах, но настораживают заоблачные ценники и настойчивые консультанты?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Гарантийное обслуживание окон, Бесплатный замер окон. Мы осознаём ваши опасения. Часто за громким именем бренда в районе
 Владимирская-улица-Ломоносов таится многоуровневая система перекупщиков. Треугольные окна. Как правило вы платите не за качество окна, а за дорогую аренду, маркетинг и оклады.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/opsonium-cavatina.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/regardant-abbozzo.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Решения для любой задачи: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы изготавливаем не просто окна, а уютную атмосферу для вашего проживания. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые навсегда избавят вас от шума с улицы, пыли и сквозняков. Регулировка окон.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое превратит эту зону в дополнительную комнату в том числе зимой. Для коттеджа или дачи: Надёжные, красивые и тёплые окна всевозможных форм: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше высокоточное оборудование в районе
 Владимирская-улица-Ломоносов и двадцатилетний опыт дают возможность изготовить окна самой сложной формы.</p>
<p>Мы работаем с надёжными немецкими системами (KBE, Rehau) и используем новейшее оборудование на заводе для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за два десятилетия работы в районе
 Владимирская-улица-Ломоносов краток: прямой маршрут от нашего производства к вам. Мы изготавливаем, а не перепродаём. Треугольные окна. Вот почему устанавливаем честные расценки, придерживаемся сроки и гарантируем гарантии по договору. Более 10 000 установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Владимирская-улица-Ломоносов. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/callant-vardo.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/spuria-animalism.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Как мы работаем: <span class="grad">прозрачно, быстро, с заботой о вас</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Владимирская-улица-Ломоносов не только снимет точные размеры, но и проконсультирует по профилю, фурнитуре, стеклопакету и отделке. Детальный расчёт. Вы получите понятную смету без скрытых пунктов. Только после вашего согласия подписываем договор. Жалюзи на окна. Быстрое изготовление (3-7 дней). Создаём окна на собственном производстве в районе
 Владимирская-улица-Ломоносов. Аккуратная установка. Наши бригады — это опытные монтажники, которые действуют аккуратно, оперативно и по стандартам. После монтажа — порядок. Гарантия и поддержка. Предоставляем фирменную гарантию на изделия и монтаж.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1256" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">IAGO-FAWKES</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Дополнительные преимущества</h2>
<p>Беспроцентная рассрочка в районе
 Владимирская-улица-Ломоносов — чтобы сделать выбор было проще. Ремонт балконных рам. Скидка 5% по промокоду — назовите его оператору. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Заказать пластиковые окна в городе Владимирская-улица-Ломоносов">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и снижении стоимости до 40%. Обращаясь к нам в районе
 Владимирская-улица-Ломоносов, вы общаетесь прямо с изготовителем. Цена от 3 300 ?/м? — без дополнительных платежей за «раскрученный» бренд или дорогую витрину. Вся экономия остаётся в вашем бюджете. Немецкие окна. Вы оплачиваете только за комплектующие и труд, а не за доходы дилеров. Полный контроль. Вы будете знать, из чего и как создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать надёжные окна ПВХ в районе
 Владимирская-улица-Ломоносов, всего три простых шага. Входные группы. Оставьте онлайн-заявку — укажите ваши контактные данные. Подтвердите детали с менеджером — наш специалист уточнит удобное время для выезда замерщика и проконсультирует. Получите персональную скидку — при заказе после замера предусмотрены специальные условия. Не откладывайте желание о тепле. В то время как вы читаете, мы можем уже начать созданию ваших будущих идеальных окон. Сохраните финансы, остановившись на прямое сотрудничество с производителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Владимирская-улица-Ломоносов">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Владимирская-улица-Ломоносов. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Владимирская-улица-Ломоносов, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Владимирская-улица-Ломоносов</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Владимирская-улица-Ломоносов'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Владимирская-улица-Ломоносов'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Владимирская-улица-Ломоносов</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Владимирская-улица-Ломоносов</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Владимирская-улица-Ломоносов</guid>
      <pubDate>Sat, 24 Oct 2026 08:21:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Старогатчинское-шоссе</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Старогатчинское-шоссе · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Старогатчинское-шоссе</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/exarate-ournure.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Старогатчинское-шоссе</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/griseous-pygia.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Ответственные монтажники: Маслов Артём, Аксенова Екатерина. Опубликовано: 3 октября 2026. Теплые и тихие окна в районе
 Старогатчинское-шоссе без торговых наценок. Трапециевидные окна. От изготовителя — минуя лишние звенья и накрутки. Утомляет от уличного гула, продуваний и пыли? Хотите о уютном тепле, тишине и окнах вашей мечты, но останавливают заоблачные ценники и навязчивые менеджеры?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Балконное остекление, Замена окон. Мы знаем ваши сомнения. Часто за известной маркой в районе
 Старогатчинское-шоссе таится сложная дилерская сеть. Окна на заказ. В конечном счёте вы платите не за качество продукции, а за дорогую аренду, рекламу и зарплаты.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/dioptre-cumbent.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/acopic-acock.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Решения для любой задачи: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы создаём не только окна, а комфортное пространство для вашей жизни. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые окончательно избавят от уличного гула, грязи и сквозняков. Жалюзи на окна.</p>
<p class="punch">Для балкона или лоджии: Энергоэффективное остекление, которое сделает помещение в полноценную часть жилья в холодный сезон. Для коттеджа или дачи: Надёжные, красивые и тёплые окна любой формы: арочные, треугольные, трапециевидные, панорамные. Сложный проём — не проблема. Наше профессиональное оборудование в районе
 Старогатчинское-шоссе и 20-летний опыт дают возможность изготовить окна нестандартных форм.</p>
<p>Мы сотрудничаем с надёжными немецкими системами (KBE, Rehau) и применяем высокотехнологичные станки для идеальной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наш принцип за 20 лет работы в районе
 Старогатчинское-шоссе краток: прямой маршрут от нашего производства к вам. Мы изготавливаем, а не продаём с накруткой. Акции на окна. Именно поэтому формируем честные расценки, придерживаемся сроки и предоставляем гарантии по договору. Свыше десяти тысяч установленных окон — наша главная визитная карточка.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Старогатчинское-шоссе. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/ageusia-lative.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/sarinda-urbacity.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В подходящее вам время. Мастер в районе
 Старогатчинское-шоссе не только выполнит точные замеры, но и даст профессиональные рекомендации по системе профиля, комплектующим, стеклопакету и отделке. Детальный расчёт. Вы сможете получить прозрачный расчёт без неочевидных доплат. Исключительно после вашего одобрения подписываем договор. Окна в спальню. Быстрое изготовление (3-7 дней). Производим окна на нашем заводе в районе
 Старогатчинское-шоссе. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют качественно, в срок и по нормативам. После монтажа — порядок. Гарантия и поддержка. Даём письменную гарантию на продукцию и установку.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1300" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">SHLOK-MEKAEL</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в районе
 Старогатчинское-шоссе — чтобы решение далось вам легко. Окна в спальню. Скидка 5% по промокоду — сообщите его консультанту по телефону. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Старогатчинское-шоссе">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша выгода — в открытости и экономии до 40%. Обращаясь к нам в районе
 Старогатчинское-шоссе, вы общаетесь прямо с изготовителем. Цена от 3 300 ?/м? — без неочевидных доплат за «раскрученный» бренд или аренду дорогого офиса. Вся экономия остаётся в вашем бюджете. Алюминиевые окна. Вы оплачиваете только за комплектующие и труд, а не за проценты посредников. Полный контроль. Вы будете знать, как и из каких материалов изготовлена ваша конструкция.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Для того чтобы приобрести тёплые окна из пластика в районе
 Старогатчинское-шоссе, всего три простых шага. Ремонт окон. Заполните короткую форму на сайте — укажите имя и телефон. Обсудите заказ с консультантом — наш специалист уточнит удобное время для выезда замерщика и проконсультирует. Воспользуйтесь выгодным предложением — для всех новых клиентов действуют скидки. Не откладывайте планы о комфорте. Пока вы читаете, мы уже готовы начать изготовлению ваших предстоящих совершенных окон. Экономьте деньги, выбрав прямое сотрудничество с производителем.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Старогатчинское-шоссе">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Старогатчинское-шоссе. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Старогатчинское-шоссе, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Старогатчинское-шоссе</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Старогатчинское-шоссе'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Старогатчинское-шоссе'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Старогатчинское-шоссе</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Старогатчинское-шоссе</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Старогатчинское-шоссе</guid>
      <pubDate>Sat, 24 Oct 2026 08:14:00 GMT</pubDate>
    </item>
    <item>
      <title>Пластиковые окна Боковая-аллея</title>
      <description><![CDATA[<div class="scroll-progress" id="scrollProgress"></div>
<div class="bg-scenes">
  <div class="bg-scene active" data-scene="hero">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="features">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="pricing">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="calc">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="process">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="ba">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="promo">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="dots-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="districts">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="grid-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="quiz">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="waves-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="faq">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  </div>
  <div class="bg-scene" data-scene="cta">
    <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
    <div class="lines-overlay"></div>
  </div>
  <div class="bg-scene" data-scene="footer">
    <div class="blob b1"></div><div class="blob b2"></div>
  </div>
</div>

<div class="scene-indicator" id="sceneIndicator">
  <div class="scene-dot active" data-scene="hero" data-label="Главная"></div>
  <div class="scene-dot" data-scene="features" data-label="Преимущества"></div>
  <div class="scene-dot" data-scene="pricing" data-label="Цены"></div>
  <div class="scene-dot" data-scene="calc" data-label="Калькулятор"></div>
  <div class="scene-dot" data-scene="process" data-label="Процесс"></div>
  <div class="scene-dot" data-scene="ba" data-label="До / После"></div>
  <div class="scene-dot" data-scene="promo" data-label="Акции"></div>
  <div class="scene-dot" data-scene="districts" data-label="Районы"></div>
  <div class="scene-dot" data-scene="quiz" data-label="Подбор"></div>
  <div class="scene-dot" data-scene="faq" data-label="FAQ"></div>
  <div class="scene-dot" data-scene="cta" data-label="Контакты"></div>
  <div class="scene-dot" data-scene="footer" data-label="Футер"></div>
</div>

<div class="particles" id="particles"></div>
<div class="toast-stack" id="toastStack"></div>

<header id="header">
  <div class="container">
    <div class="nav">
      <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
      <nav class="nav-links">
        <a href="#features">О сервисе</a>
        <a href="#pricing">Цены</a>
        <a href="#calculator">Калькулятор</a>
        <a href="#process">Как работаем</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div class="nav-cta">
        <a href="tel:+79932541026" class="phone">+7 (993) 254-10-26</a>
        <a href="#calculator" class="btn btn-primary btn-sm">Рассчитать <span class="arrow">></span></a>
      </div>
    </div>
  </div>
</header>

<section class="hero" data-scene="hero">
  <div class="container">
    <div class="hero-magazine">
      <div class="hero-side">
        <div class="hero-side-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="40" width="140" height="180" rx="4"/>
              <rect x="72" y="52" width="116" height="156" rx="2"/>
              <line x1="130" y1="40" x2="130" y2="220" stroke-width="1.5"/>
              <line x1="60" y1="130" x2="200" y2="130" stroke-width="1.5"/>
              <circle cx="185" cy="75" r="3" class="filled"/>
              <path d="M 40 240 Q 130 200 220 240" stroke-width="2" opacity=".5"/>
            </svg>
          </div>
          <div>
            <span class="hero-badge"><span class="dot"></span> Боковая-аллея · 20 лет</span>
            <h2 class="hero-side-title">Пластиковые окна <em class="grad">Боковая-аллея</em></h2>
            <p class="hero-side-desc">Профильные системы KBE и Rehau. Без посредников, без навязчивых менеджеров и заоблачных ценников.</p>
          </div>
          <div class="hero-side-stats">
            <div><div class="stat-num">10K<span class="plus">+</span></div><div class="stat-label">Окон установлено</div></div>
            <div><div class="stat-num">3-7</div><div class="stat-label">Дней на заказ</div></div>
            <div><div class="stat-num">40%</div><div class="stat-label">Экономия</div></div>
            <div><div class="stat-num">5?</div><div class="stat-label">Рейтинг</div></div>
          </div>
        </div>
      </div>

      <div class="hero-main hero-cell">
        <span class="hero-main-tag">От производителя</span>
        <div class="hero-main-rating"><span class="star">?</span> 5.0 · 800+ отзывов</div>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/skeg-quirt.jpg" alt="Пластиковые окна">
        <div class="hero-main-content">
          <h1>
            <span class="line"><span>Пластиковые окна</span></span>
            <span class="line"><span><em class="grad">Боковая-аллея</em></span></span>
            <span class="line"><span>Купить</span></span>
          </h1>
          <div class="hero-main-actions">
            <a href="#calculator" class="btn btn-primary">Рассчитать онлайн <span class="arrow">></span></a>
            <a href="#pricing" class="btn btn-glass">Смотреть цены</a>
          </div>
        </div>
      </div>

      <div class="hero-side-right">
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 140 L 90 140 L 90 160 L 110 140 L 110 160 L 130 140 L 130 200 Z"/>
              <rect x="140" y="120" width="30" height="80"/>
              <path d="M 150 120 L 150 90 Q 155 80 160 90 L 160 120"/>
              <path d="M 145 90 Q 155 70 165 90" opacity=".5"/>
              <path d="M 165 60 Q 175 50 185 60" opacity=".35"/>
              <line x1="40" y1="200" x2="240" y2="200" stroke-width="2"/>
              <line x1="40" y1="210" x2="240" y2="210" opacity=".4"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>Свой цех</h4>
          <p>Изготавливаем сами — контролируем каждый миллиметр</p>
        </div>
        <div class="hero-mini-card has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="70" y="60" width="140" height="160" rx="3"/>
              <rect x="85" y="75" width="110" height="130" rx="2" opacity=".6"/>
              <rect x="70" y="135" width="140" height="8" class="filled"/>
              <line x1="140" y1="60" x2="140" y2="220" opacity=".5"/>
              <circle cx="175" cy="90" r="4" class="filled"/>
              <circle cx="175" cy="190" r="4" class="filled"/>
            </svg>
          </div>
          <div class="m-icon">??</div>
          <h4>KBE · Rehau</h4>
          <p>Проверенные профильные системы для окон</p>
        </div>
      </div>

      <div class="hero-side-img hero-cell">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/enthetic-seta.gif" alt="Установка">
        <div class="hero-side-img-overlay">
          <div class="icon">?</div>
          <div><div class="t1">Гарантия 5 лет</div><div class="t2">на продукцию и установку</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track" id="marqueeTrack">
    <span class="marquee-item">Профили KBE</span>
    <span class="marquee-item">Rehau Blitz</span>
    <span class="marquee-item">Двухкамерные стеклопакеты</span>
    <span class="marquee-item">Без посредников</span>
    <span class="marquee-item">Монтаж по ГОСТу</span>
    <span class="marquee-item">Рассрочка 0%</span>
    <span class="marquee-item">3–7 дней изготовление</span>
    <span class="marquee-item">10 000+ установок</span>
  </div>
</div>

<section id="features" data-scene="features">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Почему мы</span>
      <h2>Мы <em>делаем,</em> <span class="grad">а не перепродаём</span></h2>
<p>Кратчайший путь от нашего цеха к вашему окну. Никаких посредников и лишних зарплат в вашем чеке. Сертифицированные инженеры: Кузьмина Василиса, Николаева Диана. Последнее обновление: 3 октября 2026 Теплые и тихие окна в районе
 Боковая-аллея напрямую с завода. Внешняя отделка балкона. Прямо с производства — без посредников и переплат. Надоело от шума мегаполиса, продуваний и грязи? Желаете о уютном тепле, тишине и идеальных окнах, но пугают завышенные цены и агрессивные продавцы?</p>
    </div>
    <div class="features-3col">
      <div class="feature reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 40 200 L 40 120 L 80 120 L 80 145 L 105 120 L 105 145 L 130 120 L 130 145 L 155 120 L 155 200 Z"/>
            <rect x="170" y="100" width="40" height="100"/>
            <path d="M 180 100 L 180 60 M 200 100 L 200 60"/>
            <path d="M 175 60 Q 190 30 205 60" opacity=".5"/>
            <line x1="20" y1="205" x2="250" y2="205" stroke-width="2"/>
          </svg>
        </div>
        <span class="num">01</span>
        <div class="feature-icon">??</div>
        <h3>Собственное производство</h3>
        <p>Высокоточное оборудование и полный контроль качества на каждом этапе изготовления.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="60" opacity=".4"/>
            <line x1="140" y1="60" x2="140" y2="220" stroke-width="2"/>
            <line x1="60" y1="140" x2="220" y2="140" stroke-width="2"/>
            <line x1="85" y1="85" x2="195" y2="195" stroke-width="1.5"/>
            <line x1="195" y1="85" x2="85" y2="195" stroke-width="1.5"/>
          </svg>
        </div>
        <span class="num">02</span>
        <div class="feature-icon">??</div>
        <h3>Тепло и тишина</h3>
        <p>Двухкамерные стеклопакеты и энергоэффективные профили — ни шума, ни сквозняков, ни пыли.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 60 200 L 60 80 L 180 200 Z"/>
            <path d="M 200 80 L 240 80 L 240 120 L 200 120 Z"/>
            <circle cx="80" cy="100" r="15"/>
            <path d="M 200 160 L 240 160 L 240 200 L 200 200 Z"/>
            <path d="M 200 230 L 220 210 L 240 230 L 220 250 Z"/>
          </svg>
        </div>
        <span class="num">03</span>
        <div class="feature-icon">??</div>
        <h3>Сложные формы</h3>
        <p>Панорамные, арочные, треугольные, трапециевидные окна. Сложный проём — не проблема.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="60" y="60" width="160" height="160" rx="4"/>
            <rect x="78" y="78" width="124" height="124" rx="3" opacity=".5"/>
            <rect x="60" y="135" width="160" height="10" class="filled"/>
            <rect x="135" y="60" width="10" height="160" class="filled"/>
          </svg>
        </div>
        <span class="num">04</span>
        <div class="feature-icon">??</div>
        <h3>Системы KBE · Rehau</h3>
        <p>Работаем с проверенными профильными системами KBE и Rehau — надёжность на десятилетия.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.4s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="90" y="80" width="14" height="80" rx="2"/>
            <rect x="80" y="160" width="34" height="40" rx="4"/>
            <path d="M 160 100 L 165 90 L 170 100 L 180 105 L 170 110 L 165 120 L 160 110 L 150 105 Z" class="filled" opacity=".6"/>
            <path d="M 200 140 L 204 132 L 208 140 L 216 144 L 208 148 L 204 156 L 200 148 L 192 144 Z" class="filled" opacity=".45"/>
          </svg>
        </div>
        <span class="num">05</span>
        <div class="feature-icon">??</div>
        <h3>Аккуратный монтаж</h3>
        <p>Профессиональные бригады работают чисто, быстро и по ГОСТу. После — идеальная чистота.</p>
      </div>

      <div class="feature reveal has-pattern" style="transition-delay:.5s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
            <path d="M 120 145 L 135 160 L 165 125" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="num">06</span>
        <div class="feature-icon">???</div>
        <h3>Фирменная гарантия</h3>
        <p>Гарантийное обслуживание и поддержка на продукцию и установку. Смазка фурнитуры.</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing" data-scene="pricing">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Честные цены</span>
      <h2>Ваша экономия — <span class="grad">в открытости</span></h2>
<p>Вы оплачиваете только материалы и работу. Без неочевидных доплат за «раскрученный» бренд. Категории: Окна в квартиру, Навесы из поликарбоната. Мы осознаём ваши опасения. Часто за раскрученным названием в районе
 Боковая-аллея таится сложная дилерская сеть. Балконное остекление. В результате вы оплачиваете не за качество окна, а за дорогую аренду, маркетинг и заработные платы.</p>
    </div>
    <div style="display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px;align-items:stretch">

      <div class="glass reveal has-pattern" style="padding:36px 30px;display:flex;flex-direction:column;background:var(--glass-dark-2)">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="100" y="60" width="200" height="260" rx="8"/>
            <rect x="120" y="80" width="160" height="50" rx="4"/>
            <line x1="120" y1="150" x2="280" y2="150" opacity=".5"/>
            <line x1="120" y1="175" x2="260" y2="175" opacity=".5"/>
            <line x1="120" y1="200" x2="280" y2="200" opacity=".5"/>
            <line x1="120" y1="260" x2="280" y2="260" stroke-width="2"/>
          </svg>
        </div>
        <div style="position:relative;z-index:1">
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:8px">
            <span style="font-family:var(--display);font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--brand) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;filter:drop-shadow(0 6px 24px rgba(61,240,184,.4))">3 300</span>
            <span style="font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted)">?/м?</span>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-bottom:24px">стартовая стоимость — без посреднических наценок</div>
          <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--stroke)">
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Прямой контакт с заводом</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Полный контроль состава</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Только материалы и работа</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Беспроцентная рассрочка</li>
            <li style="display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted)"><span style="flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(61,240,184,.18);border:1px solid rgba(61,240,184,.35);color:var(--brand);display:grid;place-items:center;font-size:10px;font-weight:800">?</span> Скидка 5% по промокоду</li>
          </ul>
          <a href="#calculator" class="btn btn-primary">Рассчитать заказ <span class="arrow">></span></a>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)"></span>KBE Эконом</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/callant-vardo.jpg" alt="KBE">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">KBE Эконом</div><div style="font-size:11px;color:var(--muted)">2-камерный · 32 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--brand)">3 300 ?</div>
        </div>
      </div>

      <div class="glass reveal" style="position:relative;min-height:440px;transition:.5s;padding:0">
        <span style="position:absolute;top:18px;left:18px;z-index:3;background:rgba(5,7,10,.6);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)"></span>Rehau Blitz</span>
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/oast-parembole.jpg" alt="Rehau">
        <div style="position:absolute;bottom:18px;left:18px;right:18px;z-index:3;background:rgba(5,7,10,.55);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px">
          <div><div style="font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:4px">Rehau Blitz New</div><div style="font-size:11px;color:var(--muted)">3-камерный · 40 мм</div></div>
          <div style="font-family:var(--display);font-size:20px;font-weight:800;color:var(--accent)">4 900 ?</div>
        </div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Конструкции на любой случай: <span class="grad">от квартиры до загородного дома</span></h2>
<p>Мы создаём не просто окна, а уютную атмосферу для жизни вашей семьи. Для квартиры: Шумозащитные и энергосберегающие пластиковые окна, которые окончательно избавят от уличного гула, пыли и холода. Окна с клипсами.</p>
<p class="punch">Для балкона или лоджии: Тёплое остекление, которое преобразит помещение в дополнительную комнату даже зимой. Для коттеджа или дачи: Прочные, эстетичные и энергоэффективные окна любой конфигурации: панорамные, арочные, треугольные, трапециевидные. Сложный проём — не проблема. Наше современное оборудование в районе
 Боковая-аллея и 20-летний опыт помогают сделать окна нестандартных форм.</p>
<p>Мы работаем с проверенными немецкими профильными системами (KBE, Rehau) и применяем высокотехнологичные станки для ювелирной точности.</p>
    </div>	
  </div>
</section>

<section class="calc-section" id="calculator" data-scene="calc">
  <div class="container">
    <div class="calc-header reveal">
      <div>
        <span class="live-badge"><span class="rec"></span>Живой расчёт</span>
        <h2>Соберите окно и <span class="grad">узнайте цену</span> за 30 секунд</h2>
      </div>
      <p class="desc">Полноценный онлайн-калькулятор: выберите профиль, размер, стеклопакет и опции. Цена обновляется мгновенно.</p>
    </div>

    <div class="calc-grid">
      <div class="calc-panel reveal has-pattern">
        <div class="pattern lg">
          <svg viewBox="0 0 560 560" fill="none">
            <rect x="80" y="100" width="200" height="160" rx="4"/>
            <rect x="95" y="115" width="170" height="130" rx="3" opacity=".5"/>
            <line x1="180" y1="100" x2="180" y2="260" stroke-width="1.5"/>
            <line x1="60" y1="320" x2="300" y2="320" stroke-width="2"/>
            <path d="M 340 300 L 340 180 L 460 180" stroke-width="2"/>
          </svg>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="1">Тип конструкции</div>
            <div class="calc-group-value" id="typeLabel">Окно</div>
          </div>
          <div class="type-pills" data-group="type">
            <button class="type-pill active" data-value="window" data-mult="1" data-label="Окно"><span class="tp-icon">??</span><span>Окно</span></button>
            <button class="type-pill" data-value="balcony" data-mult="1.1" data-label="Балкон"><span class="tp-icon">??</span><span>Балкон</span></button>
            <button class="type-pill" data-value="door" data-mult="1.35" data-label="Дверь"><span class="tp-icon">??</span><span>Дверь</span></button>
            <button class="type-pill" data-value="panoramic" data-mult="1.5" data-label="Панорама"><span class="tp-icon">???</span><span>Панорама</span></button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="2">Профильная система</div>
            <div class="calc-group-value" id="profileLabel">KBE Эконом</div>
          </div>
          <div class="profile-cards" data-group="profile">
            <button class="profile-card active" data-value="kbe" data-price="3300" data-label="KBE Эконом">
              <div class="pc-name">KBE Эконом</div>
              <div class="pc-desc">2-камерный · 32 мм · базовый</div>
              <div class="pc-price">3 300 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="blitz" data-price="4900" data-label="Rehau Blitz">
              <div class="pc-name">Rehau Blitz</div>
              <div class="pc-desc">3-камерный · 40 мм · оптимальный</div>
              <div class="pc-price">4 900 ? <small>/ м?</small></div>
            </button>
            <button class="profile-card" data-value="delight" data-price="6800" data-label="Rehau Delight">
              <div class="pc-name">Rehau Delight</div>
              <div class="pc-desc">5-камерный · 70 мм · премиум</div>
              <div class="pc-price">6 800 ? <small>/ м?</small></div>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="3">Стеклопакет</div>
            <div class="calc-group-value" id="glassLabel">2-камерный</div>
          </div>
          <div class="glass-grid" data-group="glass">
            <button class="glass-card active" data-value="2ch" data-mult="1" data-label="2-камерный">
              <div class="gc-top"><span class="gc-name">2-камерный</span><span class="gc-mult">?1.0</span></div>
              <span class="gc-desc">Тепло и тишина для квартиры</span>
            </button>
            <button class="glass-card" data-value="3ch" data-mult="1.15" data-label="3-камерный">
              <div class="gc-top"><span class="gc-name">3-камерный</span><span class="gc-mult">?1.15</span></div>
              <span class="gc-desc">Максимальная шумоизоляция</span>
            </button>
            <button class="glass-card" data-value="energy" data-mult="1.35" data-label="Энергосберегающий">
              <div class="gc-top"><span class="gc-name">Энерго+</span><span class="gc-mult">?1.35</span></div>
              <span class="gc-desc">Экономия тепла до 40%</span>
            </button>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="4">Размеры <span class="info-tip" data-tip="Потяните ползунок или задайте точное значение.">?</span></div>
            <div class="calc-group-value" id="areaLabel">1.82 м?</div>
          </div>
          <div class="size-grid">
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Ширина</span>
                <div class="size-field-val" id="widthValWrap"><span id="widthVal">1300</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="widthFill"></div></div>
                <input type="range" id="widthRange" min="500" max="3000" step="50" value="1300">
              </div>
              <div class="range-ticks"><span>500</span><span>3000</span></div>
            </div>
            <div class="size-field">
              <div class="size-field-head">
                <span class="size-field-label">Высота</span>
                <div class="size-field-val" id="heightValWrap"><span id="heightVal">1400</span><small>мм</small></div>
              </div>
              <div class="range-wrap">
                <div class="range-track"><div class="range-fill" id="heightFill"></div></div>
                <input type="range" id="heightRange" min="500" max="2500" step="50" value="1400">
              </div>
              <div class="range-ticks"><span>500</span><span>2500</span></div>
            </div>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="5">Количество</div>
            <div class="calc-group-value" id="qtyLabel">1 шт.</div>
          </div>
          <div class="qty-wrap">
            <button class="qty-btn" id="qtyMinus">?</button>
            <div class="qty-value" id="qtyValue">1</div>
            <button class="qty-btn" id="qtyPlus">+</button>
            <span style="color:var(--muted);font-size:12.5px;margin-left:12px">конструкций</span>
          </div>
        </div>

        <div class="calc-group">
          <div class="calc-group-head">
            <div class="calc-group-title" data-num="6">Дополнительно</div>
            <div class="calc-group-value" id="extrasLabel">не выбрано</div>
          </div>
          <div class="extras-grid" id="extrasGrid">
            <button class="extra-check" data-value="mosquito" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Москитная сетка</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="sill" data-price="2800"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Подоконник</span></span><span class="ec-price">+2 800 ?</span></button>
            <button class="extra-check" data-value="ebb" data-price="1500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Отлив</span></span><span class="ec-price">+1 500 ?</span></button>
            <button class="extra-check" data-value="slopes" data-price="3500"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Откосы</span></span><span class="ec-price">+3 500 ?</span></button>
            <button class="extra-check" data-value="install" data-price="3000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Монтаж</span></span><span class="ec-price">+3 000 ?</span></button>
            <button class="extra-check" data-value="dismantle" data-price="1200"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Демонтаж</span></span><span class="ec-price">+1 200 ?</span></button>
            <button class="extra-check" data-value="lube" data-price="300"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Смазка</span></span><span class="ec-price">+300 ?</span></button>
            <button class="extra-check" data-value="complex" data-price="4000"><span class="ec-box"></span><span class="ec-info"><span class="ec-icon">??</span><span class="ec-name">Сложные формы</span></span><span class="ec-price">+4 000 ?</span></button>
          </div>
        </div>

      </div>

      <div class="calc-summary reveal-right has-pattern" id="calcSummary">
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <path d="M 80 60 L 340 60 L 340 340 L 320 320 L 300 340 L 280 320 L 260 340 L 240 320 L 220 340 L 200 320 L 180 340 L 160 320 L 140 340 L 120 320 L 100 340 L 80 320 Z"/>
            <line x1="110" y1="220" x2="310" y2="220" stroke-width="2"/>
          </svg>
        </div>
        <div class="calc-summary-inner">
          <div class="summary-label">Итого за заказ</div>
          <div class="summary-total" id="summaryTotal">0 ?</div>
          <div class="summary-total-sub" id="summarySub">без скидки</div>
          <div class="summary-discounts" id="summaryDiscounts"></div>
          <div class="summary-breakdown" id="summaryBreakdown"></div>
          <div class="summary-actions">
            <a href="#cta" class="btn btn-primary">Оформить заявку <span class="arrow">></span></a>
            <button class="btn btn-glass" id="resetCalc">Сбросить</button>
          </div>
          <div class="summary-note">Расчёт предварительный. Финальная цена — после бесплатного замера.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="process" data-scene="process">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Как мы работаем</span>
      <h2>Открыто, оперативно, <span class="grad">с вниманием к клиенту</span></h2>
<p>Всего четыре шага от первого звонка до идеальной установки. Наше правило за два десятилетия работы в районе
 Боковая-аллея краток: кратчайший путь от нашего производства к вам. Мы изготавливаем, а не продаём с накруткой. Поворотно-откидные окна. Вот почему устанавливаем честные расценки, чётко соблюдаем сроки и предоставляем гарантии по договору. Свыше десяти тысяч установленных окон — наша лучшая рекомендация.</p>
    </div>
    <div class="steps-4col">
      <div class="step reveal has-pattern">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="170" y="130" width="50" height="70" rx="3"/>
            <line x1="170" y1="150" x2="220" y2="150" opacity=".5"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">01</span></div>
        <h4>Бесплатный замер</h4>
        <p>Мастер приедет в удобное время и проконсультирует по системе и отделке.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.1s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <rect x="80" y="60" width="120" height="160" rx="4"/>
            <line x1="100" y1="180" x2="180" y2="180" stroke-width="2"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">02</span></div>
        <h4>Детальный расчёт</h4>
        <p>Понятная смета без доплат. Договор — только после вашего согласия.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.2s">
        <div class="pattern sm">
          <svg viewBox="0 0 280 280" fill="none">
            <circle cx="140" cy="140" r="50"/>
            <circle cx="140" cy="140" r="20"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">03</span></div>
        <h4>Изготовление 3–7 дней</h4>
        <p>Создаём окна на собственном производстве в Боковая-аллея. Точно в срок.</p>
      </div>
      <div class="step reveal has-pattern" style="transition-delay:.3s">
        <div class="pattern sm accent">
          <svg viewBox="0 0 280 280" fill="none">
            <path d="M 120 120 L 160 120 L 160 140 L 140 140 L 140 180 L 120 180 L 120 160 L 100 160 L 100 120 Z"/>
          </svg>
        </div>
        <div class="step-num"><span class="grad">04</span></div>
        <h4>Аккуратная установка</h4>
        <p>Профессионалы работают по ГОСТу. Гарантия и поддержка после установки.</p>
      </div>
    </div>
  </div>
</section>

<section class="ba-section" data-scene="ba">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Результат</span>
      <h2>До и <span class="grad">после установки</span></h2>
      <p>Потяните ползунок, чтобы сравнить результат нашей работы.</p>
    </div>
    <div class="ba-wrap reveal-scale" id="baWrap">
      <img class="ba-img ba-img-after" src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/movent-morro.jpg" alt="После">
      <div class="ba-clip" id="baClip">
        <img src="https://pbrat.ru/Data/Sites/1/media/images/plastic-windows/stoss-misoneism.jpg" alt="До">
      </div>
      <div class="ba-tag before">До</div>
      <div class="ba-tag after">После</div>
      <div class="ba-handle" id="baHandle"></div>
    </div>	
  </div>
</section>

<section id="promo" data-scene="promo">
  <div class="container">
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Наша схема сотрудничества: <span class="grad">открыто, оперативно, с вниманием к клиенту</span></h2>
<p>Бесплатный выезд замерщика. В удобное для вас время. Мастер в районе
 Боковая-аллея не только выполнит точные замеры, но и предложит варианты по профилю, фурнитуре, типу стеклопакета и отделке. Детальный расчёт. Вы получите прозрачный расчёт без неочевидных доплат. Исключительно после вашего одобрения заключаем договор. Бесплатный замер окон. Быстрое изготовление (3-7 дней). Изготавливаем окна на своём заводе в районе
 Боковая-аллея. Аккуратная установка. Наши бригады — это квалифицированные установщики, которые действуют качественно, в срок и по нормативам. После работы чисто. Гарантия и поддержка. Даём фирменную гарантию на продукцию и установку.</p>
<p>&nbsp</p>
<iframe src="https://archive.org/embed/20260801_20260801_1300" width="480" height="854" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
    </div>  
    <div class="promo reveal">
      <div class="promo-body">
        <span class="eyebrow">Специальные условия</span>
        <h2>Скидка <span class="grad">5% по промокоду</span></h2>
        <p style="color:var(--muted);font-size:14px;max-width:440px">Назовите его оператору при оформлении заказа. Плюс — беспроцентная рассрочка и консультация по эксплуатации.</p>
        <div class="promo-code" onclick="copyCode(this)">
<span id="promoText">EMMILIANO-GUSTAVO</span>
          <span class="copy-icon" id="copyIcon">? копировать</span>
        </div>
        <div class="promo-note"><span>Рассрочка 0%</span><span>Ремонт рам</span><span>Консультация</span></div>
      </div>
      <div class="promo-side">
        <div class="big">5%</div>
        <div class="desc">скидка на всю конструкцию по промокоду</div>
      </div>
    </div>
    <div class="section-head reveal">
      <p>&nbsp</p><p>&nbsp</p>
      <h2>Специальные условия</h2>
<p>Беспроцентная рассрочка в районе
 Боковая-аллея — чтобы вам было легче решиться. Зимние окна. Скидка 5% по промокоду — сообщите его оператору. Консультация по эксплуатации окон в подарок.</p>
<ol>
	<li>Оставьте заявку на сайте или по телефону</li>
	<li>Получите бесплатный замер и точный расчёт</li>
	<li>Наслаждайтесь установкой и новым уровнем комфорта</li>
</ol>

<a href="#calculator" class="btn btn-primary btn-sm" title="Купить пластиковые окна в городе Боковая-аллея">КУПИТЬ <span class="arrow">></span></a>

    </div>	
  </div>
</section>

<section class="districts" data-scene="districts">
  <div class="districts-inner">
    <div class="districts-head reveal">
      <h3>Районы <span class="grad">Санкт-Петербурга</span></h3>
      <div class="sub">Внутригородские муниципальные образования</div>
      <div class="count">140+ районов · работаем во всех</div>
    </div>
    <div class="chips-wrap reveal" id="chipsWrap">
      <div class="chips" id="chips">
        <span class="chip">Коломна-С</span><span class="chip">Сенной-округ</span><span class="chip">Адмиралтейский-округ</span>
        <span class="chip">Семёновский</span><span class="chip">Измайловское</span><span class="chip">Екатерингофский</span>
        <span class="chip">№7-Василеостровский</span><span class="chip">Васильевский</span><span class="chip">Гавань</span>
        <span class="chip">Морской-округ</span><span class="chip">Остров-Декабристов</span><span class="chip">Сампсониевское</span>
        <span class="chip">Светлановское</span><span class="chip">Сосновское</span><span class="chip">№15-Выборгский</span>
        <span class="chip">Сергиевское-Парнас</span><span class="chip">Шувалово-Озерки</span><span class="chip">Левашово</span>
        <span class="chip">Парголово</span><span class="chip">Гражданка</span><span class="chip">Академическое</span>
        <span class="chip">Финляндский-округ</span><span class="chip">№21-Калининский</span><span class="chip">Пискарёвка</span>
        <span class="chip">Северный-С</span><span class="chip">Прометей</span><span class="chip">Княжево</span>
        <span class="chip">Ульянка</span><span class="chip">Дачное</span><span class="chip">Автово-С</span>
        <span class="chip">Нарвский-округ</span><span class="chip">Красненькая-речка</span><span class="chip">Морские-ворота</span>
        <span class="chip">Колпино</span><span class="chip">Понтонный</span><span class="chip">Усть-Ижора</span>
        <span class="chip">Петро-Славянка</span><span class="chip">Сапёрный</span><span class="chip">Металлострой</span>
        <span class="chip">Полюстрово</span><span class="chip">Большая-Охта</span><span class="chip">Малая-Охта</span>
        <span class="chip">Пороховые</span><span class="chip">Ржевка</span><span class="chip">Юго-Запад</span>
        <span class="chip">Южно-Приморский</span><span class="chip">Сосновая-Поляна</span><span class="chip">Урицк</span>
        <span class="chip">Константиновское</span><span class="chip">Горелово</span><span class="chip">Красное-Село</span>
        <span class="chip">Кронштадт</span><span class="chip">Зеленогорск-С</span><span class="chip">Сестрорецк</span>
        <span class="chip">Белоостров</span><span class="chip">Комарово</span><span class="chip">Молодёжное</span>
        <span class="chip">Песочный</span><span class="chip">Репино</span><span class="chip">Серово</span>
        <span class="chip">Смолячково</span><span class="chip">Солнечное</span><span class="chip">Ушково</span>
        <span class="chip">Московская-застава</span><span class="chip">Гагаринское</span><span class="chip">Новоизмайловское</span>
        <span class="chip">Пулковский-меридиан</span><span class="chip">Звёздное</span><span class="chip">Невская-застава</span>
        <span class="chip">Ивановский</span><span class="chip">Обуховский</span><span class="chip">Рыбацкое-С</span>
        <span class="chip">Народный</span><span class="chip">№54-Невский</span><span class="chip">Невский-округ</span>
        <span class="chip">Оккервиль</span><span class="chip">Правобережный</span><span class="chip">Введенский</span>
        <span class="chip">Кронверкское</span><span class="chip">Посадский</span><span class="chip">Аптекарский-остров</span>
        <span class="chip">округ-Петровский</span><span class="chip">Чкаловское</span><span class="chip">Стрельна</span>
        <span class="chip">Ломоносов</span><span class="chip">Петергоф</span><span class="chip">Лахта-Ольгино</span>
        <span class="chip">№65-Приморский</span><span class="chip">Ланское-Чёрная-речка</span><span class="chip">Комендантский-аэродром</span>
        <span class="chip">Озеро-Долгое</span><span class="chip">Юнтолово</span><span class="chip">Коломяги</span>
        <span class="chip">Лисий-Нос</span><span class="chip">Павловск-С</span><span class="chip">Пушкин</span>
        <span class="chip">Шушары-С</span><span class="chip">Александровская</span><span class="chip">Тярлево</span>
        <span class="chip">Волковское</span><span class="chip">№72-Фрунзенский</span><span class="chip">Купчино-С</span>
        <span class="chip">Георгиевский</span><span class="chip">Александровский</span><span class="chip">Балканский</span>
        <span class="chip">Дворцовый-округ</span><span class="chip">№78-Центральный</span><span class="chip">Литейный-округ</span>
        <span class="chip">Смольнинское</span><span class="chip">Лиговка-Ямская</span><span class="chip">Владимирский-округ</span>
      </div>
      <button class="chips-toggle" onclick="toggleChips(this)">Показать все районы v</button>
    </div>
  </div>
</section>

<section class="quiz-section" id="quiz" data-scene="quiz">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow center">Подбор</span>
      <h2>Не знаете, что выбрать? <span class="grad">Ответьте на 3 вопроса</span></h2>
<p>Подберём идеальную конструкцию под вашу задачу за 30 секунд. Ваша экономия — в честности и снижении стоимости до 40%. Приходя к нам в районе
 Боковая-аллея, вы контактируете с заводом без посредников. Цена от 3 300 ?/м? — без скрытых наценок за громкое имя или аренду в центре города. Вся экономия остаётся в вашем бюджете. Зимние окна. Вы платите только за качественные материалы и профессиональную работу, а не за проценты посредников. Полный контроль. Вы будете знать, из каких компонентов и каким образом создано ваше окно.</p>
    </div>

    <div class="quiz-wrap reveal-scale has-pattern">
      <div class="pattern lg">
        <svg viewBox="0 0 560 560" fill="none">
          <path d="M 100 140 Q 100 90 150 90 Q 200 90 200 140 Q 200 170 170 180 L 170 200" stroke-width="6" stroke-linecap="round"/>
          <circle cx="170" cy="230" r="8" class="filled"/>
        </svg>
      </div>

      <div class="quiz-inner">
        <div class="quiz-progress">
          <span>Вопрос <span id="quizNum">1</span> из 3</span>
          <span id="quizPercent">33%</span>
        </div>
        <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="quizProgress"></div></div>

        <div class="quiz-step active" data-step="0">
          <div class="quiz-q">Что нужно остеклить?</div>
          <div class="quiz-q-sub">Это поможет подобрать тип конструкции</div>
          <div class="quiz-options" data-quiz="type">
            <button class="quiz-opt" data-value="apartment"><span class="qo-icon">??</span> Квартира</button>
            <button class="quiz-opt" data-value="house"><span class="qo-icon">??</span> Частный дом / дача</button>
            <button class="quiz-opt" data-value="balcony"><span class="qo-icon">??</span> Балкон / лоджия</button>
            <button class="quiz-opt" data-value="office"><span class="qo-icon">??</span> Офис / коммерция</button>
          </div>
        </div>

        <div class="quiz-step" data-step="1">
          <div class="quiz-q">Что важнее всего?</div>
          <div class="quiz-q-sub">Расставим приоритеты в подборе</div>
          <div class="quiz-options" data-quiz="priority">
            <button class="quiz-opt" data-value="quiet"><span class="qo-icon">??</span> Тишина</button>
            <button class="quiz-opt" data-value="warm"><span class="qo-icon">??</span> Тепло зимой</button>
            <button class="quiz-opt" data-value="budget"><span class="qo-icon">??</span> Минимальный бюджет</button>
            <button class="quiz-opt" data-value="premium"><span class="qo-icon">?</span> Премиум-дизайн</button>
          </div>
        </div>

        <div class="quiz-step" data-step="2">
          <div class="quiz-q">Какой у вас бюджет?</div>
          <div class="quiz-q-sub">Подберём оптимальные варианты</div>
          <div class="quiz-options" data-quiz="budget">
            <button class="quiz-opt" data-value="low"><span class="qo-icon">??</span> До 30 000 ?</button>
            <button class="quiz-opt" data-value="mid"><span class="qo-icon">??</span> 30–60 000 ?</button>
            <button class="quiz-opt" data-value="high"><span class="qo-icon">??</span> 60–120 000 ?</button>
            <button class="quiz-opt" data-value="any"><span class="qo-icon">??</span> Без ограничений</button>
          </div>
        </div>

        <div class="quiz-step quiz-result" data-step="result">
          <div class="res-icon" id="resIcon">??</div>
          <h3 id="resTitle">Мы подобрали <span class="grad">идеальное решение</span></h3>
          <p id="resDesc">Для ваших задач оптимально подойдёт профиль Rehau Blitz с 3-камерным стеклопакетом.</p>
          <div class="quiz-result-actions">
            <a href="#calculator" class="btn btn-primary">Открыть калькулятор <span class="arrow">></span></a>
            <button class="btn btn-glass" onclick="resetQuiz()">Пройти заново</button>
          </div>
        </div>

        <div class="quiz-nav" id="quizNav">
          <button class="quiz-nav-back" id="quizBack" disabled>< Назад</button>
          <button class="btn btn-primary" id="quizNext" disabled>Далее <span class="arrow">></span></button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="faq" data-scene="faq">
  <div class="container">
    <div class="faq-grid">
      <div class="faq-side reveal-left">
        <span class="eyebrow">FAQ</span>
        <h2>Отвечаем <span class="grad">честно</span></h2>
        <p>Собрали то, что чаще всего спрашивают перед заказом. Если не нашли ответ — позвоните.</p>
        <div class="contact-mini">
          <div class="icon">?</div>
          <div><div class="t1">+7 (993) 254-10-26</div><div class="t2">Ежедневно 9:00 – 21:00</div></div>
        </div>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 60 L 220 60 Q 240 60 240 80 L 240 160 Q 240 180 220 180 L 140 180 L 100 220 L 100 180 L 60 180 Q 40 180 40 160 L 40 80 Q 40 60 60 60 Z"/>
            </svg>
          </div>
          <div class="faq-q">Почему цена ниже, чем у конкурентов?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Мы — производитель, а не посредник. Вы платите только за материалы и работу. Никаких аренд витрин и лишних менеджеров в чеке.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <circle cx="140" cy="140" r="70"/>
              <line x1="140" y1="140" x2="140" y2="100" stroke-width="3"/>
              <line x1="140" y1="140" x2="175" y2="155" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Сколько ждать заказ?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Стандартный срок изготовления — 3–7 дней с момента подписания договора. Сложные конструкции — до 10 дней.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 140 60 L 200 80 L 200 140 Q 200 190 140 220 Q 80 190 80 140 L 80 80 Z" stroke-width="2"/>
              <path d="M 120 145 L 135 160 L 165 125" stroke-width="3"/>
            </svg>
          </div>
          <div class="faq-q">Какая гарантия на окна?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Даём фирменную гарантию на продукцию и на установку. Сервисное обслуживание и смазка фурнитуры — при необходимости.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm accent">
            <svg viewBox="0 0 280 280" fill="none">
              <path d="M 60 200 L 60 80 L 180 200 Z"/>
              <circle cx="220" cy="180" r="25"/>
            </svg>
          </div>
          <div class="faq-q">Можно ли сделать окно нестандартной формы?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да. Арочные, треугольные, трапециевидные, панорамные — наш высокоточный цех справится с любой сложностью.</div></div>
        </div>
        <div class="faq-item reveal has-pattern">
          <div class="pattern sm">
            <svg viewBox="0 0 280 280" fill="none">
              <rect x="60" y="100" width="160" height="100" rx="8"/>
              <line x1="60" y1="135" x2="220" y2="135" stroke-width="6"/>
            </svg>
          </div>
          <div class="faq-q">Есть ли рассрочка?<span class="faq-icon">+</span></div>
          <div class="faq-a"><div class="faq-a-inner">Да, беспроцентная рассрочка на любую сумму. Оформляем прямо на замере или при подписании договора.</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="cta" data-scene="cta">
  <div class="container cta">
    <div class="cta-grid">
      <div class="reveal-left">
        <span class="eyebrow">Три простых шага</span>
        <h2>Как купить окна <span class="grad">мечты</span></h2>
        <ul class="cta-list">
          <li><span class="num">1</span> Оставьте заявку — укажите удобный способ связи</li>
          <li><span class="num">2</span> Обсудите заказ с консультантом — уточним время замера</li>
          <li><span class="num">3</span> Активируйте спец. цену — скидки после замера</li>
        </ul>
<p style="color:var(--muted);margin-top:24px;font-size:14px">Ваш комфорт начинается с первого клика. Создайте идеальный комфорт вместе с нами! Как купить пластиковые окна? Чтобы заказать тёплые окна из пластика в районе
 Боковая-аллея, всего три простых шага. Окна в детскую. Отправьте заявку в интернете — укажите имя и телефон. Согласуйте всё по телефону — наш специалист уточнит удобное время для бесплатного замера и ответит на вопросы. Активируйте специальную цену — для всех новых клиентов предусмотрены специальные условия. Не откладывайте идею о комфорте. В тот момент, когда вы читаете, мы можем уже начать производству идеально подходящих вам окон. Сэкономьте средства, предпочтя непосредственную работу с заводом.</p>
      </div>

      <div id="leadForm" class="reveal-right has-pattern" novalidate>
        <div class="pattern">
          <svg viewBox="0 0 420 420" fill="none">
            <rect x="80" y="120" width="260" height="180" rx="8"/>
            <path d="M 80 130 L 210 230 L 340 130" stroke-width="2"/>
          </svg>
        </div>

        <h3>Оставьте заявку</h3>
        <div class="form-sub">Бесплатный замер и точный расчёт в удобное время</div>

        <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
        <input type="hidden" name="subject" value="?? Новая заявка с сайта PBrat">
        <input type="hidden" name="from_name" value="PBrat Website">
        <input type="hidden" name="redirect" value="false">

        <div class="field">
          <label>Ваше имя</label>
          <input type="text" name="name" placeholder="Как к вам обращаться?" required autocomplete="name">
        </div>
        <div class="field">
          <label>Телефон</label>
          <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" required autocomplete="tel">
        </div>
        <div class="field">
          <label>Email (необязательно)</label>
          <input type="email" name="email" placeholder="your@email.com" autocomplete="email">
        </div>
        <div class="field">
          <label>Район / адрес</label>
          <input type="text" name="address" placeholder="Например, Боковая-аллея">
        </div>
        <div class="field">
          <label>Комментарий</label>
          <textarea name="message" rows="3" placeholder="Что нужно остеклить? Пожелания..."></textarea>
        </div>

        <input type="hidden" name="calc_summary" id="calcSummaryField">

        <button type="submit" class="btn btn-primary" id="leadSubmitBtn">
          <span class="btn-text">Получить бесплатный замер</span>
          <span class="arrow">></span>
        </button>
        <div class="form-note">Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:20px" data-scene="cta">
  <div class="container">
    <div class="joke-wrap reveal has-pattern">
      <div class="pattern">
        <svg viewBox="0 0 420 420" fill="none">
          <circle cx="200" cy="200" r="120" stroke-width="3"/>
          <circle cx="160" cy="170" r="12" class="filled"/>
          <circle cx="240" cy="170" r="12" class="filled"/>
          <path d="M 150 240 Q 200 280 250 240" stroke-width="4"/>
        </svg>
      </div>
      <div class="joke-emoji">??</div>
      <div class="joke-content">
        <div class="label">Анекдот дня</div>
        <p>— Хорошее настроение?</p>
<p class="punch"><script type="text/javascript" src="https://www.anekdot.ru/rss/randomu.html"></script>
<script type="text/javascript">document.getElementById("a_rnd_title").remove();document.getElementById("a_rnd_next").remove();var pContent = document.getElementById("a_rnd").innerHTML;var replacedContent = pContent.replace(/<br>/g,"");document.getElementById('a_rnd').innerHTML = replacedContent;</script></p>
      </div>
    </div>
  </div>
</section>

<footer data-scene="footer">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#" class="logo"><span class="logo-mark">?</span>PBrat</a>
        <p>Пластиковые окна от производителя Боковая-аллея. Профильные системы, честные цены, реальные гарантии.</p>
      </div>
      <div class="foot-col">
        <h5>Сервисы</h5>
        <ul>
          <li><a href="#">Пластиковые окна</a></li>
          <li><a href="#">Остекление балконов</a></li>
          <li><a href="#">Пластиковые двери</a></li>
          <li><a href="#">Композитные окна</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Компания</h5>
        <ul>
          <li><a href="#features">О сервисе</a></li>
          <li><a href="#calculator">Калькулятор</a></li>
          <li><a href="#process">Как работаем</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div class="foot-col">
        <h5>Контакты</h5>
        <ul>
          <li><a href="tel:+79932541026">+7 (993) 254-10-26</a></li>
          <li><a href="mailto:vova@pbrat.ru">vova@pbrat.ru</a></li>
          <li><a href="#">Боковая-аллея, СПб</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>© 2026 PBrat. Все права защищены.</div>
      <div class="made">Сделано с душой Боковая-аллея</div>
      <div style="display:flex;gap:20px">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Sitemap</a>
      </div>
    </div>
  </div>
</footer>




<br /><a href='https://pbrat.ru/Пластиковые-окна-Боковая-аллея'>Admin</a>&nbsp;&nbsp;<a href='https://pbrat.ru/Пластиковые-окна-Боковая-аллея'>...</a>]]></description>
      <link>https://pbrat.ru/Пластиковые-окна-Боковая-аллея</link>
      <author>vova@pbrat.ru (Admin)</author>
      <comments>https://pbrat.ru/Пластиковые-окна-Боковая-аллея</comments>
      <guid isPermaLink="true">https://pbrat.ru/Пластиковые-окна-Боковая-аллея</guid>
      <pubDate>Sat, 24 Oct 2026 08:11:00 GMT</pubDate>
    </item>
  </channel>
</rss>