/* ═══════════════════════════════════════════════════════════════
   BLOOM Agency — Visual Layer
   Все доп.эффекты в отдельном файле чтобы не ломать базовые стили
═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO: animated gradient noise bg ────────────────────── */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 60%, rgba(255,59,139,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(255,107,172,.12) 0%, transparent 55%);
  animation: heroGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGlow {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.06); }
}

/* Particle canvas */
#particleCanvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
}

/* ── 2. HEADER: glass + animated bottom line ─────────────────── */
.header {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
.header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 30%, #ff6bac 60%, transparent 100%);
  background-size: 200% 100%;
  animation: headerLine 3s linear infinite;
}
@keyframes headerLine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── 3. LOGO hover ───────────────────────────────────────────── */
.header__logo-img {
  transition: filter .4s, transform .4s;
}
.header__logo-img:hover {
  filter: drop-shadow(0 0 12px rgba(255,59,139,.5));
  transform: scale(1.04) rotate(-1deg);
}

/* ── 4. HERO TITLE: word reveal ─────────────────────────────── */
/* Важно: span.hero__title--shimmer и span.hero__title--pink НЕ трогаем */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  animation: wordReveal .65s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes wordReveal {
  to { opacity: 1; transform: none; }
}

/* Shimmer и pink span внутри заголовка — сохраняем их display */
.hero__title--shimmer,
.hero__title--pink {
  display: inline !important;
}

/* ── 5. HERO BADGES: stagger pop ────────────────────────────── */
.hero__badge {
  opacity: 0;
  transform: scale(.8) translateY(8px);
  animation: badgePop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  transition: background var(--ease), transform var(--ease) !important;
}
.hero__badge:hover {
  background: rgba(255,59,139,.3) !important;
  transform: translateY(-2px) scale(1.05) !important;
}
@keyframes badgePop {
  to { opacity: 1; transform: none; }
}

/* ── 6. BUTTON effects ───────────────────────────────────────── */
.btn--pulse::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--pink), #ff6bac);
  opacity: 0; filter: blur(10px); z-index: -1;
  transition: opacity .3s;
}
.btn--pulse:hover::before { opacity: .5; }

/* Shine sweep */
.btn { overflow: hidden !important; }
.btn:hover .btn-shine {
  animation: btnShine .5s ease forwards;
}
@keyframes btnShine {
  from { left: -100%; }
  to   { left: 150%; }
}

/* ── 7. STREAM PREVIEWS ──────────────────────────────────────── */
.stream-preview {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s !important;
}
.stream-preview:hover {
  transform: scale(1.025) translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(255,59,139,.25) !important;
}

/* ── 8. STAT NUMBERS: gradient ───────────────────────────────── */
.about__stat-num {
  background: linear-gradient(135deg, var(--pink) 0%, #ff6bac 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 6px rgba(255,59,139,.25));
}

/* ── 9. BARRIER arrow pulse ──────────────────────────────────── */
.barrier-card__arrow {
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { transform: translateX(0); color: var(--text-3); }
  50%     { transform: translateX(4px); color: var(--pink); }
}
.barrier-card:hover .barrier-card__arrow {
  animation: none !important;
  transform: translateX(6px);
  color: var(--pink);
}

/* ── 10. DREAM CARDS: fixed overlay, border glow ────────────── */
/* Override base style — ensure image is visible */
.dream-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s !important;
}
.dream-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255,59,139,.6) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 28px rgba(255,59,139,.2) !important;
}
/* Remove the broken ::after that was hiding images */
.dream-card::after { display: none !important; }

/* ── 11. REVIEWS: animated gradient bg ──────────────────────── */
.reviews {
  background: linear-gradient(135deg, var(--pink) 0%, #e8196b 40%, #ff6bac 70%, var(--pink) 100%) !important;
  background-size: 300% 300% !important;
  animation: reviewsBg 8s ease infinite !important;
}
@keyframes reviewsBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 12. REVIEW CARDS: hover lift ───────────────────────────── */
.review-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s !important;
}
.review-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.14) !important;
}
.review-card__avatar {
  animation: avatarRing 3s ease-in-out infinite;
}
@keyframes avatarRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,139,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(255,59,139,0); }
}

/* ── 13. FAQ smooth ──────────────────────────────────────────── */
.faq-item__a {
  transition: max-height .5s cubic-bezier(.16,1,.3,1), padding .5s !important;
}
.faq-item.open .faq-item__q { letter-spacing: .3px; }

/* ── 14. APPLY blobs ─────────────────────────────────────────── */
.apply__blob--1 { animation: blobDrift1 10s ease-in-out infinite !important; }
.apply__blob--2 { animation: blobDrift2 12s ease-in-out infinite !important; }
@keyframes blobDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-20px) scale(1.1); }
  66%     { transform: translate(-20px,30px) scale(.95); }
}
@keyframes blobDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-25px,20px) scale(1.08); }
  66%     { transform: translate(20px,-25px) scale(.92); }
}

/* ── 15. MARQUEE: gradient fade edges ───────────────────────── */
.marquee-wrap { position: relative; }
.marquee-wrap--pink::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  width: 60px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--pink), transparent);
}
.marquee-wrap--pink::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0;
  width: 60px; z-index: 2; pointer-events: none;
  background: linear-gradient(-90deg, var(--pink), transparent);
}

/* ── 16. SCROLL PROGRESS BAR ─────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--pink), #ff6bac, var(--pink));
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  transition: width .1s linear;
  pointer-events: none;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ── 17. SPARKLE ─────────────────────────────────────────────── */
.sparkle {
  position: fixed; pointer-events: none; z-index: 9997;
  border-radius: 50%;
  animation: sparkleFly var(--dur, .8s) ease forwards;
}
@keyframes sparkleFly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx,0),var(--ty,-60px)) scale(0); }
}

/* ── 18. FOOTER gradient ─────────────────────────────────────── */
.footer__top {
  background: linear-gradient(135deg, var(--pink) 0%, #e8196b 50%, #ff6bac 100%) !important;
  position: relative; overflow: hidden;
}
.footer__top::before {
  content: ''; position: absolute; top: -50%; left: -10%;
  width: 120%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.1) 0%, transparent 60%);
  pointer-events: none;
}

/* ── 19. CHAT card depth ─────────────────────────────────────── */
.chat-card {
  box-shadow:
    0 32px 80px rgba(255,59,139,.28),
    0 8px 24px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ── 20. FORM field micro-anim ───────────────────────────────── */
.form-group {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   FULL RESPONSIVE — все экраны
═══════════════════════════════════════════════════════════ */

/* ── Large desktop 1400+ ─────────────────────────────────────── */
@media (min-width: 1400px) {
  :root { --W: 1280px; }
  .hero__title { font-size: 76px; }
  .section { padding: 100px 0; }
  .adv-card__img-wrap { width: 240px; min-width: 240px; }
  .dream-card { width: 300px; height: 420px; }
}

/* ── Standard desktop 1200-1399 ──────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1399px) {
  :root { --W: 1140px; }
}

/* ── Small desktop / large laptop 1024-1199 ─────────────────── */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root { --W: 960px; }
  .hero__title { font-size: clamp(32px, 5vw, 58px); }
  .chat-card { max-width: 300px; }
  .adv-card__img-wrap { width: 180px; min-width: 180px; }
}

/* ── Tablet landscape 768-1023 ───────────────────────────────── */
@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr !important; text-align: center; }
  .hero__content { max-width: 100%; }
  .hero__badges { justify-content: center; }
  .hero__btn { margin: 0 auto; }
  .hero__chat { display: none !important; }
  .about__inner { grid-template-columns: 1fr !important; }
  .what__inner { grid-template-columns: 1fr !important; gap: 32px; }
  .barriers__grid { grid-template-columns: 1fr !important; }
  .about__streams { height: 320px; }
  .advantages__grid { grid-template-columns: 1fr !important; }
  .adv-card, .adv-card--alt { flex-direction: column !important; }
  .adv-card__img-wrap { width: 100% !important; min-width: unset !important; height: 200px; }
}

/* ── Tablet portrait 600-767 ─────────────────────────────────── */
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }

  /* Hero */
  .hero { padding-top: var(--header-h); min-height: auto; padding-bottom: 60px; }
  .hero__inner { padding: 60px 20px 40px; gap: 32px; }
  .hero__title { font-size: clamp(30px, 7vw, 42px); letter-spacing: -.5px; margin-bottom: 24px; }
  .hero__eyebrow { font-size: 11px; padding: 6px 14px; }
  .hero__badges { gap: 6px; margin-bottom: 28px; }
  .hero__badge { font-size: 11px; padding: 4px 10px; }
  .hero__btn { font-size: 14px; padding: 14px 28px; }

  /* Header */
  .header__nav, .header__cta-wrap { display: none !important; }
  .burger { display: flex !important; }
  .mobile-nav { display: flex !important; }
  .header__logo-img { height: 38px; }

  /* About */
  .about__inner { grid-template-columns: 1fr !important; gap: 32px; margin-bottom: 40px; }
  .about__title { font-size: clamp(20px, 5vw, 28px); }
  .about__streams { grid-template-columns: 1fr 1fr !important; height: 220px !important; }
  .about__stream--big { grid-column: 1; grid-row: 1 / 3; }
  .about__streams-col { display: contents !important; }
  .about__stats { flex-wrap: wrap; }
  .about__stat { min-width: 140px; padding: 20px 16px; }
  .about__stat-num { font-size: 26px; }
  .about__stat-divider { display: none; }

  /* Advantages */
  .advantages__grid { grid-template-columns: 1fr !important; }
  .adv-card, .adv-card--alt { flex-direction: column !important; min-height: auto !important; }
  .adv-card__img-wrap { width: 100% !important; min-width: unset !important; height: 180px !important; }
  .adv-card__text { padding: 24px 20px; }

  /* What */
  .what__inner { grid-template-columns: 1fr !important; gap: 28px; }
  .what__title { font-size: clamp(26px, 6vw, 36px); }
  .what__gif-wrap { aspect-ratio: 16/9; }

  /* Barriers */
  .barriers__grid { grid-template-columns: 1fr !important; gap: 14px; }
  .barrier-card { grid-template-columns: 1fr !important; }
  .barrier-card__arrow {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px; font-size: 16px !important;
    animation: none !important;
  }
  .barrier-card__problem, .barrier-card__solution { padding: 18px 16px; }

  /* Requirements */
  .req__grid { grid-template-columns: 1fr !important; gap: 16px; }
  .req-card { padding: 28px 20px; }
  .req-card__gif-wrap { width: 90px; height: 90px; }

  /* Dreams */
  .dreams__slider-wrap { padding: 0 40px; }
  .dream-card { width: 230px !important; height: 320px !important; }
  .dreams__arrow { width: 40px; height: 40px; font-size: 22px; }

  /* Apply */
  .apply__form-box { padding: 28px 20px !important; }
  .apply__title { font-size: clamp(20px, 5vw, 28px); }
  .form-row { grid-template-columns: 1fr !important; }
  .time-inputs { flex-wrap: wrap; gap: 6px; }

  /* Reviews */
  .reviews__grid { grid-template-columns: 1fr !important; }
  .reviews__subtitle { font-size: 14px; }
  .reviews__disclaimer { font-size: 12px; padding: 14px 16px; }
  .reviews__slider-wrap { max-width: 100%; padding: 0 48px; }
  .reviews__arrow--prev { left: 0; }
  .reviews__arrow--next { right: 0; }

  /* FAQ */
  .faq-item__q { font-size: 14px; padding: 18px 4px; }
  .faq__cta { padding: 24px 20px; }

  /* Footer */
  .footer__top-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer__bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .footer__bottom-inner span { display: none; }

  /* WOW disable heavy effects on mobile */
  #particleCanvas { display: none; }
  .hero__title .word { animation-duration: .4s; }
}

/* ── Small mobile 480 ────────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .hero__title { font-size: clamp(26px, 8vw, 34px); }
  .hero__eyebrow { font-size: 10px; white-space: normal !important; text-align: center; }
  .about__streams { height: 180px !important; gap: 8px !important; }
  .dream-card { width: 200px !important; height: 290px !important; }
  .dream-card__title { font-size: 16px; }
  .req__grid { grid-template-columns: 1fr !important; }
  .chat-card { max-width: 100%; }
  .section-title { font-size: clamp(22px, 6vw, 30px); }
  .section { padding: 48px 0; }
  .adv-card__img-wrap { height: 150px !important; }
  .exit-popup__box { padding: 28px 18px; }
  .exit-popup__title { font-size: 22px; }
  .doc-modal__box { padding: 20px 16px; }
}

/* ── Very small 360 ──────────────────────────────────────────── */
@media (max-width: 380px) {
  .hero__title { font-size: 26px; }
  .btn--lg { font-size: 14px !important; padding: 14px 24px !important; }
  .dream-card { width: 180px !important; height: 270px !important; }
  .about__streams { grid-template-columns: 1fr !important; height: auto !important; }
  .about__stream--big { height: 180px; grid-row: 1; }
  .about__streams-col .about__stream { height: 130px; grid-column: 1; }
}

/* ── Disable mouse effects on touch devices ──────────────────── */
@media (pointer: coarse) {
  body { cursor: auto !important; }
  .cursor-dot, .cursor-bubble { display: none !important; }
  .adv-card, .req-card, .barrier-card {
    transform: none !important;
    transition: box-shadow var(--ease), border-color var(--ease) !important;
  }
  .btn--pulse { animation: btnpulse 2.5s ease-in-out infinite; }
  .hero__title .word { animation-duration: .4s; }
}


/* ── 1. HERO: animated gradient noise bg + floating particles ── */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 60%, rgba(255,59,139,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(255,107,172,.12) 0%, transparent 55%);
  animation: heroGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGlow {
  0%   { opacity: .7; transform: scale(1) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.08) rotate(2deg); }
}

/* Particle canvas */
#particleCanvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .55;
}

/* ── 2. HEADER: glass morphism with animated border ─────────── */
.header {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,59,139,.1) !important;
}
.header::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), #ff6bac, transparent);
  background-size: 200% 100%;
  animation: headerLine 3s linear infinite;
  width: 100%;
}
@keyframes headerLine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── 3. LOGO: subtle pulse glow ─────────────────────────────── */
.header__logo-img {
  filter: drop-shadow(0 0 0px rgba(255,59,139,0));
  transition: filter .4s, transform .4s;
}
.header__logo-img:hover {
  filter: drop-shadow(0 0 12px rgba(255,59,139,.5));
  transform: scale(1.04) rotate(-1deg);
}

/* ── 4. HERO TITLE: word-by-word reveal ─────────────────────── */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-30deg);
  animation: wordReveal .7s cubic-bezier(.16,1,.3,1) forwards;
  transform-origin: bottom;
}
@keyframes wordReveal {
  to { opacity: 1; transform: none; }
}

/* ── 5. HERO BADGES: stagger pop-in ────────────────────────── */
.hero__badge {
  opacity: 0;
  transform: scale(.8) translateY(10px);
  animation: badgePop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  transition: background var(--ease), transform var(--ease) !important;
}
.hero__badge:hover {
  background: rgba(255,59,139,.35) !important;
  transform: translateY(-2px) scale(1.05) !important;
}
@keyframes badgePop {
  to { opacity: 1; transform: none; }
}

/* ── 6. MAGNETIC BUTTONS: handled in JS, CSS side ──────────── */
.btn--primary-mag,
.btn--pulse {
  position: relative;
  overflow: visible !important;
}
.btn--pulse::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--pink), #ff6bac);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .3s;
  z-index: -1;
}
.btn--pulse:hover::before { opacity: .6; }

/* Extra shine sweep on buttons */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  transition: none;
}
.btn:hover::after {
  animation: btnShine .55s ease forwards;
}
@keyframes btnShine {
  to { left: 150%; }
}

/* ── 7. SECTION EYEBROW: animated underline ────────────────── */
.section__eyebrow {
  position: relative;
  overflow: hidden;
}
.section__eyebrow::after {
  content: '';
  position: absolute; bottom: 0; left: -100%; right: 100%;
  height: 1px;
  background: var(--pink);
  transition: left .5s, right .5s;
}

/* ── 8. ABOUT STREAMS: hover lift + glow ────────────────────── */
.stream-preview {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s !important;
}
.stream-preview:hover {
  transform: scale(1.025) translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(255,59,139,.25) !important;
}

/* ── 9. STAT NUMBERS: gradient color ────────────────────────── */
.about__stat-num {
  background: linear-gradient(135deg, var(--pink) 0%, #ff6bac 50%, #ff3b8b 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 8px rgba(255,59,139,.3));
}

/* ── 10. ADV CARDS: tilt effect (JS-driven), CSS foundation ── */
.adv-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .1s linear, box-shadow .3s !important;
}

/* ── 11. BARRIER CARDS: animated arrow ──────────────────────── */
.barrier-card__arrow {
  font-size: 22px !important;
  background: linear-gradient(135deg, #fff5f9, #fff) !important;
  transition: transform .3s, color .3s !important;
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { transform: translateX(0); color: var(--text-3); }
  50%      { transform: translateX(4px); color: var(--pink); }
}
.barrier-card:hover .barrier-card__arrow {
  animation: none;
  transform: translateX(6px);
  color: var(--pink);
}

/* ── 12. REQ CARDS: animated ring gradient ──────────────────── */
.req-card__gif-wrap {
  background: linear-gradient(white,white) padding-box,
    conic-gradient(from var(--req-angle, 0deg), var(--pink), #ff6bac, #ffd6ea, var(--pink)) border-box !important;
  border: 3px solid transparent !important;
  animation: none !important;
}

/* ── 13. REVIEWS SECTION: animated gradient bg ──────────────── */
.reviews {
  background: linear-gradient(135deg, var(--pink) 0%, #e8196b 40%, #ff6bac 70%, var(--pink) 100%) !important;
  background-size: 300% 300% !important;
  animation: reviewsBg 8s ease infinite !important;
}
@keyframes reviewsBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 15. REVIEW CARDS: float in stagger ────────────────────── */
.review-card {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s !important;
}
.review-card:hover {
  transform: translateY(-8px) rotate(.3deg) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.15) !important;
}

/* ── 16. REVIEW AVATAR: ring pulse ──────────────────────────── */
.review-card__avatar {
  animation: avatarRing 3s ease-in-out infinite;
}
@keyframes avatarRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,139,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(255,59,139,0); }
}

/* ── 17. FAQ: smooth expand with easing ─────────────────────── */
.faq-item__a {
  transition: max-height .5s cubic-bezier(.16,1,.3,1), padding .5s cubic-bezier(.16,1,.3,1) !important;
}
.faq-item__q {
  transition: color .2s, letter-spacing .3s !important;
}
.faq-item.open .faq-item__q {
  letter-spacing: .3px;
}

/* ── 18. FORM: floating labels effect ───────────────────────── */
.form-group { position: relative; }
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
  /* JS handles this — CSS foundation */
}
.form-input:focus {
  transform: translateY(-1px);
}

/* ── 19. APPLY SECTION: animated blobs ──────────────────────── */
.apply__blob--1 {
  animation: blobDrift1 10s ease-in-out infinite !important;
}
.apply__blob--2 {
  animation: blobDrift2 12s ease-in-out infinite !important;
}
@keyframes blobDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-20px) scale(1.1); }
  66%     { transform: translate(-20px,30px) scale(.95); }
}
@keyframes blobDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-25px,20px) scale(1.08); }
  66%     { transform: translate(20px,-25px) scale(.92); }
}

/* ── 20. MARQUEE: gradient fade edges ───────────────────────── */
.marquee-wrap {
  position: relative;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2;
  pointer-events: none;
}
.marquee-wrap--pink::before {
  left: 0;
  background: linear-gradient(90deg, var(--pink), transparent);
}
.marquee-wrap--pink::after {
  right: 0;
  background: linear-gradient(-90deg, var(--pink), transparent);
}

/* ── 21. SCROLL PROGRESS BAR ────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--pink), #ff6bac, var(--pink));
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  transition: width .1s linear;
  pointer-events: none;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ── 22. SECTION DIVIDERS: wavy pink lines ──────────────────── */
.section-divider {
  width: 100%; overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.section-divider svg { display: block; width: 100%; }

/* ── 23. STATS: number flip on hover ────────────────────────── */
.about__stat {
  position: relative;
  overflow: hidden;
}
.about__stat::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--pink-pale), rgba(255,240,247,.4));
  opacity: 0; border-radius: 0;
  transition: opacity .3s;
}
.about__stat:hover::before { opacity: 1; }

/* ── 24. CHAT CARD: glass depth ─────────────────────────────── */
.chat-card {
  box-shadow:
    0 32px 80px rgba(255,59,139,.3),
    0 8px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,59,139,.15) !important;
}

/* ── 25. FOOTER: gradient background ────────────────────────── */
.footer__top {
  background: linear-gradient(135deg, var(--pink) 0%, #e8196b 50%, #ff6bac 100%) !important;
  position: relative; overflow: hidden;
}
.footer__top::before {
  content: '';
  position: absolute; top: -50%; left: -10%;
  width: 120%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}

/* ── 26. TYPEWRITER cursor on hero subtitle ─────────────────── */
.typewriter-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--pink);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink .8s step-end infinite;
}
@keyframes cursorBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* ── 27. SPARKLE particles on CTA hover (JS-driven) ─────────── */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  border-radius: 50%;
  animation: sparkleFly var(--dur, .8s) ease forwards;
}
@keyframes sparkleFly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx,0),var(--ty,-60px)) scale(0); }
}

/* ── 28. GLASSMORPHISM cards in barriers ────────────────────── */
.barrier-card__solution {
  background: linear-gradient(135deg, #f0fff9 0%, rgba(240,255,249,.7) 100%) !important;
  backdrop-filter: blur(8px);
}

/* ── 29. MOBILE improvements ────────────────────────────────── */
@media (max-width: 768px) {
  #particleCanvas { display: none; }
  .hero__title .word { animation-duration: .5s; }
}

/* ── FIXES 2026-11 ─────────────────────────────────────────── */
/* Список стран — всегда прямо под полем телефона (раньше улетал по экрану) */
.country-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  max-width: calc(100vw - 32px);
}
/* поле телефона поверх соседних полей, пока список открыт */
.form-group.fg-open,
.form-group:has(.country-dropdown:not(.hidden)) { z-index: 30; }

/* «О нас» на телефоне: большое видео слева, два маленьких справа,
   без наезда на блок с цифрами */
@media (max-width: 480px) {
  .about__streams {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    height: 260px !important;
    gap: 8px !important;
  }
  .about__stream--big { grid-column: 1 !important; grid-row: 1 / 3 !important; height: auto !important; }
  .about__streams-col { display: contents !important; }
  .about__streams-col .about__stream { grid-column: 2 !important; height: auto !important; }
}

/* Сообщение об ошибке отправки формы */
.form-submit-error { display: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff0f3; border: 1px solid #ffc2d1; color: #b4234d; font-size: 13px; line-height: 1.5; text-align: center; }
.form-submit-error a { color: #b4234d; font-weight: 700; text-decoration: underline; }