:root{
  --bg:#0b0f1a;
  --bg2:#0f1430;
  --text:#e8f0ff;
  --muted:#9fb4ff;
  --accent:#7a5cff;
  --accent2:#00d1ff;
  --success:#19d37e;
  --danger:#ff4274;
  --ring1:rgba(122,92,255,.35);
  --ring2:rgba(0,209,255,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--text); background:radial-gradient(1200px 800px at 10% -10%,#1b0f2e,transparent),radial-gradient(1200px 800px at 90% -10%,#062b3a,transparent),linear-gradient(180deg,var(--bg),var(--bg2));}
header{position:sticky;top:0;backdrop-filter:saturate(1.5) blur(10px);background:rgba(5,10,24,.5);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.container{max-width:1160px;margin:0 auto;padding:0 18px}
nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
nav .brand{display:flex;gap:12px;align-items:center;font-weight:700;letter-spacing:.2px}
nav img{width:34px;height:34px;border-radius:8px}
nav a{color:var(--text);text-decoration:none;opacity:.9}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,rgba(122,92,255,.15),rgba(0,209,255,.15));box-shadow:0 10px 30px rgba(0,0,0,.25);}
.btn:hover{transform:translateY(-1px);}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:64px 0}
h1{font-size:44px;line-height:1.08;margin:0 0 12px;font-weight:800;letter-spacing:.2px}
.lead{font-size:18px;color:var(--muted);margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.chip{padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);font-size:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.card h3{margin:8px 0;font-size:18px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.step{padding:16px;border-radius:16px;border:1px dashed rgba(255,255,255,.12)}
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.plan{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(122,92,255,.07),rgba(0,209,255,.05));}
.plan h4{margin:6px 0 4px}
.faq details{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;margin-bottom:10px;background:rgba(255,255,255,.03)}
footer{border-top:1px solid rgba(255,255,255,.08);padding:30px 0;margin-top:50px;color:var(--muted)}
img{max-width:100%;height:auto;border-radius:18px}
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;inset:-14px;border-radius:28px; pointer-events:none; background: conic-gradient(from 0deg,var(--ring1),var(--ring2),var(--ring1)); filter: blur(28px); opacity:.5; z-index:-1;}
@media (max-width: 960px){
  .hero{grid-template-columns:1fr; padding:32px 0}
  .grid3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  h1{font-size:32px}
  .grid3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}


/* === Neon buttons & chips override (added) === */
:root{
  --neon-p1:#ff3db3;
  --neon-p2:#6a5cff;
  --neon-p3:#00e1ff;
}

a.btn, .btn{
  position:relative;
  color:#fff !important;
  text-decoration:none !important;
  background:linear-gradient(135deg,var(--neon-p1),var(--neon-p2),var(--neon-p3));
  border:none;
  border-radius:16px;
  padding:12px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 22px rgba(122,92,255,.28);
  z-index:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.btn:visited{color:#fff}

a.btn::before, .btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(from 0deg,var(--neon-p1),var(--neon-p2),var(--neon-p3),var(--neon-p2),var(--neon-p1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  animation:neon-spin 6s linear infinite;
  opacity:.9;
  z-index:-1;
}
a.btn:hover, .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 26px rgba(0,209,255,.35);
}
a.btn:hover::before, .btn:hover::before{
  animation-duration:2.2s;
}

/* chips with subtle neon outline */
.chip{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
}
.chip::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  padding:1px;
  background:conic-gradient(from 0deg,var(--neon-p2),var(--neon-p3),var(--neon-p1),var(--neon-p2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  animation:neon-spin 10s linear infinite;
  opacity:.6;
}

@keyframes neon-spin{
  to{ transform:rotate(1turn); }
}




/* === Border flow (no rotation) override === */
a.btn, .btn{ position:relative; overflow:visible }
a.btn::before, .btn::before{
  content:"";
  position:absolute;
  inset:-2px;            /* thin perimeter */
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(120deg,var(--neon-p1),var(--neon-p2),var(--neon-p3),var(--neon-p2),var(--neon-p1));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  animation:borderFlow 8s ease-in-out infinite alternate; /* smooth shimmer */
  opacity:.95;
  z-index:-1;
}
/* inner surface remains gradient but stationary */
a.btn, .btn{
  background:linear-gradient(90deg,var(--neon-p1),var(--neon-p2) 50%,var(--neon-p3));
}

/* chips perimeter shimmer (subtle) */
.chip::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  padding:1px;
  background:linear-gradient(120deg,var(--neon-p2),var(--neon-p3),var(--neon-p1),var(--neon-p2));
  background-size:250% 250%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  animation:borderFlowSlow 12s ease-in-out infinite alternate;
  opacity:.6;
}

/* keyframes: move gradient gently instead of spinning */
@keyframes borderFlow{
  0%{ background-position:0% 0% }
  100%{ background-position:100% 100% }
}
@keyframes borderFlowSlow{
  0%{ background-position:0% 100% }
  100%{ background-position:100% 0% }
}




/* === Tight border fit & Trial CTA === */
a.btn, .btn{ position:relative }
a.btn::before, .btn::before{
  inset:0 !important;        /* hug edges */
  padding:1.5px !important;  /* precise border thickness */
  background-size:280% 280% !important;
  animation:borderFlow 7s ease-in-out infinite alternate !important;
}
/* Emphasized "Trial" button */
a.trial-cta{
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 0 24px rgba(255,61,179,.35), 0 0 42px rgba(0,225,255,.25);
}
a.trial-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 80%);
  background-size:200% 200%;
  mix-blend-mode:screen;
  animation:sheen 2.8s linear infinite;
  opacity:.35;
}
@keyframes sheen{
  0%{ background-position:-100% 0 }
  100%{ background-position:200% 0 }
}




/* === Reviews block === */
.reviews{margin-top:48px}
.reviews .summary{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stars{display:inline-flex;gap:3px;vertical-align:middle}
.star{width:16px;height:16px;display:inline-block;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffd166;opacity:.95}
.summary .score{font-weight:800}
.review-list{display:grid;grid-template-columns:1fr;gap:12px}
.review{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.review .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:6px}
.review .author{font-weight:700;color:var(--text)}
.review .badge{font-size:12px;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,var(--neon-p1),var(--neon-p2));color:#fff}
.reply{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.15);border:1px dashed rgba(255,255,255,.16)}
.thread details{border:1px dashed rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.thread summary{cursor:pointer;font-weight:600}
.show-more{margin-top:14px}
.hide{display:none}
@media (prefers-color-scheme: light){
  .review{background:#fff;border-color:var(--border)}
  .reply{background:#f7fbff;border-color:var(--border)}
  .thread details{background:#fff;border-color:var(--border)}
}




/* === Interactive FAQ === */
.faq .controls{display:flex;gap:10px;align-items:center;margin:10px 0 16px;flex-wrap:wrap}
.faq .search{flex:1;min-width:240px}
.faq input[type="search"]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text)}
.faq .cat{padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer;font-size:14px}
.faq .cat.active{background:linear-gradient(90deg,var(--neon-p1),var(--neon-p2));color:#fff;border-color:transparent}
details[open] summary{color:var(--text)}
mark{background:rgba(255,240,0,.35);padding:0 3px;border-radius:4px}
@media (prefers-color-scheme: light){
  .faq input[type="search"]{background:#fff;border-color:var(--border)}
  .faq .cat{background:#fff;border-color:var(--border)}
}




/* === FAQ color normalization & stars in reviews === */
:root{
  --faq-bg: rgba(18,22,34,.72);
  --faq-border: rgba(255,255,255,.18);
  --faq-text: #eaf2ff;
  --faq-muted: rgba(235,244,255,.6);
}
.faq input[type="search"]{
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  color: var(--faq-text);
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.0);
}
.faq input[type="search"]::placeholder{ color: var(--faq-muted) }
.faq .cat{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--faq-border);
  color: var(--faq-text);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.faq .cat:hover{ border-color: rgba(255,255,255,.35) }
.faq .cat.active{
  background: linear-gradient(135deg, var(--neon-p1), var(--neon-p2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 22px rgba(122,92,255,.28);
}
.faq details{
  border: 1px solid var(--faq-border);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  margin: 10px 0;
}
.faq summary{ font-weight:700; color: var(--faq-text) }
.faq p{ color: var(--faq-text) }

/* stars in review cards */
.stars.small .star{ width:13px; height:13px }
.star.off{ opacity:.28; filter:saturate(.5) }




/* === Rate & Review widget === */
.ratebox{margin-top:32px;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.ratebox h3{margin:0 0 10px 0}
.stars.pick{display:inline-flex;gap:6px;cursor:pointer}
.star.btn{width:22px;height:22px;background:#2b2f45;opacity:.6}
.star.btn.on{background:#ffd166;opacity:1}
.ratebox form{display:grid;gap:10px;grid-template-columns:1fr}
.ratebox input[type="text"], .ratebox textarea{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);
}
.ratebox textarea{min-height:100px;resize:vertical}
.ratebox .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ratebox .hint{font-size:13px;opacity:.8}
.ratebox .ok{color:#2de39c}
.ratebox .err{color:#ff6b6b}
@media (prefers-color-scheme: light){
  .ratebox{background:#fff;border-color:var(--border)}
  .ratebox input[type="text"], .ratebox textarea{background:#fff;border-color:var(--border)}
}




:root{
  --star-on: #ffd166;
  --star-off: #30354a;
}
.stars.small .star,
.stars .star.btn{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M287.9 17.8L354 150.2l146.4 21.3c26.2 3.8 36.7 36 17.7 54.6L416 312.3l25 145.5c4.5 26.2-23 46-46.4 33.7L288 439.6 181.4 491.5C158 503.8 130.5 484 135 457.8l25-145.5L58 226.1c-19-18.6-8.5-50.8 17.7-54.6L222.1 150.2 288.1 17.8c11.7-23.6 45.9-23.9 57.8 0z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M287.9 17.8L354 150.2l146.4 21.3c26.2 3.8 36.7 36 17.7 54.6L416 312.3l25 145.5c4.5 26.2-23 46-46.4 33.7L288 439.6 181.4 491.5C158 503.8 130.5 484 135 457.8l25-145.5L58 226.1c-19-18.6-8.5-50.8 17.7-54.6L222.1 150.2 288.1 17.8c11.7-23.6 45.9-23.9 57.8 0z"/></svg>');
  background: var(--star-on);
  width: 20px; height: 20px; display:inline-block; border-radius:0; opacity:1;
}
.stars.small .star.off,
.star.btn.off{ background: var(--star-off) }
.stars.pick .star.btn{ width:28px; height:28px; cursor:pointer; transition: transform .12s ease }
.stars.pick .star.btn:hover{ transform: scale(1.06) }



/* --- Stars visual tune --- */
.stars .star.btn.on { background: linear-gradient(135deg, #ffd166, #ffe38b); box-shadow: 0 0 10px rgba(255,209,102,.5) }
.stars .star.btn.off { background: #1d2236; opacity: .55 }
.stars.small .star { width:16px; height:16px }
.stars .star { background: linear-gradient(135deg, #ffd166, #ffe38b) }






/* --- STAR RULES FROM USER BLOCK (override) --- */
.stars{display:inline-flex;gap:3px;vertical-align:middle}
.stars.small .star{ width:13px; height:13px }
.star.off{ opacity:.28; filter:saturate(.5) }
.stars.pick{display:inline-flex;gap:6px;cursor:pointer}
.star.btn{width:22px;height:22px;background:#2b2f45;opacity:.6}
.star.btn.on{background:#ffd166;opacity:1}
.stars.small .star,
.stars .star.btn{
.stars.small .star.off,
.star.btn.off{ background: var(--star-off) }
.stars.pick .star.btn{ width:28px; height:28px; cursor:pointer; transition: transform .12s ease }
.stars.pick .star.btn:hover{ transform: scale(1.06) }
.stars .star.btn.on { background: linear-gradient(135deg, #ffd166, #ffe38b); box-shadow: 0 0 10px rgba(255,209,102,.5) }
.stars .star.btn.off { background: #1d2236; opacity: .55 }
.stars.small .star { width:16px; height:16px }
.stars .star { background: linear-gradient(135deg, #ffd166, #ffe38b) }
.ratebox .stars.pick{ margin:8px 0 10px; filter:none }
.ratebox .stars.pick .star.btn{ 
.ratebox .stars.pick .star.btn.off{ 
.ratebox .stars.pick{ position:relative; z-index:2 }
.review .stars .star{ animation: twinkle 4.5s ease-in-out infinite; }
.review .stars .star:nth-child(2){ animation-delay: .2s }
.review .stars .star:nth-child(3){ animation-delay: .4s }
.review .stars .star:nth-child(4){ animation-delay: .6s }
.review .stars .star:nth-child(5){ animation-delay: .8s }
.rating .star{ width:32px; height:32px; padding:0; background:none; border:0; cursor:pointer; }
.rating .star svg{ width:100%; height:100%; display:block; overflow:visible; }
.rating .star.on path{ fill:#FFD166 }
.rating .star.off path{ fill:#202741 }
.rating .star:focus-visible{ outline:2px solid var(--neon-p2); outline-offset:2px; border-radius:6px }

#rv-list-ru .hidden-extra{display:none}
