/* BYNEXVPN — Friday the 13th seasonal skin.
   Important: this file changes visual styling only. The original layout,
   container widths, typography scale, paddings and component dimensions stay
   controlled by style.css. */

html.bx-friday13 {
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.15);
  --card: #101012;
  --card-2: #151517;
}

/* Atmospheric background art lives behind the original page layout. */
html.bx-friday13 body.home::before {
  background-color: #050506;
  background-image:
    linear-gradient(90deg, rgba(3,3,4,.06), rgba(3,3,4,.18) 28%, rgba(3,3,4,.18) 72%, rgba(3,3,4,.06)),
    url("friday13-left.webp"),
    url("friday13-right.webp"),
    radial-gradient(760px 520px at 50% 0%, rgba(255,255,255,.035), transparent 72%),
    repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(255,255,255,.022) 63px 64px, transparent 65px 124px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, left top, right top, center, center;
  background-size: 100% 100%, auto 100vh, auto 100vh, 100% 100%, 760px 760px;
}

/* Keep the header's original dimensions; only change its surface treatment. */
html.bx-friday13 .cab-header__bar {
  background: rgba(9,9,10,.90);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
}

/* Existing panels retain their native width, height and spacing. */
html.bx-friday13 .hero__panel,
html.bx-friday13 .features__panel,
html.bx-friday13 .network__panel,
html.bx-friday13 .pricing__panel,
html.bx-friday13 .faq__panel {
  color: #f5f5f5;
  background: linear-gradient(145deg, rgba(9,9,10,.965), rgba(7,7,8,.955));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 30px 85px -48px rgba(0,0,0,.94), inset 0 1px 0 rgba(255,255,255,.025);
}

html.bx-friday13 .app-card,
html.bx-friday13 .feature-card {
  background: linear-gradient(145deg, rgba(18,18,20,.98), rgba(10,10,12,.98));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 48px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.025);
}
html.bx-friday13 .feature-card:hover {
  border-color: rgba(179,38,45,.42);
  box-shadow: 0 18px 48px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(179,38,45,.08);
}
html.bx-friday13 .feature-card__icon {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
}

/* Blood-red is an accent only; the BynexVPN wordmark and controls stay neutral. */
html.bx-friday13 .hero__chip i,
html.bx-friday13 .app-card__status i {
  background: #b3262d;
  box-shadow: 0 0 10px rgba(179,38,45,.65);
}
html.bx-friday13 .app-card__graph-line {
  stroke: rgba(235,235,238,.92);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.22));
}
html.bx-friday13 .feature-card:hover .feature-card__link {
  color: #f1d7d8;
}

/* A restrained lower-page atmosphere so the effects do not stop after the hero. */
html.bx-friday13 body.home::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 430px 250px at 0% 88%, rgba(112,8,14,.14), transparent 72%),
    radial-gradient(ellipse 470px 270px at 100% 90%, rgba(112,8,14,.13), transparent 72%);
}
html.bx-friday13 .site-footer {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(430px 250px at 4% 82%, rgba(128,10,15,.16), transparent 72%),
    radial-gradient(470px 280px at 96% 88%, rgba(128,10,15,.15), transparent 72%),
    linear-gradient(180deg, transparent, rgba(12,5,6,.32));
}
html.bx-friday13 .site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -220px 0 0;
  opacity: .7;
  background:
    radial-gradient(2px 2px at 8% 38%, rgba(170,20,26,.85) 98%, transparent),
    radial-gradient(3px 3px at 13% 62%, rgba(145,15,22,.72) 98%, transparent),
    radial-gradient(2px 2px at 87% 32%, rgba(170,20,26,.8) 98%, transparent),
    radial-gradient(4px 4px at 93% 70%, rgba(145,15,22,.68) 98%, transparent),
    radial-gradient(ellipse 180px 90px at 0% 82%, rgba(110,9,14,.18), transparent 72%),
    radial-gradient(ellipse 210px 110px at 100% 76%, rgba(110,9,14,.2), transparent 72%);
}

/* Light theme: preserve the same layout, but use readable light surfaces. */
html.bx-friday13[data-theme="light"] body.home::before {
  background-color: #f2f3f5;
  /* No dark artwork behind white surfaces: keep light mode clean and legible. */
  background-image:
    radial-gradient(520px 360px at 0% 8%, rgba(179,38,45,.075), transparent 72%),
    radial-gradient(560px 390px at 100% 12%, rgba(179,38,45,.065), transparent 72%),
    radial-gradient(760px 520px at 50% 0%, rgba(10,10,12,.025), transparent 72%),
    repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(10,10,12,.025) 63px 64px, transparent 65px 124px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 760px 760px;
}
html.bx-friday13[data-theme="light"] .hero__panel,
html.bx-friday13[data-theme="light"] .features__panel,
html.bx-friday13[data-theme="light"] .network__panel,
html.bx-friday13[data-theme="light"] .pricing__panel,
html.bx-friday13[data-theme="light"] .faq__panel {
  color: #17171a;
  background: rgba(255,255,255,.965);
  border-color: rgba(10,10,12,.13);
  box-shadow: 0 24px 64px -42px rgba(10,10,12,.25), inset 0 1px 0 rgba(255,255,255,.9);
}
html.bx-friday13[data-theme="light"] .hero__slogan { color: rgba(10,10,12,.68); }
html.bx-friday13[data-theme="light"] .hero__sub,
html.bx-friday13[data-theme="light"] .features__sub { color: #62626b; }
html.bx-friday13[data-theme="light"] .hero__chip {
  color: #202024;
  background: rgba(10,10,12,.045);
  border-color: rgba(10,10,12,.12);
}
html.bx-friday13[data-theme="light"] .app-card {
  color: #f5f5f5;
  background: linear-gradient(145deg, #171719, #0d0d0f);
  border-color: rgba(10,10,12,.18);
}
html.bx-friday13[data-theme="light"] .feature-card {
  color: #17171a;
  background: linear-gradient(145deg, #fff, #f5f5f7);
  border-color: rgba(10,10,12,.11);
  box-shadow: 0 14px 34px -28px rgba(10,10,12,.24);
}
html.bx-friday13[data-theme="light"] .feature-card__desc,
html.bx-friday13[data-theme="light"] .features__title span { color: #666670; }
html.bx-friday13[data-theme="light"] .feature-card__icon {
  color: #252529;
  background: rgba(10,10,12,.045);
  border-color: rgba(10,10,12,.12);
}
html.bx-friday13[data-theme="light"] .site-footer {
  background:
    radial-gradient(430px 250px at 4% 82%, rgba(179,38,45,.08), transparent 72%),
    radial-gradient(470px 280px at 96% 88%, rgba(179,38,45,.07), transparent 72%),
    linear-gradient(180deg, transparent, rgba(10,10,12,.025));
}
html.bx-friday13[data-theme="light"] body.home::after {
  background:
    radial-gradient(ellipse 430px 250px at 0% 88%, rgba(112,8,14,.055), transparent 72%),
    radial-gradient(ellipse 470px 270px at 100% 90%, rgba(112,8,14,.05), transparent 72%);
}

@media (max-width: 680px) {
  html.bx-friday13 body.home::before {
    background-image:
      linear-gradient(180deg, rgba(3,3,4,.42), rgba(3,3,4,.78)),
      url("friday13-left.webp"),
      radial-gradient(500px 350px at 100% 10%, rgba(120,10,14,.12), transparent 70%);
    background-position: center, left top, center;
    background-size: 100% 100%, auto 78vh, 100% 100%;
  }
  html.bx-friday13[data-theme="light"] body.home::before {
    background-image:
      radial-gradient(500px 350px at 100% 10%, rgba(179,38,45,.06), transparent 70%),
      radial-gradient(500px 350px at 0% 85%, rgba(179,38,45,.05), transparent 70%),
      repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(10,10,12,.025) 63px 64px, transparent 65px 124px);
    background-size: 100% 100%, 100% 100%, 760px 760px;
  }
}

/* --- Light mode artwork: same Friday-13th composition, adapted for a white UI. --- */
html.bx-friday13[data-theme="light"] body.home::before {
  background-color: #f2f3f5;
  background-image:
    linear-gradient(90deg, rgba(242,243,245,.04), rgba(242,243,245,.18) 28%, rgba(242,243,245,.18) 72%, rgba(242,243,245,.04)),
    url("friday13-left-light.png"),
    url("friday13-right-light.png"),
    radial-gradient(760px 520px at 50% 0%, rgba(10,10,12,.025), transparent 72%),
    repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(10,10,12,.025) 63px 64px, transparent 65px 124px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: center, left top, right top, center, center;
  background-size: 100% 100%, auto 100vh, auto 100vh, 100% 100%, 760px 760px;
}

html.bx-friday13[data-theme="light"] .cab-header__bar {
  background: rgba(255,255,255,.94);
  border-color: rgba(10,10,12,.13);
  box-shadow: 0 12px 36px rgba(10,10,12,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
html.bx-friday13[data-theme="light"] .hero__panel,
html.bx-friday13[data-theme="light"] .features__panel,
html.bx-friday13[data-theme="light"] .network__panel,
html.bx-friday13[data-theme="light"] .pricing__panel,
html.bx-friday13[data-theme="light"] .faq__panel {
  color: #17171a;
  background: rgba(255,255,255,.95);
  border-color: rgba(10,10,12,.13);
  box-shadow: 0 26px 72px -46px rgba(10,10,12,.28), inset 0 1px 0 rgba(255,255,255,.95);
}
html.bx-friday13[data-theme="light"] .feature-card {
  color: #17171a;
  background: linear-gradient(145deg, #fff, #f6f6f7);
  border-color: rgba(10,10,12,.11);
}
html.bx-friday13[data-theme="light"] .app-card {
  color: #f5f5f5;
  background: linear-gradient(145deg, #19191b, #0e0e10);
  border-color: rgba(10,10,12,.18);
}
html.bx-friday13[data-theme="light"] .feature-card__desc,
html.bx-friday13[data-theme="light"] .features__sub,
html.bx-friday13[data-theme="light"] .hero__sub {
  color: #62626b;
}
html.bx-friday13[data-theme="light"] .hero__chip i {
  background: #b3262d;
  box-shadow: 0 0 9px rgba(179,38,45,.35);
}
html.bx-friday13[data-theme="light"] .feature-card__link,
html.bx-friday13[data-theme="light"] .feature-card:hover .feature-card__link {
  color: #9f2027;
}
html.bx-friday13[data-theme="light"] .site-footer {
  background:
    radial-gradient(430px 250px at 4% 82%, rgba(179,38,45,.07), transparent 72%),
    radial-gradient(470px 280px at 96% 88%, rgba(179,38,45,.06), transparent 72%),
    linear-gradient(180deg, transparent, rgba(10,10,12,.018));
}

/* --- Mobile treatment: preserve the original layout, add compact horror details. --- */
@media (max-width: 760px) {
  html.bx-friday13 body.home::before {
    background-color: #050506;
    background-image:
      linear-gradient(180deg, rgba(3,3,4,.14), rgba(3,3,4,.42)),
      url("friday13-left.webp"),
      url("friday13-right.webp"),
      radial-gradient(480px 340px at 50% 4%, rgba(130,12,18,.10), transparent 72%),
      repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(255,255,255,.018) 63px 64px, transparent 65px 124px);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position: center, left -24px top 74px, right -28px bottom 72px, center, center;
    background-size: 100% 100%, min(34vw,145px) auto, min(36vw,155px) auto, 100% 100%, 760px 760px;
  }
  html.bx-friday13[data-theme="light"] body.home::before {
    background-color: #f2f3f5;
    background-image:
      linear-gradient(180deg, rgba(242,243,245,.10), rgba(242,243,245,.32)),
      url("friday13-left-light.png"),
      url("friday13-right-light.png"),
      radial-gradient(480px 340px at 50% 4%, rgba(179,38,45,.045), transparent 72%),
      repeating-radial-gradient(ellipse at 0% 50%, transparent 0 62px, rgba(10,10,12,.022) 63px 64px, transparent 65px 124px);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position: center, left -24px top 74px, right -28px bottom 72px, center, center;
    background-size: 100% 100%, min(34vw,145px) auto, min(36vw,155px) auto, 100% 100%, 760px 760px;
  }

  /* A quiet 13 watermark in the hero, never covering text or controls. */
  html.bx-friday13 .hero__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  html.bx-friday13 .hero__panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -24px;
    right: -22px;
    width: 112px;
    height: 210px;
    opacity: .13;
    background: url("friday13-left.webp") center top / contain no-repeat;
  }
  html.bx-friday13[data-theme="light"] .hero__panel::before {
    background-image: url("friday13-left-light.png");
    opacity: .10;
  }

  /* Bring the hockey mask back near the bottom of the long mobile page. */
  html.bx-friday13 .site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  html.bx-friday13 .site-footer::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: -28px;
    bottom: -46px;
    width: 176px;
    height: 300px;
    opacity: .26;
    background: url("friday13-right.webp") center / contain no-repeat;
  }
  html.bx-friday13 .site-footer__inner,
  html.bx-friday13 .site-footer__bottom {
    position: relative;
    z-index: 1;
  }
  html.bx-friday13[data-theme="light"] .site-footer::after {
    background-image: url("friday13-right-light.png");
    opacity: .18;
  }

  /* Red hairline on the mobile drawer; all existing menu sizing stays intact. */
  html.bx-friday13 .mobile-menu {
    border-color: rgba(179,38,45,.38);
    box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 24px rgba(179,38,45,.07);
  }
  html.bx-friday13 .mobile-menu > a:focus-visible {
    outline: 1px solid rgba(179,38,45,.55);
  }
  html.bx-friday13[data-theme="light"] .mobile-menu {
    background: rgba(255,255,255,.98);
    border-color: rgba(179,38,45,.28);
  }
}

/* Final light-theme surface pass: keep every card/pill bright, not muddy grey. */
html.bx-friday13[data-theme="light"] .app-card,
html.bx-friday13[data-theme="light"] .app-card__status,
html.bx-friday13[data-theme="light"] .app-card__server,
html.bx-friday13[data-theme="light"] .app-card__stat,
html.bx-friday13[data-theme="light"] .net-stat,
html.bx-friday13[data-theme="light"] .net-loc,
html.bx-friday13[data-theme="light"] .price-card,
html.bx-friday13[data-theme="light"] .price-card--featured,
html.bx-friday13[data-theme="light"] .faq-item,
html.bx-friday13[data-theme="light"] .faq-item[open],
html.bx-friday13[data-theme="light"] .trial-plate {
  color: #17171a;
  background: #fff;
  border-color: rgba(10,10,12,.12);
  box-shadow: 0 12px 34px -26px rgba(10,10,12,.22), inset 0 1px 0 rgba(255,255,255,.98);
}

html.bx-friday13[data-theme="light"] .app-card__status,
html.bx-friday13[data-theme="light"] .app-card__server,
html.bx-friday13[data-theme="light"] .app-card__stat,
html.bx-friday13[data-theme="light"] .net-stat,
html.bx-friday13[data-theme="light"] .net-loc,
html.bx-friday13[data-theme="light"] .price-card__tag {
  background: #fff;
}

html.bx-friday13[data-theme="light"] .app-card__timer,
html.bx-friday13[data-theme="light"] .app-card__hint,
html.bx-friday13[data-theme="light"] .app-card__server-ping,
html.bx-friday13[data-theme="light"] .app-card__stat-label,
html.bx-friday13[data-theme="light"] .app-card__stat-value,
html.bx-friday13[data-theme="light"] .net-stat__label,
html.bx-friday13[data-theme="light"] .net-loc__count,
html.bx-friday13[data-theme="light"] .price-card__note,
html.bx-friday13[data-theme="light"] .faq-item__a {
  color: #666670;
}

html.bx-friday13[data-theme="light"] .app-card__stat-value b,
html.bx-friday13[data-theme="light"] .net-stat__value,
html.bx-friday13[data-theme="light"] .net-stat__value b,
html.bx-friday13[data-theme="light"] .app-card__server-name,
html.bx-friday13[data-theme="light"] .price-card__title,
html.bx-friday13[data-theme="light"] .price-card__price,
html.bx-friday13[data-theme="light"] .faq-item__q {
  color: #17171a;
}

html.bx-friday13[data-theme="light"] .app-card__power {
  color: #17171a;
  background: linear-gradient(145deg, #fff, #f8f8f9);
  border-color: rgba(10,10,12,.18);
  box-shadow: 0 0 30px -16px rgba(10,10,12,.28), inset 0 1px 0 #fff;
}

html.bx-friday13[data-theme="light"] .app-card__server-switch {
  color: #333338;
  background: #fff;
  border-color: rgba(10,10,12,.16);
}

html.bx-friday13[data-theme="light"] .feature-card__icon,
html.bx-friday13[data-theme="light"] .faq-item__icon::before,
html.bx-friday13[data-theme="light"] .faq-item__icon::after {
  background-color: rgba(10,10,12,.07);
}

html.bx-friday13[data-theme="light"] .faq-item__icon::before,
html.bx-friday13[data-theme="light"] .faq-item__icon::after {
  background-color: #55555d;
}

@media (max-width: 760px) {
  html.bx-friday13[data-theme="light"] .mobile-menu {
    background: #fff;
    color: #17171a;
  }
}