Update app.py

app.py

@@ -144,212 +144,309 @@ 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 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">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --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);
+            --bg-dark: #111827; /* Tailwind Gray 900 */
+            --bg-medium: #1F2937; /* Tailwind Gray 800 */
+            --bg-light-card: #374151; /* Tailwind Gray 700 */
+            --text-primary: #F3F4F6; /* Tailwind Gray 100 */
+            --text-secondary: #D1D5DB; /* Tailwind Gray 300 */
+            --text-muted: #9CA3AF; /* Tailwind Gray 400 */
+            --accent-primary: #8B5CF6; /* Violet 500 */
+            --accent-secondary: #6D28D9; /* Violet 700 */
+            --accent-glow: rgba(139, 92, 246, 0.25);
+            --border-color: #374151; /* Tailwind Gray 700 */
+            --border-hover-color: var(--accent-primary);
+            --section-padding: clamp(4rem, 10vw, 6rem);
+            --card-border-radius: 12px;
+            --button-border-radius: 30px;
         }
         * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-dark);
-            color: var(--text-normal);
-            line-height: 1.7;
-            font-size: 16px;
+        body { 
+            font-family: 'Montserrat', sans-serif; 
+            background-color: var(--bg-dark); 
+            color: var(--text-primary); 
+            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; 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;
+        section { padding: var(--section-padding) 0; overflow: hidden; }
+        h1, h2, h3 { font-weight: 700; color: var(--text-primary); line-height: 1.3; }
+        h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
+        h2 { 
+            font-size: clamp(2rem, 5vw, 3.2rem); 
+            text-align: center; 
+            margin-bottom: 70px; 
+            position: relative; 
         }
-        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);
+        h2::after { 
+            content: ''; display: block; width: 70px; height: 5px; 
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); 
+            margin: 20px auto 0; 
+            border-radius: 3px; 
         }
-        .btn:hover {
-            background-position: right center;
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
+        h3 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); color: var(--accent-primary); margin-bottom: 15px; }
+        p { margin-bottom: 1.2rem; color: var(--text-secondary); font-size: 1.05rem; }
+        .btn { 
+            display: inline-block; 
+            padding: 14px 32px; 
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); 
+            color: #fff; 
+            border-radius: var(--button-border-radius); 
+            text-decoration: none; 
+            font-weight: 600; 
+            transition: all 0.3s ease; 
+            box-shadow: 0 5px 20px var(--accent-glow); 
+            border: none;
+            cursor: pointer;
         }
-        .header {
-            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
-            padding: 15px 0; transition: all 0.3s ease;
+        .btn:hover { 
+            transform: translateY(-4px) scale(1.03); 
+            box-shadow: 0 10px 30px var(--accent-glow); 
+            background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
         }
-        .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;
+        .header { 
+            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; 
+            padding: 20px 0; 
+            background-color: transparent;
+            transition: all 0.35s ease-out; 
+        }
+        .header.scrolled { 
+            padding: 15px 0; 
+            background-color: rgba(17, 24, 39, 0.85); /* bg-dark with opacity */
+            backdrop-filter: blur(12px);
+            box-shadow: 0 3px 15px rgba(0,0,0,0.2); 
         }
         .navbar { display: flex; justify-content: space-between; align-items: center; }
-        .logo { font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: 800; color: #fff; text-decoration: none; }
+        .logo { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -1px; }
         .nav-links { display: flex; gap: 35px; list-style: none; }
-        .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 { 
+            color: var(--text-primary); 
+            text-decoration: none; 
+            font-weight: 500; /* Slightly less bold than 600 */
+            transition: color 0.3s ease, transform 0.3s ease; 
+            padding-bottom: 5px;
+            position: relative;
+        }
         .nav-links a::after {
-            content: ''; position: absolute; bottom: 0; left: 0;
-            width: 0; height: 2px; background: var(--primary-gradient);
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--accent-primary);
             transition: width 0.3s ease;
         }
-        .nav-links a:hover { color: var(--text-light); }
+        .nav-links a:hover { color: var(--accent-primary); }
         .nav-links a:hover::after { width: 100%; }
-        .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;
+        .menu-toggle { display: none; font-size: 1.8rem; cursor: pointer; border: none; background: none; color: white; }
+        
+        #hero { 
+            min-height: 100vh; 
+            display: flex; align-items: center; 
+            background-image: linear-gradient(rgba(17, 24, 39, 0.75), rgba(17, 24, 39, 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; 
+            background-attachment: fixed; /* Parallax effect */
         }
-        .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;
+        .hero-content { text-align: center; max-width: 850px; margin: 0 auto; }
+        .hero-content p { font-size: clamp(1.1rem, 3vw, 1.3rem); margin: 35px 0; max-width: 650px; margin-left: auto; margin-right: auto; color: var(--text-secondary); }
+        
+        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
+        .about-img { width: 100%; border-radius: var(--card-border-radius); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
+        
+        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; }
+        .service-card, .turnkey-card { 
+            background-color: var(--bg-medium); 
+            padding: 35px; 
+            border-radius: var(--card-border-radius); 
+            border: 1px solid var(--border-color); 
+            transition: all 0.3s ease; 
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
         }
-        .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);
+        .service-card:hover, .turnkey-card:hover { 
+            transform: translateY(-8px); 
+            border-color: var(--border-hover-color); 
+            box-shadow: 0 12px 35px var(--accent-glow); 
         }
-        .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;
+        .service-card i { font-size: 3rem; color: var(--accent-primary); margin-bottom: 25px; display: block; } /* Made icon larger and block */
+        
+        .turnkey-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; /* For image border radius */ }
+        .turnkey-img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; transition: transform 0.3s ease; }
+        .turnkey-card:hover .turnkey-img { transform: scale(1.05); }
+        .turnkey-content { padding: 35px; flex-grow: 1;}
+        .turnkey-content h3 i { transition: color 0.3s ease; }
+        .turnkey-card:hover .turnkey-content h3 i { color: var(--accent-secondary); }
+
+
+        #turnkey { background-color: var(--bg-medium); } /* Section specific bg */
+        #contact { background-color: var(--bg-medium); } /* Section specific bg */
+        
+        .equipment-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
+        .filter-btn { 
+            padding: 10px 25px; 
+            border: 1px solid var(--accent-primary); 
+            background-color: transparent; 
+            color: var(--accent-primary); 
+            border-radius: var(--button-border-radius); 
+            cursor: pointer; 
+            transition: all 0.3s ease; 
+            font-weight: 500;
         }
-        .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 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-color: var(--accent-primary); color: #fff; }
+        
+        .equipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 35px; }
+        .equipment-card { 
+            background-color: var(--bg-light-card); 
+            border-radius: var(--card-border-radius); 
+            overflow: hidden; 
+            text-align: center; 
+            padding: 25px; 
+            border: 1px solid var(--border-color); 
+            transition: all 0.3s ease; 
+            cursor: pointer; 
         }
-        .filter-btn.active, .filter-btn:hover {
-            background: var(--primary-gradient); color: #fff; border-color: transparent;
+        .equipment-card:hover { 
+            transform: translateY(-8px); 
+            border-color: var(--border-hover-color); 
+            box-shadow: 0 10px 30px var(--accent-glow); 
         }
-        .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 img { width: 100%; height: 200px; 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.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;
+        .equipment-card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text-primary); }
+        .equipment-card .price { font-size: 1.4rem; font-weight: 700; color: var(--accent-primary); margin: 15px 0; }
+        .equipment-card .btn { margin-top: 10px; padding: 10px 22px; font-size: 0.95rem; }
+        
+        .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 35px; }
+        .project-card { 
+            position: relative; 
+            border-radius: var(--card-border-radius); 
+            overflow: hidden; 
+            min-height: 420px; 
+            cursor: pointer; 
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            transition: box-shadow 0.3s 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:hover { box-shadow: 0 15px 45px rgba(0,0,0,0.4); }
+        .project-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+        .project-overlay { 
+            position: absolute; bottom: 0; left: 0; right: 0; 
+            background: linear-gradient(to top, rgba(17, 24, 39, 0.95) 10%, rgba(17, 24, 39, 0) 100%); 
+            padding: 50px 25px 25px; 
+            transition: background 0.4s ease;
         }
-        .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 h3 { margin-bottom: 8px; font-size: 1.5rem; color: #fff; }
+        .project-card p { 
+            margin-bottom: 0; 
+            transition: opacity 0.4s ease, max-height 0.5s ease, transform 0.4s ease; 
+            opacity: 0; max-height: 0; 
+            overflow: hidden; 
+            transform: translateY(10px);
+            color: var(--text-secondary);
         }
-        .project-card:hover img { transform: scale(1.05); }
+        .project-card:hover img { transform: scale(1.1); }
+        .project-card:hover .project-overlay { background: linear-gradient(to top, rgba(17, 24, 39, 1) 40%, rgba(17, 24, 39, 0) 100%); }
         .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.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; }
+        .contact-content > p { max-width: 600px; margin-left: auto; margin-right: auto; }
+        .contact-info { margin-top: 50px; display: flex; flex-direction: column; align-items: center; gap: 25px; }
+        .contact-info p { font-size: 1.3rem; margin-bottom: 0; color: var(--text-primary); }
+        .contact-info a { color: var(--accent-primary); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
+        .contact-info a:hover { color: var(--accent-secondary); }
+        .contact-info .btn { font-size: 1.1rem; }
+        .contact-info .btn i { margin-right: 10px; }
+
+        .footer { text-align: center; padding: 40px 0; background-color: #0c111d; border-top: 1px solid var(--border-color); }
+        .footer p { color: var(--text-muted); font-size: 0.95rem; }
+        
         @media (max-width: 992px) {
             .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; }
+            .about-img { margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto;}
         }
         @media (max-width: 768px) {
-            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 { 
+                position: fixed; top: 0; right: -100%; 
+                width: min(80vw, 320px); height: 100vh; 
+                background-color: var(--bg-medium); 
+                flex-direction: column; justify-content: center; align-items: center; 
+                transition: right 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Swing effect */
+                box-shadow: -8px 0 25px rgba(0,0,0,0.25); 
+                gap: 40px; /* Increased gap for mobile nav */
             }
             .nav-links.active { right: 0; }
             .menu-toggle { display: block; z-index: 1001; }
-            h2 { margin-bottom: 40px; }
+            h1 { font-size: 2.2rem; }
+            h2 { margin-bottom: 50px; font-size: 1.8rem; }
             .projects-grid { grid-template-columns: 1fr; }
+            .services-grid { grid-template-columns: 1fr; } /* Stack service cards on mobile */
+            .equipment-grid { grid-template-columns: 1fr; } /* Stack equipment cards on mobile */
+            .btn { padding: 12px 28px; }
         }
+        
         .modal {
-            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;
+            display: none;
+            position: fixed;
+            z-index: 1001;
+            left: 0; top: 0; width: 100%; height: 100%;
+            overflow: auto;
+            background-color: rgba(17, 24, 39, 0.9); /* Darker overlay */
+            padding-top: 5vh; /* Responsive padding */
+            backdrop-filter: blur(5px);
         }
         .modal-content {
-            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);
+            position: relative;
+            margin: 5% auto;
+            padding: 30px; /* Increased padding */
+            width: 90%;
+            max-width: 800px;
+            background-color: var(--bg-medium);
+            border-radius: var(--card-border-radius);
+            text-align: center;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+            border: 1px solid var(--border-color);
+        }
+        .modal-content img {
+            max-width: 100%;
+            max-height: 65vh; /* Adjusted max height */
+            border-radius: 10px;
+            margin-bottom: 25px;
+            object-fit: contain;
         }
-        .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; }
+        .modal-content h3 { margin-bottom: 15px; font-size: 1.8rem; color: var(--accent-primary); }
+        .modal-content p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.8; }
         .close-button {
-            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;
+            position: absolute;
+            top: 20px;
+            right: 25px;
+            font-size: 2.8rem;
+            font-weight: bold;
+            color: var(--text-primary);
+            cursor: pointer;
+            background: none;
+            border: none;
+            transition: color 0.3s ease, transform 0.3s ease;
         }
-        .close-button:hover, .close-button:focus { color: var(--primary-color); transform: rotate(90deg); }
-        .carousel-nav { margin-top: 20px; }
+        .close-button:hover, .close-button:focus { color: var(--accent-primary); transform: rotate(90deg); }
+        .carousel-nav { margin-top: 25px; }
         .carousel-nav button {
-            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-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;
+            background-color: var(--accent-primary);
+            color: white;
+            border: none;
+            padding: 12px 18px; /* Slightly larger padding */
+            border-radius: var(--button-border-radius);
+            margin: 0 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1.3rem; /* Larger icons */
         }
-        .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
+        .carousel-nav button:hover { background-color: var(--accent-secondary); transform: scale(1.1); }
+        .carousel-nav button:disabled { background-color: var(--text-muted); cursor: not-allowed; transform: scale(1); }
     </style>
 </head>
 <body>
@@ -377,7 +474,7 @@ LANDING_TEMPLATE = '''
     </section>
 
     <section id="about">
-        <div class="container animate-on-scroll">
+        <div class="container">
             <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">
@@ -394,42 +491,42 @@ LANDING_TEMPLATE = '''
     </section>
 
     <section id="services">
-        <div class="container animate-on-scroll">
+        <div class="container">
             <h2>Наши Услуги</h2>
             <div class="services-grid">
-                <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 class="service-card"><i class="fas fa-drafting-compass"></i><h3>Проектирование</h3><p>Точные расчеты, 3D-модели и вся необходимая проектная документация.</p></div>
+                <div class="service-card"><i class="fas fa-tools"></i><h3>Монтаж</h3><p>Профессиональная установка всех типов систем HVAC, от бытовых до промышленных.</p></div>
+                <div class="service-card"><i class="fas fa-headset"></i><h3>Сервис 24/7</h3><p>Плановое обслуживание и оперативный аварийный ремонт в любое время.</p></div>
+                <div class="service-card"><i class="fas fa-sync-alt"></i><h3>Модернизация</h3><p>Повышение энергоэффективности и снижение расходов на эксплуатацию.</p></div>
             </div>
         </div>
     </section>
 
     <section id="turnkey">
-        <div class="container animate-on-scroll">
+        <div class="container">
             <h2>Услуги "под ключ"</h2>
             {% if services %}
             <div class="services-grid">
                 {% for service in services %}
-                <div class="turnkey-card interactive-card" onclick="showDetailsModal('service', {{ loop.index0 }})">
+                <div class="turnkey-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; color: var(--primary-color);"></i>{{ service.title }}</h3>
+                        <h3><i class="{{ service.icon }} fa-fw" style="margin-right: 10px;"></i>{{ service.title }}</h3>
                         <p>{{ service.description }}</p>
                     </div>
                 </div>
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Информация об услугах "под ключ" скоро появится на сайте.</p>
+            <p style="text-align: center; color: var(--text-muted);">Информация об услугах "под ключ" скоро появится на сайте.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="equipment">
-        <div class="container animate-on-scroll">
+        <div class="container">
             <h2>Наше Оборудование</h2>
             {% if equipment %}
             <div class="equipment-filters">
@@ -440,26 +537,26 @@ LANDING_TEMPLATE = '''
             </div>
             <div class="equipment-grid">
                 {% for item in equipment %}
-                <div class="equipment-card interactive-card" data-category="{{ item.get('category', 'all') }}" onclick="showDetailsModal('equipment', {{ loop.index0 }})">
+                <div class="equipment-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">
+                    <img src="https://via.placeholder.com/250x180.png?text=No+Image" alt="No Image" style="filter: grayscale(0.8) opacity(0.6);">
                     {% 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>
+                    <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: {{ item.name|urlencode }}" target="_blank" class="btn">Запросить</a>
                 </div>
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Каталог оборудования скоро будет доступен.</p>
+            <p style="text-align: center; color: var(--text-muted);">Каталог оборудования скоро будет доступен.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="projects">
-        <div class="container animate-on-scroll">
+        <div class="container">
             <h2>Реализованные Проекты</h2>
             {% if projects %}
             <div class="projects-grid">
@@ -474,20 +571,20 @@ LANDING_TEMPLATE = '''
                 {% endfor %}
             </div>
             {% else %}
-            <p style="text-align: center;">Информация о реализованных проектах скоро появится на сайте.</p>
+            <p style="text-align: center; color: var(--text-muted);">Информация о реализованных проектах скоро появится на сайте.</p>
             {% endif %}
         </div>
     </section>
 
     <section id="contact">
-        <div class="container contact-content animate-on-scroll">
+        <div class="container contact-content">
             <h2>Контакты</h2>
-            <p>Готовы стать вашим надежным партнером в создании идеального климата.</p>
+            <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" style="margin-right: 8px;"></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"></i> Написать в WhatsApp</a>
             </div>
-            <div style="margin-top: 40px; font-size: 0.9rem; color: var(--text-muted);">
+            <div style="margin-top: 50px; font-size: 0.9rem; color: var(--text-muted);">
                 <p><strong>Реквизиты:</strong> ОсОО «Раина», ИНН: 00812202110194, ОКПО: 31290279</p>
             </div>
         </div>
@@ -499,11 +596,11 @@ LANDING_TEMPLATE = '''
 
     <div id="detailsModal" class="modal">
         <div class="modal-content">
-            <button class="close-button" onclick="closeDetailsModal()">×</button>
+            <button class="close-button" onclick="closeDetailsModal()" aria-label="Закрыть">×</button>
             <div id="modal-body"></div>
             <div class="carousel-nav">
-                <button id="prevBtn" onclick="changeModalItem(-1)">❮</button>
-                <button id="nextBtn" onclick="changeModalItem(1)">❯</button>
+                <button id="prevBtn" onclick="changeModalItem(-1)" aria-label="Предыдущий">❮</button>
+                <button id="nextBtn" onclick="changeModalItem(1)" aria-label="Следующий">❯</button>
             </div>
         </div>
     </div>
@@ -515,64 +612,51 @@ LANDING_TEMPLATE = '''
         let allItems = [];
 
         function showDetailsModal(type, index) {
-            event.stopPropagation();
             const data = {{ data | tojson }}; 
             currentData = data;
             currentType = type;
-            
-            if (type === 'service') allItems = data.services;
-            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;
-            }
+            currentIndex = index;
 
+            if (type === 'service') allItems = data.services || [];
+            else if (type === 'equipment') allItems = data.equipment || [];
+            else if (type === 'project') allItems = data.projects || [];
+            
             updateModalContent();
             document.getElementById('detailsModal').style.display = 'block';
             document.body.style.overflow = 'hidden'; 
         }
 
         function updateModalContent() {
-            if (!allItems || currentIndex < 0 || currentIndex >= allItems.length) return;
+            if (!allItems || allItems.length === 0 || currentIndex < 0 || currentIndex >= allItems.length) {
+                // Optionally hide modal or show error if item not found
+                // closeDetailsModal(); 
+                return;
+            }
 
             const item = allItems[currentIndex];
             const modalBody = document.getElementById('modal-body');
-            modalBody.innerHTML = '';
+            modalBody.innerHTML = ''; // Clear previous content
             let content = '';
 
             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;"></i>${item.title}</h3>
-                    <p>${item.description}</p>
+                    <h3><i class="${item.icon || 'fas fa-tools'} fa-fw" style="margin-right: 10px; color: var(--accent-primary);"></i>${item.title || 'Услуга'}</h3>
+                    <p>${item.description || 'Описание отсутствует.'}</p>
                 `;
             } else if (currentType === 'equipment') {
                 content = `
-                    ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/${item.photo}" alt="${item.name}">` : ''}
-                    <h3>${item.name}</h3>
+                    ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/${item.photo}" alt="${item.name}">` : '<img src="https://via.placeholder.com/400x300.png?text=No+Image" alt="No Image Available">'}
+                    <h3>${item.name || 'Оборудование'}</h3>
                     <p><strong>Категория:</strong> ${item.category || 'Не указана'}</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>
+                    <p class="price" style="font-size: 1.8rem; color: var(--accent-primary); margin: 20px 0;">${(item.price || 0).toFixed(2)} KGS</p>
+                    <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: ${encodeURIComponent(item.name || '')}" target="_blank" class="btn" style="padding: 14px 30px; font-size: 1.05rem;">Запросить</a>
                 `;
             } else if (currentType === 'project') {
                 content = `
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/${item.photo}" alt="${item.title}">
-                    <h3>${item.title}</h3>
-                    <p>${item.description}</p>
+                    ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/${item.photo}" alt="${item.title}">` : '<img src="https://via.placeholder.com/400x300.png?text=Project+Image+Not+Available" alt="Project Image Not Available">'}
+                    <h3>${item.title || 'Проект'}</h3>
+                    <p>${item.description || 'Описание отсутствует.'}</p>
                 `;
             }
             modalBody.innerHTML = content;
@@ -580,6 +664,7 @@ LANDING_TEMPLATE = '''
         }
 
         function changeModalItem(direction) {
+            if (!allItems || allItems.length === 0) return;
             let newIndex = currentIndex + direction;
             if (newIndex < 0) newIndex = allItems.length - 1;
             if (newIndex >= allItems.length) newIndex = 0;
@@ -590,23 +675,40 @@ LANDING_TEMPLATE = '''
         function updateCarouselNav() {
             const prevBtn = document.getElementById('prevBtn');
             const nextBtn = document.getElementById('nextBtn');
-            if (allItems.length <= 1) {
+            if (!allItems || allItems.length <= 1) {
                 prevBtn.style.display = 'none';
                 nextBtn.style.display = 'none';
             } else {
                 prevBtn.style.display = 'inline-block';
                 nextBtn.style.display = 'inline-block';
+                prevBtn.disabled = currentIndex === 0;
+                nextBtn.disabled = currentIndex === allItems.length - 1;
             }
         }
 
         function closeDetailsModal() {
             document.getElementById('detailsModal').style.display = 'none';
             document.body.style.overflow = '';
-            currentData = null;
-            currentType = null;
-            currentIndex = -1;
-            allItems = [];
+            // Reset state if needed, but not strictly necessary to clear currentData/Type/Index here
+            // as they get overwritten on next open.
         }
+        
+        // Close modal on ESC key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape' || event.key === 'Esc') {
+                if (document.getElementById('detailsModal').style.display === 'block') {
+                    closeDetailsModal();
+                }
+            }
+        });
+
+        // Close modal on clicking outside the content
+        document.getElementById('detailsModal').addEventListener('click', function(event) {
+            if (event.target === this) { // 'this' refers to the modal itself
+                closeDetailsModal();
+            }
+        });
+
 
         document.addEventListener('DOMContentLoaded', function() {
             const header = document.querySelector('.header');
@@ -619,11 +721,13 @@ LANDING_TEMPLATE = '''
 
             menuToggle.addEventListener('click', () => {
                 navLinks.classList.toggle('active');
+                menuToggle.setAttribute('aria-expanded', navLinks.classList.contains('active'));
             });
 
             document.querySelectorAll('.nav-links a').forEach(link => {
                 link.addEventListener('click', () => {
                     navLinks.classList.remove('active');
+                    menuToggle.setAttribute('aria-expanded', 'false');
                 });
             });
 
@@ -631,36 +735,18 @@ LANDING_TEMPLATE = '''
             if (filterContainer) {
                 filterContainer.addEventListener('click', (e) => {
                     if (!e.target.matches('.filter-btn')) return;
-                    filterContainer.querySelector('.active').classList.remove('active');
+                    
+                    const currentActive = filterContainer.querySelector('.filter-btn.active');
+                    if(currentActive) currentActive.classList.remove('active');
+                    
                     e.target.classList.add('active');
                     const filter = e.target.dataset.filter;
+                    
                     document.querySelectorAll('.equipment-card').forEach(card => {
-                        card.style.display = (filter === 'all' || card.dataset.category === filter) ? 'flex' : 'none';
+                        card.style.display = (filter === 'all' || card.dataset.category === filter) ? 'block' : 'none';
                     });
                 });
             }
-
-            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>
@@ -847,7 +933,7 @@ def landing():
         contact_phone=CONTACT_PHONE,
         whatsapp_phone=WHATSAPP_PHONE,
         now=datetime.utcnow(),
-        data=data
+        data=data 
     )
 
 @app.route('/admin', methods=['GET', 'POST'])
@@ -910,6 +996,10 @@ def admin():
                 title = request.form.get('title', '').strip()
                 item_data = {'title': title, 'icon': request.form.get('icon'), 'description': request.form.get('description')}
                 photo = request.files.get('photo')
+                if not title:
+                     flash("Заголовок услуги обязателен.", 'error')
+                     return redirect(url_for('admin'))
+
                 if action == 'add_service':
                     if photo and photo.filename:
                         item_data['photo'] = upload_photo_to_hf(photo, title, 'services')
@@ -936,6 +1026,10 @@ def admin():
                 title = request.form.get('title', '').strip()
                 item_data = {'title': title, 'description': request.form.get('description')}
                 photo = request.files.get('photo')
+                if not title:
+                     flash("Заголовок проекта обязателен.", 'error')
+                     return redirect(url_for('admin'))
+
                 if action == 'add_project':
                     if photo and photo.filename:
                         item_data['photo'] = upload_photo_to_hf(photo, title, 'projects')
@@ -972,7 +1066,8 @@ def admin():
         equipment=data.get('equipment', []),
         categories=sorted(data.get('categories', [])),
         services=data.get('services', []),
-        projects=data.get('projects', [])
+        projects=data.get('projects', []),
+        repo_id=REPO_ID
     )
 
 def upload_photo_to_hf(photo, item_name, folder):
@@ -982,13 +1077,15 @@ def upload_photo_to_hf(photo, item_name, folder):
         api = HfApi()
         safe_name = secure_filename(item_name.replace(' ', '_'))[:50]
         ext = os.path.splitext(photo.filename)[1].lower()
+        if not ext: ext = ".jpg" 
         photo_filename = f"{safe_name}_{datetime.now().strftime('%Y%m%d%H%M%S%f')}{ext}"
         
         photo_file_obj = io.BytesIO(photo.read())
 
         api.upload_file(
             path_or_fileobj=photo_file_obj, path_in_repo=f"{folder}/{photo_filename}",
-            repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE
+            repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE,
+            commit_message=f"Upload photo {photo_filename} for {folder}"
         )
         logging.info(f"Uploaded photo {photo_filename} to {folder}")
         return photo_filename
@@ -1004,14 +1101,17 @@ def delete_photo_from_hf(photo_filename, folder):
         api = HfApi()
         api.delete_files(
             repo_id=REPO_ID, paths_in_repo=[f"{folder}/{photo_filename}"],
-            repo_type="dataset", token=HF_TOKEN_WRITE
+            repo_type="dataset", token=HF_TOKEN_WRITE,
+            commit_message=f"Delete photo {photo_filename} from {folder}"
         )
         logging.info(f"Deleted photo {photo_filename} from {folder}")
     except HfHubHTTPError as e:
         if e.response.status_code != 404:
-            logging.error(f"Error deleting photo {photo_filename}: {e}")
+            logging.error(f"HTTP error deleting photo {photo_filename}: {e}")
+        else:
+            logging.info(f"Photo {photo_filename} not found on HF for deletion, or already deleted.")
     except Exception as e:
-        logging.error(f"Error deleting photo {photo_filename}: {e}")
+        logging.error(f"Unexpected error deleting photo {photo_filename}: {e}")
 
 @app.route('/force_upload', methods=['POST'])
 def force_upload():
@@ -1021,14 +1121,19 @@ def force_upload():
 
 @app.route('/force_download', methods=['POST'])
 def force_download():
-    download_db_from_hf()
-    flash("Данные скачаны с сервера.", 'success')
+    if download_db_from_hf():
+        flash("Данные успешно скачаны с сервера.", 'success')
+    else:
+        flash("Ошибка при скачивании данных с сервера.", 'error')
     return redirect(url_for('admin'))
 
 if __name__ == '__main__':
     logging.info("Application starting up...")
-    download_db_from_hf()
+    if not download_db_from_hf():
+        logging.warning("Initial database download failed. Application might start with empty or outdated data.")
+    
     if HF_TOKEN_WRITE:
         threading.Thread(target=periodic_backup, daemon=True).start()
+    
     port = int(os.environ.get('PORT', 7860))
     app.run(debug=False, host='0.0.0.0', port=port)