/* kupolvpn.com — общие стили брендового сайта Kupol VPN (13.11.2026).
   Цвета — docs/brand/identity-2026-10-15/brand.json, как у clearpayline.com: знак, Шорох,
   кремовый фон. Светлая гамма: тёмный экран с неоном здесь намеренно не используем. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/manrope-latin-start.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2019,U+201C-201E,U+2026,U+2192}
:root{
  --ink:#0E1512; --pine:#0F4A37; --pine-t:#17664D; --mint:#41FF8E; --mint-soft:#DDF5E6;
  --cream:#F6F1E7; --card:#FFFDF9; --amber:#E8A23A; --amber-soft:#FBEBD0;
  --muted:#5B605B; --line:#E4DCCB; --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);line-height:1.6;font-size:16.5px;
  font-family:Manrope,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;padding-bottom:84px}
a{color:var(--pine-t);text-underline-offset:3px}
img,svg{max-width:100%;display:block}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* --- шапка --- */
.top{display:flex;align-items:center;gap:10px;padding:16px 0 4px;flex-wrap:wrap}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.top .brand svg{border-radius:9px}
.top .brand b{font-weight:800;font-size:19px;letter-spacing:-.2px}
.top nav{margin-left:auto;display:flex;gap:4px 14px;flex-wrap:wrap;font-size:14.5px}
.top nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:4px 0}
.top nav a[aria-current]{color:var(--ink)}
.crumbs{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.crumbs a{color:var(--muted)}

/* --- первый экран: светлая карточка с куполом --- */
.hero{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px 20px 24px;margin:12px 0 0;
  position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-30%;bottom:-70%;width:110%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(65,255,142,.16),rgba(65,255,142,0) 70%);pointer-events:none}
.hero > *{position:relative}
.hero .kick{display:inline-block;background:var(--mint-soft);color:var(--pine);font-weight:700;font-size:13.5px;
  border-radius:999px;padding:4px 12px;margin:0 0 12px}
.hero h1{font-size:27px;line-height:1.15;letter-spacing:-.5px;margin:0 0 12px;font-weight:800}
.hero h1 span{display:block;color:var(--pine-t)}
.hero .lead{color:var(--muted);margin:0 0 16px;font-size:16.5px}
.heroimg{display:flex;justify-content:center;margin:0 0 6px}
/* у Шороха светлый фон картинки: multiply растворяет его в карточке, маска смягчает края */
.heroimg img{width:32%;max-width:210px;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000 62%,transparent 100%)}
.btns{display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;
  padding:13px 20px;border-radius:14px;text-decoration:none;font-weight:800;font-size:17px;
  border:0;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.98)}
.btn.main{background:var(--pine);color:var(--card)}
.btn.alt{background:transparent;color:var(--pine-t);border:1.5px solid var(--line);font-weight:700;font-size:16px}
.btn svg{width:22px;height:22px;flex:none}
.under{color:var(--muted);font-size:13.5px;margin:10px 0 0}

h2{font-size:24px;line-height:1.22;letter-spacing:-.3px;margin:38px 0 12px;font-weight:800}
h3{font-size:18px;margin:20px 0 6px}
p{margin:0 0 12px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 10px}
ul.plain{margin:0 0 12px;padding-left:20px}
ul.plain li{margin:0 0 6px}

/* --- кому подойдёт / устройства --- */
.cards{display:grid;gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.card b{display:block;margin:0 0 3px}
.card span{color:var(--muted);font-size:15px}

/* --- шаги --- */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:10px}
ol.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:15.5px}
ol.steps li::before{content:counter(s);position:absolute;left:16px;top:13px;width:28px;height:28px;border-radius:50%;
  background:var(--amber);color:var(--ink);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
ol.steps b{color:var(--ink)}

/* --- цены --- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;text-decoration:none;color:var(--ink)}
.price .p{font-size:22px;font-weight:800;letter-spacing:-.3px}
.price .t{color:var(--muted);font-size:14px}
.price.best{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine)}

/* --- официальные адреса --- */
.links{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.links li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:15.5px}
.links li small{display:block;color:var(--muted);font-size:13.5px}

/* --- вопросы --- */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 9px}
details summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:16px;list-style:none;min-height:50px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--pine-t);font-size:22px;line-height:1;flex:none}
details[open] summary::after{content:"–"}
details .ans{padding:0 16px 15px;color:var(--muted);font-size:15.5px}

.final{background:var(--amber-soft);border-radius:22px;padding:22px 18px;margin:34px 0 0;text-align:center}
.final h2{margin:0 0 6px}
.final p{color:var(--muted)}
.final .btn{margin:0 auto}

footer{margin-top:36px;padding:20px 0 26px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
footer a{color:var(--muted)}
footer .flinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px}
footer p{margin:6px 0 0}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,241,231,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:none}
.sticky .btn{max-width:728px;margin:0 auto;min-height:50px}

@media(min-width:640px){
  body{padding-bottom:0}
  .hero{padding:30px 32px 30px}
  .hero h1{font-size:40px}
  .herogrid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:center}
  .heroimg img{width:100%}
  .btns{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .prices{grid-template-columns:repeat(4,1fr)}
  .final .btn{max-width:420px}
  .sticky{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}