/* IPTV Abonnement page: Section 1 hero and introduction. */
.subscription-hero {
  position: relative;
  isolation: isolate;
  min-height: 45rem;
  padding-block: clamp(5rem, 7vw, 7.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 42%, rgb(20 190 199 / 12%), transparent 30rem),
    radial-gradient(circle at 14% 8%, rgb(13 91 139 / 12%), transparent 28rem),
    linear-gradient(135deg, #030a14 0%, #071322 54%, #04101d 100%);
}

.subscription-hero::before,
.subscription-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(6rem);
}

.subscription-hero::before {
  top: 12%;
  right: -10rem;
  width: 28rem;
  height: 28rem;
  background: rgb(30 218 215 / 8%);
}

.subscription-hero::after {
  bottom: -15rem;
  left: 16%;
  width: 32rem;
  height: 32rem;
  background: rgb(13 95 160 / 7%);
}

.subscription-hero__grid-pattern {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgb(56 214 220 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 214 220 / 8%) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(ellipse 84% 78% at 72% 48%, #000 8%, transparent 82%);
  pointer-events: none;
}

.subscription-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(25rem, 0.92fr);
  gap: clamp(3.25rem, 6vw, 7rem);
  align-items: center;
  width: min(calc(100% - (2 * var(--container-gutter))), 85rem);
  max-width: none;
}

.subscription-hero__content {
  min-width: 0;
}

.subscription-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  color: #45e3df;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.subscription-hero__eyebrow::before {
  width: 2.25rem;
  height: 0.16rem;
  border-radius: 999px;
  background: #24d8d5;
  box-shadow: 0 0 1rem rgb(36 216 213 / 34%);
  content: "";
}

.subscription-hero h1 {
  max-width: 49rem;
  margin: 0;
  color: #fff;
  font-size: clamp(3.65rem, 5.25vw, 5.65rem);
  font-weight: 850;
  letter-spacing: -0.052em;
  line-height: 0.98;
  text-wrap: balance;
}

.subscription-hero h1::after {
  display: block;
  width: clamp(4rem, 8vw, 6.5rem);
  height: 0.28rem;
  margin-top: 1.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #25e7e0, #159ed1);
  box-shadow: 0 0 1.2rem rgb(37 231 224 / 24%);
  content: "";
}

.subscription-hero h2 {
  max-width: 42rem;
  margin: 1.75rem 0 0;
  color: #f7fbff;
  font-size: clamp(1.35rem, 1.1rem + 0.65vw, 1.85rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.subscription-hero__intro {
  max-width: 43rem;
  margin: 0.9rem 0 0;
  color: #afbdd1;
  font-size: clamp(0.98rem, 0.92rem + 0.16vw, 1.08rem);
  line-height: 1.75;
}

.subscription-hero__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  max-width: 45rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.subscription-hero__benefits li {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: 0.68rem;
  align-items: start;
  color: #e4edf8;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.subscription-hero__benefits svg {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.2rem;
  border: 1px solid rgb(60 228 222 / 42%);
  border-radius: 50%;
  color: #4ce9e3;
  background: rgb(31 213 209 / 9%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subscription-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.subscription-hero__actions .button {
  min-width: 12.75rem;
  min-height: 3.45rem;
  padding-inline: 1.35rem;
}

.subscription-hero__actions .button--secondary svg {
  width: 1.15rem;
  height: 1.15rem;
}

.subscription-hero__visual {
  min-width: 0;
}

.subscription-visual {
  position: relative;
  width: min(100%, 38rem);
  aspect-ratio: 1.08;
  margin-inline: auto;
}

.subscription-visual__glow {
  position: absolute;
  inset: 12% 6% 8%;
  border-radius: 50%;
  background: rgb(22 210 211 / 20%);
  filter: blur(4.5rem);
}

.subscription-visual__screen {
  position: absolute;
  z-index: 2;
  top: 8%;
  right: 2%;
  width: 90%;
  aspect-ratio: 1.48;
  padding: 0.58rem;
  border: 1px solid rgb(87 234 230 / 40%);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #18354c, #071523 58%, #05101c);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 2.2rem 5rem rgb(0 0 0 / 45%),
    0 0 2.5rem rgb(28 211 210 / 12%);
  transform: perspective(70rem) rotateY(-6deg) rotateX(2deg);
}

.subscription-visual__screen-top {
  display: flex;
  height: 16%;
  align-items: center;
  gap: 0.34rem;
  padding: 0.35rem 0.7rem;
}

.subscription-visual__screen-top img {
  width: 8.5rem;
  height: auto;
  margin-right: auto;
  object-fit: contain;
}

.subscription-visual__screen-top > span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgb(101 224 224 / 44%);
}

.subscription-visual__screen-body {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 0.65rem;
  height: 80%;
  padding: 0.35rem;
  border: 1px solid rgb(70 221 220 / 16%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 25% 20%, rgb(28 222 218 / 17%), transparent 13rem),
    linear-gradient(150deg, #0b2438, #061421 70%);
}

.subscription-visual__feature {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
  border: 1px solid rgb(64 222 221 / 20%);
  border-radius: 0.78rem;
  color: #dffefe;
  background:
    linear-gradient(145deg, rgb(22 148 166 / 22%), rgb(4 17 29 / 88%)),
    repeating-linear-gradient(135deg, transparent 0 1.5rem, rgb(73 229 224 / 3%) 1.5rem 3rem);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.subscription-visual__feature::after {
  position: absolute;
  right: -20%;
  bottom: -45%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid rgb(60 230 225 / 15%);
  border-radius: 50%;
  content: "";
}

.subscription-visual__feature svg {
  width: 3.3rem;
  height: 3.3rem;
  color: #55eee8;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.65rem rgb(51 227 222 / 28%));
}

.subscription-visual__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.subscription-visual__tiles > span {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-end;
  padding: 0.65rem;
  overflow: hidden;
  border: 1px solid rgb(81 230 227 / 15%);
  border-radius: 0.72rem;
  color: #e4f8fb;
  background: linear-gradient(145deg, rgb(20 91 119 / 75%), rgb(5 23 37 / 96%));
  font-size: 0.68rem;
  line-height: 1.2;
}

.subscription-visual__tiles > span:nth-child(2),
.subscription-visual__tiles > span:nth-child(3) {
  background: linear-gradient(145deg, rgb(12 118 130 / 62%), rgb(5 23 37 / 96%));
}

.subscription-visual__tiles i {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(95 238 232 / 13%);
  border-radius: 50%;
  transform: translate(1.4rem, -1.3rem);
}

.subscription-visual__tiles b {
  font-weight: 700;
}

.subscription-visual__stand {
  position: absolute;
  right: 33%;
  bottom: -14%;
  width: 28%;
  height: 14%;
  border-bottom: 0.42rem solid #183547;
  clip-path: polygon(35% 0, 65% 0, 76% 80%, 100% 90%, 100% 100%, 0 100%, 0 90%, 24% 80%);
  background: linear-gradient(90deg, #081522, #294c5c 50%, #07131f);
}

.subscription-visual__tablet,
.subscription-visual__phone {
  position: absolute;
  z-index: 4;
  border: 1px solid rgb(104 239 234 / 40%);
  background: linear-gradient(145deg, #17374b, #07131f);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 45%);
}

.subscription-visual__tablet {
  bottom: 7%;
  left: 0;
  width: 42%;
  aspect-ratio: 1.42;
  padding: 0.42rem;
  border-radius: 1rem;
  transform: perspective(40rem) rotateY(9deg) rotateZ(-2deg);
}

.subscription-visual__tablet > div {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.36rem;
  width: 100%;
  height: 100%;
  padding: 0.55rem;
  border-radius: 0.67rem;
  background: linear-gradient(140deg, #0d3448, #061725);
}

.subscription-visual__tablet span {
  border: 1px solid rgb(80 229 224 / 16%);
  border-radius: 0.38rem;
  background: linear-gradient(150deg, rgb(28 193 190 / 22%), rgb(5 22 34 / 95%));
}

.subscription-visual__tablet span:first-child {
  grid-row: span 2;
}

.subscription-visual__phone {
  right: 5%;
  bottom: 1%;
  width: 18%;
  aspect-ratio: 0.52;
  padding: 0.35rem;
  border-radius: 1.15rem;
  transform: rotate(5deg);
}

.subscription-visual__phone::before {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  width: 30%;
  height: 0.22rem;
  border-radius: 999px;
  background: #315362;
  content: "";
  transform: translateX(-50%);
}

.subscription-visual__phone i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 50% 38%, rgb(42 232 224 / 24%), transparent 45%),
    linear-gradient(155deg, #0c3549, #04121e 72%);
}

.subscription-visual__phone svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.25rem;
  height: 2.25rem;
  color: #56eee8;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 0.65rem rgb(60 234 227 / 38%));
}

.subscription-visual__connection {
  position: absolute;
  z-index: 3;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgb(72 231 226 / 30%);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.subscription-visual__connection--one {
  bottom: 17%;
  left: 30%;
  transform: rotate(42deg);
}

.subscription-visual__connection--two {
  right: 13%;
  bottom: 20%;
  transform: rotate(215deg) scale(0.72);
}

@media (max-width: 70rem) {
  .subscription-hero {
    padding-block: 4.75rem;
  }

  .subscription-hero__container {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.8fr);
    gap: 2.75rem;
  }

  .subscription-hero h1 {
    font-size: clamp(3.2rem, 5.6vw, 4.5rem);
  }

  .subscription-hero__benefits {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 56rem) {
  .subscription-hero {
    min-height: 0;
    padding-block: 4.5rem 5.5rem;
  }

  .subscription-hero__grid-pattern {
    background-size: 3.75rem 3.75rem;
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 45%), transparent 88%);
  }

  .subscription-hero__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.75rem;
  }

  .subscription-hero__content {
    max-width: 46rem;
  }

  .subscription-hero h1 {
    max-width: 43rem;
    font-size: clamp(3.4rem, 8.5vw, 4.65rem);
  }

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

  .subscription-visual {
    width: min(100%, 35rem);
  }
}

@media (max-width: 47.99rem) {
  .subscription-hero {
    padding-block: 3.75rem 4.75rem;
  }

  .subscription-hero h1 {
    font-size: clamp(2.75rem, 10vw, 3.75rem);
    line-height: 1;
  }

  .subscription-hero h2 {
    margin-top: 1.5rem;
  }

  .subscription-hero__benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .subscription-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-hero__actions .button {
    min-width: 0;
  }
}

@media (max-width: 36rem) {
  .subscription-hero__container {
    gap: 3rem;
  }

  .subscription-hero__eyebrow {
    font-size: 0.75rem;
  }

  .subscription-hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.25rem);
  }

  .subscription-hero h1::after {
    margin-top: 1.1rem;
  }

  .subscription-hero h2 {
    font-size: 1.35rem;
  }

  .subscription-hero__intro {
    font-size: 0.95rem;
  }

  .subscription-hero__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .subscription-hero__actions .button {
    width: 100%;
    min-height: 3.55rem;
  }

  .subscription-visual {
    width: min(100%, 30rem);
  }
}

@media (max-width: 22rem) {
  .subscription-hero {
    padding-block: 3.25rem 4rem;
  }

  .subscription-hero h1 {
    font-size: 2.35rem;
  }

  .subscription-hero__benefits li {
    font-size: 0.87rem;
  }

  .subscription-visual__screen-top img {
    width: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-hero__actions .button {
    transition: none;
  }
}