/* ===== RESET ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ===== BASE ===== */

html{ overflow-x:hidden; }

body{
    background: linear-gradient(135deg, #0f172a, #020617);
    color:#f5f5f5;
    font-family:'Montserrat',sans-serif;
    scroll-behavior:smooth;
    overflow-x:hidden;
    max-width:100%;
}

/* контейнер */

.container{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 15px;
}

/* =====================================================
   HERO SECTION
   ===================================================== */

.hero{

--x:50%;
--y:50%;

position:relative;

width:100%;
min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

background:transparent;  /*самый слой который мешал постоянно*/
overflow:hidden;

}

/* ===== HERO CONTENT ===== */

.hero-container{

position:relative;
z-index:auto;       /*было 2000 вроде сделал как только авто меню гамбургера появилось*/
pointer-events:auto; /*важно отвечает за клики и переключение курсора при наведении */

max-width:900px;
margin:0 auto;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;

gap:30px;
padding:0 20px;

}

.hero-grid,
.hero-scan-horizontal,
.hero-scan-vertical{
pointer-events:none !important;
}

/* =====================================================
   GRID BACKGROUND
   ===================================================== */

.hero-grid{

position:fixed;
inset:0;
z-index:-1;

background-image:
linear-gradient(rgba(0,120,255,0.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,120,255,0.35) 1px, transparent 1px);

background-size:80px 80px;

animation:gridMove 40s linear infinite;

/* неоновое свечение */

filter:
drop-shadow(0 0 6px rgba(0,120,255,0.6))
drop-shadow(0 0 12px rgba(0,120,255,0.4));

}

@keyframes gridMove{

0%{
background-position:0 0,0 0;
}

100%{
background-position:160px 160px,160px 160px; /* Значение должно быть кратно background-size (80px) */
}

}

/* =====================================================
   PARTICLES CANVAS
   ===================================================== */
#particles {
    position: fixed;   /* ВАЖНО */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;       /* под контентом влияет на частицы тоже */

    opacity: 1;
    /* canvas должен принимать клики */
    pointer-events: auto;
}


.hero.particles-active #particles{
opacity:1;
}


/* =====================================================
   SCAN LINES
   ===================================================== */

.hero-scan-horizontal,
.hero-scan-vertical{
opacity:1;

}

.hero.scan-active .hero-scan-horizontal{
opacity:0.4;
animation:scanHorizontal 45s ease-out forwards;
}

.hero.scan-active .hero-scan-vertical{
opacity:0.4;
animation:scanVertical 15s ease-out forwards;
}

/* горизонтальный сканер */

.hero-scan-horizontal{

position:absolute;

top:0;
left:0;

width:20%;
height:100%;

z-index:0;

pointer-events:none !important;

background:linear-gradient(
90deg,
transparent,
rgba(0,120,255,0.6),
transparent
);

filter:blur(6px);

animation:scanHorizontal 45s ease-in-out infinite;
opacity:0.35;

}

@keyframes scanHorizontal{

0%{transform:translateX(-150%);}
50%{transform:translateX(350%);}
100%{transform:translateX(-150%);}

}

/* вертикальный сканер */

.hero-scan-vertical{

position:absolute;

top:0;
left:0;

width:100%;
height:20%;

z-index:0;

pointer-events:none !important;

background:linear-gradient(
180deg,
transparent,
rgba(0,120,255,0.5),
transparent
);

filter:blur(6px);

animation:scanVertical 30s ease-in-out infinite;
opacity:0.35;

}

@keyframes scanVertical{

0%{transform:translateY(-150%);}
50%{transform:translateY(350%);}
100%{transform:translateY(-150%);}

}

/* =====================================================
   BUTTONS
   ===================================================== */

.btn{

padding:14px 28px;
border-radius:10px;

font-weight:600;
text-decoration:none;

}

/* синяя кнопка */

.btn-primary{

background:#3b82f6;
color:#fff;

transition:0.3s;

box-shadow:
0 0 10px rgba(59,130,246,0.6),
0 0 20px rgba(59,130,246,0.5),
0 0 40px rgba(59,130,246,0.3);

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:
0 0 20px rgba(59,130,246,1),
0 0 40px rgba(59,130,246,0.8),
0 0 80px rgba(59,130,246,0.6);

}

/* стеклянная кнопка */

.btn-glass{

background:rgba(59,130,246,0.15);
border:1px solid rgba(59,130,246,0.4);

color:#fff;

backdrop-filter:blur(8px);

box-shadow:
0 0 10px rgba(59,130,246,0.6),
0 0 20px rgba(59,130,246,0.5);

transition:0.3s;

}

.btn-glass:hover{
background:rgba(255,255,255,0.15);
}

/* =====================================================
   HERO STATS
   ===================================================== */

/* ===== STATS ===== */

.hero-stats{

display:flex;
justify-content:center;
align-items:center;

gap:80px;
flex-wrap:wrap;

margin-top:40px;

}

.stat{

display:flex;
flex-direction:column;
align-items:center;

}

.stat strong{

font-size:48px;
font-weight:700;

}

.stat span{

font-size:16px;
color:#9aa4b2;

margin-top:6px;

}

.hero-image img{
    width:500px;
}


h1,h2,h3{
    font-family:'Cormorant Garamond',serif;
    letter-spacing:1px;
}
h2{
    font-size: 38px;
}
section{padding:80px 0;}
.container{width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;}

.hero-subtitle {
    display: inline;           /* или inline-block, но тогда курсор будет рядом */
    white-space: pre-wrap;
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    background: transparent;
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;               /* высота как у буквы */
    background-color: currentColor;
    margin-left: 2px;
    vertical-align: baseline;  /* или middle, но baseline даст привязку к строке */
    animation: blink 1s step-end infinite;
}

/* При переносе строки курсор должен быть рядом с последним символом */

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.cursor.hidden {
    display: none;
}

/* ======================= */
/* Верхнее меню – синий неон */
/* ======================= */

	.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.25); /* прозрачный фон */
    backdrop-filter: blur(8px);
    box-shadow: 0 0 15px rgba(59,130,246,0.2); /* светлая синяя тень */
    z-index: 20; 
    transition: background 0.3s;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInMenu 1s forwards;
}

/* ======================= */
/* Логотип – центр + неоновая пульсация */
/* ======================= */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-decoration: none;
}

.logo-top {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3b82f6;
    opacity: 0.85;
    margin-bottom: 2px;
    text-align: center;
    text-shadow: 0 0 3px #3b82f6, 0 0 6px #60a5fa;
}

/* ======================= */
/* Логотип – пульсация + хаотичная тряска */
/* ======================= */
.logo-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;

    text-shadow: 0 0 3px #2563eb, 0 0 6px #3b82f6;

    animation: none;
}

/*для того когда разбили по буквам*/

/* ======================= */
/* БАЗА БУКВ */
/* ======================= */

.logo-main span {
    display: inline-block;
    color: #2563eb;
    text-shadow: 0 0 3px #2563eb, 0 0 6px #3b82f6;
    transition: all 0.15s ease;
}

/* ======================= */
/* СОСТОЯНИЯ ПЕРЕГОРАНИЯ */
/* ======================= */

/* мягкое моргание */
.logo-main .flicker-soft {
    opacity: 0.7;
}

/* быстрое моргание */
.logo-main .flicker-fast {
    opacity: 0.4;
}

/* почти выключено */
.logo-main .flicker-off {
    opacity: 0.1;
    color: #1e3a8a;
    text-shadow: none;
}

/* ======================= */
/* ПУЛЬС СВЕЧЕНИЯ (для всего слова) */
/* ======================= */

.logo-main {
    animation: neonPulse 6s infinite;
}

/* ======================= */
/* НЕОН ПУЛЬС */
/* ======================= */

@keyframes neonPulse {
    0% {
        text-shadow: 0 0 2px #2563eb, 0 0 5px #3b82f6;
        opacity: 0.95;
    }

    15% {
        text-shadow: 0 0 1px #1e3a8a, 0 0 3px #2563eb;
        opacity: 0.6;
    }

    30% {
        text-shadow: 0 0 7px #2563eb, 0 0 14px #3b82f6;
        opacity: 1;
    }

    55% {
        text-shadow: 0 0 2px #2563eb, 0 0 6px #3b82f6;
        opacity: 0.85;
    }

    75% {
        text-shadow: 0 0 8px #2563eb, 0 0 16px #3b82f6;
        opacity: 1;
    }

    90% {
        text-shadow: 0 0 1px #1e3a8a, 0 0 2px #2563eb;
        opacity: 0.7;
    }

    100% {
        text-shadow: 0 0 5px #2563eb, 0 0 10px #3b82f6;
        opacity: 0.95;
    }
}

/* ======================= */
/* ЛЁГКАЯ ТРЯСКА ВСЕГО ЛОГО */
/* ======================= */

.logo-main {
    display: inline-block;
    animation: neonShake 8s infinite;
}

.logo-main .shake-temp {
    animation: miniShake 0.2s infinite;
}

@keyframes miniShake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(0.4px, -0.2px); }
    50%  { transform: translate(-0.4px, 0.2px); }
    75%  { transform: translate(0.2px, 0.4px); }
    100% { transform: translate(0, 0); }
}

/* ======================= */
/* ТРЯСКА */
/* ======================= */

@keyframes neonShake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(0.3px, -0.2px); }
    50%  { transform: translate(-0.3px, 0.2px); }
    75%  { transform: translate(0.2px, 0.3px); }
    100% { transform: translate(0, 0); }
}


/* вспышка */
.logo-main span.flash {
    opacity: 1;
    text-shadow: 0 0 10px #3b82f6, 0 0 20px #2563eb;
}

/* искры (микро-эффект свечения) */
.logo-main span.flash::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: #60a5fa;
    box-shadow: 0 0 6px #60a5fa;
    animation: spark 0.2s ease-out;
}

@keyframes spark {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3) translateY(-2px);
    }
}

/* тряска */
.logo-main span.shake-temp {
    animation: miniShake 0.2s infinite;
}

@keyframes miniShake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(0.3px, -0.2px); }
    50%  { transform: translate(-0.3px, 0.2px); }
    75%  { transform: translate(0.2px, 0.3px); }
    100% { transform: translate(0, 0); }
}

/* Ссылки */
.nav-right {
    display: flex;
    align-items: center;
    gap: 50px; //расстояние между разделами телефоном и тг на пк версии
}

/* Ссылки меню */
.nav-links {
    display: flex;    /* ряд ссылок */
    gap: 25px;        /* расстояние между ссылками */
}

.nav-links a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 18px; //отвечает за размер шрифта ПК и мобильной версии
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    transition: color 0.3s, text-shadow 0.3s;
}

.nav-links a:hover {
    color: #60a5fa;
    text-shadow: 0 0 8px #60a5fa, 0 0 15px #3b82f6;
}

.nav-links a::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Телефон и соцсети */
.nav-phone {
    color: #3b82f6;
    text-decoration: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
    transition: color 0.3s, text-shadow 0.3s;
}

.nav-phone i {
    color: #60a5fa;
    font-size: 14px;
}

.nav-phone:hover {
    color: #60a5fa;
    text-shadow: 0 0 6px #60a5fa, 0 0 12px #3b82f6;
}

.social-icons {
    position: relative;
    z-index: 100;
}

.social-icons a {
    color: #3b82f6;
    font-size: 16px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 101;
}

.social-icons a:hover {
    color: #60a5fa;
    text-shadow: 0 0 8px #60a5fa, 0 0 15px #3b82f6;
}

/* применяем те же эффекты */
.social-icons a.flicker-off {
    opacity: 0.2;
}

.social-icons a.flash {
    text-shadow: 0 0 8px #3b82f6, 0 0 16px #60a5fa;
}

canvas {
    pointer-events: none;
    display: block;
}

/*волны значка телеграм */
.telegram-wrapper {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

/* сама иконка */
#telegramIcon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    transition: transform 0.3s, filter 0.3s;
}

/* hover эффект */
#telegramIcon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #3b82f6);
}

/* волны */
.telegram-wave {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    animation: telegramWave 2.8s infinite;
    pointer-events: none;
}

/* вторая волна с задержкой */
.telegram-wave:nth-child(2) {
    animation-delay: 1.4s;
}

@keyframes telegramWave {
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }
    70% {
        opacity: 0.2;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Бургер меню и кнопка закрытия */
.burger-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;            /* ширина кнопки */
    height: 22px;           /* высота кнопки */
    background: transparent; /* прозрачный фон */
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3001;          /* чтобы было выше nav */
    position: relative;      /* для перекрытия */
}

/* Полоски */
.burger-line {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #3b82f6;   /* синий цвет */
    border-radius: 2px;
    transition: all 0.4s ease;
}

/* Превращение в крестик при открытии */
.burger-menu-btn.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu-btn.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu-btn.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Эффект при наведении */
.burger-menu-btn:hover .burger-line {
    background: #60a5fa;
    box-shadow: 0 0 8px #60a5fa, 0 0 15px #3b82f6;
}

/* Опционально: крестик при закрытии */
.close-btn {
    display: none;  /* пока скрыт, если нужна отдельная кнопка */
}

.close-btn:hover {
    color: #60a5fa;
    text-shadow: 0 0 8px #60a5fa, 0 0 15px #3b82f6;
}

/* Анимация появления меню */
@keyframes fadeInMenu {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HERO VIDEO */

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.4)
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding: 20px;
}

.hero h1 {
    font-size: 56px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ===== HERO BUTTONS ===== */

.hero-buttons{

display:flex;
justify-content:center;
align-items:center;

gap:20px;
flex-wrap:wrap;

}

.hero-buttons a{
pointer-events:auto;
}

.btn-primary {
    background: #3b82f6;
    color: #000;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.btn-secondary {
    border: 1px solid #fff;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
}

/*БЛок услуги*/
.services{
    min-height:auto;
    padding:80px 0;
    background:#020617;

    display:flex;
    align-items:center;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
}

.stats{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

margin-bottom:80px;
text-align:center;

}

.stat h3{

font-size:42px;
color:#38bdf8;

}

.stat p{

color:#94a3b8;
margin-top:5px;

}

.services-subtitle{
text-align:center;
color:#94a3b8;
max-width:600px;
margin:0 auto 50px;
}

.section-title{
    text-align:center;
    font-size:42px;
    margin-bottom:70px;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.service-card{

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
padding:40px;
border-radius:12px;
overflow: hidden;
transition:0.3s;
position: relative;    /* чтобы z-index сработал */
z-index: 10;           /* выше фоновых слоёв */
pointer-events: auto;  /* включаем реакцию на курсор */

}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #0f172a; /* чуть плотнее, чем фон карточки */
    z-index: -1; /* меньше, чем контент карточки, но выше частиц */
}

.service-card:hover{
    transform: translateY(-8px);
    border: 1px solid rgba(59,130,246,0.5);
    box-shadow:
        0 0 20px rgba(59,130,246,0.2),
        0 0 40px rgba(59,130,246,0.15),
        0 0 60px rgba(59,130,246,0.1); /* добавляем плавное неоновое свечение */
}

.service-card:hover .service-icon{
    color: #00f0ff;
    text-shadow:
        0 0 8px #00f0ff,
        0 0 16px #00f0ff,
        0 0 24px #00f0ff; /* эффект неона для иконки */
}

.service-icon{

font-size:34px;
color:#3b82f6;
margin-bottom:20px;

}

.service-card h3{

font-size:22px;
margin-bottom:10px;

}

.service-card p{

color:#94a3b8;

}

.tech{

margin-top:70px;
text-align:center;

}

.tech p{

color:#94a3b8;
margin-bottom:20px;

}

.tech-icons{

font-size:32px;
display:flex;
justify-content:center;
gap:30px;

color:#3b82f6

}

.services-btn{
margin-top:60px;
text-align:center;
position: relative;
    z-index: 9999;          /* поднимаем над всеми слоями */
    pointer-events: auto;   /* включаем клики */
}

.main-btn{

display:inline-block;
padding:15px 35px;

background:linear-gradient(90deg,#4f46e5,#06b6d4);

border-radius:8px;
color:white;

font-weight:600;

transition:0.3s;
}

.main-btn:hover{

transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.3);

}

/*Портфолио*/ 
.portfolio{
position:relative;
padding:80px 0;
background:#020617;
}

.portfolio-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.portfolio-item{

position:relative;
overflow:hidden;
border-radius:10px;

}

.portfolio-item img{

width:100%;
height:auto;
display:block;

transition:0.4s;

}

.portfolio-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

opacity:0;
transition:0.3s;

}

.portfolio-item:hover img{

transform:scale(1.1);

}

.portfolio-item:hover .portfolio-overlay{

opacity:1;

}

.portfolio-overlay h3{

margin-bottom:15px;
font-size:24px;

}

.portfolio-btn{

padding:10px 25px;

background:#3b82f6;
border-radius:6px;

color:white;

text-decoration:none;

}

/* ABOUT */
.about{
    background:#111;
}
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}
.about img{
width:100%;
display:block;
border-radius:10px;
}
.about p{
    margin-bottom:20px;
    line-height:1.8;
    opacity:0.85;
}

/* BREWERY MENU */
.brewery-menu {
    background: #0e0e0e;
}
.beer-list {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.beer-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #333;
}
.beer-item:last-child {
    border-bottom: none;
}
.beer-item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: #f5f5f5;
    margin: 0;
}
.beer-item p {
    margin: 0;
    line-height: 1.7;
    opacity: 0.8;
    font-size: 15px;
}

/* MENU */
.menu{
    background:#0e0e0e;
}
.menu-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 в ряд */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
/* Карточка */
.menu-item {
    position: relative;    
    height: 350px;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;    
    color: white;    
    overflow: hidden;
    transition: transform 0.4s ease
}
.menu-item h3,
.menu-item p,
.menu-item .price {
    position: relative;
    z-index: 2;
    max-width: 65%;
}
.menu-item h3 {
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 600;
}

.menu-item p {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.menu-item .price {
    font-size: 16px;
    font-weight: bold;
}

/* Фоновая картинка (берётся из inline background-image) */
.menu-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
}

/* Затемнение */
.menu-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.6) 40%,
        rgba(0,0,0,0.2) 70%,
        rgba(0,0,0,0) 100%
    );
    z-index: 1;
}
/* Увеличиваем только картинку */
.menu-item:hover::before {
    transform: scale(1.1);
}

.burgerr {
    background-image: url("https://perchik-delivery.ru/wp-content/uploads/2020/04/firmennyj.jpg");
}
.pasta {
    background-image: url("https://i.pinimg.com/originals/db/f1/71/dbf17103efd8f40987db361dd552c663.webp");
}
.menu-item:hover{
    transform: scale(1.07);
    border:2px solid #3b82f6;
}

.price {
    color: #3b82f6;
    font-weight: bold;
    margin-top: 10px;
}
.menu-category {
    margin-top: 50px;
    margin-bottom: 80px;
    text-align: center;
    font-size: 32px;
    color: #3b82f6;
    /*border-bottom: 1px solid #444;*/
    padding-bottom: 15px;
    font-family: 'Cormorant Garamond', serif;
}
.menu-category > h3 {
    text-align: center;
    margin-bottom: 40px; /* отступ до карточек */
    font-size: 28px;
}

/* GALLERY SLIDER */
.gallery-slider {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.gallery-slider .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 320px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
}
.gallery-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {
    color: #3b82f6;
}
.swiper-pagination-bullet-active {
    background: #3b82f6;
}
.swiper-container {
    overflow: hidden;
}

/* REVIEWS */
.reviews-section {
    background: #111;
}
.reviews-slider {
    padding-bottom: 50px; /* Space for pagination */
}
.reviews-slider .swiper-slide {
    height: auto;
}

.reviews-slider {
    position: relative;
}

/* общие стили стрелок */
.reviews-slider .swiper-button-next,
.reviews-slider .swiper-button-prev {
    width: 44px;
    height: 44px;

    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(59,130,246,0.5);
    border-radius: 50%;

    backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #3b82f6;

    transition: 0.3s ease;
}

/* убираем стандартные стрелки Swiper */
.reviews-slider .swiper-button-next::after,
.reviews-slider .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* hover эффект */
.reviews-slider .swiper-button-next:hover,
.reviews-slider .swiper-button-prev:hover {
    background: #3b82f6;
    color: #000;
}

/* стерлки слайдера */
.reviews-section .container {
    position: relative;
}

.reviews-slider .swiper-button-prev {
    left: -20px;
}

.reviews-slider .swiper-button-next {
    right: -20px;
}

.review-card {
    background: #151515;
    padding: 35px;
    border: 1px solid #333;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    height: 100%;
}
.review-stars {
    color: #3b82f6;
    font-size: 18px;
}
.review-author {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    margin-top: 5px;
}
.review-text {
    line-height: 1.7;
    opacity: 0.85;
    font-size: 15px;
}
.leave-review-btn {
    display: block;
    width: fit-content;
    margin: 60px auto 0;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}
.leave-review-btn:hover {
    background: #3b82f6;
    color: #000;
}

/* CONTACTS */
.contacts-section {
    background: #0b0b0b;
     position: relative;
    z-index: 20000;
    
}
.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.contact-info h2 {
    margin-bottom: 40px;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}
.contact-item i {
    color: #3b82f6;
    font-size: 22px;
    margin-top: 5px;
    width: 30px;
    text-align: center;
}
.contact-item h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-family: 'Cormorant Garamond', serif;
}
.contact-item p {
    margin: 0;
    opacity: 0.8;
    line-height: 1.7;
}
.contact-item a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.contact-item a:hover {
    opacity: 1;
}
.contact-map iframe {
    border-radius: 10px;
    width: 100%;
    height: 450px;    
}
.contact-socials {
    margin-top: 40px;
    display: flex;
    gap: 25px;
    font-size: 22px;
}
.contact-socials a {
    color: #3b82f6;
    font-size: 24px;
    transition: color 0.3s;
}
.contact-socials a:hover {
    color: #3b82f6;
}

/* Scroll Animation */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESERVE */
.reserve{
    background:#111;
    text-align:center;
}
.reserve-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}
.reserve img{
    width:100%;
    border-radius:10px;
}
.reserve p{
    margin-bottom:20px;
    line-height:1.8;
    opacity:0.85;
}
form{
    max-width:600px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top: 100px;

}
input,select{
    padding:15px;
    background:#1a1a1a;
    border:1px solid #333;
    color:#fff;
}
button{
    padding:15px;
    background:#3b82f6;
    border:none;
    cursor:pointer;
    font-weight:bold;
}
button:hover{opacity:0.8}

footer{
    background:#0b0b0b;
    text-align:center;
    padding:50px;
    font-size:14px;
    opacity:0.6;
}

/* Scroll Mouse Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 60px;
    border: 2px solid #3b82f6;
    border-radius: 30px;
    opacity: 0.9;
}

.scroll-indicator span {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 12px;
    background: #3b82f6;
    border-radius: 2px;
    animation: scrollWheel 1.8s infinite;
}

@keyframes scrollWheel {
    0% {
        opacity: 0;
        top: 8px;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 34px;
    }
}



/* STORIES */
.stories-section {
    background: #0e0e0e;
    margin-top: 0px;    
}

.stories-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.story-item {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transform: scale(0.95);
    transition: transform 0.3s;
}
.story-item:hover {
    transform: scale(1);
}
.story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent, transparent);
    z-index: 2;
}
.story-progress-container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 3px;
    z-index: 3;
    display: flex;
    gap: 4px;
}
.progress-segment {
    flex: 1;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    overflow: hidden;
}
.progress-segment-bar {
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: 3px;
}
.progress-segment.active .progress-segment-bar {
    width: 100%;
    transition: width 5s linear;
}
.progress-segment.seen .progress-segment-bar {
    width: 100%;
}
.story-caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 1px 1px 3px #000;
    z-index: 3;
}

/* Премиальные новости */

.news-modern {
    padding: 120px 0;
    background: #0e0e0e;
}

.news-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

/* ===== КАРТОЧКА ===== */
.news-modern-card {
    position: relative;
    height: 420px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* затемнение */
.news-modern-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.9),
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.1)
    );

    z-index: 1;
}

/* hover эффект */
.news-modern-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 0 10px rgba(59,130,246,0.8),
        0 0 25px rgba(59,130,246,0.5),
        0 20px 50px rgba(0,0,0,0.6);
}

/* контент */
.news-overlay {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 40px;

    color: #fff;
}

.news-overlay h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    margin-bottom: 15px;
}

.news-overlay p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    margin-bottom: 25px;
    opacity: 0.85;
}

/* кнопка */
.news-btn {
    display: inline-block;
    padding: 10px 26px;

    border: 1px solid #3b82f6;
    color: #3b82f6;

    font-size: 14px;
    letter-spacing: 1px;

    transition: all 0.3s ease;
}

.news-modern-card:hover .news-btn {
    background: #3b82f6;
    color: #000;
}

/* убираем подчёркивания */
.news-modern-card,
.news-modern-card * {
    text-decoration: none !important;
}

/* ===== Блок последних новостей ===== */

.home-news {
    padding: 80px 0;
    background: #0e0e0e;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.home-news-card {
    position: relative;
    height: 320px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    transition: 0.4s;
}

.home-news-card:hover {
    border: 1px solid rgba(59,130,246,0.5);
    box-shadow:
        0 0 20px rgba(59,130,246,0.2),
        0 0 40px rgba(59,130,246,0.15),
        0 0 60px rgba(59,130,246,0.1); /* добавляем плавное неоновое свечение */
}

.home-news-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    padding: 25px;
    width: 100%;
}

.home-news-overlay h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
}

.home-news-overlay p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 15px;
}

.home-news-overlay span {
    color: #3b82f6;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-news-all {
    text-align: center;
    margin-top: 50px;
}

.gold-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    text-decoration: none;
    transition: 0.3s;
    position: relative; /* обязательно для z-index */
    z-index: 9999;      /* высокий индекс */
}

.gold-btn:hover {
    background: #3b82f6;
    color: #000;
}

/* Вид статей */
/* ARTICLE PAGE */

.article {
    padding: 140px 0 80px;
    background: #111;
}

.article-grid {
    display: grid !important;
    grid-template-columns: 480px 1fr !important;
    gap: 60px !important;
    align-items: start !important;
}

.article img {
    width: 100%;
    float:left;
    border-radius: 12px;
}

.article h2 {
    font-size: 38px;
    margin-bottom: 15px;
}

.article p {
    margin-bottom: 18px;
    line-height: 1.8;
    opacity: 0.9;
}

/* Кнопка Наверх — современная */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none; /* скрыта по умолчанию */
    width: 50px;
    height: 50px;
    background-color: rgba(59, 130, 246, 0.85); /* с полупрозрачностью */
    color: #fff;
    border-radius: 50%; /* круглая */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s, opacity 0.3s;
    opacity: 0;
}

#back-to-top.show {
    display: flex;
    opacity: 1;
    animation: popUp 0.3s ease-out;
}

#back-to-top:hover {
    background-color: #60a5fa;
    transform: scale(1.15); /* немного увеличивается */
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

#back-to-top svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

/* Анимация “подпрыгивания” при появлении */
@keyframes popUp {
    0% { transform: translateY(20px) scale(0.8); opacity: 0; }
    70% { transform: translateY(-5px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===============/* Mobile */ =============== */

@media (max-width: 768px) {

    .logo-main {
        font-size: 22px;
    }

    .logo-top {
        font-size: 11px;
    }

    nav {
        padding: 0 20px;
    }

    .nav-right {
        gap: 15px;
    }

    .social-icons a {
        font-size: 18px;
    }

    /* уменьшаем искры */
    .spark {
        transform: scale(0.7);
    }

}
@media (max-width: 1400px){

    section {
        padding: 60px 15px;
    }

    .container {
        padding: 0 15px;
    }

    .menu-grid,
    .gallery-grid,
    .about-grid,
    .reserve-grid,
    .contacts-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /*.menu {
        display: none;
    }*/
    /* Скрываем все категории */
    .menu-category {
        display: none;
    }
    .menu-category.hot {
        display: block; /* показываем только горячие */
    }

 /* Свайп карусель раздела Истории по категориям */
    .stories-container {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    .stories-container::-webkit-scrollbar {
        display: none;
    }

    .story-item {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }

    .story-image {
    width: 100%;
    height: auto;
    display: block;
}

    .beer-item {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }

    .hero {
        background-attachment: scroll;
        padding: 80px 15px;
        text-align: center;
    }
   

    /* 🔥 ВСТАВИТЬ ВОТ СЮДА БУРГЕР */

    .burger-menu-btn {
        display: flex;              /* показываем кнопку */
        flex-direction: column;     
        justify-content: space-between;
        width: 40px; //ширина высота гамбургера
        height: 40px;
        cursor: pointer;
        z-index: 10000;
        background: transparent;    /* прозрачный фон */
        border: none;
        padding: 0;
    }

    .burger-line {
        display: block;             /* обязательно для полосок */
        height: 4px; //толщина полосок
        width: 100%;
        background: #3b82f6;        /* синий цвет полосок */
        border-radius: 2px;
        transition: all 0.4s ease;
    }

    /* Превращение в крестик */
    .burger-menu-btn.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        background: #3b82f6; /* обязательно указать цвет для видимости */
    }

    .burger-menu-btn.active .burger-line:nth-child(2) {
        opacity: 0;
        background: #3b82f6;
    }

    .burger-menu-btn.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
        background: #3b82f6;
    }
    

    .nav-right {
        z-index: 9999;
        pointer-events: none;
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: #111;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        padding: 80px 40px;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        transition: right 0.4s ease-in-out;
    }

    .nav-right.open {
        right: 0;
        pointer-events: auto;        
    }

    .nav-right .nav-links {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    /*адаптив для новостей*/
    .news-modern-grid {
        grid-template-columns: 1fr;
    }

    .news-modern-card {
        height: 360px;
    }
    
}
/*скрываем декстоп бургер*/
@media (min-width: 1401px) {
    .burger-menu-btn {
        display: none;
    }
}
/* Для мобильных: одна колонка портфолио */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* каждая карточка в ряд */
    }
}
/* Адаптив для новостей и событий*/
@media (max-width: 992px) {
    .home-news-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .home-news-grid {
        grid-template-columns: 1fr;
    }
}

/* мобильная версия статей */

@media (max-width: 900px){

.hero h1{
font-size:40px;
}

.article-grid{
display:block !important;
}

.article-grid img{
width:100%;
height:auto;
margin-bottom:20px;
}

}
/*скрываем частицы на мобильном*/
@media (max-width: 768px) {
    #particles {
        display: block !important;   /* показываем на мобилке */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;                 /* над hero контентом, но под меню */
        pointer-events: none;        /* клики проходят сквозь шарики */
        opacity: 1;
    }
}
#mobileMenu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: #fff;
    z-index: 999;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

#mobileMenu.open {
    display: block;
    transform: translateX(0);
}

body.no-scroll {
    overflow: hidden;
}

/* Мобильный логотип с анимацией букв */
@media (max-width: 768px) {
    .logo-main span,
    .logo-main,
    .logo-main .shake-temp {
        animation: neonPulse 6s infinite !important; /* только пульсация */
        transform: none !important; /* убираем тряску */
    }
}

    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }


@media (max-width: 768px) {

    .contact-map {
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .contact-map iframe {
        width: 100%;
        height: 320px;
        display: block;
        border-radius: 10px; /* скругление */
    }

}

@media (max-width: 768px) {
    .hero-buttons {
        margin-top: 30px;  /* или margin-bottom у предыдущего блока */
    }
}

/* news.php: H1 вместо H2, визуально как было */
.news-modern h1 { font-size: 38px; }

/* Фильтр статей по категориям (17.10.2026) */
.news-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.news-tabs a{display:inline-block;padding:9px 16px;border:1px solid #2a2a45;border-radius:999px;color:#dfe3ec;text-decoration:none;font-size:14px;background:#141426;transition:border-color .15s,background .15s}
.news-tabs a:hover{border-color:#3b82f6;background:#1d1d38}
.news-tabs a.active{background:#3b82f6;border-color:#3b82f6;color:#fff}
.news-tabs a .cnt{opacity:.65;margin-left:6px;font-size:12px}
.news-hide{display:none}
.news-more{margin-top:28px;text-align:center}
.news-more button{background:#3b82f6;border:none;color:#fff;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;cursor:pointer}
.news-more button:hover{background:#6a4cf0}
@media (max-width:640px){.news-tabs{gap:6px;margin-bottom:22px}.news-tabs a{padding:8px 13px;font-size:13px}}

/* Счётчик просмотров и лайки статьи (17.10.2026) */
.article-counter{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:28px 0 6px;padding:14px 18px;border:1px solid #2a2a45;border-radius:12px;background:#141426;font-size:14px;color:#9aa0b5}
.article-counter .ac-views b{color:#fff;font-size:16px}
.article-counter .ac-btn{background:#1d1d38;border:1px solid #2a2a45;color:#dfe3ec;border-radius:8px;min-height:44px;padding:12px 16px;font-size:13px;cursor:pointer;margin:0 3px}
.article-counter .ac-btn:hover{border-color:#3b82f6}
.article-counter .ac-btn b{color:#fff}
.article-counter.is-voted .ac-btn{opacity:.55;cursor:default}

/* Голосование по ответам FAQ (21.10.2026) */
.faq-vote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#8a99ad}
.faq-vote .fq-label{opacity:.85}
.faq-vote .fq-btn{background:#1d1d38;border:1px solid #2a2a45;color:#dfe3ec;border-radius:8px;min-height:44px;padding:12px 14px;font-size:13px;cursor:pointer}
.faq-vote .fq-btn:hover{border-color:#3b82f6}
.faq-vote .fq-btn b{color:#fff}
.faq-vote.is-voted .fq-btn{opacity:.55;cursor:default}

/* Форма «Задать вопрос» (21.10.2026) */
.fb-modal{position:fixed;inset:0;z-index:9000;display:none}
.fb-modal.is-open{display:block}
.fb-backdrop{position:absolute;inset:0;background:rgba(6,7,12,.72)}
.fb-dialog{position:relative;max-width:560px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:6vh auto 0;background:#141426;border:1px solid #2a2a45;border-radius:16px;padding:26px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6);color:#dfe3ec}
.fb-dialog h3{margin:0 0 6px;color:#fff;font-size:22px}
.fb-sub{margin:0 0 18px;color:#9aa0b5;font-size:14px;line-height:1.5}
.fb-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:8px;border:1px solid #2a2a45;background:#1d1d38;color:#dfe3ec;font-size:20px;line-height:1;cursor:pointer}
.fb-close:hover{border-color:#3b82f6}
.fb-form label{display:block;margin:0 0 14px;font-size:13.5px;color:#9aa0b5}
.fb-form input,.fb-form textarea{width:100%;margin-top:6px;background:#0f0f1a;border:1px solid #2a2a45;border-radius:10px;color:#e6edf6;padding:11px 13px;font:inherit;font-size:15px;resize:vertical}
.fb-form input:focus-visible,.fb-form textarea:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-color:#3b82f6}
.fb-form input:focus,.fb-form textarea:focus{border-color:#3b82f6}
.fb-form input::placeholder,.fb-form textarea::placeholder{color:#5d6478}
.fb-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.fb-submit{width:100%;background:#3b82f6;border:none;color:#fff;font-size:15px;font-weight:600;padding:13px 20px;border-radius:10px;cursor:pointer}
.fb-submit:hover{background:#6a4cf0}
.fb-submit:disabled{opacity:.6;cursor:default}
.fb-note{margin:14px 0 0;font-size:13px;color:#8a99ad;text-align:center}
.fb-note a{color:#7dd3fc}
.fb-msg{margin:14px 0 0;padding:11px 13px;border-radius:10px;font-size:14px}
.fb-msg.is-ok{background:rgba(39,201,63,.12);border:1px solid rgba(39,201,63,.4);color:#b7f0c0}
.fb-msg.is-err{background:rgba(255,95,86,.12);border:1px solid rgba(255,95,86,.4);color:#ffc9c4}
body.fb-lock{overflow:hidden}
.nav-question{color:#dfe3ec;text-decoration:none;white-space:nowrap}
.nav-question:hover{color:#3b82f6}
.ac-ask{color:#8a99ad}
.ac-ask a{color:#7dd3fc}

.fb-agree{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;font-size:13px;color:#9aa0b5;line-height:1.45}
.fb-agree input{width:auto;margin:2px 0 0;accent-color:#3b82f6;flex:0 0 auto}
.fb-agree a{color:#7dd3fc}

/* Копия иконки в подвале (уникальный id) — 17.10.2026 */
#telegramIconFoot {
    position: relative;
    z-index: 2;
    display: inline-flex;
    transition: transform 0.3s, filter 0.3s;
}
#telegramIconFoot:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #3b82f6);
}
/* Форма обратной связи на мобильном: кнопка «Отправить» должна быть видна (17.10.2026) */
@media (max-width:560px){
  .fb-dialog{margin:3vh auto 0;max-width:94vw;max-height:94vh;padding:20px 18px 18px;border-radius:14px}
  .fb-dialog h3{font-size:19px;margin-bottom:4px}
  .fb-sub{font-size:13px;margin-bottom:12px}
  .fb-form label{margin-bottom:10px;font-size:12.5px}
  .fb-form input,.fb-form textarea{padding:10px 12px;font-size:16px;margin-top:4px}
  .fb-form textarea{min-height:88px}
  .fb-agree{margin:0 0 12px;font-size:12px}
  .fb-submit{position:sticky;bottom:0;padding:14px 18px;font-size:16px}
  .fb-note{font-size:12px;margin-top:10px}
  .fb-msg{font-size:13px}
}


/* Лайтбокс галерей: разметка есть на страницах товаров, стили вынесены глобально (23.10.2026) */
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:1000;justify-content:center;align-items:center;flex-direction:column}
.lightbox.active{display:flex}
.lightbox-img{max-width:90%;max-height:80%;object-fit:contain}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;font-size:2.5rem;padding:10px 20px;cursor:pointer;border-radius:30px;transition:.2s}
.lightbox .nav:hover{background:rgba(0,0,0,.8)}
.lightbox .prev{left:20px}
.lightbox .next{right:20px}
.lightbox .close{position:absolute;top:20px;right:30px;font-size:2rem;color:#fff;cursor:pointer;background:none;border:none}


/* Кнопки-ссылки на внутренних страницах (23.10.2026) */
.about-back-btn{display:inline-block;margin:22px 12px 0 0;padding:13px 26px;border-radius:10px;border:1px solid rgba(59,130,246,.55);color:#e6edf6;text-decoration:none;font:500 15px/1.2 'Montserrat',sans-serif;background:rgba(59,130,246,.12);transition:.2s}
.about-back-btn:hover{background:#3b82f6;color:#fff;border-color:#3b82f6;box-shadow:0 0 24px rgba(59,130,246,.5)}

/* Форма: согласие и крестик — ровно на всех экранах (23.10.2026) */
.fb-form .fb-agree{display:flex!important;align-items:flex-start;gap:8px;margin:0 0 12px;font-size:13px;line-height:1.45;color:#9aa0b5}
.fb-form .fb-agree input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;padding:0}
.fb-form .fb-agree span{display:block;min-width:0;flex:1 1 auto}
.fb-close{display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:Arial,sans-serif;font-size:22px;line-height:1;top:12px;right:12px;width:36px;height:36px}
@media (max-width:560px){
  .fb-close{top:8px;right:8px;width:34px;height:34px;font-size:20px}
  .fb-form .fb-agree{gap:9px;font-size:12.5px;margin-bottom:10px}
  .fb-form .fb-agree input[type=checkbox]{width:18px;height:18px}
}
/* Модалка заявки в фирменном стиле сайта (23.10.2026) */
.fb-backdrop{background:rgba(6,10,20,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fb-dialog{max-width:440px;margin:8vh auto 0;padding:22px 22px 20px;border-radius:14px;border:1px solid rgba(59,130,246,.32);
  background:linear-gradient(165deg,#0f1729 0%,#0b0f17 62%,#0a0e16 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px rgba(59,130,246,.08) inset;color:#dfe3ec;overflow:hidden}
.fb-dialog::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#3b82f6,#00f0ff 55%,#3b82f6);opacity:.9}
.fb-dialog h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;color:#f1f5f9;margin:0 0 4px}
.fb-sub{color:#94a3b8;font-size:13px;margin:0 0 14px}
.fb-form label{color:#94a3b8;font-size:12.5px;letter-spacing:.01em}
.fb-form input,.fb-form textarea{background:rgba(17,24,39,.9);border:1px solid rgba(148,163,184,.25);border-radius:9px;transition:border-color .2s,box-shadow .2s}
.fb-form input:focus,.fb-form textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.fb-submit{background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:9px;font-weight:500;letter-spacing:.01em;transition:filter .2s,transform .2s}
.fb-submit:hover{filter:brightness(1.08)}
.fb-close{background:rgba(17,24,39,.9);border-color:rgba(148,163,184,.28);color:#cbd5e1}
.fb-close:hover{color:#fff;border-color:#3b82f6}
.fb-note{color:#64748b}