/* =========================================
   FS Nail Salon — Styles
   ========================================= */

:root {
  /* Палитра */
  --primary: #D64A8E; /* акцент (ярко-розовый) */
  --primary-rgb: 214, 74, 142;
  --primary-dk: #B53673;
  --accent: #D64A8E; /* дублируем для общих классов */
  --accent-rgb: 214, 74, 142;
  
  --bg: #FFFFFF;
  --bg-alt: #F7F7F7;
  --surface: #F9E6EE; /* пастельно-розовый для карточек, если нужен */
  --surface-light: #FFFFFF; /* для карточек на цветном фоне */
  
  --text: #666666;
  --muted: #888888;
  --heading: #2D2D2D;
  --border: #EAEAEA;

  /* Типографика */
  --font-d: 'Playfair Display', serif;
  --font-b: 'Montserrat', sans-serif;
  
  /* Размеры и отступы */
  --section-py: clamp(4rem, 8vw, 7rem);
  --container: 1140px;
  --radius: 16px;
  
  /* Эффекты */
  --shadow: 0 4px 24px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.08);
  --shadow-color: 0 12px 40px rgba(var(--primary-rgb), 0.25);
  --transition: 0.3s ease;
  --lh: 1.6;
}

/* ════ RESET & BASE ════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { 
  font-family: var(--font-b); 
  color: var(--text); 
  background: var(--bg); 
  line-height: var(--lh); 
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: var(--section-py) 0; position: relative; }
.section-alt { background: var(--bg-alt); }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-d); color: var(--heading); }
.section-header { text-align: center; max-width: 600px; margin: 0 auto 3.5rem; }
.section-header.align-left { text-align: left; margin: 0 0 2rem 0; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1rem; line-height: 1.2; }
.section-sub { color: var(--muted); font-size: 1.1rem; }
.badge { display: inline-block; padding: 6px 12px; background: rgba(var(--primary-rgb), 0.1); color: var(--primary); font-size: 0.8rem; font-weight: 600; border-radius: 20px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 30px; font-size: 15px; font-weight: 600; transition: all var(--transition); cursor: pointer; border: none; font-family: var(--font-b); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-press { transition: all 0.15s ease; transform: translateY(0); }
.btn-press:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35); }
.btn-press:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2); transition-duration: 0.05s; }

/* ════ DECORATIONS & ADVANCED EFFECTS ════ */
/* 1. Scroll Progress Bar (CSS Only) */
.scroll-progress-css {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1001;
  background: var(--primary); transform-origin: left;
  animation: progress-bar linear; animation-timeline: scroll();
}
@keyframes progress-bar { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* 2. Text Accent (Hero) */
.text-accent { color: var(--primary); position: relative; }
.text-accent::after {
  content: ''; position: absolute; bottom: 8px; left: 0; right: 0;
  height: 8px; background: var(--primary); opacity: 0.2; border-radius: 4px;
}

/* 3. Colored Shadow for Images */
.img-shadow { filter: drop-shadow(0 16px 32px rgba(var(--primary-rgb), 0.2)); }

/* 4. Glassmorphism Light */
.glass-card-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

/* 5. Glow Border on hover (Pricing) */
.card-glow { position: relative; overflow: hidden; border-radius: 20px; }
.card-glow::before {
  content: ''; position: absolute; inset: -2px; border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--bg), var(--primary));
  z-index: -1; opacity: 0; transition: opacity 0.4s ease;
}
.card-glow:hover::before { opacity: 0.6; }

/* 6. Thermal Glow (Japanese Manicure) */
.thermal-glow-wrap { position: absolute; inset: 0; pointer-events: none; }
.thermal-glow { position: relative; width: 100%; height: 100%; border-radius: 20px; }
.thermal-glow::before {
  content: ''; position: absolute; inset: -15px; border-radius: inherit;
  background: conic-gradient(from 0deg, var(--primary), #FFB6C1, var(--primary));
  filter: blur(30px); opacity: 0.15; transition: opacity 0.5s ease; z-index: -1;
  animation: rotateBorder 10s linear infinite;
}
.alt-img:hover .thermal-glow::before { opacity: 0.4; }
@keyframes rotateBorder { to { transform: rotate(360deg); } }

/* 7. Floating Blob */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.1; pointer-events: none; z-index: -1; animation: blobFloat 8s ease-in-out infinite alternate; }
.blob-1 { width: 300px; height: 300px; background: var(--primary); top: -10%; left: -10%; }
@keyframes blobFloat { 0% { transform: translate(0,0) scale(1) } 100% { transform: translate(30px,-30px) scale(1.1) } }

/* 8. Glow Box */
.glow-box { position: relative; }
.glow-box::before {
  content: ''; position: absolute; inset: -10px; border-radius: 30px;
  background: var(--primary); filter: blur(40px); opacity: 0.1; z-index: -1;
}

/* 9. Animated Input Focus */
.input-animated {
  width: 100%; border: 2px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem;
  background: var(--bg); transition: all 0.3s ease; outline: none; font-family: var(--font-b); font-size: 15px; color: var(--heading);
}
.input-animated:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1); }
.input-group { position: relative; margin-bottom: 1.25rem; }
.input-group label {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); transition: all 0.2s ease; pointer-events: none;
  background: var(--bg); padding: 0 4px; font-size: 15px;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: 0; font-size: 0.75rem; color: var(--primary);
}

/* 10. Reveal Animations (IntersectionObserver fallback) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: all 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
/* Stagger */
.stagger > * { opacity: 0; transform: translateY(24px); transition: all 0.5s ease; }
.stagger.visible > * { opacity: 1; transform: none; }
.stagger.visible > :nth-child(1) { transition-delay: 0s; }
.stagger.visible > :nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > :nth-child(3) { transition-delay: 0.2s; }
.stagger.visible > :nth-child(4) { transition-delay: 0.3s; }
.stagger.visible > :nth-child(5) { transition-delay: 0.4s; }
.stagger.visible > :nth-child(6) { transition-delay: 0.5s; }
.stagger.visible > :nth-child(7) { transition-delay: 0.6s; }
.stagger.visible > :nth-child(8) { transition-delay: 0.7s; }
.stagger.visible > :nth-child(9) { transition-delay: 0.8s; }
.stagger.visible > :nth-child(10) { transition-delay: 0.9s; }

/* ════ NAVBAR ════ */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.4s ease; padding: 15px 0; border-bottom: 1px solid transparent; }
#navbar.scrolled { padding: 10px 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.nav-container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-d); font-size: 1.5rem; font-weight: 700; color: #fff; transition: color 0.3s ease; }
#navbar.scrolled .nav-logo { color: var(--heading); }
.nav-menu { display: flex; gap: 2rem; align-items: center; }
.nav-link { color: rgba(255,255,255,0.9); font-weight: 500; font-size: 15px; transition: color 0.3s ease; }
.nav-link:hover, .nav-link.active { color: #fff; }
#navbar.scrolled .nav-link { color: var(--text); }
#navbar.scrolled .nav-link:hover, #navbar.scrolled .nav-link.active { color: var(--primary); }
.nav-cta { padding: 10px 24px; font-size: 14px; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; transition: 0.3s; }
#navbar.scrolled .burger span { background: var(--heading); }

@media (max-width: 900px) {
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: 2rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-top: 1px solid var(--border); gap: 1.5rem; }
  .nav-menu.open { display: flex; }
  .nav-menu .nav-link { color: var(--heading); font-size: 1.1rem; }
  .nav-menu .nav-link:hover, .nav-menu .nav-link.active { color: var(--primary); }
  .burger { display: flex; }
  .nav-cta { display: none; }
  #navbar.scrolled .nav-logo { color: var(--heading); }
  #navbar { padding: 15px 0; }
  #navbar.scrolled { padding: 15px 0; }
}

/* ════ HERO ════ */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; }
.hero-swiper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: auto; }
.hero-slide { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.3) 100%); z-index: 1; pointer-events: none; }
.hero-container { position: relative; z-index: 2; padding-top: 80px; width: 100%; pointer-events: none; }
.hero-content { max-width: 700px; pointer-events: auto; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1.5rem; color: var(--heading); line-height: 1.1; }
.hero-sub { font-size: clamp(1.1rem, 2vw, 1.3rem); margin-bottom: 2.5rem; color: #333; max-width: 550px; font-weight: 500; }
.hero .swiper-button-next, .hero .swiper-button-prev { color: var(--heading); background: rgba(255,255,255,0.5); width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(4px); transition: all 0.3s ease; z-index: 10; pointer-events: auto; }
.hero .swiper-button-next:hover, .hero .swiper-button-prev:hover { background: #fff; }
.hero .swiper-button-next::after, .hero .swiper-button-prev::after { font-size: 1.2rem; }
.hero .swiper-pagination { z-index: 10; pointer-events: auto; }
.hero .swiper-pagination-bullet { background: var(--heading); }

/* Анимации при загрузке */
.animate-in { opacity: 0; transform: translateY(24px); animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ════ WAVE DIVIDER ════ */
.wave-divider { line-height: 0; margin-top: -1px; }
.wave-divider svg { width: 100%; height: 80px; display: block; }
.section-overlap-wave { position: relative; z-index: 2; margin-top: -80px; }

/* ════ О САЛОНЕ ════ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text p { margin-bottom: 1.5rem; font-size: 1.05rem; }
.about-img { position: relative; z-index: 1; }
.about-img img { border-radius: 24px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-img { grid-row: 1; } }

/* ════ ПРЕИМУЩЕСТВА ════ */
.features-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.feature-card { flex: 1 1 300px; max-width: 350px; padding: 2.5rem 2rem; text-align: center; border-radius: 24px; transition: transform 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.feature-card:hover { transform: translateY(-5px); }
.f-icon { width: 80px; height: 80px; margin-bottom: 1.5rem; background: rgba(255,255,255,0.9); border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.f-icon img { width: 45px; height: 45px; object-fit: contain; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--heading); }
.feature-card p { font-size: 0.95rem; color: var(--text); }

/* ════ ЯПОНСКИЙ МАНИКЮР (Alt Row) ════ */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.alt-img { position: relative; }
.alt-img img { border-radius: 24px; position: relative; z-index: 1; }
.check-list { margin-top: 2rem; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: 1rem; font-weight: 500; color: var(--heading); }
.check-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--primary); }
@media (max-width: 900px) { .alt-row { grid-template-columns: 1fr; } }

/* ════ ПРАЙС-ЛИСТ ════ */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto; }
.pricing-column { padding: 2.5rem; border-radius: 24px; z-index: 1; }
.pricing-column h3 { font-size: 1.5rem; margin-bottom: 2rem; text-align: center; color: var(--primary); }
.price-list li { margin-bottom: 1.5rem; }
.price-list li:last-child { margin-bottom: 0; }
.price-item { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4px; }
.price-name { font-weight: 600; color: var(--heading); font-size: 1.05rem; }
.price-dots { flex: 1; border-bottom: 1px dashed var(--border); margin: 0 10px 5px; }
.price-val { font-weight: 700; color: var(--heading); font-size: 1.1rem; white-space: nowrap; }
.price-time { font-size: 0.85rem; color: var(--muted); font-style: italic; }
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-column { padding: 1.5rem; } }

/* ════ ГАЛЕРЕЯ (Masonry Bento) ════ */
.masonry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; grid-auto-rows: 220px; }
.masonry-item { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

/* Bento Layout for 8 items */
.masonry-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.masonry-item:nth-child(2) { grid-column: span 1; grid-row: span 1; }
.masonry-item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.masonry-item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.masonry-item:nth-child(5) { grid-column: span 1; grid-row: span 2; }
.masonry-item:nth-child(6) { grid-column: span 1; grid-row: span 2; }
.masonry-item:nth-child(7) { grid-column: span 2; grid-row: span 1; }
.masonry-item:nth-child(8) { grid-column: span 2; grid-row: span 1; }

.overlay { position: absolute; inset: 0; background: rgba(var(--primary-rgb), 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.masonry-item:hover .overlay { opacity: 1; }
.masonry-item:hover img { transform: scale(1.05); }
.overlay span { color: #fff; font-weight: 600; font-size: 1.2rem; transform: translateY(20px); transition: transform 0.3s ease; }
.masonry-item:hover .overlay span { transform: translateY(0); }

@media (max-width: 900px) {
  .masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .masonry-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .masonry-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .masonry-item:nth-child(4) { grid-column: span 2; }
  .masonry-item:nth-child(7) { grid-column: span 2; }
  .masonry-item:nth-child(8) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .masonry-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
  .masonry-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
}

/* ════ ОТЗЫВЫ ════ */
.reviews-swiper { padding-bottom: 4rem !important; }
.review-card { padding: 2.5rem; border-radius: 24px; position: relative; height: auto; display: flex; flex-direction: column; }
.quote-mark::before { content: '\201C'; font-family: var(--font-d); font-size: 6rem; line-height: 1; color: var(--primary); opacity: 0.1; position: absolute; top: -10px; left: 20px; }
.review-text { font-size: 1rem; color: var(--text); line-height: 1.7; margin-bottom: 2rem; font-style: italic; flex-grow: 1; position: relative; z-index: 1; }
.review-author { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 1.5rem; }
.review-name { font-weight: 700; color: var(--heading); font-family: var(--font-d); font-size: 1.1rem; }
.swiper-pagination-bullet { background: var(--primary); opacity: 0.3; }
.swiper-pagination-bullet-active { opacity: 1; }

/* ════ СПЕЦПРЕДЛОЖЕНИЕ ════ */
.cta-box { background: var(--bg-alt); border-radius: 30px; padding: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cta-content h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.cta-content p { font-size: 1.1rem; margin-bottom: 2rem; }
.form-success { background: #DCFCE7; border: 1px solid #86EFAC; border-radius: 12px; padding: 14px 18px; color: #166534; font-size: 14px; text-align: center; margin-top: 12px; }
.form-error { background: #FEE2E2; border: 1px solid #FCA5A5; border-radius: 12px; padding: 14px 18px; color: #991B1B; font-size: 14px; text-align: center; margin-top: 12px; }
@media (max-width: 900px) { .cta-box { grid-template-columns: 1fr; padding: 2.5rem; gap: 2rem; text-align: center; } }

/* ════ БРЕНДЫ ════ */
.brands-marquee { overflow: hidden; position: relative; }
.brands-marquee::before, .brands-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; }
.brands-marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.brands-marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-inner { display: flex; gap: 4rem; width: max-content; animation: marquee 20s linear infinite; align-items: center; }
.marquee-inner img { height: 50px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: all 0.3s ease; }
.marquee-inner img:hover { filter: grayscale(0%) opacity(1); }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-25%) } }

/* ════ КОНТАКТЫ & КАРТА ════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
.contact-item { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; }
.c-icon { width: 48px; height: 48px; background: rgba(var(--primary-rgb), 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.2rem; flex-shrink: 0; }
.c-text { display: flex; flex-direction: column; justify-content: center; }
.c-text strong { color: var(--heading); font-size: 1rem; margin-bottom: 4px; }
.c-text span, .c-text a { color: var(--text); font-size: 1.05rem; }
.c-text a { transition: color 0.3s ease; }
.c-text a:hover { color: var(--primary); }

.contact-socials { display: flex; gap: 15px; margin-top: 2rem; }
.social-link { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), 0.1); color: var(--primary); font-size: 1.25rem; transition: all 0.3s ease; }
.social-link:hover { background: var(--primary); color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }

.map-wrapper { border-radius: 24px; overflow: hidden; height: 400px; box-shadow: var(--shadow); border: 4px solid #fff; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .map-wrapper { height: 300px; } }

/* ════ FOOTER ════ */
footer { background: var(--heading); color: rgba(255,255,255,0.7); padding: 4rem 0 0; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { color: #fff; font-family: var(--font-d); font-size: 1.8rem; font-weight: 700; display: block; margin-bottom: 10px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); }
.footer-links, .footer-contacts { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 15px; transition: color 0.3s ease; }
.footer-links a:hover { color: #fff; }
.footer-contacts a { font-size: 15px; transition: color 0.3s ease; color: #fff; }
.footer-contacts i { color: var(--primary); width: 20px; }

/* Форма подписки */
.subscribe-form { display: flex; align-items: center; background: rgba(255,255,255,0.1); border-radius: 30px; padding: 4px; border: 1px solid rgba(255,255,255,0.2); transition: border-color 0.3s ease; }
.subscribe-form:focus-within { border-color: var(--primary); }
.subscribe-form input { flex-grow: 1; background: transparent; border: none; padding: 10px 15px; color: #fff; font-family: var(--font-b); font-size: 14px; outline: none; }
.subscribe-form input::placeholder { color: rgba(255,255,255,0.5); }
.subscribe-form button { background: var(--primary); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; }
.subscribe-form button:hover { transform: scale(1.05); }

.footer-bottom { padding: 1.5rem 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 14px; }
.footer-dev a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom-inner { flex-direction: column; text-align: center; } }