/* styles.css — кастомные стили R&A Studio */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(120deg, #2563eb 0%, #7c3aed 25%, #7c3aed 100%);
  color: #333;
  margin: 0;
  padding: 0;
}

header, footer {
  background-color: #fff;
}

.nav-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #4B5563; /* gray-700 */
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #7C3AED; /* purple-600 */
}

.lang-button {
  position: relative;
  overflow: hidden;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, border 0.3s;
}

.lang-button.selected {
  box-shadow: 0 0 0 3px #7C3AED33;
  border: 2px solid #7C3AED;
}

/* Флаги через background linear-gradient */
.lang-button.flag-en.selected, .lang-button.flag-en:hover {
  background: linear-gradient(135deg, #00247d 33%, #fff 33%, #fff 66%, #cf142b 66%);
  color: #fff;
}

.lang-button.flag-de.selected, .lang-button.flag-de:hover {
  background: linear-gradient(180deg, #000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
  color: #000;
}

.lang-button.flag-fr.selected, .lang-button.flag-fr:hover {
  background: linear-gradient(90deg, #0055a4 33%, #fff 33%, #fff 66%, #ef4135 66%);
  color: #fff;
}

.lang-button.flag-ru.selected, .lang-button.flag-ru:hover {
  background: linear-gradient(180deg, #fff 33%, #0033a0 33%, #0033a0 66%, #d52b1e 66%);
  color: #fff;
}

.lang-button {
  animation: langBtnPop 0.2s;
}

@keyframes langBtnPop {
  0% { transform: scale(0.9); }
  80% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(124,58,237,0.08);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,0.16);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #7C3AED;
  margin-bottom: 1.5rem;
  text-align: center;
}

.btn-primary {
  background: #7C3AED;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #5B21B6;
}

main {
  padding: 4rem 1rem;
}

footer {
  background-color: #f3f4f6; /* gray-100 */
  color: #6b7280; /* gray-500 */
}

/* --- Круглые флаг-кнопки с анимацией --- */
.lang-flag {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124,58,237,0.08);
  transition: background 0.3s, box-shadow 0.3s, border 0.3s, transform 0.2s;
  outline: none;
  position: relative;
}
.lang-flag .flag-icon {
  pointer-events: none;
  transition: filter 0.3s;
}
.lang-flag:hover, .lang-flag:focus {
  background: #ede9fe;
  border-color: #7C3AED;
  box-shadow: 0 4px 16px #7C3AED33, 0 0 0 4px #ede9fe;
  transform: scale(1.12) rotate(-4deg);
  z-index: 1;
}
.lang-flag.selected {
  background: linear-gradient(135deg, #ede9fe 60%, #fff 100%);
  border-color: #7C3AED;
  box-shadow: 0 0 0 6px #7C3AED33, 0 4px 16px #7C3AED33;
  transform: scale(1.18) rotate(2deg);
  z-index: 2;
}
.lang-flag.selected .flag-icon {
  filter: drop-shadow(0 0 4px #7C3AED88);
}

/* --- Современные карточки и иконки для главной --- */
.card-modern {
  background: rgba(30, 27, 75, 0.7);
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px 0 #a78bfa33, 0 1.5px 6px 0 #7c3aed22;
  border: 1.5px solid #a78bfa55;
  min-height: 260px;
  color: #fff;
  transition: box-shadow 0.3s, transform 0.2s, border 0.3s;
}
.card-modern:hover, .card-shape:hover, .card-meaning:hover,
.card-modern:hover .card-icon, .card-shape:hover .card-icon, .card-meaning:hover .card-icon,
.group:hover .card-icon, .group:hover .icon-circle {
  transform: none !important;
  /* Оставляем только цветовые и box-shadow эффекты */
}
.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f472b6 60%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 16px #f472b655;
  font-size: 2rem;
  margin-bottom: 1rem;
  border: 2px solid #fff2;
}

/* --- RETRO WAVE --- */
.retro-title {
  font-family: 'Orbitron', 'Inter', Arial, sans-serif;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px #a78bfa, 0 2px 24px #7c3aed, 0 0 2px #fff;
}
.retro-sub {
  text-shadow: 0 0 8px #a78bfa, 0 1px 12px #7c3aed;
}
.retro-btn {
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  border-radius: 2rem;
  box-shadow: 0 2px 24px #a78bfa99, 0 1.5px 6px #7c3aed44;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.retro-btn:hover, .retro-btn:focus {
  background: linear-gradient(90deg, #f472b6 0%, #a78bfa 100%);
  box-shadow: 0 4px 32px #f472b6cc, 0 2px 12px #a78bfa88;
  transform: scale(1.08) rotate(-2deg);
}
section {
  position: relative;
  z-index: 1;
}

/* --- Анимации и цвета для сверхяркой секции преимуществ --- */
@keyframes gradient-move {
  0% { filter: blur(0px) brightness(1); }
  50% { filter: blur(4px) brightness(1.1); }
  100% { filter: blur(0px) brightness(1); }
}
.animate-gradient-move {
  animation: gradient-move 12s ease-in-out infinite;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.animate-fade-in {
  animation: fade-in 1.2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes card-pop {
  0% { opacity: 0; transform: scale(0.92) translateY(40px); }
  60% { opacity: 1; transform: scale(1.04) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-card-pop {
  animation: card-pop 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}
@keyframes spin-fast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-fast {
  animation: spin-fast 1.2s linear infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
.animate-bounce {
  animation: bounce 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 #f472b6aa; }
  50% { box-shadow: 0 0 32px 8px #f472b6cc; }
}
.animate-pulse {
  animation: pulse 1.6s infinite;
}
.text-fuchsia-100 { color: #fce7f3; }
.text-fuchsia-200 { color: #f9a8d4; }
.text-yellow-100 { color: #fef9c3; }
.text-yellow-200 { color: #fde68a; }
.text-cyan-100 { color: #cffafe; }
.text-cyan-200 { color: #67e8f9; }
.text-pink-100 { color: #fbcfe8; }
.text-pink-200 { color: #f472b6; }
.group:hover .animate-spin-slow { animation: spin-fast 1.2s linear infinite; }
.group:hover .animate-bounce { animation: spin-fast 1.2s linear infinite; }
.group:hover .animate-pulse { animation: spin-fast 1.2s linear infinite; }

/* --- Исправление: эмодзи не крутятся при наведении --- */
.card-modern .icon-circle.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.group:hover .icon-circle.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.group:hover .icon-circle.animate-bounce { animation: bounce 1.2s infinite; }
.group:hover .icon-circle.animate-pulse { animation: pulse 1.6s infinite; }

/* --- CTA Dog --- */
.dog-cta {
  animation: fade-in 1.2s cubic-bezier(.4,0,.2,1) both;
  filter: drop-shadow(0 4px 32px #a78bfa88);
  transition: transform 0.3s;
}
.dog-cta:hover {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 8px 48px #fbbf24cc);
}
.dog-ear {
  transform-origin: 50% 80%;
  animation: dog-ear-wiggle 2.2s ease-in-out infinite;
}
.dog-ear-left { animation-delay: 0s; }
.dog-ear-right { animation-delay: 1.1s; }
@keyframes dog-ear-wiggle {
  0%, 100% { transform: rotate(-12deg); }
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(12deg); }
  80% { transform: rotate(-8deg); }
}
.dog-cta-text { letter-spacing: 0.02em; }

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fade-in-up 1.1s cubic-bezier(.4,0,.2,1) both;
}

@keyframes glow {
  0%, 100% { text-shadow: 0 0 24px #a78bfa, 0 0 8px #f472b6; }
  50% { text-shadow: 0 0 48px #f472b6, 0 0 16px #a78bfa; }
}
.animate-glow {
  animation: glow 2.5s ease-in-out infinite;
}

@keyframes slide-in-left {
  0% { opacity: 0; transform: translateX(-48px); }
  100% { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-left {
  animation: slide-in-left 1.1s cubic-bezier(.4,0,.2,1) both;
}

@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
  animation: scale-in 1.1s cubic-bezier(.4,0,.2,1) both;
}

@keyframes fade-in-up-pulse {
  0% { opacity: 0; transform: translateY(32px) scale(0.98); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-fade-in-up-pulse {
  animation: fade-in-up-pulse 1.3s cubic-bezier(.4,0,.2,1) both;
}

/* Glitch effect for logo */
.glitch {
  position: relative;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 2px 0 #f472b6, -2px 0 #a78bfa, 0 2px #7c3aed, 0 -2px #f472b6;
  animation: glitch 1.2s infinite linear alternate-reverse;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0.7;
}
.glitch::before {
  color: #a78bfa;
  z-index: 1;
  left: 2px;
  text-shadow: 2px 0 #f472b6;
  animation: glitchTop 1.2s infinite linear alternate-reverse;
}
.glitch::after {
  color: #f472b6;
  z-index: 2;
  left: -2px;
  text-shadow: -2px 0 #a78bfa;
  animation: glitchBot 1.2s infinite linear alternate-reverse;
}
@keyframes glitch {
  0% { text-shadow: 2px 0 #f472b6, -2px 0 #a78bfa; }
  20% { text-shadow: -2px 0 #a78bfa, 2px 0 #f472b6; }
  40% { text-shadow: 2px 2px #7c3aed, -2px -2px #f472b6; }
  60% { text-shadow: 0 2px #7c3aed, 0 -2px #f472b6; }
  80% { text-shadow: 2px 0 #f472b6, -2px 0 #a78bfa; }
  100% { text-shadow: -2px 0 #a78bfa, 2px 0 #f472b6; }
}
@keyframes glitchTop {
  0% { transform: translate(0,0); }
  20% { transform: translate(-2px,-2px); }
  40% { transform: translate(-4px,2px); }
  60% { transform: translate(2px,-1px); }
  80% { transform: translate(-1px,2px); }
  100% { transform: translate(0,0); }
}
@keyframes glitchBot {
  0% { transform: translate(0,0); }
  20% { transform: translate(2px,2px); }
  40% { transform: translate(4px,-2px); }
  60% { transform: translate(-2px,1px); }
  80% { transform: translate(1px,-2px); }
  100% { transform: translate(0,0); }
}

/* Typewriter effect */
.typewriter {
  overflow: hidden;
  border-right: .15em solid #a78bfa;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .04em;
  animation: typing 2.2s steps(30, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #a78bfa; }
}
.typewriter-slow {
  overflow: hidden;
  border-right: .15em solid #a78bfa;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .04em;
  animation: typing-slow 3.5s steps(50, end), blink-caret .75s step-end infinite;
}
@keyframes typing-slow {
  from { width: 0 }
  to { width: 100% }
}

/* Glow effect for invitation */
.glow {
  text-shadow: 0 0 16px #f472b6, 0 0 32px #a78bfa;
  animation: glow 2.5s ease-in-out infinite;
}

@keyframes petrol-gradient {
  0% {
    background-position: 0% 50%;
    background-size: 300% 300%;
  }
  20% {
    background-position: 20% 60%;
    background-size: 320% 280%;
  }
  40% {
    background-position: 60% 40%;
    background-size: 280% 320%;
  }
  60% {
    background-position: 80% 60%;
    background-size: 320% 280%;
  }
  80% {
    background-position: 40% 60%;
    background-size: 280% 320%;
  }
  100% {
    background-position: 0% 50%;
    background-size: 300% 300%;
  }
}
.animate-petrol-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: petrol-gradient 3.5s linear infinite;
  filter: brightness(1.15) contrast(1.2) saturate(1.3);
}

.howdybun-3d {
  text-shadow:
    2px 2px 0 #b2b2b2,
    4px 4px 0 #7fffd4,
    6px 6px 0 #a78bfa,
    8px 8px 16px #2228,
    0 2px 24px #fff8;
}

/* === Noise/Grain Overlay === */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.13;
  background: url('https://www.transparenttextures.com/patterns/noise.png');
  mix-blend-mode: overlay;
}

/* === Neon Glow for Cards and Buttons === */
.neon-glow {
  box-shadow: 0 0 16px 4px #ff00cc, 0 0 32px 8px #00ffea;
  border: 2px solid #ff00cc;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.neon-glow:hover {
  box-shadow: 0 0 32px 8px #00ffea, 0 0 64px 16px #fffb00;
  border-color: #00ffea;
}

/* === Glitch Animation for Title === */
.glitch {
  position: relative;
  color: #fff;
  font-family: 'Howdybun', sans-serif;
  text-shadow: 0 0 8px #ff00cc, 0 0 32px #00ffea;
  animation: glitch-skew 2s infinite linear alternate-reverse;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  color: #ff00cc;
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
}
.glitch::after {
  color: #00ffea;
  z-index: 2;
  opacity: 0.5;
  left: 2px;
  top: 2px;
}
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(2deg, 1deg); }
  40% { transform: skew(-2deg, -1deg); }
  60% { transform: skew(1deg, -2deg); }
  80% { transform: skew(-1deg, 2deg); }
  100% { transform: skew(0deg); }
}

/* === Custom Neon Cursor === */

/* === Parallax Layer Classes === */
.parallax {
  will-change: transform;
  transition: transform 0.2s cubic-bezier(.25,.46,.45,.94);
}

/* === SVG Sticker Style === */
.sticker {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  width: 80px;
  height: 80px;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px #ff00cc) drop-shadow(0 0 24px #00ffea);
}

/* === Accessories for Fox and Arctic Fox === */
.svg-accessory {
  filter: drop-shadow(0 0 8px #ff00cc) drop-shadow(0 0 16px #00ffea);
}

/* === Hover Effects for Youthful Vibe === */
.card-modern:hover, .btn-primary:hover {
  filter: brightness(1.2) saturate(1.5);
}

/* === Extra Youthful Details === */
.glow {
  text-shadow: 0 0 8px #ff00cc, 0 0 16px #00ffea, 0 0 32px #fffb00;
}

/* === Electric Lightning for Neon Cursor === */
#neon-cursor .lightning {
  position: absolute;
  left: 0; top: 0;
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7) rotate(-10deg);
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1;
}
#neon-cursor.electric .lightning {
  opacity: 1;
  transform: scale(1.1) rotate(0deg);
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fffb00);
  animation: lightning-flicker 0.5s infinite alternate;
}
@keyframes lightning-flicker {
  0% { opacity: 1; filter: drop-shadow(0 0 8px #fff); }
  40% { opacity: 0.7; filter: drop-shadow(0 0 16px #fffb00); }
  60% { opacity: 1; filter: drop-shadow(0 0 24px #fff); }
  100% { opacity: 0.8; filter: drop-shadow(0 0 8px #fffb00); }
}

a, button, .btn-primary, .card-modern {
  cursor: pointer;
}

.neon-slogan {
  background: linear-gradient(90deg, #fff, #fffb00 40%, #ff00cc 80%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px #fffb00, 0 0 2px #ff00cc;
  filter: brightness(1.05);
  font-family: 'Howdybun', sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
}
.neon-slogan .dust {
  opacity: 0;
  filter: blur(1.2px) brightness(1.25) drop-shadow(0 0 6px #fffb00) drop-shadow(0 0 8px #ff00cc);
  animation: dust-fade-in 1.2s forwards;
  display: inline-block;
}
@keyframes dust-fade-in {
  0% { opacity: 0; filter: blur(4px) brightness(2) drop-shadow(0 0 16px #fff8); }
  60% { opacity: 0.7; filter: blur(1.2px) brightness(1.25) drop-shadow(0 0 6px #fffb00) drop-shadow(0 0 8px #ff00cc); }
  100% { opacity: 1; filter: blur(0.7px) brightness(1.1) drop-shadow(0 0 4px #fffb00) drop-shadow(0 0 6px #ff00cc); }
}

.neon-arrow-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s;
}
.neon-arrow {
  filter: drop-shadow(0 0 8px #fffb00) drop-shadow(0 0 16px #fff);
  animation: arrow-bounce 1.2s infinite cubic-bezier(.5,1.8,.5,1.2);
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px) scale(1.1); }
}
.neon-arrow-btn:hover .neon-arrow {
  filter: drop-shadow(0 0 16px #fffb00) drop-shadow(0 0 32px #fff) brightness(1.3);
  animation: arrow-bounce 0.5s infinite cubic-bezier(.5,1.8,.5,1.2);
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-18px) scale(1.04) rotate(-3deg); }
  100% { transform: translateY(0); }
}
.animate-float {
  animation: float 3.2s ease-in-out infinite;
}
@keyframes float-rev {
  0% { transform: translateY(0); }
  50% { transform: translateY(18px) scale(1.04) rotate(3deg); }
  100% { transform: translateY(0); }
}
.animate-float-rev {
  animation: float-rev 3.2s ease-in-out infinite;
}
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-32px) scale(1.08); }
}
.animate-bounce-slow {
  animation: bounce-slow 4.2s cubic-bezier(.4,0,.2,1) infinite;
}

/* --- Дуэт-переключатель --- */
.duet-toggle-btn {
  background: #f3f4f6;
  color: #7c3aed;
  border: none;
  border-radius: 2rem;
  padding: 0.75rem 2.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 12px #a78bfa22;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
  outline: none;
}
.duet-toggle-btn.active, .duet-toggle-btn:focus {
  background: linear-gradient(90deg, #f472b6 0%, #a78bfa 100%);
  color: #fff;
  box-shadow: 0 4px 24px #f472b6cc, 0 2px 12px #a78bfa88;
  transform: scale(1.08) rotate(-2deg);
  z-index: 2;
}
.duet-toggle-btn:not(.active):hover {
  background: #ede9fe;
  color: #a78bfa;
}
.duet-visual {
  min-height: 220px;
  position: relative;
}
.duet-side {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s;
}
.duet-side.intuition-side {
  pointer-events: auto;
}
.duet-side.logic-side {
  pointer-events: auto;
}
#intuition-side[style*='opacity: 1'], #logic-side[style*='opacity: 1'] {
  pointer-events: auto;
}
.font-intuition {
  font-family: 'Comic Sans MS', 'Comic Sans', 'Inter', cursive, sans-serif;
  letter-spacing: 0.01em;
}
.font-logic {
  font-family: 'Inter', 'Arial', monospace;
  letter-spacing: 0.04em;
}
@media (max-width: 600px) {
  .duet-visual { min-height: 320px; }
  .duet-text { font-size: 1.1rem !important; }
  .duet-icon { font-size: 2rem !important; }
}

/* --- WOW-блок дуэта: эффект стекла у подложки с точками --- */
.duet-glass-bg {
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 2.5em;
  border: 1.5px solid rgba(200,200,220,0.13);
  box-shadow: 0 4px 32px 0 #a78bfa11;
  overflow: hidden;
}
.duet-wow-text-row {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 1.5rem !important;
}
@media (min-width: 768px) {
.duet-wow-text-row {
    font-size: 2rem !important;
  }
}
.duet-wow-text-row { margin-bottom: 0.7em; }
.duet-wow-text-row:last-child { margin-bottom: 0; }
.duet-accent { transition: background 0.7s, color 0.7s, box-shadow 0.7s; border-radius: 0.5em; padding: 0 0.3em; }
.accent-intuition { background: #F9D8A7; color: #B980A1; animation: accent-cycle 6s infinite; }
.accent-calc { background: #B6E3F4; color: #5B6C8F; animation: accent-cycle 6s 2s infinite; }
.accent-design { background: #D1B3F7; color: #7C3AED; animation: accent-cycle 6s 3.5s infinite; }
.accent-logic { background: #A7B8D9; color: #3B4252; animation: accent-cycle 6s 5s infinite; }
.accent-emotion { background: #F7B3C2; color: #B980A1; animation: accent-cycle 6s 4s infinite; }
.accent-struct { background: #F3F4F6; color: #5B6C8F; animation: accent-cycle 6s 1s infinite; }
@keyframes accent-cycle {
  0%, 80%, 100% { box-shadow: 0 0 0 0 #b980a155; filter: brightness(1.1); }
  10%, 70% { box-shadow: 0 0 16px 4px #b980a1cc; filter: brightness(1.18); }
}
.duet-sep { color: #b0b0b0; font-weight: 400; font-size: 0.95em; letter-spacing: 0.04em; margin: 0 0.2em; }
@media (max-width: 900px) {
  .duet-wow-block .flex-row { flex-direction: column !important; gap: 0 !important; }
  .rainbow-svg, .calc-svg { height: 120px !important; }
}
@media (max-width: 600px) {
  .duet-wow-text-row { font-size: 1.1rem !important; }
  .rainbow-svg, .calc-svg { height: 80px !important; }
}

/* --- WOW-блок дуэта: цикличные анимации для всех элементов --- */
.rainbow-arc { stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0.7; }
.rainbow-arc1 { animation: rainbow-grow1 2.2s 0.2s cubic-bezier(.4,0,.2,1) infinite alternate; }
.rainbow-arc2 { animation: rainbow-grow2 2.2s 0.5s cubic-bezier(.4,0,.2,1) infinite alternate; }
.rainbow-arc3 { animation: rainbow-grow3 2.2s 0.8s cubic-bezier(.4,0,.2,1) infinite alternate; }
.rainbow-arc4 { animation: rainbow-grow4 2.2s 1.1s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes rainbow-grow1 { 0%,100% { stroke-dashoffset: 400; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rainbow-grow2 { 0%,100% { stroke-dashoffset: 400; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rainbow-grow3 { 0%,100% { stroke-dashoffset: 400; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rainbow-grow4 { 0%,100% { stroke-dashoffset: 400; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
.star { filter: drop-shadow(0 0 8px #fffbe9) drop-shadow(0 0 16px #ffe066); opacity: 0.7; }
.constellation .star { animation: star-shine 2.5s linear infinite alternate; }
@keyframes star-shine { 0% { opacity: 0.5; r: 2.2; } 50% { opacity: 1; r: 3.2; } 100% { opacity: 0.7; r: 2.2; } }
.constellation polyline, .constellation line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: constellation-line 2.8s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes constellation-line { 0%,100% { stroke-dashoffset: 60; opacity: 0.2; } 50% { stroke-dashoffset: 0; opacity: 1; } }
.calc-graph { stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0.8; animation: graph-grow 2.5s 1.2s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes graph-grow { 0%,100% { stroke-dashoffset: 400; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
.calc-dot { opacity: 0; transform: scale(0.7); }
.dot1 { animation: dot-pop 2.5s 1.5s infinite alternate; }
.dot2 { animation: dot-pop 2.5s 1.7s infinite alternate; }
.dot3 { animation: dot-pop 2.5s 1.9s infinite alternate; }
.dot4 { animation: dot-pop 2.5s 2.1s infinite alternate; }
.dot5 { animation: dot-pop 2.5s 2.3s infinite alternate; }
@keyframes dot-pop { 0%,100% { opacity: 0; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
.pie-slice1 { stroke-dasharray: 69 69; stroke-dashoffset: 69; animation: pie1-grow 2.5s 2.2s infinite alternate; }
.pie-slice2 { stroke-dasharray: 46 92; stroke-dashoffset: 46; animation: pie2-grow 2.5s 2.7s infinite alternate; }
.pie-slice3 { stroke-dasharray: 23 115; stroke-dashoffset: 23; animation: pie3-grow 2.5s 3.2s infinite alternate; }
@keyframes pie1-grow { 0%,100% { stroke-dashoffset: 69; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pie2-grow { 0%,100% { stroke-dashoffset: 46; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pie3-grow { 0%,100% { stroke-dashoffset: 23; opacity: 0.5; } 50% { stroke-dashoffset: 0; opacity: 1; } }

.duet-wow-center { position: relative; width: 100%; }
.duet-svg-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.rainbow-svg { opacity: 1; max-width: 600px; max-height: 340px; width: 100%; height: auto; left: 0; top: 0; }
.calc-svg { opacity: 0.95; max-width: 420px; max-height: 320px; width: 100%; height: auto; right: 0; bottom: 0; }
.duet-wow-text-row { position: relative; z-index: 10; }
@media (max-width: 900px) {
  .rainbow-svg { max-width: 340px; max-height: 180px; }
  .calc-svg { max-width: 220px; max-height: 120px; }
}

/* --- Projects Meaning Section --- */
.projects-meaning-section {
  margin: 4rem 0 4rem 0;
  padding: 3rem 2rem;
  background: linear-gradient(120deg, #fff 0%, #fce7f3 40%, #a78bfa 100%);
  border-radius: 2.5rem;
  box-shadow: 0 12px 48px 0 #a78bfa33, 0 3px 12px 0 #7c3aed22;
  border: 2.5px solid #a78bfa55;
  position: relative;
  z-index: 2;
}
.projects-meaning-section::before {
  content: "";
  display: block;
  width: 90px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f472b6 0%, #a78bfa 100%);
  margin: 0 auto 2.5rem auto;
  box-shadow: 0 2px 12px #a78bfa55;
}
.projects-meaning-section .container {
  position: relative;
  z-index: 2;
}
.projects-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .projects-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .projects-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.projects-cards .card {
  transition: box-shadow 0.2s, filter 0.2s;
}
.projects-cards .card:hover {
  /* Убираем transform */
  box-shadow: 0 4px 16px rgba(124,58,237,0.16);
  filter: brightness(1.05);
}
.card-shape, .card-meaning {
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px 0 #a78bfa33, 0 1.5px 6px 0 #7c3aed22;
  border: 2px solid transparent;
  min-height: 240px;
  color: #222;
  background-clip: padding-box;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s, filter 0.2s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.card-shape {
  border-color: #f472b6;
  background: linear-gradient(135deg, #fff 60%, #fce7f3 100%);
}
.card-meaning {
  border-color: #67e8f9;
  background: linear-gradient(135deg, #e0f2fe 60%, #ede9fe 100%);
}
.card-shape:hover, .card-meaning:hover {
  box-shadow: 0 12px 48px 0 #f472b6cc, 0 3px 12px 0 #a78bfa88;
  border: 2px solid #f472b6;
}
.card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 16px #a78bfa55);
  transition: filter 0.3s, transform 0.2s;
}
.card-shape:hover .card-icon, .card-meaning:hover .card-icon {
  filter: drop-shadow(0 0 24px #ff00cc) drop-shadow(0 0 32px #00ffea);
  transform: scale(1.12) rotate(-4deg);
}
.card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color 0.3s;
}
.card-shape h3 {
  color: #f472b6;
}
.card-meaning h3 {
  color: #06b6d4;
}
.card p {
  text-align: center;
  font-size: 1rem;
  color: #6b7280;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s, color 0.3s;
}
.card:hover p,
.card:focus p {
  opacity: 1;
  color: #333;
}
/* Анимация появления карточек */
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.animate-fade-in-up {
  animation: fade-in-up 1.2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes card-pop {
  0% { opacity: 0; transform: scale(0.92) translateY(40px); }
  60% { opacity: 1; transform: scale(1.04) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-card-pop {
  animation: card-pop 1.1s cubic-bezier(.4,0,.2,1) both;
}
/* Акцент для ключевых слов */
.section-title .text-fuchsia-600 {
  color: #f472b6;
  text-shadow: 0 0 8px #f472b6aa, 0 2px 12px #a78bfa88;
}
.section-title .text-cyan-600 {
  color: #06b6d4;
  text-shadow: 0 0 8px #67e8f9aa, 0 2px 12px #a78bfa88;
}
.section-subtitle {
  font-weight: 500;
  color: #7c3aed;
  background: linear-gradient(90deg, #f472b6 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
/* Неоновая рамка при наведении */
.card-shape:hover, .card-meaning:hover {
  box-shadow: 0 0 24px 8px #ff00cc, 0 0 32px 12px #00ffea;
  border-width: 2.5px;
}
/* Микровзаимодействие: bounce для иконки */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px) scale(1.08); }
}
.group:hover .card-icon {
  animation: bounce 0.7s;
}

.projects-cards .card-icon, .projects-cards .card-icon:hover, .projects-cards .group:hover .card-icon {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* === Glassmorphism Header === */
.glass-header {
  position: relative;
  width: auto;
  max-width: calc(100vw - 2.4em);
  min-width: 0;
  margin: 1.2em auto;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 8px 48px 0 #7c3aed33, 0 2px 8px #fff8;
  border-radius: 2.5em;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 1.2rem clamp(1.2rem, 5vw, 3rem);
  z-index: 20;
  border: 1.5px solid rgba(200,200,220,0.13);
}
.glass-header .logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
}
.glass-logo-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 24px 0 #b6c6e0cc, 0 2px 8px #fff8;
  background: #fff;
  border: 2px solid #eaeaea;
  margin-bottom: 0.2em;
  transition: box-shadow 0.3s, transform 0.2s;
}
.glass-logo-img:hover {
  box-shadow: 0 8px 32px #dbeafecc, 0 4px 16px #e0e7ef88;
  transform: scale(1.06) rotate(-2deg);
}
.glass-header nav {
  background: rgba(255,255,255,0.3);
  border-radius: 1.5em;
  box-shadow: 0 2px 12px #e0e7ef22;
  padding: 0.5em 1.5em;
  display: flex;
  gap: 1.2em;
  align-items: center;
}
.glass-header .flex.gap-2 {
  background: rgba(255,255,255,0.3);
  border-radius: 1.5em;
  box-shadow: 0 2px 12px #e0e7ef22;
  padding: 0.3em 0.8em;
}
@media (max-width: 900px) {
  .glass-header { flex-direction: column; align-items: center; padding: 1.2rem 1rem; }
  .glass-header nav { margin-top: 0.7em; }
  .glass-header .logo-block { align-items: center; }
}
@media (max-width: 600px) {
  .glass-header {
    padding: 0.15rem 0.2rem;
    min-height: 44px;
    gap: 0.15em;
  }
  .glass-header .logo-block {
    gap: 0.3em;
  }
  .glass-logo-img {
    width: 64px;
    height: 64px;
  }
  .glass-header nav a,
  .glass-header .nav-link {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.3rem !important;
  }
  .glass-header .flex.gap-2 button {
    font-size: 0.8rem !important;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
  }
}

/* === Mobile Menu === */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.97);
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 1.5rem;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  font-size: 2rem;
  color: #7C3AED;
  font-weight: 700;
  text-decoration: none;
  margin: 0.5rem 0;
  transition: color 0.2s;
}
.mobile-menu a:hover {
  color: #f472b6;
}

@media (max-width: 600px) {
  .mobile-menu {
    font-size: 1.2rem;
  }
}

/* === Кастомные анимации для иконок преимуществ === */
@keyframes lightning-jump {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  10% { transform: translateY(-10px) scale(1.08) rotate(-8deg); }
  20% { transform: translateY(-22px) scale(1.12) rotate(8deg); }
  30% { transform: translateY(-10px) scale(1.08) rotate(-8deg); }
  40% { transform: translateY(-22px) scale(1.12) rotate(8deg); }
  50% { transform: translateY(-10px) scale(1.08) rotate(-8deg); }
  60% { transform: translateY(0) scale(1) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.animate-lightning-jump {
  animation: lightning-jump 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lightning-flash {
  0%, 100% { filter: drop-shadow(0 0 0px #fff) brightness(1); opacity: 1; }
  10% { filter: drop-shadow(0 0 16px #fffb00) brightness(1.5); opacity: 1; }
  20% { filter: drop-shadow(0 0 32px #fff) brightness(2); opacity: 0.7; }
  30% { filter: drop-shadow(0 0 16px #fffb00) brightness(1.5); opacity: 1; }
  40% { filter: drop-shadow(0 0 32px #fff) brightness(2); opacity: 0.7; }
  50% { filter: drop-shadow(0 0 0px #fff) brightness(1); opacity: 1; }
  100% { filter: drop-shadow(0 0 0px #fff) brightness(1); opacity: 1; }
}
.animate-lightning-flash {
  animation: lightning-flash 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes handshake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  10% { transform: translateY(-6px) rotate(-4deg); }
  20% { transform: translateY(6px) rotate(4deg); }
  30% { transform: translateY(-6px) rotate(-4deg); }
  40% { transform: translateY(6px) rotate(4deg); }
  50% { transform: translateY(-6px) rotate(-4deg); }
  60% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.animate-handshake {
  animation: handshake 2.5s cubic-bezier(.4,0,.2,1) infinite;
}

.simple-arrow {
  transition: transform 0.3s;
}
.simple-arrow:hover {
  transform: translateY(6px) scale(1.08);
}

.bg-hero {
  min-height: 100vh;
  background-color: #6d28d9; /* fallback */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 40px),
    linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
  background-size: 40px 40px, 40px 40px, cover;
  background-position: 0 0, 0 0, 0 0;
}

/* Уменьшаем размер текста в карточках */
.card-modern h3, .card-shape h3, .card-meaning h3 {
  font-size: 1.1rem;
}
.card-modern p, .card-shape p, .card-meaning p {
  font-size: 0.95rem;
}

@media (max-width: 400px) {
  .hero-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}