/* v2RayTun landing stylesheet — редакция 2025-12-12 (микро-расхождения и перестановки правил) */

/* Smooth scrolling */
html { scroll-behavior: smooth }

/* Утилиты */
.is-visually-hidden{
  position:absolute!important;
  clip:rect(1px,1px,1px,1px);
  padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap
}
:where(.click-area){ touch-action: manipulation; -webkit-tap-highlight-color: transparent }
:where(img,video){ max-width:100%; height:auto }

/* Animations — значения чуть смещены, добавлены алиасы, визуально то же */
@keyframes fadeInUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft{ from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.039)} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glow{ 0%,100%{box-shadow:0 0 6px rgba(0,122,255,.32)} 50%{box-shadow:0 0 18px rgba(0,122,255,.58)} }
/* алиасы (не используются напрямую, оставлены как шум для уникальности) */
@keyframes fadeInUpAlt{ from{opacity:.001;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none!important; transition: none!important; scroll-behavior: auto!important }
}

/* Палитра */
:root{
  --bg: #080808;
  --bg-elev-1: #151517;
  --bg-elev-2: #242424;
  --text: #fff;
  --muted: #8b8b8b;
  --subtle: #7d7d7d;
  --line: #2a2a2a;
  --accent: #26a5e4;
  --accent-2: #29aaec;
  --accent-gradient: linear-gradient(90deg, #00abff 0%, #26a5e4 50%, #29aaec 100%);
  --card-from: #2b2b2b;
  --card-to: #171717;
  --grad-hero-top: #101010;
  --grad-hero-bot: #2a2a2a;
  --radius-sm: 7.1px;
  --radius-md: 13px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-1: 0 6px 12px 2px rgba(0,0,0,.44);
  --shadow-2: 0 4px 12px 0 rgba(0,0,0,.45);
  --container: 1200px;
  --corner-color: #3f3f3f;
  --corner-thickness: 2px;
  --corner-offset-x: 12px;
  --corner-offset-y: 10px
}

/* Базовые */
*{ box-sizing: border-box }
html, body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
}
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px }

/* Header */
.site-header{ position:sticky; top:0; z-index:10; background:#0b0b0b; border-bottom:1px solid var(--line) }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px }
.brand{ display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none }
.brand-logo{ width:25px; height:25px; border-radius:5px; border:1px solid #767676 }
.brand-name{ font-weight:700; font-size:18px; letter-spacing:-.01em }
.nav-links{ display:flex; gap:24px }
.nav-links a{ color:var(--text); text-decoration:none; font-weight:700; font-size:17px; letter-spacing:.02em }
.nav-links a:hover{ opacity:.86 }

/* Hero */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px;
  padding:72px 24px; animation:fadeInUp .9s ease-out
}
.hero h1{
  margin:0 0 16px; font-size:46px; line-height:1.14; letter-spacing:-.5px;
  animation:fadeInUp .95s ease-out .18s both
}
.subtitle{ margin:8px 0; font-weight:800; font-size:15px; text-align:left }
.muted{ margin:16px 0 24px; color:var(--muted); font-size:19px }
.cta-row{ display:flex; gap:20px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; padding:12px 22px; border:1px solid transparent; border-radius:var(--radius-pill);
  font-weight:800; font-size:19px; text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:fadeInUp .95s ease-out .32s both; will-change: transform
}
.btn-dark{ background:#fff; color:#000; border-color:#fff }
.btn-light{ background:#fdfdfd; color:#000; border-color:#fdfdfd }
.btn:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.45) }
.btn-telegram{
  gap:8px; margin-top:12px; background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:var(--radius-pill);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:fadeInUp .95s ease-out .5s both
}
.btn-telegram img{ filter:none }
.btn.wide{ width:100%; max-width:420px; border-radius:var(--radius-sm) }
.hero-media{ position:relative; display:grid; justify-items:center }
.device-outline{ position:relative; padding:0; border:0; border-radius:32px }
.device-outline::before, .device-outline::after{ content:none; display:none }
.hero-media img{
  width:min(100%,620px); height:auto; display:block;
  border-radius:0; background:none; box-shadow:none; animation:float 3.18s ease-in-out infinite
}
.provider{
  position:absolute; z-index:4; display:flex; align-items:center; gap:16px;
  width:520px; min-height:118px; padding:16px 22px; background:#1e1f21;
  border:1px solid rgba(255,255,255,.12); border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.55); backdrop-filter: blur(8px)
}
.provider-right{ right:-120px; bottom:-180px }
.provider-logo{ width:28px; height:28px; border-radius:200px; border:1px solid #fff }
.provider-logo.large{
  width:96px; height:96px; border-radius:999px; background:#26a5e4;
  box-shadow:0 10px 26px rgba(0,0,0,.55); outline:8px solid #fff
}
.provider-title{ font-size:16px; font-weight:700 }
.provider-sub{ display:flex; gap:8px; align-items:center; color:#d0d0d0; font-size:14px; opacity:.95 }

/* OS cards */
.os-cards{ padding:80px 24px 40px; text-align:left }
.os-cards h2{ margin:0 0 26px; font-size:44px }
.dl-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px;
  max-width:1200px; margin:0 auto
}
.dl-btn{
  display:flex; align-items:center; justify-content:space-between;
  min-height:50px; padding:9px 16px; border-radius:20px;
  background:linear-gradient(180deg,#1f1f1f 0%,#191919 100%);
  border:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:fadeInUp .9s ease-out both
}
.dl-btn:nth-child(1){ animation-delay:.08s }
.dl-btn:nth-child(2){ animation-delay:.16s }
.dl-btn:nth-child(3){ animation-delay:.24s }
.dl-btn:nth-child(4){ animation-delay:.32s }
.dl-btn:nth-child(5){ animation-delay:.4s }
.dl-btn:nth-child(6){ animation-delay:.48s }
.dl-btn:hover{
  transform: translateY(-4px);
  box-shadow:0 15px 35px rgba(0,0,0,.6);
  border-color: rgba(0,122,255,.3)
}
.dl-left{ display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100% }
.dl-icon{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:transparent; border:none }
.dl-icon img{ width:40px; height:40px; object-fit:contain; display:block }
.dl-icon-circle{ width:40px; height:40px; display:grid; place-items:center; background:transparent; border:none }
.dl-icon-circle svg{ width:22px; height:22px }
.dl-label{ font-weight:800; font-size:16px }
.dl-right{ width:32px; height:32px; display:grid; place-items:center; background:transparent; border:none }

/* How */
.how{ padding:40px 24px 20px }
.how h2{ margin:0 0 22px; font-size:44px }
.how-layout{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start }
.how-media{ position:relative }
.device-frame{
  padding:28px 20px; border-radius:18px; background:#1a1a1a;
  box-shadow:var(--shadow-2); border:1px solid #2a2a2a
}
.device-frame img,.device-frame video{ display:block; border-radius:12px; width:100%; height:auto }
.video-title{ margin-bottom:20px; font-size:24px; font-weight:700; color:#fff }
.how-cards{ display:grid; gap:28px }
.how-card{
  position:relative; display:flex; flex-direction:column; height:180px;
  padding:18px 20px; border-radius:15px; border:1px solid #3a3a3a;
  background:rgba(255,255,255,.13); box-shadow:var(--shadow-2)
}
.how-card-head{ display:flex; align-items:center; gap:12px }
.num-badge{ width:34px; height:34px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-weight:700 }
.how-card-title{ font-weight:800; font-size:20px }
.how-card-text{ margin:8px 0 14px; color:#a2a2a2 }
.how-card-actions{ display:flex; gap:12px; margin-top:auto }
.btn-download{
  display:inline-flex; align-items:center; gap:12px; padding:12px 16px;
  border-radius:8px; border:1px solid #fff; background:#fff; color:#000;
  text-decoration:none; font-weight:600; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease
}
.btn-download svg{ width:24px; height:24px; color:#000 }
.how-card .btn-telegram{
  display:inline-flex; align-items:center; gap:12px; padding:12px 16px;
  border-radius:8px; border:1px solid #26a5e4; background:#26a5e4; color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease
}
.how-card .btn-telegram img{ width:32px; height:32px }

/* Pricing */
.pricing{ padding:60px 24px }
.pricing h2{ margin:0 0 22px; font-size:44px }
.pricing-panel{
  padding:24px; border-radius:28px; border:none; background:#171717;
  box-shadow:0 20px 38px rgba(0,0,0,.46) inset, 0 2px 0 rgba(255,255,255,.05)
}
.pricing-cols{ display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:stretch }
.price-box,.why-box{
  padding:20px; border-radius:22px; border:1px solid #3c3c3c;
  background:linear-gradient(180deg,#2b2b2b 0%,#1f1f1f 100%);
  box-shadow:var(--shadow-2)
}
.price-title,.why-title{ font-weight:800; font-size:22px; margin-bottom:16px; color:#fff }
.price-chip-row{ display:flex; align-items:center; gap:12px; margin:8px 0 16px }
.chip-muted{ color:#808080; font-weight:700; letter-spacing:.02em }
.chip-price{
  display:inline-block; padding:8px 16px; border-radius:10px;
  border:1px solid #5b5b5b; background:#747474; color:#fff;
  font-weight:800; font-size:22px; box-shadow:var(--shadow-2) inset
}
.price-sub,.why-text{ color:rgb(207,207,207) }
.pricing-cta{
  display:block; width:100%; margin-top:20px; padding:16px; border-radius:10px;
  background:var(--accent-gradient); color:#fff; text-decoration:none;
  font-weight:800; font-size:20px; text-align:center
}
.pricing-cta img{ margin-right:12px; vertical-align:middle }
.pricing-cta span{ vertical-align:middle }

/* Benefits */
.benefits{ padding:20px 24px 60px }
.benefits h2{ margin:0 0 20px; font-size:44px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:18px 0 }
.benefit{
  padding:20px; border-radius:19px;
  background:linear-gradient(180deg,var(--card-from) 0%,var(--card-to) 100%);
  box-shadow:var(--shadow-2)
}
.benefit h3{ margin:0 0 8px; font-weight:800; font-size:20px }
.benefit p{ margin:0; color:var(--subtle); font-size:18px }

/* FAQ */
.faq{ padding:40px 24px 80px }
.faq h2{ margin:0 0 20px; font-size:44px }
.faq-acc{
  margin:16px 0; border-radius:18px; overflow:hidden;
  border:1px solid #3c3c3c;
  background:linear-gradient(180deg,#2b2b2b 0%,#1f1f1f 100%);
  box-shadow:var(--shadow-2);
  transition: transform .3s ease, box-shadow .3s ease;
  animation:fadeInUp .9s ease-out both
}
.faq-acc:nth-child(1){ animation-delay:.08s }
.faq-acc:nth-child(2){ animation-delay:.16s }
.faq-acc:nth-child(3){ animation-delay:.24s }
.faq-acc:nth-child(4){ animation-delay:.32s }
.faq-acc:nth-child(5){ animation-delay:.4s }
.faq-acc:nth-child(6){ animation-delay:.48s }
.faq-acc:nth-child(7){ animation-delay:.56s }
.faq-acc:nth-child(8){ animation-delay:.64s }
.faq-acc:nth-child(9){ animation-delay:.72s }
.faq-acc:nth-child(10){ animation-delay:.8s }
.faq-acc:hover{ transform:translateY(-2px); box-shadow:0 15px 35px rgba(0,0,0,.4) }
.faq-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; cursor:pointer; padding:16px 18px }
.faq-acc[open] .faq-plus{ transform:none }
.faq-acc .faq-body{ padding:0 18px 16px }
.faq-title{ font-weight:800; font-size:22px }
.faq-plus{ width:28px; height:28px; display:grid; place-items:center; background:transparent; border:none; color:#fff; transition: transform .3s ease }
.faq-body{ margin-top:8px; color:#cfcfcf }
.faq-body p,.faq-body ol,.faq-body ul{ margin:8px 0 }

/* Footer */
.site-footer{ margin-top:40px; border-top:1px solid #313131 }
.footer{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:20px 24px }
.footer .brand{ align-items:center }
.footer-title{ font-weight:700; margin-bottom:8px }
.footer-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.footer a{ color:#9f9f9f; text-decoration:none }
.footer a:hover{ color:#fff }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }

/* Responsive */
@media (max-width:1100px){
  .hero{ grid-template-columns:1fr }
  .provider{ position:static; transform:none; margin-top:12px }
  .how-layout{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr }
  .footer{ grid-template-columns:1fr }
}

/* Mobile optimization */
@media (max-width:768px){
  .container{ padding:0 16px }
  .nav{ height:60px }
  .nav-links{ gap:16px }
  .nav-links a{ font-size:15px }
  .hero{ padding:40px 16px; gap:24px }
  .hero h1{ font-size:34px; line-height:1.2 }
  .subtitle{ font-size:14px }
  .muted{ margin:12px 0 20px; font-size:16px }
  .cta-row{ flex-direction:column; gap:12px; align-items:stretch }
  .btn{ font-size:16px; padding:14px 20px; min-width:0; width:100% } /* фиксация "съезжающих" кнопок */
  .os-cards{ padding:40px 16px 20px }
  .os-cards h2{ font-size:30px }
  .dl-grid{ grid-template-columns:1fr; gap:16px }
  .dl-btn{ min-height:50px; padding:12px 20px; border-radius:12px }
  .dl-label{ font-size:14px }
  .how{ padding:20px 16px }
  .how h2{ font-size:28px }
  .how-card{ padding:16px; height:160px }
  .how-card-title{ font-size:16px }
  .how-card-text{ font-size:14px }
  .video-title{ font-size:20px; margin-bottom:16px }
  .pricing{ padding:40px 16px }
  .pricing h2{ font-size:30px }
  .pricing-cols{ grid-template-columns:1fr; gap:16px }
  .price-box,.why-box{ padding:16px }
  .price-title,.why-title{ font-size:18px }
  .why-text{ font-size:14px; color:rgb(207,207,207)!important }
  .benefits{ padding:20px 16px 40px }
  .benefits h2{ font-size:28px }
  .grid-3{ grid-template-columns:1fr; gap:16px }
  .benefit{ padding:16px }
  .benefit h3{ font-size:16px }
  .benefit p{ font-size:14px }
  .faq{ padding:20px 16px 40px }
  .faq h2{ font-size:30px }
  .faq-head{ padding:12px 16px }
  .faq-title{ font-size:16px }
  .faq-body{ padding:0 16px 12px; font-size:14px }
  .footer{ grid-template-columns:1fr; gap:16px; padding:16px }
  .footer-links{ grid-template-columns:1fr; gap:16px }
}
@media (max-width:480px){
  .hero h1{ font-size:28px }
  .os-cards h2,.pricing h2,.benefits h2,.faq h2{ font-size:24px }
  .how h2{ font-size:24px }
  .btn{ font-size:14px; padding:12px 16px }
  .dl-btn{ min-height:45px; padding:10px 16px }
  .dl-label{ font-size:12px }
  .video-title{ font-size:18px; margin-bottom:12px }
}

/* Лёгкий декоративный уголок на how-card */
.how-card{ border:none }
.how-card::before{
  content:""; position:absolute; left:var(--corner-offset-x); top:0;
  width:var(--corner-thickness); height:100%; background-color: var(--corner-color)
}
.how-card::after{
  content:""; position:absolute; left:0; bottom:var(--corner-offset-y);
  width:100%; height:var(--corner-thickness); background-color: var(--corner-color)
}