/* ==========================================================================
   ViralMag Demo Page 2026 — Stripe-Inspired Design System & Styles
   ========================================================================== */

.demoHero {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--space-5) clamp(4rem, 6vw, 6rem);
  background: radial-gradient(circle at 75% 20%, rgba(31, 107, 69, 0.14) 0%, rgba(31, 107, 69, 0.02) 65%, transparent 85%),
              radial-gradient(circle at 20% 80%, rgba(31, 107, 69, 0.08) 0%, rgba(31, 107, 69, 0.01) 60%, transparent 80%),
              var(--background);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .demoHero {
  background: radial-gradient(circle at 75% 20%, rgba(62, 207, 122, 0.16) 0%, rgba(62, 207, 122, 0.03) 65%, transparent 90%),
              radial-gradient(circle at 20% 80%, rgba(62, 207, 122, 0.08) 0%, rgba(62, 207, 122, 0.01) 60%, transparent 85%),
              var(--background);
}

.demoHeroInner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .demoHeroInner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Left Hero Content Column */
.demoHeroContent {
  display: flex;
  flex-direction: column;
}

.demoHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  width: fit-content;
  text-transform: uppercase;
}

.demoHeroBadge .badgeDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
  animation: pulseDemoDot 2s infinite ease-in-out;
}

@keyframes pulseDemoDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.demoHeroTitle {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--foreground);
}

.headingAccent {
  background: linear-gradient(135deg, var(--primary) 0%, #298254 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

[data-theme="dark"] .headingAccent {
  background: linear-gradient(135deg, #3ecf7a 0%, #a3e635 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.demoHeroSub {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted-foreground);
  margin: 0 0 2.25rem;
  line-height: 1.6;
  font-weight: 400;
}

/* Bullet Points / Highlights */
.demoHighlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.demoHighlightItem {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.demoIconBadge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  border: 1px solid var(--primary-soft-border);
}

.demoHighlightText {
  font-size: var(--text-base);
  color: var(--foreground);
  line-height: 1.5;
  font-weight: 500;
}

.demoHighlightText strong {
  font-weight: 600;
}

/* Trust Preview Box */
.demoTrustBox {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.demoTrustAvatars {
  display: flex;
  align-items: center;
}

.demoAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--card);
  margin-left: -10px;
  object-fit: cover;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
}

.demoAvatar:first-child {
  margin-left: 0;
}

.demoTrustText {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.4;
}

.demoTrustText strong {
  color: var(--foreground);
}


/* Right Column: Stripe-Style Form Card */
.demoFormCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demoFormCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, #298254 50%, var(--primary-hover) 100%);
}

[data-theme="dark"] .demoFormCard::before {
  background: linear-gradient(90deg, #3ecf7a 0%, #298254 50%, #a3e635 100%);
}

.demoFormHeader {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demoFormTitle {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.35rem;
}

.demoFormSubtitle {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: 0;
}

.demoStepBadge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 500;
}

.demoFormGrid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.formGroupRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 580px) {
  .formGroupRow {
    grid-template-columns: 1fr;
  }
}

.demoLabel {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demoLabelOptional {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted-foreground);
}

.demoInput, .demoSelect {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-base);
  font-family: var(--font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.demoInput:focus, .demoSelect:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  background: var(--card);
}

.demoInput::placeholder {
  color: var(--muted-foreground);
  opacity: 0.6;
}

/* Goal Selector Pills */
.goalPillsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.goalPillBtn {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.goalPillBtn:hover {
  border-color: var(--primary-soft-border);
  color: var(--foreground);
  background: var(--muted);
}

.goalPillBtn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* Form Error & Honeypot */
.formErrorText {
  font-size: var(--text-xs);
  color: var(--destructive);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Honeypot field (hidden from view) */
.hpField {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.demoSubmitBtn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.demoSubmitBtn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.demoSubmitBtn:active {
  transform: translateY(0);
}

.demoSubmitBtn svg {
  transition: transform 0.2s ease;
}

.demoSubmitBtn:hover svg {
  transform: translateX(4px);
}

.demoFormFooterTrust {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  flex-wrap: wrap;
}

.demoTrustItem {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}


/* ==========================================================================
   Section 2: Interactive Product Sandbox / Simulator Section
   ========================================================================== */

.demoSandboxSection {
  padding: clamp(4rem, 7vw, 6.5rem) var(--space-5);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.sandboxContainer {
  max-width: 1140px;
  margin: 0 auto;
}

.sectionHeaderCenter {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}

.sectionTagline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

.sectionTitle {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  color: var(--foreground);
}

.sectionDesc {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--muted-foreground);
  line-height: 1.55;
  margin: 0;
}

/* Sandbox Tabs Bar */
.sandboxNavTabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.sandboxTabBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sandboxTabBtn:hover {
  border-color: var(--primary-soft-border);
  color: var(--foreground);
  background: var(--muted);
}

.sandboxTabBtn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(31, 107, 69, 0.12);
}

/* Interactive Canvas Card */
.sandboxCanvasCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.canvasTopBar {
  padding: 0.9rem 1.5rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.windowDots {
  display: flex;
  gap: 6px;
}

.windowDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.windowDot.red { background: #ff5f56; }
.windowDot.yellow { background: #ffbd2e; }
.windowDot.green { background: #27c93f; }

.canvasUrlBar {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  background: var(--background);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.canvasStatusBadge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pulseDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulseDemoDot 1.5s infinite ease-in-out;
}

/* Tab Panels Container */
.sandboxTabPanels {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  min-height: 400px;
}

.sandboxPanel {
  display: none;
  animation: fadeInPanel 0.3s ease;
}

.sandboxPanel.active {
  display: block;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.panelGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 840px) {
  .panelGrid {
    grid-template-columns: 1fr;
  }
}

.panelLeft {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.panelTag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.panelTitle {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0;
  color: var(--foreground);
  line-height: 1.25;
}

.panelBody {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

.panelMetricPills {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.metricPill {
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  background: var(--background);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metricVal {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--foreground);
}

.metricLabel {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* Panel Right Mockup Visuals */
.panelMockupBox {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}

.scriptBoxMock {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  background: var(--card);
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.scriptLine {
  margin-bottom: 0.5rem;
}

.scriptLine:last-child { margin-bottom: 0; }

.actorGridMock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.actorCardMock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
  font-size: var(--text-xs);
}

.actorCardMock.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.actorAvatarMock {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--muted);
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary);
}


/* ==========================================================================
   Section 3: How the Live Demo Works (3-Step Timeline)
   ========================================================================== */

.demoProcessSection {
  padding: clamp(4rem, 7vw, 6.5rem) var(--space-5);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.processGrid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

@media (max-width: 860px) {
  .processGrid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.processCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.processCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-soft-border);
}

.processNumber {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--primary-soft-border);
}

.processTitle {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.75rem;
}

.processDesc {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================================================
   Section 4: Why Teams Choose ViralMag (Feature Cards)
   ========================================================================== */

.demoFeaturesSection {
  padding: clamp(4rem, 7vw, 6.5rem) var(--space-5);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.featuresGrid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .featuresGrid {
    grid-template-columns: 1fr;
  }
}

.featureCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.featureCard:hover {
  transform: translateY(-2px);
  border-color: var(--primary-soft-border);
}

.featureIconBox {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-soft-border);
}

.featureTitle {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.5rem;
}

.featureDesc {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================================================
   Section 5: Customer Proof & Testimonials
   ========================================================================== */

.demoProofSection {
  padding: clamp(4rem, 7vw, 6.5rem) var(--space-5);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.testimonialGrid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .testimonialGrid {
    grid-template-columns: 1fr;
  }
}

.testimonialCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.testimonialMetricBadge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  width: fit-content;
  margin-bottom: 1.25rem;
  border: 1px solid var(--primary-soft-border);
}

.testimonialQuote {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--foreground);
  font-style: italic;
  margin: 0 0 1.5rem;
}

.testimonialAuthor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.authorAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary);
}

.authorName {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}

.authorRole {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin: 0;
}


/* ==========================================================================
   Section 6: Demo FAQ Accordion
   ========================================================================== */

.demoFaqSection {
  padding: clamp(4rem, 7vw, 6.5rem) var(--space-5);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.faqContainer {
  max-width: 860px;
  margin: 0 auto;
}

.demoFaqList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faqItem {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faqItem[open] {
  border-color: var(--primary-soft-border);
}

.faqSummary {
  padding: 1.35rem 1.5rem;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faqSummary::-webkit-details-marker {
  display: none;
}

.faqIcon {
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
  transition: transform 0.2s ease, color 0.2s ease;
}

.faqItem[open] .faqIcon {
  transform: rotate(180deg);
  color: var(--primary);
}

.faqContent {
  padding: 0 1.5rem 1.5rem;
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.6;
}

.faqContent p {
  margin: 0;
}


/* ==========================================================================
   Section 7: Bottom CTA Banner
   ========================================================================== */

.demoCtaSection {
  padding: clamp(4.5rem, 8vw, 7rem) var(--space-5);
  background: radial-gradient(circle at 50% 50%, rgba(31, 107, 69, 0.12) 0%, transparent 70%),
              var(--background);
  text-align: center;
}

[data-theme="dark"] .demoCtaSection {
  background: radial-gradient(circle at 50% 50%, rgba(62, 207, 122, 0.14) 0%, transparent 70%),
              var(--background);
}

.ctaInner {
  max-width: 780px;
  margin: 0 auto;
}

.ctaTitle {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  color: var(--foreground);
  line-height: 1.15;
}

.ctaDesc {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--muted-foreground);
  margin: 0 0 2.5rem;
  line-height: 1.55;
}

.ctaActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btnSecondaryLg {
  padding: 0.95rem 1.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btnSecondaryLg:hover {
  background: var(--muted);
  border-color: var(--primary-soft-border);
}