:root {
  --bg-1: #eaf8f5;
  --bg-2: #d7eeea;
  --ink: #183034;
  --ring: rgba(17, 118, 106, 0.18);
  --ring-strong: rgba(17, 118, 106, 0.32);
  --button: #0f7e72;
  --button-strong: #0a655c;
  --button-live: #e26439;
  --button-live-strong: #c95127;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(15, 126, 114, 0.2) 0, transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(226, 100, 57, 0.16) 0, transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(8, 52, 64, 0.12) 0, transparent 35%);
}

.phone-demo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 28px;
}

.call-button {
  position: relative;
  width: min(72vw, 360px);
  height: min(72vw, 360px);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.call-button:hover {
  transform: scale(1.02);
}

.call-button:active {
  transform: scale(0.985);
}

.call-button::before,
.call-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.call-button::before {
  inset: -18px;
  background: radial-gradient(circle, transparent 56%, var(--ring) 57%, transparent 72%);
}

.call-button::after {
  inset: -42px;
  border: 1px solid rgba(24, 48, 52, 0.08);
}

.call-button-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: 50%;
  padding: 26px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.22) 0, transparent 30%),
    linear-gradient(155deg, var(--button) 0%, var(--button-strong) 100%);
  box-shadow:
    0 22px 50px rgba(10, 71, 78, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.call-button.active .call-button-shell {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.26) 0, transparent 32%),
    linear-gradient(155deg, var(--button-live) 0%, var(--button-live-strong) 100%);
  box-shadow:
    0 24px 58px rgba(169, 72, 35, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.call-button.active::before {
  animation: pulse-ring 1.8s ease-out infinite;
}

.call-button-state {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  letter-spacing: 0.12em;
}

.call-button-label {
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  line-height: 1.22;
  font-weight: 800;
}

.call-button.disabled {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.72;
}

.call-button.disabled .call-button-shell {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16) 0, transparent 32%),
    linear-gradient(155deg, #93a7a4 0%, #6d807d 100%);
}

.backstage {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.08);
    opacity: 0.12;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .call-button {
    width: min(78vw, 310px);
    height: min(78vw, 310px);
  }

  .call-button::before {
    inset: -14px;
  }

  .call-button::after {
    inset: -28px;
  }
}