:root{
  --bg-1: #0e0f10; --bg-2: #141517;
  --accent: #DC422A; --accent-2: #ff6b55;
  --text: #f2f3f5; --muted: #c6c8ce;
  --panel: #f3f4f7; /* light panel */
  --radius: 16px; --container: 1200px;
}
*{ box-sizing:border-box; } html,body{ height:100%; margin:0; }
body{ font-family: "Jost", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; color:var(--text);
  background: radial-gradient(1200px 800px at 70% -200px, #1a1c20 10%, transparent 60%),
             radial-gradient(1000px 800px at -300px 60%, #15171a 10%, transparent 60%),
             linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.topbar{ position:sticky;top:0;z-index:10;background:rgba(14,15,16,.85);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06); }
.container{ max-width:var(--container);margin:0 auto;padding:16px 24px; }
.row{ display:flex;align-items:center;gap:28px; }
.brand img{ height:34px; width:auto; display:block; }
.mainnav{ margin-left:24px; display:flex; gap:32px; align-items:center; }
.mainnav a{ color:var(--muted); text-decoration:none; font-weight:600; }
.book{ margin-left:auto; }
.btn{ display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;font-weight:800;text-decoration:none;cursor:pointer; }
.btn.primary{ background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(220,66,42,.35); }
.btn.primary:hover{ background:var(--accent-2); }
.hamburger{ display:none; margin-left:12px; }
.hamburger button{ background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:10px;font-weight:800; }
.divider{ height:1px; background:rgba(255,255,255,.08); }

.hero{ position:relative; overflow:hidden; }
.hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --x1:18%;--y1:25%;--x2:82%;--y2:38%;--x3:30%;--y3:85%;
  background:
    radial-gradient(700px 500px at var(--x1) var(--y1), rgba(220,66,42,.18), transparent 60%),
    radial-gradient(900px 650px at var(--x2) var(--y2), rgba(220,66,42,.10), transparent 65%),
    radial-gradient(800px 600px at var(--x3) var(--y3), rgba(220,66,42,.08), transparent 65%);
  animation: glow-shift 22s ease-in-out infinite alternate;
}
@keyframes glow-shift{ 0%{--x1:16%;--y1:22%;--x2:84%;--y2:40%;--x3:28%;--y3:82%;} 50%{--x1:26%;--y1:28%;--x2:76%;--y2:54%;--x3:36%;--y3:72%;} 100%{--x1:22%;--y1:36%;--x2:70%;--y2:60%;--x3:40%;--y3:66%;} }
.hero-inner{ position:relative; z-index:1; padding:56px 24px 88px; }
.grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }

/* Square game panel with padding and subtle stripes */
.media.square{ position:relative; background:var(--panel); border-radius:22px; border:1px solid rgba(0,0,0,.18); box-shadow:0 10px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.55); padding:18px; }
.media.square::before{ /* maintain square ratio of the inner area */ content:""; display:block; width:100%; aspect-ratio:1/1; }
.media.square canvas{ position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); border-radius:16px; background:
  repeating-linear-gradient(135deg, #ffffff, #ffffff 8px, #f3f5f8 8px, #f3f5f8 16px);
}

.hud{ position:absolute; left:26px; right:26px; bottom:26px; display:flex; gap:12px; align-items:center; justify-content:space-between; pointer-events:none; }
.hud-light .score, .hud-light .hint{ background:#111a; color:#fff; padding:8px 12px; border-radius:10px; font-weight:700; }

h1{ margin:0 0 12px; font-size:clamp(32px,4vw,36px); font-weight:800; }
p.lead{ color:var(--muted); font-size:18px; }

@media(max-width:980px){ .mainnav{display:none} .hamburger{display:block} .grid{grid-template-columns:1fr; gap:28px;} }
@media(max-width:560px){ .btn{padding:10px 18px} }

.drawer{ position:fixed; inset:0 0 0 auto; width:100%; max-width:360px; height:100%; background:#121315; transform:translateX(100%); transition:.25s; z-index:20; box-shadow:-12px 0 28px rgba(0,0,0,.45);} 
.drawer.open{ transform:translateX(0); }
.drawer .menu{ padding:64px 20px 20px; display:flex; flex-direction:column; gap:18px; }
.drawer .menu a{ color:var(--text); text-decoration:none; font-weight:700; }
.close-drawer{ position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.drawer.open{ transform:translateX(0); }
.drawer .menu{ padding:20px;display:flex;flex-direction:column;gap:18px; }
.drawer .menu a{ color:var(--text);text-decoration:none;font-weight:700; }

/* Services */
.services { padding: 72px 0 24px; }
.services-title { font-size: clamp(32px,6vw,64px); font-weight: 800; margin: 0 0 20px; }

.services-panel{
  background: linear-gradient(180deg, var(--accent), #ff725c);
  border-radius: 28px;
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: visible;
}
.services-header{ display:flex; align-items:center; gap:24px; }
.services-intro{ flex:1 1 auto; font-size:18px; line-height:1.6; margin:0; opacity:.95; }
.book-cta{ background:#fff; color:#16181d; border-radius:999px; padding:14px 28px; font-weight:800; box-shadow:0 10px 26px rgba(0,0,0,.18); white-space:nowrap; }

.cards{ margin-top:28px; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.card{
  background:#fff; color:#1b1c1f;
  border-radius:18px; padding:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.06);
}
.card .icon{ width:44px; height:44px; margin-bottom:12px; }
.card svg{ width:44px; height:44px; display:block; }
.card h3{ margin:8px 0 8px; font-size:18px; font-weight:800; color:#1b1c1f; }
.card p{ margin:0; color:#6b7280; }

/* Responsive */
@media (max-width:1200px){ .cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){
  .services-header{ flex-direction:column; align-items:flex-start; gap:16px; }
  .book-cta{ align-self:flex-start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .services-panel{ padding:22px; }
}


/* === Global animated background (safe append) === */
body { position: relative; }

body::before{
  content:"";
  position: fixed;
  inset: -25% -25% -25% -25%;
  z-index: -1;
  pointer-events: none;

  /* мягкие «пятна» + базовый градиент */
  --p1: 18% 22%;
  --p2: 82% 40%;
  --p3: 30% 82%;
  background:
    radial-gradient(800px 600px at var(--p1), rgba(220,66,42,.16), transparent 60%),
    radial-gradient(900px 650px at var(--p2), rgba(220,66,42,.10), transparent 65%),
    radial-gradient(850px 650px at var(--p3), rgba(220,66,42,.08), transparent 65%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  animation: bgshift 26s ease-in-out infinite alternate;
  filter: saturate(1.06);
}

@keyframes bgshift{
  0%   { --p1:16% 20%; --p2:86% 36%; --p3:26% 84%; }
  50%  { --p1:28% 28%; --p2:74% 54%; --p3:38% 72%; }
  100% { --p1:22% 36%; --p2:70% 60%; --p3:42% 66%; }
}

/* === Animated sweep for Services panel (keeps your gradient) === */
.services-panel{
  background-size: 200% 200%;
  animation: panelShift 14s ease-in-out infinite;
}

@keyframes panelShift{
  0%   { background-position: 0%   0%;   }
  50%  { background-position: 100% 50%;  }
  100% { background-position: 0%   100%; }
}


/* Why Choose Us */
.why{ padding:96px 0; }
.why-title{
  text-align:center;
  font-size:clamp(36px,6vw,64px);
  font-weight:800;
  margin:0 0 12px;
}
.why-underline{
  width:240px; height:10px; border-radius:999px;
  background: var(--accent);
  margin:0 auto 24px;
  box-shadow:0 6px 20px rgba(220,66,42,.4);
}
.why-intro{
  max-width:900px; margin:0 auto 56px; text-align:center;
  color: var(--muted); font-size:18px; line-height:1.6;
}

.why-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 36px;
}
.why-item{
  display:flex; align-items:center; gap:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  padding:18px 24px;
  color:#fff;
  box-shadow: inset 0 8px 24px rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.18);
}
.why-item .why-text{ color:#eef1f5; }
.why-bullet{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
  border-radius:999px;
  background: var(--accent);
  box-shadow:0 10px 24px rgba(220,66,42,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.why-bullet svg{ width:20px; height:20px; display:block; }
.span-2{ grid-column: span 2; }

@media (max-width:980px){
  .why-list{ grid-template-columns:1fr; gap:18px; }
  .span-2{ grid-column:auto; }
}


/* FAQ */
.faq{ padding:96px 0; }
.faq-title{
  text-align:center;
  font-size:clamp(36px,6vw,64px);
  font-weight:800;
  margin:0 0 12px;
}
.faq-underline{
  width:320px; height:10px; border-radius:999px;
  background: var(--accent);
  margin:0 auto 24px; box-shadow:0 6px 20px rgba(220,66,42,.4);
}
.faq-intro{
  max-width:860px; margin:0 auto 56px; text-align:center;
  color: var(--muted); font-size:18px; line-height:1.6;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px;
}

/* карточка */
.faq-card{
  background: linear-gradient(180deg, var(--accent), #ff725c);
  background-size:200% 200%;             /* лёгкая живость */
  animation: panelShift 14s ease-in-out infinite;
  border-radius:20px;
  color:#fff;
  box-shadow:0 18px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25);
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
}

/* шапка вопроса */
.faq-head{
  display:flex; align-items:center; gap:16px;
  padding:22px 22px;
}
.faq-q{ margin:0; font-size:18px; font-weight:800; flex:1 1 auto; }
.faq-toggle{
  width:40px; height:40px; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);
  color:#fff; border-radius:999px; display:grid; place-items:center;
  cursor:pointer;
}
.faq-chevron{ transition: transform .25s ease; }

/* ответ (изначально скрыт) */
.faq-answer{
  color:#ffe; opacity:.9;
  padding:0 22px 0;                       /* без нижнего паддинга в закрытом */
  max-height:0; overflow:hidden;
  transition:max-height .28s ease, padding .28s ease;
  will-change:max-height;
  line-height:1.6;
}
.faq-card.open .faq-answer{
  padding:0 22px 22px;
}
.faq-card.open .faq-chevron{ transform: rotate(180deg); }

/* респонсив */
@media (max-width:980px){
  .faq-grid{ grid-template-columns:1fr; }
}

/* FAQ: немного больше воздуха */
.faq-grid{
  row-gap: 28px;            /* между карточками по вертикали (было 22px) */
}

.faq-card.open .faq-answer{
  padding-bottom: 28px;     /* снизу внутри раскрытой карточки (было 22px) */
}


/* Contact / Booking */
.contact{ padding:96px 0 32px; }
.contact-title{
  text-align:center; font-size:clamp(36px,6vw,48px); font-weight:800; margin:0 0 12px;
}
.contact-underline{
  width:320px; height:10px; border-radius:999px; background:var(--accent);
  margin:0 auto 20px; box-shadow:0 6px 20px rgba(220,66,42,.4);
}
.contact-intro{
  text-align:center; color:var(--muted); font-size:16px; max-width:680px; margin:0 auto 36px;
}

/* quick contacts row */
.contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:28px; }
.info{ display:flex; align-items:center; gap:12px; color:#fff; }
.info .ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background:#1f2227; border:1px solid rgba(255,255,255,.08); color:#fff; }
.info .txt{ opacity:.95; }

/* Mobile layout like screenshot */
@media (max-width: 600px){
  .contact{ padding:60px 0 24px; }

  /* заголовок и подзаголовок — по центру можно оставить */
  .contact-underline{ width:200px; height:8px; }

  /* одна колонка, большой вертикальный отступ */
  .contact-info{
    grid-template-columns: 1fr;
    gap: 72px;                       /* большой интервал между блоками */
    margin: 48px 0 0;
    padding-left: 24px;              /* отступ слева как на примере */
  }

  /* убрать “карточность” у ссылок */
  .contact-info a.info{
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
  }

  /* иконка слева, текст влево */
  .info{ justify-content: flex-start; text-align: left; gap: 16px; }
  .info .ico{ width: 32px; height: 32px; border: none; background: transparent; box-shadow:none; }
  .info .txt{ font-size: 20px; line-height: 1.4; letter-spacing: 0; }

  /* если хочешь совсем “чисто” — подсветку кнопки тоже уберём */
  .btn.book-now{ width: 100%; margin-top: 40px; }
}


/* booking panel */
.booking{
  grid-template-columns: 1.1fr .9fr;
  gap: 0 !important;
  border-radius: 40px;
  overflow: hidden;
  align-items: stretch;
}
.booking-form{
  background: linear-gradient(180deg, var(--accent), #ff725c);
  background-size:200% 200%; animation: panelShift 14s ease-in-out infinite;
  padding:28px; color:#fff;
}
.booking-form h3{ margin:0 0 16px; font-size:28px; font-weight:800; }

.field{ display:block; margin-bottom:14px; }
.field input, .field select{
  width:100%; height:48px; border-radius:10px; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12); color:#fff; padding:0 14px; font:inherit;
}
.field input::placeholder{ color:#fff; opacity:.85; }
.field select{ appearance:none; padding-right:36px; }
.select .caret{ position:absolute; margin-left:-30px; line-height:48px; pointer-events:none; opacity:.9; }
.w-full{ width:100%; }
#bookBtn{ height:48px; border-radius:10px; background:#fff; color:#1a1c1f; font-weight:800; box-shadow:0 10px 26px rgba(0,0,0,.18); width:100%; }
#bookBtn[disabled]{ opacity:.7; cursor:progress; }
.note{ margin:10px 0 0; font-size:14px; color:#fff; opacity:.9; }

.booking-photo{ background:#e5e7eb; }
.booking-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* footer */
.footer{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0; color:var(--muted); }
.footer .foot{ display:flex; align-items:center; justify-content:center; font-size:14px; }

/* responsive */
@media (max-width:980px){
  .booking{
    grid-template-columns:1fr;   /* одна колонка */
    border-radius:28px;          /* скругление как на макете */
  }
  .booking-photo{
    order:2;           /* фотка становится под формой */
    max-height:340px;  /* ограничение высоты */
  }
}

/* === Booking: фото справа во всю колонку, без щели и внутренних скруглений === */
.booking{
  grid-template-columns: 1.1fr .9fr;
  gap: 0 !important;                 /* без стыка между колонками */
  border-radius: 40px;               /* общий радиус как на макете */
  overflow: hidden;                  /* обрезаем внутренние углы */
  align-items: stretch;              /* одинаковая высота колонок */
}

/* левая колонка без своих скруглений */
.booking-form{ border-radius: 0 !important; }

/* figure по умолчанию имеет margin — убираем */
.booking-photo{
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  height: 100%;
}

/* картинка заполняет всю область, без бордер-радиусов */
.booking-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* мобилка */
@media (max-width:980px){
  .booking{ border-radius: 28px; grid-template-columns: 1fr; }
}

/* === Fixed header always visible === */
:root{ --header-h: 72px; }                  /* запас по умолчанию */
body{ padding-top: var(--header-h); }       /* сдвигаем контент вниз под шапку */

.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;                              /* выше контента, ниже модалок */
  background: rgba(14,15,16,.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* чтобы боковое меню перекрывало шапку при открытии */
.drawer{ z-index: 80; }

/* якорные секции не заезжают под фикс-хедер */
section[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }


/* Success modal */
body.modal-open { overflow: hidden; }

.ok-modal{ position:fixed; inset:0; z-index:90; display:none; }
.ok-modal.show{ display:block; }

.ok-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  animation: fadeIn .18s ease;
}

.ok-dialog{
  position:relative;
  max-width: 440px;
  width: min(92vw, 440px);
  margin: 18vh auto;
  padding: 24px;
  color:#fff;
  background: linear-gradient(180deg, var(--accent), #ff725c);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  animation: popIn .18s ease;
}
.ok-dialog h3{ margin: 0 0 6px; font-weight: 800; }
.ok-dialog p{ margin: 0 0 18px; opacity: .95; }

.ok-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15);
  color:#fff; cursor:pointer; display:grid; place-items:center;
}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.hp{position:absolute !important;left:-9999px !important;opacity:0 !important;height:0 !important;width:0 !important;pointer-events:none !important;}


.contact-box {
  display: flex;
  align-items: stretch;
  margin-top: 2rem;
  background: #1a1a1a; /* или твой цвет */
  border-radius: 20px;
  overflow: hidden;
}

.form-side {
  flex: 1;
  background: linear-gradient(135deg, #e85d3b, #e66f50);
  padding: 2rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-side h3 {
  margin-bottom: 1rem;
}

.form-side form input,
.form-side form select {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: none;
}

.form-side form button {
  width: 100%;
  padding: 1rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.image-side {
  flex: 1;
}

.image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}







/* Our Works (gallery) */
.works{
  padding:72px 0;
  background: transparent; /* остаёмся в общей теме */
}
.works-title{
  text-align:center;
  font-size:clamp(28px,4.5vw,36px);
  font-weight:800;
  margin:0 0 8px;
}
.works-underline{
  width:200px;height:8px;border-radius:999px;
  background:var(--accent);
  margin:0 auto 28px;
  box-shadow:0 6px 20px rgba(220,66,42,.35);
}

/* сетка как на твоём скрине */
.works-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.work{
  margin:0; border-radius:12px; overflow:hidden;
  background:#111; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.work img{
  width:100%; height:100%;
  display:block;
  aspect-ratio:1/1;       /* всегда ровный квадрат */
  object-fit:cover;       /* аккуратный кроп */
  transition: transform .25s ease;
}
.work:hover img{ transform:scale(1.03); }

/* адаптивка */
@media (max-width:900px){
  .works-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .works-grid{ grid-template-columns:1fr; }
}

.holo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  max-width: 100%;
  padding: 20px;
}

.holo-img {
  width: 90%;               /* побольше */
  max-width: 420px;         /* ограничение для больших экранов */
  border-radius: 12px;
  filter: drop-shadow(0 0 20px #DC422A) 
          drop-shadow(0 0 40px #DC422A)
          brightness(1.1);
  animation: holoPulse 3s infinite ease-in-out;
}

@keyframes holoPulse {
  0%   { transform: scale(1);   opacity: 0.85; filter: drop-shadow(0 0 20px #DC422A); }
  50%  { transform: scale(1.05); opacity: 1;    filter: drop-shadow(0 0 35px #DC422A); }
  100% { transform: scale(1);   opacity: 0.85; filter: drop-shadow(0 0 20px #DC422A); }
}

/* 📱 адаптивка */
@media (max-width: 768px) {
  .holo-img {
    width: 100%;
    max-width: 320px;
  }
}



/* --- Reviews --- */
.reviews { padding: 96px 0; }
.reviews-title{
  text-align:center;
  font-size:clamp(36px,6vw,64px);
  font-weight:800;
  margin:0 0 10px;
}
.reviews-underline{
  width:260px;height:10px;border-radius:999px;
  background: var(--accent);
  margin:0 auto 22px;
  box-shadow:0 6px 20px rgba(220,66,42,.4);
}
.reviews-intro{
  max-width:900px;margin:0 auto 40px;text-align:center;
  color:var(--muted);font-size:18px;line-height:1.6;
}

/* viewport + track */
.reviews-viewport{ position:relative; }
.reviews-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 420px);
  gap:24px;
  overflow-x:auto;
  padding:8px 0 26px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{ display:none; }

/* card */
.review-card{
  scroll-snap-align:start;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:22px;
  color:var(--text);
  box-shadow: inset 0 8px 24px rgba(0,0,0,.16), 0 12px 28px rgba(0,0,0,.18);
  min-height: 230px;
}
.review-card h3{ margin:0 0 8px; font-size:18px; font-weight:800; }
.review-card p{ margin:12px 0 0; color:#e5e7eb; }

/* stars */
.stars{ display:flex; gap:8px; }

/* progress */
.reviews-progress{
  height:10px;border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.12);
  margin: 16px auto 0;
  max-width: 720px;
}
.reviews-progress .bar{
  height:100%; width:0%;
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(220,66,42,.45);
  transition: width .25s ease;
}

/* nav arrows */
.reviews-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  z-index:2;
}
.reviews-nav.prev{ left:-6px; }
.reviews-nav.next{ right:-6px; }
.reviews-nav:hover{ background:rgba(0,0,0,.5); }

@media (max-width:980px){
  .reviews-nav{ display:none; } /* на мобилках пролистывание свайпом */
}


/* убрать маркеры у списка с карточками */
.reviews-track{
  list-style: none;     /* <-- главное */
  margin: 0;            /* чтобы не было отступов от UL */
  padding: 0;
}

/* аккуратные звездочки */
.stars{ display:flex; gap:10px; align-items:center; }
.star{ display:inline-block; }
.star::before{
  content: "★";
  font-size: 22px;
  line-height: 1;
  color: #FFC94D;                    /* золотой */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);  /* лёгкое свечение */
}