{"id":144,"date":"2026-08-08T17:49:26","date_gmt":"2026-08-08T17:49:26","guid":{"rendered":"https:\/\/astanageoscan.kz\/?page_id=144"},"modified":"2026-08-09T04:12:31","modified_gmt":"2026-08-09T04:12:31","slug":"144-2","status":"publish","type":"page","link":"https:\/\/astanageoscan.kz\/","title":{"rendered":""},"content":{"rendered":"\n<!-- HEADER START -->\n<header class=\"site-header\">\n  <!-- \u0412\u0435\u0440\u0445\u043d\u044f\u044f \u0438\u043d\u0444\u043e-\u043f\u043e\u043b\u043e\u0441\u0430 (\u0434\u043b\u044f \u041f\u041a \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432) -->\n  <div class=\"topbar\">\n    <div class=\"header-container topbar-container\">\n      <div class=\"topbar-contacts\">\n        <span class=\"topbar-item\">\n          <svg class=\"topbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/>\n            <circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\n          <\/svg>\n          \u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431. 303\n        <\/span>\n        <span class=\"topbar-item\">\n          <svg class=\"topbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <polyline points=\"12 6 12 12 16 14\"\/>\n          <\/svg>\n          \u041f\u043d-\u0421\u0431: 09:00 &#8212; 18:00\n        <\/span>\n      <\/div>\n      <div class=\"topbar-phone\">\n        <a href=\"tel:+77780009071\" class=\"phone-link\">+7 778 000 9071<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0448\u0430\u043f\u043a\u0430 -->\n  <div class=\"header-main\">\n    <div class=\"header-container main-container\">\n      \n      <!-- \u041b\u043e\u0433\u043e\u0442\u0438\u043f -->\n      <a href=\"#\" class=\"logo\">\n        <div class=\"logo-icon\">\n          <svg viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#0F4C81\" stroke-width=\"2\"\/>\n            <circle cx=\"20\" cy=\"20\" r=\"10\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n            <line x1=\"20\" y1=\"0\" x2=\"20\" y2=\"40\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n            <line x1=\"0\" y1=\"20\" x2=\"40\" y2=\"20\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n            <circle cx=\"20\" cy=\"20\" r=\"3\" fill=\"#0F4C81\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"logo-text\">\n          <span class=\"brand-name\">ASTANA <span class=\"accent-text\">GEO SCAN<\/span><\/span>\n          <span class=\"brand-sub\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u044f<\/span>\n        <\/div>\n      <\/a>\n\n      <!-- \u041f\u0440\u0438\u043b\u0438\u043d\u043a\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 -->\n      <nav class=\"nav-menu\" id=\"headerNavMenu\">\n        <ul class=\"nav-list\">\n          <li><a href=\"#services\" class=\"nav-link\">\u0423\u0441\u043b\u0443\u0433\u0438<\/a><\/li>\n          <li><a href=\"#about\" class=\"nav-link\">\u041e \u043d\u0430\u0441<\/a><\/li>\n          <li><a href=\"#steps\" class=\"nav-link\">\u042d\u0442\u0430\u043f\u044b<\/a><\/li>\n          <li><a href=\"#clients\" class=\"nav-link\">\u041a\u043b\u0438\u0435\u043d\u0442\u044b<\/a><\/li>\n          <li><a href=\"#faq\" class=\"nav-link\">FAQ<\/a><\/li>\n          <li><a href=\"#contacts\" class=\"nav-link\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/a><\/li>\n        <\/ul>\n        \n        <!-- \u0414\u043e\u043f. \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0442\u043e\u0440\u043a\u0438-\u043c\u0435\u043d\u044e -->\n        <div class=\"mobile-menu-info\">\n          <a href=\"tel:+77780009071\" class=\"mobile-menu-phone\">+7 778 000 9071<\/a>\n          <p>\ud83d\udccd \u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431. 303<\/p>\n          <p>\ud83d\udd52 \u041f\u043d-\u0421\u0431: 09:00 &#8212; 18:00<\/p>\n          <a href=\"https:\/\/go.2gis.com\/pIOEo\" target=\"_blank\" class=\"mobile-gis-link\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u0444\u0438\u0441 \u0432 2GIS \u2197<\/a>\n        <\/div>\n      <\/nav>\n\n      <!-- \u042d\u043a\u0448\u043d\u044b: \u0422\u0435\u043b\u0435\u0444\u043e\u043d (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439) + WhatsApp + \u041a\u043d\u043e\u043f\u043a\u0430 \u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 -->\n      <div class=\"header-actions\">\n        <!-- \u041a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 -->\n        <a href=\"tel:+77780009071\" class=\"mobile-phone-btn\">+7 778 000 9071<\/a>\n\n        <!-- WhatsApp \u041a\u043d\u043e\u043f\u043a\u0430 -->\n        <a href=\"https:\/\/wa.me\/77780009071\" target=\"_blank\" class=\"btn-whatsapp\" aria-label=\"WhatsApp\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.572-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z\"\/>\n          <\/svg>\n          <span class=\"wa-text\">WhatsApp<\/span>\n        <\/a>\n\n        <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 -->\n        <button class=\"hamburger\" id=\"headerHamburgerBtn\" aria-label=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u0435\u043d\u044e\">\n          <span><\/span>\n          <span><\/span>\n          <span><\/span>\n        <\/button>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/header>\n\n<style>\n  \/* --- MOBILE-FIRST HEADER STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-topbar: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --accent-green: #25D366;\n    --accent-green-hover: #20ba5a;\n    --text-dark: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  html {\n    scroll-behavior: smooth; \/* \u041f\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043a \u0441\u0435\u043a\u0446\u0438\u044f\u043c *\/\n  }\n\n  .site-header * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .site-header {\n    width: 100%;\n    position: sticky;\n    top: 0;\n    z-index: 1000;\n    background-color: var(--bg-white);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    border-bottom: 1px solid var(--border-color);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n  }\n\n  .header-container {\n    padding: 0 16px;\n    margin: 0 auto;\n    max-width: 1200px;\n  }\n\n  \/* --- 1. TOPBAR (\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043a\u0440\u044b\u0442\u0430 \u043d\u0430 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430\u0445) --- *\/\n  .topbar {\n    display: none;\n    background-color: var(--bg-topbar);\n    border-bottom: 1px solid var(--border-color);\n    padding: 6px 0;\n    font-size: 13px;\n    color: var(--text-muted);\n  }\n\n  .topbar-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .topbar-contacts {\n    display: flex;\n    gap: 20px;\n  }\n\n  .topbar-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .topbar-icon {\n    width: 14px;\n    height: 14px;\n    color: var(--accent-orange);\n  }\n\n  .phone-link {\n    color: var(--brand-blue);\n    font-weight: 700;\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n\n  .phone-link:hover {\n    color: var(--accent-orange);\n  }\n\n  \/* --- 2. MAIN HEADER (\u041c\u041e\u0411\u0418\u041b\u042c\u041d\u042b\u0419 \u0412\u0418\u0414) --- *\/\n  .header-main {\n    padding: 10px 0;\n  }\n\n  .main-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  \/* \u041b\u043e\u0433\u043e\u0442\u0438\u043f *\/\n  .logo {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    text-decoration: none;\n  }\n\n  .logo-icon {\n    width: 34px;\n    height: 34px;\n    flex-shrink: 0;\n  }\n\n  .logo-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .logo-text {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .brand-name {\n    font-size: 15px;\n    font-weight: 800;\n    color: var(--brand-dark);\n    line-height: 1.1;\n    letter-spacing: -0.2px;\n  }\n\n  .brand-name .accent-text {\n    color: var(--accent-orange);\n  }\n\n  .brand-sub {\n    font-size: 9px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 500;\n  }\n\n  \/* \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0448\u0430\u043f\u043a\u0435 *\/\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .mobile-phone-btn {\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--brand-blue);\n    text-decoration: none;\n    white-space: nowrap;\n  }\n\n  .btn-whatsapp {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background-color: var(--accent-green);\n    color: #FFFFFF;\n    text-decoration: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 600;\n    transition: background-color 0.2s;\n  }\n\n  .btn-whatsapp:hover {\n    background-color: var(--accent-green-hover);\n  }\n\n  .btn-whatsapp svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .wa-text {\n    display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 WhatsApp \u043d\u0430 \u0443\u0437\u043a\u0438\u0445 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430\u0445 *\/\n  }\n\n  \/* \u0413\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 *\/\n  .hamburger {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 22px;\n    height: 16px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    margin-left: 4px;\n  }\n\n  .hamburger span {\n    width: 100%;\n    height: 2px;\n    background-color: var(--brand-dark);\n    transition: all 0.3s ease;\n  }\n\n  .hamburger.is-active span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  .hamburger.is-active span:nth-child(2) {\n    opacity: 0;\n  }\n\n  .hamburger.is-active span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n\n  \/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e *\/\n  .nav-menu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background-color: var(--bg-white);\n    border-bottom: 3px solid var(--accent-orange);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n    display: none;\n    flex-direction: column;\n    padding: 20px 16px;\n  }\n\n  .nav-menu.is-active {\n    display: flex;\n  }\n\n  .nav-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .nav-link {\n    color: var(--text-dark);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 600;\n    display: block;\n    transition: color 0.2s;\n  }\n\n  .nav-link:hover {\n    color: var(--accent-orange);\n  }\n\n  .mobile-menu-info {\n    margin-top: 20px;\n    padding-top: 16px;\n    border-top: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    font-size: 13px;\n    color: var(--text-muted);\n  }\n\n  .mobile-menu-phone {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--brand-blue);\n    text-decoration: none;\n    margin-bottom: 4px;\n  }\n\n  .mobile-gis-link {\n    color: var(--brand-blue);\n    font-weight: 700;\n    text-decoration: none;\n    margin-top: 4px;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .topbar {\n      display: block;\n    }\n\n    .header-main {\n      padding: 14px 0;\n    }\n\n    .mobile-phone-btn {\n      display: none;\n    }\n\n    .wa-text {\n      display: inline;\n    }\n\n    .hamburger {\n      display: none;\n    }\n\n    .nav-menu {\n      position: static;\n      display: flex !important;\n      flex-direction: row;\n      border: none;\n      box-shadow: none;\n      padding: 0;\n      width: auto;\n    }\n\n    .nav-list {\n      flex-direction: row;\n      gap: 24px;\n    }\n\n    .nav-link {\n      font-size: 14px;\n    }\n\n    .mobile-menu-info {\n      display: none;\n    }\n\n    .brand-name {\n      font-size: 18px;\n    }\n\n    .brand-sub {\n      font-size: 10px;\n    }\n\n    .logo-icon {\n      width: 38px;\n      height: 38px;\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    const hamburgerBtn = document.getElementById('headerHamburgerBtn');\n    const navMenu = document.getElementById('headerNavMenu');\n\n    \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440\n    hamburgerBtn.addEventListener('click', function() {\n      hamburgerBtn.classList.toggle('is-active');\n      navMenu.classList.toggle('is-active');\n    });\n\n    \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u044e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438\n    document.querySelectorAll('.nav-link').forEach(link => {\n      link.addEventListener('click', () => {\n        hamburgerBtn.classList.remove('is-active');\n        navMenu.classList.remove('is-active');\n      });\n    });\n  });\n<\/script>\n<!-- HEADER END -->\n\n\n\n<!-- 1. \u0411\u041b\u041e\u041a 1: HERO (MOBILE-FIRST) START -->\n<section class=\"hero-section\">\n  <div class=\"hero-container\">\n    \n    <!-- \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a (\u041e\u0444\u0444\u0435\u0440 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a) -->\n    <div class=\"hero-info\">\n      <div class=\"hero-badge\">\n        <span class=\"badge-dot\"><\/span> \u0410\u0441\u0442\u0430\u043d\u0430 \u0438 \u0410\u043a\u043c\u043e\u043b\u0438\u043d\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\n      <\/div>\n      \n      <h1 class=\"hero-title\">\n        \u0412\u044b\u0441\u043e\u043a\u043e\u0442\u043e\u0447\u043d\u0430\u044f \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u044f \u0438 \u0442\u043e\u043f\u043e\u0441\u044a\u0435\u043c\u043a\u0430 \u043e\u0442 <span class=\"accent-text\">Astana Geo Scan<\/span>\n      <\/h1>\n      \n      <p class=\"hero-subtitle\">\n        \u0412\u044b\u043d\u043e\u0441 \u0433\u0440\u0430\u043d\u0438\u0446, \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 \u0441\u0435\u0442\u0435\u0439 \u0438 \u043f\u043e\u0441\u0430\u0434\u043a\u0430 \u0437\u0434\u0430\u043d\u0438\u0439 \u0441 <strong>100% \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0435\u0439 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f<\/strong> \u0432 \u043e\u0440\u0433\u0430\u043d\u0430\u0445 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0420\u041a.\n      <\/p>\n    <\/div>\n\n    <!-- \u0424\u043e\u0440\u043c\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 (\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u0445\u0432\u0430\u0442\u0430) -->\n    <div class=\"hero-card\" id=\"lead-form\">\n      <div class=\"card-header\">\n        <h2>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/h2>\n        <p>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0441\u043c\u0435\u0442\u0443 \u0438 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044e \u0437\u0430 5 \u043c\u0438\u043d\u0443\u0442 \u0432 WhatsApp<\/p>\n      <\/div>\n\n      <form class=\"lead-form\" onsubmit=\"event.preventDefault(); alert('\u0417\u0430\u044f\u0432\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430! \u041c\u044b \u0441\u0432\u044f\u0436\u0435\u043c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438.');\">\n        <div class=\"form-group\">\n          <label for=\"hero-service\">\u0412\u0438\u0434 \u0443\u0441\u043b\u0443\u0433\u0438<\/label>\n          <select id=\"hero-service\" class=\"form-control\" required>\n            <option value=\"\" disabled selected>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0443\u0441\u043b\u0443\u0433\u0443&#8230;<\/option>\n            <option value=\"topo\">\u0422\u043e\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 (1:200 &#8212; 1:5000)<\/option>\n            <option value=\"borders\">\u0412\u044b\u043d\u043e\u0441 \u0433\u0440\u0430\u043d\u0438\u0446 \u0443\u0447\u0430\u0441\u0442\u043a\u0430<\/option>\n            <option value=\"executive\">\u0418\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 \u0441\u0435\u0442\u0435\u0439<\/option>\n            <option value=\"axes\">\u0412\u044b\u043d\u043e\u0441 \u043e\u0441\u0435\u0439 \u0437\u0434\u0430\u043d\u0438\u0439 \u0438 \u0440\u0435\u043f\u0435\u0440\u044b<\/option>\n          <\/select>\n        <\/div>\n\n        <div class=\"form-group\">\n          <label for=\"hero-name\">\u0412\u0430\u0448\u0435 \u0438\u043c\u044f<\/label>\n          <input type=\"text\" id=\"hero-name\" class=\"form-control\" placeholder=\"\u041a\u0430\u043a \u043a \u0432\u0430\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f?\" required>\n        <\/div>\n\n        <div class=\"form-group\">\n          <label for=\"hero-phone\">\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430<\/label>\n          <input type=\"tel\" id=\"hero-phone\" class=\"form-control\" placeholder=\"+7 778 000 9071\" required>\n        <\/div>\n\n        <button type=\"submit\" class=\"btn-submit\">\n          <span>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/span>\n        <\/button>\n\n        <div class=\"form-security\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n          <\/svg>\n          <span>\u0412\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u044c\u0438\u043c \u043b\u0438\u0446\u0430\u043c<\/span>\n        <\/div>\n      <\/form>\n    <\/div>\n\n    <!-- \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u0444\u0430\u043a\u0442\u044b (\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u0444\u043e\u0440\u043c\u043e\u0439) -->\n    <div class=\"hero-features\">\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <path d=\"m9 12 2 2 4-4\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"feature-text\">\n          <strong>\u041f\u043e\u0433\u0440\u0435\u0448\u043d\u043e\u0441\u0442\u044c \u0434\u043e 1 \u043c\u043c<\/strong>\n          <span>\u0412\u044b\u0441\u043e\u043a\u043e\u0442\u043e\u0447\u043d\u044b\u0435 GNSS-\u043f\u0440\u0438\u0435\u043c\u043d\u0438\u043a\u0438 \u0438 \u0442\u0430\u0445\u0435\u043e\u043c\u0435\u0442\u0440\u044b<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n            <polyline points=\"14 2 14 8 20 8\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"feature-text\">\n          <strong>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0433\u043e\u0432\u043e\u0440<\/strong>\n          <span>\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u043c\u0435\u0442\u0430 \u0438 \u044e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"feature-card\">\n        <div class=\"feature-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"\/>\n            <polygon points=\"16 8 20 8 23 11 23 16 16 16 16 8\"\/>\n            <circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"\/>\n            <circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"feature-text\">\n          <strong>\u0412\u044b\u0435\u0437\u0434 \u0437\u0430 24 \u0447\u0430\u0441\u0430<\/strong>\n          <span>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u0435\u0432\u044b\u0435 \u0431\u0440\u0438\u0433\u0430\u0434\u044b \u0432 \u0410\u0441\u0442\u0430\u043d\u0435<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST HERO STYLES --- *\/\n  :root {\n    --bg-light: #F8FAFC;\n    --bg-white: #FFFFFF;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --accent-orange-hover: #E05E00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  \/* \u0421\u0431\u0440\u043e\u0441 \u0431\u0430\u0437\u043e\u0432 *\/\n  .hero-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* \u0411\u0430\u0437\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n  .hero-section {\n    background-color: var(--bg-light);\n    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);\n    background-size: 20px 20px;\n    padding: 24px 16px 40px 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .hero-container {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u041e\u0444\u0444\u0435\u0440 *\/\n  .hero-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background-color: #EFF6FF;\n    border: 1px solid #BFDBFE;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    margin-bottom: 12px;\n  }\n\n  .badge-dot {\n    width: 6px;\n    height: 6px;\n    background-color: var(--accent-orange);\n    border-radius: 50%;\n  }\n\n  .hero-title {\n    font-size: 24px;\n    line-height: 1.25;\n    font-weight: 800;\n    margin-bottom: 12px;\n    letter-spacing: -0.3px;\n  }\n\n  .hero-title .accent-text {\n    color: var(--accent-orange);\n  }\n\n  .hero-subtitle {\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--text-muted);\n  }\n\n  .hero-subtitle strong {\n    color: var(--text-main);\n  }\n\n  \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430-\u0444\u043e\u0440\u043c\u0430 *\/\n  .hero-card {\n    background: var(--bg-white);\n    padding: 20px 16px;\n    border-radius: 14px;\n    border: 1px solid var(--border-color);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);\n    position: relative;\n    overflow: hidden;\n  }\n\n  .hero-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, var(--brand-blue), var(--accent-orange));\n  }\n\n  .card-header h2 {\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 4px;\n  }\n\n  .card-header p {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  .lead-form {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .form-group label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-main);\n  }\n\n  .form-control {\n    width: 100%;\n    height: 48px; \/* \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434 \u0442\u0430\u043f \u043f\u0430\u043b\u044c\u0446\u0435\u043c *\/\n    padding: 0 14px;\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    font-size: 14px;\n    background-color: #F8FAFC;\n    color: var(--text-main);\n    transition: all 0.2s ease;\n  }\n\n  .form-control:focus {\n    outline: none;\n    border-color: var(--brand-blue);\n    background-color: #FFFFFF;\n  }\n\n  select.form-control {\n    appearance: none;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%20%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 14px center;\n  }\n\n  .btn-submit {\n    height: 50px;\n    background-color: var(--accent-orange);\n    color: #FFFFFF;\n    border: none;\n    border-radius: 8px;\n    font-size: 15px;\n    font-weight: 700;\n    cursor: pointer;\n    margin-top: 6px;\n    transition: background-color 0.2s ease;\n  }\n\n  .btn-submit:active {\n    background-color: var(--accent-orange-hover);\n  }\n\n  .form-security {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 4px;\n  }\n\n  .form-security svg {\n    width: 13px;\n    height: 13px;\n  }\n\n  \/* \u041f\u043b\u0438\u0442\u043a\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 *\/\n  .hero-features {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin-top: 6px;\n  }\n\n  .feature-card {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--bg-white);\n    padding: 12px 14px;\n    border-radius: 10px;\n    border: 1px solid var(--border-color);\n  }\n\n  .feature-icon {\n    width: 36px;\n    height: 36px;\n    background-color: #EFF6FF;\n    color: var(--brand-blue);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .feature-icon svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .feature-text {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .feature-text strong {\n    font-size: 13px;\n    color: var(--text-main);\n  }\n\n  .feature-text span {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \/* --- \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c \u0414\u041b\u042f \u0414\u0415\u0421\u041a\u0422\u0423\u041f\u0410 (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .hero-section {\n      padding: 60px 20px 80px 20px;\n    }\n\n    .hero-container {\n      display: grid;\n      grid-template-columns: 1.1fr 0.9fr;\n      gap: 40px;\n      align-items: center;\n    }\n\n    .hero-title {\n      font-size: 38px;\n      margin-bottom: 16px;\n    }\n\n    .hero-subtitle {\n      font-size: 16px;\n      margin-bottom: 24px;\n    }\n\n    .hero-card {\n      padding: 28px;\n    }\n\n    .hero-features {\n      grid-column: 1 \/ -1;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n      margin-top: 20px;\n    }\n\n    .feature-card {\n      padding: 16px;\n    }\n\n    .feature-text strong {\n      font-size: 14px;\n    }\n\n    .feature-text span {\n      font-size: 12px;\n    }\n  }\n<\/style>\n<!-- 1. \u0411\u041b\u041e\u041a 1: HERO END -->\n\n\n\n<!-- 2. \u0411\u041b\u041e\u041a 2: \u041d\u0410\u0428\u0418 \u041a\u041b\u042e\u0427\u0415\u0412\u042b\u0415 \u0423\u0421\u041b\u0423\u0413\u0418 START -->\n<section class=\"services-section\" id=\"services\">\n  <div class=\"services-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"section-header\">\n      <span class=\"section-badge\">\u0423\u0441\u043b\u0443\u0433\u0438 \u0438 \u0446\u0435\u043d\u044b<\/span>\n      <h2 class=\"section-title\">\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e-\u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 \u0432 <span class=\"accent-text\">\u0410\u0441\u0442\u0430\u043d\u0435<\/span>\n      <\/h2>\n      <p class=\"section-subtitle\">\n        \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441 \u0438\u0437\u044b\u0441\u043a\u0430\u043d\u0438\u0439 \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0447\u0435\u0440\u0442\u0435\u0436\u0435\u0439, \u043e\u0442\u0447\u0435\u0442\u043e\u0432 \u0438 \u0430\u043a\u0442\u043e\u0432 \u0432 \u0434\u0435\u043d\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442.\n      <\/p>\n    <\/div>\n\n    <!-- \u0421\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0443\u0441\u043b\u0443\u0433 -->\n    <div class=\"services-grid\">\n      \n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 1 -->\n      <div class=\"service-card\">\n        <div class=\"card-number\">01<\/div>\n        <div class=\"card-content\">\n          <h3 class=\"card-title\">\u0422\u043e\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 (1:200 \u2013 1:5000)<\/h3>\n          \n          <div class=\"card-block\">\n            <span class=\"block-label\">\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/span>\n            <p class=\"block-text\">\n              \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u043e\u043f\u043e\u043f\u043b\u0430\u043d\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 (\u0433\u0430\u0437, \u0432\u043e\u0434\u0430, \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u0435\u0441\u0442\u0432\u043e).\n            <\/p>\n          <\/div>\n\n          <div class=\"card-block result-block\">\n            <span class=\"block-label\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b:<\/span>\n            <ul class=\"result-list\">\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0422\u043e\u043f\u043e\u043f\u043b\u0430\u043d \u0432 DWG (AutoCAD) \u0438 PDF\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0411\u0443\u043c\u0430\u0436\u043d\u044b\u0439 \u043f\u043b\u0430\u043d \u0441 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u044c\u044e\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0442\u0447\u0435\u0442\n              <\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n\n        <div class=\"card-action\">\n          <a href=\"https:\/\/wa.me\/77780009071?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5!%20%D0%9C%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%A2%D0%BE%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F%20%D1%81%D1%8A%D0%B5%D0%BC%D0%BA%D0%B0\" target=\"_blank\" class=\"btn-card\">\n            <span>\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u043e\u043f\u043e\u0441\u044a\u0435\u043c\u043a\u0443<\/span>\n            <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 2 -->\n      <div class=\"service-card\">\n        <div class=\"card-number\">02<\/div>\n        <div class=\"card-content\">\n          <h3 class=\"card-title\">\u0418\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 \u0441\u0435\u0442\u0435\u0439 \u0438 \u043f\u043e\u0441\u0430\u0434\u043a\u0430 \u0437\u0434\u0430\u043d\u0438\u0439<\/h3>\n          \n          <div class=\"card-block\">\n            <span class=\"block-label\">\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/span>\n            <p class=\"block-text\">\n              \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430, \u0441\u044a\u0435\u043c\u043a\u0430 \u043f\u0440\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434\u0437\u0435\u043c\u043d\u044b\u0445\/\u043d\u0430\u0437\u0435\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0441\u044b\u043f\u043a\u043e\u0439 \u0442\u0440\u0430\u043d\u0448\u0435\u0439, \u043f\u043e\u0441\u0430\u0434\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.\n            <\/p>\n          <\/div>\n\n          <div class=\"card-block result-block\">\n            <span class=\"block-label\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b:<\/span>\n            <ul class=\"result-list\">\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0418\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0421\u0445\u0435\u043c\u044b \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u043e\u0441\u0430\u0434\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0410\u043a\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0434\u043b\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b\n              <\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n\n        <div class=\"card-action\">\n          <a href=\"https:\/\/wa.me\/77780009071?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5!%20%D0%9C%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F%20%D1%81%D1%8A%D0%B5%D0%BC%D0%BA%D0%B0\" target=\"_blank\" class=\"btn-card\">\n            <span>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/span>\n            <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 3 -->\n      <div class=\"service-card\">\n        <div class=\"card-number\">03<\/div>\n        <div class=\"card-content\">\n          <h3 class=\"card-title\">\u0412\u044b\u043d\u043e\u0441 \u0432 \u043d\u0430\u0442\u0443\u0440\u0443 \u0433\u0440\u0430\u043d\u0438\u0446 \u0437\u0435\u043c\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043a\u0430<\/h3>\n          \n          <div class=\"card-block\">\n            <span class=\"block-label\">\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/span>\n            <p class=\"block-text\">\n              \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u044b\u0445 \u043c\u0435\u0436\u0435\u0432\u044b\u0445 \u0433\u0440\u0430\u043d\u0438\u0446 \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043f\u043e \u043a\u0430\u0434\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0438\u0437 \u0426\u041e\u041d\/\u0414\u0417\u0420. \u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043f\u043e\u0440\u043e\u0432 \u0441 \u0441\u043e\u0441\u0435\u0434\u044f\u043c\u0438, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0431\u043e\u0440\u0430.\n            <\/p>\n          <\/div>\n\n          <div class=\"card-block result-block\">\n            <span class=\"block-label\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b:<\/span>\n            <ul class=\"result-list\">\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0417\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0435\u0432\u044b\u0435 \u0437\u043d\u0430\u043a\u0438 (\u043a\u043e\u043b\u044b\u0448\u043a\u0438)\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0410\u043a\u0442 \u0432\u044b\u043d\u043e\u0441\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0424\u043e\u0442\u043e\u0444\u0438\u043a\u0441\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a\n              <\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n\n        <div class=\"card-action\">\n          <a href=\"https:\/\/wa.me\/77780009071?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5!%20%D0%9C%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%92%D1%8B%D0%BD%D0%BE%D1%81%20%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%86\" target=\"_blank\" class=\"btn-card\">\n            <span>\u0412\u044b\u0437\u0432\u0430\u0442\u044c \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0441\u0442\u0430<\/span>\n            <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 4 -->\n      <div class=\"service-card\">\n        <div class=\"card-number\">04<\/div>\n        <div class=\"card-content\">\n          <h3 class=\"card-title\">\u0412\u044b\u043d\u043e\u0441 \u043e\u0441\u0435\u0439 \u0437\u0434\u0430\u043d\u0438\u0439 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0435\u043f\u0435\u0440\u043e\u0432<\/h3>\n          \n          <div class=\"card-block\">\n            <span class=\"block-label\">\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/span>\n            <p class=\"block-text\">\n              \u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043c\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u0431\u0438\u0432\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u044b (\u0413\u0420\u041e) \u0438 \u0432\u044b\u0441\u043e\u0442\u043d\u044b\u0445 \u0440\u0435\u043f\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0441\u0442\u0440\u043e\u0439\u0449\u0438\u043a\u043e\u0432.\n            <\/p>\n          <\/div>\n\n          <div class=\"card-block result-block\">\n            <span class=\"block-label\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b:<\/span>\n            <ul class=\"result-list\">\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0417\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438 \u043c\u043e\u043d\u0442\u0430\u0436\u043d\u044b\u0435 \u043e\u0441\u0438\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0441\u043e\u0442\u043d\u044b\u0435 \u0440\u0435\u043f\u0435\u0440\u044b\n              <\/li>\n              <li>\n                <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                \u0410\u043a\u0442 \u0441\u0434\u0430\u0447\u0438-\u043f\u0440\u0438\u0435\u043c\u043a\u0438 \u0413\u0420\u041e \u0441 \u043f\u0435\u0447\u0430\u0442\u044c\u044e\n              <\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n\n        <div class=\"card-action\">\n          <a href=\"https:\/\/wa.me\/77780009071?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5!%20%D0%9C%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%92%D1%8B%D0%BD%D0%BE%D1%81%20%D0%BE%D1%81%D0%B5%D0%B9\" target=\"_blank\" class=\"btn-card\">\n            <span>\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0443<\/span>\n            <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST SERVICES STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-card: #FFFFFF;\n    --bg-tag: #F1F5F9;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --accent-orange-hover: #E05E00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .services-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .services-section {\n    padding: 40px 16px;\n    background-color: var(--bg-white);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .services-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0431\u043b\u043e\u043a\u0430 *\/\n  .section-header {\n    margin-bottom: 24px;\n  }\n\n  .section-badge {\n    display: inline-block;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--brand-blue);\n    background-color: #EFF6FF;\n    padding: 4px 10px;\n    border-radius: 6px;\n    margin-bottom: 8px;\n  }\n\n  .section-title {\n    font-size: 24px;\n    line-height: 1.25;\n    font-weight: 800;\n    margin-bottom: 8px;\n    letter-spacing: -0.3px;\n  }\n\n  .section-title .accent-text {\n    color: var(--accent-orange);\n  }\n\n  .section-subtitle {\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--text-muted);\n  }\n\n  \/* \u0421\u0435\u0442\u043a\u0430 *\/\n  .services-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 *\/\n  .service-card {\n    background-color: var(--bg-card);\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    position: relative;\n    transition: all 0.25s ease;\n  }\n\n  .service-card:hover {\n    border-color: var(--accent-orange);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n  }\n\n  .card-number {\n    font-size: 12px;\n    font-weight: 800;\n    color: var(--accent-orange);\n    background-color: #FFF7ED;\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 12px;\n  }\n\n  .card-title {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1.3;\n    margin-bottom: 14px;\n    color: var(--text-main);\n  }\n\n  .card-block {\n    margin-bottom: 12px;\n  }\n\n  .block-label {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--text-muted);\n    letter-spacing: 0.5px;\n    display: block;\n    margin-bottom: 4px;\n  }\n\n  .block-text {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--text-main);\n  }\n\n  \/* \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b *\/\n  .result-block {\n    background-color: #F8FAFC;\n    padding: 12px;\n    border-radius: 8px;\n    border: 1px dashed var(--border-color);\n    margin-bottom: 16px;\n  }\n\n  .result-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .result-list li {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--brand-blue);\n    display: flex;\n    align-items: flex-start;\n    gap: 6px;\n    line-height: 1.4;\n  }\n\n  .check-icon {\n    width: 14px;\n    height: 14px;\n    color: var(--accent-orange);\n    flex-shrink: 0;\n    margin-top: 1px;\n  }\n\n  \/* \u041a\u043d\u043e\u043f\u043a\u0430 *\/\n  .card-action {\n    margin-top: auto;\n  }\n\n  .btn-card {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    height: 44px;\n    background-color: #F1F5F9;\n    color: var(--text-main);\n    text-decoration: none;\n    font-size: 13px;\n    font-weight: 700;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n  }\n\n  .btn-arrow {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n  }\n\n  .service-card:hover .btn-card {\n    background-color: var(--accent-orange);\n    color: #FFFFFF;\n  }\n\n  .service-card:hover .btn-arrow {\n    transform: translateX(4px);\n  }\n\n  \/* --- DESKTOP STYLES (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .services-section {\n      padding: 70px 20px;\n    }\n\n    .section-header {\n      margin-bottom: 40px;\n    }\n\n    .section-title {\n      font-size: 36px;\n    }\n\n    .section-subtitle {\n      font-size: 16px;\n      max-width: 600px;\n    }\n\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 24px;\n    }\n\n    .service-card {\n      padding: 28px;\n    }\n\n    .card-title {\n      font-size: 20px;\n    }\n\n    .block-text {\n      font-size: 14px;\n    }\n\n    .result-list li {\n      font-size: 13px;\n    }\n  }\n<\/style>\n<!-- 2. \u0411\u041b\u041e\u041a 2: \u041d\u0410\u0428\u0418 \u041a\u041b\u042e\u0427\u0415\u0412\u042b\u0415 \u0423\u0421\u041b\u0423\u0413\u0418 END -->\n\n\n\n<!-- 3. \u0411\u041b\u041e\u041a 3: \u041f\u0420\u0415\u0418\u041c\u0423\u0429\u0415\u0421\u0422\u0412\u0410 START -->\n<section class=\"advantages-section\" id=\"about\">\n  <div class=\"advantages-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"advantages-header\">\n      <div class=\"advantages-badge\">\u041d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c<\/div>\n      <h2 class=\"advantages-title\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 Astana Geo Scan<\/h2>\n      <p class=\"advantages-subtitle\">\u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u044e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0447\u0438\u0441\u0442\u043e\u0442\u0443 \u0438 \u0431\u0435\u0437\u0443\u043f\u0440\u0435\u0447\u043d\u0443\u044e \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435<\/p>\n    <\/div>\n\n    <!-- \u0421\u0435\u0442\u043a\u0430 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 -->\n    <div class=\"advantages-grid\">\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 1 -->\n      <div class=\"advantage-card\">\n        <div class=\"adv-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n            <path d=\"m9 12 2 2 4-4\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"adv-content\">\n          <h3 class=\"adv-title\">\u041b\u0438\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n          <p class=\"adv-desc\">\n            \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u0442\u0430\u0445\u0435\u043e\u043c\u0435\u0442\u0440\u044b (\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e 1\u2033), \u0434\u0432\u0443\u0445\u0447\u0430\u0441\u0442\u043e\u0442\u043d\u044b\u0435 GNSS RTK \u043f\u0440\u0438\u0435\u043c\u043d\u0438\u043a\u0438 \u0438 \u0431\u0435\u0441\u043f\u0438\u043b\u043e\u0442\u043d\u044b\u0435 \u043b\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u044b. \u0412\u0441\u0435 \u043f\u0440\u0438\u0431\u043e\u0440\u044b \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u043c\u0435\u0442\u0440\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043e\u0432\u0435\u0440\u043a\u0443.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 2 -->\n      <div class=\"advantage-card\">\n        <div class=\"adv-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n            <polyline points=\"14 2 14 8 20 8\"\/>\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n            <polyline points=\"10 9 9 9 8 9\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"adv-content\">\n          <h3 class=\"adv-title\">\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043d\u043e\u0440\u043c\u0430\u043c \u0420\u041a<\/h3>\n          <p class=\"adv-desc\">\n            \u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u0441\u044a\u0435\u043c\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0421\u041d\u0438\u041f, \u0421\u041f \u0438 \u0413\u041e\u0421\u0422\u0430\u043c \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0438 \u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d. \u041d\u0430\u0448\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u0433\u0440\u0430\u0434\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0434\u0430\u0441\u0442\u0440\u0430.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 3 -->\n      <div class=\"advantage-card\">\n        <div class=\"adv-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <path d=\"M12 8v4l3 3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"adv-content\">\n          <h3 class=\"adv-title\">\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h3>\n          <p class=\"adv-desc\">\n            \u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0431\u0435\u0441\u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0447\u0435\u0442\u043e\u0432 \u0432 \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u0410\u0441\u0442\u0430\u043d\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0441\u043e\u0433\u043b\u0430\u0441\u0443\u044e\u0449\u0438\u0445 \u043e\u0440\u0433\u0430\u043d\u043e\u0432 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u2014 \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 4 -->\n      <div class=\"advantage-card\">\n        <div class=\"adv-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/>\n            <line x1=\"6\" y1=\"8\" x2=\"6\" y2=\"8.01\"\/>\n            <line x1=\"10\" y1=\"8\" x2=\"18\" y2=\"8\"\/>\n            <line x1=\"6\" y1=\"12\" x2=\"18\" y2=\"12\"\/>\n            <line x1=\"6\" y1=\"16\" x2=\"14\" y2=\"16\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"adv-content\">\n          <h3 class=\"adv-title\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u0438\u0437. \u0438 \u044e\u0440. \u043b\u0438\u0446\u0430\u043c\u0438<\/h3>\n          <p class=\"adv-desc\">\n            \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u043d\u044b\u0439 \u0438 \u0431\u0435\u0437\u043d\u0430\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442. \u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 (\u0410\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442, \u042d\u0421\u0424) \u0441 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u043d\u043e\u0440\u043c.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST ADVANTAGES STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-light: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .advantages-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .advantages-section {\n    padding: 40px 16px;\n    background-color: var(--bg-light);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .advantages-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n  .advantages-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .advantages-badge {\n    display: inline-block;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n  }\n\n  .advantages-title {\n    font-size: 22px;\n    font-weight: 800;\n    line-height: 1.3;\n    margin-bottom: 8px;\n    color: var(--brand-dark);\n  }\n\n  .advantages-subtitle {\n    font-size: 13px;\n    color: var(--text-muted);\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.5;\n  }\n\n  \/* \u0421\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a *\/\n  .advantages-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 *\/\n  .advantage-card {\n    background: var(--bg-white);\n    border: 1px solid var(--border-color);\n    border-radius: 14px;\n    padding: 20px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    position: relative;\n    overflow: hidden;\n    transition: all 0.25s ease;\n  }\n\n  .advantage-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background: transparent;\n    transition: background 0.25s ease;\n  }\n\n  .advantage-card:hover {\n    border-color: #CBD5E1;\n    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.08);\n    transform: translateY(-2px);\n  }\n\n  .advantage-card:hover::before {\n    background: var(--accent-orange);\n  }\n\n  .adv-icon {\n    width: 44px;\n    height: 44px;\n    background-color: #EFF6FF;\n    color: var(--brand-blue);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .adv-icon svg {\n    width: 22px;\n    height: 22px;\n  }\n\n  .adv-content {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .adv-title {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--brand-dark);\n    line-height: 1.3;\n  }\n\n  .adv-desc {\n    font-size: 13px;\n    color: var(--text-muted);\n    line-height: 1.5;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .advantages-section {\n      padding: 70px 20px;\n    }\n\n    .advantages-header {\n      margin-bottom: 40px;\n    }\n\n    .advantages-title {\n      font-size: 32px;\n    }\n\n    .advantages-subtitle {\n      font-size: 15px;\n    }\n\n    \/* \u0421\u0435\u0442\u043a\u0430 2x2 *\/\n    .advantages-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 24px;\n    }\n\n    .advantage-card {\n      padding: 28px;\n      flex-direction: row;\n      align-items: flex-start;\n      gap: 20px;\n    }\n\n    .adv-icon {\n      width: 50px;\n      height: 50px;\n    }\n\n    .adv-icon svg {\n      width: 26px;\n      height: 26px;\n    }\n\n    .adv-title {\n      font-size: 18px;\n    }\n\n    .adv-desc {\n      font-size: 14px;\n    }\n  }\n<\/style>\n<!-- 3. \u0411\u041b\u041e\u041a 3: \u041f\u0420\u0415\u0418\u041c\u0423\u0429\u0415\u0421\u0422\u0412\u0410 END -->\n\n\n\n<!-- 4. \u0411\u041b\u041e\u041a 4: \u042d\u0422\u0410\u041f\u042b \u0421\u041e\u0422\u0420\u0423\u0414\u041d\u0418\u0427\u0415\u0421\u0422\u0412\u0410 START -->\n<section class=\"steps-section\" id=\"steps\">\n  <div class=\"steps-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"steps-header\">\n      <div class=\"steps-badge\">\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441<\/div>\n      <h2 class=\"steps-title\">\u042d\u0442\u0430\u043f\u044b \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430<\/h2>\n      <p class=\"steps-subtitle\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u043e \u0447\u0435\u0442\u043a\u043e\u043c\u0443 \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442\u0443 \u2014 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0437\u0432\u043e\u043d\u043a\u0430 \u0434\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u0447\u0435\u0442\u0430<\/p>\n    <\/div>\n\n    <!-- \u0421\u043f\u0438\u0441\u043e\u043a \u044d\u0442\u0430\u043f\u043e\u0432 -->\n    <div class=\"steps-timeline\">\n\n      <!-- \u0428\u0430\u0433 1 -->\n      <div class=\"step-card\">\n        <div class=\"step-num\">01<\/div>\n        <div class=\"step-content\">\n          <h3 class=\"step-title\">\u0417\u0430\u044f\u0432\u043a\u0430 \u0438 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f<\/h3>\n          <p class=\"step-desc\">\n            \u0412\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0437\u0430\u044f\u0432\u043a\u0443 \u0438\u043b\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u0441 \u043d\u0430\u043c\u0438. \u041c\u044b \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0428\u0430\u0433 2 -->\n      <div class=\"step-card\">\n        <div class=\"step-num\">02<\/div>\n        <div class=\"step-content\">\n          <h3 class=\"step-title\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430<\/h3>\n          <p class=\"step-desc\">\n            \u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438 \u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043d\u0430\u0446\u0435\u043d\u043e\u043a. \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0433\u043e\u0432\u043e\u0440.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0428\u0430\u0433 3 -->\n      <div class=\"step-card\">\n        <div class=\"step-num\">03<\/div>\n        <div class=\"step-content\">\n          <h3 class=\"step-title\">\u041f\u043e\u043b\u0435\u0432\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n          <p class=\"step-desc\">\n            \u041d\u0430\u0448\u0438 \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0441\u0442\u044b \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0442 \u043d\u0430 \u0432\u0430\u0448 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0410\u0441\u0442\u0430\u043d\u0435 \u0438\u043b\u0438 \u0410\u043a\u043c\u043e\u043b\u0438\u043d\u0441\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0442\u043e\u0447\u043d\u044b\u043c \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c (GNSS\/\u0442\u0430\u0445\u0435\u043e\u043c\u0435\u0442\u0440\u044b) \u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u044f\u0442 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0428\u0430\u0433 4 -->\n      <div class=\"step-card\">\n        <div class=\"step-num\">04<\/div>\n        <div class=\"step-content\">\n          <h3 class=\"step-title\">\u041a\u0430\u043c\u0435\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h3>\n          <p class=\"step-desc\">\n            \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u041f\u041e (AutoCAD, Civil 3D), \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u043e\u0447\u043d\u044b\u0435 \u0442\u043e\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043b\u0430\u043d\u044b, \u0441\u0445\u0435\u043c\u044b \u0438 \u043e\u0442\u0447\u0435\u0442\u044b.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0428\u0430\u0433 5 -->\n      <div class=\"step-card\">\n        <div class=\"step-num\">05<\/div>\n        <div class=\"step-content\">\n          <h3 class=\"step-title\">\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/h3>\n          <p class=\"step-desc\">\n            \u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432\u0430\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0441 \u0441\u0438\u043d\u0435\u0439 \u043f\u0435\u0447\u0430\u0442\u044c\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 (DWG, PDF) \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 email\/WhatsApp.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- \u041d\u0438\u0436\u043d\u044f\u044f CTA \u043f\u043b\u0430\u0448\u043a\u0430 -->\n    <div class=\"steps-cta\">\n      <div class=\"cta-text\">\n        <strong>\u0413\u043e\u0442\u043e\u0432\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443?<\/strong>\n        <span>\u0417\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0437\u0430\u044f\u0432\u043a\u0443 \u0438 \u0432\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430 \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.<\/span>\n      <\/div>\n      <a href=\"https:\/\/wa.me\/77780009071?text=\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435!%20\u0425\u043e\u0447\u0443%20\u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c%20\u044d\u0442\u0430\u043f\u044b%20\u0438%20\u043d\u0430\u0447\u0430\u0442\u044c%20\u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e\" target=\"_blank\" class=\"cta-btn\">\n        <span>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044e<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST STEPS STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-light: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .steps-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .steps-section {\n    padding: 40px 16px;\n    background-color: var(--bg-white);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .steps-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n  .steps-header {\n    text-align: center;\n    margin-bottom: 32px;\n  }\n\n  .steps-badge {\n    display: inline-block;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n  }\n\n  .steps-title {\n    font-size: 22px;\n    font-weight: 800;\n    line-height: 1.3;\n    margin-bottom: 8px;\n    color: var(--brand-dark);\n  }\n\n  .steps-subtitle {\n    font-size: 13px;\n    color: var(--text-muted);\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.5;\n  }\n\n  \/* \u0422\u0430\u0439\u043c\u043b\u0430\u0439\u043d (\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430) *\/\n  .steps-timeline {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    position: relative;\n  }\n\n  .step-card {\n    background: var(--bg-light);\n    border: 1px solid var(--border-color);\n    border-radius: 14px;\n    padding: 20px 16px;\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    position: relative;\n    transition: all 0.25s ease;\n  }\n\n  .step-card:hover {\n    border-color: var(--brand-blue);\n    background-color: var(--bg-white);\n    box-shadow: 0 6px 16px rgba(15, 76, 129, 0.06);\n    transform: translateY(-2px);\n  }\n\n  .step-num {\n    font-size: 22px;\n    font-weight: 900;\n    color: var(--accent-orange);\n    background: #FFF7ED;\n    border: 1px solid #FFEDD5;\n    width: 44px;\n    height: 44px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .step-content {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .step-title {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--brand-dark);\n    line-height: 1.3;\n  }\n\n  .step-desc {\n    font-size: 13px;\n    color: var(--text-muted);\n    line-height: 1.5;\n  }\n\n  \/* CTA \u041f\u043b\u0430\u0448\u043a\u0430 *\/\n  .steps-cta {\n    margin-top: 28px;\n    background: linear-gradient(135deg, var(--brand-dark) 0%, #2A303C 100%);\n    border-radius: 14px;\n    padding: 20px;\n    color: #FFFFFF;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    text-align: center;\n  }\n\n  .cta-text strong {\n    display: block;\n    font-size: 15px;\n    margin-bottom: 4px;\n  }\n\n  .cta-text span {\n    font-size: 12px;\n    color: #A0AAB8;\n  }\n\n  .cta-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 46px;\n    background-color: var(--accent-orange);\n    color: #FFFFFF;\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 700;\n    border-radius: 8px;\n    transition: background-color 0.2s ease;\n  }\n\n  .cta-btn:hover {\n    background-color: #E05E00;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .steps-section {\n      padding: 70px 20px;\n    }\n\n    .steps-header {\n      margin-bottom: 48px;\n    }\n\n    .steps-title {\n      font-size: 32px;\n    }\n\n    .steps-subtitle {\n      font-size: 15px;\n    }\n\n    \/* \u0421\u0435\u0442\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 5 \u0448\u0430\u0433\u043e\u0432 \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e *\/\n    .steps-timeline {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 24px;\n    }\n\n    .step-card {\n      padding: 24px;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .step-num {\n      width: 48px;\n      height: 48px;\n      font-size: 24px;\n    }\n\n    .step-title {\n      font-size: 18px;\n    }\n\n    .step-desc {\n      font-size: 14px;\n    }\n\n    .steps-cta {\n      margin-top: 40px;\n      padding: 28px 36px;\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n      text-align: left;\n    }\n\n    .cta-text strong {\n      font-size: 18px;\n    }\n\n    .cta-text span {\n      font-size: 14px;\n    }\n\n    .cta-btn {\n      padding: 0 28px;\n      height: 50px;\n      white-space: nowrap;\n    }\n  }\n<\/style>\n<!-- 4. \u0411\u041b\u041e\u041a 4: \u042d\u0422\u0410\u041f\u042b \u0421\u041e\u0422\u0420\u0423\u0414\u041d\u0418\u0427\u0415\u0421\u0422\u0412\u0410 END -->\n\n\n\n<!-- 6. \u0411\u041b\u041e\u041a 6: FAQ (\u0427\u0410\u0421\u0422\u041e \u0417\u0410\u0414\u0410\u0412\u0410\u0415\u041c\u042b\u0415 \u0412\u041e\u041f\u0420\u041e\u0421\u042b) START -->\n<section class=\"faq-section\" id=\"faq\">\n  <div class=\"faq-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"faq-header\">\n      <div class=\"faq-badge\">\u0412\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043e\u0442\u0432\u0435\u0442\u044b<\/div>\n      <h2 class=\"faq-title\">\u0427\u0430\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/h2>\n      <p class=\"faq-subtitle\">\u041e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0431 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e-\u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0430\u0431\u043e\u0442 \u0432 \u0410\u0441\u0442\u0430\u043d\u0435<\/p>\n    <\/div>\n\n    <!-- \u0421\u043f\u0438\u0441\u043e\u043a \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430 -->\n    <div class=\"faq-accordion\">\n\n      <!-- \u0412\u043e\u043f\u0440\u043e\u0441 1 -->\n      <div class=\"faq-item\">\n        <button class=\"faq-question\" aria-expanded=\"false\">\n          <span>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 \u043f\u0440\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0435 \u0434\u043e\u043c\u0430?<\/span>\n          <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <polyline points=\"6 9 12 15 18 9\"\/>\n          <\/svg>\n        <\/button>\n        <div class=\"faq-answer\">\n          <p>\n            \u0422\u043e\u043f\u043e\u0441\u044a\u0435\u043c\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u043d\u0430 \u0443\u0447\u0430\u0441\u0442\u043a\u0430, \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0440\u0435\u043b\u044c\u0435\u0444\u0430 \u043c\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0438 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 (\u0433\u0430\u0437, \u0432\u043e\u0434\u043e\u043f\u0440\u043e\u0432\u043e\u0434, \u043a\u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u0435\u0441\u0442\u0432\u043e).\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0412\u043e\u043f\u0440\u043e\u0441 2 -->\n      <div class=\"faq-item\">\n        <button class=\"faq-question\" aria-expanded=\"false\">\n          <span>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u044b\u043d\u043e\u0441 \u0433\u0440\u0430\u043d\u0438\u0446 \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u0432 \u043d\u0430\u0442\u0443\u0440\u0443?<\/span>\n          <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <polyline points=\"6 9 12 15 18 9\"\/>\n          <\/svg>\n        <\/button>\n        <div class=\"faq-answer\">\n          <p>\n            \u041f\u043e\u043b\u0435\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043d\u0430 \u0443\u0447\u0430\u0441\u0442\u043a\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043f\u043b\u043e\u0449\u0430\u0434\u0438 (\u0434\u043e 10-15 \u0441\u043e\u0442\u043e\u043a) \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043e\u0442 40 \u0434\u043e 90 \u043c\u0438\u043d\u0443\u0442. \u0410\u043a\u0442 \u0432\u044b\u043d\u043e\u0441\u0430 \u0433\u0440\u0430\u043d\u0438\u0446 \u0441 \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0435\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u043a\u0430\u043c\u0438 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u043b\u0438\u0431\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0434\u043d\u044f.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0412\u043e\u043f\u0440\u043e\u0441 3 -->\n      <div class=\"faq-item\">\n        <button class=\"faq-question\" aria-expanded=\"false\">\n          <span>\u0412 \u043a\u0430\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0447\u0435\u0440\u0442\u0435\u0436\u0438?<\/span>\n          <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <polyline points=\"6 9 12 15 18 9\"\/>\n          <\/svg>\n        <\/button>\n        <div class=\"faq-answer\">\n          <p>\n            \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0432 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 DWG (AutoCAD) \u0434\u043b\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432, PDF \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u043d\u043d\u044b\u0439 \u0431\u0443\u043c\u0430\u0436\u043d\u044b\u0439 \u0430\u043b\u044c\u0431\u043e\u043c \u0441 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0435\u0447\u0430\u0442\u044f\u043c\u0438 \u043d\u0430\u0448\u0435\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- \u0412\u043e\u043f\u0440\u043e\u0441 4 -->\n      <div class=\"faq-item\">\n        <button class=\"faq-question\" aria-expanded=\"false\">\n          <span>\u0427\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442?<\/span>\n          <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <polyline points=\"6 9 12 15 18 9\"\/>\n          <\/svg>\n        <\/button>\n        <div class=\"faq-answer\">\n          <p>\n            \u0414\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0440\u0430\u0431\u043e\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0434\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0437\u0435\u043c\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u0438\u043b\u0438 \u0433\u043e\u0441\u0430\u043a\u0442, \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0440\u0438\u0433\u0430\u0434\u044b \u0438 (\u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438) \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432 \u0438\u043b\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0439.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- \u041f\u043b\u0430\u0448\u043a\u0430 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 -->\n    <div class=\"faq-footer-note\">\n      <p>\u041d\u0435 \u043d\u0430\u0448\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0432\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441?<\/p>\n      <a href=\"https:\/\/wa.me\/77780009071?text=\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435!%20\u0423%20\u043c\u0435\u043d\u044f%20\u0435\u0441\u0442\u044c%20\u0432\u043e\u043f\u0440\u043e\u0441%20\u043f\u043e%20\u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0438\" target=\"_blank\" class=\"faq-wa-link\">\n        \u0421\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0432 WhatsApp\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST FAQ STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-light: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .faq-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .faq-section {\n    padding: 40px 16px;\n    background-color: var(--bg-white);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .faq-container {\n    max-width: 800px;\n    margin: 0 auto;\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a *\/\n  .faq-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .faq-badge {\n    display: inline-block;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n  }\n\n  .faq-title {\n    font-size: 22px;\n    font-weight: 800;\n    line-height: 1.3;\n    margin-bottom: 8px;\n    color: var(--brand-dark);\n  }\n\n  .faq-subtitle {\n    font-size: 13px;\n    color: var(--text-muted);\n    line-height: 1.5;\n  }\n\n  \/* \u0410\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d *\/\n  .faq-accordion {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .faq-item {\n    background: var(--bg-light);\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    overflow: hidden;\n    transition: border-color 0.2s ease;\n  }\n\n  .faq-item.is-open {\n    border-color: var(--brand-blue);\n    background: var(--bg-white);\n    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.05);\n  }\n\n  .faq-question {\n    width: 100%;\n    padding: 16px;\n    background: transparent;\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    text-align: left;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--brand-dark);\n    cursor: pointer;\n    outline: none;\n  }\n\n  .faq-icon {\n    width: 20px;\n    height: 20px;\n    color: var(--brand-blue);\n    flex-shrink: 0;\n    transition: transform 0.3s ease;\n  }\n\n  .faq-item.is-open .faq-icon {\n    transform: rotate(180deg);\n    color: var(--accent-orange);\n  }\n\n  .faq-answer {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-out, padding 0.3s ease;\n    padding: 0 16px;\n  }\n\n  .faq-item.is-open .faq-answer {\n    padding: 0 16px 16px 16px;\n  }\n\n  .faq-answer p {\n    font-size: 13px;\n    line-height: 1.6;\n    color: var(--text-muted);\n  }\n\n  \/* \u0424\u0443\u0442\u0435\u0440 \u0431\u043b\u043e\u043a\u0430 *\/\n  .faq-footer-note {\n    margin-top: 28px;\n    text-align: center;\n    font-size: 13px;\n    color: var(--text-muted);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .faq-wa-link {\n    color: var(--accent-orange);\n    font-weight: 700;\n    text-decoration: none;\n  }\n\n  .faq-wa-link:hover {\n    text-decoration: underline;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .faq-section {\n      padding: 70px 20px;\n    }\n\n    .faq-header {\n      margin-bottom: 40px;\n    }\n\n    .faq-title {\n      font-size: 32px;\n    }\n\n    .faq-subtitle {\n      font-size: 15px;\n    }\n\n    .faq-question {\n      padding: 20px 24px;\n      font-size: 17px;\n    }\n\n    .faq-item.is-open .faq-answer {\n      padding: 0 24px 20px 24px;\n    }\n\n    .faq-answer p {\n      font-size: 14px;\n    }\n\n    .faq-footer-note {\n      flex-direction: row;\n      justify-content: center;\n      gap: 8px;\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    const faqQuestions = document.querySelectorAll('.faq-question');\n\n    faqQuestions.forEach(question => {\n      question.addEventListener('click', () => {\n        const item = question.parentElement;\n        const answer = item.querySelector('.faq-answer');\n        const isOpen = item.classList.contains('is-open');\n\n        \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b\n        document.querySelectorAll('.faq-item').forEach(otherItem => {\n          if (otherItem !== item) {\n            otherItem.classList.remove('is-open');\n            otherItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false');\n            otherItem.querySelector('.faq-answer').style.maxHeight = null;\n          }\n        });\n\n        \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n        if (isOpen) {\n          item.classList.remove('is-open');\n          question.setAttribute('aria-expanded', 'false');\n          answer.style.maxHeight = null;\n        } else {\n          item.classList.add('is-open');\n          question.setAttribute('aria-expanded', 'true');\n          answer.style.maxHeight = answer.scrollHeight + \"px\";\n        }\n      });\n    });\n  });\n<\/script>\n<!-- 6. \u0411\u041b\u041e\u041a 6: FAQ END -->\n\n\n\n<!-- \u0411\u041b\u041e\u041a \u041d\u0410\u0428\u0418 \u041a\u041b\u0418\u0415\u041d\u0422\u042b START -->\n<section class=\"clients-section\" id=\"clients\">\n  <div class=\"clients-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"clients-header\">\n      <div class=\"clients-badge\">\u041d\u0430\u043c \u0434\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u043b\u0438\u0434\u0435\u0440\u044b<\/div>\n      <h2 class=\"clients-title\">\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0438 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u044b<\/h2>\n      <p class=\"clients-subtitle\">\u041f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u044b\u0441\u043a\u0430\u043d\u0438\u044f \u0438 \u0441\u044a\u0435\u043c\u043a\u0438 \u0434\u043b\u044f \u0432\u0435\u0434\u0443\u0449\u0438\u0445 \u0434\u0435\u0432\u0435\u043b\u043e\u043f\u0435\u0440\u043e\u0432 \u0438 \u0433\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d\u0430<\/p>\n    <\/div>\n\n    <!-- \u0421\u0435\u0442\u043a\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 -->\n    <div class=\"clients-grid\">\n\n      <!-- \u041a\u043b\u0438\u0435\u043d\u0442 1: BI Group -->\n      <div class=\"client-card\">\n        <div class=\"client-logo logo-bi\">\n          <span class=\"logo-text-bold\">BI<\/span>\n          <span class=\"logo-text-light\">GROUP<\/span>\n        <\/div>\n        <span class=\"client-type\">\u041a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0439 \u0437\u0430\u0441\u0442\u0440\u043e\u0439\u0449\u0438\u043a \u0420\u041a<\/span>\n      <\/div>\n\n      <!-- \u041a\u043b\u0438\u0435\u043d\u0442 2: \u0411\u0410\u0417\u0418\u0421 \u0410 -->\n      <div class=\"client-card\">\n        <div class=\"client-logo logo-bazis\">\n          <span class=\"logo-text-bold\">\u0411\u0410\u0417\u0418\u0421<\/span>\n          <span class=\"logo-badge-a\">\u0410<\/span>\n        <\/div>\n        <span class=\"client-type\">\u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f<\/span>\n      <\/div>\n\n      <!-- \u041a\u043b\u0438\u0435\u043d\u0442 3: G PARK -->\n      <div class=\"client-card\">\n        <div class=\"client-logo logo-gpark\">\n          <span class=\"logo-text-g\">G<\/span>\n          <span class=\"logo-text-park\">PARK<\/span>\n        <\/div>\n        <span class=\"client-type\">\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043e\u043d\u043d\u043e-\u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430<\/span>\n      <\/div>\n\n      <!-- \u041a\u043b\u0438\u0435\u043d\u0442 4: \u0410\u043a\u0438\u043c\u0430\u0442 \u0410\u0441\u0442\u0430\u043d\u044b -->\n      <div class=\"client-card\">\n        <div class=\"client-logo logo-akimat\">\n          <svg class=\"akimat-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M3 21h18M5 21V7l7-4 7 4v14M9 10h2m4 0h2M9 14h2m4 0h2\"\/>\n          <\/svg>\n          <div class=\"akimat-text\">\n            <span>\u0410\u041a\u0418\u041c\u0410\u0422<\/span>\n            <small>\u0433. \u0410\u0441\u0442\u0430\u043d\u0430<\/small>\n          <\/div>\n        <\/div>\n        <span class=\"client-type\">\u0413\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0440\u0433\u0430\u043d<\/span>\n      <\/div>\n\n    <\/div>\n\n    <!-- \u0414\u043e\u0432\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043b\u0430\u0448\u043a\u0430 -->\n    <div class=\"clients-trust-note\">\n      <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n        <path d=\"m9 12 2 2 4-4\"\/>\n      <\/svg>\n      <span>\u0421\u043e\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0439 \u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0430\u0439\u043d\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/span>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST CLIENTS STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-light: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .clients-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .clients-section {\n    padding: 40px 16px;\n    background-color: var(--bg-light);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .clients-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a *\/\n  .clients-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .clients-badge {\n    display: inline-block;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n  }\n\n  .clients-title {\n    font-size: 22px;\n    font-weight: 800;\n    line-height: 1.3;\n    margin-bottom: 8px;\n    color: var(--brand-dark);\n  }\n\n  .clients-subtitle {\n    font-size: 13px;\n    color: var(--text-muted);\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.5;\n  }\n\n  \/* \u0421\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a (2x2 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445) *\/\n  .clients-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n  }\n\n  \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 *\/\n  .client-card {\n    background: var(--bg-white);\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    padding: 16px 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: 8px;\n    min-height: 100px;\n    transition: all 0.25s ease;\n  }\n\n  .client-card:hover {\n    border-color: var(--brand-blue);\n    box-shadow: 0 6px 16px rgba(15, 76, 129, 0.08);\n    transform: translateY(-2px);\n  }\n\n  \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 *\/\n  .client-logo {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'Arial Black', system-ui, sans-serif;\n  }\n\n  \/* BI Group *\/\n  .logo-bi .logo-text-bold {\n    font-size: 20px;\n    font-weight: 900;\n    color: #0F4C81;\n    margin-right: 4px;\n  }\n  .logo-bi .logo-text-light {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--brand-dark);\n    letter-spacing: 1px;\n  }\n\n  \/* \u0411\u0410\u0417\u0418\u0421 \u0410 *\/\n  .logo-bazis .logo-text-bold {\n    font-size: 17px;\n    font-weight: 900;\n    color: #1E2229;\n    letter-spacing: 0.5px;\n  }\n  .logo-bazis .logo-badge-a {\n    background: var(--accent-orange);\n    color: #FFFFFF;\n    font-size: 13px;\n    font-weight: 900;\n    padding: 1px 6px;\n    border-radius: 4px;\n    margin-left: 5px;\n  }\n\n  \/* G PARK *\/\n  .logo-gpark .logo-text-g {\n    font-size: 22px;\n    font-weight: 900;\n    color: var(--accent-orange);\n    margin-right: 2px;\n  }\n  .logo-gpark .logo-text-park {\n    font-size: 16px;\n    font-weight: 800;\n    color: #0F4C81;\n    letter-spacing: 1px;\n  }\n\n  \/* \u0410\u043a\u0438\u043c\u0430\u0442 *\/\n  .logo-akimat {\n    gap: 6px;\n  }\n  .akimat-icon {\n    width: 22px;\n    height: 22px;\n    color: var(--brand-blue);\n  }\n  .akimat-text {\n    display: flex;\n    flex-direction: column;\n    text-align: left;\n    line-height: 1;\n  }\n  .akimat-text span {\n    font-size: 13px;\n    font-weight: 900;\n    color: var(--brand-dark);\n    letter-spacing: 0.5px;\n  }\n  .akimat-text small {\n    font-size: 9px;\n    color: var(--text-muted);\n    font-weight: 600;\n  }\n\n  .client-type {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-weight: 500;\n  }\n\n  \/* \u041f\u043b\u0430\u0448\u043a\u0430 \u0434\u043e\u0432\u0435\u0440\u0438\u044f *\/\n  .clients-trust-note {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    background: #FFFFFF;\n    border: 1px dashed #CBD5E1;\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 12px;\n    color: var(--text-muted);\n    text-align: center;\n  }\n\n  .trust-icon {\n    width: 16px;\n    height: 16px;\n    color: var(--accent-orange);\n    flex-shrink: 0;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .clients-section {\n      padding: 60px 20px;\n    }\n\n    .clients-header {\n      margin-bottom: 40px;\n    }\n\n    .clients-title {\n      font-size: 32px;\n    }\n\n    .clients-subtitle {\n      font-size: 15px;\n    }\n\n    \/* 4 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434 *\/\n    .clients-grid {\n      grid-template-columns: repeat(4, 1fr);\n      gap: 20px;\n    }\n\n    .client-card {\n      padding: 24px 16px;\n      min-height: 120px;\n    }\n\n    .logo-bi .logo-text-bold { font-size: 24px; }\n    .logo-bi .logo-text-light { font-size: 16px; }\n\n    .logo-bazis .logo-text-bold { font-size: 20px; }\n    .logo-bazis .logo-badge-a { font-size: 15px; }\n\n    .logo-gpark .logo-text-g { font-size: 26px; }\n    .logo-gpark .logo-text-park { font-size: 18px; }\n\n    .akimat-icon { width: 26px; height: 26px; }\n    .akimat-text span { font-size: 15px; }\n    .akimat-text small { font-size: 10px; }\n\n    .client-type {\n      font-size: 12px;\n    }\n\n    .clients-trust-note {\n      margin-top: 28px;\n      font-size: 13px;\n    }\n  }\n<\/style>\n<!-- \u0411\u041b\u041e\u041a \u041d\u0410\u0428\u0418 \u041a\u041b\u0418\u0415\u041d\u0422\u042b END -->\n\n\n\n<!-- 7. \u0411\u041b\u041e\u041a 7: \u041a\u041e\u041d\u0422\u0410\u041a\u0422\u042b \u0418 \u0421\u0425\u0415\u041c\u0410 \u041f\u0420\u041e\u0415\u0417\u0414\u0410 START -->\n<section class=\"contacts-section\" id=\"contacts\">\n  <div class=\"contacts-container\">\n    \n    <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0438 -->\n    <div class=\"contacts-header\">\n      <div class=\"contacts-badge\">\u0421\u0432\u044f\u0437\u044c \u0441 \u043d\u0430\u043c\u0438<\/div>\n      <h2 class=\"contacts-title\">\u0416\u0434\u0435\u043c \u0432\u0430\u0441 \u0432 \u043d\u0430\u0448\u0435\u043c \u043e\u0444\u0438\u0441\u0435<\/h2>\n      <p class=\"contacts-subtitle\">\u041f\u0440\u0438\u0435\u0437\u0436\u0430\u0439\u0442\u0435 \u043d\u0430 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u0441\u0432\u044f\u0436\u0438\u0442\u0435\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u0430\u0441 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c<\/p>\n    <\/div>\n\n    <!-- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 -->\n    <div class=\"contacts-grid\">\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 1: \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u041a\u0422\u0410-\u043a\u043d\u043e\u043f\u043a\u0438 -->\n      <div class=\"contacts-info-card\">\n        \n        <div class=\"info-list\">\n          <!-- \u0410\u0434\u0440\u0435\u0441 -->\n          <div class=\"info-item\">\n            <div class=\"info-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/>\n                <circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\n              <\/svg>\n            <\/div>\n            <div class=\"info-details\">\n              <strong>\u0410\u0434\u0440\u0435\u0441 \u043e\u0444\u0438\u0441\u0430:<\/strong>\n              <span>\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0430 \u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d, \u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431\u0438\u043d\u0435\u0442 303<\/span>\n            <\/div>\n          <\/div>\n\n          <!-- \u0422\u0435\u043b\u0435\u0444\u043e\u043d -->\n          <div class=\"info-item\">\n            <div class=\"info-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n              <\/svg>\n            <\/div>\n            <div class=\"info-details\">\n              <strong>\u041f\u0440\u044f\u043c\u043e\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d:<\/strong>\n              <a href=\"tel:+77780009071\" class=\"phone-link\">+7 778 000 9071<\/a>\n            <\/div>\n          <\/div>\n\n          <!-- \u0413\u0440\u0430\u0444\u0438\u043a \u0440\u0430\u0431\u043e\u0442\u044b -->\n          <div class=\"info-item\">\n            <div class=\"info-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                <polyline points=\"12 6 12 12 16 14\"\/>\n              <\/svg>\n            <\/div>\n            <div class=\"info-details\">\n              <strong>\u0420\u0435\u0436\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u044b:<\/strong>\n              <span>\u041f\u043d \u2013 \u0421\u0431: 09:00 \u2013 18:00 (\u0412\u0441 \u2014 \u043f\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438)<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- \u041a\u043d\u043e\u043f\u043a\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u043e\u0432 -->\n        <div class=\"messengers-block\">\n          <span class=\"messengers-label\">\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u044b:<\/span>\n          <div class=\"messengers-buttons\">\n            <a href=\"https:\/\/wa.me\/77780009071\" target=\"_blank\" class=\"msg-btn btn-wa\">\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.572-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z\"\/>\n              <\/svg>\n              <span>WhatsApp<\/span>\n            <\/a>\n            \n            <a href=\"https:\/\/t.me\/+77780009071\" target=\"_blank\" class=\"msg-btn btn-tg\">\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.141.119.098.152.228.166.319.016.102.031.332.016.516z\"\/>\n              <\/svg>\n              <span>Telegram<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <!-- \u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u043f\u0435\u0440\u0435\u0437\u0432\u043e\u043d\u0430 -->\n        <div class=\"callback-box\">\n          <h4>\u041e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b?<\/h4>\n          <p>\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u043c\u0435\u0440, \u0438 \u043d\u0430\u0448 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u043f\u0435\u0440\u0435\u0437\u0432\u043e\u043d\u0438\u0442 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 10 \u043c\u0438\u043d\u0443\u0442<\/p>\n          <form class=\"callback-form\" onsubmit=\"event.preventDefault(); alert('\u0421\u043f\u0430\u0441\u0438\u0431\u043e! \u0418\u043d\u0436\u0435\u043d\u0435\u0440 \u0441\u0432\u044f\u0436\u0435\u0442\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 10 \u043c\u0438\u043d\u0443\u0442.');\">\n            <input type=\"tel\" class=\"callback-input\" placeholder=\"+7 778 000 9071\" required>\n            <button type=\"submit\" class=\"callback-btn\">\u041f\u0435\u0440\u0435\u0437\u0432\u043e\u043d\u0438\u0442\u044c \u043c\u043d\u0435<\/button>\n          <\/form>\n        <\/div>\n\n      <\/div>\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 2: \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 2GIS -->\n      <div class=\"contacts-map-card\">\n        <div class=\"map-header\">\n          <span>\u0421\u0445\u0435\u043c\u0430 \u043f\u0440\u043e\u0435\u0437\u0434\u0430 (2GIS)<\/span>\n          <a href=\"https:\/\/go.2gis.com\/pIOEo\" target=\"_blank\" class=\"map-external-link\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 2GIS \u2197<\/a>\n        <\/div>\n        \n        <div class=\"map-wrapper\">\n          <!-- \u041f\u0440\u044f\u043c\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430-\u0432\u0438\u0434\u0436\u0435\u0442 2GIS -->\n          <a href=\"https:\/\/go.2gis.com\/pIOEo\" target=\"_blank\" class=\"gis-card-link\">\n            <div class=\"gis-card-content\">\n              <div class=\"gis-badge\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/>\n                  <circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\n                <\/svg>\n                <span>2GIS \u041a\u0430\u0440\u0442\u0430<\/span>\n              <\/div>\n              <h3>Astana Geo Scan<\/h3>\n              <p>\u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431\u0438\u043d\u0435\u0442 303<\/p>\n              <span class=\"gis-btn\">\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432 2GIS<\/span>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* --- MOBILE-FIRST CONTACTS STYLES --- *\/\n  :root {\n    --bg-white: #FFFFFF;\n    --bg-light: #F8FAFC;\n    --brand-dark: #1E2229;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --accent-green: #25D366;\n    --accent-tg: #0088cc;\n    --text-main: #0F172A;\n    --text-muted: #64748B;\n    --border-color: #E2E8F0;\n  }\n\n  .contacts-section * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .contacts-section {\n    padding: 40px 16px;\n    background-color: var(--bg-white);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--text-main);\n  }\n\n  .contacts-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  .contacts-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .contacts-badge {\n    display: inline-block;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n  }\n\n  .contacts-title {\n    font-size: 22px;\n    font-weight: 800;\n    line-height: 1.3;\n    margin-bottom: 8px;\n    color: var(--brand-dark);\n  }\n\n  .contacts-subtitle {\n    font-size: 13px;\n    color: var(--text-muted);\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.5;\n  }\n\n  .contacts-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .contacts-info-card {\n    background: var(--bg-light);\n    border: 1px solid var(--border-color);\n    border-radius: 14px;\n    padding: 20px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .info-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .info-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n  }\n\n  .info-icon {\n    width: 36px;\n    height: 36px;\n    background: #FFFFFF;\n    border: 1px solid var(--border-color);\n    color: var(--brand-blue);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .info-icon svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .info-details {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .info-details strong {\n    font-size: 12px;\n    color: var(--text-muted);\n    font-weight: 600;\n  }\n\n  .info-details span {\n    font-size: 14px;\n    color: var(--text-main);\n    line-height: 1.4;\n  }\n\n  .phone-link {\n    font-size: 16px;\n    font-weight: 800;\n    color: var(--brand-blue);\n    text-decoration: none;\n  }\n\n  .phone-link:hover {\n    color: var(--accent-orange);\n  }\n\n  .messengers-block {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .messengers-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n  }\n\n  .messengers-buttons {\n    display: flex;\n    gap: 10px;\n  }\n\n  .msg-btn {\n    flex: 1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    height: 40px;\n    border-radius: 8px;\n    color: #FFFFFF;\n    text-decoration: none;\n    font-size: 13px;\n    font-weight: 700;\n    transition: opacity 0.2s;\n  }\n\n  .msg-btn:hover {\n    opacity: 0.9;\n  }\n\n  .msg-btn svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  .btn-wa { background-color: var(--accent-green); }\n  .btn-tg { background-color: var(--accent-tg); }\n\n  .callback-box {\n    background: #FFFFFF;\n    border: 1px solid var(--border-color);\n    border-radius: 10px;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .callback-box h4 {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--brand-dark);\n  }\n\n  .callback-box p {\n    font-size: 12px;\n    color: var(--text-muted);\n    line-height: 1.4;\n  }\n\n  .callback-form {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 4px;\n  }\n\n  .callback-input {\n    height: 42px;\n    padding: 0 12px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    font-size: 13px;\n    background: #F8FAFC;\n    outline: none;\n  }\n\n  .callback-input:focus {\n    border-color: var(--brand-blue);\n    background: #FFFFFF;\n  }\n\n  .callback-btn {\n    height: 42px;\n    background-color: var(--accent-orange);\n    color: #FFFFFF;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 700;\n    cursor: pointer;\n  }\n\n  \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u0432 2GIS *\/\n  .contacts-map-card {\n    background: var(--bg-light);\n    border: 1px solid var(--border-color);\n    border-radius: 14px;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .map-header {\n    padding: 12px 16px;\n    background: #FFFFFF;\n    border-bottom: 1px solid var(--border-color);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--brand-dark);\n  }\n\n  .map-external-link {\n    color: var(--brand-blue);\n    text-decoration: none;\n  }\n\n  .map-wrapper {\n    padding: 24px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #1E2229 0%, #0F4C81 100%);\n    min-height: 280px;\n  }\n\n  .gis-card-link {\n    text-decoration: none;\n    width: 100%;\n  }\n\n  .gis-card-content {\n    background: #FFFFFF;\n    border-radius: 12px;\n    padding: 24px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n    box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n    transition: transform 0.2s ease;\n  }\n\n  .gis-card-content:hover {\n    transform: translateY(-4px);\n  }\n\n  .gis-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background: #EFF6FF;\n    color: var(--brand-blue);\n    padding: 4px 10px;\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 700;\n  }\n\n  .gis-badge svg {\n    width: 14px;\n    height: 14px;\n    color: var(--accent-orange);\n  }\n\n  .gis-card-content h3 {\n    font-size: 20px;\n    font-weight: 800;\n    color: var(--brand-dark);\n  }\n\n  .gis-card-content p {\n    font-size: 13px;\n    color: var(--text-muted);\n  }\n\n  .gis-btn {\n    margin-top: 6px;\n    background-color: var(--accent-orange);\n    color: #FFFFFF;\n    padding: 10px 20px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 700;\n    display: inline-block;\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .contacts-section {\n      padding: 70px 20px;\n    }\n\n    .contacts-header {\n      margin-bottom: 40px;\n    }\n\n    .contacts-title {\n      font-size: 32px;\n    }\n\n    .contacts-subtitle {\n      font-size: 15px;\n    }\n\n    .contacts-grid {\n      display: grid;\n      grid-template-columns: 420px 1fr;\n      gap: 24px;\n      align-items: stretch;\n    }\n\n    .contacts-info-card {\n      padding: 28px;\n    }\n\n    .callback-form {\n      flex-direction: row;\n    }\n\n    .callback-input {\n      flex: 1;\n    }\n\n    .contacts-map-card {\n      min-height: 100%;\n    }\n\n    .map-wrapper {\n      min-height: calc(100% - 45px);\n      padding: 40px;\n    }\n  }\n<\/style>\n<!-- 7. \u0411\u041b\u041e\u041a 7: \u041a\u041e\u041d\u0422\u0410\u041a\u0422\u042b \u0418 \u0421\u0425\u0415\u041c\u0410 \u041f\u0420\u041e\u0415\u0417\u0414\u0410 END -->\n\n\n\n<!-- FOOTER START -->\n<footer class=\"site-footer\">\n  <div class=\"footer-container\">\n    \n    <!-- \u0412\u0435\u0440\u0445\u043d\u0438\u0439 \u0441\u0435\u0442\u043e\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0444\u0443\u0442\u0435\u0440\u0430 -->\n    <div class=\"footer-grid\">\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 1: \u041b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u0420\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b -->\n      <div class=\"footer-col col-brand\">\n        <a href=\"\/\" class=\"footer-logo\">\n          <div class=\"logo-icon\">\n            <svg viewBox=\"0 0 40 40\" fill=\"none\">\n              <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#0F4C81\" stroke-width=\"2\"\/>\n              <circle cx=\"20\" cy=\"20\" r=\"10\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n              <line x1=\"20\" y1=\"0\" x2=\"20\" y2=\"40\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n              <line x1=\"0\" y1=\"20\" x2=\"40\" y2=\"20\" stroke=\"#FF6B00\" stroke-width=\"2\"\/>\n              <circle cx=\"20\" cy=\"20\" r=\"3\" fill=\"#FFFFFF\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"logo-text\">\n            <span class=\"brand-name\">ASTANA <span class=\"accent-text\">GEO SCAN<\/span><\/span>\n            <span class=\"brand-sub\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u044f<\/span>\n          <\/div>\n        <\/a>\n\n        <p class=\"footer-company-desc\">\n          \u0412\u044b\u0441\u043e\u043a\u043e\u0442\u043e\u0447\u043d\u044b\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e-\u0433\u0435\u043e\u0434\u0435\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u044b\u0441\u043a\u0430\u043d\u0438\u044f, \u0442\u043e\u043f\u043e\u0441\u044a\u0435\u043c\u043a\u0430 \u0438 \u0432\u044b\u043d\u043e\u0441 \u0433\u0440\u0430\u043d\u0438\u0446 \u0432 \u0410\u0441\u0442\u0430\u043d\u0435 \u0438 \u0410\u043a\u043c\u043e\u043b\u0438\u043d\u0441\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.\n        <\/p>\n\n        <div class=\"footer-requisites\">\n          <strong>\u0422\u041e\u041e \u00abAstana Geo Scan\u00bb<\/strong>\n          <span>\u0411\u0418\u041d: 210X400XXX78<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 2: \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u0443\u0441\u043b\u0443\u0433\u0430\u043c -->\n      <div class=\"footer-col\">\n        <h4 class=\"footer-col-title\">\u0423\u0441\u043b\u0443\u0433\u0438<\/h4>\n        <ul class=\"footer-links\">\n          <li><a href=\"#services\">\u0422\u043e\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430<\/a><\/li>\n          <li><a href=\"#services\">\u0412\u044b\u043d\u043e\u0441 \u0433\u0440\u0430\u043d\u0438\u0446 \u0443\u0447\u0430\u0441\u0442\u043a\u0430<\/a><\/li>\n          <li><a href=\"#services\">\u0418\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u044a\u0435\u043c\u043a\u0430 \u0441\u0435\u0442\u0435\u0439<\/a><\/li>\n          <li><a href=\"#services\">\u0412\u044b\u043d\u043e\u0441 \u043e\u0441\u0435\u0439 \u0437\u0434\u0430\u043d\u0438\u0439 \u0438 \u0440\u0435\u043f\u0435\u0440\u044b<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 3: \u0411\u044b\u0441\u0442\u0440\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 -->\n      <div class=\"footer-col\">\n        <h4 class=\"footer-col-title\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/h4>\n        <ul class=\"footer-links\">\n          <li><a href=\"#about\">\u041e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438<\/a><\/li>\n          <li><a href=\"#steps\">\u042d\u0442\u0430\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b<\/a><\/li>\n          <li><a href=\"#clients\">\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b<\/a><\/li>\n          <li><a href=\"#faq\">\u0412\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043e\u0442\u0432\u0435\u0442\u044b (FAQ)<\/a><\/li>\n          <li><a href=\"#contacts\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- \u041a\u043e\u043b\u043e\u043d\u043a\u0430 4: \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b \u0438 \u0421\u043e\u0446\u0441\u0435\u0442\u0438 -->\n      <div class=\"footer-col\">\n        <h4 class=\"footer-col-title\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/h4>\n        <div class=\"footer-contacts\">\n          <a href=\"tel:+77780009071\" class=\"footer-phone\">+7 778 000 9071<\/a>\n          <p class=\"footer-address\">\u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431. 303<\/p>\n          <p class=\"footer-hours\">\u041f\u043d-\u0421\u0431: 09:00 \u2013 18:00<\/p>\n        <\/div>\n\n        <div class=\"footer-socials\">\n          <a href=\"https:\/\/wa.me\/77780009071\" target=\"_blank\" class=\"social-btn wa\" aria-label=\"WhatsApp\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.572-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z\"\/><\/svg>\n          <\/a>\n          <a href=\"https:\/\/t.me\/+77780009071\" target=\"_blank\" class=\"social-btn tg\" aria-label=\"Telegram\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.141.119.098.152.228.166.319.016.102.031.332.016.516z\"\/><\/svg>\n          <\/a>\n          <a href=\"https:\/\/go.2gis.com\/pIOEo\" target=\"_blank\" class=\"social-btn gis\" aria-label=\"2GIS\">\n            <span>2GIS<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- \u041d\u0438\u0436\u043d\u044f\u044f \u043f\u043e\u043b\u043e\u0441\u0430 \u0441 \u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u043e\u043c -->\n    <div class=\"footer-bottom\">\n      <p class=\"copyright\">\u00a9 2026 Astana Geo Scan. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b.<\/p>\n      <a href=\"#privacy\" class=\"privacy-link\">\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>\n    <\/div>\n\n  <\/div>\n<\/footer>\n\n<style>\n  \/* --- MOBILE-FIRST FOOTER STYLES --- *\/\n  :root {\n    --bg-footer: #14171C;\n    --brand-blue: #0F4C81;\n    --accent-orange: #FF6B00;\n    --accent-green: #25D366;\n    --accent-tg: #0088cc;\n    --text-white: #FFFFFF;\n    --text-muted: #94A3B8;\n    --border-dark: rgba(255, 255, 255, 0.08);\n  }\n\n  .site-footer * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .site-footer {\n    background-color: var(--bg-footer);\n    color: var(--text-white);\n    padding: 40px 16px 20px 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    border-top: 1px solid var(--border-dark);\n  }\n\n  .footer-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  \/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 *\/\n  .footer-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n    padding-bottom: 32px;\n    border-bottom: 1px solid var(--border-dark);\n  }\n\n  .footer-col {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  \/* \u041b\u043e\u0433\u043e\u0442\u0438\u043f \u0432 \u0444\u0443\u0442\u0435\u0440\u0435 *\/\n  .footer-logo {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    text-decoration: none;\n  }\n\n  .footer-logo .logo-icon {\n    width: 32px;\n    height: 32px;\n  }\n\n  .footer-logo .brand-name {\n    font-size: 16px;\n    font-weight: 800;\n    color: var(--text-white);\n    line-height: 1.1;\n  }\n\n  .footer-logo .accent-text {\n    color: var(--accent-orange);\n  }\n\n  .footer-logo .brand-sub {\n    font-size: 9px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    display: block;\n  }\n\n  .footer-company-desc {\n    font-size: 13px;\n    color: var(--text-muted);\n    line-height: 1.5;\n  }\n\n  .footer-requisites {\n    font-size: 12px;\n    color: var(--text-muted);\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding-top: 4px;\n  }\n\n  .footer-requisites strong {\n    color: var(--text-white);\n  }\n\n  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a *\/\n  .footer-col-title {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--text-white);\n    margin-bottom: 4px;\n    position: relative;\n  }\n\n  .footer-links {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .footer-links a {\n    color: var(--text-muted);\n    text-decoration: none;\n    font-size: 13px;\n    transition: color 0.2s;\n  }\n\n  .footer-links a:hover {\n    color: var(--accent-orange);\n  }\n\n  \/* \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b \u0432 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 *\/\n  .footer-contacts {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .footer-phone {\n    font-size: 16px;\n    font-weight: 800;\n    color: var(--accent-orange);\n    text-decoration: none;\n  }\n\n  .footer-address, .footer-hours {\n    font-size: 13px;\n    color: var(--text-muted);\n  }\n\n  \/* \u0421\u043e\u0446\u0441\u0435\u0442\u0438 *\/\n  .footer-socials {\n    display: flex;\n    gap: 10px;\n    margin-top: 8px;\n  }\n\n  .social-btn {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #FFFFFF;\n    text-decoration: none;\n    transition: opacity 0.2s;\n  }\n\n  .social-btn:hover {\n    opacity: 0.85;\n  }\n\n  .social-btn svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .social-btn.wa { background-color: var(--accent-green); }\n  .social-btn.tg { background-color: var(--accent-tg); }\n  .social-btn.gis { \n    background-color: var(--brand-blue); \n    font-size: 10px; \n    font-weight: 900; \n  }\n\n  \/* \u0424\u0443\u0442\u0435\u0440 \u0431\u043e\u0442\u0442\u043e\u043c *\/\n  .footer-bottom {\n    padding-top: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n    text-align: center;\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  .privacy-link {\n    color: var(--text-muted);\n    text-decoration: underline;\n  }\n\n  .privacy-link:hover {\n    color: var(--text-white);\n  }\n\n  \/* --- DESKTOP \u0412\u0415\u0420\u0421\u0418\u042f (\u041e\u0422 992px) --- *\/\n  @media (min-width: 992px) {\n    .site-footer {\n      padding: 60px 20px 24px 20px;\n    }\n\n    \/* \u0420\u0430\u0437\u0432\u043e\u0440\u043e\u0442 \u0432 4 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 *\/\n    .footer-grid {\n      display: grid;\n      grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;\n      gap: 40px;\n      padding-bottom: 40px;\n    }\n\n    .footer-bottom {\n      flex-direction: row;\n      justify-content: space-between;\n      padding-top: 24px;\n    }\n  }\n<\/style>\n<!-- FOOTER END -->\n","protected":false},"excerpt":{"rendered":"<p>\u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431. 303 \u041f\u043d-\u0421\u0431: 09:00 &#8212; 18:00 +7 778 000 9071 ASTANA GEO SCAN \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u044f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"disabled","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-144","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/astanageoscan.kz\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\u0433. \u0410\u0441\u0442\u0430\u043d\u0430, \u0443\u043b. \u0410\u0443\u044d\u0437\u043e\u0432\u0430, 2, \u043a\u0430\u0431. 303 \u041f\u043d-\u0421\u0431: 09:00 &#8212; 18:00 +7 778 000 9071 ASTANA GEO SCAN \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0433\u0435\u043e\u0434\u0435\u0437\u0438\u044f [&hellip;]","_links":{"self":[{"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/pages\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=144"}],"version-history":[{"count":12,"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/astanageoscan.kz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}