.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:183%;
  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;
}

.control-section { padding:clamp(40px,7vw,80px) 0; }

.control-section__grid { gap:clamp(32px,5vw,64px); }

.control-section__copy {
  color:#9ca3af;
  line-height:24px;
}

.control-section__visual { position:relative; }

.control-section__image {
  display:block;
  width:100%;
  max-width:544px;
  height:auto;
  margin:auto;
}

.control-section__badge {
  position:absolute;
  left:-10px;
  bottom:51px;
}

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

.what-is-vpn-section:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(9,9,13,0) 70%,#09090d 100%);
  pointer-events:none;
}

.what-is-vpn-section__inner { text-align:center; }

.what-is-vpn-section__description {
  margin:20px 0 0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:28px;
}

.what-is-vpn-section__devices-title,
.what-is-vpn-section__more {
  margin:0;
  color:#9ca3af;
  font-size:clamp(18px,1.8vw,20px);
  line-height:28px;
}

.vpn-device-list {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:32px;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.vpn-device-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding:clamp(24px,2vw,30px);
  border-radius:16px;
  background:#1c1c21;
  color:#fff;
}

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

.vpn-device-card__label {
  font-weight:600;
  line-height:28px;
  text-align:center;
}

.ad-protection-section { background:#09090d; }

.ad-protection-section__panel {
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,64px);
  border-radius:16px;
  max-width:1152px;
  margin:0 auto;
}

.ad-protection-section__copy,
.ad-protection-section__features {
  color:#9ca3af;
  line-height:24px;
}

.ad-protection-section__intro,
.ad-protection-section__text { margin:0; }

.ad-protection-section__text { line-height:28px; }

.ad-protection-list {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:20px 0;
  padding:0;
  list-style:none;
}

.ad-protection-list__item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#fff;
  line-height:24px;
}

.ad-protection-list__icon {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 auto;
  color:#19beb8;
}

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

.usenet-access-section__grid { gap:clamp(32px,5vw,64px); }

.usenet-access-section__media {
  position:relative;
  height:312px;
}

.usenet-access-section__image {
  display:block;
  width:355px;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.usenet-access-section__badge {
  position:absolute;
  top:71px;
  right:0;
}

.usenet-access-section__copy {
  color:#9ca3af;
  line-height:24px;
}

.usenet-access-section__copy p { margin:0 0 16px; }

.usenet-access-section__copy p:last-child { margin-bottom:0; }

.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 (min-width:992px) {
  .control-section__image { padding-left:50px; }
}

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

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

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

  .vpn-device-list { grid-template-columns:repeat(3,minmax(0,1fr)); }

  .usenet-access-section__media {
    max-width:544px;
    margin:0 auto;
    width:100%;
    order:1;
  }

  .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; }

  .control-section__badge { bottom:24px; }

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

  .usenet-access-section__media { height:280px; }

  .usenet-access-section__image { width:300px; }

  .usenet-access-section__badge {
    top:48px;
    right:35%;
    transform:translateX(80%);
  }
}

@media (max-width:479px) {
  .vpn-device-list { grid-template-columns:1fr; }

  .usenet-access-section__media { height:250px; }

  .usenet-access-section__badge {
    right:0;
    transform:none;
  }
}