
:root{
  --bg:#04102a;
  --text:#ffffff;
  --muted:#b9c4da;
  --line:rgba(255,255,255,.08);
  --panel:rgba(20,31,58,.78);
  --panel-strong:rgba(24,37,67,.92);
  --accent:#ffd400;
  --purple:linear-gradient(90deg,#8f43ff 0%,#c15cff 100%);
  --green:linear-gradient(90deg,#00b894 0%,#24d18a 100%);
  --gold:linear-gradient(90deg,#f7c600 0%,#ffd800 100%);
  --blue:linear-gradient(90deg,#0088cc 0%,#19b7ff 100%);
  --shadow:0 18px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:-20px; pointer-events:none;
  background:
    linear-gradient(rgba(4,11,29,.72),rgba(4,16,42,.82)),
    url('https://ak.picdn.net/shutterstock/videos/3696946127/thumb/1.jpg') center center / cover no-repeat;
  filter:blur(10px); transform:scale(1.08); z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.75;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.20) 50%, transparent 51%),
    radial-gradient(2px 2px at 25% 70%, rgba(255,255,255,.14) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 18%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 56%, rgba(255,255,255,.15) 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 34%, rgba(255,255,255,.14) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 36%, rgba(255,255,255,.12) 50%, transparent 51%);
}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.page-container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,18,42,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header-inner{
  width:min(1180px,calc(100% - 32px)); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:center;
  padding:14px 0;
}
.topbar{
  background:rgba(43,54,74,.92); color:#e6eeff; text-align:center;
  padding:14px 16px; font-size:16px; border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); min-width:0;
}
.lang-wrap{
  position:relative;
  display:flex; flex-direction:column; gap:8px; min-width:0;
  background:linear-gradient(180deg, rgba(25,39,72,.92), rgba(18,29,57,.92));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px 14px;
  box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.lang-label{font-size:13px;color:#aebcda}
.lang-select{display:none}
.lang-ui{position:relative}
.lang-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background-color:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px 14px; font-size:15px; font-weight:700; cursor:pointer;
}
.lang-trigger-left{display:flex;align-items:center;gap:10px;min-width:0}
.lang-flag{width:22px;height:16px;object-fit:cover;border-radius:3px;display:block;flex-shrink:0}
.lang-trigger-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-trigger-arrow{font-size:12px;color:#d6e0f5;transition:transform .18s ease}
.lang-wrap.open .lang-trigger-arrow{transform:rotate(180deg)}
.lang-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  display:none; padding:8px; background:rgba(21,32,58,.98); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.32); max-height:320px; overflow:auto;
}
.lang-wrap.open .lang-menu{display:block}
.lang-option{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:transparent; border:0; color:#fff; border-radius:10px; cursor:pointer; text-align:left; font:inherit;
}
.lang-option:hover{background:rgba(255,255,255,.08)}
.lang-option.is-active{background:rgba(255,255,255,.10)}
.hero{
  min-height:340px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:84px 0 30px;
}
.hero h1{margin:0 0 14px;font-size:clamp(38px,7vw,66px);line-height:1.05;font-weight:800;letter-spacing:-0.03em;text-shadow:0 10px 28px rgba(0,0,0,.32)}
.hero p{margin:0 auto;max-width:760px;font-size:clamp(18px,2.4vw,28px);line-height:1.45;color:var(--muted);text-shadow:0 8px 22px rgba(0,0,0,.28)}
.vpn-wrap{margin:0 auto 18px}
.vpn-banner,.tg-banner{display:flex;justify-content:center}
.vpn-banner{margin-bottom:8px}
.tg-banner{margin:0 0 26px}
.vpn-btn,.tg-btn{
  position:relative; display:flex; width:100%; max-width:1080px; align-items:center; justify-content:center; gap:16px;
  text-decoration:none; color:#fff; border-radius:18px; border:1px solid rgba(255,255,255,.10); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; isolation:isolate;
}
.vpn-btn{min-height:78px;padding:16px 26px;background:linear-gradient(180deg,rgba(29,43,73,.96),rgba(21,31,56,.94));box-shadow:var(--shadow),0 0 24px rgba(255,153,0,.24);backdrop-filter:blur(7px)}
.tg-btn{min-height:72px;padding:16px 24px;background:var(--blue);box-shadow:var(--shadow),0 0 28px rgba(0,170,255,.26)}
.vpn-btn::before,.tg-btn::before,.card::before,.btn::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-120%);transition:transform .7s ease;z-index:0;pointer-events:none;
}
.vpn-btn:hover::before,.tg-btn:hover::before,.card:hover::before,.btn:hover::before{transform:translateX(120%)}
.vpn-btn:hover,.tg-btn:hover{transform:translateY(-3px)}
.vpn-btn-icon,.vpn-btn-text,.tg-btn-icon,.tg-btn-text{position:relative;z-index:1}
.vpn-btn-icon{width:54px;height:54px;min-width:54px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.vpn-btn-icon img{width:100%;height:100%;object-fit:cover;display:block}
.vpn-btn-text{font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;text-align:center}
.vpn-note{text-align:center;font-size:13px;color:rgba(185,196,218,.85);margin-top:8px}
.tg-btn-icon{width:44px;height:44px;min-width:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);overflow:hidden}
.tg-btn-icon img{width:100%;height:100%;object-fit:cover;display:block}
.tg-btn-text{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:56px}
.card{
  position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(29,43,73,.92),rgba(21,31,56,.90));
  border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:18px; box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease; backdrop-filter:blur(7px)
}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.16)}
.card>*{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.logo-wrap{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.logo-wrap img{width:100%;height:100%;object-fit:contain;display:block;background:#000;padding:4px}
.brand-title{font-size:18px;font-weight:800;line-height:1.1;text-transform:uppercase}
.rating{color:var(--muted);font-size:16px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.stars{color:var(--accent);font-size:18px;letter-spacing:1px}
.bonus{border-radius:10px;padding:12px 14px;font-size:15px;font-weight:700;margin-bottom:16px;border:1px solid rgba(255,255,255,.2)}
.bonus.gold{color:#ffe14c;border-color:rgba(255,215,0,.55);background:rgba(255,208,0,.06)}
.bonus.purple{color:#d6b0ff;border-color:rgba(176,101,255,.5);background:rgba(137,87,255,.08)}
.bonus.green{color:#7df0d2;border-color:rgba(16,185,129,.45);background:rgba(18,171,120,.08)}
ul.features{margin:0 0 18px;padding-left:18px;color:var(--muted);line-height:1.6;min-height:92px}
.payments{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.payment{width:38px;height:26px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid rgba(17,24,39,.08);overflow:hidden;color:#111827;font-size:9px;font-weight:900;line-height:1;padding:0 6px}
.payment img{width:22px;height:22px;object-fit:contain;display:block}
.payment svg{display:block}
.payment.mc svg{width:26px;height:18px}
.btn{
  position:relative;display:inline-flex;width:100%;align-items:center;justify-content:center;text-decoration:none;
  color:#061120;font-size:18px;font-weight:800;border-radius:10px;min-height:54px;transition:transform .2s ease;
  overflow:hidden;isolation:isolate
}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.btn span{position:relative;z-index:1}
.btn.gold{background:var(--gold)}
.btn.purple{background:var(--purple);color:#fff}
.btn.green{background:var(--green);color:#fff}
.page-card{
  background:linear-gradient(180deg,rgba(29,43,73,.92),rgba(21,31,56,.90));
  border:1px solid rgba(255,255,255,.08); border-radius:22px; box-shadow:var(--shadow);
  padding:26px 24px; backdrop-filter:blur(7px);
}
.page{padding:26px 0 70px}
.back{display:inline-block;margin-bottom:24px;color:var(--accent);text-decoration:none;font-size:18px}
h1.page-title{margin:0 0 26px;font-size:clamp(42px,6vw,62px);line-height:1.06;font-weight:800;letter-spacing:-0.03em}
.updated,p.policy-p{color:var(--muted);font-size:clamp(18px,2vw,23px);line-height:1.55;margin:0 0 28px}
h2.policy-h2{font-size:clamp(28px,3vw,42px);line-height:1.18;margin:38px 0 18px;font-weight:800;letter-spacing:-0.02em}
.footer{text-align:center;color:#8ea0c6;padding:28px 0 42px;font-size:14px;background:rgba(1,10,28,.65);border-top:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px);margin-top:8px}
.footer-links{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-bottom:22px}
.footer-links a{color:#b8c7e6;text-decoration:none;font-size:16px;font-weight:500}
.footer-links a:hover,.footer-links a.active{color:var(--accent)}
.footer-copy{font-size:18px;color:#92a2c7;margin-bottom:14px}
.footer-warning{max-width:900px;margin:0 auto;font-size:13px;line-height:1.45;color:rgba(185,196,218,.72)}
body.rtl{direction:rtl;text-align:right}
body.rtl .site-header-inner{grid-template-columns:280px minmax(0,1fr)}
body.rtl ul.features{padding-left:0;padding-right:18px}
body.rtl .lang-current{justify-content:flex-start}
@media (max-width:980px){
  .hero{min-height:290px;padding:64px 0 28px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
  .container,.page-container{width:min(100% - 20px,1180px)}
  .site-header{position:relative}
  .site-header-inner{width:min(100% - 20px,1180px);grid-template-columns:1fr;gap:10px;padding:10px 0}
  .topbar{width:100%;max-width:100%;font-size:14px;padding:12px}
  .lang-wrap{padding:10px 12px;border-radius:16px}
  .lang-label{font-size:12px}
  .lang-menu{max-height:260px}
  .lang-current{font-size:14px}
  .lang-select{font-size:16px;padding:12px 14px}
  .hero{min-height:230px;padding:48px 0 22px}
  .hero h1{font-size:clamp(32px,10vw,42px)}
  .hero p{font-size:16px;max-width:95%}
  .vpn-btn{gap:12px;min-height:64px;padding:14px 16px;border-radius:16px}
  .vpn-btn-icon{width:42px;height:42px;min-width:42px}
  .vpn-btn-text,.tg-btn-text{font-size:17px;line-height:1.2}
  .tg-btn{min-height:60px;padding:14px 16px;gap:10px;border-radius:16px}
  .tg-btn-icon{width:38px;height:38px;min-width:38px;font-size:20px}
  .cards{grid-template-columns:1fr;gap:14px;padding-bottom:32px}
  .card,.page-card{padding:16px;border-radius:16px}
  .footer-links{gap:14px;flex-direction:column}
  .footer-copy{font-size:16px}
  .footer-warning{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .card,.btn,.vpn-btn,.tg-btn,.footer-links a{transition:none !important}
  .card::before,.btn::before,.vpn-btn::before,.tg-btn::before{display:none !important}
}
