.coming-soon-page {
   min-height: 70dvh;
   display: grid;
   place-items: center;
   padding: 44px 5%;
   background:
      radial-gradient(circle at top left, rgba(255, 214, 0, 0.18), transparent 34%),
      linear-gradient(135deg, rgba(0, 71, 255, 0.08), transparent 46%),
      var(--bg);
}

.coming-soon {
   width: min(760px, 100%);
   display: grid;
   justify-items: center;
   gap: 16px;
   text-align: center;
   padding: clamp(36px, 7vw, 72px) clamp(22px, 5vw, 56px);
   border-radius: 8px;
   background: var(--secondary-bg);
   border: 1px solid rgba(0, 71, 255, 0.12);
   box-shadow: var(--shadow);
}

.coming-soon__icon {
   width: 86px;
   height: 86px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
   color: var(--text-light);
   font-size: 2.3rem;
   box-shadow: 0 18px 40px rgba(0, 71, 255, 0.22);
}

.coming-soon__eyebrow {
   color: var(--primary-color);
   font-size: 0.82rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.coming-soon h2 {
   color: var(--main-text);
   font-size: clamp(2rem, 5vw, 3.6rem);
   line-height: 1.05;
}

.coming-soon p {
   max-width: 540px;
   color: var(--text-color);
   font-size: 1.04rem;
}

.coming-soon__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 11px 18px;
   border-radius: 8px;
   background: var(--accent-color);
   color: var(--dark-color);
   font-weight: 900;
   text-decoration: none;
   transition: transform 0.2s ease, background 0.2s ease;
}

.coming-soon__button:hover {
   transform: translateY(-2px);
   background: var(--text-light);
}

body.dark .coming-soon {
   border-color: rgba(255, 255, 255, 0.08);
}