/* ─── CTA + Form section ─────────────────────────────────────── */

.cta-section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px clamp(40px, 13.5vw, 200px) 112px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.cta-section__bg {
  background: linear-gradient(180deg, rgba(20, 20, 20, 1) 0%, #0172fd 78%, #0172fd 100%);
  box-shadow: 0 4px 4px #00000040;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.cta-section__glow {
  background-color: #015bca1a;
  border-radius: 9999px;
  bottom: 0;
  filter: blur(50px);
  height: 320px;
  position: absolute;
  right: 480px;
  width: 320px;
  pointer-events: none;
}

/* ── Heading block: SVG + tagline ───────────────────────────── */

.cta-section__heading {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.cta-section__elevate {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* ── Two-column grid ────────────────────────────────────────── */

.cta-section__inner {
  align-items: stretch;
  display: flex;
  gap: 64px;
  position: relative;
  width: 100%;
}

/* left and right columns start at the same vertical level */
.cta-section__left,
.cta-section__right {
  align-self: flex-start;
}

/* ── Left: body text ────────────────────────────────────────── */

.cta-section__left {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 60px;
  position: relative;
}

.cta-section__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-section__copy-title {
  color: var(--white-solid);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-32);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 38.4px;
  max-width: 640px;
}

.cta-section__copy-sub {
  color: var(--silver-chalice);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-28);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 39.2px;
  max-width: 619px;
}

/* ── CTA button in left column ──────────────────────────────── */

.cta-section__bttn {
  align-items: center;
  align-self: flex-end;
  cursor: pointer;
  display: inline-flex;
  gap: 16px;
  overflow: visible;
  padding: 16px 0;
  position: relative;
}

/* Background atmospheric glow */
.cta-section__bttn-glow {
  height: 314px;
  left: 50%;
  opacity: 0.75;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  width: 984px;
  z-index: 0;
}

.cta-section__bttn:hover .cta-section__bttn-glow {
  opacity: 1;
}

.cta-section__bttn-text {
  align-items: center;
  color: var(--white-solid);
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-32);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 31.68px;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

.cta-section__bttn-icon-wrap {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cta-section__bttn-icon-wrap img {
  display: block;
  width: 26.4px;
}

.cta-section__tagline {
  align-self: flex-end;
  color: var(--white-solid);
  font-family: var(--font-montserrat), sans-serif;
  font-size: clamp(20px, 7.38px + 3.37vw, 72px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  text-align: right;
}

/* ── Right: form card ───────────────────────────────────────── */

.cta-section__right {
  display: flex;
  flex: 0 0 750px;
  position: relative;
}

/* White glow behind the card — separates it from the blue background */
.cta-section__right::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 44px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 0;
}

/* ── Form card ──────────────────────────────────────────────── */

.cta-section .divbg-white {
  align-items: flex-start;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border-radius: 24px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  padding: 36px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  z-index: 1;
}

.cta-section .divbg-whiteshadow {
  background: transparent;
  border-radius: 24px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 40, 0.38),
    0 40px 80px -12px rgba(0, 0, 20, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.cta-section .h3text-xl {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.cta-section .try-a-free-ab-test-with-casai {
  align-items: center;
  align-self: stretch;
  color: var(--cod-gray);
  display: flex;
  font-family: var(--font-montserrat), sans-serif;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 28px;
  margin-top: -1px;
  position: relative;
}

.cta-section .ptext-sm {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.cta-section .start-seeing-results {
  align-items: center;
  align-self: stretch;
  color: var(--pale-sky);
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
}

/* ── Form ───────────────────────────────────────────────────── */

.cta-section .formlead-form {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0 0;
  position: relative;
  width: 100%;
}

.cta-section .form-group {
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cta-section .what-are-you-interested-in {
  align-items: center;
  align-self: stretch;
  color: var(--bright-gray);
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
}

.cta-section .divflex-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 16px;
  width: 100%;
}

.cta-section .labelflex {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}

.cta-section .publishing,
.cta-section .mediation {
  color: #4b5563;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.cta-section input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--white-solid);
  border: 1px solid var(--pale-sky);
  border-radius: 2.5px;
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  position: relative;
  width: 16px;
  transition: background-color 0.15s, border-color 0.15s;
}

.cta-section input[type="checkbox"]:checked {
  background-color: var(--blue-ribbon);
  border-color: var(--blue-ribbon);
}

.cta-section input[type="checkbox"]:checked::after {
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  content: '';
  height: 9px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  width: 5px;
}

.cta-section .divgrid {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 16px;
  width: 100%;
}

.cta-section .div-1,
.cta-section .div-2,
.cta-section .div-3,
.cta-section .div-4 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.cta-section .labelblock-6 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.cta-section .name {
  color: transparent;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  margin-top: -1px;
}

.cta-section .span0 {
  color: var(--bright-gray);
}

.cta-section .span1 {
  color: var(--persian-red);
}

.cta-section .inputname-5 {
  appearance: none;
  -webkit-appearance: none;
  align-self: stretch;
  background-color: #eeeeee80;
  border: 1px solid var(--quill-gray);
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--cod-gray);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  height: 48px;
  outline: none;
  padding: 0 16px;
  position: relative;
  transition: border-color 0.15s;
  width: 100%;
}

.cta-section .inputname-5::placeholder {
  color: #9ca3af;
}

.cta-section .inputname-5:focus {
  border-color: #004fe3;
}

.cta-section .inputname-5.is-invalid {
  border-color: var(--persian-red);
}

.cta-section .inputname-5.is-valid {
  border-color: #004fe3;
  background-color: #e8f0fe;
}

/* password wrapper: border reacts to inner input focus */
.cta-section .input-pw-wrap:focus-within {
  border-color: #004fe3;
}

.cta-section .input-pw-wrap.is-valid {
  border-color: #004fe3;
  background-color: #e8f0fe;
}

/* prevent browser autofill from painting only the inner input area */
.cta-section .input-pw-wrap input:-webkit-autofill,
.cta-section .input-pw-wrap input:-webkit-autofill:hover,
.cta-section .input-pw-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #eeeeee80 inset;
  -webkit-text-fill-color: var(--cod-gray);
}

/* password wrapper styled as input */
.cta-section .input-pw-wrap {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 0 12px 0 16px;
}

.cta-section .input-pw-wrap input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-sizing: border-box;
  color: var(--cod-gray);
  flex: 1;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  height: 100%;
  outline: none;
  padding: 0;
  width: 100%;
}

.cta-section .input-pw-wrap input::placeholder {
  color: #9ca3af;
}

.cta-section .btn-toggle-pw {
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
}

.cta-section .btn-toggle-pw img {
  display: block;
  opacity: 0.5;
  transition: opacity 0.15s;
}

/* exact SVG viewBox sizes → integer-pixel rendering, no blur */
.cta-section .btn-toggle-pw .icon-eye-closed {
  width: 20px;
  height: 10px;
}

.cta-section .btn-toggle-pw .icon-eye-open {
  width: 22px;
  height: 15px;
}

.cta-section .btn-toggle-pw:hover img {
  opacity: 1;
}

/* icon swap driven by aria-pressed */
.cta-section .btn-toggle-pw .icon-eye-open                        { display: none; }
.cta-section .btn-toggle-pw[aria-pressed="true"] .icon-eye-closed { display: none; }
.cta-section .btn-toggle-pw[aria-pressed="true"] .icon-eye-open   { display: block; }

.cta-section .frame-136 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.cta-section .field-error {
  color: var(--persian-red);
  font-family: var(--font-raleway), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 14px;
  padding: 0 10px;
}

.cta-section .field-error[hidden] {
  display: none;
}

.cta-section .form-submit-error {
  padding: 6px 0 0;
  font-size: 12px;
  text-align: center;
}

/* ── Messenger picker ───────────────────────────────────────── */

.cta-section .messenger-picker {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 8px;
  position: relative;
  width: 100%;
}

.cta-section .messenger-select {
  flex-shrink: 0;
  position: relative;
}

.cta-section .messenger-select-trigger {
  align-items: center;
  background-color: #eeeeee80;
  border: 1px solid var(--quill-gray);
  border-radius: 12px;
  color: var(--cod-gray);
  cursor: pointer;
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  transition: border-color 0.15s;
  white-space: nowrap;
  width: 156px;
}

.cta-section .messenger-select-trigger:hover,
.cta-section .messenger-select.is-open .messenger-select-trigger {
  border-color: #004fe3;
}

.cta-section .messenger-sel-icon {
  color: var(--pale-sky);
  display: flex;
  flex-shrink: 0;
}

.cta-section .messenger-sel-label {
  flex: 1;
  text-align: left;
}

.cta-section .messenger-sel-chevron {
  color: var(--pale-sky);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.cta-section .messenger-select.is-open .messenger-sel-chevron {
  transform: rotate(180deg);
}

.cta-section .messenger-dropdown {
  background-color: var(--white-solid);
  border: 1px solid var(--quill-gray);
  border-radius: 12px;
  box-shadow: 0 8px 24px #00000018;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  min-width: 156px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 200;
}

.cta-section .messenger-select.is-open .messenger-dropdown {
  display: block;
}

.cta-section .messenger-option {
  align-items: center;
  border-radius: 8px;
  color: var(--cod-gray);
  cursor: pointer;
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  gap: 8px;
  padding: 8px 10px;
  transition: background-color 0.12s;
}

.cta-section .messenger-option:hover {
  background-color: #eeeeee80;
}

.cta-section .messenger-option.is-selected {
  color: var(--blue-ribbon);
}

.cta-section .messenger-opt-icon {
  color: inherit;
  display: flex;
  flex-shrink: 0;
}

.cta-section .messenger-input {
  flex: 1;
}

/* ── intl-tel-input inside messenger picker ──────────────── */

.cta-section .messenger-picker .iti-messenger {
  display: block;
  flex: 1;
  min-width: 0;
}

.cta-section .messenger-picker .iti-messenger > input {
  width: 100%;
}

.cta-section .iti-messenger .iti__selected-flag {
  background-color: transparent;
  border-radius: 12px 0 0 12px;
  padding: 0 8px 0 12px;
}

.cta-section .iti-messenger .iti__selected-flag:hover,
.cta-section .iti-messenger .iti__selected-flag:focus {
  background-color: rgba(0, 0, 0, 0.04);
}

.cta-section .iti-messenger .iti__selected-dial-code {
  color: var(--cod-gray);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  margin-left: 4px;
}

.cta-section .iti-messenger .iti__country-list {
  background-color: var(--white-solid);
  border: 1px solid var(--quill-gray);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  max-height: 220px;
  padding: 6px;
}

.cta-section .iti-messenger .iti__country {
  border-radius: 8px;
  padding: 6px 10px;
}

.cta-section .iti-messenger .iti__country.iti__highlight,
.cta-section .iti-messenger .iti__country:hover {
  background-color: #eeeeee80;
}

.cta-section .iti-messenger .iti__country-name {
  color: var(--cod-gray);
}

.cta-section .iti-messenger .iti__dial-code {
  color: var(--pale-sky);
}

.cta-section .iti-messenger .iti__divider {
  border-color: var(--quill-gray);
  margin: 4px 0;
}

/* ── Privacy & submit ───────────────────────────────────────── */

.cta-section .privacy-label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  width: 100%;
}

.cta-section .i-have-read-and-accept-the {
  align-items: center;
  color: var(--pale-sky);
  display: inline;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 19.5px;
  position: relative;
  white-space: nowrap;
}

.cta-section .text-3 {
  color: var(--blue-ribbon);
  display: inline;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 19.5px;
  text-decoration: underline;
  white-space: nowrap;
}

.cta-section .btn {
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  align-self: stretch;
  background-color: var(--blue-ribbon);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: opacity 0.15s, background-color 0.35s ease, filter 0.3s ease;
  width: 100%;
}

.cta-section .btn:hover {
  opacity: 1;
}

.cta-section .btn:active {
  opacity: 0.8;
}

.cta-section .buttonsubmit-btnshadow {
  background-color: #ffffff01;
  border-radius: 12px;
  box-shadow: 0 4px 6px -4px #0172fd40, 0 10px 15px -3px #0172fd40;
  height: 48px;
  left: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.35s ease;
  width: 100%;
}

.cta-section .text-4 {
  align-items: center;
  color: var(--white-solid);
  display: flex;
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-14);
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.cta-section .btn:disabled {
  background-color: #969EA9;
  box-shadow: 0 10px 15px -3px rgba(80, 85, 89, 0.25), 0 4px 6px -4px rgba(75, 79, 83, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}

.cta-section .btn:disabled .buttonsubmit-btnshadow {
  opacity: 0;
}

.cta-section .btn:disabled .text-4 {
  color: #ffffff;
}

/* ── Submit button: electric awakening ───────────────────────── */

/* Custom property for counter-clockwise arc */
@property --eb {
  syntax: '<angle>';
  initial-value: 360deg;
  inherits: false;
}

/* Arc A: clockwise */
@keyframes btnElectricRun {
  to { --ea: 360deg; }
}

/* Arc B: counter-clockwise */
@keyframes btnElectricRunB {
  to { --eb: 0deg; }
}

/* No-op — ensures animationend fires on btn so JS can remove is-unlocking */
@keyframes btnUnlockDone {
  from { opacity: 1; }
  to   { opacity: 1; }
}

.cta-section .btn.is-unlocking {
  animation: btnUnlockDone 0.8s forwards;
}

/* Inner surge flash on awakening — sweeps left to right */
@keyframes btnSurgeFlash {
  0%   { opacity: 0; transform: translateX(-100%); }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translateX(100%); }
}

/* Neon border flicker on the wrap — fires at unlock moment */
@keyframes btnBorderFlicker {
  0%   { box-shadow: none; }
  12%  { box-shadow: 0 0 0 2px rgba(74,180,255,.9), 0 0 14px rgba(74,180,255,.6), 0 0 28px rgba(1,114,253,.4); }
  24%  { box-shadow: 0 0 0 1px rgba(74,180,255,.08); }
  52%  { box-shadow: 0 0 0 2px rgba(74,180,255,.75), 0 0 18px rgba(74,180,255,.5), 0 0 36px rgba(1,114,253,.3); }
  74%  { box-shadow: 0 0 0 1px rgba(74,180,255,.12); }
  100% { box-shadow: none; }
}

/* Shadow: power-on burst → steady glow pulse */
@keyframes btnPowerOn {
  0%   { box-shadow: 0 4px 6px -4px rgba(80,85,89,.25), 0 10px 15px -3px rgba(75,79,83,.25); }
  25%  { box-shadow: 0 0 36px rgba(1,114,253,.95), 0 0 72px rgba(1,114,253,.5); }
  100% { box-shadow: 0 4px 6px -4px rgba(1,114,253,.25), 0 10px 15px -3px rgba(1,114,253,.25); }
}

@keyframes btnGlowPulse {
  0%, 100% { box-shadow: 0 4px 6px -4px rgba(1,114,253,.25), 0 10px 15px -3px rgba(1,114,253,.25); }
  50%       { box-shadow: 0 0 20px rgba(1,114,253,.55), 0 0 40px rgba(1,114,253,.25); }
}

/* ── Arc wrapper — separate from btn to avoid overflow:hidden conflict ── */
.cta-section .btn-electric-wrap {
  align-self: stretch;
  position: relative;
  width: 100%;
  border-radius: 12px;
}

/* Neon flicker fires on the wrap when inner btn is unlocking */
.cta-section .btn-electric-wrap:has(.btn.is-unlocking) {
  animation: btnBorderFlicker 0.8s ease-out forwards;
}

/* ── Arc B: counter-clockwise, cyan sparks ── */
.cta-section .btn-electric-wrap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  padding: 3px;
  background: conic-gradient(
    from var(--eb),
    rgba(0, 200, 255, 0)     0%,
    rgba(0, 200, 255, 0)     7%,
    rgba(0, 200, 255, .45)  12%,
    rgba(140, 220, 255, .75) 16%,
    rgba(0, 200, 255, .45)  20%,
    rgba(0, 200, 255, 0)    25%,
    rgba(0, 200, 255, 0)    57%,
    rgba(0, 200, 255, .35)  61%,
    rgba(140, 220, 255, .6)  65%,
    rgba(0, 200, 255, .35)  69%,
    rgba(0, 200, 255, 0)    74%,
    rgba(0, 200, 255, 0)    100%
  );
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(2px);
  pointer-events: none;
}

/* ── Arc A: clockwise, blue sparks ── */
.cta-section .btn-electric-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  padding: 3px;
  background: conic-gradient(
    from var(--ea),
    rgba(1, 114, 253, 0)     0%,
    rgba(1, 114, 253, 0)     4%,
    rgba(74, 180, 255, .6)   8%,
    rgba(120, 200, 255, 1)  12%,
    rgba(74, 180, 255, .6)  16%,
    rgba(1, 114, 253, 0)    20%,
    rgba(1, 114, 253, 0)    36%,
    rgba(74, 180, 255, .45) 40%,
    rgba(120, 200, 255, .85) 43%,
    rgba(74, 180, 255, .45) 46%,
    rgba(1, 114, 253, 0)    50%,
    rgba(1, 114, 253, 0)    68%,
    rgba(74, 180, 255, .35) 71%,
    rgba(120, 200, 255, .65) 74%,
    rgba(74, 180, 255, .35) 77%,
    rgba(1, 114, 253, 0)    81%,
    rgba(1, 114, 253, 0)    100%
  );
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(2px);
  pointer-events: none;
}

/* Arcs appear when button is enabled */
.cta-section .btn-electric-wrap:has(.btn:not(:disabled))::before {
  opacity: 1;
  animation: btnElectricRun 2.5s linear infinite;
}

.cta-section .btn-electric-wrap:has(.btn:not(:disabled))::after {
  opacity: .7;
  animation: btnElectricRunB 3.8s linear infinite;
}

/* ── Inner surge flash on awakening ── */
.cta-section .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(255, 255, 255, 0.85)  0%,
    rgba(1, 114, 253, 0.4)    45%,
    transparent               75%
  );
  opacity: 0;
  pointer-events: none;
}

.cta-section .btn.is-unlocking::after {
  animation: btnSurgeFlash 0.65s ease-out forwards;
}

/* ── Shadow: flash on power-on, then pulse ── */
.cta-section .btn.is-unlocking .buttonsubmit-btnshadow {
  animation: btnPowerOn 0.8s ease-out forwards;
}

.cta-section .btn:not(:disabled):not(.is-unlocking) .buttonsubmit-btnshadow {
  animation: btnGlowPulse 2.5s ease-in-out infinite;
}

/* ── Hover: both arcs speed up + brightness ── */
.cta-section .btn-electric-wrap:has(.btn:not(:disabled)):hover::before {
  animation-duration: 1.2s;
  filter: blur(3px);
}

.cta-section .btn-electric-wrap:has(.btn:not(:disabled)):hover::after {
  animation-duration: 1.8s;
  filter: blur(3px);
}

.cta-section .btn:not(:disabled):hover {
  filter: brightness(1.1);
}

/* ── Submit button loading state ─────────────────────────────── */

.cta-section .btn .text-4 {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cta-section .btn-spinner {
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.18s ease;
  width: 20px;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.cta-section .btn.is-loading {
  pointer-events: none;
}

/* Both arcs fade out during loading */
.cta-section .btn-electric-wrap:has(.btn.is-loading)::before,
.cta-section .btn-electric-wrap:has(.btn.is-loading)::after {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* keep blue while loading even though disabled attr is set */
.cta-section .btn.is-loading:disabled {
  background-color: var(--blue-ribbon);
  box-shadow: none;
  cursor: default;
}

.cta-section .btn.is-loading:disabled .buttonsubmit-btnshadow {
  opacity: 0.6;
}

.cta-section .btn.is-loading .text-4 {
  opacity: 0;
  transform: scale(0.8);
}

.cta-section .btn.is-loading .btn-spinner {
  animation: btn-spin 0.72s linear infinite;
  opacity: 1;
  transition: opacity 0.18s ease 0.1s;
}

.cta-section .field-hint {
  color: #9ca3af;
  font-family: var(--font-raleway), sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 14px;
  padding: 0 2px;
}

.cta-section .field-hint.is-invalid {
  color: var(--persian-red);
}

.cta-section input[type="checkbox"].is-invalid {
  border-color: var(--persian-red);
  background-color: #fff0f0;
}

.cta-section .form-success {
  color: var(--blue-ribbon);
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}

.cta-section .form-success[hidden] {
  display: none;
}

/* ─── Responsive ─────────────────────────────────────────────── */

/* 2K–4K */
@media (min-width: 2200px) {
  .cta-section { zoom: 1.11; width: calc(100vw / 1.11); margin-left: auto; margin-right: auto; }
}
@media (min-width: 2800px) {
  .cta-section { zoom: 1.41; width: calc(100vw / 1.41); }
}
@media (min-width: 3840px) {
  .cta-section { zoom: 1.94; width: calc(100vw / 1.94); }
}

/* ≤ 1560px — reduce side padding */
@media (max-width: 1560px) {
  .cta-section {
    padding-left: clamp(40px, 7.7vw, 120px);
    padding-right: clamp(40px, 7.7vw, 120px);
  }
}

/* ≤ 1850px — stack columns, left-align everything */
@media (max-width: 1850px) {
  .cta-section__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .cta-section__left {
    align-self: stretch;
    gap: 32px;
  }

  /* Heading: tagline is left-aligned in the stacked layout */
  .cta-section__tagline {
    align-self: flex-start;
    text-align: left;
  }

  /* "Hear the Difference" link: switch from right to left */
  .cta-section__bttn {
    align-self: flex-start;
  }

  /* Form card: fixed width, centered */
  .cta-section__right {
    flex: 0 0 auto;
    width: 750px;
    max-width: 100%;
    align-self: center;
  }

  .cta-section .divbg-white {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .cta-section {
    padding: 60px 24px;
  }

  /* Shadow removed — bleeds onto footer on mobile */
  .cta-section__bg {
    box-shadow: none;
  }

  /* Glow positioned for desktop only — hide on mobile to prevent overflow */
  .cta-section__glow {
    display: none;
  }

  .cta-section__copy-title {
    font-size: var(--fs-24);
  }

  .cta-section__copy-sub {
    font-size: var(--fs-20);
  }

  .cta-section__bttn-text {
    font-size: var(--fs-24);
    line-height: 1.4;
    white-space: normal;
  }

  .cta-section__bttn-glow {
    width: 600px;
    height: 192px;
  }

  /* Scale tagline to match the actual text size in SVG (viewBox 1456×151,
     cap-height ≈ 63 SVG units, section padding 24px → formula: 3.8vw - 0.5px).
     Exact match verified across the 375–1024px range. */
  .cta-section__tagline {
    font-size: clamp(15px, 4.5vw, 52px);
  }
}

/* ≤ 640px */
@media (max-width: 640px) {
  .cta-section {
    padding: 40px 24px;
    gap: 24px;
  }

  .cta-section__copy-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .cta-section__copy-sub {
    font-size: 15px;
    line-height: 1.5;
  }

  .cta-section__bttn-text {
    font-size: 20px;
  }

  .cta-section .divgrid {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-section .div-1,
  .cta-section .div-2,
  .cta-section .div-3,
  .cta-section .div-4 {
    flex: 0 0 auto;
    width: 100%;
  }

  .cta-section .i-have-read-and-accept-the {
    white-space: normal;
  }
}

/* ≤ 430px — compact small phones */
@media (max-width: 430px) {
  .cta-section {
    padding: 36px 20px;
  }

  .cta-section__copy-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .cta-section__copy-sub {
    font-size: 14px;
    line-height: 1.5;
  }

  .cta-section__bttn-text {
    font-size: 18px;
  }

  .cta-section .divbg-white {
    padding: 24px 16px;
  }
}

/* ≤ 375px — small phones */
@media (max-width: 375px) {
  .cta-section__copy-title {
    font-size: 14px;
    line-height: 1.45;
  }

  .cta-section__copy-sub {
    font-size: 13px;
    line-height: 1.5;
  }

  .cta-section__bttn-text {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KNIFE-SWITCH ANIMATION — Electricity theme
   Sequence (delays from when .cta-section--active is added):
     950ms  — bttn icon "throws" like a knife switch lever
     1050ms — atmospheric glow flares at the contact point
     1200ms — arc spark crosses the 64px gap left → right
     1450ms — right card powers on with neon-tube flicker
   Left block enters via existing scroll-reveal (data-reveal="left").
   Timings coordinated: left block fully visible by ~1050ms.
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */

/* Switch lever thrown downward — pivot at top, spring bounce */
@keyframes knife-throw {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(44deg); }
  70%  { transform: rotate(35deg); }
  85%  { transform: rotate(41deg); }
  100% { transform: rotate(38deg); }
}

/* Atmospheric glow behind bttn flares at moment of contact.
   Must include base translate(-50%,-50%) since animation overrides CSS transform. */
@keyframes glow-flare {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.75; filter: brightness(1); }
  45%  { transform: translate(-50%, -50%) scale(1.38); opacity: 1;    filter: brightness(1.7) saturate(1.3); }
  75%  { transform: translate(-50%, -50%) scale(1.1);  opacity: 0.92; filter: brightness(1.1); }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.75; filter: brightness(1); }
}

/* Arc spark grows left→right across the 64px flex gap.
   No fill-mode → snaps back to width:0 (disappears) after traversal. */
@keyframes arc-cross {
  0%   { width: 0;    box-shadow: none; }
  40%  { width: 25px; box-shadow:  6px 0 14px 5px rgba(74, 180, 255, 0.95),
                                   6px 0 32px 9px rgba(24, 129, 225, 0.5); }
  78%  { width: 64px; box-shadow:  3px 0  8px 3px rgba(74, 180, 255, 0.35); }
  100% { width: 64px; box-shadow: none; }
}

/* Arc spark grows top→bottom across the vertical gap (stacked layout). */
@keyframes arc-cross-v {
  0%   { height: 0;    box-shadow: none; }
  40%  { height: 14px; box-shadow: 0  6px 14px 5px rgba(74, 180, 255, 0.95),
                                   0  6px 32px 9px rgba(24, 129, 225, 0.50); }
  78%  { height: 32px; box-shadow: 0  3px  8px 3px rgba(74, 180, 255, 0.35); }
  100% { height: 32px; box-shadow: none; }
}

/* Right card: neon-tube flicker → stable power-on.
   Opacity moves forward only (no harsh dip).
   "Flicker" is done via brightness pulse — card stays visible,
   only the electric glow stutters. */
@keyframes card-power-on {
  0%   { opacity: 0;   filter: brightness(1)   drop-shadow(0 0  0 rgba( 74, 180, 255, 0   )); }
  18%  { opacity: 0.8; filter: brightness(1.55) drop-shadow(0 0 22px rgba( 74, 180, 255, 0.90))
                                                drop-shadow(0 0 44px rgba( 24, 129, 225, 0.45)); }
  28%  { opacity: 0.7; filter: brightness(0.80) drop-shadow(0 0  6px rgba( 74, 180, 255, 0.25)); }
  55%  { opacity: 1;   filter: brightness(1.35) drop-shadow(0 0 26px rgba( 74, 180, 255, 0.75))
                                                drop-shadow(0 0 52px rgba( 24, 129, 225, 0.35)); }
  78%  { opacity: 1;   filter: brightness(1)    drop-shadow(0 0  8px rgba( 74, 180, 255, 0.18)); }
  100% { opacity: 1;   filter: brightness(1)    drop-shadow(0 0  0 rgba( 74, 180, 255, 0   )); }
}

/* ── Primed: right block hidden until animation plays ─────────── */

.cta-section--primed .cta-section__right {
  opacity: 0;
}

/* ── Active: trigger all animations with sequenced delays ─────── */

/* 1 — Knife switch throw: icon pivots from top */
.cta-section--active .cta-section__bttn-icon-wrap {
  transform-origin: center top;
  animation: knife-throw 0.55s cubic-bezier(0.2, 0, 0.3, 1) 950ms both;
}

/* 2 — Glow flares at contact point (no fill → hover still works after) */
.cta-section--active .cta-section__bttn-glow {
  animation: glow-flare 0.65s ease-out 1050ms;
}

/* 3 — Arc spark traverses the gap (no fill → disappears after) */
.cta-section--active .cta-section__left::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 32px; /* approx bttn vertical center */
  height: 2px;
  background: linear-gradient(to right, rgba(74, 180, 255, 0.85), rgba(24, 129, 225, 0.5));
  animation: arc-cross 0.32s ease-out 1200ms;
}

/* 4 — Right card powers on with neon-tube flicker */
.cta-section--active .cta-section__right {
  animation: card-power-on 0.8s ease-out 1450ms both;
}

/* ── Vertical arc on stacked layout (gap is now vertical) */
@media (max-width: 1850px) {
  .cta-section--active .cta-section__left::after {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(74, 180, 255, 0.85), rgba(24, 129, 225, 0.5));
    animation: arc-cross-v 0.32s ease-out 1200ms;
  }
}

/* ── Reduced motion: instant reveal, no electricity effects ─────── */
@media (prefers-reduced-motion: reduce) {
  .cta-section--primed .cta-section__right            { opacity: 1; }
  .cta-section--active .cta-section__right            { animation: none; }
  .cta-section--active .cta-section__bttn-icon-wrap   { animation: none; }
  .cta-section--active .cta-section__bttn-glow        { animation: none; }
  .cta-section--active .cta-section__left::after      { display: none; }
}