diff --git a/index.html b/index.html
index 7301884..8692f0f 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,9 @@
 
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            background: #f5f7fa;
             min-height: 100vh;
-            color: #eee;
+            color: #333;
         }
 
         .container {
@@ -25,228 +25,260 @@
         }
 
         header {
-            text-align: center;
-            padding: 30px 0;
-            border-bottom: 2px solid #e94560;
+            background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
+            padding: 25px 30px;
             margin-bottom: 30px;
+            box-shadow: 0 2px 10px rgba(0, 102, 204, 0.2);
+            border-bottom: 3px solid #00a0e3;
         }
 
         header h1 {
-            color: #e94560;
-            font-size: 2.5rem;
-            margin-bottom: 10px;
+            color: #fff;
+            font-size: 1.8rem;
+            margin-bottom: 5px;
+            font-weight: 600;
         }
 
         header p {
-            color: #aaa;
-            font-size: 1.1rem;
+            color: #e6f0ff;
+            font-size: 0.95rem;
         }
 
         .filters {
-            background: rgba(255, 255, 255, 0.05);
+            background: #fff;
             padding: 20px;
-            border-radius: 10px;
-            margin-bottom: 30px;
+            border-radius: 4px;
+            margin-bottom: 25px;
             display: flex;
             flex-wrap: wrap;
             gap: 15px;
             align-items: center;
+            border: 1px solid #e0e6ed;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         }
 
         .filter-group {
             display: flex;
             flex-direction: column;
-            gap: 5px;
+            gap: 6px;
         }
 
         .filter-group label {
-            font-size: 0.85rem;
-            color: #aaa;
+            font-size: 0.8rem;
+            color: #555;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
 
         .filter-group input,
         .filter-group select {
-            padding: 10px 15px;
-            border: 1px solid #444;
-            border-radius: 5px;
-            background: #1a1a2e;
-            color: #eee;
-            font-size: 1rem;
+            padding: 10px 14px;
+            border: 1px solid #d0d9e2;
+            border-radius: 4px;
+            background: #fff;
+            color: #333;
+            font-size: 0.95rem;
+            transition: border-color 0.2s;
         }
 
         .filter-group input:focus,
         .filter-group select:focus {
             outline: none;
-            border-color: #e94560;
+            border-color: #0066cc;
+            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
         }
 
         .stats {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 15px;
-            margin-bottom: 30px;
+            margin-bottom: 25px;
         }
 
         .stat-card {
-            background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
+            background: #fff;
             padding: 20px;
-            border-radius: 10px;
+            border-radius: 4px;
             text-align: center;
+            border-left: 4px solid #0066cc;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         }
 
         .stat-card h3 {
-            font-size: 2rem;
+            font-size: 2.2rem;
             margin-bottom: 5px;
+            color: #0066cc;
+            font-weight: 700;
         }
 
         .stat-card p {
-            font-size: 0.9rem;
-            opacity: 0.9;
+            font-size: 0.85rem;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
 
         .employees-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-            gap: 25px;
+            grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+            gap: 20px;
         }
 
         .employee-card {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 15px;
-            padding: 25px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
+            background: #fff;
+            border-radius: 4px;
+            padding: 22px;
+            border: 1px solid #e0e6ed;
+            transition: all 0.2s;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         }
 
         .employee-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 30px rgba(233, 69, 96, 0.2);
-            border-color: #e94560;
+            box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
+            border-color: #0066cc;
         }
 
         .employee-header {
             display: flex;
             justify-content: space-between;
             align-items: flex-start;
-            margin-bottom: 20px;
+            margin-bottom: 18px;
             padding-bottom: 15px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 2px solid #e0e6ed;
         }
 
         .employee-name {
-            font-size: 1.4rem;
-            color: #e94560;
-            margin-bottom: 5px;
+            font-size: 1.3rem;
+            color: #0066cc;
+            margin-bottom: 6px;
+            font-weight: 600;
         }
 
         .employee-position {
-            color: #aaa;
-            font-size: 1rem;
+            color: #666;
+            font-size: 0.95rem;
+            font-weight: 500;
         }
 
         .employee-number {
-            background: #e94560;
-            padding: 5px 12px;
-            border-radius: 20px;
+            background: #0066cc;
+            color: #fff;
+            padding: 6px 14px;
+            border-radius: 4px;
             font-size: 0.85rem;
-            font-weight: bold;
+            font-weight: 600;
         }
 
         .info-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 15px;
+            gap: 12px;
         }
 
         .info-item {
-            padding: 10px;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 8px;
+            padding: 12px;
+            background: #f8fafc;
+            border-radius: 4px;
+            border: 1px solid #eef2f6;
         }
 
         .info-label {
-            font-size: 0.75rem;
-            color: #888;
+            font-size: 0.7rem;
+            color: #8898aa;
             text-transform: uppercase;
-            margin-bottom: 5px;
+            letter-spacing: 0.8px;
+            margin-bottom: 6px;
+            font-weight: 600;
         }
 
         .info-value {
             font-size: 0.95rem;
-            color: #eee;
+            color: #333;
+            font-weight: 500;
         }
 
         .highlight-1class {
-            background: rgba(255, 193, 7, 0.2) !important;
-            border-left: 3px solid #ffc107;
+            background: #fff8e6 !important;
+            border-left: 3px solid #f0ad4e;
         }
 
         .highlight-11class {
-            background: rgba(76, 175, 80, 0.2) !important;
+            background: #e8f5e9 !important;
             border-left: 3px solid #4caf50;
         }
 
         .children-section {
-            margin-top: 15px;
+            margin-top: 18px;
             padding: 15px;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 10px;
+            background: #f8fafc;
+            border-radius: 4px;
+            border: 1px solid #eef2f6;
         }
 
         .children-section h4 {
-            color: #e94560;
-            margin-bottom: 10px;
-            font-size: 1rem;
+            color: #0066cc;
+            margin-bottom: 12px;
+            font-size: 0.95rem;
+            font-weight: 600;
         }
 
         .child-item {
-            padding: 8px;
+            padding: 10px;
             margin-bottom: 8px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 5px;
+            background: #fff;
+            border-radius: 4px;
             font-size: 0.9rem;
+            border: 1px solid #eef2f6;
         }
 
         .vacation-section {
-            margin-top: 15px;
+            margin-top: 18px;
             padding: 15px;
-            background: rgba(233, 69, 96, 0.1);
-            border-radius: 10px;
-            border: 1px solid rgba(233, 69, 96, 0.3);
+            background: #e8f4fd;
+            border-radius: 4px;
+            border: 1px solid #b3d9f2;
         }
 
         .vacation-section h4 {
-            color: #e94560;
-            margin-bottom: 10px;
-            font-size: 1rem;
+            color: #0066cc;
+            margin-bottom: 12px;
+            font-size: 0.95rem;
+            font-weight: 600;
         }
 
         .vacation-item {
-            padding: 8px;
+            padding: 10px;
             margin-bottom: 8px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 5px;
+            background: #fff;
+            border-radius: 4px;
             font-size: 0.9rem;
             display: flex;
             justify-content: space-between;
+            border: 1px solid #eef2f6;
         }
 
         .location-badge {
             display: inline-block;
-            background: rgba(33, 150, 243, 0.2);
-            color: #2196f3;
-            padding: 5px 10px;
-            border-radius: 5px;
+            background: #e8f4fd;
+            color: #0066cc;
+            padding: 6px 12px;
+            border-radius: 4px;
             font-size: 0.85rem;
-            margin-top: 10px;
+            font-weight: 500;
+            margin-top: 15px;
+            border: 1px solid #b3d9f2;
         }
 
         .no-results {
             text-align: center;
-            padding: 50px;
-            color: #888;
-            font-size: 1.2rem;
+            padding: 60px;
+            color: #8898aa;
+            font-size: 1.1rem;
             grid-column: 1 / -1;
+            background: #fff;
+            border-radius: 4px;
+            border: 1px solid #e0e6ed;
         }
 
         @media (max-width: 768px) {
@@ -270,6 +302,10 @@
             .filter-group select {
                 width: 100%;
             }
+            
+            header h1 {
+                font-size: 1.4rem;
+            }
         }
     </style>
 </head>
@@ -277,7 +313,7 @@
     <div class="container">
         <header>
             <h1>📋 Карточки сотрудников СОК-1 СД</h1>
-            <p>Внутренняя система учёта кадров</p>
+            <p>Корпоративная система управления персоналом | АО «Казахтелеком»</p>
         </header>
 
         <div class="filters">