Загрузка данных


<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f5f9ff">
  <meta name="description" content="Smuf VPN — скорость, приватность и удобный доступ к интернету.">
  <link rel="icon" type="image/png" sizes="512x512" href="/logo.png">
  <link rel="apple-touch-icon" href="/logo.png">
  <title>Smuf VPN — интернет без границ</title>
  <style>
    :root {
      color-scheme: light;
      --blue: #2878ee;
      --blue-dark: #155bd1;
      --ink: #15243b;
      --muted: #687991;
      --line: rgba(122, 158, 207, .18);
      --surface: rgba(255, 255, 255, .76);
      --shadow: 0 14px 45px rgba(42, 88, 151, .07);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 30px;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(ellipse at 5% 0%, rgba(194, 221, 255, .56), transparent 35%),
        radial-gradient(ellipse at 100% 45%, rgba(218, 228, 255, .48), transparent 32%),
        #f5f9ff;
      -webkit-font-smoothing: antialiased;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: -25%;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
    }

    body::before {
      background:
        radial-gradient(ellipse at 18% 28%, rgba(93, 166, 255, .17), transparent 38%),
        radial-gradient(ellipse at 82% 66%, rgba(133, 157, 255, .13), transparent 36%),
        repeating-linear-gradient(
          118deg,
          transparent 0 115px,
          rgba(56, 126, 229, .035) 116px 117px,
          transparent 118px 225px
        );
      animation: ambient-drift 38s ease-in-out infinite alternate;
    }

    body::after {
      inset: -35%;
      opacity: .55;
      background: repeating-radial-gradient(
        ellipse at 68% 48%,
        transparent 0 115px,
        rgba(66, 139, 239, .055) 116px 117px,
        transparent 118px 205px
      );
      animation: ambient-flow 52s ease-in-out infinite alternate;
    }

    @keyframes ambient-drift {
      from { transform: translate3d(-1.2%, -1%, 0) scale(1); }
      to   { transform: translate3d(1.2%, 1%, 0) scale(1.04); }
    }

    @keyframes ambient-flow {
      from { transform: rotate(-7deg) translate3d(-1%, 0, 0); }
      to   { transform: rotate(-3deg) translate3d(1%, -1%, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      body::before,
      body::after {
        animation: none !important;
      }
    }

    a { color: inherit; }

    .page {
      position: relative;
      z-index: 1;
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25px 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 19px;
      font-weight: 760;
      letter-spacing: -.045em;
      text-decoration: none;
    }

    .brand-mark {
      position: relative;
      display: grid;
      width: 39px;
      height: 39px;
      place-items: center;
      overflow: hidden;
      border-radius: 13px;
      color: #fff;
      font-size: 18px;
      font-weight: 850;
      background: linear-gradient(145deg, #67adff, #2164e8);
      box-shadow: 0 6px 17px rgba(37, 105, 226, .22);
    }
    .brand-mark img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 3px;
      background: #fff;
    }
    .brand-fallback { position: relative; z-index: 0; }

    .top-link {
      color: #3d70bd;
      font-size: 14px;
      font-weight: 650;
      text-decoration: none;
    }

    .top-link:hover { color: var(--blue-dark); }

    .hero {
      position: relative;
      padding: 65px 0 85px;
      text-align: center;
    }

    .hero-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin: 0 auto 28px;
    }

    .hero-brand img {
      display: block;
      width: 88px;
      height: 88px;
      object-fit: contain;
      border-radius: 22px;
      box-shadow: 0 12px 34px rgba(40, 105, 226, .2);
    }

    .hero-brand span {
      color: var(--ink);
      font-size: 23px;
      font-weight: 780;
      letter-spacing: -.045em;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 21px;
      padding: 9px 13px;
      border: 1px solid rgba(80, 142, 230, .16);
      border-radius: 999px;
      color: #3976ce;
      background: rgba(255, 255, 255, .62);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .12em;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #20b66a;
      box-shadow: 0 0 0 4px rgba(32, 182, 106, .14);
    }

    h1 {
      max-width: 800px;
      margin: 0 auto;
      font-size: clamp(43px, 7.2vw, 78px);
      line-height: 1.025;
      letter-spacing: -.075em;
      font-weight: 760;
    }

    .gradient-text {
      color: #2876eb;
      background: linear-gradient(100deg, #4d9bff 0%, #2766e7 54%, #655fe9 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-description {
      max-width: 560px;
      margin: 24px auto 30px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.8;
    }

    .button {
      display: inline-flex;
      min-height: 55px;
      align-items: center;
      justify-content: center;
      gap: 13px;
      padding: 0 27px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 16px;
      color: white;
      background: linear-gradient(105deg, #398cf9, #2864e7);
      box-shadow: 0 10px 25px rgba(40, 105, 226, .24);
      font-size: 15px;
      font-weight: 720;
      text-decoration: none;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(40, 105, 226, .32);
    }

    .button:focus-visible,
    a:focus-visible {
      outline: 3px solid #8bbaff;
      outline-offset: 4px;
    }

    .button-arrow { font-size: 19px; line-height: 1; }

    .hero-note {
      margin: 17px 0 0;
      color: #91a0b5;
      font-size: 12px;
    }

    .section-heading {
      margin: 0 0 30px;
      text-align: center;
    }

    .section-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 0 0 22px;
      color: #2868cc;
      font-size: clamp(30px, 4vw, 46px);
      font-weight: 760;
      letter-spacing: -.045em;
      line-height: 1.12;
      text-shadow: 0 4px 24px rgba(56, 123, 226, .12);
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      margin: 0 0 15px;
      padding: 10px 17px;
      border: 1px solid rgba(74, 137, 230, .2);
      border-radius: 999px;
      color: #2869c7;
      background: linear-gradient(110deg, #e0efff, #f5f9ff);
      box-shadow: 0 5px 16px rgba(45, 105, 185, .08);
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .025em;
    }

    h2 {
      margin: 0;
      font-size: clamp(29px, 4.3vw, 43px);
      font-weight: 740;
      letter-spacing: -.055em;
      line-height: 1.15;
    }

    .section-description {
      max-width: 540px;
      margin: 14px auto 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 19px;
      padding-bottom: 88px;
    }

    .feature-card {
      position: relative;
      min-height: 245px;
      overflow: hidden;
      padding: 29px 30px 31px;
      border: 1px solid rgba(255, 255, 255, .95);
      border-radius: 25px;
      background: var(--surface);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
      animation: rise-in .65s ease both;
    }

    .feature-card::before {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 100% 0%, rgba(65, 142, 255, .32), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(92, 169, 255, .16), transparent 52%);
      content: "";
      opacity: .72;
      transition: opacity .28s ease;
      pointer-events: none;
    }

    .feature-card:hover {
      transform: translateY(-7px);
      border-color: rgba(55, 132, 255, .9);
      background: rgba(255, 255, 255, .98);
      box-shadow:
        0 24px 60px rgba(44, 108, 196, .24),
        0 0 0 1px rgba(62, 133, 232, .28),
        0 0 34px rgba(45, 125, 255, .30);
    }

    .feature-card:hover::before { opacity: 1; }

    .feature-card > * { position: relative; z-index: 1; }

    .feature-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 25px;
    }

    .feature-icon {
      display: grid;
      width: 49px;
      height: 49px;
      place-items: center;
      border: 1px solid rgba(88, 148, 231, .15);
      border-radius: 16px;
      color: #347ee9;
      background: linear-gradient(145deg, #f4f9ff, #e6f0ff);
      transition: transform .28s ease, background .28s ease;
    }

    .feature-card:hover .feature-icon {
      transform: scale(1.06);
      background: linear-gradient(145deg, #e8f3ff, #d7e8ff);
    }

    .feature-icon svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-number {
      color: #b1c5e2;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .08em;
    }

    .feature-card h3 {
      margin: 0 0 12px;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 720;
      letter-spacing: -.045em;
    }

    .partner-button {
      min-height: 46px;
      margin-top: 21px;
      padding: 0 19px;
      border-radius: 13px;
      font-size: 12px;
    }

    .feature-card p {
      max-width: 470px;
      margin: 0;
      color: #4b5d75;
      font-size: 15.5px;
      line-height: 1.75;
    }

    .offer {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr);
      gap: 40px;
      margin-bottom: 70px;
      padding: clamp(27px, 5vw, 48px);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.96);
      border-radius: 29px;
      background:
        radial-gradient(ellipse at 0% 0%, rgba(202, 226, 255, .7), transparent 55%),
        rgba(255,255,255,.8);
      box-shadow: 0 18px 55px rgba(42, 88, 151, .09);
      backdrop-filter: blur(18px);
    }

    .offer::after {
      position: absolute;
      top: -90px;
      right: -70px;
      width: 260px;
      height: 260px;
      border: 1px solid rgba(62, 133, 232, .09);
      border-radius: 50%;
      box-shadow: 0 0 0 28px rgba(62, 133, 232, .025), 0 0 0 58px rgba(62, 133, 232, .02);
      content: "";
      pointer-events: none;
    }

    .offer-label {
      display: inline-block;
      margin-bottom: 18px;
      padding: 8px 11px;
      border-radius: 9px;
      color: #2869c7;
      background: rgba(69, 137, 235, .1);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .offer h2 {
      max-width: 570px;
      font-size: clamp(28px, 4vw, 40px);
      line-height: 1.16;
    }

    .offer-intro {
      margin: 19px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .offer-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 15px;
    }

    .offer-rule {
      height: 1px;
      background: var(--line);
    }

    .positive .rule-icon,
    .negative .rule-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 50%;
      font-size: 20px;
      font-weight: 750;
      line-height: 1;
    }

    .positive .rule-icon {
      color: #16845b;
      background: rgba(37, 190, 126, .12);
      box-shadow: inset 0 0 0 1px rgba(37, 190, 126, .18);
    }

    .negative .rule-icon {
      color: #c74755;
      background: rgba(232, 83, 100, .10);
      box-shadow: inset 0 0 0 1px rgba(232, 83, 100, .17);
    }

    .offer-rule-label {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 750;
    }

    .rule-icon {
      display: grid;
      width: 25px;
      height: 25px;
      place-items: center;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 800;
    }

    .positive .rule-icon {
      color: #168354;
      background: #e0f7eb;
    }

    .negative .rule-icon {
      color: #c34f55;
      background: #ffebec;
    }

    .offer-details p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.8;
    }

    .partner-account-note {
      margin-top: 12px;
      color: #8797ae;
      font-size: 12px;
      line-height: 1.7;
      font-weight: 400;
    }

    .offer-footnote {
      margin-top: 24px;
      color: #8797ae;
      font-size: 12px;
      line-height: 1.7;
    }

    footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 24px 0 34px;
      border-top: 1px solid rgba(126, 157, 198, .18);
      color: #8a9ab0;
      font-size: 12px;
    }

    footer a {
      color: #477bc6;
      font-weight: 650;
      text-decoration: none;
    }

    @keyframes rise-in {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 680px) {
      .page { width: min(100% - 28px, 520px); }
      .topbar { padding: 18px 0; }
      .hero { padding: 65px 0 65px; }
      .hero-description { font-size: 15px; }
      .features {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-bottom: 65px;
      }
      .feature-card { min-height: auto; padding: 25px; }
      .feature-top { margin-bottom: 19px; }
      .feature-card h3 { font-size: 21px; }
      .offer {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 48px;
        padding: 27px 23px;
        border-radius: 24px;
      }
      .offer-details { gap: 17px; }
      footer { align-items: flex-start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }
  
    /* Акцентное оформление критериев предложения */
    .offer-details .offer-rule-label {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 21px;
      font-weight: 750;
      line-height: 1.3;
      letter-spacing: -.025em;
      color: var(--ink);
    }

    .offer-details .positive .rule-icon,
    .offer-details .negative .rule-icon {
      display: inline-block;
      width: auto;
      height: auto;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      -webkit-text-fill-color: currentColor;
      font-family: Arial, sans-serif;
      font-size: 36px;
      font-weight: 900;
      line-height: 1;
      transform: translateY(1px);
    }

    .offer-details .positive .rule-icon {
      color: #16a36a;
      text-shadow: 0 1px 0 #a4f5c8, 0 2px 0 #087447,
                   0 4px 5px rgba(20, 90, 55, .18);
    }

    .offer-details .negative .rule-icon {
      color: #ed4055;
      text-shadow: 0 1px 0 #ffc0c6, 0 2px 0 #b91f39,
                   0 4px 5px rgba(120, 25, 40, .16);
    }

    .offer-details .positive > p,
    .offer-details .negative > p {
      color: #40516a;
      font-size: 16px;
      line-height: 1.75;
    }


    /* Принудительно убираем любые подложки у знаков + и − */
    .offer-details .rule-icon,
    .offer-details .positive .rule-icon,
    .offer-details .negative .rule-icon {
      display: inline !important;
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      outline: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      -webkit-text-fill-color: currentColor !important;
      filter: none !important;
      text-shadow: 0 1px 0 rgba(255,255,255,.65),
                   0 2px 2px rgba(20,45,70,.16) !important;
      font-size: 36px !important;
      font-weight: 900 !important;
    }

    .offer-details .positive .rule-icon {
      color: #16a36a !important;
    }

    .offer-details .negative .rule-icon {
      color: #ed4055 !important;
    }


/* SMUF LIGHT COSMIC CARDS */
.feature-card {
  background-color: rgba(255, 255, 255, .97);
  background-image:
    radial-gradient(ellipse at 18% 18%, rgba(83, 157, 255, .32), transparent 48%),
    radial-gradient(ellipse at 85% 78%, rgba(177, 139, 255, .28), transparent 45%),
    radial-gradient(ellipse at 78% 16%, rgba(63, 218, 220, .25), transparent 38%),
    radial-gradient(ellipse at 35% 95%, rgba(125, 190, 255, .20), transparent 42%),
    radial-gradient(circle at 16% 72%, rgba(57, 126, 255, .85) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 72% 36%, rgba(129, 105, 240, .78) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 48% 85%, rgba(24, 176, 205, .80) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 88% 60%, rgba(90, 153, 255, .65) 0 1px, transparent 2px);
  background-size: 220% 220%;
  background-position: 0% 0%;
  animation: smuf-cosmic-drift 12s ease-in-out infinite alternate;
  box-shadow: 0 8px 30px rgba(83, 147, 255, .07);
}

.feature-card:nth-child(3n + 2) {
  animation-delay: -4s;
  animation-duration: 15s;
  background-position: 100% 20%;
}

.feature-card:nth-child(3n) {
  animation-delay: -7s;
  animation-duration: 13s;
  background-position: 40% 100%;
}

@keyframes smuf-cosmic-drift {
  0% {
    background-position: 0% 10%;
  }
  50% {
    background-position: 55% 75%;
  }
  100% {
    background-position: 100% 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card:nth-child(3n + 2),
  .feature-card:nth-child(3n) {
    animation: none;
  }
}


/* SMUF LIGHT COSMIC OFFER */
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(65, 150, 255, .34), transparent 43%),
    radial-gradient(ellipse at 82% 72%, rgba(174, 139, 255, .28), transparent 42%),
    radial-gradient(ellipse at 72% 12%, rgba(53, 218, 220, .25), transparent 38%),
    radial-gradient(circle at 18% 72%, rgba(57, 126, 255, .8) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 76% 38%, rgba(129, 105, 240, .75) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 48% 85%, rgba(24, 176, 205, .8) 0 1.3px, transparent 2.3px);
  background-size: 200% 200%;
  background-position: 0% 10%;
  animation: smuf-offer-cosmic 14s ease-in-out infinite alternate;
}

.offer > * {
  position: relative;
  z-index: 1;
}

.offer::after {
  z-index: 1;
  pointer-events: none;
}

@keyframes smuf-offer-cosmic {
  0%   { background-position: 0% 10%; }
  50%  { background-position: 65% 80%; }
  100% { background-position: 100% 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .offer::before { animation: none; }
}
\n
/* Smuf robot illustrations */
.feature-top {
  align-items: center;
}
.smuf-robot {
  display: block;
  flex: 0 0 auto;
  width: clamp(76px, 17%, 112px);
  height: 96px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 12px rgba(47, 126, 226, .13));
  transform-origin: 50% 80%;
  animation: smuf-robot-float 4s ease-in-out infinite;
  transition: filter .3s ease, transform .3s ease;
  pointer-events: none;
}
.feature-card:nth-child(3n + 2) .smuf-robot {
  animation-delay: -.8s;
}
.feature-card:nth-child(3n) .smuf-robot {
  animation-delay: -1.6s;
}
.feature-card:hover .smuf-robot {
  filter: drop-shadow(0 10px 18px rgba(36, 133, 255, .28));
  transform: translateY(-3px) scale(1.04);
}
@keyframes smuf-robot-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.offer-main {
  position: relative;
}
.smuf-offer-robot {
  float: right;
  width: clamp(100px, 20%, 150px);
  height: 125px;
  object-fit: contain;
  margin: 0 0 12px 18px;
  filter: drop-shadow(0 10px 18px rgba(39, 132, 245, .2));
  animation: smuf-offer-bob 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes smuf-offer-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@media (max-width: 480px) {
  .smuf-robot {
    width: 82px;
    height: 82px;
  }
  .smuf-offer-robot {
    width: 100px;
    height: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .smuf-robot, .smuf-offer-robot {
    animation: none !important;
    transition: none !important;
  }
}


/* Стиль примечания в карточке партнёрства */
.feature-card p.partner-account-note {
  margin-top: 12px !important;
  color: #8797ae !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

</style>
</head>
<body>
  <div class="page">
    <header class="topbar">
      <a class="top-link" href="https://smufvpn.com">Личный кабинет ↗</a>
    </header>

    <main>
      <section class="hero">
        <div class="hero-brand">
          <img src="/logo.png" alt="Логотип Smuf VPN">
          <span>Smuf VPN</span>
        </div>
        <h1>Интернет без границ<br><span class="gradient-text">Всё под контролем</span></h1>
        <p class="hero-description">
          Больше свободы в сети, комфортный доступ к привычным сервисам
          и технологии, которые работают для вас.
        </p>
        <a class="button" href="https://smufvpn.com">
          Подключиться <span class="button-arrow" aria-hidden="true">→</span>
        </a>
        <p class="hero-note">Начните с личного кабинета Smuf VPN</p>
      </section>

      <section aria-labelledby="features-title">
        <div class="section-heading">
          <p class="section-label">Почему Smuf VPN</p>
          <h2 id="features-title">Больше возможностей<br>Меньше ограничений</h2>
          <p class="section-description">
            Всё необходимое для комфортного использования интернета — в одном месте.
          </p>
        </div>

        <div class="features">
          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M12 3 4.5 7v5.5c0 4.3 3.2 7.3 7.5 8.5 4.3-1.2 7.5-4.2 7.5-8.5V7L12 3Z"/><path d="m8.5 12 2.2 2.2 4.8-5"/></svg>
              </span>
            </div>
            <h3>Современные протоколы</h3>
            <p>Используем передовые VPN-протоколы, такие как VLESS, для высокой скорости, стабильности и безопасности соединения в самых разных условиях.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>
              </span>
            </div>
            <h3>Доступ к ресурсам</h3>
            <p>Пользуйтесь сайтами, социальными сетями и стриминговыми платформами в поездках и повседневной жизни — где бы вы ни находились.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M4 5h16v12H8l-4 3V5Z"/><path d="M8 9h8M8 13h5"/></svg>
              </span>
            </div>
            <h3>Круглосуточная поддержка</h3>
            <p>Общайтесь с поддержкой в чате приложения — в привычном формате мессенджера, без лишних сложностей.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M3 17 9 11l4 4 8-9"/><path d="M15 6h6v6"/></svg>
              </span>
            </div>
            <h3>Высокая скорость</h3>
            <p>Серверы оптимизированы для производительности: смотрите видео, играйте, работайте и общайтесь с комфортом.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></svg>
              </span>
            </div>
            <h3>Защита данных</h3>
            <p>Шифрование соединения помогает защитить передаваемые данные от перехвата в сети и постороннего доступа.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M3 7h18v13H3z"/><path d="M3 11h18M7 4v6M17 4v6"/><path d="m8 16 2 2 5-5"/></svg>
              </span>
            </div>
            <h3>Экономия на онлайн-покупках</h3>
            <p>Открывайте для себя региональные предложения на авиабилеты, отели, товары и подписки. Цены и доступность могут различаться в зависимости от страны.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z"/><rect x="7" y="8" width="10" height="7" rx="1.5"/><path d="M9 11h6M9 13h3M8 16 16 8"/></svg>
              </span>
            </div>
            <h3>Забудьте о рекламе</h3>
            <p>Встроенный блокировщик рекламы помогает убрать отвлекающие баннеры и сделать просмотр страниц комфортнее. Доступность функции зависит от конфигурации сервиса.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M16 11h6"/></svg>
              </span>
            </div>
            <h3>Рефералы и бонусы</h3>
            <p>Приглашайте друзей в Smuf VPN и получайте приятные бонусы.</p>
          </article>
          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>
              </span>
            </div>
            <h3>VPN наоборот</h3>
            <p>Доступ к российским сервисам из-за границы? Легко! Наш сервер в России открывает вам российский интернет.</p>
          </article>

          <article class="feature-card">
            <div class="feature-top">
              <span class="feature-icon">
                <svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20v-1.5A4.5 4.5 0 0 1 7 14h4a4.5 4.5 0 0 1 4.5 4.5V20M16 5.5a3.5 3.5 0 0 1 0 6.8M18 14.5a4.5 4.5 0 0 1 3.5 4.3V20"/></svg>
              </span>
            </div>
            <h3>Ищем партнёров</h3>
            <p>Делитесь с миром быстрым и надёжным VPN.</p>
            <p class="partner-account-note">Чтобы стать нашим партнёром, у вас должен быть зарегистрированный аккаунт в Smuf VPN.</p>
            <a class="button partner-button" href="/?open=app">СТАТЬ ПАРТНЁРОМ <span class="button-arrow" aria-hidden="true">→</span></a>
          </article>
        </div>
      </section>

      <section class="offer" aria-labelledby="offer-title">
        <div class="offer-main">
          <span class="offer-label">Специальное предложение</span>
          <h2 id="offer-title">Уже купили другой VPN, но он перестал работать?</h2>
          <p class="offer-intro">
            Если у вас есть активная платная подписка на другой VPN, которая
            вас больше не устраивает, мы подготовили для вас специальное предложение.
            <br><br>
            Отправьте в чат поддержки скриншот чека, письма или личного кабинета
            в вашем личном кабинете в разделе «Поддержка» — и мы активируем скидку.
          </p>
          <p class="offer-footnote">
            Чтобы воспользоваться предложением, откройте личный кабинет Smuf VPN
            или зарегистрируйтесь и напишите нам в чат поддержки.
          </p>
          <a class="button" href="https://smufvpn.com">
            Обсудить предложение <span class="button-arrow" aria-hidden="true">→</span>
          </a>
        </div>

        <div class="offer-details">
          <div class="offer-rule"></div>
          <div class="positive">
            <div class="offer-rule-label">
              <span class="rule-icon">+</span>
              Подходят
            </div>
            <p>Любой действующий платный VPN или self-hosted VPN со сроком подписки больше одного месяца.</p>
          </div>
          <div class="offer-rule"></div>
          <div class="negative">
            <div class="offer-rule-label">
              <span class="rule-icon">−</span>
              Не подходят
            </div>
            <p>Бесплатные VPN, Smuf VPN, а также платные VPN-подписки сроком менее одного месяца.</p>
          </div>
        </div>
      </section>
    </main>

    <footer>
      <a class="brand" href="/" aria-label="Smuf VPN — главная">
        <span class="brand-mark"><span class="brand-fallback">S</span><img src="/logo.png" alt="" onerror="this.style.display='none'"></span>
        <span>Smuf VPN</span>
      </a>
      <span>Свобода в сети начинается с Smuf.</span>
      <a href="https://smufvpn.com">Подключиться ↗</a>
    </footer>
  </div>
</body>
</html>