:root {
  --night: #081a34;
  --night-soft: #102c50;
  --paper: #f7f3ef;
  --ink: #102945;
  --muted: #6f7888;
  --line: #d9d3d4;
  --teal: #367bc0;
  --teal-bright: #85c8ff;
  --yellow: #f4bd69;
  --coral: #d75358;
}

.variant .hero h1 {
  font-size: clamp(3.15rem, 7.2vw, 6.8rem);
  line-height: .88;
}

.variant .hero h1 em {
  display: block;
  margin-top: .18em;
  color: #f19a8e;
  font-size: .44em;
  font-style: normal;
  letter-spacing: -.045em;
}

.variant .release-status {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(133, 200, 255, .42);
  border-radius: 5px;
  color: #cce9ff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.variant .device-shell img { object-fit: cover; object-position: top; }
.variant .floating-label { background: #79c1ff; color: #0a2442; }
.variant .label-b { background: #ef9288; color: #351117; }
.variant .floating-score { background: #f4bd69; }
.variant .plans-section { background: #0d2341; }
.variant .plan-premium {
  background: #17375d;
  color: #f7fbff;
}
.variant .plan-premium header,
.variant .plan-premium li { border-color: rgba(255, 255, 255, .2); }
.variant .plan-premium header div > span,
.variant .plan-premium li span { color: #9fd4ff; }
.variant .plan-premium header > strong { color: #ffd28a; }
.variant .plan-premium h3,
.variant .plan-premium li strong { color: #ffffff; }
.variant .plan-premium > p { color: #c8dced; }
.variant .contact-section { background: #275f9d; }
.variant .contact-panel { background: #f7f3ef; }

.variant .single-screen::before { inset: 10% 5% 2%; background: #f1d9d6; }
.variant .single-screen .phone-shot-front { right: 50%; width: min(62%, 360px); transform: translateX(50%) rotate(2deg); }
.variant .single-screen .phone-shot-front:hover { transform: translateX(50%) rotate(0deg) translateY(-8px); }

@media (max-width: 860px) {
  .variant .hero h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .variant .hero h1 em { font-size: .42em; }
}

@media (max-width: 620px) {
  .variant .release-status { min-height: 44px; padding: 8px 13px; font-size: .73rem; }
  .variant .single-screen .phone-shot-front { width: min(72%, 320px); }
}