/* =====================================================
   COMPONENTS - Reusable Atoms & Buttons
   Extracted from style.css for modularity
   ===================================================== */

/* =====================================================
   BOX ATOM - Unified callout/alert box component
   Modifiers: --warning, --info, --primary, --plain
   ===================================================== */

/* Base box + legacy aliases (all share same base styles) */
.box,
.highlight-box,
.info-box,
.risk-box,
.quiz-box,
.process-box {
  background: var(--color-bg-alt, #FAFAF5);
  padding: var(--spacing-md, 24px);
  margin: var(--spacing-md, 24px) 0;
  border-left: 4px solid var(--color-text-main, #1a1a1a);
}

.box p,
.highlight-box p,
.info-box p,
.risk-box p,
.quiz-box p,
.process-box p {
  margin: 0 0 var(--spacing-sm, 16px) 0;
  line-height: 1.7;
}

.box p:last-child,
.highlight-box p:last-child,
.info-box p:last-child,
.risk-box p:last-child,
.quiz-box p:last-child,
.process-box p:last-child {
  margin-bottom: 0;
}

.box strong:first-child {
  display: block;
  margin-bottom: var(--spacing-xs, 8px);
}

/* Highlight-box specific: bold text */
.highlight-box p {
  font-weight: 600;
}

/* Warning variant (red accent) */
.box--warning,
.risk-box {
  border-left-color: var(--color-warning, #dc2626);
  background: linear-gradient(to right, rgba(var(--color-warning-rgb, 220, 38, 38), 0.05), transparent);
}

.box--warning strong:first-child,
.risk-box strong:first-child {
  color: var(--color-warning, #dc2626);
}

/* Info variant (blue accent, dashed) */
.box--info,
.quiz-box {
  border-left-color: var(--color-info, #2563eb);
  background: linear-gradient(to right, rgba(var(--color-info-rgb, 37, 99, 235), 0.05), transparent);
  border-left-style: dashed;
}

.box--info strong:first-child,
.quiz-box strong:first-child {
  color: var(--color-info, #2563eb);
}

/* Primary variant (brand color) */
.box--primary,
.process-box {
  border-left-color: var(--color-primary, #1A1A1A);
  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 26, 26, 26), 0.05), transparent);
}

.box--primary strong:first-child,
.process-box strong:first-child {
  color: var(--color-primary, #1A1A1A);
}

/* Plain variant (no border, clean spacing) */
.box--plain,
.callout-box {
  border-left: none;
  background: transparent;
  padding: var(--spacing-md, 24px) 0;
}

.callout-box p {
  color: var(--color-text-secondary, #525252);
}

/* =====================================================
   PILL/BADGE ATOM - Unified label/tag component
   Modifiers: --accent, --sm, --bordered
   ===================================================== */

/* Base pill (subtle background, rounded) */
.pill,
.section-label,
.step-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(var(--color-text-main-rgb, 0, 0, 0), 0.05);
  color: var(--color-text-secondary, #525252);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
}

/* Accent variant */
.pill--accent {
  background: var(--color-accent, #FABC1C);
  color: var(--color-accent-text, #1A1A1A);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero badge */
.hero-badge {
  background: #ff833e;
  color: white;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 2px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px;
}

/* Small variant */
.pill--sm,
.step-badge {
  padding: 4px 12px;
  border-radius: 12px;
}

/* Bordered variant (legacy .badge) */
.pill--bordered,
.badge {
  background: transparent;
  border: 2px solid var(--color-border, #1A1A1A);
  color: var(--color-text-main, #1a1a1a);
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 16px);
  font-weight: 700;
  border-radius: 0;
}

/* =====================================================
   QUOTE ATOM - Unified blockquote/pullquote component
   Modifiers: --highlight, --pull, --light
   ===================================================== */

/* Base quote + legacy aliases */
.quote,
.blockquote,
.phase-quote {
  border-left: 4px solid var(--color-accent, #FABC1C);
  padding-left: var(--spacing-md, 24px);
  margin: var(--spacing-md, 24px) 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-secondary, #525252);
  line-height: 1.5;
}

/* Highlight variant (thinner, subtle) */
.quote--highlight,
.quote-highlight {
  border-left-width: 3px;
  padding-left: var(--spacing-sm, 16px);
  margin: var(--spacing-sm, 16px) 0;
}

/* Pull variant (centered, bordered top/bottom) */
.quote--pull,
.pullquote {
  border-left: none;
  padding-left: 0;
  text-align: center;
  font-size: 1.25em;
  color: var(--color-text-main);
  padding: var(--spacing-xl, 48px) var(--spacing-md, 24px);
  margin: var(--spacing-xl, 48px) 0;
  border-top: 3px solid var(--color-accent, #FABC1C);
  border-bottom: 3px solid var(--color-accent, #FABC1C);
  background: var(--color-bg-alt, #FAFAF5);
}

.quote--pull p,
.pullquote p {
  margin: 0;
  line-height: 1.6;
}

/* Light variant (for dark backgrounds) */
.quote--light,
.blockquote-light {
  border-left-color: #fff;
  color: #ccc;
}

/* =====================================================
   ACCORDION ICON
   ===================================================== */

.accordion-icon {
  color: var(--color-text-secondary);
  margin-right: 8px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.accordion-item.active .accordion-icon {
  transform: rotate(90deg);
}

/* =====================================================
   BUTTONS (V3 Design System)
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--color-primary, #1A1A1A);
  color: var(--color-text-inverse, #FFFFFF);
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base, 0.35s cubic-bezier(0.23, 1, 0.32, 1));
  box-shadow: var(--shadow-md);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-shine);
  opacity: 0;
  transition: opacity var(--transition-fast, 0.2s);
}

.btn:hover::before {
  opacity: 1;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent, #FABC1C);
  outline-offset: 3px;
}

/* --- Button Variants --- */

.btn-primary {
  background: var(--color-primary, #1A1A1A);
  color: var(--color-text-inverse, #FFFFFF);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--gradient-accent);
  color: var(--color-accent-text, #1A1A1A);
  box-shadow: var(--shadow-sm);
}

.btn-accent:hover {
  box-shadow: var(--shadow-accent);
}

.btn-warm {
  background: var(--gradient-warm);
  color: var(--color-text-inverse, #FFFFFF);
  box-shadow: var(--shadow-sm);
}

.btn-warm:hover {
  box-shadow: 0 4px 14px rgba(255, 102, 17, 0.3), 0 8px 28px rgba(255, 102, 17, 0.2);
}

.btn-soft {
  background: var(--color-accent-soft, #FFA7A7);
  color: var(--color-primary, #1A1A1A);
  box-shadow: var(--shadow-sm);
}

.btn-soft:hover {
  box-shadow: 0 4px 14px rgba(255, 167, 167, 0.4), 0 8px 28px rgba(255, 167, 167, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary, #1A1A1A);
  border: 2px solid var(--color-primary, #1A1A1A);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--color-primary, #1A1A1A);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--transition-base, 0.35s cubic-bezier(0.23, 1, 0.32, 1));
  z-index: 0;
}

.btn-secondary:hover {
  color: var(--color-text-inverse, #FFFFFF);
  box-shadow: none;
}

.btn-secondary:hover::after {
  transform: scaleY(1);
}

.btn-secondary>* {
  position: relative;
  z-index: 1;
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary, #1A1A1A);
  box-shadow: none;
  position: relative;
}

.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--color-accent, #FABC1C);
  transform: scaleX(1);
  transform-origin: left;
  transition: background var(--transition-base, 0.35s);
}

.btn-ghost:hover {
  box-shadow: none;
  transform: none;
}

.btn-ghost:hover::after {
  background: var(--color-text-main, #1A1A1A);
}

.btn-hero-outline {
  background: transparent;
  color: var(--color-text-inverse, #FFFFFF);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

.btn-hero-outline:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.btn-hero-solid {
  background: #FFFFFF;
  color: var(--color-primary, #1A1A1A);
  box-shadow: var(--shadow-sm);
}

.btn-hero-solid:hover {
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-inverse, #FFFFFF);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* --- Button Sizes --- */

.btn-sm {
  padding: 9px 18px;
  font-size: var(--text-xs, 0.64rem);
  border-radius: 6px;
  gap: 6px;
}

.btn-lg {
  padding: 18px 38px;
  font-size: var(--text-base, 1rem);
  border-radius: var(--radius-md, 12px);
  gap: 12px;
}

.btn-pill {
  border-radius: 100px;
}

/* --- Legacy / Layout Variants --- */

.btn-light {
  background: var(--gradient-accent);
  color: var(--color-accent-text, #1A1A1A);
  border: none;
  width: 100%;
  margin-top: var(--spacing-md, 24px);
}

.btn-fullwidth {
  width: 100%;
  margin-top: var(--spacing-md, 24px);
}

/* =====================================================
   CUSTOM CURSOR - 2025 Trends Edition
   Mix-blend, magnetic, spring physics, contextual labels
   Desktop only - hidden on touch devices
   ===================================================== */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform, width, height, opacity;
}

.cursor-visible .cursor-dot,
.cursor-visible .cursor-ring {
  opacity: 1;
}

/* Inner dot — mix-blend-mode for universal visibility */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--color-text-main, #1a1a1a);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s ease,
    background 0.3s ease;
  mix-blend-mode: difference;
  background: #fff;
}

/* Outer ring — spring-like cubic-bezier */
.cursor-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(var(--color-text-main-rgb, 26, 26, 26), 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    opacity 0.3s ease,
    border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cursor label (contextual text inside ring) */
.cursor-label {
  position: absolute;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-bg, #fff);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- HOVER STATE: Accent-aware expand ---- */
.cursor-hover .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--color-accent, #FABC1C);
  background: rgba(var(--color-accent-rgb, 250, 188, 28), 0.15);
}

.cursor-hover .cursor-dot {
  width: 5px;
  height: 5px;
}

/* ---- CLICK STATE: Pulse scale ---- */
.cursor-clicking .cursor-ring {
  width: 32px;
  height: 32px;
  transition: width 0.1s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.1s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.1s ease,
    background 0.1s ease;
}

.cursor-clicking .cursor-dot {
  width: 6px;
  height: 6px;
}

/* ---- DRAG STATE: Grab indicator ---- */
.cursor-drag .cursor-ring {
  width: 70px;
  height: 70px;
  border-width: 1.5px;
  border-style: dashed;
  border-color: var(--color-text-main, #1a1a1a);
  background: rgba(var(--color-text-main-rgb, 26, 26, 26), 0.05);
}

.cursor-drag .cursor-dot {
  opacity: 0;
}

.cursor-drag .cursor-label {
  opacity: 1;
  transform: scale(1);
  color: var(--color-text-main, #1a1a1a);
}

/* ---- EXPAND STATE: For accordions ---- */
.cursor-expand .cursor-ring {
  width: 56px;
  height: 56px;
  background: var(--color-text-main, #1a1a1a);
  border-color: var(--color-text-main, #1a1a1a);
  border-width: 0;
}

.cursor-expand .cursor-dot {
  opacity: 0;
}

.cursor-expand .cursor-label {
  opacity: 1;
  transform: scale(1);
}

/* ---- INVERTED STATE: For dark sections ---- */
.cursor-invert .cursor-dot {
  background: #fff;
}

.cursor-invert .cursor-ring {
  border-color: rgba(255, 255, 255, 0.5);
}

.cursor-invert.cursor-hover .cursor-ring {
  border-color: var(--color-accent, #FABC1C);
  background: rgba(var(--color-accent-rgb, 250, 188, 28), 0.2);
}

.cursor-invert.cursor-expand .cursor-ring {
  background: #fff;
  border-color: #fff;
}

.cursor-invert.cursor-expand .cursor-label {
  color: var(--color-text-main, #1a1a1a);
}


.cursor-invert.cursor-drag .cursor-ring {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.cursor-invert.cursor-drag .cursor-label {
  color: #fff;
}

/* Hide default cursor when custom is active */
.cursor-visible,
.cursor-visible a,
.cursor-visible button,
.cursor-visible [role="button"],
.cursor-visible input[type="submit"],
.cursor-visible .accordion-item,
.cursor-visible .tcard {
  cursor: none !important;
}

/* Disable on touch & reduced motion */
@media (pointer: coarse) {

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* =====================================================
   PRICING CARDS (V3 Design System)
   ===================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: 3fr 3fr 2fr;
  gap: var(--spacing-lg);
}

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

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

.pricing-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  position: relative;
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Badge */
.pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  width: fit-content;
  margin-bottom: var(--spacing-lg);
  position: absolute;
  top: 0;
  left: var(--spacing-xl);
  transform: translateY(-50%);
  z-index: 1;
}

.pricing-badge--accent {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.pricing-badge--warm {
  background: var(--color-orange);
  color: #FFFFFF;
}

.pricing-badge--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* Pricing title + description */
.pricing-card h3 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--color-text-main);
}

.pricing-card .pricing-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: var(--spacing-lg);
}

/* Price display */
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}

.pricing-currency {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-muted);
  align-self: flex-start;
  margin-top: 0.6em;
}

.pricing-amount {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text-main);
}

.pricing-period {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.pricing-timeline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

/* CTA button — full width arrow */
.pricing-cta {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: linear-gradient(to bottom, var(--color-accent) 50%, var(--color-bg-dark) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-text-inverse);
  border: none;
  border-radius: 5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-position 0.5s var(--ease-premium), color 0.5s var(--ease-premium), box-shadow 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
  max-width: 500px;
  margin-bottom: 0;
}

.pricing-cta:hover {
  background-position: 0 0;
  color: var(--color-accent-text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.pricing-cta span:first-child {
  flex: 1;
  text-align: center;
}

.pricing-cta-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: background 0.5s var(--ease-premium), color 0.5s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.pricing-cta:hover .pricing-cta-arrow {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  transform: scale(1.08);
}

.pricing-cta-arrow svg {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}

.pricing-cta-arrow .arrow-out {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.pricing-cta-arrow .arrow-in {
  transform: translate(calc(-50% - 22px), calc(-50% + 22px));
  opacity: 0;
}

.pricing-cta:hover .pricing-cta-arrow .arrow-out {
  transform: translate(calc(-50% + 22px), calc(-50% - 22px));
  opacity: 0;
}

.pricing-cta:hover .pricing-cta-arrow .arrow-in {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Divider */
.pricing-divider {
  height: 2px;
  background: var(--color-text-main);
  border: none;
  margin-bottom: var(--spacing-lg);
}

/* Features list */
.pricing-features-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: var(--spacing-xs);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.pricing-features li svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Footer link */
.pricing-footer-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
  margin-top: auto;
}

.pricing-footer-link:hover {
  color: var(--color-accent-hot);
}

/* Quote block */
.pricing-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.pricing-quote strong {
  color: var(--color-accent-hot);
  font-weight: 600;
}

/* CTA Variant — accent (yellow → dark on hover) */
.pricing-cta--accent {
  background: linear-gradient(to bottom, var(--color-bg-dark) 50%, var(--color-accent) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-accent-text);
}

.pricing-cta--accent:hover {
  background-position: 0 0;
  color: var(--color-text-inverse);
  box-shadow: 0 8px 30px rgba(250, 188, 28, 0.3);
}

.pricing-cta--accent .pricing-cta-arrow {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.pricing-cta--accent:hover .pricing-cta-arrow {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

/* CTA Variant — outline (transparent → dark on hover) */
.pricing-cta--outline {
  background: linear-gradient(to bottom, var(--color-bg-dark) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-text-main);
  border: 2px solid var(--color-text-main);
  padding: 8px 10px;
}

.pricing-cta--outline:hover {
  background-position: 0 0;
  color: var(--color-text-inverse);
  border-color: var(--color-bg-dark);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.pricing-cta--outline .pricing-cta-arrow {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.pricing-cta--outline:hover .pricing-cta-arrow {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

/* Card Variants */
.pricing-card--premium {
  /* background: var(--color-bg-alt); */
  background: #FFFFFF;
}

.pricing-card--compact {
  padding: var(--spacing-lg);
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #ffa7a7, var(--color-accent)) border-box;
}

.pricing-card--compact h3 {
  margin-bottom: var(--spacing-sm);
}

/* =====================================================
   ARROW CTA BUTTONS (V3 Design System)
   ===================================================== */

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease-premium);
}

.btn-arrow .btn-arrow-text {
  position: relative;
  z-index: 1;
}

.btn-arrow .btn-arrow-icon {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-arrow .btn-arrow-icon svg {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium);
}

.btn-arrow .btn-arrow-icon .arrow-out {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.btn-arrow .btn-arrow-icon .arrow-in {
  transform: translate(calc(-50% - 20px), calc(-50% + 20px));
  opacity: 0;
}

.btn-arrow:hover .btn-arrow-icon .arrow-out {
  transform: translate(calc(-50% + 20px), calc(-50% - 20px));
  opacity: 0;
}

.btn-arrow:hover .btn-arrow-icon .arrow-in {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Arrow Variants */
.btn-arrow--primary {
  background: linear-gradient(to bottom, var(--color-accent) 50%, var(--color-bg-dark) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-text-inverse);
}

.btn-arrow--primary:hover {
  background-position: 0 0;
  color: var(--color-accent-text);
}

.btn-arrow--accent {
  background: linear-gradient(to bottom, var(--color-bg-dark) 50%, var(--color-accent) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-accent-text);
}

.btn-arrow--accent:hover {
  background-position: 0 0;
  color: var(--color-text-inverse);
}

.btn-arrow--outline {
  background: linear-gradient(to bottom, var(--color-bg-dark) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-text-main);
  border: 2px solid var(--color-text-main);
}

.btn-arrow--outline:hover {
  background-position: 0 0;
  color: var(--color-text-inverse);
}

.btn-arrow--warm {
  background: linear-gradient(to bottom, var(--color-bg-dark) 50%, var(--color-orange) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: #FFFFFF;
}

.btn-arrow--warm:hover {
  background-position: 0 0;
  color: var(--color-text-inverse);
}

.btn-arrow--hero {
  background: linear-gradient(to bottom, var(--color-accent) 50%, #FFFFFF 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: var(--color-text-main);
}

.btn-arrow--hero:hover {
  background-position: 0 0;
  color: var(--color-accent-text);
}

/* Arrow Sizes */
.btn-arrow.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
}

.btn-arrow.btn-sm .btn-arrow-icon {
  width: 16px;
  height: 16px;
}

.btn-arrow.btn-sm .btn-arrow-icon svg {
  width: 8px;
  height: 8px;
}

.btn-arrow.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
}

.btn-arrow.btn-lg .btn-arrow-icon {
  width: 24px;
  height: 24px;
}

.btn-arrow.btn-lg .btn-arrow-icon svg {
  width: 12px;
  height: 12px;
}

/* =====================================================
   AVAILABILITY CTA (V3 Design System)
   ===================================================== */

.btn-avail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  text-decoration: none;
  border-radius: 5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}

.btn-avail:hover {
  transform: translateY(-2px);
}

.btn-avail:active {
  transform: translateY(0);
}

.btn-avail-content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.btn-avail:has(.btn-avail-arrow) {
  padding: 6px 8px 6px 30px;
  column-gap: 12px;
}

.btn-avail:not(:has(.btn-avail-arrow)) .btn-avail-content {
  padding: 0.5rem 0.5rem;
  font-size: var(--text-base);
  gap: 0.75rem;
}

.btn-avail:not(:has(.btn-avail-arrow)) .btn-avail-dot {
  width: 10px;
  height: 10px;
}

/* Pulse dot */
.btn-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.btn-avail-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: avail-pulse 2s ease-in-out infinite;
}

@keyframes avail-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Arrow circle */
.btn-avail-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: background 0.35s var(--ease-premium);
}

.btn-avail-arrow svg {
  width: 10px;
  height: 10px;
  position: absolute;
  transition: transform 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium);
}

.btn-avail-arrow .arrow-out {
  transform: translate(0, 0);
  opacity: 1;
}

.btn-avail-arrow .arrow-in {
  transform: translate(-18px, 18px);
  opacity: 0;
}

.btn-avail:hover .btn-avail-arrow .arrow-out {
  transform: translate(18px, -18px);
  opacity: 0;
}

.btn-avail:hover .btn-avail-arrow .arrow-in {
  transform: translate(0, 0);
  opacity: 1;
}

/* Availability — Dark */
.btn-avail--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

.btn-avail--dark:hover {
  box-shadow: var(--shadow-hover);
}

.btn-avail--dark .btn-avail-dot {
  background: var(--color-green-pulse);
}

.btn-avail--dark .btn-avail-dot::after {
  background: var(--color-green-pulse);
}

.btn-avail--dark .btn-avail-arrow {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.btn-avail--dark:hover .btn-avail-arrow {
  background: var(--color-orange);
  color: #FFFFFF;
}

/* Availability — Accent */
.btn-avail--accent {
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-sm);
}

.btn-avail--accent:hover {
  box-shadow: var(--shadow-accent);
}

.btn-avail--accent .btn-avail-dot {
  background: var(--color-bg-dark);
}

.btn-avail--accent .btn-avail-dot::after {
  background: var(--color-bg-dark);
}

.btn-avail--accent .btn-avail-arrow {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.btn-avail--accent:hover .btn-avail-arrow {
  background: var(--color-primary-light);
}

/* Availability — Outline */
.btn-avail--outline {
  background: transparent;
  color: var(--color-text-main);
  border: 2px solid var(--color-border);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), background 0.4s var(--ease-premium), color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

.btn-avail--outline .btn-avail-dot {
  background: var(--color-green-pulse);
}

.btn-avail--outline .btn-avail-dot::after {
  background: var(--color-green-pulse);
}

.btn-avail--outline .btn-avail-arrow {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.btn-avail--outline:hover {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border-color: var(--color-bg-dark);
  box-shadow: var(--shadow-hover);
}

.btn-avail--outline:hover .btn-avail-arrow {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.btn-avail--outline:hover .btn-avail-dot {
  background: var(--color-green-pulse);
}

/* =====================================================
   LANGUAGE SWITCHER
   Navigation language toggle button
   ===================================================== */

/* Language switcher in navigation */
.nav-lang-switcher {
  display: flex;
  align-items: center;
}

.nav-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-accent, #FABC1C);
  color: var(--color-text-main, #1A1A1A);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 60px;
}

.nav-lang-link:hover {
  background: var(--color-accent, #FABC1C);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(250, 188, 28, 0.3);
}

.lang-code {
  font-family: var(--font-sans, 'Inter');
  letter-spacing: 0.05em;
}

/* Mobile menu language switcher */
.mobile-menu .nav-lang-switcher {
  margin-top: 16px;
  justify-content: center;
}

.mobile-menu .nav-lang-link {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 200px;
}