:root{
  --bg0:#070a10;
  --bg1:#0b1220;
  --text:#d8f2ff;
  --muted:#87a8b8;
  --cyan:#00e5ff;
  --magenta:#ff00aa;
  --violet:#8b5cff;
  --cta:#ff9900;
  --ctaText:#111820;
  --prose: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --glass-radius: 28px;
  --card-radius: 24px;
}

*{box-sizing:border-box}
/* auto: scroll-driven видео/анимации не конфликтуют с плавным скроллом браузера */
html{
  scroll-behavior:auto;
  background-color: var(--bg0);
}
/* Прозрачный body: иначе в Safari фон body перекрывает fixed-видео с отрицательным z-index */
body{
  margin:0;
  color:var(--text);
  background:transparent;
  font-family: var(--prose);
}

body.theme-light{
  --bg0:#f5f8ff;
  --bg1:#eef2ff;
  --text:#0b1220;
  --muted:#365268;
  --cyan:#007a8a;
  --magenta:#b50067;
  --violet:#5a3cff;
  --cta:#ff9900;
  --ctaText:#111820;
}

html:has(body.theme-light){
  background-color: #f5f8ff;
}

.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.24) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 62%, rgba(0,229,255,.26) 0%, transparent 100%),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(139,92,255,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Над видео, под контентом (.page) */
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.028;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px, transparent 1px, transparent 3px);
}

body.theme-light .scanlines{ opacity:.036; }

/* ScrollyVideo: z-index 0 — в WebKit не уходить под непрозрачный фон body */
.scrolly-video{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:#000;
  overflow:hidden;
}

/* The library inserts wrappers; force any canvas/video to fill viewport */
.scrolly-video canvas,
.scrolly-video video{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  transform: translate(-50%, -50%) !important;
}

/* Video can use object-fit; canvas just stretches via CSS size */
.scrolly-video video{
  object-fit:cover !important;
}

/* Our vignette overlay stays above the scrolly layer but below content */
.scrolly-video::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: none;
}

body.theme-light .scrolly-video::after{
  background: none;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ScrollyVideo manages its own scroll height (sticky/full) */

.page{
  position:relative;
  z-index:2;
}
.container{ width:min(980px, 92vw); margin:0 auto; }

.container--reviews-wide{
  width: min(1220px, 95vw);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding:0 0 5rem;
}
.hero__inner{ padding:0 0 0; text-align:center; }

.kicker{
  display:inline-block;
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid rgba(0,229,255,.22);
  padding:.45rem .7rem;
  background:rgba(0,0,0,.18);
}
.title{
  margin:1rem 0 .35rem;
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  line-height:1.25;
  font-size:clamp(2.1rem, 6.6vw, 4.2rem);
  letter-spacing:.03em;
  color:#efd586;
  text-shadow: 0 0 18px rgba(239,213,134,.35), 3px 3px 0 rgba(92,72,24,.95);
}
.subtitle{
  margin:0 0 1.3rem;
  color:#efd586;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hint{ margin:.8rem 0 0; color:rgba(216,242,255,.78); text-align:center; }

.section{ padding: 0 0 9rem; }
.section .container{ text-align:center; }
.panel{
  padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.5rem, 4vw, 2.5rem);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: var(--glass-radius);
  background: linear-gradient(
    155deg,
    rgba(22, 32, 52, 0.78) 0%,
    rgba(12, 18, 32, 0.72) 45%,
    rgba(18, 26, 44, 0.68) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 229, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.theme-light .panel{
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 255, 0.88) 100%);
  border: 1px solid rgba(0, 122, 138, 0.14);
  box-shadow: 0 8px 40px rgba(15, 25, 45, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.h2{
  margin:0 0 1.25rem;
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  font-size:clamp(.85rem, 2.2vw, 1rem);
  letter-spacing:.1em;
  line-height: 1.5;
  text-transform:uppercase;
  color:#c5dde8;
  text-shadow:0 0 20px rgba(0, 229, 255, 0.2);
}
body.theme-light .h2{
  color: #3d5a6b;
  text-shadow: none;
}
.p{
  margin:0 0 1.05rem;
  font-family: var(--prose);
  font-weight: 400;
  color: rgba(230, 244, 255, 0.94);
  line-height: 1.72;
  font-size: clamp(1.02rem, 2.4vw, 1.14rem);
  letter-spacing: 0.015em;
}
.p:last-child{ margin-bottom: 0; }
body.theme-light .p{ color: rgba(25, 35, 52, 0.9); }

.cta{ margin-top:1.25rem; }
.cta{ display:flex; justify-content:center; }
.cta--hero{ margin-top:1.6rem; }
.cta--final{ margin-top:1.1rem; }
.section--final-cta .cta--final{
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}
.section--final-cta .cta--final .amazon-btn--xl{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.final-cta__kicker{
  margin:0;
  font-family: var(--prose);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(200, 232, 248, 0.88);
  text-align: center;
}
body.theme-light .final-cta__kicker{
  color: rgba(45, 72, 88, 0.88);
}

.section--final-cta{
  padding-bottom: 10rem;
}

.section--final-cta .container{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Одна колонка = подписка и Amazon строго одной ширины */
.final-cta__column{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 22rem);
  max-width: 100%;
  margin-top: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  gap: 0.55rem;
  box-sizing: border-box;
}

.final-cta__subscribe-wrap{
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  animation: final-cta-subscribe-pulse 2.85s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .final-cta__subscribe-wrap{ animation: none; }
}

@keyframes final-cta-subscribe-pulse{
  0%, 100%{
    filter:
      drop-shadow(0 0 14px rgba(0, 229, 255, 0.38))
      drop-shadow(0 0 32px rgba(0, 229, 255, 0.2))
      drop-shadow(0 0 2px rgba(139, 92, 255, 0.25));
  }
  50%{
    filter:
      drop-shadow(0 0 26px rgba(0, 229, 255, 0.62))
      drop-shadow(0 0 52px rgba(0, 229, 255, 0.28))
      drop-shadow(0 0 20px rgba(139, 92, 255, 0.22));
  }
}

.email-capture.email-capture--hud{
  --term-fg: #b8ffd8;
  --term-glow: rgba(100, 255, 200, 0.55);
  width: 100%;
  margin: 0;
  padding: 1.05rem 0.95rem 1.1rem;
  text-align: left;
  /* Одна рамка как у .amazon-btn: conic + тёмная «панель» внутри */
  border-radius: 10px;
  border: 3px solid transparent;
  background:
    linear-gradient(165deg, rgba(10, 16, 24, 0.98) 0%, rgba(5, 8, 13, 0.99) 100%) padding-box,
    conic-gradient(
      from 210deg,
      var(--cyan),
      var(--magenta),
      #ffcc4d,
      var(--violet),
      #00e5ff
    ) border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(0, 229, 255, 0.22),
    0 0 52px rgba(255, 0, 170, 0.1),
    0 6px 0 rgba(5, 8, 14, 0.82),
    0 14px 32px rgba(0, 0, 0, 0.48);
}

.email-capture__label{
  display: block;
  margin: 0 0 0.7rem;
  font-family: var(--prose);
  font-size: clamp(0.88rem, 2.1vw, 0.98rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(210, 236, 248, 0.92);
  text-align: center;
}

.email-capture__label-accent{
  color: var(--cta);
  font-weight: 700;
  text-shadow:
    0 0 14px rgba(255, 153, 0, 0.42),
    0 0 26px rgba(255, 190, 90, 0.2);
}

.email-capture__form{
  margin: 0;
}

.email-capture__status{
  min-height: 1.1rem;
  margin: 0.55rem 0 0;
  font-family: var(--prose);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(200, 228, 240, 0.9);
  text-align: center;
}

.email-capture__status--ok{
  color: #b9ffda;
}

.email-capture__status--error{
  color: #ffd0d0;
}

.email-capture__row{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.55rem;
}

.email-capture__field-wrap{
  position: relative;
  flex: 1;
  min-width: 0;
}

.email-capture__input{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 2.65rem;
  margin: 0;
  padding: 0.62rem 1.65rem 0.62rem 0.72rem;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--term-fg);
  caret-color: transparent;
  background: rgba(2, 6, 14, 0.88);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 7px;
  outline: none;
  box-shadow:
    inset 0 0 12px rgba(0, 40, 30, 0.35),
    inset 0 1px 0 rgba(0, 229, 255, 0.06);
  text-shadow: 0 0 10px var(--term-glow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.email-capture__input::placeholder{
  color: rgba(210, 236, 248, 0.92);
  text-shadow: none;
}
.email-capture__field-wrap:focus-within .email-capture__input{
  caret-color: var(--term-fg);
}
.email-capture__field-wrap:focus-within .email-capture__term-cursor{
  opacity: 0;
}
.email-capture__input:focus-visible{
  border-color: rgba(0, 229, 255, 0.65);
  box-shadow:
    inset 0 0 14px rgba(0, 60, 50, 0.45),
    inset 0 1px 0 rgba(0, 229, 255, 0.1),
    0 0 0 2px rgba(0, 229, 255, 0.22);
}

.email-capture__term-cursor{
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-52%);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--term-fg);
  text-shadow: 0 0 12px var(--term-glow), 0 0 22px rgba(0, 229, 255, 0.35);
  pointer-events: none;
  animation: email-term-cursor-blink 1.05s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce){
  .email-capture__term-cursor{ animation: none; opacity: 0.85; }
}

@keyframes email-term-cursor-blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

/* JOIN: холодная фиолетово-синяя, без конкуренции с Amazon */
.email-capture__join{
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 4.35rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(0.52rem, 2.4vw, 0.62rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4e8ff;
  cursor: pointer;
  background: linear-gradient(168deg, #3a5288 0%, #24365c 42%, #162544 100%);
  border: 3px solid #6b8cc8;
  border-radius: 2px;
  box-shadow:
    0 0 0 2px rgba(4, 8, 18, 0.95),
    0 5px 0 rgba(8, 12, 24, 0.95),
    inset 0 1px 0 rgba(160, 200, 255, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.email-capture__join:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.email-capture__join:active{
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px rgba(4, 8, 18, 0.95),
    0 2px 0 rgba(8, 12, 24, 0.95),
    inset 0 1px 0 rgba(160, 200, 255, 0.18);
}
.email-capture__join:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.email-capture__join:disabled{
  opacity: 0.7;
  cursor: not-allowed;
  filter: saturate(0.85);
}

body.theme-light .final-cta__subscribe-wrap{
  animation: final-cta-subscribe-pulse-light 2.85s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  body.theme-light .final-cta__subscribe-wrap{ animation: none; }
}

@keyframes final-cta-subscribe-pulse-light{
  0%, 100%{
    filter:
      drop-shadow(0 0 12px rgba(0, 122, 138, 0.28))
      drop-shadow(0 0 26px rgba(90, 60, 255, 0.12));
  }
  50%{
    filter:
      drop-shadow(0 0 20px rgba(0, 122, 138, 0.42))
      drop-shadow(0 0 40px rgba(0, 122, 138, 0.18));
  }
}

body.theme-light .email-capture.email-capture--hud{
  --term-fg: #0a5c3a;
  --term-glow: rgba(20, 160, 90, 0.35);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 255, 0.98) 100%) padding-box,
    conic-gradient(
      from 200deg,
      #007a8a,
      #b50067,
      #ff9900,
      #5a3cff,
      #007a8a
    ) border-box;
  background-clip: padding-box, border-box;
  border: 3px solid transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 28px rgba(0, 122, 138, 0.14),
    0 6px 0 rgba(200, 210, 230, 0.55),
    0 14px 28px rgba(15, 25, 45, 0.1);
}

body.theme-light .email-capture__label{
  color: rgba(35, 52, 68, 0.92);
}

body.theme-light .email-capture__label-accent{
  color: var(--cta);
  text-shadow: 0 0 14px rgba(255, 153, 0, 0.22);
}

body.theme-light .email-capture__input{
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(70, 110, 150, 0.45);
  box-shadow: inset 0 0 10px rgba(0, 80, 60, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.theme-light .email-capture__input::placeholder{
  color: rgba(35, 52, 68, 0.92);
  text-shadow: none;
}

body.theme-light .email-capture__join{
  color: #eaf2ff;
  background: linear-gradient(168deg, #4a64a0 0%, #344878 42%, #283a62 100%);
  border-color: #7a9ad0;
  box-shadow:
    0 0 0 2px rgba(230, 236, 248, 0.9),
    0 5px 0 rgba(180, 195, 220, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.theme-light .email-capture__input:focus-visible{
  border-color: rgba(0, 122, 138, 0.65);
  box-shadow:
    inset 0 0 12px rgba(0, 80, 60, 0.08),
    0 0 0 2px rgba(0, 122, 138, 0.2);
}

body.theme-light .email-capture__join:focus-visible{
  outline-color: rgba(0, 122, 138, 0.95);
}

body.theme-light .email-capture__status{
  color: rgba(35, 52, 68, 0.9);
}

body.theme-light .email-capture__status--ok{
  color: #0f7a4f;
}

body.theme-light .email-capture__status--error{
  color: #b33939;
}

.btn{
  display:inline-block;
  padding:.95rem 2rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ctaText);
  background:var(--cta);
  border:2px solid #e8890e;
  border-radius:2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 4px 4px 0 rgba(0,0,0,.35);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
  background:#ffa31a;
  transform:translate(1px,1px);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 3px 3px 0 rgba(0,0,0,.35);
}
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* ---------- Amazon CTA: главный конверсионный акцент ---------- */
.btn.amazon-btn{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  padding: 3px;
  min-width: min(100%, 18.5rem);
  max-width: 100%;
  border-radius: 10px;
  border: none;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(165deg, #0a1018 0%, #05080d 100%) padding-box,
    conic-gradient(
      from 210deg,
      var(--cyan),
      var(--magenta),
      #ffcc4d,
      var(--violet),
      #00e5ff
    ) border-box;
  border: 3px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(0, 229, 255, 0.38),
    0 0 72px rgba(255, 0, 170, 0.18),
    0 8px 0 rgba(5, 8, 14, 0.95),
    0 16px 36px rgba(0, 0, 0, 0.55);
  overflow: visible;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.amazon-btn__content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 100%;
  padding: 0.95rem 1.35rem 0.72rem;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(
    172deg,
    #ffe08a 0%,
    #ffc53d 18%,
    #ff9a1a 48%,
    #f06c0f 82%,
    #c2410c 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    inset 0 -4px 16px rgba(140, 40, 0, 0.38);
}

.amazon-btn__shine{
  position: absolute;
  top: -50%;
  left: -40%;
  width: 55%;
  height: 200%;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  z-index: 1;
  pointer-events: none;
  animation: amazon-btn-shine 4s ease-in-out infinite;
}

.amazon-btn__title,
.amazon-btn__fineprint{
  position: relative;
  z-index: 2;
}

.amazon-btn__title{
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(0.78rem, 4.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c0402;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 36px rgba(255, 220, 120, 0.65),
    0 0 2px rgba(80, 40, 0, 0.35);
}

.amazon-btn__fineprint{
  font-family: var(--prose);
  font-size: clamp(0.52rem, 1.85vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 18, 6, 0.48);
  line-height: 1.3;
  margin-top: 0.12rem;
}

.btn.amazon-btn:hover{
  transform: translateY(-4px) scale(1.035);
  filter: saturate(1.1) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 52px rgba(0, 229, 255, 0.52),
    0 0 88px rgba(255, 0, 170, 0.28),
    0 11px 0 rgba(5, 8, 14, 0.9),
    0 22px 44px rgba(0, 0, 0, 0.6);
}

.btn.amazon-btn:active{
  transform: translateY(0) scale(0.99);
  filter: saturate(1.02);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(0, 229, 255, 0.3),
    0 4px 0 rgba(5, 8, 14, 0.95),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

.btn.amazon-btn:focus-visible{
  outline: 3px solid var(--cyan);
  outline-offset: 8px;
}

.amazon-btn--xl{
  min-width: min(100%, 22rem);
}
.amazon-btn--xl .amazon-btn__content{
  padding: 1.1rem 1.65rem 0.82rem;
}
.amazon-btn--xl .amazon-btn__title{
  font-size: clamp(0.88rem, 5vw, 1.28rem);
  line-height: 1.22;
}
.amazon-btn--xl .amazon-btn__fineprint{
  font-size: clamp(0.55rem, 2vw, 0.7rem);
  letter-spacing: 0.22em;
}

@keyframes amazon-btn-shine{
  0%, 15% { transform: skewX(-20deg) translateX(-130%); opacity: 0; }
  22% { opacity: 1; }
  38%, 100% { transform: skewX(-20deg) translateX(320%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .amazon-btn__shine{ animation: none; opacity: 0; }
  .btn.amazon-btn:hover{ transform: translateY(-2px); filter: none; }
}

body.theme-light .btn.amazon-btn{
  background:
    linear-gradient(165deg, #f2f6ff 0%, #e8eefc 100%) padding-box,
    conic-gradient(
      from 200deg,
      #007a8a,
      #b50067,
      #ff9900,
      #5a3cff,
      #007a8a
    ) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 36px rgba(0, 122, 138, 0.22),
    0 8px 0 rgba(200, 210, 230, 0.65),
    0 16px 32px rgba(15, 25, 45, 0.12);
}
body.theme-light .btn.amazon-btn:hover{
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 48px rgba(0, 122, 138, 0.32),
    0 11px 0 rgba(190, 200, 220, 0.55),
    0 22px 40px rgba(15, 25, 45, 0.14);
}

/* ---------- Отзывы: карусель в стиле соцсетей ---------- */
.section--reviews .h2{
  margin-bottom: 0.45rem;
}

.reviews-lead{
  margin: 0 auto 1.35rem;
  max-width: 38rem;
  text-align: center;
  font-family: var(--prose);
  font-size: clamp(0.88rem, 2.2vw, 1.02rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(180, 214, 228, 0.78);
}
body.theme-light .reviews-lead{
  color: rgba(55, 78, 92, 0.82);
}

.reviews-carousel{
  position: relative;
  margin-top: 0.25rem;
  padding: 0;
}

.reviews-carousel__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.35rem 0 1rem;
  outline: none;
  direction: ltr;
}
.reviews-carousel__viewport:focus-visible{
  box-shadow: 0 0 0 2px var(--cyan);
  border-radius: 12px;
}

.reviews-carousel__viewport::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

.reviews-carousel__track{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.15rem;
  padding: 0.25rem 0.5rem 0.5rem;
  min-height: 100%;
}

/* Marquee: JS двигает scrollLeft; руками — wheel / трекпад / drag (pointer capture) */
.reviews-carousel__viewport--marquee{
  overflow-x: auto;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.reviews-carousel__viewport--marquee:active{
  cursor: grabbing;
}
.reviews-carousel__track--marquee{
  width: max-content;
}

.social-review{
  flex: 0 0 min(100%, 460px);
  width: min(100%, 460px);
  max-width: 100%;
  margin: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  text-align: left;
  border-radius: 18px;
  background: linear-gradient(
    165deg,
    rgba(22, 30, 48, 0.94) 0%,
    rgba(12, 18, 32, 0.92) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 229, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.theme-light .social-review{
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 255, 0.94) 100%);
  border-color: rgba(0, 122, 138, 0.12);
  box-shadow: 0 12px 36px rgba(15, 25, 45, 0.08);
}

.social-review__head{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-light .social-review__head{
  border-bottom-color: rgba(0, 80, 100, 0.1);
}

.social-review__avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
}
body.theme-light .social-review__avatar{
  border-color: rgba(0, 122, 138, 0.35);
}

.social-review__who{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}

.social-review__username{
  font-family: var(--prose);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: rgba(240, 248, 255, 0.96);
}
body.theme-light .social-review__username{
  color: rgba(22, 35, 48, 0.95);
}

.social-review__source{
  display: inline-block;
  font-family: var(--prose);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.social-review__source--tiktok{
  color: #7df9ff;
  background: rgba(255, 0, 128, 0.12);
  border-color: rgba(255, 0, 128, 0.35);
}
.social-review__source--x{
  color: #b8e0ff;
  background: rgba(29, 155, 240, 0.12);
  border-color: rgba(29, 155, 240, 0.35);
}
.social-review__source--instagram{
  color: #ffd6e8;
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(253, 216, 53, 0.12));
  border-color: rgba(225, 48, 108, 0.4);
}

body.theme-light .social-review__source--tiktok{
  color: #a30052;
  background: rgba(255, 0, 128, 0.08);
}
body.theme-light .social-review__source--x{
  color: #0d6ebc;
  background: rgba(29, 155, 240, 0.1);
}
body.theme-light .social-review__source--instagram{
  color: #b12d6a;
  background: rgba(225, 48, 108, 0.08);
}

.social-review__text{
  margin: 0;
  font-family: var(--prose);
  font-size: clamp(0.95rem, 2.15vw, 1.05rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.015em;
  color: rgba(228, 242, 252, 0.94);
}
.social-review__text strong{
  font-weight: 700;
  color: #fff4c8;
}
body.theme-light .social-review__text{
  color: rgba(28, 38, 52, 0.92);
}
body.theme-light .social-review__text strong{
  color: #b8860b;
}

@media (max-width: 720px){
  .container--reviews-wide{
    width: min(100%, 94vw);
  }
  .social-review{
    flex-basis: min(100%, 300px);
    width: min(100%, 300px);
  }
}

@media (prefers-reduced-motion: reduce){
  .reviews-carousel__viewport{
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.35) transparent;
  }
  .reviews-carousel__viewport::-webkit-scrollbar{
    display: block;
    height: 6px;
  }
  .reviews-carousel__viewport::-webkit-scrollbar-thumb{
    background: rgba(0, 229, 255, 0.35);
    border-radius: 4px;
  }
}

.video{
  width:min(420px, 100%);
  aspect-ratio:9/16;
  margin:1.2rem auto 0;
  border:0;
  box-shadow:none;
  background:#000;
  position:relative;
  overflow:hidden;
}
.video__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.grid{
  display:grid;
  gap:1.1rem;
  margin-top:1rem;
}
@media (min-width:820px){
  .grid{ grid-template-columns:repeat(3, 1fr); gap:1rem; }
}
.card{
  margin:0;
  padding: clamp(1.5rem, 3.5vw, 1.85rem) clamp(1.25rem, 3vw, 1.65rem);
  text-align: center;
  border-radius: var(--card-radius);
  background: linear-gradient(
    165deg,
    rgba(26, 36, 56, 0.82) 0%,
    rgba(14, 22, 38, 0.78) 50%,
    rgba(20, 28, 48, 0.75) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(139, 92, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 229, 255, 0.15) inset,
    0 0 48px rgba(139, 92, 255, 0.08);
}
body.theme-light .card{
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
  border: 1px solid rgba(0, 122, 138, 0.12);
  box-shadow: 0 8px 28px rgba(15, 25, 45, 0.06);
}
body.theme-light .card:hover{
  box-shadow: 0 14px 36px rgba(15, 25, 45, 0.1);
}
.card__p{
  margin:0 0 1rem;
  font-family: var(--prose);
  font-weight: 400;
  font-style: normal;
  color: rgba(232, 246, 255, 0.95);
  line-height: 1.7;
  font-size: clamp(0.98rem, 2.2vw, 1.08rem);
  letter-spacing: 0.02em;
  text-align: center;
}
.card__p strong{
  font-weight: 600;
  color: #fff0c8;
}
body.theme-light .card__p{ color: rgba(28, 38, 55, 0.92); }
body.theme-light .card__p strong{ color: #b8860b; }
.card__f{
  font-family: var(--prose);
  font-weight: 500;
  color: rgba(164, 200, 218, 0.95);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
body.theme-light .card__f{ color: rgba(80, 110, 130, 0.95); }

.card__f::before{ content: "— "; opacity: 0.5; }

.footer{
  position: relative;
  z-index: 2;
  padding: 2.75rem 0 max(3.5rem, env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}
body.theme-light .footer{
  border-top-color: rgba(0, 80, 100, 0.14);
  background: transparent;
}
.footer__inner{ display:flex; flex-direction:column; gap: 1.5rem; align-items:center; }

.footer__social{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem 1.15rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.social-btn{
  flex: 1 1 5.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 5.5rem;
  padding: 0.95rem 0.65rem;
  border-radius: 1.15rem;
  text-decoration: none;
  /* Без backdrop-filter: в Safari/части Chrome размытие даёт пустые/невидимые кнопки */
  color: #e8f8ff;
  background: linear-gradient(165deg, rgba(28, 40, 62, 0.98) 0%, rgba(14, 22, 40, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.social-btn:hover{
  transform: translateY(-4px) scale(1.02);
}
.social-btn:active{
  transform: translateY(-1px) scale(0.99);
}
.social-btn:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.social-btn__icon{
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
}
.social-btn__text{
  font-family: var(--prose);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
}

.social-btn--tiktok:hover{
  border-color: rgba(0, 242, 234, 0.45);
  color: #b8fff9;
  box-shadow:
    0 12px 36px rgba(0, 242, 234, 0.12),
    0 0 24px rgba(255, 0, 128, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.social-btn--instagram:hover{
  border-color: rgba(225, 48, 108, 0.5);
  color: #ffd6e8;
  box-shadow:
    0 12px 36px rgba(225, 48, 108, 0.14),
    0 0 28px rgba(253, 216, 53, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.social-btn--youtube:hover{
  border-color: rgba(255, 50, 50, 0.55);
  color: #ffcbcb;
  box-shadow:
    0 12px 36px rgba(255, 50, 50, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.theme-light .social-btn{
  background: linear-gradient(165deg, #ffffff 0%, #f0f4fc 100%);
  color: #152232;
  border-color: rgba(0, 122, 138, 0.22);
  box-shadow: 0 4px 20px rgba(15, 25, 45, 0.1);
}
body.theme-light .social-btn--tiktok:hover{
  border-color: rgba(0, 180, 170, 0.5);
  color: #006b63;
}
body.theme-light .social-btn--instagram:hover{
  border-color: rgba(200, 50, 120, 0.45);
  color: #8b2252;
}
body.theme-light .social-btn--youtube:hover{
  border-color: rgba(200, 40, 40, 0.5);
  color: #a32020;
}

.footer__copy{
  font-family: var(--prose);
  color: rgba(210, 232, 242, 0.95);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.9);
}
body.theme-light .footer__copy{
  color: rgba(28, 42, 58, 0.95);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(255, 255, 255, 0.7);
}

/* ---------- Пока грузится фоновое видео: сплэш + блокировка скролла ---------- */
html.video-load-locked,
body.video-load-locked{
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

.video-load-splash{
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(139, 92, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 90% 70% at 80% 100%, rgba(0, 229, 255, 0.1), transparent 50%),
    linear-gradient(180deg, #070a10 0%, #0b1220 100%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

body.theme-light .video-load-splash{
  background:
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(90, 60, 255, 0.12), transparent 55%),
    linear-gradient(180deg, #f5f8ff 0%, #eef2ff 100%);
}

.video-load-splash__inner{
  text-align: center;
  max-width: 22rem;
}

.video-load-splash__kicker{
  margin: 0 0 0.75rem;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(0.65rem, 2.8vw, 0.85rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #efd586;
  text-shadow: 0 0 20px rgba(239, 213, 134, 0.35);
}

body.theme-light .video-load-splash__kicker{
  color: #6b5a2a;
  text-shadow: none;
}

.video-load-splash__hint{
  margin: 0 0 1.75rem;
  font-family: var(--prose);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(200, 228, 240, 0.85);
}

body.theme-light .video-load-splash__hint{
  color: rgba(54, 82, 104, 0.9);
}

.video-load-splash__spinner{
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(0, 229, 255, 0.15);
  border-top-color: rgba(0, 229, 255, 0.85);
  animation: video-load-spin 0.85s linear infinite;
}

body.theme-light .video-load-splash__spinner{
  border-color: rgba(0, 122, 138, 0.12);
  border-top-color: rgba(0, 122, 138, 0.75);
}

@keyframes video-load-spin{
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .video-load-splash__spinner{
    animation: none;
    border-top-color: rgba(0, 229, 255, 0.45);
  }
  body.theme-light .video-load-splash__spinner{
    border-top-color: rgba(0, 122, 138, 0.45);
  }
}

.video-load-splash--done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .video-load-splash{
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
}