* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Montserrat", Arial, sans-serif;
  overflow: hidden;
}

.coming-soon {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  background: #e60000;
  color: #ffffff;
}

.hero-panel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 23%, rgba(255, 38, 38, 0.35), transparent 33%),
    linear-gradient(155deg, #e90000 0%, #db0000 40%, #bd0018 100%);
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(35deg, transparent 0 58%, rgba(130, 0, 40, 0.12) 58% 100%),
    linear-gradient(20deg, transparent 0 48%, rgba(120, 0, 35, 0.13) 48% 83%, transparent 83%);
  opacity: 0.75;
}

.texture {
  position: absolute;
  opacity: 0.12;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.16), transparent 65%);
  transform: rotate(-17deg);
}

.texture-one {
  width: 780px;
  height: 520px;
  left: 10%;
  bottom: -230px;
}

.texture-two {
  width: 920px;
  height: 650px;
  right: 0;
  top: -160px;
}

.content {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 90vw);
  text-align: center;
  z-index: 2;
}

h1 {
  margin: 0 0 36px;
  font-weight: 400;
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  letter-spacing: 0.03em;
  line-height: 1;
}

.divider {
  width: 72%;
  height: 1px;
  margin: 0 auto 23px;
  background: rgba(255, 255, 255, 0.16);
}

.divider.small {
  margin-top: 22px;
  margin-bottom: 32px;
}

h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.content p {
  margin: 0;
  font-size: clamp(0.95rem, 1vw, 1.08rem);
  font-weight: 500;
  line-height: 1.35;
}

.afrihost-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55vw;
  height: 42vh;
  min-height: 250px;
  background: #ffffff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 3;
}

.afrihost-card {
  position: absolute;
  right: 7.2vw;
  bottom: 6.8vh;
  width: 430px;
  text-align: center;
  color: #7d7d7d;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: #e3322a;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
}

.brand em {
  font-style: italic;
  font-weight: 400;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-block;
  background:
    linear-gradient(145deg, #eeeeee 0 35%, #d3d3d3 35% 50%, #bc1014 50% 70%, #f3f3f3 70%);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.18);
}

.afrihost-card h3 {
  margin: 0 0 16px;
  font-size: 1.02rem;
  font-weight: 500;
  color: #8a8a8a;
}

.afrihost-card p {
  margin: 0 0 34px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #878787;
}

.afrihost-card a {
  display: inline-block;
  padding: 13px 25px;
  background: #df120d;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}

.afrihost-card a:hover {
  background: #c90e0a;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .coming-soon {
    min-height: 760px;
  }

  .content {
    top: 34%;
  }

  .afrihost-panel {
    width: 100vw;
    height: 36vh;
    clip-path: polygon(100% 12%, 100% 100%, 0 100%, 0 42%);
  }

  .afrihost-card {
    width: 88vw;
    right: 6vw;
    bottom: 5vh;
  }

  .brand {
    font-size: 1.55rem;
    margin-bottom: 18px;
  }
}

@media (max-width: 520px) {
  .coming-soon {
    min-height: 700px;
  }

  .content {
    top: 30%;
  }

  h1 {
    font-size: 3rem;
  }

  .divider {
    width: 82%;
  }

  .content p,
  .content br,
  .afrihost-card br {
    display: none;
  }

  .content p {
    display: block;
    padding: 0 24px;
  }

  .afrihost-card {
    bottom: 4vh;
  }

  .afrihost-card p {
    font-size: 0.78rem;
  }
}