/* VPNovaya rebuilt static site (responsive + readable)
   Colors/geometry tuned to match 2023-07-21 snapshot screenshot.
*/

:root{
  --bg: #f3e8e7;
  --text: #1a1a1a;
  --muted: #555;
  --header: #070b17;
  --hero-dark: #0b0f1f;
  --hero-red: #8b1c25;
  --hero-red2:#b2212d;
  --accent: #0a8a73;
  --accent-hover:#0b9b82;
  --link: #0a8a73;
  --card: rgba(255,255,255,.6);
  --border: rgba(0,0,0,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --radius: 18px;
  --content: 760px;
}

@font-face{
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  src: url("../RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2") format("woff2");
  font-display: swap;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; height: auto; display:block; }
.container{ width:min(1100px, calc(100% - 40px)); margin:0 auto; }

/* ===== Header ===== */
.site-header{
  background: var(--header);
  color: #fff;
  position: sticky;
  top:0;
  z-index: 50;
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset;
}
.site-header .bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.brand__logo{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
}
.brand__logo svg{ width: 34px; height: 34px; }
.brand__name{
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .2px;
  opacity: .95;
}

.nav{
  display:flex;
  align-items:center;
  gap: 26px;
  flex-wrap: wrap;
}
.nav a{
  color:#fff;
  opacity:.9;
  font-weight: 560;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nav a:hover{ opacity: 1; text-decoration: none; }

.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(10,138,115,.25);
}
.btn--primary:hover{ background: var(--accent-hover); text-decoration:none; }

/* Mobile header */
.burger{
  display:none;
  background: transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  width: 44px;
  height: 40px;
  border-radius: 10px;
}
.burger svg{ width: 18px; height: 18px; }

@media (max-width: 880px){
  .nav:not(.nav--mobile){ display:none; }
  .nav.nav--mobile{ display:flex; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .brand{ min-width:auto; }
}

/* ===== Hero ===== */
.hero{
  padding: 22px 0 10px;
  background: var(--header);
}
.hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow);
  min-height: 240px;
  background:
    /* scanlines */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 14px,
      rgba(255,255,255,.06) 15px,
      rgba(255,255,255,.00) 26px
    ),
    /* right red block */
    linear-gradient(135deg, rgba(178,33,45,0) 0%, rgba(178,33,45,0) 54%, rgba(178,33,45,.90) 54.2%, rgba(139,28,37,.90) 100%),
    /* base */
    linear-gradient(90deg, #0b1124 0%, #0a1023 48%, #160b1b 100%);
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(800px 300px at 100% 50%, rgba(255,0,60,.14), transparent 55%);
  pointer-events:none;
}
.hero-inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 26px;
  padding: 34px 34px;
}
.hero-logo{
  width: 106px;
  height: 106px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.hero-logo img{
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

.hero-title{
  flex:1;
  text-align: center;
  color:#fff;
}
.hero-title h1{
  margin: 0 0 6px;
  font-size: clamp(42px, 5.2vw, 62px);
  font-weight: 780;
  letter-spacing: .2px;
}
.hero-title p{
  margin:0;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 520;
  opacity: .95;
}
@media (max-width: 820px){
  .hero-inner{
    padding: 26px 20px;
    flex-direction: column;
  }
  .hero-title{ text-align: center; }
}

/* ===== Content ===== */
.main{
  padding: 16px 0 48px;
}
.content{
  width:min(var(--content), calc(100% - 40px));
  margin:0 auto;
}
.lead{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 20px 20px;
}
.lead p{
  margin:0;
  font-size: 14.6px;
}
.lead a{ text-decoration: underline; text-decoration-thickness: 1px; }

.section{
  margin-top: 28px;
  font-size: 15.2px;
}
.section p{ margin: 0 0 14px; }
.section strong{ font-weight: 760; }

.h2{
  font-size: 18px;
  font-weight: 800;
  text-align:center;
  margin: 22px 0 14px;
}
.cta{
  margin: 16px 0 12px;
  display:flex;
  justify-content:center;
}
.btn--cta{
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 999px;
}
.note{
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
.hr{
  margin: 22px 0;
  height:1px;
  background: rgba(0,0,0,.10);
  border:0;
}

/* ===== FAQ ===== */
.faq{
  margin-top: 26px;
}
.faq h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 860;
}
.faq-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item{
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding-bottom: 10px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 760;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{
  opacity:.9;
}
.faq-item[open] summary{ opacity: 1; }
.faq-a{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.4px;
}
.more-wrap{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}
.btn--ghost{
  background: transparent;
  color: #111;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: none;
  padding: 10px 18px;
}
.btn--ghost:hover{ opacity: .9; text-decoration:none; }

/* ===== Footer ===== */
.site-footer{
  background: var(--header);
  color: rgba(255,255,255,.85);
  padding: 16px 0;
}
.site-footer .inner{
  font-size: 12px;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-align:center;
}
.site-footer a{ color: rgba(255,255,255,.9); text-decoration: underline; }

/* ===== Accessibility ===== */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:#fff;
  color:#000;
  border-radius:10px;
  z-index:999;
  box-shadow: var(--shadow);
}

.is-hidden{ display:none; }