/* ==========================================================================
   Alternivite Design System — Components
   Buttons, cards, alerts, tables, badges, hero, CTA, FAQ, pricing,
   testimonials, feature cards, dividers, section headers, logo cloud,
   auth pages, legal pages, error page, frameworks, cookie consent
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Base button */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
   padding: var(--space-3) var(--space-6);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   line-height: var(--leading-normal);
   white-space: nowrap;
   border-radius: var(--radius-lg);
   transition: all var(--duration-normal) var(--ease-default);
   cursor: pointer;
   text-decoration: none;
   border: 1px solid transparent;
   user-select: none;
}

.btn:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
}

.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

/* Primary */
.btn-primary {
   background-color: var(--interactive-primary);
   color: var(--text-inverse);
   border-color: var(--interactive-primary);
}

.btn-primary:hover {
   background-color: var(--interactive-primary-hover);
   border-color: var(--interactive-primary-hover);
   box-shadow: var(--shadow-brand);
   transform: translateY(-1px);
}

.btn-primary:active {
   background-color: var(--interactive-primary-active);
   border-color: var(--interactive-primary-active);
   transform: translateY(0);
}

/* Secondary */
.btn-secondary {
   background-color: var(--interactive-secondary);
   color: var(--text-primary);
   border-color: var(--border-primary);
}

.btn-secondary:hover {
   background-color: var(--interactive-secondary-hover);
   border-color: var(--border-primary);
   transform: translateY(-1px);
}

.btn-secondary:active {
   background-color: var(--interactive-secondary-active);
   transform: translateY(0);
}

/* Outline */
.btn-outline {
   background-color: transparent;
   color: var(--interactive-primary);
   border-color: var(--interactive-primary);
}

.btn-outline:hover {
   background-color: var(--interactive-primary);
   color: var(--text-inverse);
   transform: translateY(-1px);
}

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

/* Ghost */
.btn-ghost {
   background-color: transparent;
   color: var(--text-secondary);
   border-color: transparent;
}

.btn-ghost:hover {
   background-color: var(--interactive-secondary);
   color: var(--text-primary);
}

/* Danger */
.btn-danger {
   background-color: var(--color-error-600);
   color: var(--text-inverse);
   border-color: var(--color-error-600);
}

.btn-danger:hover {
   background-color: var(--color-error-700);
   border-color: var(--color-error-700);
   box-shadow: var(--shadow-error);
   transform: translateY(-1px);
}

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

/* Button sizes */
.btn-sm {
   padding: var(--space-2) var(--space-4);
   font-size: var(--text-xs);
   border-radius: var(--radius-md);
}

.btn-lg {
   padding: var(--space-4) var(--space-8);
   font-size: var(--text-base);
   border-radius: var(--radius-xl);
}

.btn-xl {
   padding: var(--space-5) var(--space-10);
   font-size: var(--text-lg);
   border-radius: var(--radius-xl);
}

/* Icon-only button */
.btn-icon {
   padding: var(--space-3);
   border-radius: var(--radius-lg);
}

.btn-icon.btn-sm { padding: var(--space-2); }
.btn-icon.btn-lg { padding: var(--space-4); }

/* SVG inside buttons */
.btn svg {
   width: 1.25em;
   height: 1.25em;
   flex-shrink: 0;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

/* Base card */
.card {
   background-color: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-6);
   transition: all var(--duration-normal) var(--ease-default);
}

.card:hover {
   box-shadow: var(--shadow-lg);
   border-color: var(--border-primary);
}

/* Interactive card — lifts on hover */
.card-interactive:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-xl);
}

.card-interactive:focus-within {
   border-color: var(--border-focus);
   box-shadow: 0 0 0 2px var(--border-focus);
}

/* Elevated card — pre-shadowed */
.card-elevated {
   box-shadow: var(--shadow-md);
   border-color: transparent;
}

.card-elevated:hover {
   box-shadow: var(--shadow-xl);
}

/* Brand gradient card */
.card-brand {
   background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
   color: var(--text-inverse);
   border-color: transparent;
}

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

/* Card sub-components */
.card-header {
   padding: var(--space-6);
   border-bottom: 1px solid var(--border-secondary);
}

.card-body {
   padding: var(--space-6);
}

.card-footer {
   padding: var(--space-6);
   border-top: 1px solid var(--border-secondary);
}

/* Card icon */
.card-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--space-12);
   height: var(--space-12);
   border-radius: var(--radius-xl);
   background-color: var(--bg-brand-subtle);
   color: var(--text-brand);
   margin-bottom: var(--space-4);
}

.card-icon svg {
   width: var(--space-6);
   height: var(--space-6);
}

/* Card text */
.card-title {
   font-size: var(--text-lg);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.card-description {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
   padding: var(--space-4);
   border-radius: var(--radius-lg);
   border: 1px solid transparent;
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
}

.alert-icon {
   flex-shrink: 0;
   width: var(--space-5);
   height: var(--space-5);
   margin-top: var(--space-0-5);
}

.alert-content { flex: 1; }

.alert-title {
   font-weight: var(--font-semibold);
   margin-bottom: var(--space-1);
}

.alert-dismiss {
   flex-shrink: 0;
   padding: var(--space-1);
   color: inherit;
   opacity: 0.5;
   transition: opacity var(--duration-fast) var(--ease-default);
}

.alert-dismiss:hover { opacity: 1; }

/* Alert variants */
.alert-info {
   background-color: var(--bg-brand-subtle);
   color: var(--text-brand-strong);
   border-color: var(--color-primary-200);
}

[data-theme="dark"] .alert-info {
   border-color: var(--color-primary-800);
}

.alert-success {
   background-color: var(--bg-success-subtle);
   color: var(--text-success);
   border-color: var(--color-success-200);
}

[data-theme="dark"] .alert-success {
   border-color: var(--color-success-800);
}

.alert-warning {
   background-color: var(--bg-warning-subtle);
   color: var(--text-warning);
   border-color: var(--color-warning-200);
}

[data-theme="dark"] .alert-warning {
   border-color: var(--color-warning-800);
}

.alert-error {
   background-color: var(--bg-error-subtle);
   color: var(--text-error);
   border-color: var(--color-error-200);
}

[data-theme="dark"] .alert-error {
   border-color: var(--color-error-800);
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-wrapper {
   width: 100%;
   overflow-x: auto;
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
}

.table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
}

.table thead {
   background-color: var(--bg-secondary);
}

.table th {
   padding: var(--space-3) var(--space-4);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   text-align: left;
   white-space: nowrap;
   border-bottom: 1px solid var(--border-primary);
}

.table td {
   padding: var(--space-3) var(--space-4);
   color: var(--text-secondary);
   border-bottom: 1px solid var(--border-secondary);
}

.table tbody tr:last-child td {
   border-bottom: none;
}

.table tbody tr:hover {
   background-color: var(--bg-secondary);
}

.table-striped tbody tr:nth-child(even) {
   background-color: var(--bg-secondary);
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
   padding: var(--space-0-5) var(--space-2-5);
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   line-height: var(--leading-normal);
   border-radius: var(--radius-full);
   white-space: nowrap;
}

.badge-primary {
   background-color: var(--bg-brand-subtle);
   color: var(--text-brand);
}

.badge-secondary {
   background-color: var(--bg-secondary);
   color: var(--text-secondary);
   border: 1px solid var(--border-primary);
}

.badge-success {
   background-color: var(--bg-success-subtle);
   color: var(--text-success);
}

.badge-warning {
   background-color: var(--bg-warning-subtle);
   color: var(--text-warning);
}

.badge-error {
   background-color: var(--bg-error-subtle);
   color: var(--text-error);
}

.badge-brand {
   background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
   color: var(--text-inverse);
}

.badge-sm {
   padding: var(--space-0-5) var(--space-2);
   font-size: 0.6875rem;
}

.badge-lg {
   padding: var(--space-1) var(--space-3);
   font-size: var(--text-sm);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
   position: relative;
   padding: var(--space-20) 0 var(--space-16);
   overflow: hidden;
}

@media (min-width: 768px) {
   .hero { padding: var(--space-28) 0 var(--space-24); }
}

@media (min-width: 1024px) {
   .hero { padding: var(--space-32) 0; }
}

.hero-content {
   position: relative;
   z-index: 1;
   max-width: 720px;
}

.hero-center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

/* Hero badge pill */
.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1-5) var(--space-4);
   margin-bottom: var(--space-6);
   background-color: var(--bg-brand-subtle);
   color: var(--text-brand);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   border-radius: var(--radius-full);
   border: 1px solid var(--color-primary-200);
}

[data-theme="dark"] .hero-badge {
   border-color: var(--color-primary-800);
}

/* Hero title — responsive sizes */
.hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-extrabold);
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   color: var(--text-primary);
   margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
   .hero-title { font-size: var(--text-5xl); }
}

@media (min-width: 1024px) {
   .hero-title { font-size: var(--text-6xl); }
}

/* Gradient text highlight */
.hero-title-highlight {
   background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

[data-theme="dark"] .hero-title-highlight {
   background: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* Hero description */
.hero-description {
   font-size: var(--text-lg);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
   margin-bottom: var(--space-8);
   max-width: 560px;
}

.hero-center .hero-description {
   margin-left: auto;
   margin-right: auto;
}

@media (min-width: 768px) {
   .hero-description { font-size: var(--text-xl); }
}

/* Hero CTA buttons */
.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-4);
}

.hero-center .hero-actions {
   justify-content: center;
}

/* Hero image / illustration */
.hero-image {
   position: relative;
   margin-top: var(--space-12);
}

@media (min-width: 1024px) {
   .hero-image { margin-top: 0; }
}

/* Two-column hero layout */
.hero-split {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   align-items: center;
}

@media (min-width: 1024px) {
   .hero-split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
   }
}

.hero-illustration {
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-illustration svg {
   width: 100%;
   max-width: 500px;
   height: auto;
}

/* Hero background decoration — radial gradient */
.hero::before {
   content: "";
   position: absolute;
   top: -50%;
   right: -20%;
   width: 80%;
   height: 150%;
   background: radial-gradient(ellipse at center, var(--color-primary-100) 0%, transparent 70%);
   opacity: 0.5;
   pointer-events: none;
}

[data-theme="dark"] .hero::before {
   background: radial-gradient(ellipse at center, var(--color-primary-950) 0%, transparent 70%);
   opacity: 0.3;
}

/* ==========================================================================
   FAQ / ACCORDION
   ========================================================================== */

.faq-item {
   border-bottom: 1px solid var(--border-primary);
}

.faq-question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: var(--space-5) 0;
   font-size: var(--text-base);
   font-weight: var(--font-medium);
   color: var(--text-primary);
   text-align: left;
   gap: var(--space-4);
}

.faq-question:hover {
   color: var(--text-brand);
}

/* Chevron icon — rotates on open */
.faq-icon {
   flex-shrink: 0;
   width: var(--space-5);
   height: var(--space-5);
   color: var(--text-tertiary);
   transition: transform var(--duration-normal) var(--ease-default);
}

.faq-item-active .faq-icon {
   transform: rotate(180deg);
}

/* Answer — animated max-height */
.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--duration-slow) var(--ease-default);
}

.faq-item-active .faq-answer,
.faq-answer-open {
   max-height: 500px;
}

.faq-answer-content {
   padding-bottom: var(--space-5);
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
}

/* ==========================================================================
   PRICING CARD
   ========================================================================== */

.pricing-card {
   background-color: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-2xl);
   padding: var(--space-8);
   display: flex;
   flex-direction: column;
   transition: all var(--duration-normal) var(--ease-default);
}

.pricing-card:hover {
   box-shadow: var(--shadow-xl);
   transform: translateY(-4px);
}

/* Featured / recommended plan */
.pricing-card-featured {
   border-color: var(--color-primary-500);
   box-shadow: var(--shadow-brand-lg);
   position: relative;
   transform: scale(1.02);
}

@media (min-width: 768px) {
   .pricing-card-featured { transform: scale(1.05); }
}

.pricing-card-featured:hover {
   transform: scale(1.05) translateY(-4px);
}

/* "Most popular" badge */
.pricing-card-badge {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: var(--space-1) var(--space-4);
   background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
   color: var(--text-inverse);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   border-radius: var(--radius-full);
   white-space: nowrap;
}

.pricing-card-name {
   font-size: var(--text-lg);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.pricing-card-description {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   margin-bottom: var(--space-6);
}

/* Price display */
.pricing-card-price {
   display: flex;
   align-items: baseline;
   gap: var(--space-1);
   margin-bottom: var(--space-6);
}

.pricing-card-currency {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.pricing-card-amount {
   font-size: var(--text-5xl);
   font-weight: var(--font-extrabold);
   color: var(--text-primary);
   line-height: 1;
}

.pricing-card-period {
   font-size: var(--text-sm);
   color: var(--text-tertiary);
}

/* Feature list */
.pricing-card-features {
   flex: 1;
   margin-bottom: var(--space-8);
}

.pricing-card-feature {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
   padding: var(--space-2) 0;
   font-size: var(--text-sm);
   color: var(--text-secondary);
}

.pricing-card-feature svg {
   flex-shrink: 0;
   width: var(--space-5);
   height: var(--space-5);
   color: var(--color-success-500);
   margin-top: var(--space-0-5);
}

/* Disabled / unavailable feature */
.pricing-card-feature-disabled {
   color: var(--text-tertiary);
}

.pricing-card-feature-disabled svg {
   color: var(--text-tertiary);
}

/* CTA button — full width */
.pricing-card-cta {
   width: 100%;
}

/* ==========================================================================
   TESTIMONIAL CARD
   ========================================================================== */

.testimonial-card {
   background-color: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-6);
   display: flex;
   flex-direction: column;
}

.testimonial-stars {
   display: flex;
   gap: var(--space-1);
   margin-bottom: var(--space-4);
   color: var(--color-warning-400);
}

.testimonial-stars svg {
   width: var(--space-5);
   height: var(--space-5);
   fill: currentColor;
}

.testimonial-quote {
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
   flex: 1;
   margin-bottom: var(--space-6);
}

.testimonial-author {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding-top: var(--space-4);
   border-top: 1px solid var(--border-secondary);
}

.testimonial-avatar {
   width: var(--space-10);
   height: var(--space-10);
   border-radius: var(--radius-full);
   background-color: var(--bg-brand-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: var(--font-semibold);
   color: var(--text-brand);
   font-size: var(--text-sm);
   flex-shrink: 0;
}

.testimonial-name {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.testimonial-role {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

/* ==========================================================================
   FEATURE CARD — Large
   ========================================================================== */

.feature-card-lg {
   background-color: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-2xl);
   padding: var(--space-8);
   transition: all var(--duration-normal) var(--ease-default);
}

.feature-card-lg:hover {
   box-shadow: var(--shadow-lg);
   border-color: var(--color-primary-200);
}

[data-theme="dark"] .feature-card-lg:hover {
   border-color: var(--color-primary-800);
}

.feature-card-lg-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--space-14);
   height: var(--space-14);
   border-radius: var(--radius-xl);
   background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
   color: var(--text-inverse);
   margin-bottom: var(--space-5);
}

.feature-card-lg-icon svg {
   width: var(--space-7);
   height: var(--space-7);
}

.feature-card-lg-title {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

.feature-card-lg-description {
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
   color: var(--text-secondary);
}

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.divider {
   height: 1px;
   background-color: var(--border-primary);
   border: none;
   margin: var(--space-8) 0;
}

.divider-light {
   background-color: var(--border-secondary);
}

/* ==========================================================================
   SECTION HEADER — Reusable centered header pattern
   ========================================================================== */

.section-header {
   text-align: center;
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
   .section-header { margin-bottom: var(--space-16); }
}

.section-header .badge {
   margin-bottom: var(--space-4);
}

.section-header h2 {
   margin-bottom: var(--space-4);
}

.section-header p {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* ==========================================================================
   CTA BANNER
   ========================================================================== */

.cta-banner {
   background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
   color: var(--text-inverse);
   border-radius: var(--radius-2xl);
   padding: var(--space-12) var(--space-8);
   text-align: center;
}

@media (min-width: 768px) {
   .cta-banner { padding: var(--space-16) var(--space-12); }
}

.cta-banner h2 {
   color: var(--text-inverse);
   margin-bottom: var(--space-4);
}

.cta-banner p {
   color: rgba(255, 255, 255, 0.85);
   font-size: var(--text-lg);
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: var(--space-8);
}

.cta-banner .btn {
   background-color: #ffffff;
   color: var(--color-primary-700);
   border-color: #ffffff;
}

.cta-banner .btn:hover {
   background-color: var(--color-primary-50);
   box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   LOGO CLOUD
   ========================================================================== */

.logo-cloud {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: var(--space-8) var(--space-12);
   opacity: 0.5;
}

.logo-cloud svg {
   height: var(--space-8);
   width: auto;
   color: var(--text-tertiary);
}

/* ==========================================================================
   COOKIE CONSENT — Fixed bottom banner
   ========================================================================== */

.cookie-consent {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: var(--z-toast);
   background-color: var(--bg-primary);
   border-top: 1px solid var(--border-primary);
   box-shadow: var(--shadow-2xl);
   padding: var(--space-5);
   transform: translateY(100%);
   transition: transform var(--duration-slow) var(--ease-out);
}

.cookie-consent-active {
   transform: translateY(0);
}

@media (min-width: 768px) {
   .cookie-consent {
      left: var(--space-5);
      right: auto;
      bottom: var(--space-5);
      max-width: 480px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-primary);
   }
}

.cookie-consent-title {
   font-size: var(--text-base);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.cookie-consent-text {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-4);
}

.cookie-consent-text a {
   color: var(--text-brand);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.cookie-consent-text a:hover {
   color: var(--text-brand-strong);
}

.cookie-consent-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
}

/* ==========================================================================
   AUTH PAGES — Login / Register
   ========================================================================== */

.auth-page {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - 80px);
   padding: var(--space-8) var(--space-4);
}

.auth-card {
   width: 100%;
   max-width: 420px;
   padding: var(--space-8);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
}

.auth-title {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   text-align: center;
   margin-bottom: var(--space-2);
}

.auth-subtitle {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   text-align: center;
   margin-bottom: var(--space-6);
}

.auth-form {
   margin-bottom: var(--space-4);
}

/* "or" divider between social and email */
.auth-divider {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin: var(--space-4) 0;
   color: var(--text-tertiary);
   font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
   content: "";
   flex: 1;
   height: 1px;
   background: var(--border-primary);
}

.auth-footer-text {
   text-align: center;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   margin-top: var(--space-6);
}

/* ==========================================================================
   LEGAL PAGES — Privacy, Terms, Cookies
   ========================================================================== */

.legal-page {
   max-width: 800px;
   margin: 0 auto;
}

.legal-page h1 {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.legal-page .legal-updated {
   font-size: var(--text-sm);
   color: var(--text-tertiary);
   margin-bottom: var(--space-8);
   padding-bottom: var(--space-6);
   border-bottom: 1px solid var(--border-primary);
}

/* Table of contents */
.legal-page .legal-toc {
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: var(--space-6);
   margin-bottom: var(--space-8);
}

.legal-page .legal-toc h2 {
   font-size: var(--text-lg);
   font-weight: var(--font-semibold);
   margin-bottom: var(--space-3);
}

.legal-page .legal-toc ol {
   list-style: decimal;
   padding-left: var(--space-5);
}

.legal-page .legal-toc li {
   margin-bottom: var(--space-2);
}

.legal-page .legal-toc a {
   font-size: var(--text-sm);
   color: var(--color-primary-600);
   text-decoration: none;
}

.legal-page .legal-toc a:hover {
   text-decoration: underline;
}

/* Legal section content */
.legal-section {
   margin-bottom: var(--space-8);
}

.legal-section h2 {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

.legal-section p {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-3);
}

.legal-section ul,
.legal-section ol {
   padding-left: var(--space-5);
   margin-bottom: var(--space-3);
}

.legal-section li {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-2);
}

/* ==========================================================================
   ERROR PAGE — 404
   ========================================================================== */

.error-page {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - 80px);
   text-align: center;
   padding: var(--space-8) var(--space-4);
}

.error-code {
   font-size: 120px;
   font-weight: var(--font-bold);
   color: var(--color-primary-200);
   line-height: 1;
   margin-bottom: var(--space-4);
}

[data-theme="dark"] .error-code {
   color: var(--color-primary-800);
}

.error-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

.error-message {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   margin-bottom: var(--space-8);
   max-width: 400px;
}

.error-actions {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
   justify-content: center;
}

/* ==========================================================================
   PAGE HERO (used on services, frameworks, solutions pages)
   ========================================================================== */

.page-hero {
   padding: var(--space-20) 0 var(--space-16);
   text-align: center;
}

.page-hero-content {
   max-width: 720px;
   margin: 0 auto;
}

.page-hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   line-height: var(--leading-tight);
   color: var(--text-primary);
   margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
   .page-hero-title { font-size: var(--text-5xl); }
}

.page-hero-subtitle {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   max-width: 640px;
   margin: 0 auto;
}

/* ==========================================================================
   CARD TEXT (used on solutions page)
   ========================================================================== */

.card-text {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-top: var(--space-3);
}

/* ==========================================================================
   SECTION CTA (used on contact, resources pages)
   ========================================================================== */

.section-cta {
   padding: var(--space-20) 0;
   text-align: center;
}

/* ==========================================================================
   BADGE VARIANTS (BEM-style, used on frameworks page)
   ========================================================================== */

.badge--blue {
   background: var(--color-primary-100);
   color: var(--color-primary-700);
}

.badge--green {
   background: var(--color-success-100);
   color: var(--color-success-700);
}

[data-theme="dark"] .badge--blue {
   background: var(--color-primary-900);
   color: var(--color-primary-300);
}

[data-theme="dark"] .badge--green {
   background: var(--color-success-900);
   color: var(--color-success-300);
}