Update app.py

app.py

@@ -144,155 +144,212 @@ LANDING_TEMPLATE = '''
     <title>ОсОО "Раина" - Вентиляция и Кондиционирование</title>
     <meta name="description" content="Профессиональные услуги по проектированию, монтажу и обслуживанию систем вентиляции и кондиционирования в Кыргызстане. 15 лет опыта, более 1000 проектов.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --dark-bg: #0a0a10; 
-            --card-bg: #1a1e28; 
-            --primary-color: #6a0dad; 
-            --secondary-color: #a955ff; 
-            --text-color: #e0e0e0; 
-            --text-muted: #b0b0c0;
-            --accent-glow: rgba(106, 13, 173, 0.4);
-            --card-border: #2a3040;
+            --bg-dark: #0f172a;
+            --bg-card: rgba(30, 41, 59, 0.5);
+            --bg-card-hover: rgba(51, 65, 85, 0.7);
+            --border-color: rgba(255, 255, 255, 0.1);
+            --text-light: #f8fafc;
+            --text-normal: #cbd5e1;
+            --text-muted: #94a3b8;
+            --primary-gradient: linear-gradient(90deg, #4f46e5, #a855f7, #ec4899);
+            --primary-color: #a855f7;
+            --accent-glow: rgba(168, 85, 247, 0.15);
         }
         * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
-        body { font-family: 'Montserrat', sans-serif; background-color: var(--dark-bg); color: var(--text-color); line-height: 1.7; font-size: 16px; }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-normal);
+            line-height: 1.7;
+            font-size: 16px;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
         .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-        section { padding: clamp(4rem, 10vw, 6rem) 0; overflow: hidden; }
-        h1, h2, h3 { font-weight: 700; color: #fff; line-height: 1.3; font-family: 'Poppins', sans-serif;}
-        h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
-        h2 { font-size: clamp(2rem, 6vw, 3.5rem); text-align: center; margin-bottom: 70px; position: relative; font-family: 'Poppins', sans-serif;}
-        h2::after { content: ''; display: block; width: 100px; height: 5px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); margin: 20px auto 0; border-radius: 3px; }
-        h3 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); color: var(--primary-color); margin-bottom: 15px; font-family: 'Poppins', sans-serif;}
-        p { margin-bottom: 1.2rem; color: var(--text-muted); }
-        .btn { display: inline-block; padding: 14px 30px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: #fff; border-radius: 60px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.4s ease; box-shadow: 0 6px 20px var(--accent-glow); border: none; cursor: pointer;}
-        .btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 30px var(--accent-glow); }
-        .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 20px 0; background-color: rgba(10, 10, 16, 0.9); backdrop-filter: blur(12px); transition: all 0.3s ease; }
-        .header.scrolled { padding: 15px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
+        section { padding: clamp(4rem, 10vw, 6rem) 0; overflow: hidden; position: relative; }
+        h1, h2, h3 { font-weight: 700; color: var(--text-light); line-height: 1.3; }
+        h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; }
+        h2 { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-bottom: 60px; position: relative; }
+        h2::after {
+            content: ''; display: block; width: 100px; height: 4px;
+            background: var(--primary-gradient);
+            margin: 15px auto 0; border-radius: 2px;
+        }
+        h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 15px; }
+        p { margin-bottom: 1rem; color: var(--text-muted); }
+        .btn {
+            display: inline-block; padding: 14px 32px;
+            background: var(--primary-gradient); background-size: 200% 100%;
+            color: #fff; border-radius: 50px; text-decoration: none;
+            font-weight: 600; transition: all 0.4s ease;
+            border: none; box-shadow: 0 5px 20px rgba(168, 85, 247, 0.2);
+        }
+        .btn:hover {
+            background-position: right center;
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
+        }
+        .header {
+            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
+            padding: 15px 0; transition: all 0.3s ease;
+        }
+        .header.scrolled {
+            background-color: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border-color);
+            padding: 10px 0;
+        }
         .navbar { display: flex; justify-content: space-between; align-items: center; }
-        .logo { font-size: clamp(1.7rem, 4.5vw, 2.2rem); font-weight: 700; color: #fff; text-decoration: none; letter-spacing: 1px; }
+        .logo { font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: 800; color: #fff; text-decoration: none; }
         .nav-links { display: flex; gap: 35px; list-style: none; }
-        .nav-links a { color: var(--text-color); text-decoration: none; font-weight: 600; transition: color 0.3s ease; position: relative; }
-        .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transition: width 0.3s; }
-        .nav-links a:hover { color: #fff; }
+        .nav-links a { color: var(--text-normal); text-decoration: none; font-weight: 600; transition: color 0.3s ease; position: relative; padding-bottom: 5px; }
+        .nav-links a::after {
+            content: ''; position: absolute; bottom: 0; left: 0;
+            width: 0; height: 2px; background: var(--primary-gradient);
+            transition: width 0.3s ease;
+        }
+        .nav-links a:hover { color: var(--text-light); }
         .nav-links a:hover::after { width: 100%; }
-        .menu-toggle { display: none; font-size: 1.8rem; cursor: pointer; border: none; background: none; color: white; z-index: 1001; }
-        #hero { min-height: 100vh; display: flex; align-items: center; background-image: linear-gradient(rgba(10, 10, 16, 0.8), rgba(10, 10, 16, 1)), url(https://images.unsplash.com/photo-1558221639-2c7158995165?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80); background-size: cover; background-position: center; }
-        .hero-content { text-align: center; max-width: 850px; margin: 0 auto; animation: fadeIn 1.5s ease-out; }
-        .hero-content p { font-size: clamp(1.1rem, 3vw, 1.3rem); margin: 40px 0; max-width: 700px; margin-left: auto; margin-right: auto; opacity: 0.9;}
-        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
-        .about-img { width: 100%; border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); transition: transform 0.3s ease; }
-        .about-img:hover { transform: scale(1.02) translateY(-5px); }
-        .services-grid, .equipment-grid, .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 40px; }
-        .service-card, .turnkey-card { background-color: var(--card-bg); padding: 35px; border-radius: 18px; border: 1px solid var(--card-border); transition: all 0.4s ease; }
-        .service-card:hover, .turnkey-card:hover { transform: translateY(-8px); border-color: var(--primary-color); box-shadow: 0 12px 35px var(--accent-glow); }
-        .service-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 25px; transition: transform 0.3s ease;}
-        .service-card:hover i { transform: scale(1.1); }
-        .turnkey-card { padding: 0; display: flex; flex-direction: column; }
-        .turnkey-img { width: 100%; height: 220px; object-fit: cover; border-radius: 18px 18px 0 0; }
-        .turnkey-content { padding: 35px; flex-grow: 1;}
+        .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; border: none; background: none; color: white; }
+        #hero {
+            min-height: 100vh; display: flex; align-items: center;
+            background-image: linear-gradient(rgba(15, 23, 42, 0.7), var(--bg-dark)), url(https://images.unsplash.com/photo-1558221639-2c7158995165?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80);
+            background-size: cover; background-position: center; position: relative;
+        }
+        #hero::before {
+            content: ''; position: absolute; top: 0; left: 50%;
+            transform: translateX(-50%); width: 70%; height: 100%;
+            background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(79, 70, 229, 0) 70%);
+            pointer-events: none; z-index: 0;
+        }
+        .hero-content { text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
+        .hero-content h1 {
+            background: var(--primary-gradient);
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            background-clip: text; text-fill-color: transparent;
+        }
+        .hero-content p { font-size: clamp(1rem, 2.5vw, 1.25rem); margin: 30px 0; max-width: 650px; margin-left: auto; margin-right: auto; color: var(--text-normal); }
+        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
+        .about-img { width: 100%; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
+        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
+        .interactive-card {
+            background: var(--bg-card); padding: 35px 30px; border-radius: 16px;
+            border: 1px solid var(--border-color);
+            transition: all 0.3s ease-out; position: relative; overflow: hidden;
+        }
+        .interactive-card:hover {
+            transform: translateY(-8px); background: var(--bg-card-hover);
+            border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        }
+        .interactive-card::before {
+            content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), var(--accent-glow), transparent 40%);
+            opacity: 0; transition: opacity 0.5s; pointer-events: none;
+        }
+        .interactive-card:hover::before { opacity: 1; }
+        .service-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; display: block; }
+        #turnkey { background-color: #0b1222; }
+        .turnkey-card { padding: 0; display: flex; flex-direction: column; cursor: pointer;}
+        .turnkey-img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px 16px 0 0; }
+        .turnkey-content { padding: 30px; flex-grow: 1; }
         .equipment-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; }
-        .filter-btn { padding: 10px 22px; border: 2px solid var(--primary-color); background-color: transparent; color: var(--primary-color); border-radius: 30px; cursor: pointer; transition: all 0.3s; font-weight: 600; font-size: 1rem;}
-        .filter-btn.active, .filter-btn:hover { background-color: var(--primary-color); color: #fff; box-shadow: 0 4px 15px var(--accent-glow);}
-        .equipment-card { background-color: var(--card-bg); border-radius: 18px; overflow: hidden; text-align: center; padding: 25px; border: 1px solid var(--card-border); transition: all 0.4s ease; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between;}
-        .equipment-card:hover { transform: translateY(-8px); border-color: var(--primary-color); box-shadow: 0 12px 35px var(--accent-glow); }
-        .equipment-card img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 20px; transition: transform 0.3s ease;}
+        .filter-btn {
+            padding: 10px 25px; border: 1px solid var(--border-color); background-color: transparent;
+            color: var(--text-normal); border-radius: 50px; cursor: pointer; transition: all 0.3s; font-weight: 600;
+        }
+        .filter-btn.active, .filter-btn:hover {
+            background: var(--primary-gradient); color: #fff; border-color: transparent;
+        }
+        .equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
+        .equipment-card { text-align: center; padding: 25px; cursor: pointer; }
+        .equipment-card img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 20px; transition: transform 0.3s ease; }
         .equipment-card:hover img { transform: scale(1.05); }
-        .equipment-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
-        .equipment-card .price { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 10px 0 20px;}
-        .equipment-card .btn { padding: 10px 20px; font-size: 0.95rem; background: linear-gradient(90deg, #3498db, #2980b9); box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); }
-        .equipment-card .btn:hover { background: linear-gradient(90deg, #2980b9, #3498db); }
-        .project-card { position: relative; border-radius: 18px; overflow: hidden; min-height: 350px; cursor: pointer; display: flex; align-items: flex-end; }
-        .project-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.4s ease; }
-        .project-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(10, 10, 16, 0.9) 20%, rgba(10, 10, 16, 0) 70%); padding: 50px 25px 25px; z-index: 1; transition: padding 0.3s ease; }
-        .project-card:hover .project-overlay { padding-bottom: 40px; }
-        .project-card h3 { margin-bottom: 8px; font-size: 1.5rem; color: #fff; }
-        .project-card p { margin-bottom: 0; transition: opacity 0.4s ease, max-height 0.4s ease; opacity: 0; max-height: 0; color: var(--text-muted); font-size: 0.95rem;}
-        .project-card:hover img { transform: scale(1.03); filter: brightness(0.7); }
-        .project-card:hover p { opacity: 1; max-height: 150px; }
-        #contact { background: linear-gradient(rgba(26, 30, 40, 0.9), rgba(26, 30, 40, 0.9)), url('https://images.unsplash.com/photo-1592911677971-2684320e94e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80'); background-size: cover; background-position: center; background-attachment: fixed;}
+        .equipment-card h3 { font-size: 1.2rem; }
+        .equipment-card .price { font-size: 1.4rem; font-weight: 700; color: var(--text-light); margin: 10px 0; }
+        .equipment-card .btn { padding: 10px 22px; font-size: 0.9rem; }
+        .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
+        .project-card {
+            position: relative; border-radius: 16px; overflow: hidden;
+            min-height: 450px; cursor: pointer;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            transition: all 0.4s ease;
+        }
+        .project-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
+        .project-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
+        .project-overlay {
+            position: absolute; bottom: 0; left: 0; right: 0;
+            background: linear-gradient(to top, rgba(15, 23, 42, 1) 10%, rgba(15, 23, 42, 0) 100%);
+            padding: 50px 25px 25px;
+        }
+        .project-card h3 { margin-bottom: 5px; font-size: 1.4rem; }
+        .project-card p {
+            margin-bottom: 0; transition: all 0.4s ease; opacity: 0;
+            max-height: 0; overflow: hidden; transform: translateY(10px);
+        }
+        .project-card:hover img { transform: scale(1.05); }
+        .project-card:hover p { opacity: 1; max-height: 200px; transform: translateY(0); }
+        #contact { background-color: #0b1222; }
         .contact-content { text-align: center; }
         .contact-info { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 25px; }
-        .contact-info p { font-size: 1.25rem; margin-bottom: 0; }
-        .contact-info a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
-        .footer { text-align: center; padding: 40px 0; background-color: #07070d; color: var(--text-muted); font-size: 0.95rem; }
+        .contact-info p { font-size: 1.2rem; margin-bottom: 0; }
+        .contact-info a { color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 1.2rem; transition: color 0.3s; }
+        .contact-info a:hover { color: var(--text-light); }
+        .footer { text-align: center; padding: 40px 0; background-color: #020617; }
         @media (max-width: 992px) {
-            .grid-2 { grid-template-columns: 1fr; text-align: center; gap: 50px;}
-            .about-img { margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto;}
-            h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
-            h2 { margin-bottom: 50px; }
+            .grid-2 { grid-template-columns: 1fr; text-align: center; }
+            .grid-2 > div { order: 1; }
+            .about-img { margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; order: 2; }
         }
         @media (max-width: 768px) {
-            .nav-links { position: fixed; top: 0; right: -100%; width: min(80vw, 350px); height: 100vh; background-color: var(--card-bg); backdrop-filter: blur(15px); flex-direction: column; justify-content: center; align-items: center; transition: right 0.4s ease-in-out; box-shadow: -5px 0 25px rgba(0,0,0,0.3); padding-top: 60px; }
+            body { font-size: 15px; }
+            .nav-links {
+                position: fixed; top: 0; right: -100%; width: min(80vw, 320px); height: 100vh;
+                background-color: var(--bg-dark); flex-direction: column; justify-content: center;
+                align-items: center; transition: right 0.4s ease-in-out;
+                box-shadow: -5px 0 15px rgba(0,0,0,0.2); z-index: 1000;
+            }
             .nav-links.active { right: 0; }
             .menu-toggle { display: block; z-index: 1001; }
-            .navbar { padding-right: 15px; }
-            .hero-content p { font-size: clamp(1rem, 2.5vw, 1.2rem); margin: 30px 0; }
-            .btn { padding: 12px 25px; font-size: 1rem; }
-            .service-card, .turnkey-card { padding: 30px; }
-            .turnkey-img { height: 180px; }
+            h2 { margin-bottom: 40px; }
+            .projects-grid { grid-template-columns: 1fr; }
         }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-
         .modal {
-            display: none;
-            position: fixed;
-            z-index: 1001;
-            left: 0; top: 0; width: 100%; height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.85);
+            display: none; position: fixed; z-index: 1001; left: 0; top: 0;
+            width: 100%; height: 100%; overflow: auto;
+            background-color: rgba(15, 23, 42, 0.9); backdrop-filter: blur(8px);
             padding-top: 60px;
-            backdrop-filter: blur(5px);
         }
         .modal-content {
-            position: relative;
-            margin: 5% auto;
-            padding: 30px;
-            width: 90%;
-            max-width: 800px;
-            background-color: var(--card-bg);
-            border-radius: 18px;
-            text-align: center;
-            box-shadow: 0 15px 50px rgba(0,0,0,0.5);
-        }
-        .modal-content img {
-            max-width: 100%;
-            max-height: 70vh;
-            border-radius: 12px;
-            margin-bottom: 20px;
-            border: 2px solid var(--primary-color);
+            position: relative; margin: 5% auto; padding: 30px;
+            width: 90%; max-width: 800px; background-color: #0b1222;
+            border-radius: 16px; text-align: center; border: 1px solid var(--border-color);
         }
-        .modal-content h3 { margin-bottom: 12px; font-size: 1.8rem; }
-        .modal-content p { color: var(--text-muted); font-size: 1.15rem; }
-        .modal-content .price { font-size: 1.7rem; color: #fff; font-weight: 700; margin-top: 15px;}
+        .modal-content img { max-width: 100%; max-height: 70vh; border-radius: 10px; margin-bottom: 25px; }
+        .modal-content h3 { color: var(--primary-color); margin-bottom: 10px; }
+        .modal-content p { color: var(--text-normal); font-size: 1.1rem; }
         .close-button {
-            position: absolute;
-            top: 20px;
-            right: 30px;
-            font-size: 2.8rem;
-            font-weight: bold;
-            color: #aaa;
-            cursor: pointer;
-            background: none;
-            border: none;
-            transition: color 0.3s ease;
+            position: absolute; top: 15px; right: 25px; font-size: 2.5rem;
+            font-weight: bold; color: #fff; cursor: pointer;
+            background: none; border: none; transition: color 0.3s, transform 0.3s;
         }
-        .close-button:hover, .close-button:focus { color: var(--primary-color); }
+        .close-button:hover, .close-button:focus { color: var(--primary-color); transform: rotate(90deg); }
         .carousel-nav { margin-top: 20px; }
         .carousel-nav button {
-            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-            color: white;
-            border: none;
-            padding: 12px 18px;
-            border-radius: 50px;
-            margin: 0 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1.3rem;
-            box-shadow: 0 5px 15px var(--accent-glow);
+            background-color: var(--primary-color); color: white; border: none;
+            padding: 10px 15px; border-radius: 50px; margin: 0 8px;
+            cursor: pointer; transition: all 0.3s ease; font-size: 1.2rem;
         }
-        .carousel-nav button:hover { background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); transform: scale(1.1); box-shadow: 0 8px 25px var(--accent-glow); }
+        .carousel-nav button:hover { background-color: #4f46e5; transform: scale(1.1); }
+        .animate-on-scroll {
+            opacity: 0; transform: translateY(40px);
+            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+        }
+        .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
     </style>
 </head>
 <body>
@@ -313,67 +370,67 @@ LANDING_TEMPLATE = '''
 
     <section id="hero">
         <div class="container hero-content">
-            <h1>Ваш Климат - Наша Забота</h1>
-            <p>Проектирование, монтаж и сервис систем вентиляции и кондиционирования от ОсОО "Раина". 15 лет опыта, более 1000 довольных клиентов.</p>
-            <a href="#contact" class="btn">Заказать консультацию</a>
+            <h1>ОсОО "Раина": Ваш Партнер в Вентиляции и Кондиционировании</h1>
+            <p>15 лет опыта, более 1000 реализованных проектов. Мы создаем комфорт и здоровье в любом помещении с помощью самых современных климатических систем.</p>
+            <a href="#contact" class="btn">Получить консультацию</a>
         </div>
     </section>
 
     <section id="about">
-        <div class="container">
+        <div class="container animate-on-scroll">
             <h2>О Нашей Компании</h2>
             <div class="grid-2">
                 <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Команда Раина" class="about-img">
                 <div>
-                    <h3>Экспертиза и Инновации</h3>
-                    <p>С 2009 года ОсОО "Раина" является лидером в сфере климатических решений в Кыргызстане. Мы сочетаем многолетний опыт с передовыми технологиями для создания идеального микроклимата.</p>
-                    <h3>Миссия и Ценности</h3>
-                    <p>Наша миссия — обеспечивать максимальный комфорт и безопасность для наших клиентов, предлагая энергоэффективные и надежные системы, отвечающие самым высоким стандартам качества.</p>
-                    <h3>Квалифицированная Команда</h3>
-                    <p>Наша команда — это опытные инженеры, монтажники и консультанты, готовые решить задачи любой сложности, от бытовых систем до комплексных промышленных решений.</p>
+                    <h3>Основание и История</h3>
+                    <p>Компания "Раина" была основана в 2009 году. За эти годы мы зарекомендовали себя как надежный партнер, стремящийся к инновациям и совершенству в области климатических решений.</p>
+                    <h3>Наша Миссия</h3>
+                    <p>Наша миссия — создание оптимального микроклимата для наших клиентов, обеспечивающего комфорт, здоровье и высокую производительность.</p>
+                    <h3>Профессиональная Команда</h3>
+                    <p>Наша команда состоит из высококвалифицированных инженеров и техников, обладающих глубокими знаниями и опытом в области HVAC.</p>
                 </div>
             </div>
         </div>
     </section>
 
     <section id="services">
-        <div class="container">
-            <h2>Наши Ключевые Услуги</h2>
+        <div class="container animate-on-scroll">
+            <h2>Наши Услуги</h2>
             <div class="services-grid">
-                <div class="service-card"><i class="fas fa-chart-line"></i><h3>Проектирование</h3><p>Разработка детализированных проектов систем вентиляции и кондиционирования с учетом всех ваших требований и норм.</p></div>
-                <div class="service-card"><i class="fas fa-cogs"></i><h3>Монтаж</h3><p>Профессиональная установка климатического оборудования любой сложности с гарантией качества и долговечности.</p></div>
-                <div class="service-card"><i class="fas fa-wrench"></i><h3>Сервисное Обслуживание</h3><p>Регулярное техническое обслуживание и оперативный ремонт для бесперебойной работы ваших систем 24/7.</p></div>
-                <div class="service-card"><i class="fas fa-redo-alt"></i><h3>Модернизация и Автоматизация</h3><p>Повышение эффективности существующих систем, внедрение современных решений для оптимизации энергопотребления и управления.</p></div>
+                <div class="service-card interactive-card"><i class="fas fa-drafting-compass"></i><h3>Проектирование</h3><p>Точные расчеты, 3D-модели и вся необходимая проектная документация.</p></div>
+                <div class="service-card interactive-card"><i class="fas fa-tools"></i><h3>Монтаж</h3><p>Профессиональная установка всех типов систем HVAC, от бытовых до промышленных.</p></div>
+                <div class="service-card interactive-card"><i class="fas fa-headset"></i><h3>Сервис 24/7</h3><p>Плановое обслуживание и оперативный аварийный ремонт в любое время.</p></div>
+                <div class="service-card interactive-card"><i class="fas fa-sync-alt"></i><h3>Модернизация</h3><p>Повышение энергоэффективности и снижение расходов на эксплуатацию.</p></div>
             </div>
         </div>
     </section>
 
-    <section id="turnkey" style="background-color: var(--card-bg);">
-        <div class="container">
-            <h2>Компл��ксные Решения "Под Ключ"</h2>
+    <section id="turnkey">
+        <div class="container animate-on-scroll">
+            <h2>Услуги "под ключ"</h2>
             {% if services %}
             <div class="services-grid">
                 {% for service in services %}
-                <div class="turnkey-card" onclick="showDetailsModal('service', {{ loop.index0 }})">
+                <div class="turnkey-card interactive-card" onclick="showDetailsModal('service', {{ loop.index0 }})">
                     {% if service.photo %}
                     <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/services/{{ service.photo }}" alt="{{ service.title }}" class="turnkey-img">
                     {% endif %}
                     <div class="turnkey-content">
-                        <h3><i class="{{ service.icon }} fa-fw" style="margin-right: 8px;"></i>{{ service.title }}</h3>
+                        <h3><i class="{{ service.icon }} fa-fw" style="margin-right: 8px; color: var(--primary-color);"></i>{{ service.title }}</h3>
                         <p>{{ service.description }}</p>
                     </div>
                 </div>
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Наши комплексные решения скоро будут представлены здесь.</p>
+            <p style="text-align: center;">Информация об услугах "под ключ" скоро появится на сайте.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="equipment">
-        <div class="container">
-            <h2>Качественное Оборудование</h2>
+        <div class="container animate-on-scroll">
+            <h2>Наше Оборудование</h2>
             {% if equipment %}
             <div class="equipment-filters">
                 <button class="filter-btn active" data-filter="all">Все</button>
@@ -383,29 +440,27 @@ LANDING_TEMPLATE = '''
             </div>
             <div class="equipment-grid">
                 {% for item in equipment %}
-                <div class="equipment-card" data-category="{{ item.get('category', 'all') }}" onclick="showDetailsModal('equipment', {{ loop.index0 }})">
-                    <div>
-                        {% if item.photo %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/{{ item.photo }}" alt="{{ item.name }}">
-                        {% else %}
-                        <img src="https://via.placeholder.com/290x180.png?text=No+Image" alt="No Image">
-                        {% endif %}
-                        <h3>{{ item.name }}</h3>
-                        <p class="price">{{ "%.2f"|format(item.price) }} KGS</p>
-                    </div>
-                    <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: {{ item.name }}" target="_blank" class="btn">Запросить</a>
+                <div class="equipment-card interactive-card" data-category="{{ item.get('category', 'all') }}" onclick="showDetailsModal('equipment', {{ loop.index0 }})">
+                    {% if item.photo %}
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/{{ item.photo }}" alt="{{ item.name }}">
+                    {% else %}
+                    <img src="https://via.placeholder.com/250x180.png?text=No+Image" alt="No Image">
+                    {% endif %}
+                    <h3>{{ item.name }}</h3>
+                    <p class="price">{{ "%.2f"|format(item.price) }} KGS</p>
+                    <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: {{ item.name }}" target="_blank" class="btn" onclick="event.stopPropagation()">Запросить</a>
                 </div>
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Наш каталог оборудования будет доступен в ближайшее время.</p>
+            <p style="text-align: center;">Каталог оборудования скоро будет доступен.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="projects">
-        <div class="container">
-            <h2>Наши Реализованные Проекты</h2>
+        <div class="container animate-on-scroll">
+            <h2>Реализованные Проекты</h2>
             {% if projects %}
             <div class="projects-grid">
                 {% for project in projects %}
@@ -419,18 +474,18 @@ LANDING_TEMPLATE = '''
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Информация о наших проектах скоро появится на сайте.</p>
+            <p style="text-align: center;">Информация о реализованных проектах скоро появится на сайте.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="contact">
-        <div class="container contact-content">
-            <h2>Свяжитесь с Нами</h2>
-            <p>Мы готовы ответить на ваши вопросы и предложить оптимальное решение для вашего объекта.</p>
+        <div class="container contact-content animate-on-scroll">
+            <h2>Контакты</h2>
+            <p>Готовы стать вашим надежным партнером в создании идеального климата.</p>
             <div class="contact-info">
-                <p><strong>Телефон:</strong> <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a></p>
-                 <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, я хотел(а) бы получить консультацию по вашим услугам." target="_blank" class="btn"><i class="fab fa-whatsapp"></i> Написать в WhatsApp</a>
+                <p><strong>Свяжитесь с нами:</strong> <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a></p>
+                 <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, я хотел(а) бы получить консультацию по вашим услугам." target="_blank" class="btn"><i class="fab fa-whatsapp" style="margin-right: 8px;"></i> Написать в WhatsApp</a>
             </div>
             <div style="margin-top: 40px; font-size: 0.9rem; color: var(--text-muted);">
                 <p><strong>Реквизиты:</strong> ОсОО «Раина», ИНН: 00812202110194, ОКПО: 31290279</p>
@@ -460,15 +515,32 @@ LANDING_TEMPLATE = '''
         let allItems = [];
 
         function showDetailsModal(type, index) {
+            event.stopPropagation();
             const data = {{ data | tojson }}; 
             currentData = data;
             currentType = type;
-            currentIndex = index;
-
+            
             if (type === 'service') allItems = data.services;
-            else if (type === 'equipment') allItems = data.equipment;
+            else if (type === 'equipment') {
+                const activeFilter = document.querySelector('.filter-btn.active').dataset.filter;
+                allItems = (activeFilter === 'all') ? data.equipment : data.equipment.filter(i => i.category === activeFilter);
+                const originalItem = data.equipment[index];
+                currentIndex = allItems.findIndex(i => i.name === originalItem.name && i.price === originalItem.price);
+                if (currentIndex === -1) {
+                    allItems = data.equipment;
+                    currentIndex = index;
+                }
+            }
             else if (type === 'project') allItems = data.projects;
+            else {
+                allItems = [];
+                currentIndex = -1;
+            }
             
+            if (allItems.length > 0 && type !== 'equipment') {
+                currentIndex = index;
+            }
+
             updateModalContent();
             document.getElementById('detailsModal').style.display = 'block';
             document.body.style.overflow = 'hidden'; 
@@ -485,7 +557,7 @@ LANDING_TEMPLATE = '''
             if (currentType === 'service') {
                 content = `
                     ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/services/${item.photo}" alt="${item.title}">` : ''}
-                    <h3><i class="${item.icon} fa-fw" style="margin-right: 8px; color: var(--primary-color);"></i>${item.title}</h3>
+                    <h3><i class="${item.icon} fa-fw" style="margin-right: 8px;"></i>${item.title}</h3>
                     <p>${item.description}</p>
                 `;
             } else if (currentType === 'equipment') {
@@ -493,7 +565,7 @@ LANDING_TEMPLATE = '''
                     ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/${item.photo}" alt="${item.name}">` : ''}
                     <h3>${item.name}</h3>
                     <p><strong>Категория:</strong> ${item.category || 'Не указана'}</p>
-                    <p class="price">${item.price.toFixed(2)} KGS</p>
+                    <p class="price" style="font-size: 1.5rem; color: var(--primary-color);">${item.price.toFixed(2)} KGS</p>
                     <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: ${encodeURIComponent(item.name)}" target="_blank" class="btn" style="padding: 12px 28px; font-size: 1rem;">Запросить</a>
                 `;
             } else if (currentType === 'project') {
@@ -567,6 +639,28 @@ LANDING_TEMPLATE = '''
                     });
                 });
             }
+
+            document.querySelectorAll('.interactive-card').forEach(card => {
+                card.addEventListener('mousemove', e => {
+                    const rect = card.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    card.style.setProperty('--mouse-x', `${x}px`);
+                    card.style.setProperty('--mouse-y', `${y}px`);
+                });
+            });
+            
+            const scrollElements = document.querySelectorAll(".animate-on-scroll");
+            const elementInView = (el, dividend = 1) => {
+              const elementTop = el.getBoundingClientRect().top;
+              return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
+            };
+            const displayScrollElement = (element) => { element.classList.add("is-visible"); };
+            const handleScrollAnimation = () => {
+              scrollElements.forEach((el) => { if (elementInView(el, 1.15)) { displayScrollElement(el); } })
+            }
+            window.addEventListener("scroll", () => { handleScrollAnimation(); });
+            handleScrollAnimation();
         });
     </script>
 </body>
@@ -580,121 +674,75 @@ ADMIN_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Админ-панель - Раина</title>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root {
-            --admin-bg: #f4f7f9;
-            --admin-card-bg: #ffffff;
-            --primary-color: #6a0dad;
-            --secondary-color: #a955ff;
-            --text-color: #333;
-            --text-muted: #555;
-            --border-color: #e0e0e0;
-            --button-bg: #9b59b6;
-            --button-hover-bg: #8e44ad;
-            --delete-button-bg: #e74c3c;
-            --delete-button-hover-bg: #c0392b;
-        }
-        body { font-family: 'Poppins', sans-serif; background-color: var(--admin-bg); color: var(--text-color); padding: 20px; line-height: 1.6; }
-        .container { max-width: 1200px; margin: 0 auto; background-color: var(--admin-card-bg); padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); }
-        .header { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
-        h1, h2, h3 { font-weight: 600; color: var(--primary-color); margin-bottom: 15px; font-family: 'Montserrat', sans-serif;}
-        h1 { font-size: 2rem; color: var(--text-color); }
-        h2 { font-size: 1.7rem; margin-top: 35px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
-        .section { margin-bottom: 40px; padding: 25px; background-color: #fdfdfd; border: 1px solid var(--border-color); border-radius: 10px; }
+        body { font-family: 'Poppins', sans-serif; background-color: #f4f7f9; color: #333; padding: 20px; line-height: 1.6; }
+        .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
+        .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
+        h1, h2, h3 { font-weight: 600; color: #6a0dad; margin-bottom: 15px; }
+        h1 { font-size: 1.8rem; }
+        h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
+        .section { margin-bottom: 30px; padding: 20px; background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; }
         form { margin-bottom: 20px; }
-        label { font-weight: 500; margin-top: 12px; display: block; color: var(--text-muted); font-size: 0.95rem;}
-        input[type="text"], input[type="number"], textarea, select { width: 100%; padding: 12px 15px; margin-top: 8px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; box-sizing: border-box; transition: border-color 0.3s ease;}
-        input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: var(--secondary-color); outline: none; box-shadow: 0 0 0 2px rgba(169, 85, 255, 0.2); }
-        input[type="file"] { padding: 10px; cursor: pointer; border: 1px solid var(--border-color); border-radius: 8px;}
-        input[type="file"]:focus { border-color: var(--secondary-color); }
-        button, .button { padding: 12px 20px; border: none; border-radius: 8px; background-color: var(--button-bg); color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; text-decoration: none; font-size: 1rem;}
-        button:hover, .button:hover { background-color: var(--button-hover-bg); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3); }
-        .delete-button { background-color: var(--delete-button-bg); }
-        .delete-button:hover { background-color: var(--delete-button-hover-bg); }
+        label { font-weight: 500; margin-top: 10px; display: block; color: #555; font-size: 0.9rem;}
+        input[type="text"], input[type="number"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; }
+        input[type="file"] { padding: 8px; cursor: pointer; border: 1px solid #ddd;}
+        button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: #9b59b6; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; text-decoration: none; }
+        button:hover, .button:hover { background-color: #8e44ad; }
+        .delete-button { background-color: #e74c3c; }
+        .delete-button:hover { background-color: #c0392b; }
         .item-list { display: grid; gap: 20px; }
-        .item { background: #fcfcfd; padding: 20px 25px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 10px;}
-        .item p { margin-bottom: 0;}
-        .item-actions { margin-top: 15px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center;}
-        .item-actions button { padding: 8px 15px; font-size: 0.9rem; margin-top: 0;}
-        .edit-form-container { margin-top: 15px; padding: 20px; background: #f9f8ff; border: 1px dashed #e0cfff; border-radius: 8px; display: none; }
-        details { background-color: #fcfcfd; border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 20px; overflow: hidden; }
-        details > summary { cursor: pointer; font-weight: 600; color: var(--primary-color); display: block; padding: 15px 20px; position: relative; list-style: none; background-color: #f4f2ff; transition: background-color 0.3s ease;}
-        details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); transition: transform 0.3s ease;}
-        details[open] > summary { background-color: #eedeff; }
+        .item { background: #fff; padding: 15px 20px; border-radius: 8px; border: 1px solid #eee; }
+        .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
+        .edit-form-container { margin-top: 15px; padding: 20px; background: #fdf9ff; border: 1px dashed #ddd; border-radius: 6px; display: none; }
+        details { background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; margin-bottom: 20px; }
+        details > summary { cursor: pointer; font-weight: 600; color: #8e44ad; display: block; padding: 15px; position: relative; list-style: none; }
+        details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
         details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
-        .photo-preview img { max-width: 80px; max-height: 80px; border-radius: 8px; margin: 5px 5px 0 0; object-fit: cover; border: 1px solid var(--border-color);}
-        .message { padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; color: #fff; font-weight: 500; border-left: 5px solid; display: flex; align-items: center; gap: 10px;}
-        .message.success { background-color: #28a745; border-color: #1e7e34; }
-        .message.error { background-color: #dc3545; border-color: #a71d2a; }
-        .message.warning { background-color: #ffc107; color: #333; border-color: #d39e00; }
-        .sync-buttons { display: flex; gap: 15px; margin-bottom: 20px; }
+        .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; object-fit: cover;}
+        .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; }
+        .message.success { background-color: #d4edda; color: #155724; }
+        .message.error { background-color: #f8d7da; color: #721c24; }
+        .message.warning { background-color: #fff3cd; color: #856404; }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
-            <h1><i class="fas fa-tools"></i> Администрирование ОсОО "Раина"</h1>
-            <a href="{{ url_for('landing') }}" class="button"><i class="fas fa-home"></i> На сайт</a>
-        </div>
-        
-        {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-            {% for category, message in messages %}
-            <div class="message {{ category }}"><i class="fas fa-{{ category == 'success' ? 'check' : (category == 'error' ? 'times' : 'exclamation-triangle') }}"></i> {{ message }}</div>
-            {% endfor %}
-        {% endif %}
-        {% endwith %}
+        <div class="header"><h1><i class="fas fa-tools"></i> Админ-панель "Раина"</h1><a href="{{ url_for('landing') }}" class="button"><i class="fas fa-home"></i> Перейти на сайт</a></div>
+        {% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}{% for category, message in messages %}<div class="message {{ category }}">{{ message }}</div>{% endfor %}{% endif %}{% endwith %}
         
         <div class="section">
-            <h2><i class="fas fa-sync-alt"></i> Синхронизация данных</h2>
-            <div class="sync-buttons">
-                <form method="POST" action="{{ url_for('force_upload') }}" style="margin:0;">
-                    <button type="submit" class="button"><i class="fas fa-upload"></i> Загрузить на сервер</button>
-                </form>
-                <form method="POST" action="{{ url_for('force_download') }}" style="margin:0;">
-                    <button type="submit" class="button"><i class="fas fa-download"></i> Скачать с сервера</button>
-                </form>
-            </div>
+            <h2><i class="fas fa-sync-alt"></i> Синхронизация</h2>
+            <form method="POST" action="{{ url_for('force_upload') }}" style="display: inline;"><button type="submit" class="button">Загрузить на сервер</button></form>
+            <form method="POST" action="{{ url_for('force_download') }}" style="display: inline;"><button type="submit" class="button">Скачать с сервера</button></form>
         </div>
 
         <div class="section">
-            <h2><i class="fas fa-images"></i> Реализованные проекты</h2>
-            <details><summary><i class="fas fa-plus-circle"></i> Добавить новый проект</summary>
-                <form method="POST" enctype="multipart/form-data">
-                    <input type="hidden" name="action" value="add_project">
-                    <label>Название проекта*:</label><input type="text" name="title" required>
-                    <label>Краткое описание*:</label><textarea name="description" rows="3" required></textarea>
-                    <label>Фото проекта* (рекомендуется 16:9):</label><input type="file" name="photo" accept="image/*" required>
-                    <button type="submit"><i class="fas fa-save"></i> Добавить проект</button>
+            <h2><i class="fas fa-star"></i> Реализованные проекты</h2>
+            <details><summary>Добавить проект</summary>
+                <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="add_project">
+                    <label>Название*:</label><input type="text" name="title" required>
+                    <label>Описание*:</label><textarea name="description" rows="3" required></textarea>
+                    <label>Фото*:</label><input type="file" name="photo" accept="image/*" required>
+                    <button type="submit">Добавить проект</button>
                 </form>
             </details>
             <div class="item-list">
             {% for project in projects %}
                 <div class="item">
                     <p><strong>{{ project.title }}</strong>: {{ project.description }}</p>
-                    {% if project.photo %}
-                        <div class="photo-preview">
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/{{ project.photo }}" alt="Project Photo">
-                        </div>
-                    {% endif %}
+                    {% if project.photo %}<div class="photo-preview"><img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/{{ project.photo }}" alt="Project Photo"></div>{% endif %}
                     <div class="item-actions">
-                        <button onclick="toggleEditForm('edit-project-{{ loop.index0 }}')"><i class="fas fa-edit"></i> Редактировать</button>
-                        <form method="POST" style="margin:0;">
-                            <input type="hidden" name="action" value="delete_project">
-                            <input type="hidden" name="index" value="{{ loop.index0 }}">
-                            <button type="submit" class="delete-button"><i class="fas fa-trash-alt"></i> Удалить</button>
-                        </form>
+                        <button onclick="toggleEditForm('edit-project-{{ loop.index0 }}')">Редактировать</button>
+                        <form method="POST" style="margin:0;"><input type="hidden" name="action" value="delete_project"><input type="hidden" name="index" value="{{ loop.index0 }}"><button type="submit" class="delete-button">Удалить</button></form>
                     </div>
                     <div id="edit-project-{{ loop.index0 }}" class="edit-form-container">
-                        <form method="POST" enctype="multipart/form-data">
-                            <input type="hidden" name="action" value="edit_project">
-                            <input type="hidden" name="index" value="{{ loop.index0 }}">
-                             <label>Название проекта*:</label><input type="text" name="title" value="{{ project.title }}" required>
-                             <label>Краткое описание*:</label><textarea name="description" rows="3" required>{{ project.description }}</textarea>
+                        <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="edit_project"><input type="hidden" name="index" value="{{ loop.index0 }}">
+                             <label>Название*:</label><input type="text" name="title" value="{{ project.title }}" required>
+                             <label>Описание*:</label><textarea name="description" rows="3" required>{{ project.description }}</textarea>
                              <label>Заменить фото:</label><input type="file" name="photo" accept="image/*">
-                             <button type="submit"><i class="fas fa-save"></i> Сохранить изменения</button>
+                             <button type="submit">Сохранить</button>
                         </form>
                     </div>
                 </div>
@@ -703,43 +751,32 @@ ADMIN_TEMPLATE = '''
         </div>
 
         <div class="section">
-            <h2><i class="fas fa-briefcase"></i> Услуги "под ключ"</h2>
-            <details><summary><i class="fas fa-plus-circle"></i> Добавить новую услугу</summary>
-                 <form method="POST" enctype="multipart/form-data">
-                     <input type="hidden" name="action" value="add_service">
-                     <label>Заголовок услуги*:</label><input type="text" name="title" required>
-                     <label>Иконка (FontAwesome Class)*:</label><input type="text" name="icon" placeholder="fas fa-tools" required>
-                     <label>Описание услуги*:</label><textarea name="description" rows="3" required></textarea>
-                     <label>Фото услуги (необязательно):</label><input type="file" name="photo" accept="image/*">
-                     <button type="submit"><i class="fas fa-save"></i> Добавить услугу</button>
+            <h2><i class="fas fa-concierge-bell"></i> Услуги "под ключ"</h2>
+            <details><summary>Добавить услугу</summary>
+                 <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="add_service">
+                     <label>Заголовок*:</label><input type="text" name="title" required>
+                     <label>Иконка (FontAwesome)*:</label><input type="text" name="icon" placeholder="fas fa-tools" required>
+                     <label>Описание*:</label><textarea name="description" rows="3" required></textarea>
+                     <label>Фото:</label><input type="file" name="photo" accept="image/*">
+                     <button type="submit">Добавить услугу</button>
                  </form>
             </details>
             <div class="item-list">
             {% for service in services %}
                 <div class="item">
-                    <p><i class="{{ service.icon }} fa-fw fa-2x" style="color: var(--primary-color); margin-right: 10px;"></i> <strong>{{ service.title }}</strong>: {{ service.description }}</p>
-                    {% if service.photo %}
-                        <div class="photo-preview">
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/services/{{ service.photo }}" alt="Service Photo">
-                        </div>
-                    {% endif %}
+                    <p><i class="{{ service.icon }} fa-fw"></i> <strong>{{ service.title }}</strong>: {{ service.description }}</p>
+                    {% if service.photo %}<div class="photo-preview"><img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/services/{{ service.photo }}" alt="Service Photo"></div>{% endif %}
                     <div class="item-actions">
-                        <button onclick="toggleEditForm('edit-service-{{ loop.index0 }}')"><i class="fas fa-edit"></i> Редактировать</button>
-                        <form method="POST" style="margin:0;">
-                            <input type="hidden" name="action" value="delete_service">
-                            <input type="hidden" name="index" value="{{ loop.index0 }}">
-                            <button type="submit" class="delete-button"><i class="fas fa-trash-alt"></i> Удалить</button>
-                        </form>
+                        <button onclick="toggleEditForm('edit-service-{{ loop.index0 }}')">Редактировать</button>
+                        <form method="POST" style="margin:0;"><input type="hidden" name="action" value="delete_service"><input type="hidden" name="index" value="{{ loop.index0 }}"><button type="submit" class="delete-button">Удалить</button></form>
                     </div>
                      <div id="edit-service-{{ loop.index0 }}" class="edit-form-container">
-                         <form method="POST" enctype="multipart/form-data">
-                             <input type="hidden" name="action" value="edit_service">
-                             <input type="hidden" name="index" value="{{ loop.index0 }}">
-                             <label>Заголовок услуги*:</label><input type="text" name="title" value="{{ service.title }}" required>
+                         <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="edit_service"><input type="hidden" name="index" value="{{ loop.index0 }}">
+                             <label>Заголовок*:</label><input type="text" name="title" value="{{ service.title }}" required>
                              <label>Иконка*:</label><input type="text" name="icon" value="{{ service.icon }}" required>
-                             <label>Описание услуги*:</label><textarea name="description" rows="3" required>{{ service.description }}</textarea>
+                             <label>Описание*:</label><textarea name="description" rows="3" required>{{ service.description }}</textarea>
                              <label>Заменить фото:</label><input type="file" name="photo" accept="image/*">
-                             <button type="submit"><i class="fas fa-save"></i> Сохранить изменения</button>
+                             <button type="submit">Сохранить</button>
                          </form>
                      </div>
                 </div>
@@ -749,82 +786,52 @@ ADMIN_TEMPLATE = '''
 
         <div class="section">
             <h2><i class="fas fa-box-open"></i> Оборудование</h2>
-            
-            <details><summary><i class="fas fa-plus-circle"></i> Добавить новую категорию</summary>
-                <form method="POST">
-                    <input type="hidden" name="action" value="add_category">
-                    <label>Название категории:</label><input type="text" name="category_name" required>
-                    <button type="submit"><i class="fas fa-save"></i> Добавить категорию</button>
-                </form>
+            <details><summary>Добавить категорию</summary>
+                <form method="POST"><input type="hidden" name="action" value="add_category"><label>Название:</label><input type="text" name="category_name" required><button type="submit">Добавить</button></form>
             </details>
             <div class="item-list">
             {% for category in categories %}
-                 <div class="item" style="flex-direction: row; justify-content: space-between; align-items: center;">
-                     <span style="font-weight: 500;">{{ category }}</span>
-                     <form method="POST" style="margin: 0;">
-                         <input type="hidden" name="action" value="delete_category">
-                         <input type="hidden" name="category_name" value="{{ category }}">
-                         <button type="submit" class="delete-button" style="margin:0;"><i class="fas fa-trash-alt"></i> Удалить</button>
-                     </form>
+                 <div class="item" style="display: flex; justify-content: space-between; align-items: center;">
+                     <span>{{ category }}</span>
+                     <form method="POST" style="margin: 0;"><input type="hidden" name="action" value="delete_category"><input type="hidden" name="category_name" value="{{ category }}"><button type="submit" class="delete-button" style="margin:0;">Удалить</button></form>
                  </div>
             {% endfor %}
             </div>
 
-            <details style="margin-top:30px;"><summary><i class="fas fa-plus-circle"></i> Добавить оборудование</summary>
-                 <form method="POST" enctype="multipart/form-data">
-                     <input type="hidden" name="action" value="add_equipment">
-                     <label>Название оборудования*:</label><input type="text" name="name" required>
+            <details style="margin-top:20px;"><summary>Добавить оборудование</summary>
+                 <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="add_equipment">
+                     <label>Название*:</label><input type="text" name="name" required>
                      <label>Цена (KGS)*:</label><input type="number" name="price" step="0.01" min="0" required>
-                     <label>Категория:</label><select name="category">
-                         <option value="Без категории">Без категории</option>
-                         {% for cat in categories %}
-                             <option value="{{ cat }}">{{ cat }}</option>
-                         {% endfor %}
-                     </select>
-                     <label>Фото оборудования (необязательно):</label><input type="file" name="photo" accept="image/*">
-                     <button type="submit"><i class="fas fa-save"></i> Добавить оборудование</button>
+                     <label>Категория:</label><select name="category"><option value="Без категории">Без категории</option>{% for cat in categories %}<option value="{{ cat }}">{{ cat }}</option>{% endfor %}</select>
+                     <label>Фото:</label><input type="file" name="photo" accept="image/*">
+                     <button type="submit">Добавить</button>
                  </form>
             </details>
             <div class="item-list">
             {% for item in equipment %}
             <div class="item">
-                <p><strong style="color: var(--primary-color);">{{ item.name }}</strong> ({{ item.category | default('Без категории') }}) - {{ "%.2f"|format(item.price) }} KGS</p>
-                {% if item.photo %}
-                    <div class="photo-preview">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/{{ item.photo }}" alt="Equipment Photo">
-                    </div>
-                {% endif %}
+                <p><strong>{{ item.name }}</strong> ({{ item.category }}) - {{ "%.2f"|format(item.price) }} KGS</p>
+                {% if item.photo %}<div class="photo-preview"><img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/{{ item.photo }}" alt="Equipment Photo"></div>{% endif %}
                 <div class="item-actions">
-                     <button onclick="toggleEditForm('edit-eq-{{ loop.index0 }}')"><i class="fas fa-edit"></i> Редактировать</button>
-                    <form method="POST" style="margin:0;">
-                        <input type="hidden" name="action" value="delete_equipment">
-                        <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <button type="submit" class="delete-button"><i class="fas fa-trash-alt"></i> Удалить</button>
-                    </form>
+                     <button onclick="toggleEditForm('edit-eq-{{ loop.index0 }}')">Редактировать</button>
+                    <form method="POST" style="margin:0;"><input type="hidden" name="action" value="delete_equipment"><input type="hidden" name="index" value="{{ loop.index0 }}"><button type="submit" class="delete-button">Удалить</button></form>
                 </div>
                 <div id="edit-eq-{{ loop.index0 }}" class="edit-form-container">
-                    <form method="POST" enctype="multipart/form-data">
-                        <input type="hidden" name="action" value="edit_equipment">
-                        <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <label>Название оборудования*:</label><input type="text" name="name" value="{{ item.name }}" required>
+                    <form method="POST" enctype="multipart/form-data"><input type="hidden" name="action" value="edit_equipment"><input type="hidden" name="index" value="{{ loop.index0 }}">
+                        <label>Название*:</label><input type="text" name="name" value="{{ item.name }}" required>
                         <label>Цена (KGS)*:</label><input type="number" name="price" value="{{ item.price }}" step="0.01" min="0" required>
-                        <label>Категория:</label><select name="category">
-                            {% for cat in categories %}
-                                <option value="{{ cat }}" {% if item.category == cat %}selected{% endif %}>{{ cat }}</option>
-                            {% endfor %}
-                        </select>
+                        <label>Категория:</label><select name="category">{% for cat in categories %}<option value="{{ cat }}" {% if item.category == cat %}selected{% endif %}>{{ cat }}</option>{% endfor %}</select>
                         <label>Заменить фото:</label><input type="file" name="photo" accept="image/*">
-                        <button type="submit"><i class="fas fa-save"></i> Сохранить изменения</button>
+                        <button type="submit">Сохранить</button>
                     </form>
                 </div>
             </div>
             {% endfor %}
             </div>
         </div>
-    </div>
-    <script>function toggleEditForm(id) { const element = document.getElementById(id); if (element.style.display === 'block') { element.style.display = 'none'; } else { element.style.display = 'block'; } }</script>
-</body>
-</html>
+        <script>function toggleEditForm(id) { document.getElementById(id).style.display = document.getElementById(id).style.display === 'block' ? 'none' : 'block'; }</script>
+    </body>
+    </html>
 '''
 
 @app.route('/')
@@ -1009,15 +1016,13 @@ def delete_photo_from_hf(photo_filename, folder):
 @app.route('/force_upload', methods=['POST'])
 def force_upload():
     upload_db_to_hf()
-    flash("Данные успешно загружены на Hugging Face.", 'success')
+    flash("Данные загружены на сервер.", 'success')
     return redirect(url_for('admin'))
 
 @app.route('/force_download', methods=['POST'])
 def force_download():
-    if download_db_from_hf():
-        flash("Данные успешно скачаны с Hugging Face.", 'success')
-    else:
-        flash("Не удалось скачать данные с Hugging Face.", 'error')
+    download_db_from_hf()
+    flash("Данные скачаны с сервера.", 'success')
     return redirect(url_for('admin'))
 
 if __name__ == '__main__':
@@ -1026,4 +1031,4 @@ if __name__ == '__main__':
     if HF_TOKEN_WRITE:
         threading.Thread(target=periodic_backup, daemon=True).start()
     port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port)
+    app.run(debug=False, host='0.0.0.0', port=port)