/* ============================================
   🎨 ЕДИНЫЙ ФАЙЛ РЕАЛИСТИЧНЫХ ЗНАЧКОВ
   Сайт: keys86.ru
   Подключение: <link rel="stylesheet" href="icon/icons.css">
   Все значки имеют: градиенты, объём, блики, анимации
   ============================================ */


/* ============================================
🏠 ДОМИК — Главная страница (золотой)
============================================ */
.icon-home {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: homeFloat 3.2s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(255, 190, 40, 0.55))
drop-shadow(0 2px 3px rgba(110, 60, 0, 0.45));
}
.icon-home i {
font-size: 1.2em;
background: linear-gradient(135deg, #fff8d0 0%, #ffe68a 20%, #f6c445 45%, #d99a20 70%, #9c6410 92%, #754707 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 2;
filter: drop-shadow(0 1px 0 rgba(255, 246, 205, 0.9)) drop-shadow(0 -1px 1px rgba(90, 50, 0, 0.55));
}
.icon-home::before {
content: '';
position: absolute;
top: 15%; left: 15%;
width: 35%; height: 40%;
background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
border-radius: 50%;
filter: blur(1.5px);
pointer-events: none;
z-index: 3;
}
.icon-home::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 70%);
background-size: 250% 250%;
background-position: 120% 0;
-webkit-mask: linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0);
-webkit-mask-composite: source-in;
mask-composite: intersect;
animation: homeShine 3.5s ease-in-out infinite;
pointer-events: none;
z-index: 4;
border-radius: 20%;
}
@keyframes homeFloat {
0%, 100% { transform: translateY(0) rotate(-5deg); filter: drop-shadow(0 0 3px rgba(255,190,40,.55)) drop-shadow(0 2px 3px rgba(110,60,0,.45)); }
50% { transform: translateY(-2px) rotate(5deg); filter: drop-shadow(0 0 6px rgba(255,205,70,.75)) drop-shadow(0 2px 4px rgba(110,60,0,.55)); }
}
@keyframes homeShine {
0%, 100% { background-position: 120% 0; opacity: .3; }
50% { background-position: -20% 0; opacity: .9; }
}


/* ============================================
🔑 ЗОЛОТОЙ КЛЮЧ (универсальные ключи)
============================================ */
.icon-key-gold {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: keySwing 3.5s ease-in-out infinite;
transform-origin: 20% 20%;
filter:
drop-shadow(0 0 3px rgba(255, 190, 40, 0.55))
drop-shadow(0 2px 3px rgba(110, 60, 0, 0.45));
}
.icon-key-gold i {
font-size: 1.2em;
background: linear-gradient(135deg, #fff8d0 0%, #ffe68a 20%, #f6c445 45%, #d99a20 70%, #9c6410 92%, #754707 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 2;
filter: drop-shadow(0 1px 0 rgba(255, 246, 205, 0.9)) drop-shadow(0 -1px 1px rgba(90, 50, 0, 0.55));
}
.icon-key-gold::before {
content: '';
position: absolute;
top: 15%; left: 15%;
width: 35%; height: 40%;
background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
border-radius: 50%;
filter: blur(1.5px);
pointer-events: none;
z-index: 3;
}
.icon-key-gold::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 70%);
background-size: 250% 250%;
background-position: 120% 0;
-webkit-mask: linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0);
-webkit-mask-composite: source-in;
mask-composite: intersect;
animation: keyShine 3.5s ease-in-out infinite;
pointer-events: none;
z-index: 4;
border-radius: 20%;
}
@keyframes keySwing {
0%, 100% { transform: rotate(-12deg); filter: drop-shadow(0 0 3px rgba(255,190,40,.55)) drop-shadow(0 2px 3px rgba(110,60,0,.45)); }
50% { transform: rotate(-4deg); filter: drop-shadow(0 0 6px rgba(255,205,70,.75)) drop-shadow(0 2px 4px rgba(110,60,0,.55)); }
}
@keyframes keyShine {
0%, 100% { background-position: 120% 0; opacity: .3; }
50% { background-position: -20% 0; opacity: .9; }
}


/* ============================================
💻 НОУТБУК — Ремонт ПК (фиолетовый)
============================================ */
.icon-laptop {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: laptopFloat 3.2s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(168, 85, 247, 0.6))
drop-shadow(0 2px 3px rgba(88, 28, 135, 0.45));
}
.icon-laptop i {
font-size: 1.2em;
background: linear-gradient(135deg, #f3e8ff 0%, #c084fc 30%, #9333ea 60%, #581c87 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(240, 220, 255, 0.9)) drop-shadow(0 -1px 1px rgba(60, 20, 100, 0.6));
}
@keyframes laptopFloat {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(168,85,247,.6)) drop-shadow(0 2px 3px rgba(88,28,135,.45)); }
50% { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(192,132,252,.85)) drop-shadow(0 2px 4px rgba(88,28,135,.6)); }
}


/* ============================================
🎬 ВИДЕОКАМЕРА — Оцифровка видео (розовая)
============================================ */
.icon-video {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: videoPulse 2.5s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(236, 72, 153, 0.6))
drop-shadow(0 2px 3px rgba(131, 24, 67, 0.45));
}
.icon-video i {
font-size: 1.2em;
background: linear-gradient(135deg, #fce7f3 0%, #f472b6 30%, #db2777 60%, #831843 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 220, 240, 0.9)) drop-shadow(0 -1px 1px rgba(80, 15, 50, 0.6));
}
@keyframes videoPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(236,72,153,.6)) drop-shadow(0 2px 3px rgba(131,24,67,.45)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(244,114,182,.85)) drop-shadow(0 2px 4px rgba(131,24,67,.6)); }
}


/* ============================================
🔧 МИКРОЧИП — Электроника (зелёный)
============================================ */
.icon-chip {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: chipGlow 3s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(34, 197, 94, 0.6))
drop-shadow(0 2px 3px rgba(20, 83, 45, 0.45));
}
.icon-chip i {
font-size: 1.2em;
background: linear-gradient(135deg, #dcfce7 0%, #4ade80 30%, #16a34a 60%, #14532d 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 255, 220, 0.9)) drop-shadow(0 -1px 1px rgba(15, 60, 30, 0.6));
}
@keyframes chipGlow {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(34,197,94,.6)) drop-shadow(0 2px 3px rgba(20,83,45,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(74,222,128,.85)) drop-shadow(0 2px 4px rgba(20,83,45,.6)); }
}


/* ============================================
📟 ТАХОГРАФ (оранжевый)
============================================ */
.icon-tachograph {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: tachographPulse 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(249, 115, 22, 0.6))
drop-shadow(0 2px 3px rgba(124, 45, 18, 0.45));
}
.icon-tachograph i {
font-size: 1.2em;
background: linear-gradient(135deg, #ffedd5 0%, #fb923c 30%, #ea580c 60%, #7c2d12 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 230, 200, 0.9)) drop-shadow(0 -1px 1px rgba(80, 30, 10, 0.6));
}
@keyframes tachographPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(249,115,22,.6)) drop-shadow(0 2px 3px rgba(124,45,18,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(251,146,60,.85)) drop-shadow(0 2px 4px rgba(124,45,18,.6)); }
}


/* ============================================
🛒 КОРЗИНА — Магазин (красная)
============================================ */
.icon-cart {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: cartBounce 2.5s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(239, 68, 68, 0.6))
drop-shadow(0 2px 3px rgba(127, 29, 29, 0.45));
}
.icon-cart i {
font-size: 1.2em;
background: linear-gradient(135deg, #fee2e2 0%, #f87171 30%, #dc2626 60%, #7f1d1d 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 220, 220, 0.9)) drop-shadow(0 -1px 1px rgba(80, 15, 15, 0.6));
}
@keyframes cartBounce {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(239,68,68,.6)) drop-shadow(0 2px 3px rgba(127,29,29,.45)); }
50% { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(248,113,113,.85)) drop-shadow(0 2px 4px rgba(127,29,29,.6)); }
}


/* ============================================
❓ ВОПРОС — FAQ (синий)
============================================ */
.icon-question {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: questionPulse 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-question i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes questionPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
💡 ЛАМПОЧКА — Идея/Вывод (жёлтая)
============================================ */
.icon-bulb {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: bulbGlow 2.5s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(250, 204, 21, 0.7))
drop-shadow(0 2px 3px rgba(133, 77, 14, 0.5));
}
.icon-bulb i {
font-size: 1.2em;
background: linear-gradient(135deg, #fef9c3 0%, #fde047 30%, #eab308 60%, #854d0e 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 250, 220, 0.9)) drop-shadow(0 -1px 1px rgba(80, 50, 10, 0.6));
}
@keyframes bulbGlow {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(250,204,21,.7)) drop-shadow(0 2px 3px rgba(133,77,14,.5)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(253,224,71,.95)) drop-shadow(0 2px 4px rgba(133,77,14,.7)); }
}


/* ============================================
📞 ТЕЛЕФОН — Контакты (синий)
============================================ */
.icon-phone {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: phoneRing 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-phone i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes phoneRing {
0%, 100% { transform: rotate(-8deg); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
25% { transform: rotate(8deg); filter: drop-shadow(0 0 6px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
50% { transform: rotate(-8deg); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
75% { transform: rotate(8deg); filter: drop-shadow(0 0 6px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
⏰ ЧАСЫ — Время работы (синий)
============================================ */
.icon-clock {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: clockTick 3s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-clock i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes clockTick {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
📍 МАРКЕР — Адрес (красный)
============================================ */
.icon-marker {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: markerBounce 2.5s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(239, 68, 68, 0.6))
drop-shadow(0 2px 3px rgba(127, 29, 29, 0.45));
}
.icon-marker i {
font-size: 1.2em;
background: linear-gradient(135deg, #fee2e2 0%, #f87171 30%, #dc2626 60%, #7f1d1d 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 220, 220, 0.9)) drop-shadow(0 -1px 1px rgba(80, 15, 15, 0.6));
}
@keyframes markerBounce {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(239,68,68,.6)) drop-shadow(0 2px 3px rgba(127,29,29,.45)); }
50% { transform: translateY(-3px); filter: drop-shadow(0 0 7px rgba(248,113,113,.85)) drop-shadow(0 2px 4px rgba(127,29,29,.6)); }
}


/* ============================================
🛡️ ЩИТ — Защита/Гарантия (индиго)
============================================ */
.icon-shield {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: shieldGlow 3s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(90, 90, 220, 0.6))
drop-shadow(0 2px 3px rgba(30, 30, 100, 0.45));
}
.icon-shield i {
font-size: 1.2em;
background: linear-gradient(135deg, #c7d2fe 0%, #818cf8 30%, #4f46e5 60%, #312e81 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 220, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 20, 80, 0.6));
}
@keyframes shieldGlow {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(90,90,220,.6)) drop-shadow(0 2px 3px rgba(30,30,100,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(120,120,255,.85)) drop-shadow(0 2px 4px rgba(30,30,100,.6)); }
}


/* ============================================
% ПРОЦЕНТ — Скидки (зелёный)
============================================ */
.icon-percent {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: percentPulse 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(34, 197, 94, 0.6))
drop-shadow(0 2px 3px rgba(20, 83, 45, 0.45));
}
.icon-percent i {
font-size: 1.2em;
background: linear-gradient(135deg, #dcfce7 0%, #4ade80 30%, #16a34a 60%, #14532d 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 255, 220, 0.9)) drop-shadow(0 -1px 1px rgba(15, 60, 30, 0.6));
}
@keyframes percentPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(34,197,94,.6)) drop-shadow(0 2px 3px rgba(20,83,45,.45)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(74,222,128,.85)) drop-shadow(0 2px 4px rgba(20,83,45,.6)); }
}


/* ============================================
⚖️ ВЕСЫ — Закон/Правовые аспекты (синий)
============================================ */
.icon-scale {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: scaleSwing 3s ease-in-out infinite;
transform-origin: center top;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-scale i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes scaleSwing {
0%, 100% { transform: rotate(-5deg); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: rotate(5deg); filter: drop-shadow(0 0 7px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
💾 ЖЁСТКИЙ ДИСК — Восстановление данных (голубой)
============================================ */
.icon-hdd {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: hddPulse 3s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(14, 165, 233, 0.6))
drop-shadow(0 2px 3px rgba(12, 74, 110, 0.45));
}
.icon-hdd i {
font-size: 1.2em;
background: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 30%, #0284c7 60%, #0c4a6e 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 240, 255, 0.9)) drop-shadow(0 -1px 1px rgba(10, 50, 80, 0.6));
}
@keyframes hddPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(14,165,233,.6)) drop-shadow(0 2px 3px rgba(12,74,110,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(56,189,248,.85)) drop-shadow(0 2px 4px rgba(12,74,110,.6)); }
}


/* ============================================
🔧 ИНСТРУМЕНТЫ — Сборка ПК (синий)
============================================ */
.icon-tools {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: toolsSwing 2.8s ease-in-out infinite;
transform-origin: center center;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-tools i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes toolsSwing {
0%, 100% { transform: rotate(-8deg); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: rotate(8deg); filter: drop-shadow(0 0 6px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
🔄 ОБМЕН — Перенос данных (оранжевый)
============================================ */
.icon-exchange {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: exchangePulse 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(255, 140, 50, 0.6))
drop-shadow(0 2px 3px rgba(120, 50, 0, 0.45));
}
.icon-exchange i {
font-size: 1.2em;
background: linear-gradient(135deg, #ffe0b3 0%, #ff9a3c 30%, #ff6a00 60%, #c04000 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 220, 180, 0.9)) drop-shadow(0 -1px 1px rgba(100, 30, 0, 0.5));
}
@keyframes exchangePulse {
0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 3px rgba(255,140,50,.6)) drop-shadow(0 2px 3px rgba(120,50,0,.45)); }
50% { transform: scale(1.08) rotate(8deg); filter: drop-shadow(0 0 6px rgba(255,160,70,.85)) drop-shadow(0 2px 4px rgba(120,50,0,.55)); }
}


/* ============================================
📡 WI-FI — Беспроводная связь (синий)
============================================ */
.icon-wifi {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: wifiPulse 2.5s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-wifi i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes wifiPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
⚡ МОЛНИЯ — Быстро/Энергия (жёлтая)
============================================ */
.icon-bolt {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: boltFlash 1.8s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(250, 204, 21, 0.7))
drop-shadow(0 2px 3px rgba(133, 77, 14, 0.5));
}
.icon-bolt i {
font-size: 1.2em;
background: linear-gradient(135deg, #fef9c3 0%, #fde047 30%, #eab308 60%, #854d0e 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 250, 220, 0.9)) drop-shadow(0 -1px 1px rgba(80, 50, 10, 0.6));
}
@keyframes boltFlash {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(250,204,21,.7)) drop-shadow(0 2px 3px rgba(133,77,14,.5)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(253,224,71,.95)) drop-shadow(0 2px 4px rgba(133,77,14,.7)); }
}


/* ============================================
📡 РАДИОВЫШКА — Удалённое изготовление (синяя)
============================================ */
.icon-tower {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: towerPulse 2.8s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-tower i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes towerPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
🏢 ЗДАНИЕ — Установщик/УК (синее)
============================================ */
.icon-building {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: buildingFloat 3.2s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(59, 130, 246, 0.6))
drop-shadow(0 2px 3px rgba(30, 58, 138, 0.45));
}
.icon-building i {
font-size: 1.2em;
background: linear-gradient(135deg, #dbeafe 0%, #60a5fa 30%, #2563eb 60%, #1e3a8a 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 235, 255, 0.9)) drop-shadow(0 -1px 1px rgba(20, 40, 100, 0.6));
}
@keyframes buildingFloat {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(59,130,246,.6)) drop-shadow(0 2px 3px rgba(30,58,138,.45)); }
50% { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(96,165,250,.85)) drop-shadow(0 2px 4px rgba(30,58,138,.6)); }
}


/* ============================================
📋 КОПИЯ — Дублирование (зелёная)
============================================ */
.icon-copy {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: copyFlip 3s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(34, 197, 94, 0.6))
drop-shadow(0 2px 3px rgba(20, 83, 45, 0.45));
}
.icon-copy i {
font-size: 1.2em;
background: linear-gradient(135deg, #dcfce7 0%, #4ade80 30%, #16a34a 60%, #14532d 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(220, 255, 220, 0.9)) drop-shadow(0 -1px 1px rgba(15, 60, 30, 0.6));
}
@keyframes copyFlip {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(34,197,94,.6)) drop-shadow(0 2px 3px rgba(20,83,45,.45)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(74,222,128,.85)) drop-shadow(0 2px 4px rgba(20,83,45,.6)); }
}


/* ============================================
👤 ПОЛЬЗОВАТЕЛЬ — Конфиденциальность (фиолетовый)
============================================ */
.icon-user {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
position: relative;
animation: userFloat 3.2s ease-in-out infinite;
filter:
drop-shadow(0 0 3px rgba(168, 85, 247, 0.6))
drop-shadow(0 2px 3px rgba(88, 28, 135, 0.45));
}
.icon-user i {
font-size: 1.2em;
background: linear-gradient(135deg, #f3e8ff 0%, #c084fc 30%, #9333ea 60%, #581c87 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(240, 220, 255, 0.9)) drop-shadow(0 -1px 1px rgba(60, 20, 100, 0.6));
}
@keyframes userFloat {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(168,85,247,.6)) drop-shadow(0 2px 3px rgba(88,28,135,.45)); }
50% { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(192,132,252,.85)) drop-shadow(0 2px 4px rgba(88,28,135,.6)); }
}


/* ============================================
©️ КОПИРАЙТ — Интеллектуальная собственность (золотой)
============================================ */
.icon-copyright {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4em;
height: 1.4em;
margin-right: 0.45rem;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #fff8d0 0%, #ffe68a 20%, #f6c445 45%, #d99a20 70%, #9c6410 92%, #754707 100%);
box-shadow:
inset 0 0 0 2px #ffe9a3,
inset 0 0 0 3px #b57c17,
inset 0 -3px 5px rgba(112,64,0,.55),
inset 0 3px 5px rgba(255,255,255,.65),
0 2px 4px rgba(80,45,0,.45),
0 0 10px rgba(255,200,60,.45);
animation: copyrightSpin 4s ease-in-out infinite;
}
.icon-copyright i {
font-size: 0.85em;
color: #8a5608;
text-shadow: 0 1px 0 rgba(255,246,205,.95), 0 -1px 1px rgba(90,50,0,.55);
}
@keyframes copyrightSpin {
0%, 100% { transform: rotate(0deg); filter: drop-shadow(0 0 3px rgba(255,190,40,.35)); }
50% { transform: rotate(15deg); filter: drop-shadow(0 0 7px rgba(255,205,70,.65)); }
}


/* ============================================
🔥 КОСТЁР — Популярная услуга (двухслойный)
============================================ */
.icon-fire-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.3em;
height: 1.3em;
margin-right: 0.4rem;
filter: drop-shadow(0 0 4px rgba(255, 120, 0, 0.7)) drop-shadow(0 0 8px rgba(255, 60, 0, 0.5));
animation: fireFlicker 1.2s ease-in-out infinite;
transform-origin: center bottom;
}
.icon-fire-wrap .fire-base {
position: absolute;
font-size: 1.2em;
background: linear-gradient(180deg, #ff2d00 0%, #ff7a00 45%, #ffb300 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.icon-fire-wrap .fire-core {
position: absolute;
font-size: 0.7em;
top: 35%;
background: linear-gradient(180deg, #fff7a8 0%, #ffe14a 60%, #ffae00 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 2px rgba(255, 240, 150, 0.9));
}
@keyframes fireFlicker {
0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(255,120,0,.7)) drop-shadow(0 0 8px rgba(255,60,0,.5)); }
25% { transform: scale(1.05) rotate(1deg); filter: drop-shadow(0 0 6px rgba(255,150,0,.9)) drop-shadow(0 0 12px rgba(255,80,0,.7)); }
50% { transform: scale(0.98) rotate(-1deg); filter: drop-shadow(0 0 5px rgba(255,100,0,.8)) drop-shadow(0 0 10px rgba(255,50,0,.6)); }
75% { transform: scale(1.03) rotate(2deg); filter: drop-shadow(0 0 7px rgba(255,140,0,.85)) drop-shadow(0 0 11px rgba(255,70,0,.65)); }
}


/* ============================================
💰 МОНЕТА ₽ — Выгодная цена (золотая)
============================================ */
.coin-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.3em;
height: 1.3em;
margin-right: 0.45rem;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%,
#fff8d0 0%,
#ffe68a 20%,
#f6c445 45%,
#d99a20 70%,
#9c6410 92%,
#754707 100%);
box-shadow:
inset 0 0 0 2px #ffe9a3,
inset 0 0 0 3px #b57c17,
inset 0 -3px 5px rgba(112,64,0,.55),
inset 0 3px 5px rgba(255,255,255,.65),
0 2px 4px rgba(80,45,0,.45),
0 0 10px rgba(255,200,60,.45);
font-family: Arial, sans-serif;
font-weight: 900;
font-size: 0.82em;
line-height: 1;
color: #8a5608;
text-shadow: 0 1px 0 rgba(255,246,205,.95), 0 -1px 1px rgba(90,50,0,.55);
vertical-align: middle;
animation: coinFloat 3.2s ease-in-out infinite;
}
.coin-icon > span {
position: relative;
z-index: 2;
}
.coin-icon::before {
content: '';
position: absolute;
inset: 14%;
border-radius: 50%;
border: 1px solid rgba(139,84,8,.6);
background: radial-gradient(circle at 35% 30%,
rgba(255,244,190,.55),
rgba(240,180,50,.12) 60%,
rgba(150,90,10,.22));
box-shadow: inset 0 1px 2px rgba(255,255,255,.55), 0 1px 1px rgba(255,240,180,.55);
z-index: 1;
}
.coin-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(120deg,
rgba(255,255,255,0) 25%,
rgba(255,255,255,.8) 45%,
rgba(255,255,255,0) 65%);
background-size: 250% 250%;
background-position: 120% 0;
animation: coinShine 3.5s ease-in-out infinite;
pointer-events: none;
z-index: 3;
}
@keyframes coinFloat {
0%, 100% { transform: translateY(0) rotate(-8deg); filter: drop-shadow(0 0 3px rgba(255,190,40,.35)); }
50% { transform: translateY(-2px) rotate(-3deg); filter: drop-shadow(0 0 7px rgba(255,205,70,.65)); }
}
@keyframes coinShine {
0%, 100% { background-position: 120% 0; opacity: .25; }
50% { background-position: -20% 0; opacity: .85; }
}


/* ============================================
🏆 ОБЪЁМНЫЕ КНОПКИ НАВИГАЦИИ (используются на всех страницах)
============================================ */
.nav-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0.75rem 1.1rem;
border-radius: 14px;
font-weight: 800;
font-size: 13px;
line-height: 1.2;
text-align: center;
letter-spacing: 0.2px;
text-decoration: none;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
isolation: isolate;
background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(241,245,249,0.95) 50%, rgba(226,232,240,1) 100%);
color: #1e3a8a;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -2px 3px rgba(30,58,138,0.12),
0 2px 0 rgba(30,58,138,0.15),
0 4px 8px rgba(30,58,138,0.18),
0 8px 16px rgba(30,58,138,0.12);
border: 1px solid rgba(30,58,138,0.15);
}
.nav-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
border-radius: 14px 14px 50% 50% / 14px 14px 30% 30%;
pointer-events: none;
z-index: 1;
}
.nav-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(115deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
transition: left 0.7s ease;
pointer-events: none;
z-index: 2;
}
.nav-btn:hover::after { left: 150%; }
.nav-btn > * { position: relative; z-index: 3; }
.nav-btn:hover {
transform: translateY(-3px);
color: #1e40af;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(239,246,255,1) 50%, rgba(219,234,254,1) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -2px 3px rgba(30,58,138,0.15),
0 3px 0 rgba(30,58,138,0.18),
0 8px 16px rgba(59,130,246,0.35),
0 16px 32px rgba(30,58,138,0.2);
border-color: rgba(59,130,246,0.4);
}
.nav-btn:active {
transform: translateY(0px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 2px rgba(30,58,138,0.1),
0 1px 0 rgba(30,58,138,0.12),
0 2px 4px rgba(30,58,138,0.15);
}
.nav-btn:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }

/* 🏆 АКТИВНАЯ КНОПКА — ЗОЛОТАЯ МОНЕТА */
.nav-btn.active {
background: radial-gradient(circle at 30% 25%, #fff8d0 0%, #ffe68a 25%, #f6c445 55%, #d99a20 80%, #9c6410 100%);
color: #4a2c00;
border: 1px solid rgba(139,84,8,0.4);
box-shadow:
inset 0 0 0 2px rgba(255,233,163,0.7),
inset 0 0 0 3px rgba(181,124,23,0.5),
inset 0 -3px 5px rgba(112,64,0,0.55),
inset 0 3px 5px rgba(255,255,255,0.65),
0 2px 4px rgba(80,45,0,0.45),
0 0 12px rgba(255,200,60,0.55),
0 8px 20px rgba(139,84,8,0.3);
text-shadow: 0 1px 0 rgba(255,246,205,0.95), 0 -1px 1px rgba(90,50,0,0.4);
animation: activeCoinGlow 3s ease-in-out infinite;
}
.nav-btn.active::before {
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}
.nav-btn.active:hover {
transform: translateY(-3px);
background: radial-gradient(circle at 30% 25%, #fffae0 0%, #ffeaa0 25%, #f8cc55 55%, #e0a828 80%, #a87015 100%);
box-shadow:
inset 0 0 0 2px rgba(255,233,163,0.8),
inset 0 0 0 3px rgba(181,124,23,0.6),
inset 0 -3px 5px rgba(112,64,0,0.6),
inset 0 3px 5px rgba(255,255,255,0.75),
0 3px 0 rgba(139,84,8,0.3),
0 0 18px rgba(255,215,80,0.8),
0 12px 28px rgba(139,84,8,0.4);
}
@keyframes activeCoinGlow {
0%, 100% {
box-shadow:
inset 0 0 0 2px rgba(255,233,163,0.7),
inset 0 0 0 3px rgba(181,124,23,0.5),
inset 0 -3px 5px rgba(112,64,0,0.55),
inset 0 3px 5px rgba(255,255,255,0.65),
0 2px 4px rgba(80,45,0,0.45),
0 0 12px rgba(255,200,60,0.55),
0 8px 20px rgba(139,84,8,0.3);
}
50% {
box-shadow:
inset 0 0 0 2px rgba(255,233,163,0.85),
inset 0 0 0 3px rgba(181,124,23,0.6),
inset 0 -3px 5px rgba(112,64,0,0.6),
inset 0 3px 5px rgba(255,255,255,0.75),
0 2px 4px rgba(80,45,0,0.5),
0 0 18px rgba(255,215,80,0.75),
0 8px 20px rgba(139,84,8,0.35);
}
}
.nav-btn i { font-size: 1.05em; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.nav-btn.active i { filter: drop-shadow(0 1px 1px rgba(139,84,8,0.4)); }
@media (min-width: 768px) {
.nav-btn { font-size: 14px; padding: 0.85rem 1.25rem; min-height: 56px; }
}