<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS для SIL2 стиля</title><style>:root{--primary-dark:#00264d;--primary-medium:#0066cc;--primary-light:#0088ff;--accent:#00aaff;--background-light:#f8f9fa;--background-lighter:#f0f6ff;--text-dark:#333;--text-medium:#666;--text-light:#f0f6ff;--shadow-color:rgba(0, 102, 204, 0.15)}*{margin:0;padding:0;box-sizing:border-box;font-family:'Arial',sans-serif}body{background-color:var(--background-light);color:var(--text-dark);line-height:1.6;padding:20px}.container{max-width:1200px;margin:0 auto}.navbar{background:linear-gradient(145deg,var(--primary-dark) 0%,var(--primary-medium) 100%);color:#fff;padding:20px 0;border-radius:12px;margin-bottom:30px;box-shadow:0 15px 30px rgb(0 0 0 / .25),0 10px 20px var(--shadow-color),inset 0 2px 5px rgb(255 255 255 / .3);position:relative;overflow:hidden}.navbar::before{content:'';position:absolute;top:-15px;left:-15px;right:-15px;height:30px;background:linear-gradient(135deg,#001933 0%,#004080 100%);border-radius:50%;filter:blur(15px);z-index:-1;opacity:.8}.navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--primary-light) 0%,var(--primary-medium) 50%,var(--primary-light) 100%);box-shadow:0 2px 10px rgb(0 136 255 / .6)}.nav-container{display:flex;justify-content:space-between;align-items:center;padding:0 30px}.nav-logo{font-size:1.8rem;font-weight:700;letter-spacing:1.5px;text-shadow:2px 2px 4px rgb(0 0 0 / .4),0 0 15px rgb(0 136 255 / .5)}.nav-menu{display:flex;list-style:none}.nav-item{margin-left:25px}.nav-link{color:#fff;text-decoration:none;font-weight:500;padding:8px 15px;border-radius:6px;transition:all 0.3s ease}.nav-link:hover{background-color:rgb(255 255 255 / .15);box-shadow:0 0 10px rgb(0 136 255 / .4)}.card-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px}.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px rgb(0 0 0 / .1);transition:all 0.3s ease}.card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgb(0 0 0 / .15)}.card-header{background:linear-gradient(145deg,var(--primary-dark) 0%,var(--primary-medium) 100%);color:#fff;padding:20px;position:relative}.card-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--primary-light) 0%,var(--primary-medium) 50%,var(--primary-light) 100%)}.card-body{padding:25px}.card-title{font-size:1.4rem;margin-bottom:15px;color:var(--primary-dark)}.card-text{margin-bottom:20px;color:var(--text-dark)}.btn{display:inline-block;padding:12px 25px;background:linear-gradient(145deg,var(--primary-medium) 0%,var(--primary-dark) 100%);color:#fff;text-decoration:none;border-radius:6px;font-weight:600;border:none;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px var(--shadow-color)}.btn:hover{background:linear-gradient(145deg,var(--primary-light) 0%,var(--primary-medium) 100%);box-shadow:0 6px 20px var(--shadow-color);transform:translateY(-2px)}.btn-outline{background:#fff0;border:2px solid var(--primary-medium);color:var(--primary-medium)}.btn-outline:hover{background:var(--primary-medium);color:#fff}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--primary-dark)}.form-control{width:100%;padding:12px 15px;border:2px solid #e0ecff;border-radius:8px;font-size:1rem;transition:all 0.3s ease}.form-control:focus{outline:none;border-color:var(--primary-medium);box-shadow:0 0 0 3px rgb(0 102 204 / .2)}.text-center{text-align:center}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.p-20{padding:20px}@media (max-width:768px){.nav-container{flex-direction:column}.nav-menu{margin-top:20px;flex-direction:column;align-items:center}.nav-item{margin:10px 0}.card-container{grid-template-columns:1fr}}</style></head><body><div class="container"><!-- Навигация --><nav class="navbar"><div class="nav-container"><div class="nav-logo">SIL2</div><ul class="nav-menu"><li class="nav-item"><a href="#" class="nav-link">Главная</a></li><li class="nav-item"><a href="#" class="nav-link">Услуги</a></li><li class="nav-item"><a href="#" class="nav-link">О нас</a></li><li class="nav-item"><a href="#" class="nav-link">Контакты</a></li></ul></div></nav><!-- Карточки --><div class="card-container"><div class="card"><div class="card-header"><h3>SIL сертификация</h3></div><div class="card-body"><p>Полный цикл работ по сертификации оборудования и систем на соответствие требованиям SIL.</p><a href="#" class="btn">Подробнее</a></div></div><div class="card"><div class="card-header"><h3>Анализ рисков</h3></div><div class="card-body"><p>Проведение анализа Hazop,LOPA и других видов оценки рисков на опасных производственных объектах.</p><a href="#" class="btn">Подробнее</a></div></div><div class="card"><div class="card-header"><h3>Консультации</h3></div><div class="card-body"><p>Экспертные консультации по вопросам функциональной безопасности и соответствия стандартам.</p><a href="#" class="btn">Подробнее</a></div></div></div><!-- Форма --><div class="card"><div class="card-header"><h3>Свяжитесь с нами</h3></div><div class="card-body"><form><div class="form-group"><label class="form-label">Ваше имя</label><input type="text" class="form-control" placeholder="Введите ваше имя"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-control" placeholder="Введите ваш email"></div><div class="form-group"><label class="form-label">Сообщение</label><textarea class="form-control" rows="4" placeholder="Введите ваше сообщение"></textarea></div><button type="submit" class="btn">Отправить</button></form></div></div></div></body></html>