.hero-banner {
  position:relative;
  padding:clamp(40px,7vw,72px) 0;
  overflow:hidden;
  background:#031b34;
  color:#fff;
}

.hero-banner__bg {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:all;
}

.hero-banner__bg-image {
  position:absolute;
  top:-25%;
  left:-10%;
  width:120%;
  height:134%;
  max-width:none;
  object-fit:cover;
}

.hero-banner__content {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  width:100%;
  pointer-events:none;
}

.hero-banner__text {
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:620px;
}

.hero-banner__badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:4px 20px;
  border:1px solid rgb(255,255,255);
  border-radius:100px;
  background:rgba(255,255,255,0.1);
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.4;
  align-self:flex-start;
}

.hero-banner__title {
  font-size:clamp(32px,4vw,52px);
  text-shadow:3px 3px 0 rgba(17,24,39,0.1);
}

.hero-banner__subtitle {
  margin:0;
  font-size:clamp(22px,3vw,32px);
  font-weight:600;
  line-height:1.4;
}

.hero-banner__description {
  margin:0;
  color:#9ca3af;
  font:400 clamp(17px,2.5vw,20px)/clamp(28px,3.5vw,32px) Inter,Arial,sans-serif;
}

.hero-banner__actions {
  display:flex;
  align-items:center;
  gap:24px;
  font-weight:500;
}

.privacy-section {
  padding:clamp(40px,7vw,80px) 0;
  color:#fff;
}

.privacy-section__header {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  text-align:center;
}

.privacy-section__title {
  margin:0;
  color:#fff;
  font:700 clamp(32px,3.5vw,48px)/clamp(36px,4vw,48px) Inter,Arial,sans-serif;
}

.privacy-section__description {
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:1.65;
}

.privacy-section__features {
  display:flex;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:960px;
  list-style:none;
}

.privacy-section__feature {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:clamp(14px,1.6vw,18px);
}

.vpn-protection-section {
  padding:clamp(40px,7vw,80px) 0;
  background:#09090d;
}

.vpn-protection-section__inner { align-items:center; }

.vpn-protection-section__header {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  text-align:center;
}

.vpn-protection-section__description {
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:1.4;
}

.vpn-protection-section__features {
  display:flex;
  flex-direction:column;
  gap:clamp(32px,5vw,64px);
  width:100%;
}

.vpn-protection-section__intro,
.vpn-protection-section__safe-text {
  margin:0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:1.4;
  text-align:center;
}

.vpn-protection-section__visual {
  position:relative;
  width:100%;
  max-width:960px;
  min-height:542px;
  margin-top:0;
}

.vpn-protection-section__laptop {
  display:block;
  width:100%;
  max-width:max-content;
  height:auto;
  margin:0 auto;
}

.vpn-protection-section__phone {
  position:absolute;
  right:0;
  bottom:0;
  width:23%;
  height:auto;
}

.vpn-protection-section__badge {
  position:absolute;
  top:30px;
  left:0;
  padding:1% 1.2%;
  font-size:clamp(12px,1vw,14px);
  min-width:auto;
}

.vpn-feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
  width:100%;
}

.vpn-feature-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:30px;
  border-radius:16px;
  background:#1c1c21;
  text-align:center;
}

.vpn-feature-card__title {
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:600;
}

.vpn-feature-card__text {
  margin:-10px 0 0;
  color:#9ca3af;
}

.why-love-section {
  padding:clamp(40px,7vw,80px) 0;
  color:#fff;
}

.why-love-section__header {
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  text-align:center;
}

.why-love-section__description,
.why-love-section__closing {
  margin:0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:1.4;
  text-align:center;
}

.why-love-section__grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  width:100%;
}

.why-love-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding:33px;
  border-radius:16px;
  background:#09090d;
}

.why-love-card__heading {
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
}

.why-love-card__icon {
  display:inline-grid;
  place-items:center;
  width:70px;
  height:70px;
  flex:0 0 auto;
  border-radius:16px;
  background:rgba(31,238,230,0.1);
}

.why-love-card__title {
  font-size:20px;
  font-weight:600;
  line-height:1.2;
}

.why-love-card__text {
  margin:0;
  color:#9ca3af;
  line-height:1.2;
}

.usenet-access-section {
  padding:clamp(40px,7vw,80px) 0;
  overflow:hidden;
  background:#09090d;
  color:#fff;
}

.usenet-access-section__header {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
  text-align:center;
}

.usenet-access-section__description {
  margin:0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:1.4;
}

.usenet-access-section__content {
  display:grid;
  grid-template-columns:minmax(0,544px) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,5vw,64px);
  width:100%;
}

.usenet-access-section__copy {
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.5vw,33px);
}

.usenet-access-section__text-block {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.usenet-access-section__text-block p {
  margin:0;
  color:#9ca3af;
  line-height:1.5;
}

.usenet-access-section__text-block p+p { margin-top:18px; }

.usenet-access-section__text-block a {
  color:#19beb8;
  font-weight:700;
  text-decoration:underline;
}

.usenet-access-section__subtitle {
  max-width:450px;
  color:#fff;
  font-size:24px;
  font-weight:500;
  line-height:1.35;
}

.usenet-access-section__visual {
  position:relative;
  min-height:713px;
  overflow:visible;
}

.usenet-access-section__image {
  position:absolute;
  top:50%;
  left:0;
  display:block;
  width:max-content;
  transform:translateY(-50%);
}

.usenet-access-section__footer {
  display:flex;
  flex-direction:column;
  gap:40px;
  width:100%;
  text-align:center;
}

.usenet-access-section__footer-text {
  margin:0;
  color:#9ca3af;
  font-size:18px;
  line-height:1.55;
}

.usenet-access-list {
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.5vw,20px);
  margin:0;
  padding:0;
  list-style:none;
}

.usenet-access-list__item {
  display:flex;
  align-items:center;
  gap:16px;
  color:#9ca3af;
  line-height:1.5;
}

.usenet-access-list__check {
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 auto;
  border-radius:50%;
  background:#19beb8;
  color:#09090d;
}

.guarantee-section {
  position:relative;
  padding:clamp(40px,7vw,80px) 0;
  overflow:hidden;
}

.guarantee-section__icon {
  position:absolute;
  top:63px;
  left:calc(50% + 400px);
}

.guarantee-section__inner {
  position:relative;
  z-index:1;
  gap:clamp(32px,5vw,64px);
  max-width:896px;
  margin:0 auto;
}

.guarantee-section__heading {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}

.guarantee-section__title { text-align:left; }

.guarantee-section__subtitle {
  font:400 clamp(24px,3vw,28px)/clamp(32px,3.5vw,36px) Inter,Arial,sans-serif;
  font-weight:500;
}

.guarantee-section__content {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.guarantee-section__text {
  margin:0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
}

.guarantee-section__badge {
  display:block;
  width:166.749px;
  height:48.695px;
}

.support-section {
  padding:clamp(40px,7vw,80px) 0;
  background:#09090d;
  box-sizing:border-box;
}

.support-section__inner {
  max-width:896px;
  margin:0 auto;
}

.support-section__panel {
  padding:33px;
  border-radius:16px;
  background:#f5f5f5;
  box-shadow:0 8px 30px rgba(0,0,0,0.16);
}

.support-section__content {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.support-section__title {
  margin:0 0 20px;
  color:#111827;
}

.support-section__text {
  max-width:830px;
  margin:0 0 34px;
  color:#4B5563;
  font-size:clamp(18px,1.8vw,20px);
}

.support-section.circuit-pattern-background:before { background-position-y:center; }

.faq-section {
  padding:clamp(40px,7vw,80px) 0;
  background:#1c1c21;
  box-sizing:border-box;
}

.faq-section__inner { max-width:830px; }

.faq-section__list {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.faq-item {
  padding:clamp(20px,2.5vw,33px);
  border-bottom:1px solid rgba(156,163,175,0.1);
}

.faq-item__toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.faq-item__question {
  font-size:clamp(18px,1.8vw,20px);
  font-weight:500;
  line-height:24px;
}

.faq-item__icon {
  width:20px;
  height:20px;
  flex:0 0 auto;
  transform:rotate(180deg);
  transition:transform 180ms ease;
}

.faq-item__toggle[aria-expanded=true] .faq-item__icon { transform:rotate(0deg); }

.faq-item__toggle[aria-expanded=true] .faq-item__icon path { stroke:#19beb8; }

.faq-item__answer { padding-top:12px; }

.faq-item__answer p {
  margin:0;
  color:#9ca3af;
  line-height:24px;
}

@media (max-width:991px) {
  .hero-banner__bg-image {
    top:0;
    width:auto;
    height:100%;
    opacity:0.4;
    left:-360px;
  }

  .hero-banner__content {
    justify-content:center;
    padding-top:0;
  }

  .hero-banner__actions {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .privacy-section__features {
    flex-wrap:wrap;
    justify-content:center;
  }

  .privacy-section__feature {
    flex:0 1 calc(50% - 16px);
    justify-content:center;
  }

  .vpn-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .why-love-section__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .why-love-section__grid>:last-child { grid-column:span 2; }

  .vpn-protection-section__visual { min-height:auto; }

  .vpn-protection-section__phone {
    width:26%;
    bottom:auto;
    top:17%;
  }

  .guarantee-section__inner {
    max-width:620px;
    margin:0;
  }

  .guarantee-section__icon {
    top:24px;
    right:0;
    opacity:0.35;
    left:auto;
  }
}

@media (max-width:767px) {
  .hero-banner__note { margin:auto; }

  .hero-banner__content { text-align:center; }

  .hero-banner__badge { align-self:center; }

  .privacy-section__description { line-height:1.5; }

  .privacy-section__features {
    align-items:flex-start;
    flex-direction:column;
    width:auto;
  }

  .privacy-section__feature {
    justify-content:center;
    width:100%;
  }

  .vpn-protection-section__phone { top:20%; }

  .vpn-feature-grid { grid-template-columns:1fr; }

  .why-love-section__grid { grid-template-columns:1fr; }

  .why-love-section__grid>:last-child { grid-column:auto; }

  .usenet-access-section__header { order:1; }

  .usenet-access-section__content { display:contents; }

  .usenet-access-section__copy { order:2; }

  .usenet-access-section__footer { order:3; }

  .usenet-access-section__visual {
    order:4;
    width:100%;
    min-height:auto;
  }

  .usenet-access-section__image {
    position:relative;
    width:calc(100vw - 16px);
    max-width:none;
    transform:none;
  }

  .usenet-access-section__text-block {
    text-align:center;
    align-items:center;
  }
}