/* ===== Section: CTA ===== */
.s-cta{
  position:relative;
  background:var(--c-bg);
  padding-block:clamp(56px,8vw,104px);
  padding-inline:0;
}
.s-cta .cta-panel{
  position:relative;
  max-width:980px;
  margin-inline:auto;
  text-align:center;
  padding:clamp(36px,5.2vw,68px) clamp(20px,4.4vw,64px);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--c-secondary) 14%, transparent) 0%, transparent 64%),
    linear-gradient(180deg, var(--c-surface) 0%, color-mix(in srgb, var(--c-primary) 92%, #000) 100%);
  border:1px solid var(--c-secondary);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  isolation:isolate;
}
.s-cta .cta-panel::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid color-mix(in srgb, var(--c-secondary) 34%, transparent);
  border-radius:calc(var(--radius-lg) - 6px);
  pointer-events:none;
  z-index:0;
}
.s-cta .cta-mark{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-block-end:20px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--c-secondary) 55%, transparent);
  color:var(--c-secondary);
  background:color-mix(in srgb, var(--c-secondary) 10%, transparent);
}
.s-cta .cta-mark svg{color:inherit}
.s-cta .cta-title{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.55rem,3.6vw,2.6rem);
  line-height:1.35;
  letter-spacing:.045em;
  color:var(--c-text);
  text-wrap:balance;
}
.s-cta .cta-text{
  position:relative;
  z-index:1;
  margin:0 auto 32px;
  max-width:58ch;
  font-family:var(--font-body);
  font-size:clamp(.98rem,1.5vw,1.125rem);
  line-height:1.8;
  color:var(--c-muted);
  text-wrap:pretty;
}
.s-cta .cta-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 42px;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--c-primary);
  background:linear-gradient(180deg, var(--c-accent) 0%, var(--c-secondary) 100%);
  border:1px solid var(--c-secondary);
  border-radius:var(--radius);
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--c-secondary) 70%, transparent);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.s-cta .cta-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 16px 34px -14px color-mix(in srgb, var(--c-secondary) 85%, transparent);
}
.s-cta .cta-btn:active{transform:translateY(0)}
.s-cta .cta-btn:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
}

@media (max-width:900px){
  .s-cta .cta-panel{padding:40px 28px}
  .s-cta .cta-mark{width:56px;height:56px;margin-block-end:16px}
}
@media (max-width:600px){
  .s-cta{padding-block:48px}
  .s-cta .cta-panel{padding:32px 18px;border-radius:var(--radius)}
  .s-cta .cta-panel::after{inset:6px;border-radius:calc(var(--radius) - 4px)}
  .s-cta .cta-title{letter-spacing:.02em}
  .s-cta .cta-text{margin-block-end:26px;line-height:1.75}
  .s-cta .cta-btn{width:100%;max-width:340px;padding-inline:24px}
}
@media (prefers-reduced-motion:reduce){
  .s-cta .cta-btn{transition:none}
  .s-cta .cta-btn:hover{transform:none}
}