/* Шрифтовая пара (variable, OFL, хостятся локально — CSP: font-src 'self').
   Manrope — заголовки, кнопки, крупные цифры; Inter — основной и мелкий текст:
   спроектирован для UI-кеглей (высокий x-height, открытые апертуры). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/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: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root { color-scheme: light; --ink:#25272c; --muted:#787b85; --surface:#fff; --widget:#f3f3f5; --line:#e6e6ea; --button:#27282d; --button-text:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:32px; } body { margin:0; background:var(--surface); color:var(--ink); font-family:Inter, sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; } a:focus-visible, summary:focus-visible { outline:3px solid #9284e8; outline-offset:5px; } h1,h2,h3,.brand,.button,.browser { font-family:Manrope, sans-serif; } h1,h2,h3,p { margin:0; } .wrap { width:min(100% - 112px,1280px); margin-inline:auto; } .header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:96px; } .brand { font-size:26px; font-weight:850; letter-spacing:-1px; } .header nav { display:flex; gap:32px; font-size:14px; } .header nav a:hover,footer a:hover { text-decoration:underline; } .hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:28px; min-height:510px; padding:38px 0 56px; border-bottom:1px solid var(--line); } h1 { font-size:clamp(40px,4.3vw,62px); font-weight:800; line-height:1.08; letter-spacing:-2.8px; } .lead { max-width:495px; color:var(--muted); font-size:18px; line-height:1.65; margin-top:24px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:18px 26px; min-height:56px; border-radius:18px; background:var(--button); color:var(--button-text); font-size:15px; font-weight:750; margin-top:30px; } .button span { color:#b9a8ff; font-size:24px; line-height:1; } .button:hover { opacity:.9; } .hero-art { width:100%; max-width:490px; justify-self:end; } .section { padding-top:52px; } h2 { font-size:32px; line-height:1.2; font-weight:800; letter-spacing:-1px; } .section-intro { margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); } .browsers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:26px; } .browser { background:var(--widget); border:1px solid transparent; border-radius:22px; padding:26px 18px; display:flex; gap:12px; align-items:center; font-size:15px; font-weight:700; transition:transform .15s,border-color .15s; } .browser img { width:40px; height:40px; object-fit:contain; flex-shrink:0; } .browser span { margin-left:auto; font-size:23px; color:var(--muted); } .browser:hover { border-color:var(--line); transform:translateY(-3px); } .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; list-style:none; padding:0; margin:28px 0 0; } .step-number { display:block; font-family:Manrope,sans-serif; font-size:54px; font-weight:800; line-height:1.2; letter-spacing:-2px; color:#bbbdc5; margin-bottom:14px; } h3 { font-size:21px; letter-spacing:-.4px; } .steps p { color:var(--muted); font-size:15px; line-height:1.7; margin-top:12px; } .details { margin-top:30px; border-top:1px solid var(--line); } details { padding:20px 0; border-bottom:1px solid var(--line); } summary { cursor:pointer; font-weight:650; font-size:15px; } details p { max-width:800px; font-size:14px; line-height:1.8; color:var(--muted); margin-top:14px; } details a { text-decoration:underline; text-underline-offset:3px; } footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:32px 0 38px; margin-top:40px; border-top:1px solid var(--line); font-size:13px; line-height:1.6; color:var(--muted); } footer nav { display:flex; gap:22px; }
@media (max-width:1100px) { .wrap { width:calc(100% - 64px); } .browser { flex-wrap:wrap; padding:22px 16px; gap:10px; } .browser img { width:34px; height:34px; } .browser span { display:none; } }
@media (max-width:700px) { .wrap { width:calc(100% - 36px); } .header { min-height:76px; gap:12px; } .brand { font-size:22px; } .header nav { gap:14px; font-size:11px; } .hero { grid-template-columns:1fr; gap:12px; padding:32px 0; min-height:0; } h1 { font-size:40px; letter-spacing:-1.8px; } .lead { font-size:15px; margin-top:18px; } .button { margin-top:24px; min-height:50px; padding:14px 22px; font-size:14px; } .hero-art { width:70%; max-width:300px; justify-self:center; } .section { padding-top:34px; } h2 { font-size:27px; } .browsers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; } .browser { flex-wrap:nowrap; padding:20px 15px; font-size:14px; border-radius:18px; } .browser:last-child { grid-column:1/-1; } .browser span { display:block; } .steps { grid-template-columns:1fr; gap:24px; margin-top:24px; } .steps li { position:relative; padding-left:62px; min-height:74px; } .step-number { position:absolute; top:0; left:0; font-size:36px; } h3 { font-size:19px; } .steps p { margin-top:6px; font-size:14px; } footer { margin-top:30px; padding-bottom:30px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .browser { transition:none; } }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --ink:#f2f2f5; --muted:#a2a3af; --surface:#17181c; --widget:#24262c; --line:#35363e; --button:#ededf3; --button-text:#25272c; } .button span { color:#725bd1; } .step-number { color:#636671; } }

/* Original FASTVPN logo and explicit home navigation. */
.header .brand { display:block; flex:0 0 auto; width:154px; }
.header .brand img { width:100%; height:auto; }
.header nav { align-items:center; }
.header .home-link { padding:10px 16px; border-radius:12px; background:var(--widget); font-weight:650; white-space:nowrap; }
@media (max-width:700px) {
 .header { flex-wrap:wrap; padding:20px 0 8px; gap:18px; }
 .header .brand { width:138px; }
 .header nav { width:100%; justify-content:space-between; gap:10px; font-size:12px; }
 .header .home-link { padding:9px 12px; }
}
@media (prefers-color-scheme:dark) { .header .brand img { filter:invert(1); } }

/* FASTVPN unified graphite theme. */
:root { color-scheme:dark; --ink:#f4f3f8; --muted:#aaa7b8; --surface:#202027; --widget:#2b2b34; --line:rgba(221,218,239,.11); --button:#9b87ff; --button-text:#fff; }
body { background:var(--surface); }
.header .brand img { filter:invert(1) grayscale(1) brightness(1.8); }
.header .home-link { background:#32323b; color:#f4f3f8; }
.hero { min-height:540px; margin-top:8px; padding:52px clamp(30px,5vw,66px); border:1px solid rgba(163,143,255,.15); border-radius:36px; background:radial-gradient(circle at 82% 28%,rgba(143,124,255,.24),transparent 29%),linear-gradient(145deg,#2b2b34,#25252d); overflow:hidden; }
.lead,.section-intro,.steps p,details p,footer { color:var(--muted); }
.button { background:linear-gradient(145deg,#a38fff,#7d68e8); box-shadow:0 14px 30px rgba(99,77,226,.22); }
.button span { color:#fff; }
.hero-art { max-width:430px; filter:brightness(1.28) saturate(.72) drop-shadow(0 30px 42px rgba(0,0,0,.38)); transform:rotate(3deg); }
.section { padding-top:78px; }
.browser { border-color:var(--line); background:#2b2b34; }
.browser:hover { border-color:rgba(163,143,255,.36); background:#30303a; }
.step-number { color:#8f7cff; }
.details,details,footer { border-color:var(--line); }

@media (max-width:700px) {
  .wrap { width:calc(100% - 24px); }
  .header { padding-top:14px; }
  .header nav { overflow-x:auto; justify-content:flex-start; padding-bottom:3px; }
  .header nav a { flex:0 0 auto; }
  .hero { margin-top:12px; padding:34px 22px 22px; border-radius:28px; }
  .hero-art { width:64%; margin-top:8px; }
  .section { padding-top:58px; }
  .browser { min-height:72px; padding:15px 13px; }
  .steps { gap:20px; }
}

/* Phosphor ArrowUpRight Bold — matches the main site's install button. */
.link-arrow {
  display:inline-block;
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.button .link-arrow { color:#fff; font-size:18px; }
.browser .link-arrow { display:inline-block; margin-left:auto; color:var(--muted); font-size:18px; }
footer .link-arrow { margin-left:4px; vertical-align:-.16em; font-size:14px; }