Dokers/Northen-node
0
1<!DOCTYPE html>2<html lang="ru">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Кризисная логистика - Северный Узел</title>7<script src="https://cdn.tailwindcss.com/3.4.16"></script>8<script>9tailwind.config = {10theme: {11extend: {12colors: {13primary: '#25282B',14secondary: '#ffffff'15},16borderRadius: {17'none': '0px',18'sm': '4px',19DEFAULT: '8px',20'md': '12px',21'lg': '16px',22'xl': '20px',23'2xl': '24px',24'3xl': '32px',25'full': '9999px',26'button': '8px'27},28fontFamily: {29'din': ['DIN Alternate', 'DIN Pro', 'sans-serif'],30'roboto': ['Roboto', 'sans-serif']31}32}33}34}35</script>36<link rel="preconnect" href="https://fonts.googleapis.com">37<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>38<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">39<link href="https://fonts.cdnfonts.com/css/coolvetica" rel="stylesheet">40<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">41<style>42:where([class^="ri-"])::before {43content: "\f3c2";44}45@import url('https://fonts.googleapis.com/css2?family=DIN+Alternate:wght@400;700&display=swap');46.card-hover {47transition: all 0.3s ease;48}49.card-hover:hover {50transform: translateY(-8px);51box-shadow: 0 20px 40px rgba(37, 40, 43, 0.15);52}53.nav-item {54position: relative;55}56.dropdown {57position: absolute;58top: 100%;59left: 0;60background: white;61border: 1px solid #e5e7eb;62border-radius: 8px;63box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);64opacity: 0;65visibility: hidden;66transform: translateY(-10px);67transition: all 0.3s ease;68z-index: 50;69min-width: 200px;70}71.nav-item:hover .dropdown {72opacity: 1;73visibility: visible;74transform: translateY(0);75}76.counter-animation {77animation: countUp 2s ease-out;78}79@keyframes countUp {80from { opacity: 0; transform: translateY(20px); }81to { opacity: 1; transform: translateY(0); }82}83</style>84</head>85<body class="font-roboto bg-white">86<header class="bg-white border-b border-gray-100 sticky top-0 z-40">87<div class="w-full px-6 lg:px-8">88<div class="flex items-center justify-between h-20">89<div class="flex items-center">90<a href="#" class="flex items-center">91<span class="text-3xl font-['Coolvetica'] text-primary">Северный Узел</span>92</a>93</div>94<nav class="hidden lg:flex items-center space-x-8">95<a href="index.html" data-readdy="true" class="text-gray-700 hover:text-primary transition-colors font-medium">Главная</a>96<div class="nav-item">97<a href="#" class="text-primary font-medium flex items-center">98Направления99<div class="w-4 h-4 flex items-center justify-center ml-1">100<i class="ri-arrow-down-s-line text-sm"></i>101</div>102</a>103<div class="dropdown">104<a href="/Logistic.html" class="block px-4 py-3 text-primary bg-gray-50 font-medium">Кризисная логистика</a>105<a href="/spectech.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Спецтехника</a>106<a href="/connection.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Связь и мониторинг</a>107</div>108</div>109<a href="/decisions.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Решения</a>110<a href="/cases.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Кейсы</a>111<a href="/expertise.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Экспертиза</a>112<a href="/contacts.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Контакты</a>113</nav>114<div class="flex items-center space-x-6">115<a href="tel:+7" class="text-gray-700 hover:text-primary transition-colors font-medium">+7 (495) 123-45-67</a>116<button class="bg-primary text-white px-6 py-3 !rounded-button hover:bg-gray-800 transition-colors font-medium whitespace-nowrap">117Обсудить задачу118</button>119</div>120</div>121</div>122</header>123<main>124<section class="relative h-screen flex items-center justify-center overflow-hidden">125<div class="absolute inset-0 bg-gradient-to-r from-white/95 via-white/80 to-transparent z-10"></div>126<div style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20convoy%20of%20specialized%20all-terrain%20vehicles%20navigating%20through%20extreme%20snowy%20conditions%20with%20dramatic%20mountain%20backdrop%20professional%20crisis%20logistics%20operation%20cinematic%20wide%20shot%20left%20side%20white%20space%20for%20text&width=1920&height=1080&seq=hero-crisis&orientation=landscape')" class="absolute inset-0 bg-cover bg-center bg-no-repeat"></div>127<div class="relative z-20 w-full px-6 lg:px-8">128<div class="max-w-7xl mx-auto">129<div class="max-w-2xl">130<h1 class="text-6xl lg:text-7xl font-bold text-primary mb-8 font-['DIN Pro'] leading-tight">131Кризисная<br>логистика132</h1>133<p class="text-xl lg:text-2xl text-gray-700 mb-12 leading-relaxed">134Доставка грузов в экстремальных условиях, обход конфликтных зон и поставки в арктические регионы — там, где другие останавливаются135</p>136<div class="flex flex-col sm:flex-row items-start space-y-4 sm:space-y-0 sm:space-x-6">137<button class="bg-primary text-white px-10 py-5 !rounded-button hover:bg-gray-800 transition-colors font-medium text-lg whitespace-nowrap">138Получить консультацию139</button>140<div class="counter-animation bg-primary/10 px-6 py-4 rounded-2xl">141<div class="text-3xl font-bold text-primary font-['DIN Pro'] mb-1">24/7</div>142<div class="text-gray-600 text-sm uppercase tracking-wider">экстренная поддержка</div>143</div>144</div>145</div>146</div>147</div>148</section>149<section class="py-20 bg-white">150<div class="max-w-7xl mx-auto px-6 lg:px-8">151<div class="text-center mb-16">152<h2 class="text-4xl font-bold text-primary mb-4 font-din">Наши услуги</h2>153<p class="text-xl text-gray-600 max-w-3xl mx-auto">Полный спектр логистических решений для работы в сложных и экстремальных условиях</p>154</div>155<div class="grid lg:grid-cols-2 gap-12 mb-16">156<div class="bg-gray-50 rounded-2xl p-8">157<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mb-6">158<i class="ri-truck-line ri-2x"></i>159</div>160<h3 class="text-2xl font-bold text-primary mb-4 font-din">Обычная логистика</h3>161<p class="text-gray-600 mb-6 leading-relaxed">Стандартные транспортные решения для доставки грузов по России и странам СНГ. Складские услуги, таможенное оформление и экспедирование.</p>162<ul class="space-y-3">163<li class="flex items-center text-gray-600">164<div class="w-5 h-5 flex items-center justify-center mr-3">165<i class="ri-check-line text-green-600"></i>166</div>167Автомобильные перевозки по всей России168</li>169<li class="flex items-center text-gray-600">170<div class="w-5 h-5 flex items-center justify-center mr-3">171<i class="ri-check-line text-green-600"></i>172</div>173Складские услуги и кросс-докинг174</li>175<li class="flex items-center text-gray-600">176<div class="w-5 h-5 flex items-center justify-center mr-3">177<i class="ri-check-line text-green-600"></i>178</div>179Таможенное оформление и ВЭД180</li>181<li class="flex items-center text-gray-600">182<div class="w-5 h-5 flex items-center justify-center mr-3">183<i class="ri-check-line text-green-600"></i>184</div>185Страхование и сопровождение грузов186</li>187</ul>188</div>189<div class="bg-gray-50 rounded-2xl p-8">190<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mb-6">191<i class="ri-shield-line ri-2x"></i>192</div>193<h3 class="text-2xl font-bold text-primary mb-4 font-din">Доставка в обход конфликтных зон</h3>194<p class="text-gray-600 mb-6 leading-relaxed">Альтернативные маршруты доставки через безопасные коридоры с полным мониторингом и сопровождением груза.</p>195<ul class="space-y-3">196<li class="flex items-center text-gray-600">197<div class="w-5 h-5 flex items-center justify-center mr-3">198<i class="ri-check-line text-green-600"></i>199</div>200Анализ рисков и построение безопасных маршрутов201</li>202<li class="flex items-center text-gray-600">203<div class="w-5 h-5 flex items-center justify-center mr-3">204<i class="ri-check-line text-green-600"></i>205</div>206Спутниковый мониторинг в реальном времени207</li>208<li class="flex items-center text-gray-600">209<div class="w-5 h-5 flex items-center justify-center mr-3">210<i class="ri-check-line text-green-600"></i>211</div>212Бронированный транспорт при необходимости213</li>214<li class="flex items-center text-gray-600">215<div class="w-5 h-5 flex items-center justify-center mr-3">216<i class="ri-check-line text-green-600"></i>217</div>218Координация с силовыми структурами219</li>220</ul>221</div>222</div>223<div class="grid lg:grid-cols-2 gap-12">224<div class="bg-gray-50 rounded-2xl p-8">225<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mb-6">226<i class="ri-snowflake-line ri-2x"></i>227</div>228<h3 class="text-2xl font-bold text-primary mb-4 font-din">Арктические поставки</h3>229<p class="text-gray-600 mb-6 leading-relaxed">Доставка грузов в условиях экстремально низких температур и труднодоступных арктических территорий.</p>230<ul class="space-y-3">231<li class="flex items-center text-gray-600">232<div class="w-5 h-5 flex items-center justify-center mr-3">233<i class="ri-check-line text-green-600"></i>234</div>235Специализированный арктический транспорт236</li>237<li class="flex items-center text-gray-600">238<div class="w-5 h-5 flex items-center justify-center mr-3">239<i class="ri-check-line text-green-600"></i>240</div>241Работа при температурах до -60°C242</li>243<li class="flex items-center text-gray-600">244<div class="w-5 h-5 flex items-center justify-center mr-3">245<i class="ri-check-line text-green-600"></i>246</div>247Вертолетные перевозки в недоступные районы248</li>249<li class="flex items-center text-gray-600">250<div class="w-5 h-5 flex items-center justify-center mr-3">251<i class="ri-check-line text-green-600"></i>252</div>253Ледовые переправы и зимники254</li>255</ul>256</div>257<div class="bg-gray-50 rounded-2xl p-8">258<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mb-6">259<i class="ri-tools-line ri-2x"></i>260</div>261<h3 class="text-2xl font-bold text-primary mb-4 font-din">Специализированный транспорт</h3>262<p class="text-gray-600 mb-6 leading-relaxed">Собственный парк специальной техники для перевозки негабаритных, тяжеловесных и опасных грузов.</p>263<ul class="space-y-3">264<li class="flex items-center text-gray-600">265<div class="w-5 h-5 flex items-center justify-center mr-3">266<i class="ri-check-line text-green-600"></i>267</div>268Вездеходы и гусеничная техника269</li>270<li class="flex items-center text-gray-600">271<div class="w-5 h-5 flex items-center justify-center mr-3">272<i class="ri-check-line text-green-600"></i>273</div>274Тяжеловозы и низкорамные трейлеры275</li>276<li class="flex items-center text-gray-600">277<div class="w-5 h-5 flex items-center justify-center mr-3">278<i class="ri-check-line text-green-600"></i>279</div>280Рефрижераторы с автономным питанием281</li>282<li class="flex items-center text-gray-600">283<div class="w-5 h-5 flex items-center justify-center mr-3">284<i class="ri-check-line text-green-600"></i>285</div>286Контейнеры для опасных грузов287</li>288</ul>289</div>290</div>291<div class="mt-12">292<div class="bg-red-50 border-l-4 border-red-500 rounded-2xl p-8">293<div class="flex items-start">294<div class="w-12 h-12 flex items-center justify-center bg-red-500 text-white rounded-xl mr-6 flex-shrink-0">295<i class="ri-alarm-warning-line ri-xl"></i>296</div>297<div>298<h3 class="text-2xl font-bold text-primary mb-4 font-din">Экстренная логистика</h3>299<p class="text-gray-600 mb-6 leading-relaxed">Оперативное реагирование на кризисные ситуации с мобилизацией ресурсов в течение 2-4 часов. Эвакуация персонала и оборудования из зон ЧС.</p>300<div class="grid md:grid-cols-2 gap-6">301<ul class="space-y-3">302<li class="flex items-center text-gray-600">303<div class="w-5 h-5 flex items-center justify-center mr-3">304<i class="ri-check-line text-green-600"></i>305</div>306Круглосуточная диспетчерская служба307</li>308<li class="flex items-center text-gray-600">309<div class="w-5 h-5 flex items-center justify-center mr-3">310<i class="ri-check-line text-green-600"></i>311</div>312Мобилизация транспорта за 2 часа313</li>314</ul>315<ul class="space-y-3">316<li class="flex items-center text-gray-600">317<div class="w-5 h-5 flex items-center justify-center mr-3">318<i class="ri-check-line text-green-600"></i>319</div>320Эвакуация людей и оборудования321</li>322<li class="flex items-center text-gray-600">323<div class="w-5 h-5 flex items-center justify-center mr-3">324<i class="ri-check-line text-green-600"></i>325</div>326Доставка гуманитарной помощи327</li>328</ul>329</div>330</div>331</div>332</div>333<div class="mt-12">334<div class="bg-blue-50 border-l-4 border-blue-500 rounded-2xl p-8">335<div class="flex items-start">336<div class="w-12 h-12 flex items-center justify-center bg-blue-500 text-white rounded-xl mr-6 flex-shrink-0">337<i class="ri-scales-3-line ri-xl"></i>338</div>339<div>340<h3 class="text-2xl font-bold text-primary mb-4 font-din">Юридическая помощь с системой Автодор</h3>341<p class="text-gray-600 mb-6 leading-relaxed">Профессиональная юридическая поддержка по оптимизации расходов на платные дороги системы Автодор. Снижение транспортных затрат до 40% за счет правильного планирования маршрутов и использования льгот.</p>342<div class="grid md:grid-cols-2 gap-6">343<ul class="space-y-3">344<li class="flex items-center text-gray-600">345<div class="w-5 h-5 flex items-center justify-center mr-3">346<i class="ri-check-line text-green-600"></i>347</div>348Анализ и оптимизация маршрутов349</li>350<li class="flex items-center text-gray-600">351<div class="w-5 h-5 flex items-center justify-center mr-3">352<i class="ri-check-line text-green-600"></i>353</div>354Оформление льгот и скидок355</li>356<li class="flex items-center text-gray-600">357<div class="w-5 h-5 flex items-center justify-center mr-3">358<i class="ri-check-line text-green-600"></i>359</div>360Корпоративные тарифы для автопарков361</li>362<li class="flex items-center text-gray-600">363<div class="w-5 h-5 flex items-center justify-center mr-3">364<i class="ri-check-line text-green-600"></i>365</div>366Обжалование неправомерных списаний367</li>368</ul>369<ul class="space-y-3">370<li class="flex items-center text-gray-600">371<div class="w-5 h-5 flex items-center justify-center mr-3">372<i class="ri-check-line text-green-600"></i>373</div>374Консультации по тарифной политике375</li>376<li class="flex items-center text-gray-600">377<div class="w-5 h-5 flex items-center justify-center mr-3">378<i class="ri-check-line text-green-600"></i>379</div>380Ведение споров с Автодор381</li>382<li class="flex items-center text-gray-600">383<div class="w-5 h-5 flex items-center justify-center mr-3">384<i class="ri-check-line text-green-600"></i>385</div>386Настройка транспондеров387</li>388<li class="flex items-center text-gray-600">389<div class="w-5 h-5 flex items-center justify-center mr-3">390<i class="ri-check-line text-green-600"></i>391</div>392Аудит транспортных расходов393</li>394</ul>395</div>396</div>397</div>398</div>399</div>400</section>401<section class="py-20 bg-gray-50">402<div class="max-w-7xl mx-auto px-6 lg:px-8">403<div class="text-center mb-16">404<h2 class="text-4xl font-bold text-primary mb-4 font-din">Наши преимущества</h2>405<p class="text-xl text-gray-600 max-w-3xl mx-auto">Почему клиенты выбирают нас для решения самых сложных логистических задач</p>406</div>407<div class="grid lg:grid-cols-3 gap-12">408<div class="text-center">409<div class="w-20 h-20 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">410<i class="ri-compass-3-line ri-2x"></i>411</div>412<h3 class="text-2xl font-bold text-primary mb-4 font-din">Экспертиза в экстремальных условиях</h3>413<p class="text-gray-600 leading-relaxed">15 лет опыта работы в Арктике, Сибири и других труднодоступных регионах. Знание специфики работы в условиях вечной мерзлоты, полярной ночи и экстремальных температур.</p>414</div>415<div class="text-center">416<div class="w-20 h-20 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">417<i class="ri-truck-line ri-2x"></i>418</div>419<h3 class="text-2xl font-bold text-primary mb-4 font-din">Собственный парк спецтехники</h3>420<p class="text-gray-600 leading-relaxed">Более 200 единиц специализированного транспорта: вездеходы, снегоходы, арктические модули, тяжеловозы. Все машины адаптированы для работы в экстремальных условиях.</p>421</div>422<div class="text-center">423<div class="w-20 h-20 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">424<i class="ri-customer-service-2-line ri-2x"></i>425</div>426<h3 class="text-2xl font-bold text-primary mb-4 font-din">Круглосуточная поддержка</h3>427<p class="text-gray-600 leading-relaxed">Диспетчерская служба работает 24/7/365. Спутниковый мониторинг всех грузов в реальном времени. Экстренное реагирование на любые изменения ситуации.</p>428</div>429</div>430</div>431</section>432<section class="py-20 bg-white">433<div class="max-w-7xl mx-auto px-6 lg:px-8">434<div class="text-center mb-16">435<h2 class="text-4xl font-bold text-primary mb-4 font-din">Кейсы успешных проектов</h2>436<p class="text-xl text-gray-600 max-w-3xl mx-auto">Реальные примеры решения сложных логистических задач в экстремальных условиях</p>437</div>438<div class="grid lg:grid-cols-3 gap-8 mb-12">439<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">440<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20oil%20drilling%20equipment%20delivery%20convoy%20of%20heavy%20trucks%20navigating%20through%20siberian%20tundra%20extreme%20winter%20conditions%20industrial%20logistics%20operation%20professional%20photography&width=400&height=240&seq=case-arctic1&orientation=landscape')"></div>441<div class="p-6">442<div class="text-sm text-gray-500 mb-2">Ямало-Ненецкий АО • 2024</div>443<h3 class="text-xl font-bold text-primary mb-3 font-din">Доставка бурового оборудования</h3>444<p class="text-gray-600 text-sm leading-relaxed mb-4">Транспортировка 450 тонн оборудования для нефтяной платформы в условиях арктической зимы при температуре -45°C. Маршрут 1200 км по зимникам.</p>445<div class="text-xs text-gray-500">Срок: 18 дней • Расстояние: 1200 км</div>446</div>447</div>448<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">449<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=emergency%20evacuation%20helicopters%20and%20all-terrain%20vehicles%20rescuing%20personnel%20from%20remote%20mining%20facility%20crisis%20management%20stormy%20weather%20professional%20rescue%20operation&width=400&height=240&seq=case-evacuation1&orientation=landscape')"></div>450<div class="p-6">451<div class="text-sm text-gray-500 mb-2">Камчатка • 2024</div>452<h3 class="text-xl font-bold text-primary mb-3 font-din">Экстренная эвакуация персонала</h3>453<p class="text-gray-600 text-sm leading-relaxed mb-4">Организация эвакуации 120 человек с удаленного горнодобывающего объекта в течение 8 часов в условиях шторма и нулевой видимости.</p>454<div class="text-xs text-gray-500">Срок: 8 часов • Персонал: 120 человек</div>455</div>456</div>457<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">458<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=military%20convoy%20alternative%20route%20through%20mountain%20pass%20avoiding%20conflict%20zone%20armored%20vehicles%20secure%20logistics%20operation%20professional%20military%20transport&width=400&height=240&seq=case-bypass1&orientation=landscape')"></div>459<div class="p-6">460<div class="text-sm text-gray-500 mb-2">Приграничный регион • 2023</div>461<h3 class="text-xl font-bold text-primary mb-3 font-din">Обход конфликтной зоны</h3>462<p class="text-gray-600 text-sm leading-relaxed mb-4">Доставка гуманитарной помощи в обход активной зоны конфликта через альтернативный маршрут протяженностью 2400 км с полным сопровождением.</p>463<div class="text-xs text-gray-500">Срок: 12 дней • Груз: 80 тонн</div>464</div>465</div>466<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">467<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=satellite%20communication%20installation%20team%20setting%20up%20equipment%20in%20remote%20arctic%20research%20station%20professional%20telecommunications%20infrastructure%20extreme%20polar%20conditions&width=400&height=240&seq=case-satellite1&orientation=landscape')"></div>468<div class="p-6">469<div class="text-sm text-gray-500 mb-2">Северный полюс • 2023</div>470<h3 class="text-xl font-bold text-primary mb-3 font-din">Развертывание связи на станции</h3>471<p class="text-gray-600 text-sm leading-relaxed mb-4">Установка спутниковой связи и систем мониторинга на дрейфующей полярной исследовательской станции с доставкой оборудования вертолетом.</p>472<div class="text-xs text-gray-500">Срок: 5 дней • Оборудование: 12 тонн</div>473</div>474</div>475<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">476<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=forest%20fire%20emergency%20response%20firefighting%20equipment%20delivery%20specialized%20vehicles%20through%20smoke%20and%20flames%20crisis%20logistics%20emergency%20services&width=400&height=240&seq=case-fire1&orientation=landscape')"></div>477<div class="p-6">478<div class="text-sm text-gray-500 mb-2">Красноярский край • 2023</div>479<h3 class="text-xl font-bold text-primary mb-3 font-din">Доставка в зону лесных пожаров</h3>480<p class="text-gray-600 text-sm leading-relaxed mb-4">Экстренная доставка противопожарного оборудования и материалов в зону активного горения лесов с использованием специальной защищенной техники.</p>481<div class="text-xs text-gray-500">Срок: 6 часов • Груз: 25 тонн</div>482</div>483</div>484<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg">485<div class="h-48 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=medical%20supplies%20delivery%20to%20remote%20village%20helicopter%20landing%20in%20snowy%20mountains%20emergency%20humanitarian%20aid%20arctic%20conditions%20professional%20medical%20logistics&width=400&height=240&seq=case-medical1&orientation=landscape')"></div>486<div class="p-6">487<div class="text-sm text-gray-500 mb-2">Чукотка • 2022</div>488<h3 class="text-xl font-bold text-primary mb-3 font-din">Доставка медикаментов в отрезанный поселок</h3>489<p class="text-gray-600 text-sm leading-relaxed mb-4">Экстренная доставка жизненно важных медикаментов и медицинского оборудования в поселок, отрезанный метелью на 3 недели.</p>490<div class="text-xs text-gray-500">Срок: 4 часа • Груз: 2 тонны</div>491</div>492</div>493</div>494</div>495</section>496<section class="py-20 bg-primary text-white">497<div class="max-w-7xl mx-auto px-6 lg:px-8">498<div class="text-center mb-16">499<h2 class="text-4xl font-bold mb-4 font-din">Наши достижения</h2>500<p class="text-xl text-gray-300 max-w-3xl mx-auto">Цифры, которые говорят о нашем опыте и надежности</p>501</div>502<div class="grid lg:grid-cols-4 gap-8">503<div class="text-center">504<div class="text-5xl font-bold mb-2 font-['DIN Pro']" id="projects-counter">847</div>505<div class="text-gray-300 uppercase tracking-wider text-sm">Успешных проектов</div>506</div>507<div class="text-center">508<div class="text-5xl font-bold mb-2 font-['DIN Pro']" id="distance-counter">2.4</div>509<div class="text-gray-300 uppercase tracking-wider text-sm">Млн км в экстремальных условиях</div>510</div>511<div class="text-center">512<div class="text-5xl font-bold mb-2 font-['DIN Pro']" id="success-counter">99.2</div>513<div class="text-gray-300 uppercase tracking-wider text-sm">% выполнения в срок</div>514</div>515<div class="text-center">516<div class="text-5xl font-bold mb-2 font-['DIN Pro']" id="regions-counter">89</div>517<div class="text-gray-300 uppercase tracking-wider text-sm">Регионов присутствия</div>518</div>519</div>520</div>521</section>522<section class="py-20 bg-gray-50">523<div class="max-w-4xl mx-auto px-6 lg:px-8">524<div class="text-center mb-12">525<h2 class="text-4xl font-bold text-primary mb-4 font-din">Заказать консультацию</h2>526<p class="text-xl text-gray-600">Расскажите о вашей задаче, и мы предложим оптимальное решение</p>527</div>528<form class="bg-white rounded-2xl p-8 shadow-lg">529<div class="grid md:grid-cols-2 gap-6 mb-6">530<div>531<label class="block text-gray-700 font-medium mb-2">Имя *</label>532<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Ваше имя" required>533</div>534<div>535<label class="block text-gray-700 font-medium mb-2">Компания</label>536<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Название компании">537</div>538</div>539<div class="grid md:grid-cols-2 gap-6 mb-6">540<div>541<label class="block text-gray-700 font-medium mb-2">Телефон *</label>542<input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="+7 (___) ___-__-__" required>543</div>544<div>545<label class="block text-gray-700 font-medium mb-2">Email *</label>546<input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="email@company.ru" required>547</div>548</div>549<div class="mb-6">550<label class="block text-gray-700 font-medium mb-2">Тип услуги</label>551<div class="relative">552<button type="button" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm text-left bg-white flex items-center justify-between" id="service-select">553<span>Выберите тип услуги</span>554<div class="w-5 h-5 flex items-center justify-center">555<i class="ri-arrow-down-s-line"></i>556</div>557</button>558<div class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-lg shadow-lg mt-1 hidden z-10" id="service-dropdown">559<div class="p-2">560<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="regular">Обычная логистика</div>561<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="bypass">Доставка в обход конфликтных зон</div>562<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="arctic">Арктические поставки</div>563<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="specialized">Специализированный транспорт</div>564<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="emergency">Экстренная логистика</div>565<div class="px-3 py-2 hover:bg-gray-50 cursor-pointer rounded text-sm" data-value="legal">Юридическая помощь с Автодор</div>566</div>567</div>568</div>569</div>570<div class="mb-6">571<label class="block text-gray-700 font-medium mb-2">Описание задачи *</label>572<textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm resize-none" placeholder="Опишите детали вашей задачи: тип груза, маршрут, сроки, особые требования..." required></textarea>573</div>574<div class="mb-8">575<label class="flex items-start">576<input type="checkbox" class="mt-1 mr-3 w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary" required>577<span class="text-sm text-gray-600 leading-relaxed">Согласен на обработку персональных данных в соответствии с <a href="#" class="text-primary hover:underline">политикой конфиденциальности</a></span>578</label>579</div>580<button type="submit" class="w-full bg-primary text-white py-4 !rounded-button hover:bg-gray-800 transition-colors font-medium text-lg whitespace-nowrap">581Отправить заявку582</button>583</form>584</div>585</section>586<section class="py-20 bg-white">587<div class="max-w-7xl mx-auto px-6 lg:px-8">588<div class="text-center mb-16">589<h2 class="text-4xl font-bold text-primary mb-4 font-din">Контактная информация</h2>590<p class="text-xl text-gray-600">Мы всегда готовы помочь решить вашу задачу</p>591</div>592<div class="grid lg:grid-cols-3 gap-12">593<div class="text-center">594<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">595<i class="ri-map-pin-line ri-2x"></i>596</div>597<h3 class="text-xl font-bold text-primary mb-4 font-din">Офисы</h3>598<div class="space-y-3 text-gray-600">599<div>600<div class="font-medium">Москва</div>601<div class="text-sm">ул. Тверская, 15, стр. 1</div>602</div>603<div>604<div class="font-medium">Мурманск</div>605<div class="text-sm">пр. Ленина, 82</div>606</div>607<div>608<div class="font-medium">Норильск</div>609<div class="text-sm">ул. Талнахская, 24</div>610</div>611</div>612</div>613<div class="text-center">614<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">615<i class="ri-phone-line ri-2x"></i>616</div>617<h3 class="text-xl font-bold text-primary mb-4 font-din">Телефоны</h3>618<div class="space-y-3 text-gray-600">619<div>620<div class="font-medium">Общий отдел</div>621<div class="text-sm">+7 (495) 123-45-67</div>622</div>623<div>624<div class="font-medium">Экстренная связь</div>625<div class="text-sm text-red-600">+7 (800) 911-24-7</div>626</div>627<div>628<div class="font-medium">Диспетчерская</div>629<div class="text-sm">+7 (495) 123-45-68</div>630</div>631</div>632</div>633<div class="text-center">634<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-2xl mx-auto mb-6">635<i class="ri-mail-line ri-2x"></i>636</div>637<h3 class="text-xl font-bold text-primary mb-4 font-din">Email и режим работы</h3>638<div class="space-y-3 text-gray-600">639<div>640<div class="font-medium">info@severnyuzel.ru</div>641<div class="text-sm">Общие вопросы</div>642</div>643<div>644<div class="font-medium">crisis@severnyuzel.ru</div>645<div class="text-sm">Экстренные ситуации</div>646</div>647<div>648<div class="font-medium">Работаем 24/7/365</div>649<div class="text-sm">Круглосуточная поддержка</div>650</div>651</div>652</div>653</div>654</div>655</section>656</main>657<footer class="bg-white border-t border-gray-100 py-16">658<div class="max-w-7xl mx-auto px-6 lg:px-8">659<div class="grid lg:grid-cols-4 gap-12">660<div class="lg:col-span-2">661<div class="text-2xl font-bold text-primary mb-4 font-['Coolvetica']">Северный Узел</div>662<p class="text-gray-600 mb-6 leading-relaxed max-w-md">663Кризисная логистика, поставка спутниковой техники и антикризисный консалтинг для решения самых сложных задач в экстремальных условиях.664</p>665<div class="text-sm text-gray-500">666© 2024 Северный Узел. Все права защищены.667</div>668</div>669<div>670<h3 class="text-lg font-bold text-primary mb-4 font-din">Услуги</h3>671<ul class="space-y-3">672<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Обычная логистика</a></li>673<li><a href="#" class="text-primary font-medium">Кризисная логистика</a></li>674<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Спецтехника</a></li>675<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Связь и мониторинг</a></li>676</ul>677</div>678<div>679<h3 class="text-lg font-bold text-primary mb-4 font-din">Контакты</h3>680<ul class="space-y-3">681<li class="text-gray-600">+7 (495) 123-45-67</li>682<li class="text-gray-600">info@severnyuzel.ru</li>683<li class="text-red-600 font-medium">+7 (800) 911-24-7</li>684<li class="text-gray-600">Экстренная связь 24/7</li>685</ul>686</div>687</div>688</div>689</footer>690<script id="statistics-counter">691document.addEventListener('DOMContentLoaded', function() {692const counters = [693{id: 'projects-counter', target: 847, suffix: ''},694{id: 'distance-counter', target: 2.4, suffix: '', decimals: 1},695{id: 'success-counter', target: 99.2, suffix: '', decimals: 1},696{id: 'regions-counter', target: 89, suffix: ''}697];698function animateCounter(counter) {699const element = document.getElementById(counter.id);700if (!element) return;701let current = 0;702const increment = counter.target / 100;703const timer = setInterval(() => {704current += increment;705if (current >= counter.target) {706current = counter.target;707clearInterval(timer);708}709if (counter.decimals) {710element.textContent = current.toFixed(counter.decimals) + counter.suffix;711} else {712element.textContent = Math.floor(current) + counter.suffix;713}714}, 20);715}716const observer = new IntersectionObserver((entries) => {717entries.forEach(entry => {718if (entry.isIntersecting) {719counters.forEach(animateCounter);720observer.disconnect();721}722});723});724const statsSection = document.querySelector('#projects-counter').closest('section');725if (statsSection) {726observer.observe(statsSection);727}728});729</script>730<script id="service-dropdown">731document.addEventListener('DOMContentLoaded', function() {732const selectButton = document.getElementById('service-select');733const dropdown = document.getElementById('service-dropdown');734const options = dropdown.querySelectorAll('[data-value]');735selectButton.addEventListener('click', function() {736dropdown.classList.toggle('hidden');737});738options.forEach(option => {739option.addEventListener('click', function() {740const value = this.getAttribute('data-value');741const text = this.textContent;742selectButton.querySelector('span').textContent = text;743dropdown.classList.add('hidden');744});745});746document.addEventListener('click', function(e) {747if (!selectButton.contains(e.target) && !dropdown.contains(e.target)) {748dropdown.classList.add('hidden');749}750});751});752</script>753<script id="form-validation">754document.addEventListener('DOMContentLoaded', function() {755const form = document.querySelector('form');756const phoneInput = form.querySelector('input[type="tel"]');757phoneInput.addEventListener('input', function() {758let value = this.value.replace(/\D/g, '');759if (value.startsWith('7')) {760value = value.substring(1);761}762if (value.length > 0) {763value = value.substring(0, 10);764let formatted = '+7 (';765if (value.length > 0) {766formatted += value.substring(0, 3);767}768if (value.length >= 4) {769formatted += ') ' + value.substring(3, 6);770}771if (value.length >= 7) {772formatted += '-' + value.substring(6, 8);773}774if (value.length >= 9) {775formatted += '-' + value.substring(8, 10);776}777this.value = formatted;778}779});780form.addEventListener('submit', function(e) {781e.preventDefault();782alert('Спасибо за заявку! Мы свяжемся с вами в ближайшее время.');783});784});785</script>786<script id="dropdown-navigation">787document.addEventListener('DOMContentLoaded', function() {788const navItem = document.querySelector('.nav-item');789const dropdown = navItem.querySelector('.dropdown');790const dropdownLink = navItem.querySelector('a');791let isDropdownOpen = false;792dropdownLink.addEventListener('click', function(e) {793e.preventDefault();794isDropdownOpen = !isDropdownOpen;795if (isDropdownOpen) {796dropdown.style.opacity = '1';797dropdown.style.visibility = 'visible';798dropdown.style.transform = 'translateY(0)';799} else {800dropdown.style.opacity = '0';801dropdown.style.visibility = 'hidden';802dropdown.style.transform = 'translateY(-10px)';803}804});805document.addEventListener('click', function(e) {806if (!navItem.contains(e.target)) {807isDropdownOpen = false;808dropdown.style.opacity = '0';809dropdown.style.visibility = 'hidden';810dropdown.style.transform = 'translateY(-10px)';811}812});813});814</script>815</body>816</html>