/*
Theme Name: CalculaHub
Theme URI: https://github.com/zhandid/web-math-builder
Author: CalculaHub
Author URI: https://github.com/zhandid
Description: Tema custom de WordPress para CalculaHub — calculadoras y resolvedor matematico online gratis en espanol. Migrado desde la aplicacion TanStack/React.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calculahub
Tags: calculator, math, spanish, custom-post-type, responsive
*/

/* ============================================================
   CSS Custom Properties (Design Tokens)
   Math-Tech Modern Design System
   ============================================================ */
:root {
  /* Radius - Math-Tech Modern */
  --radius-sm: 0.5rem;  /* 8px - Small elements */
  --radius: 0.75rem;   /* 12px - Standard (buttons, inputs, cards) */
  --radius-md: 0.75rem;  /* 12px - Medium */
  --radius-lg: 1rem;    /* 16px - Large (calculator shell, modals) */
  --radius-xl: 1.5rem;   /* 24px - Extra Large */
  --radius-full: 9999px;

  /* Spacing - Math-Tech Modern */
  --spacing-base: 8px;
  --spacing-gutter: 24px;
  --spacing-margin-desktop: 64px;
  --spacing-margin-mobile: 20px;
  --spacing-container-max: 1280px;
  --spacing-section-gap: 80px;

  /* Colors - Math-Tech Modern Palette */
  --surface: #ffffff;
  --surface-dim: #d8dadc;
  --surface-bright: #f7f9fb;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --on-surface: #191c1e;
  --on-surface-variant: #464555;
  --inverse-surface: #2d3133;
  --inverse-on-surface: #eff1f3;
  --outline: #777587;
  --outline-variant: #c7c4d8;
  --surface-tint: #4d44e4;
  
  /* Primary Colors */
  --primary: #3525ce;
  --on-primary: #ffffff;
  --primary-container: #4f46e6;
  --on-primary-container: #dbd8ff;
  --inverse-primary: #c3c0ff;
  --primary-fixed: #e2dfff;
  --primary-fixed-dim: #c3c0ff;
  --on-primary-fixed: #0f0069;
  --on-primary-fixed-variant: #3322cd;
  
  /* Secondary Colors */
  --secondary: #565e74;
  --on-secondary: #ffffff;
  --secondary-container: #dae2fd;
  --on-secondary-container: #5c647a;
  --secondary-fixed: #dae2fd;
  --secondary-fixed-dim: #bec6e0;
  --on-secondary-fixed: #131b2e;
  --on-secondary-fixed-variant: #3f465c;
  
  /* Tertiary Colors */
  --tertiary: #004f63;
  --on-tertiary: #ffffff;
  --tertiary-container: #006982;
  --on-tertiary-container: #a2e5ff;
  --tertiary-fixed: #b7eaff;
  --tertiary-fixed-dim: #6cd3f7;
  --on-tertiary-fixed: #001f28;
  --on-tertiary-fixed-variant: #004e61;
  
  /* Error Colors */
  --error: #dc2626;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  
  /* Background & Surface */
  --background: #f7f9fb;
  --on-background: #191c1e;
  --surface-variant: #e0e3e5;
  --border-subtle: #e2e4e9;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --success: #16a34a;

  /* Legacy compatibility */
  --foreground: var(--on-background);
  --card: var(--surface);
  --card-foreground: var(--on-surface);
  --popover: var(--surface);
  --popover-foreground: var(--on-surface);
  --primary-foreground: var(--on-primary);
  --brand: var(--primary);
  --brand-foreground: var(--on-primary);
  --secondary-foreground: var(--on-secondary);
  --muted: var(--surface-container-low);
  --muted-foreground: var(--on-surface-variant);
  --accent: var(--primary-fixed);
  --accent-foreground: var(--on-primary-fixed);
  --destructive: var(--error);
  --destructive-foreground: var(--on-error);
  --border: var(--border-subtle);
  --input: var(--border-subtle);
  --ring: var(--primary);

  /* Typography - Math-Tech Modern */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  
  /* Font Sizes */
  --font-size-headline-xl: 48px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 24px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-technical-md: 16px;
  --font-size-label-sm: 14px;
  --font-size-caption: 12px;
  --font-size-headline-xl-mobile: 32px;
  
  /* Line Heights */
  --line-height-headline-xl: 1.1;
  --line-height-headline-lg: 1.2;
  --line-height-headline-md: 1.3;
  --line-height-body-lg: 1.7;
  --line-height-body-md: 1.6;
  --line-height-technical-md: 1.5;
  --line-height-label-sm: 1.5;
  --line-height-caption: 1.4;
  
  /* Font Weights */
  --font-weight-headline-xl: 700;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-body-lg: 400;
  --font-weight-body-md: 400;
  --font-weight-technical-md: 500;
  --font-weight-label-sm: 600;
  --font-weight-caption: 500;
  
  /* Letter Spacing */
  --letter-spacing-headline: -0.02em;
  --letter-spacing-label-sm: 0.05em;
}

/* ============================================================
   Math-Tech Modern Special Effects
   ============================================================ */

/* Mathematical Grid Background */
.math-grid {
  background-image: radial-gradient(circle, var(--border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Make grid more subtle when there's a background image */
.hero--has-image.math-grid,
.hero--has-video.math-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

/* Glassmorphism Effect */
.glass-effect {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--glass-bg);
}

/* Material Symbols Icons */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: var(--font-weight-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fallback for fonts */
@supports not (font-family: 'Inter') {
  body {
    font-family: system-ui, -apple-system, sans-serif;
  }
}

@supports not (font-family: 'JetBrains Mono') {
  .technical-text,
  .formula-text,
  .calculator-input,
  .calculation-result {
    font-family: ui-monospace, monospace;
  }
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--letter-spacing-headline);
  font-weight: var(--font-weight-headline-lg);
  line-height: var(--line-height-headline-lg);
  font-family: var(--font-sans);
}

h1 { 
  font-size: var(--font-size-headline-xl);
  font-weight: var(--font-weight-headline-xl);
  line-height: var(--line-height-headline-xl);
}

h2 { 
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-headline-lg);
  line-height: var(--line-height-headline-lg);
}

h3 { 
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-headline-md);
  line-height: var(--line-height-headline-md);
}

/* Technical/Mathematical Text */
.technical-text,
.formula-text,
.calculator-input,
.calculation-result {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-technical-md);
  line-height: var(--line-height-technical-md);
}

/* Labels and Badges */
.label-text,
.badge-text,
.category-chip {
  font-family: var(--font-mono);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Layout
   ============================================================ */
.container-wrapper {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.container--narrow {
  max-width: 1200px;
}

.container--wide {
  max-width: 1400px;
}

/* ============================================================
   Site Header (SiteChrome) - Math-Tech Modern
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.site-header__inner {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header .container-wrapper {
  max-width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.site-header__left {
  flex-shrink: 0;
}

.site-header__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--letter-spacing-headline);
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header__logo:hover {
  color: var(--primary-container);
}

.site-header__logo-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--on-primary);
  font-size: 1.25rem;
}

/* Custom Logo Image - uses CSS variables from Customizer */
.site-header__logo--image {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.site-header__logo--image .custom-logo-img {
  height: var(--logo-max-height, 2.5rem) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block;
}

.site-header__logo-text {
  color: var(--foreground);
}

.site-header__logo-accent {
  color: var(--primary);
}

/* Theme Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0;
}

.theme-toggle:hover {
  background-color: var(--border);
}

/* Header Search Toggle */
.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
  padding: 0;
}

.header-search-toggle:hover {
  background-color: var(--border);
}

.header-search-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Header Search Box */
.header-search-box {
  position: relative;
  background: var(--surface-container-low);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 200px;
  max-width: 280px;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .header-search-box {
    min-width: 240px;
    max-width: 320px;
  }
}

.header-search-box:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-search-box--always-visible {
  display: flex;
}

.header-search-icon {
  color: var(--on-surface-variant);
  flex-shrink: 0;
  font-size: 1.25rem;
}

.header-search-input {
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  width: 100%;
}

.header-search-input::placeholder {
  color: var(--muted-foreground);
}

.header-search-box.active {
  display: flex;
}

.header-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  z-index: 100;
  text-align: left;
}

.header-search-results .card {
  padding: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* Search Results Items */
.hero__search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-radius: var(--radius);
  transition: background-color 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: var(--on-surface);
}

.hero__search-item:hover {
  background-color: var(--surface-container-low);
}

.hero__search-item p:first-child {
  font-size: var(--font-size-body-md);
  font-weight: 500;
  font-family: var(--font-sans);
}

.hero__search-item .desc {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
}

.hero__search-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--on-surface-variant);
}

.header-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  text-decoration: none;
}

.header-search-submit svg {
  width: 1.125rem;
  height: 1.125rem;
}

.theme-toggle__icon {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
}

.theme-toggle__icon svg {
  width: 100%;
  height: 100%;
}

/* Show sun in dark mode, moon in light mode */
html:not(.dark) .theme-toggle__icon--moon {
  display: block;
}

html.dark .theme-toggle__icon--sun {
  display: block;
}

/* Dark Mode Variables */
html.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --muted-foreground: #d4d4d8;
  --border: #27272a;
  --primary: #818cf8;
  --primary-foreground: #ffffff;
  --accent: #22d3ee;
  --header-bg: rgba(10, 10, 10, 0.95);
  --header-border: #27272a;
  --footer-bg: #0f0f0f;
  --hero-gradient-start: #1a1a2e;
  --hero-gradient-end: #16213e;
  --hero-title-color: #ffffff;
  --hero-accent-color: #818cf8;
  --calc-bg: #171717;
  --calc-border: #27272a;
  --calc-result: #818cf8;
}

/* Dark Mode Specific Improvements */
html.dark .card {
  background-color: #171717;
  border-color: #27272a;
}

html.dark .card--hoverable:hover {
  background-color: #1f1f23;
  border-color: #3f3f46;
}

html.dark .calculator-list__item {
  background-color: #171717;
  border-color: #27272a;
}

html.dark .calculator-list__item:hover {
  background-color: #1f1f23;
  border-color: #818cf8;
}

html.dark .calculator-list__title {
  color: #fafafa;
}

html.dark .calculator-list__desc {
  color: #d4d4d8;
}

html.dark .cat-card__name {
  color: #fafafa;
}

html.dark .cat-card__count {
  color: #d4d4d8;
}

html.dark .header-search-box {
  background-color: #171717;
  border-color: #27272a;
}

html.dark .header-search-box:hover {
  border-color: #818cf8;
}

html.dark .header-search-input {
  color: #fafafa;
}

html.dark .header-search-input::placeholder {
  color: #71717a;
}

html.dark .header-search-icon {
  color: #71717a;
}

html.dark .site-header__nav a {
  color: #d4d4d8;
}

html.dark .site-header__nav a:hover {
  color: #fafafa;
}

html.dark .site-header__nav a.current {
  color: #818cf8;
}

html.dark .breadcrumbs {
  color: #d4d4d8;
}

html.dark .breadcrumbs a {
  color: #818cf8;
}

html.dark .breadcrumbs a:hover {
  color: #a5b4fc;
}

html.dark .breadcrumbs__current {
  color: #fafafa;
}

/* Breadcrumbs light mode */
html:not(.dark) .breadcrumbs {
  color: #64748b;
}

html:not(.dark) .breadcrumbs a {
  color: #3525ce;
}

html:not(.dark) .breadcrumbs a:hover {
  color: #4f46e5;
}

html:not(.dark) .breadcrumbs__current {
  color: #191c1e;
}

/* Dark Mode Header Elements */
html.dark .site-header {
  background-color: rgba(10, 10, 10, 0.95) !important;
  border-bottom-color: #27272a !important;
}

html.dark .site-header__logo {
  color: #fafafa;
}

html.dark .site-header__logo-text {
  color: #fafafa;
}

html.dark .site-header__logo-icon svg {
  color: #818cf8;
}

html.dark .site-header__logo--image .custom-logo-img {
  filter: brightness(1.1);
}

html.dark .site-header__nav a {
  color: #e4e4e7 !important;
}

html.dark .site-header__nav a:hover {
  color: #ffffff !important;
  background-color: #27272a !important;
}

html.dark .site-header__nav a.current {
  color: #a5b4fc !important;
  background-color: rgba(129, 140, 248, 0.15) !important;
}

html.dark .site-header__nav a svg {
  color: #e4e4e7 !important;
}

html.dark .site-header__nav a:hover svg {
  color: #ffffff !important;
}

html.dark .site-header__nav a.current svg {
  color: #a5b4fc !important;
}

html.dark .theme-toggle {
  color: #d4d4d8;
}

html.dark .theme-toggle:hover {
  color: #fafafa;
  background-color: #27272a;
}

html.dark .theme-toggle__icon--sun svg {
  color: #fbbf24;
}

html.dark .theme-toggle__icon--moon svg {
  color: #a5b4fc;
}

html.dark .header-search-box {
  background-color: #171717;
  border-color: #27272a;
}

html.dark .header-search-box:hover {
  border-color: #818cf8;
  background-color: #1f1f23;
}

html.dark .header-search-input {
  color: #fafafa;
}

html.dark .header-search-input::placeholder {
  color: #71717a;
}

html.dark .header-search-icon {
  color: #71717a;
}

/* Dark Mode Solver Elements */
html.dark .solver-step {
  background-color: #1f1f23;
  border-color: #27272a;
}

html.dark .solver-step__label {
  color: #d4d4d8;
}

html.dark .solver-step__value {
  color: #fafafa;
}

html.dark .solver-error {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

html.dark .solver-functions h2 {
  color: #fafafa;
}

html.dark .solver-func-card {
  background-color: #171717;
  border-color: #27272a;
  color: #d4d4d8;
}

/* Dark Mode Hero Search Box */
html.dark .hero__search {
  background-color: #171717;
  border-color: #27272a;
}

html.dark .hero__search-input {
  background-color: transparent;
  color: #fafafa;
}

html.dark .hero__search-input::placeholder {
  color: #71717a;
}

html.dark .hero__search-icon {
  color: #71717a;
}

/* Dark Mode Tabs */
html.dark .tab-trigger {
  background-color: var(--surface-container);
  border-color: var(--border-subtle);
  color: var(--on-surface-variant);
}

html.dark .tab-trigger:hover {
  background-color: var(--surface-container-high);
  border-color: var(--outline);
  color: var(--on-surface);
}

html.dark .tab-trigger.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* Dark Mode Form Elements */
html.dark .form-input {
  background-color: #171717;
  border-color: #27272a;
  color: #fafafa;
}

html.dark .form-input::placeholder {
  color: #71717a;
}

html.dark .form-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

html.dark .form-label {
  color: #d4d4d8;
}

/* Dark Mode Badges */
html.dark .badge {
  background-color: #171717;
  border-color: #27272a;
  color: #d4d4d8;
}

html.dark .badge--primary {
  background-color: rgba(129, 140, 248, 0.2);
  border-color: #818cf8;
  color: #a5b4fc;
}

html.dark .badge--secondary {
  background-color: rgba(34, 211, 238, 0.2);
  border-color: #22d3ee;
  color: #67e8f9;
}

/* Dark Mode CTA Banner */
html.dark .cta-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

html.dark .cta-banner__title {
  color: #fafafa;
}

html.dark .cta-banner__desc {
  color: #d4d4d8;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--font-size-body-md);
}

.site-header__nav a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: var(--font-size-body-md);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.site-header__nav a:hover {
  color: var(--primary);
}

.site-header__nav a.current {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.site-header__nav .hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .site-header__nav .hide-mobile {
    display: inline-flex;
  }
}

/* Responsive styles for new header layout */
@media (max-width: 768px) {
  .site-header__inner {
    gap: 1rem;
  }

  .site-header__right {
    gap: 0.75rem;
  }

  .site-header__nav {
    display: none;
  }

  .header-search-box {
    min-width: 180px;
    max-width: 200px;
  }

  .header-search-input {
    width: 120px;
  }
}

@media (max-width: 640px) {
  .header-search-box {
    display: none;
  }

  .site-header__actions {
    gap: 0.5rem;
  }
}

/* ============================================================
   Site Footer - Math-Tech Modern
   ============================================================ */
.site-footer {
  margin-top: var(--spacing-section-gap);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-container);
}

.site-footer__inner {
  max-width: var(--spacing-container-max);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer__title {
  font-weight: var(--font-weight-headline-md);
  font-size: var(--font-size-body-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label-sm);
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.site-footer__logo img {
  max-height: 2rem;
  max-width: none;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.site-footer__desc {
  margin-top: 1rem;
  font-size: var(--font-size-body-md);
  color: var(--on-surface-variant);
  line-height: var(--line-height-body-md);
  margin-bottom: 1.5rem;
}

.site-footer__social {
  display: flex;
  gap: 1rem;
}

.site-footer__social-link {
  color: var(--on-surface-variant);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__social-link:hover {
  color: var(--primary);
}

.site-footer__social-link .material-symbols-outlined {
  font-size: 1.25rem;
}

.site-footer__links {
  list-style: none;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links a {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.site-footer__links a:hover {
  color: var(--primary);
  transform: translateX(4px);
}

.site-footer__newsletter-desc {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
}

.site-footer__newsletter {
  display: flex;
  gap: 0;
}

.site-footer__newsletter-input {
  flex: 1;
  background: var(--surface-container-low);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0.5rem 1rem;
  font-size: var(--font-size-caption);
  color: var(--on-surface);
  transition: all 0.2s ease;
}

.site-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.site-footer__newsletter-input::placeholder {
  color: var(--on-surface-variant);
}

.site-footer__newsletter-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__newsletter-btn:hover {
  background: var(--on-primary-fixed-variant);
}

.site-footer__newsletter-btn .material-symbols-outlined {
  font-size: 1rem;
}

.site-footer__copy {
  margin-top: 3rem;
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   Cards - Math-Tech Modern
   ============================================================ */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s ease;
}

.card--hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card--hoverable {
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card--hoverable:hover {
  border-color: rgba(67, 56, 202, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);
}

/* ============================================================
   Badge - Math-Tech Modern
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
}

.badge--secondary {
  background-color: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
}

.badge--primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

/* ============================================================
   Buttons - Math-Tech Modern
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--font-size-body-md);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
}

.btn svg {
  width: 1rem;
  height: 1rem;
}

.btn--lg {
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-body-md);
}

.btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size-label-sm);
}

.btn--primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover {
  background-color: var(--primary-container);
}

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

.btn--outline:hover {
  background-color: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

.btn--ghost {
  background-color: transparent;
  color: var(--secondary);
}

.btn--ghost:hover {
  background-color: var(--surface-container-low);
  color: var(--on-surface);
}

/* ============================================================
   Form Elements - Math-Tech Modern
   ============================================================ */
.form-label {
  display: block;
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  margin-bottom: 0.5rem;
  color: var(--on-surface-variant);
  font-family: var(--font-mono);
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-label span.caption {
  font-size: var(--font-size-caption);
  opacity: 0.6;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
}

.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-technical-md);
  font-weight: var(--font-weight-technical-md);
  line-height: 1.5;
  color: var(--on-surface);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  outline: none;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
  outline: none;
}

.form-input--lg {
  padding: 1rem;
  font-size: var(--font-size-technical-md);
}

.form-input--primary {
  background-color: var(--surface-container-low);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-input--primary:focus {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group {
  margin-bottom: 1rem;
}

/* Calculator specific inputs */
.calc-shell .form-input,
.calculator-widget-container .form-input {
  font-family: var(--font-mono);
  font-size: var(--font-size-technical-md);
  font-weight: var(--font-weight-technical-md);
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
}

.calc-shell .form-input:focus,
.calculator-widget-container .form-input:focus {
  background-color: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

/* Calculator input groups (grid layout) */
.calc-input-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.calc-input-group .form-group {
  margin-bottom: 0;
}

/* Main calculator input (base unit) */
.calc-input-main {
  background-color: var(--surface-container-low) !important;
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  padding: 1rem !important;
}

.calc-input-main:focus {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Label highlighting for calculator inputs */
.calc-shell .form-label:focus,
.calculator-widget-container .form-label:focus {
  color: var(--primary);
}

/* Header search input specific style */
.header-search-input {
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-md);
}

.header-search-input:focus {
  box-shadow: none;
  outline: none;
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs-list {
  display: grid;
  gap: 0;
  background-color: var(--muted);
  border-radius: var(--radius-md);
  padding: 0.25rem;
}

.tabs-list--2 { grid-template-columns: repeat(2, 1fr); }
.tabs-list--3 { grid-template-columns: repeat(3, 1fr); }

.tab-trigger {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  font-family: var(--font-sans);
}

.tab-trigger:hover {
  color: var(--foreground);
}

.tab-trigger.active {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Light mode specific tab styles */
html:not(.dark) .tab-trigger {
  background-color: var(--muted);
  color: var(--muted-foreground);
}

html:not(.dark) .tab-trigger:hover {
  background-color: var(--muted) / 0.8;
  color: var(--foreground);
}

html:not(.dark) .tab-trigger.active {
  background-color: var(--primary);
  color: #ffffff;
}

.tab-content {
  display: none;
  padding-top: 1rem;
}

.tab-content.active {
  display: block;
}

/* ============================================================
   Category Cards - Math-Tech Modern
   ============================================================ */
.cat-card-modern {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  display: block;
}

.cat-card-modern:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.cat-card-modern__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 1rem auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.cat-card-modern:hover .cat-card-modern__icon {
  transform: scale(1.1);
}

.cat-card-modern__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.cat-card-modern__name {
  font-size: 1.125rem;
  font-weight: var(--font-weight-headline-md);
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.cat-card-modern__count {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
}

/* ============================================================
   Calculator Cards - Math-Tech Modern
   ============================================================ */
.calc-card-modern {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.calc-card-modern:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.calc-card-modern__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.calc-card-modern__icon {
  color: var(--primary);
  font-size: 2.5rem;
}

.calc-card-modern__icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.calc-card-modern__badge {
  padding: 0.25rem 0.75rem;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
}

.calc-card-modern__title {
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-headline-md);
  color: var(--on-surface);
  margin-bottom: 0.75rem;
  line-height: var(--line-height-headline-md);
}

.calc-card-modern__desc {
  font-size: var(--font-size-body-md);
  color: var(--on-surface-variant);
  line-height: var(--line-height-body-md);
  margin-bottom: 2rem;
  flex-grow: 1;
}

.calc-card-modern__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
  transition: background 0.2s ease;
  gap: 0.5rem;
}

.calc-card-modern:hover .calc-card-modern__cta {
  background: var(--on-primary-fixed-variant);
}

.calc-card-modern__cta .material-symbols-outlined {
  transition: transform 0.2s ease;
}

.calc-card-modern:hover .calc-card-modern__cta .material-symbols-outlined {
  transform: translateX(4px);
}

/* ============================================================
   How It Works - Math-Tech Modern
   ============================================================ */
.steps-grid-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  position: relative;
}

@media (min-width: 768px) {
  .steps-grid-modern {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.steps-grid-modern__connector {
  display: none;
  position: absolute;
  top: 3rem;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--border-subtle);
  z-index: 0;
}

@media (min-width: 768px) {
  .steps-grid-modern__connector {
    display: block;
  }
}

.step-card-modern {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step-card-modern__circle {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-card-modern__icon {
  font-size: 2.5rem;
  color: var(--primary);
}

.step-card-modern__badge {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  background: var(--primary);
  color: var(--on-primary);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-technical-md);
  border: 4px solid var(--background);
}

@media (min-width: 768px) {
  .step-card-modern__badge {
    right: 25%;
  }
}

.step-card-modern__title {
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-headline-md);
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}

.step-card-modern__desc {
  font-size: var(--font-size-body-md);
  color: var(--on-surface-variant);
  line-height: var(--line-height-body-md);
}

/* ============================================================
   Hero Section - Math-Tech Modern
   ============================================================ */
.hero {
  position: relative;
  padding: 6rem 1rem;
  overflow: hidden;
  background-color: var(--background);
  background-size: cover;
  background-position: center;
}

/* Hero Background Image */
.hero--has-image {
  background-size: cover;
  background-position: center;
}

.hero--has-image.hero--parallax {
  background-attachment: fixed;
}

/* Hero Background Video */
.hero--has-video {
  position: relative;
}

.hero__video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero--has-video .hero__inner {
  position: relative;
  z-index: 1;
}

/* Hero Overlay for Background Images/Video */
.hero--has-image::before,
.hero--has-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
  z-index: 0;
}

.hero--has-image .hero__inner,
.hero--has-video .hero__inner {
  position: relative;
  z-index: 2;
}

.hero--has-image .hero__deco-shape,
.hero--has-video .hero__deco-shape {
  z-index: 1;
}

/* Hero Text Colors with Background */
.hero--has-image .hero__title,
.hero--has-video .hero__title,
.hero--has-image .hero__subtitle,
.hero--has-video .hero__subtitle {
  color: white;
}

.hero--has-image .badge,
.hero--has-video .badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero--has-image .hero__search-input,
.hero--has-video .hero__search-input {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero--has-image .hero__search-input:focus,
.hero--has-video .hero__search-input:focus {
  background: white;
  border-color: rgba(255, 255, 255, 0.8);
}

.hero--has-image .hero__search-icon,
.hero--has-video .hero__search-icon {
  color: rgba(255, 255, 255, 0.7);
}

.hero--has-image .hero__search:focus-within .hero__search-icon,
.hero--has-video .hero__search:focus-within .hero__search-icon {
  color: var(--primary);
}

/* Hero Buttons with Background */
.hero--has-image .btn--outline,
.hero--has-video .btn--outline {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.hero--has-image .btn--outline:hover,
.hero--has-video .btn--outline:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
}

.hero__inner {
  max-width: var(--spacing-container-max);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

/* Glass Decorative Shapes */
.hero__deco-shape {
  position: absolute;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

.hero__deco-shape--1 {
  width: 16rem;
  height: 16rem;
  bottom: -3rem;
  right: -3rem;
  opacity: 0.2;
}

.hero__deco-shape--2 {
  width: 12rem;
  height: 12rem;
  top: -3rem;
  left: -3rem;
  opacity: 0.1;
}

.hero .badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background-color: var(--primary-fixed);
  color: var(--on-primary-fixed);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero__title {
  font-size: var(--font-size-headline-xl-mobile);
  font-weight: var(--font-weight-headline-xl);
  line-height: var(--line-height-headline-xl);
  letter-spacing: var(--letter-spacing-headline);
  color: var(--on-surface);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--font-size-headline-xl);
  }
}

.hero__title span {
  color: var(--primary);
}

.hero__subtitle {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--on-surface-variant);
  max-width: 42rem;
  margin: 0 auto 3rem auto;
}

.hero__search {
  position: relative;
  max-width: 36rem;
  margin: 0 auto 2rem auto;
}

.hero__search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  pointer-events: none;
  transition: color 0.2s ease;
  font-size: 1.25rem;
}

.hero__search:focus-within .hero__search-icon {
  color: var(--primary);
}

.hero__search-input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-md);
  color: var(--on-surface);
  font-family: var(--font-sans);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.hero__search-input::placeholder {
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
}

.hero__search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53, 37, 206, 0.1);
}

.hero__search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  z-index: 50;
  text-align: left;
}

.hero__search-results .card {
  padding: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.hero__search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-radius: var(--radius);
  transition: background-color 0.15s;
  cursor: pointer;
}

.hero__search-item:hover {
  background-color: var(--surface-container-low);
}

.hero__search-item p:first-child {
  font-size: var(--font-size-body-md);
  font-weight: 500;
}

.hero__search-item .desc {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   Section Headings
   ============================================================ */
.section {
  padding: 4rem 0;
}

.section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.section__title {
  font-size: 1.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section__title svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--primary);
}

.section__desc {
  margin-top: 0.25rem;
  color: var(--muted-foreground);
}

/* ============================================================
   Grid layouts
   ============================================================ */
.grid {
  display: grid;
  gap: 1rem;
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--5 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   Category Cards (Home)
   ============================================================ */
.cat-card {
  padding: 2rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  background-color: var(--category-card-bg, #ffffff) !important;
  border-color: var(--category-card-border, #e2e4e9) !important;
}

.cat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.card--hoverable:hover .cat-card {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.card--hoverable:hover .cat-card::before {
  opacity: 0.05;
}

.cat-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);
}

.cat-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: white;
}

.card--hoverable:hover .cat-card__icon {
  transform: scale(1.1);
}

.cat-card__name {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
  color: var(--category-card-text, #1a1f2e) !important;
}

.cat-card__count {
  font-size: 0.875rem;
  color: var(--category-card-text, #64748b) !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
   Calculator Card (listing)
   ============================================================ */
.calc-card {
  padding: 1.25rem;
  height: 100%;
  background-color: var(--category-card-bg, #ffffff) !important;
  border-color: var(--category-card-border, #e2e4e9) !important;
}

/* ============================================================
   Gutenberg Content
   ============================================================ */
.gutenberg-content {
  max-width: 100%;
}

.gutenberg-content h1,
.gutenberg-content h2,
.gutenberg-content h3,
.gutenberg-content h4,
.gutenberg-content h5,
.gutenberg-content h6 {
  color: var(--foreground);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.gutenberg-content h1 {
  font-size: 2.25rem;
}

.gutenberg-content h2 {
  font-size: 1.875rem;
}

.gutenberg-content h3 {
  font-size: 1.5rem;
}

.gutenberg-content p {
  color: var(--foreground);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.gutenberg-content ul,
.gutenberg-content ol {
  color: var(--foreground);
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.gutenberg-content li {
  margin-bottom: 0.5rem;
}

.gutenberg-content a {
  color: var(--primary);
  text-decoration: underline;
}

.gutenberg-content a:hover {
  color: var(--accent);
}

.gutenberg-content blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--muted-foreground);
  font-style: italic;
}

.gutenberg-content code {
  background-color: var(--muted);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.gutenberg-content pre {
  background-color: var(--muted);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1rem 0;
}

.gutenberg-content pre code {
  background-color: transparent;
  padding: 0;
}

.gutenberg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.gutenberg-content th,
.gutenberg-content td {
  padding: 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
}

.gutenberg-content th {
  background-color: var(--muted);
  font-weight: 600;
}

.gutenberg-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

.gutenberg-content iframe {
  max-width: 100%;
  border-radius: var(--radius-md);
}

/* Dark mode for Gutenberg content */
html.dark .gutenberg-content h1,
html.dark .gutenberg-content h2,
html.dark .gutenberg-content h3,
html.dark .gutenberg-content h4,
html.dark .gutenberg-content h5,
html.dark .gutenberg-content h6 {
  color: #fafafa;
}

html.dark .gutenberg-content p {
  color: #d4d4d8;
}

html.dark .gutenberg-content ul,
html.dark .gutenberg-content ol {
  color: #d4d4d8;
}

html.dark .gutenberg-content blockquote {
  color: #a1a1aa;
}

html.dark .gutenberg-content code {
  background-color: #27272a;
  color: #fafafa;
}

html.dark .gutenberg-content pre {
  background-color: #27272a;
}

html.dark .gutenberg-content th {
  background-color: #27272a;
  color: #fafafa;
}

html.dark .gutenberg-content td {
  color: #d4d4d8;
}

/* ============================================================
   Calculator List (Category Archive)
   ============================================================ */
.calculator-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calculator-list__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.calculator-list__item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calculator-list__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.15);
}

.calculator-list__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.calculator-list__content {
  flex: 1;
  min-width: 0;
}

.calculator-list__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--foreground);
}

.calculator-list__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.4;
}

.calculator-list__arrow {
  color: var(--muted-foreground);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.calculator-list__item:hover .calculator-list__arrow {
  color: var(--primary);
}

.calculator-list__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================
   Calculator Simple List (Compact format for scalability)
   ============================================================ */
.calculator-simple-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

.calculator-simple-list__item {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--foreground);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.calculator-simple-list__item:hover {
  color: var(--primary);
  border-left-color: var(--primary);
  background-color: var(--surface);
  padding-left: 1.25rem;
}

.calc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.calc-card__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--category-card-text, #1a1f2e) !important;
}

.calc-card__desc {
  font-size: 0.875rem;
  color: var(--category-card-text, #64748b) !important;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.calc-card__cta {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--category-card-icon, #4338ca) !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.calc-card__cta svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ============================================================
   CTA Banner - Math-Tech Modern
   ============================================================ */
.cta-banner {
  position: relative;
  padding: 2rem;
  background: linear-gradient(135deg, var(--primary-fixed) 0%, var(--primary-container) 100%);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .cta-banner {
    padding: 3rem;
  }
  .cta-banner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
  }
}

.cta-banner__content {
  position: relative;
  z-index: 2;
}

.cta-banner__title {
  font-size: 1.875rem;
  font-weight: var(--font-weight-headline-lg);
  color: var(--on-primary-fixed);
}

.cta-banner__desc {
  margin-top: 0.5rem;
  color: var(--on-primary-fixed-variant);
  max-width: 36rem;
}

/* CTA Banner Decorative Shapes */
.cta-banner__deco-shape {
  position: absolute;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

.cta-banner__deco-shape--1 {
  width: 16rem;
  height: 16rem;
  bottom: -3rem;
  right: -3rem;
  opacity: 0.2;
}

.cta-banner__deco-shape--2 {
  width: 12rem;
  height: 12rem;
  top: -3rem;
  left: -3rem;
  opacity: 0.1;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.breadcrumbs a {
  transition: color 0.15s;
}

.breadcrumbs a:hover {
  color: var(--foreground);
}

.breadcrumbs svg {
  width: 0.75rem;
  height: 0.75rem;
}

.breadcrumbs__current {
  color: var(--foreground);
}

/* ============================================================
   Single Calculator Page - Math-Tech Modern
   ============================================================ */
.calc-page__title {
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-headline-lg);
  line-height: var(--line-height-headline-lg);
  letter-spacing: var(--letter-spacing-headline);
  color: var(--on-surface);
}

@media (min-width: 768px) {
  .calc-page__title {
    font-size: var(--font-size-headline-xl);
  }
}

.calc-page__desc {
  margin-top: 1rem;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--on-surface-variant);
}

/* Calculator Widget Shell - Math-Tech Modern */
.calc-shell {
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.calculator-widget-container {
  border-radius: var(--radius-xl);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Widget Header with Gradient */
.calc-widget-header {
  background: var(--primary);
  padding: 1.5rem;
  color: var(--on-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-widget-header h2 {
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-headline-md);
  color: var(--on-primary);
  margin: 0;
}

.calc-widget-header .reset-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--on-primary);
  border-radius: var(--radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-widget-header .reset-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.calc-widget-header .reset-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Widget Content Area */
.calc-widget-content {
  padding: 1.5rem;
}

/* Widget Input Groups */
.calc-widget-input-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.calc-widget-input-group .form-group {
  margin-bottom: 0;
}

/* Widget Main Input Section */
.calc-widget-main-input {
  padding-top: 0.5rem;
  margin-bottom: 1.25rem;
}

/* Widget Action Button */
.calc-widget-action-btn {
  width: 100%;
  margin-top: 1rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  padding: 1rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.calc-widget-action-btn:hover {
  filter: brightness(0.9);
}

.calc-widget-action-btn:active {
  transform: scale(0.98);
}

.calc-widget-action-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Widget Footer */
.calc-widget-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-container-low);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-widget-footer .precision-info {
  font-size: var(--font-size-caption);
  color: var(--on-surface-variant);
}

.calc-widget-footer .action-buttons {
  display: flex;
  gap: 0.5rem;
}

.calc-widget-footer .action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--on-surface-variant);
  padding: 0.5rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-widget-footer .action-btn:hover {
  color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  transform: scale(1.05);
}

.calc-widget-footer .action-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Dark mode specific button icon styles */
html.dark .calc-widget-header .reset-btn .material-symbols-outlined {
  color: #ffffff;
}

html.dark .calc-widget-footer .action-btn .material-symbols-outlined {
  color: var(--on-surface-variant);
}

html.dark .calc-widget-footer .action-btn:hover .material-symbols-outlined {
  color: var(--primary);
}

/* Light mode specific button icon styles */
html:not(.dark) .calc-widget-header .reset-btn .material-symbols-outlined {
  color: #ffffff;
}

html:not(.dark) .calc-widget-footer .action-btn .material-symbols-outlined {
  color: var(--on-surface-variant);
}

html:not(.dark) .calc-widget-footer .action-btn:hover .material-symbols-outlined {
  color: var(--primary);
}

/* Calculator Result Rows */
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.calc-result-row:last-child {
  border-bottom: none;
}

.calc-result-label {
  font-size: var(--font-size-body-md);
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
  font-weight: 500;
}

.calc-result-value {
  font-size: var(--font-size-body-md);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-weight: 600;
}

.calc-result-value--big {
  font-size: var(--font-size-headline-sm);
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

@media (min-width: 768px) {
  .calc-shell {
    padding: 2rem;
  }
  .calc-shell__layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: flex-start;
  }
}

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

.calc-shell__divider {
  display: none;
}

@media (min-width: 768px) {
  .calc-shell__divider {
    display: block;
    width: 1px;
    background-color: var(--border);
    align-self: stretch;
  }
}

.calc-shell__result {
  background-color: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .calc-shell__result {
    margin-top: 0;
  }
}

.calc-shell__result-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(226, 228, 233, 0.5);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.result-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.result-row__label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.result-row__value {
  font-weight: 500;
  color: var(--foreground);
}

.result-row__value--big {
  font-size: 1.5rem;
  font-weight: 600;
}

/* ============================================================
   SEO Content Sections (single calculator)
   ============================================================ */
.prose-content {
  margin-top: 3rem;
}

.prose-content section {
  margin-bottom: 1.5rem;
}

.prose-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.prose-content p {
  color: var(--muted-foreground);
  line-height: 1.7;
}

.formula-card {
  margin-top: 0.75rem;
  padding: 1rem;
  background-color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* ============================================================
   Accordion (FAQ)
   ============================================================ */
.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  font-family: var(--font-sans);
}

.accordion-trigger:hover {
  text-decoration: underline;
}

.accordion-trigger svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.accordion-content.open {
  max-height: 200px;
  padding-bottom: 1rem;
}

/* ============================================================
   Related Calculators
   ============================================================ */
.related-section {
  margin-top: 4rem;
}

.related-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ============================================================
   Archive / Listing page
   ============================================================ */
.archive-header {
  margin-bottom: 1.5rem;
}

.archive-header h1 {
  font-size: 2.25rem;
  font-weight: 700;
}

.archive-header p {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
}

.archive-search {
  position: relative;
  max-width: 28rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.archive-search__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.archive-search .form-input {
  padding-left: 2.25rem;
  height: 2.75rem;
}

.archive-category {
  margin-top: 3rem;
}

.archive-category__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.archive-category__header h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.archive-category__header a {
  font-size: 0.875rem;
  color: var(--primary);
  transition: text-decoration 0.15s;
}

.archive-category__header a:hover {
  text-decoration: underline;
}

/* ============================================================
   Calculator Category Navigation Bar - Carousel Style (like Hero Ticker)
   ============================================================ */
.calc-category-nav {
  background-color: var(--paper);
  border-bottom: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.calc-category-nav .container-wrapper {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.calc-category-nav__scroll {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 16px;
  scroll-behavior: smooth;
}

.calc-category-nav__scroll::-webkit-scrollbar {
  display: none;
}

.calc-category-nav__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 8px 4px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}

.calc-category-nav__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.calc-category-nav__arrow[hidden] {
  display: none;
}

html.dark .calc-category-nav__arrow {
  background: rgba(26, 26, 46, 0.9);
  border-color: var(--line);
  color: var(--ink-3);
}

html.dark .calc-category-nav__arrow:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
}

.calc-category-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border-radius: 999px;
  font-family: var(--mono);
}

.calc-category-nav__link:hover {
  color: var(--brand);
  background: rgba(255, 255, 255, 1);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(53, 37, 206, 0.15);
}

.calc-category-nav__link.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(53, 37, 206, 0.25);
}

.calc-category-nav__link--home svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ink-3);
}

.calc-category-nav__link--home:hover svg,
.calc-category-nav__link--home.is-active svg {
  color: #fff;
}

.calc-category-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  background-color: rgba(53, 37, 206, 0.15);
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9999px;
  margin-left: 0.5rem;
  font-family: var(--mono);
}

.calc-category-nav__link:hover .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--brand);
}

.calc-category-nav__link.is-active .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Dark mode for category navigation carousel */
html.dark .calc-category-nav {
  background-color: rgba(10, 10, 12, 0.8);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}

html.dark .calc-category-nav__link {
  background: rgba(26, 26, 46, 0.8);
  color: var(--ink-3);
  border-color: var(--line);
}

html.dark .calc-category-nav__link:hover {
  color: var(--brand-2);
  background: rgba(26, 26, 46, 1);
  border-color: var(--brand-2);
  box-shadow: 0 4px 12px rgba(157, 149, 255, 0.2);
}

html.dark .calc-category-nav__link.is-active {
  color: #fff;
  background: var(--brand-2);
  border-color: var(--brand-2);
  box-shadow: 0 4px 12px rgba(157, 149, 255, 0.3);
}

html.dark .calc-category-nav__link--home svg {
  color: var(--ink-3);
}

html.dark .calc-category-nav__link--home:hover svg,
html.dark .calc-category-nav__link--home.is-active svg {
  color: #fff;
}

html.dark .calc-category-nav__count {
  background-color: rgba(157, 149, 255, 0.15);
  color: var(--brand-2);
}

html.dark .calc-category-nav__link:hover .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--brand-2);
}

html.dark .calc-category-nav__link.is-active .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Light mode for category navigation carousel */
html:not(.dark) .calc-category-nav {
  background-color: rgba(255, 255, 255, 0.8);
  border-top-color: var(--line-2);
  border-bottom-color: var(--line-2);
}

html:not(.dark) .calc-category-nav__link {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-3);
  border-color: var(--line-2);
}

html:not(.dark) .calc-category-nav__link:hover {
  color: var(--brand);
  background: rgba(255, 255, 255, 1);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(53, 37, 206, 0.15);
}

html:not(.dark) .calc-category-nav__link.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(53, 37, 206, 0.25);
}

html:not(.dark) .calc-category-nav__count {
  background-color: rgba(53, 37, 206, 0.1);
  color: var(--brand);
}

html:not(.dark) .calc-category-nav__link:hover .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--brand);
}

html:not(.dark) .calc-category-nav__link.is-active .calc-category-nav__count {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Responsive for category navigation carousel */
@media (max-width: 640px) {
  .calc-category-nav {
    padding: 10px 0;
  }

  .calc-category-nav__scroll {
    gap: 16px;
    padding: 0 4%;
  }

  .calc-category-nav__link {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .calc-category-nav__count {
    min-width: 1.125rem;
    height: 1rem;
    font-size: 0.625rem;
    padding: 0 0.25rem;
  }

  .calc-category-nav__link--home svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ============================================================
   Archive Hero Banner - Math-Tech Editorial Style (Original Content)
   ============================================================ */
.archive-hero {
  position: relative;
  padding: 50px 0 70px;
  overflow: hidden;
  background-color: var(--paper);
}

.archive-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(79, 70, 230, .12), transparent 60%),
    radial-gradient(50% 70% at 0% 90%, rgba(217, 119, 87, .10), transparent 60%);
}

.archive-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 13, 18, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 13, 18, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}

.archive-hero__inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.archive-hero__badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(53, 37, 206, 0.2);
}

.archive-hero__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 16px;
}

.archive-hero__subtitle {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.archive-search {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 20px 40px -20px rgba(28, 15, 138, .25), 0 4px 12px rgba(14, 13, 18, .04);
}

.archive-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  z-index: 2;
  pointer-events: none;
  width: 1.25rem;
  height: 1.25rem;
}

.archive-search__input {
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 16px;
  padding: 12px 4px;
  background: transparent;
  color: var(--ink);
}

.archive-search__input::placeholder {
  color: var(--ink-4);
}

.archive-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 20px 40px -20px rgba(28, 15, 138, .35), 0 4px 12px rgba(14, 13, 18, .06);
}

/* Archive hero dark mode */
html.dark .archive-hero {
  background-color: #0f0f1a;
}

html.dark .archive-hero__badge {
  background: rgba(157, 149, 255, 0.15);
  color: var(--brand-2);
  border-color: rgba(157, 149, 255, 0.3);
}

html.dark .archive-hero__title {
  color: #fafafa;
}

html.dark .archive-hero__subtitle {
  color: #d4d4d8;
}

html.dark .archive-search {
  background: rgba(26, 26, 46, 0.8);
  border-color: var(--line);
}

html.dark .archive-search__input {
  color: var(--ink);
}

html.dark .archive-search__input::placeholder {
  color: var(--ink-4);
}

html.dark .archive-search__icon {
  color: var(--ink-4);
}

html.dark .archive-search:focus-within {
  border-color: var(--brand-2);
}

/* Archive hero light mode */
html:not(.dark) .archive-hero {
  background-color: #f8fafc;
}

html:not(.dark) .archive-hero__badge {
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
  border-color: rgba(53, 37, 206, 0.2);
}

html:not(.dark) .archive-hero__title {
  color: #191c1e;
}

html:not(.dark) .archive-hero__subtitle {
  color: #464555;
}

/* Archive hero responsive */
@media (max-width: 640px) {
  .archive-hero {
    padding: 30px 0 50px;
  }

  .archive-hero__badge {
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 16px;
  }

  .archive-hero__title {
    font-size: clamp(28px, 8vw, 40px);
  }

  .archive-hero__subtitle {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .archive-search {
    padding: 6px 6px 6px 16px;
    max-width: 100%;
  }

  .archive-search__input {
    font-size: 15px;
    padding: 10px 4px;
  }

  .archive-search__icon {
    width: 1rem;
    height: 1rem;
    left: 0.875rem;
  }
}

/* ============================================================
   Category Hero Banner - Math-Tech Editorial Style
   ============================================================ */
.category-hero {
  position: relative;
  padding: 30px 0 40px;
  overflow: hidden;
  background-color: var(--paper);
}

.category-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(79, 70, 230, .12), transparent 60%),
    radial-gradient(50% 70% at 0% 90%, rgba(217, 119, 87, .10), transparent 60%);
}

.category-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 13, 18, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 13, 18, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}

.category-hero__inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.category-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  border: 1px solid rgba(53, 37, 206, 0.2);
}

.category-hero__eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.category-hero__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.category-hero__icon {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--brand);
}

.category-hero__title .serif {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brand-2);
}

.category-hero__description {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.category-hero__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.category-hero__stat {
  text-align: center;
}

.category-hero__stat-number {
  display: block;
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.category-hero__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

/* Category hero dark mode */
html.dark .category-hero {
  background-color: #0f0f1a;
}

html.dark .category-hero__eyebrow {
  background: rgba(157, 149, 255, 0.15);
  color: var(--brand-2);
  border-color: rgba(157, 149, 255, 0.3);
}

html.dark .category-hero__eyebrow .dot {
  background: var(--brand-2);
}

html.dark .category-hero__title {
  color: #fafafa;
}

html.dark .category-hero__icon {
  color: var(--brand-2);
}

html.dark .category-hero__description {
  color: #d4d4d8;
}

html.dark .category-hero__stat-number {
  color: var(--brand-2);
}

html.dark .category-hero__stat-label {
  color: #a1a1aa;
}

/* Category hero light mode */
html:not(.dark) .category-hero {
  background-color: #f8fafc;
}

html:not(.dark) .category-hero__eyebrow {
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
  border-color: rgba(53, 37, 206, 0.2);
}

html:not(.dark) .category-hero__eyebrow .dot {
  background: var(--brand);
}

html:not(.dark) .category-hero__title {
  color: #191c1e;
}

html:not(.dark) .category-hero__icon {
  color: var(--brand);
}

html:not(.dark) .category-hero__description {
  color: #464555;
}

/* Category hero responsive */
@media (max-width: 640px) {
  .category-hero {
    padding: 20px 0 30px;
  }

  .category-hero__eyebrow {
    font-size: 10px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  .category-hero__title {
    font-size: clamp(24px, 7vw, 32px);
    flex-direction: column;
    gap: 6px;
  }

  .category-hero__icon {
    font-size: clamp(24px, 5vw, 28px);
  }

  .category-hero__description {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .category-hero__stats {
    gap: 16px;
  }

  .category-hero__stat-number {
    font-size: clamp(18px, 4vw, 24px);
  }

  .category-hero__stat-label {
    font-size: 10px;
  }
}

/* ============================================================
   Category Grid and Cards
   ============================================================ */
.category-container {
  padding-top: 30px;
  padding-bottom: 50px;
}

/* Subcategories Filter */
.category-subcategories {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.subcategory-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.subcategory-filter__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.subcategory-filter__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subcategory-filter__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.subcategory-filter__button:hover {
  background: rgba(53, 37, 206, 0.05);
  border-color: var(--brand);
  color: var(--brand);
}

.subcategory-filter__button.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

.subcategory-filter__count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.subcategory-filter__button.is-active .subcategory-filter__count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Subcategories filter dark mode */
html.dark .category-subcategories {
  border-color: rgba(157, 149, 255, 0.2);
}

html.dark .subcategory-filter__label {
  color: #a1a1aa;
}

html.dark .subcategory-filter__button {
  background: rgba(26, 26, 46, 0.6);
  border-color: rgba(157, 149, 255, 0.2);
  color: #d4d4d8;
}

html.dark .subcategory-filter__button:hover {
  background: rgba(157, 149, 255, 0.1);
  border-color: var(--brand-2);
  color: var(--brand-2);
}

html.dark .subcategory-filter__button.is-active {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #ffffff;
}

html.dark .subcategory-filter__count {
  background: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

/* Subcategories filter light mode */
html:not(.dark) .category-subcategories {
  border-color: #e5e7eb;
}

html:not(.dark) .subcategory-filter__label {
  color: #64748b;
}

html:not(.dark) .subcategory-filter__button {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #191c1e;
}

html:not(.dark) .subcategory-filter__button:hover {
  background: rgba(53, 37, 206, 0.05);
  border-color: var(--brand);
  color: var(--brand);
}

html:not(.dark) .subcategory-filter__button.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

html:not(.dark) .subcategory-filter__count {
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
}

html:not(.dark) .subcategory-filter__button.is-active .subcategory-filter__count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Subcategories filter responsive */
@media (max-width: 640px) {
  .category-subcategories {
    padding: 12px 0;
    margin-bottom: 16px;
  }

  .subcategory-filter {
    gap: 12px;
  }

  .subcategory-filter__label {
    font-size: 11px;
  }

  .subcategory-filter__buttons {
    gap: 6px;
  }

  .subcategory-filter__button {
    padding: 5px 10px;
    font-size: 12px;
  }

  .subcategory-filter__count {
    font-size: 10px;
    padding: 1px 4px;
  }
}

.category-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.category-card {
  display: block;
  padding: 16px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(53, 37, 206, 0.05), rgba(217, 119, 87, 0.05));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 24px -12px rgba(28, 15, 138, .35), 0 4px 8px rgba(14, 13, 18, .06);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.category-card__cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand);
  background: rgba(53, 37, 206, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

.category-card__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.category-card__description {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Category cards dark mode */
html.dark .category-card {
  background: rgba(26, 26, 46, 0.6);
  border-color: rgba(157, 149, 255, 0.2);
}

html.dark .category-card__cat {
  background: rgba(157, 149, 255, 0.15);
  color: var(--brand-2);
}

html.dark .category-card__title {
  color: #fafafa;
}

html.dark .category-card__description {
  color: #a1a1aa;
}

/* Category cards light mode */
html:not(.dark) .category-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

html:not(.dark) .category-card__cat {
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
}

html:not(.dark) .category-card__title {
  color: #191c1e;
}

html:not(.dark) .category-card__description {
  color: #64748b;
}

/* Category grid responsive */
@media (min-width: 769px) and (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1281px) {
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .category-card {
    padding: 12px;
  }

  .category-card__title {
    font-size: 13px;
  }

  .category-card__description {
    font-size: 11px;
  }
}

/* Category empty state */
.category-empty {
  text-align: center;
  padding: 80px 20px;
}

.category-empty__icon {
  font-size: 64px;
  color: var(--ink-3);
  margin-bottom: 24px;
}

.category-empty__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 12px;
}

.category-empty__description {
  font-size: 16px;
  color: var(--ink-3);
  margin-bottom: 32px;
}

/* Category empty dark mode */
html.dark .category-empty__icon {
  color: #52525b;
}

html.dark .category-empty__title {
  color: #fafafa;
}

html.dark .category-empty__description {
  color: #a1a1aa;
}

/* Category empty light mode */
html:not(.dark) .category-empty__icon {
  color: #cbd5e1;
}

html:not(.dark) .category-empty__title {
  color: #191c1e;
}

html:not(.dark) .category-empty__description {
  color: #64748b;
}

/* ============================================================
   Archive Category Filters
   ============================================================ */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.archive-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.archive-filter-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.archive-filter-chip.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.25);
}

.archive-filter-chip.is-active:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: translateY(-1px);
}

.archive-filter-chip svg {
  width: 1rem;
  height: 1rem;
}

.archive-filter-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

.archive-filter-chip.is-active .archive-filter-chip__count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ============================================================
   Archive Category Header (Enhanced)
   ============================================================ */
.archive-category__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.archive-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
}

.archive-category__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.archive-category__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

/* Archive Subcategories */
.archive-subcategories {
  margin-top: 1.5rem;
}

.archive-subcategory {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.archive-subcategory:last-child {
  margin-bottom: 0;
}

.archive-subcategory__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.archive-subcategory__header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.archive-subcategory__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}

.archive-direct-items {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.archive-direct-items:empty {
  display: none;
}

/* Dark mode for subcategories */
html.dark .archive-subcategory {
  background: var(--surface);
  border-color: var(--line);
}

html.dark .archive-subcategory__header h3 {
  color: var(--ink);
}

html.dark .archive-subcategory__badge {
  background: var(--brand);
  color: var(--paper);
}

html.dark .archive-direct-items {
  border-color: var(--line);
}

/* ============================================================
   Resolvedor (Math Solver)
   ============================================================ */
.solver-steps {
  margin-top: 2rem;
}

.solver-steps__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.solver-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.solver-step__num {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.solver-step__label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.solver-step__value {
  font-family: var(--font-mono);
  font-size: 1rem;
  word-break: break-all;
}

.solver-error {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.solver-functions {
  margin-top: 3rem;
}

.solver-functions h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.solver-func-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .solver-func-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.solver-func-card {
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Example buttons for solver */
.solver-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ============================================================
   About page
   ============================================================ */
.about-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: 4rem 1rem;
}

.about-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
}

.about-content > p {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}

.about-card {
  margin-top: 2rem;
  padding: 1.5rem;
}

.about-card section {
  margin-bottom: 1rem;
}

.about-card section:last-child {
  margin-bottom: 0;
}

.about-card h2 {
  font-weight: 600;
}

.about-card p {
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* ============================================================
   404 Page
   ============================================================ */
.page-404 {
  display: flex;
  min-height: 80vh;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.page-404__inner {
  max-width: 28rem;
  text-align: center;
}

.page-404__code {
  font-size: 4.5rem;
  font-weight: 700;
}

.page-404__title {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.page-404__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.page-404__btn {
  margin-top: 1.5rem;
}

/* ============================================================
   Structured Data / SEO
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Utility classes
   ============================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* ============================================================
   Modern Effects - Glassmorphism
   ============================================================ */
.glassmorphic {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.7);
}

.site-header.glassmorphic {
    background-color: rgba(248, 249, 251, var(--glass-opacity, 0.8));
}

/* ============================================================
   Scrollytelling Animations
   ============================================================ */
[data-scrollytelling] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-scrollytelling].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Removed section opacity rule that was hiding content */

/* ============================================================
   XXL Typography
   ============================================================ */
body.xxl-typography-enabled {
    --font-scale: 1;
}

body.xxl-typography-enabled .hero__title {
    font-size: calc(3.75rem * var(--font-scale));
    letter-spacing: -0.04em;
    line-height: 0.95;
}

body.xxl-typography-enabled .section__title {
    font-size: calc(2.5rem * var(--font-scale));
    letter-spacing: -0.03em;
}

body.xxl-typography-enabled h1 {
    font-size: calc(3rem * var(--font-scale));
}

body.xxl-typography-enabled h2 {
    font-size: calc(2.25rem * var(--font-scale));
}

/* ============================================================
   Neon Touches and Micro-gradients
   ============================================================ */
.btn--primary {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn--primary:hover::before {
    left: 100%;
}

.cat-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.05) 0%, rgba(8, 145, 178, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cat-card:hover::after {
    opacity: 1;
}

/* ============================================================
   Bento Grid Layouts
   ============================================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    grid-auto-flow: dense;
}

.bento-item {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px -4px rgba(0,0,0,0.1);
}

/* ============================================================
   Micro-interactions
   ============================================================ */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.card--hoverable {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   Organic Color Palette Update
   ============================================================ */
:root {
    /* Nature-inspired organic palette */
    --organic-beige: #f5f0e8;
    --organic-terracotta: #c4705b;
    --organic-moss: #6b8e5b;
    --organic-sage: #8fbc8f;
    --organic-sand: #e8dcc8;
    --organic-clay: #d4a574;
    --organic-forest: #2d5a3d;
    --organic-stone: #8b8680;
}

/* Alternative organic theme option */
.organic-theme {
    --background: var(--organic-beige);
    --foreground: #2c2c2c;
    --surface: var(--organic-sand);
    --primary: var(--organic-forest);
    --primary-foreground: #ffffff;
    --accent: var(--organic-terracotta);
    --muted: var(--organic-sage);
}

/* ============================================================
   Accessibility Improvements
   ============================================================ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

body.keyboard-nav *:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body.keyboard-nav *:focus:not(:focus-visible) {
    outline: none;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: #000000;
        --input: #000000;
        --primary: #0000ff;
    }
}

/* ============================================================
   View Transitions API Support
   ============================================================ */
::view-transition-group(root) {
    animation-duration: 0.3s;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

/* ============================================================
   Calculator Layout Styles
   ============================================================ */
.calculator-layout {
    margin: 2rem 0;
}

.calculator-layout--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.calculator-layout__theory {
    padding: 0;
}

.calculator-layout__calculator {
    display: flex;
    justify-content: center;
    align-items: start;
    position: sticky;
    top: 2rem;
}

.calculator-layout__calculator--sticky {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.calculator-widget-container {
    width: 100%;
    max-width: 500px;
}

.calculator-layout--split .gutenberg-content {
    padding-right: 1rem;
}

.gutenberg-content-wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
}

.gutenberg-content-wrapper .calculator-toc {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.gutenberg-content-wrapper .gutenberg-content {
    padding-right: 0;
}

@media (max-width: 968px) {
    .gutenberg-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .gutenberg-content-wrapper .calculator-toc {
        position: static;
        max-height: none;
        margin-bottom: 1rem;
    }
}

.calculator-layout--split .calc-shell {
    width: 100%;
    max-width: 500px;
}

/* Responsive */
@media (max-width: 968px) {
    .calculator-layout--split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .calculator-layout__calculator {
        position: static;
    }
}

/* ============================================================
   WordPress-specific overrides
   ============================================================ */
.wp-block-search__input {
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
}

.entry-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.entry-content p {
  margin-bottom: 1rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.pagination a,
.pagination span {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.pagination a {
  background-color: var(--secondary);
  color: var(--foreground);
  transition: background-color 0.15s;
}

.pagination a:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.pagination .current {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* ============================================================
   Stats Bar (Home)
   ============================================================ */
.stats-bar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  padding: 2.5rem 1rem;
  position: relative;
  overflow: hidden;
}

.stats-bar::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-item__number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-item__label {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* ============================================================
   Popular Section (Home)
   ============================================================ */
.popular-section {
  padding: 4rem 1rem;
  background: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%);
}

/* ============================================================
   How It Works (Home)
   ============================================================ */
.how-it-works {
  padding: 4rem 1rem;
  background: var(--surface);
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 2rem auto 0;
  position: relative;
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 3rem;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, var(--border) 0%, var(--primary) 50%, var(--border) 100%);
  display: none;
}

@media (min-width: 768px) {
  .steps-grid::before {
    display: block;
  }
}

.step-card {
  text-align: center;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}

.step-card__number {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.1;
  line-height: 1;
}

.step-card__icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: grid;
  place-items: center;
  margin: 0 auto 1.25rem;
  color: white;
  box-shadow: 0 8px 20px rgba(67, 56, 202, 0.25);
}

.step-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.step-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

.step-card__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* ============================================================
   UI Components - Modal, Tooltip, Pagination, Dropdown, Skeleton
   ============================================================ */

/* Modal/Dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

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

.modal__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.modal__close {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.2s;
}

.modal__close:hover {
  background: var(--secondary);
  color: var(--foreground);
}

.modal__body {
  padding: 1.5rem;
}

.modal__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip__trigger {
  cursor: help;
}

.tooltip__content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--foreground);
  color: var(--background);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 100;
}

.tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--foreground);
}

.tooltip:hover .tooltip__content {
  opacity: 1;
  visibility: visible;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 2rem;
}

.pagination__btn {
  min-width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination__btn:hover {
  background: var(--secondary);
  border-color: var(--input);
}

.pagination__btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown__trigger:hover {
  border-color: var(--input);
  background: var(--secondary);
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s;
  z-index: 100;
}

.dropdown.active .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}

.dropdown__item:hover {
  background: var(--secondary);
}

.dropdown__item:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dropdown__item:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, var(--surface) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.skeleton--avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton--card {
  height: 200px;
  border-radius: var(--radius-lg);
}

/* ============================================================
   UX Components - Alerts, Progress, Loading, Empty States
   ============================================================ */

/* Alert/Notification */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin-bottom: 1rem;
}

.alert__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.alert__description {
  font-size: 0.875rem;
  opacity: 0.9;
}

.alert--info {
  background: var(--accent);
  border-color: rgba(67, 56, 202, 0.2);
  color: var(--accent-foreground);
}

.alert--success {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.2);
  color: var(--success);
}

.alert--warning {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.2);
  color: #a16207;
}

.alert--error {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--destructive);
}

/* Progress Bar */
.progress {
  width: 100%;
  height: 0.5rem;
  background: var(--muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--brand) 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.progress--sm {
  height: 0.25rem;
}

.progress--lg {
  height: 0.75rem;
}

/* Loading Spinner */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--muted);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
}

.spinner--sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.spinner--lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

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

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-state__icon {
  width: 4rem;
  height: 4rem;
  color: var(--muted-foreground);
  opacity: 0.5;
  margin-bottom: 1rem;
}

.empty-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-state__description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 300px;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Utility Components - Back to Top, Cookie Consent, Copy Button
   ============================================================ */

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(67, 56, 202, 0.4);
}

.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Cookie Consent */
.cookie-consent {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 400px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  z-index: 1000;
  transform: translateY(calc(100% + 20px));
  transition: transform 0.3s ease;
}

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

.cookie-consent__text {
  font-size: 0.875rem;
  color: var(--foreground);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.cookie-consent__actions {
  display: flex;
  gap: 0.75rem;
}

.cookie-consent__btn {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.cookie-consent__btn--accept {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
}

.cookie-consent__btn--accept:hover {
  background: #3730a3;
}

.cookie-consent__btn--reject {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

.cookie-consent__btn--reject:hover {
  background: var(--secondary);
}

/* Copy to Clipboard Button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--secondary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary-foreground);
  cursor: pointer;
  transition: all 0.2s;
}

.copy-btn:hover {
  background: var(--muted);
}

.copy-btn.copied {
  background: var(--success);
  color: white;
}

.copy-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Reading Progress Bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--brand) 100%);
  z-index: 1001;
  transition: width 0.1s;
}

/* ============================================================
   Accessibility & Micro-interactions
   ============================================================ */

/* Focus Visible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Skip to Content Link */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 10000;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --muted-foreground: #333333;
  }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .back-to-top,
  .cookie-consent,
  .calc-category-nav,
  .hero__actions,
  .step-card__icon {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero__title {
    font-size: 24pt;
  }

  .card {
    break-inside: avoid;
    border: 1px solid #ddd;
    box-shadow: none;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    opacity: 0.7;
  }
}

/* ============================================================
   Lazy Loading & Performance
   ============================================================ */

.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

.skeleton-wrapper {
  position: relative;
  overflow: hidden;
}

/* Smooth scroll for anchor links */
html {
  scroll-padding-top: 100px;
}

/* ============================================================
   Calculator Theory Wrapper with TOC
   ============================================================ */

.calculator-theory-wrapper {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  margin-top: 2rem;
}

/* Table of Contents */
.calculator-toc {
  position: sticky;
  top: 100px;
  height: fit-content;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.calculator-toc h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calculator-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.calculator-toc__list li {
  margin-bottom: 8px;
}

.calculator-toc__list a {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
  display: block;
  transition: color 0.2s;
  border-left: 2px solid transparent;
  padding-left: 10px;
}

.calculator-toc__list a:hover {
  color: var(--primary);
  border-left-color: var(--primary);
}

.calculator-toc__list a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

/* Calculator Theory Content */
.calculator-theory {
  font-size: 16px;
  line-height: 1.7;
}

.calculator-theory__desc {
  font-size: 18px;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.calculator-theory__section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 100px;
}

.calculator-theory__section h2 {
  color: var(--foreground);
  font-size: 28px;
  margin-bottom: 1rem;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.calculator-theory__section h3 {
  color: var(--foreground);
  font-size: 22px;
  margin: 1.5rem 0 0.75rem;
}

.calculator-theory__section p {
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.calculator-theory__section ul {
  color: var(--muted-foreground);
  margin-bottom: 1rem;
  padding-left: 20px;
}

.calculator-theory__section li {
  margin-bottom: 0.5rem;
}

.calculator-theory__section strong {
  color: var(--foreground);
  font-weight: 600;
}

/* Formula Card */
.formula-card {
  background: var(--accent);
  padding: 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent-foreground);
  text-align: center;
  margin: 1rem 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .calculator-theory-wrapper {
    grid-template-columns: 1fr;
  }

  .calculator-toc {
    position: static;
    max-height: none;
    margin-bottom: 1.5rem;
  }

  .calculator-theory__section h2 {
    font-size: 24px;
  }

  .calculator-theory__desc {
    font-size: 16px;
  }
}

/* ============================================================
   Enhanced Visual Effects and Animations
   ============================================================ */

/* Smooth transitions for all interactive elements */
a, button, .card, input, select {
  transition: all 0.3s ease;
}

/* Calculator shell enhancements */
.calc-shell {
  animation: fadeInUp 0.5s ease-out;
}

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

/* Enhanced card hover effects */
.card--hoverable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Calculator input focus effects */
.form-input:focus, .form-select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.2);
}

/* Result row animation */
.result-row {
  animation: slideIn 0.3s ease-out;
  animation-fill-mode: both;
}

.result-row:nth-child(1) { animation-delay: 0.1s; }
.result-row:nth-child(2) { animation-delay: 0.2s; }
.result-row:nth-child(3) { animation-delay: 0.3s; }
.result-row:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Button press effect */
button:active {
  transform: scale(0.98);
}

/* Category navigation enhancements - removed duplicate styles */

/* Enhanced accordion animation */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  max-height: 500px;
}

/* Loading skeleton animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Pulse effect for important elements */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Progress bar animation */
.progress-bar {
  height: 4px;
  background: var(--primary);
  transition: width 0.5s ease;
}

/* Badge hover effect */
.badge:hover {
  transform: scale(1.05);
  cursor: default;
}

/* Enhanced formula card */
.formula-card {
  position: relative;
  overflow: hidden;
}

.formula-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.formula-card:hover::before {
  left: 100%;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  opacity: 0.8;
}

/* TOC active indicator enhancement */
.calculator-toc__list a.active {
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 4px;
}

/* Calculator layout transition */
.calculator-layout {
  transition: all 0.5s ease;
}

/* Enhanced button styles */
button {
  cursor: pointer;
}

button:hover {
  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);
}

/* ============================================================
   Calculator-Specific Styles
   ============================================================ */

/* Calculator input validation states */
.form-input.input-valid {
  border-color: #16a34a;
  background: #f0fdf4;
}

.form-input.input-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

/* Calculator focused state */
.calculator-focused {
  box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.15);
  transform: translateY(-2px);
}

/* Result animation */
.result-row.animate-in {
  animation: resultSlideIn 0.4s ease-out forwards;
  opacity: 0;
}

@keyframes resultSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Formula copy button */
.formula-copy-btn:hover {
  background: var(--brand) !important;
  transform: scale(1.05);
}

/* Search active state */
.search-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.2);
}

/* Keyboard navigation focus indicator */
.keyboard-nav *:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Smooth image loading */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.loaded {
  opacity: 1;
}

/* Enhanced accordion animation */
.accordion-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Calculator shell loading state */
.calc-shell {
  position: relative;
}

.calc-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.1), rgba(8, 145, 178, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: var(--radius);
}

.calculator-focused::before {
  opacity: 1;
}

/* Enhanced category card hover */
.cat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Reading progress bar styles */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--brand));
  width: 0%;
  z-index: 9999;
  transition: width 0.1s ease;
}

/* FAQ Section Styles */
.faq-section {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.faq-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.faq-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-question {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}

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

.faq-answer {
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 0.75rem 0;
}

/* Related Calculators Styles */
.related-calculators {
  margin-top: 3rem;
}

.related-calculators h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.related-calculators .grid--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.related-calculators .card {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-calculators .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.related-calculators .card__body {
  padding: 1.5rem;
}

.related-calculators .card__body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.related-calculators .card__body p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Dark mode for FAQ and Related Calculators */
html.dark .faq-section {
  background: var(--card-bg-dark);
  border-color: var(--border-color-dark);
}

html.dark .faq-question {
  color: var(--text-primary-dark);
}

html.dark .faq-answer {
  color: var(--text-secondary-dark);
}

html.dark .related-calculators h2 {
  color: var(--text-primary-dark);
}

html.dark .related-calculators .card__body h3 {
  color: var(--text-primary-dark);
}

html.dark .related-calculators .card__body p {
  color: var(--text-secondary-dark);
}

html.dark .related-calculators .card {
  background: var(--card-bg-dark);
  border-color: var(--border-color-dark);
}

html.dark .related-calculators .card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Enhanced button styles */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::after {
  width: 300px;
  height: 300px;
}

/* Enhanced input focus ring */
.form-input:focus,
.form-select:focus {
  outline: none;
}

/* Smooth dark mode transition */
@media (prefers-color-scheme: dark) {
  body {
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Dark mode color overrides using CSS variables */
  :root {
    --surface: #1a1a2e;
    --border-subtle: #2d2d44;
    --on-surface: #e0e0e0;
    --on-surface-variant: #a0a0b0;
  }

  /* Specific dark mode for category cards */
  .cat-card-modern {
    background: #1a1a2e;
    border-color: #2d2d44;
  }

  .cat-card-modern__name {
    color: #e0e0e0;
  }

  .cat-card-modern__count {
    color: #a0a0b0;
  }
}

/* Manual dark mode support */
html.dark {
  --surface: #1a1a2e;
  --border-subtle: #2d2d44;
  --on-surface: #e0e0e0;
  --on-surface-variant: #a0a0b0;
}

html.dark .cat-card-modern {
  background: #1a1a2e;
  border-color: #2d2d44;
}

html.dark .cat-card-modern__name {
  color: #e0e0e0;
}

html.dark .cat-card-modern__count {
  color: #a0a0b0;
}

/* Light mode specific styles (to ensure clarity) */
html:not(.dark) .cat-card-modern {
  background: #ffffff;
  border-color: #e2e4e9;
}

html:not(.dark) .cat-card-modern__name {
  color: #191c1e;
}

html:not(.dark) .cat-card-modern__count {
  color: #464555;
}

/* Footer dark mode */
html.dark .site-footer {
  background-color: #1a1a2e;
  border-top-color: #2d2d44;
}

html.dark .site-footer__title {
  color: #e0e0e0;
}

html.dark .site-footer__desc {
  color: #a0a0b0;
}

html.dark .site-footer__links a {
  color: #e0e0e0;
}

html.dark .site-footer__links a:hover {
  color: #818cf8;
}

html.dark .site-footer__copy {
  color: #a0a0b0;
}

/* Footer light mode */
html:not(.dark) .site-footer {
  background-color: #f7f9fb;
  border-top-color: #e2e4e9;
}

html:not(.dark) .site-footer__title {
  color: #191c1e;
}

html:not(.dark) .site-footer__desc {
  color: #464555;
}

html:not(.dark) .site-footer__links a {
  color: #191c1e;
}

html:not(.dark) .site-footer__links a:hover {
  color: #3525ce;
}

html:not(.dark) .site-footer__copy {
  color: #6b7280;
}

/* Calculator cards dark mode */
html.dark .calc-card-modern {
  background: #1a1a2e;
  border-color: #2d2d44;
}

html.dark .calc-card-modern__title {
  color: #e0e0e0;
}

html.dark .calc-card-modern__desc {
  color: #a0a0b0;
}

html.dark .calc-card-modern__badge {
  background: rgba(129, 140, 248, 0.2);
  color: #818cf8;
}

/* Calculator cards light mode */
html:not(.dark) .calc-card-modern {
  background: #ffffff;
  border-color: #e2e4e9;
}

html:not(.dark) .calc-card-modern__title {
  color: #191c1e;
}

html:not(.dark) .calc-card-modern__desc {
  color: #464555;
}

html:not(.dark) .calc-card-modern__badge {
  background: rgba(53, 37, 206, 0.1);
  color: #3525ce;
}

/* Buttons dark mode */
html.dark .btn--outline {
  border-color: #818cf8;
  color: #818cf8;
}

html.dark .btn--outline:hover {
  background-color: rgba(129, 140, 248, 0.1);
  color: #a5b4fc;
}

html.dark .btn--ghost {
  color: #d4d4d8;
}

html.dark .btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fafafa;
}

/* Buttons light mode */
html:not(.dark) .btn--outline {
  border-color: #3525ce;
  color: #3525ce;
}

html:not(.dark) .btn--outline:hover {
  background-color: #3525ce;
  color: #ffffff;
}

html:not(.dark) .btn--ghost {
  color: #565e74;
}

html:not(.dark) .btn--ghost:hover {
  background-color: #f2f4f6;
  color: #191c1e;
}

/* Form inputs dark mode (already exists, adding light mode) */
html:not(.dark) .form-input {
  background-color: #ffffff;
  border-color: #e2e4e9;
  color: #191c1e;
}

html:not(.dark) .form-input::placeholder {
  color: #9ca3af;
}

html:not(.dark) .form-input:focus {
  border-color: #3525ce;
  box-shadow: 0 0 0 3px rgba(53, 37, 206, 0.1);
}

html:not(.dark) .form-label {
  color: #374151;
}

/* Hero dark mode */
html.dark .hero {
  background-color: #0f0f1a;
}

html.dark .hero__title {
  color: #fafafa;
}

html.dark .hero__subtitle {
  color: #d4d4d8;
}

/* Hero light mode */
html:not(.dark) .hero {
  background-color: #f8fafc;
}

html:not(.dark) .hero__title {
  color: #191c1e;
}

html:not(.dark) .hero__subtitle {
  color: #464555;
}

/* Cards dark mode */
html.dark .card {
  background-color: #1a1a2e;
  border-color: #2d2d44;
}

html.dark .card--hoverable:hover {
  border-color: #818cf8;
}

/* Cards light mode */
html:not(.dark) .card {
  background-color: #ffffff;
  border-color: #e2e4e9;
}

html:not(.dark) .card--hoverable:hover {
  border-color: #3525ce;
}

/* Badges dark mode */
html.dark .badge {
  background-color: rgba(129, 140, 248, 0.2);
  color: #818cf8;
}

html.dark .badge--secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: #d4d4d8;
}

/* Badges light mode */
html:not(.dark) .badge {
  background-color: rgba(53, 37, 206, 0.1);
  color: #3525ce;
}

html:not(.dark) .badge--secondary {
  background-color: rgba(53, 37, 206, 0.05);
  color: #3525ce;
}

/* Main content area */
html.dark body {
  background-color: #0f0f1a;
  color: #e0e0e0;
}

html:not(.dark) body {
  background-color: #ffffff;
  color: #191c1e;
}

/* ============================================================
   Calculator Page Specific Styles
   ============================================================ */
.main-content--calculator {
  min-height: 60vh;
}

.container-wrapper--calculator {
  padding: 2.5rem 0;
}

/* ============================================================
   Archive Page Specific Styles
   ============================================================ */
.archive-container {
  padding: 2rem 0 4rem;
}

.badge--sm {
  font-size: 0.625rem;
}

/* Archive filter chips dark mode */
html.dark .archive-filter-chip {
  background: #2d2d44 !important;
  border-color: #404050 !important;
  color: #e0e0e0 !important;
}

html.dark .archive-filter-chip:hover {
  border-color: #818cf8 !important;
  color: #818cf8 !important;
}

html.dark .archive-filter-chip.is-active {
  background: #818cf8 !important;
  color: #ffffff !important;
}

html.dark .archive-filter-chip__count {
  background: #2d2d44 !important;
  color: #d4d4d8 !important;
}

html.dark .archive-filter-chip.is-active .archive-filter-chip__count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Archive filter chips light mode */
html:not(.dark) .archive-filter-chip {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
  color: #191c1e !important;
}

html:not(.dark) .archive-filter-chip:hover {
  border-color: #3525ce !important;
  color: #3525ce !important;
}

html:not(.dark) .archive-filter-chip.is-active {
  background: #3525ce !important;
  color: #ffffff !important;
}

html:not(.dark) .archive-filter-chip__count {
  background: #e2e4e9 !important;
  color: #464555 !important;
}

html:not(.dark) .archive-filter-chip.is-active .archive-filter-chip__count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #3525ce !important;
}

/* Archive calculator cards dark mode */
html.dark .calc-card {
  background-color: #1a1a2e !important;
  border-color: #2d2d44 !important;
}

html.dark .calc-card__title {
  color: #e0e0e0 !important;
}

html.dark .calc-card__desc {
  color: #a0a0b0 !important;
}

html.dark .calc-card__cta {
  color: #818cf8 !important;
}

html.dark .calc-card__header .badge--secondary {
  background-color: rgba(129, 140, 248, 0.2) !important;
  color: #818cf8 !important;
}

/* Archive calculator cards light mode */
html:not(.dark) .calc-card {
  background-color: #ffffff !important;
  border-color: #e2e4e9 !important;
}

html:not(.dark) .calc-card__title {
  color: #191c1e !important;
}

html:not(.dark) .calc-card__desc {
  color: #464555 !important;
}

html:not(.dark) .calc-card__cta {
  color: #3525ce !important;
}

html:not(.dark) .calc-card__header .badge--secondary {
  background-color: rgba(53, 37, 206, 0.1) !important;
  color: #3525ce !important;
}

/* Archive category sections dark mode */
html.dark .archive-category__header h2 {
  color: #e0e0e0 !important;
}

html.dark .archive-category__badge {
  background: rgba(129, 140, 248, 0.2) !important;
  color: #818cf8 !important;
}

/* Archive category sections light mode */
html:not(.dark) .archive-category__header h2 {
  color: #191c1e !important;
}

html:not(.dark) .archive-category__badge {
  background: rgba(53, 37, 206, 0.1) !important;
  color: #3525ce !important;
}

/* ============================================================
   Single Calculator Page Dark Mode
   ============================================================ */

/* Calculator category navigation dark mode - updated carousel style */
html.dark .calc-category-nav {
  background-color: rgba(10, 10, 12, 0.8) !important;
  border-top-color: var(--line) !important;
  border-bottom-color: var(--line) !important;
}

html.dark .calc-category-nav__link {
  background: rgba(26, 26, 46, 0.8) !important;
  color: var(--ink-3) !important;
  border-color: var(--line) !important;
}

html.dark .calc-category-nav__link:hover {
  color: var(--brand-2) !important;
  background: rgba(26, 26, 46, 1) !important;
  border-color: var(--brand-2) !important;
}

html.dark .calc-category-nav__link.is-active {
  color: #fff !important;
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}

/* Calculator category navigation light mode - updated carousel style */
html:not(.dark) .calc-category-nav {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-top-color: var(--line-2) !important;
  border-bottom-color: var(--line-2) !important;
}

html:not(.dark) .calc-category-nav__link {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ink-3) !important;
  border-color: var(--line-2) !important;
}

html:not(.dark) .calc-category-nav__link:hover {
  color: var(--brand) !important;
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--brand) !important;
}

html:not(.dark) .calc-category-nav__link.is-active {
  color: #fff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Calculator TOC (index) dark mode */
html.dark .calculator-toc {
  background: #1a1a2e !important;
  border-color: #2d2d44 !important;
}

html.dark .calculator-toc h4 {
  color: #818cf8 !important;
}

html.dark .calculator-toc__list a {
  color: #a0a0b0 !important;
}

html.dark .calculator-toc__list a:hover {
  color: #818cf8 !important;
  border-left-color: #818cf8 !important;
}

html.dark .calculator-toc__list a.active {
  color: #818cf8 !important;
  border-left-color: #818cf8 !important;
}

/* Calculator TOC (index) light mode */
html:not(.dark) .calculator-toc {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
}

html:not(.dark) .calculator-toc h4 {
  color: #3525ce !important;
}

html:not(.dark) .calculator-toc__list a {
  color: #64748b !important;
}

html:not(.dark) .calculator-toc__list a:hover {
  color: #3525ce !important;
  border-left-color: #3525ce !important;
}

html:not(.dark) .calculator-toc__list a.active {
  color: #3525ce !important;
  border-left-color: #3525ce !important;
}

/* Calculator page title dark mode */
html.dark .calc-page__title {
  color: #e0e0e0 !important;
}

html.dark .calc-page__desc {
  color: #a0a0b0 !important;
}

/* Calculator page title light mode */
html:not(.dark) .calc-page__title {
  color: #191c1e !important;
}

html:not(.dark) .calc-page__desc {
  color: #464555 !important;
}

/* Calculator simple list dark mode */
html.dark .calculator-simple-list__item {
  color: #e0e0e0 !important;
}

html.dark .calculator-simple-list__item:hover {
  color: #818cf8 !important;
  border-left-color: #818cf8 !important;
  background-color: #2d2d44 !important;
}

/* Calculator simple list light mode */
html:not(.dark) .calculator-simple-list__item {
  color: #191c1e !important;
}

html:not(.dark) .calculator-simple-list__item:hover {
  color: #3525ce !important;
  border-left-color: #3525ce !important;
  background-color: #f8fafc !important;
}

/* Taxonomy page dark mode */
html.dark .taxonomy-title {
  color: #e0e0e0 !important;
}

html.dark .taxonomy-description {
  color: #a0a0b0 !important;
}

/* Taxonomy page light mode */
html:not(.dark) .taxonomy-title {
  color: #191c1e !important;
}

html:not(.dark) .taxonomy-description {
  color: #464555 !important;
}

/* Calculator widgets dark mode */
html.dark .calc-shell {
  background: #1a1a2e !important;
  border-color: #2d2d44 !important;
}

html.dark .calculator-widget-container {
  background: #1a1a2e !important;
  border-color: #2d2d44 !important;
}

html.dark .calc-widget-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

html.dark .calc-widget-header .reset-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

html.dark .calc-widget-header .reset-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark .calc-widget-content {
  background: #1a1a2e !important;
}

html.dark .calc-widget-footer .action-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #a0a0b0 !important;
}

html.dark .calc-widget-footer .action-btn:hover {
  background: rgba(129, 140, 248, 0.15) !important;
  border-color: rgba(129, 140, 248, 0.3) !important;
  color: #818cf8 !important;
}

html.dark .calc-widget-action-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
}

html.dark .calc-shell .form-input {
  background: #2d2d44 !important;
  border-color: #404050 !important;
  color: #e0e0e0 !important;
}

html.dark .calc-shell .form-input:focus {
  border-color: #818cf8 !important;
  background: #2d2d44 !important;
}

html.dark .calc-shell .form-label {
  color: #e0e0e0 !important;
}

html.dark .calc-shell .form-select {
  background: #2d2d44 !important;
  border-color: #404050 !important;
  color: #e0e0e0 !important;
}

html.dark .calc-shell .form-select:focus {
  border-color: #818cf8 !important;
  background: #2d2d44 !important;
}

html.dark .calc-shell__result {
  background: #2d2d44 !important;
  border-color: #404050 !important;
  color: #e0e0e0 !important;
}

html.dark .calc-shell__result-label {
  color: #a0a0b0 !important;
}

html.dark .calc-shell__result-value {
  color: #818cf8 !important;
}

/* Calculator widgets light mode */
html:not(.dark) .calc-shell {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
}

html:not(.dark) .calculator-widget-container {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
}

html:not(.dark) .calc-widget-header {
  background: linear-gradient(135deg, #3525ce 0%, #6366f1 100%) !important;
}

html:not(.dark) .calc-widget-header .reset-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

html:not(.dark) .calc-widget-header .reset-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

html:not(.dark) .calc-widget-content {
  background: #ffffff !important;
}

html:not(.dark) .calc-widget-footer .action-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #464555 !important;
}

html:not(.dark) .calc-widget-footer .action-btn:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  color: #6366f1 !important;
}

html:not(.dark) .calc-widget-action-btn {
  background: linear-gradient(135deg, #3525ce 0%, #6366f1 100%) !important;
  color: #ffffff !important;
}

html:not(.dark) .calc-shell .form-input {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
  color: #191c1e !important;
}

html:not(.dark) .calc-shell .form-input:focus {
  border-color: #3525ce !important;
  background: #ffffff !important;
}

html:not(.dark) .calc-shell .form-label {
  color: #191c1e !important;
}

html:not(.dark) .calc-shell .form-select {
  background: #ffffff !important;
  border-color: #e2e4e9 !important;
  color: #191c1e !important;
}

html:not(.dark) .calc-shell .form-select:focus {
  border-color: #3525ce !important;
  background: #ffffff !important;
}

html:not(.dark) .calc-shell__result {
  background: #f8fafc !important;
  border-color: #e2e4e9 !important;
  color: #191c1e !important;
}

html:not(.dark) .calc-shell__result-label {
  color: #64748b !important;
}

html:not(.dark) .calc-shell__result-value {
  color: #3525ce !important;
}

/* ============================================================
   Taxonomy Page Specific Styles
   ============================================================ */
.taxonomy-container {
  max-width: 64rem;
  padding: 3rem 1rem;
}

.taxonomy-title {
  font-size: 2.25rem;
  font-weight: 700;
}

.taxonomy-description {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  max-width: 42rem;
}

/* ============================================================
   Area Calculator Widget Styles
   ============================================================ */
.area-calculator {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  max-width: 100%;
}

.area-calculator .calculator-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.area-calculator .calculator-header h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.area-calculator .calculator-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.area-calculator .figure-selector {
  margin-bottom: 1.5rem;
}

.area-calculator .figure-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
}

.area-calculator .figure-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.area-calculator .figure-accordion {
  margin-bottom: 1.5rem;
}

.area-calculator details {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.area-calculator summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
  background: var(--bg);
  transition: background 0.3s ease;
}

.area-calculator summary:hover {
  background: var(--border-color);
}

.area-calculator details[open] summary {
  background: var(--primary);
  color: white;
}

.area-calculator details[open] .input-group {
  padding: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.area-calculator .calc-btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.area-calculator .figure-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.area-calculator .tab-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  color: var(--text);
}

.area-calculator .tab-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.area-calculator .tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.area-calculator .figure-inputs {
  margin-bottom: 1.5rem;
}

.area-calculator .input-group {
  display: none;
  gap: 1rem;
  flex-wrap: wrap;
}

/* CSS-only tab switching for area calculator */
.area-calculator .tab-radio {
  display: none;
}

.area-calculator .tab-radio:checked + .tab-label {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.area-calculator #tab-cuadrado:checked ~ .figure-inputs .input-group-cuadrado,
.area-calculator #tab-rectangulo:checked ~ .figure-inputs .input-group-rectangulo,
.area-calculator #tab-triangulo:checked ~ .figure-inputs .input-group-triangulo,
.area-calculator #tab-circulo:checked ~ .figure-inputs .input-group-circulo,
.area-calculator #tab-trapecio:checked ~ .figure-inputs .input-group-trapecio,
.area-calculator #tab-rombo:checked ~ .figure-inputs .input-group-rombo,
.area-calculator #tab-paralelogramo:checked ~ .figure-inputs .input-group-paralelogramo,
.area-calculator #tab-pentagono:checked ~ .figure-inputs .input-group-pentagono,
.area-calculator #tab-hexagono:checked ~ .figure-inputs .input-group-hexagono,
.area-calculator #tab-elipse:checked ~ .figure-inputs .input-group-elipse,
.area-calculator #tab-sector:checked ~ .figure-inputs .input-group-sector,
.area-calculator #tab-anillo:checked ~ .figure-inputs .input-group-anillo,
.area-calculator #tab-tri-rect:checked ~ .figure-inputs .input-group-tri-rect,
.area-calculator #tab-poligono:checked ~ .figure-inputs .input-group-poligono,
.area-calculator #tab-lunula:checked ~ .figure-inputs .input-group-lunula,
.area-calculator #tab-corona:checked ~ .figure-inputs .input-group-corona {
  display: flex;
}

.area-calculator .input-group label {
  flex: 1;
  min-width: 120px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.area-calculator .input-group input {
  flex: 1;
  min-width: 150px;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
}

.area-calculator .input-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.area-calculator .calculator-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.area-calculator .calc-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.area-calculator .calc-btn-primary {
  background: var(--primary);
  color: white;
}

.area-calculator .calc-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.area-calculator .calc-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border-color);
}

.area-calculator .calc-btn-secondary:hover {
  background: var(--border-color);
}

.area-calculator .calculator-result {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
  padding: 1.5rem;
  border-left: 4px solid var(--primary);
}

.area-calculator .calculator-result h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.area-calculator .result-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.area-calculator .result-formula {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-family: monospace;
  background: var(--bg);
  padding: 0.5rem;
  border-radius: var(--border-radius-sm);
}

@media (max-width: 768px) {
  .area-calculator .figure-tabs {
    flex-direction: column;
  }
  
  .area-calculator .input-group {
    flex-direction: column;
  }
  
  .area-calculator .calculator-actions {
    flex-direction: column;
  }
}
/* ============================================================
   CALCULADORA PRO · MATH-TECH EDITORIAL (v3.0)
   ============================================================
   Pegar al FINAL de style.css (este bloque anula los estilos
   antiguos del hero, categorías, populares, stats y CTA).
   No toca la lógica de calc-shell, formularios de calculadora,
   resolvedor interno, etc.
   ============================================================ */

:root {
    /* Brand · Math-Tech Editorial */
    --brand: #3525ce;
    --brand-2: #4f46e6;
    --brand-deep: #1c0f8a;
    --brand-tint: #eeebff;
    --brand-tint-2: #e2dfff;

    /* Neutrales editoriales */
    --ink: #0e0d12;
    --ink-2: #1f1d28;
    --ink-3: #46455a;
    --ink-4: #777587;
    --line: #e7e6ef;
    --line-2: #d6d4e2;
    --paper: #f5f3ed;
    --paper-2: #ece9df;
    --surface: #ffffff;

    /* Acentos */
    --ok: #1f8a5b;
    --warm: #d97757;

    /* Type */
    --sans: "Inter", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --serif: "Instrument Serif", "Times New Roman", serif;

    /* Layout */
    --maxw: 1320px;
    --pad: clamp(20px, 4vw, 56px);
    --radius: 18px;
    --radius-sm: 10px;
    --radius-lg: 28px;
}

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

::selection { background: var(--brand); color: #fff; }

.mono { font-family: var(--mono); letter-spacing: .02em; }
.serif { font-family: var(--serif); font-style: italic; }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ─────────── HEADER ─────────── */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(245, 243, 237, .78);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(14, 13, 18, .06);
}
.topbar__row {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px; gap: 24px;
}
.topbar__left { flex-shrink: 0; }
.logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 18px; letter-spacing: -.01em;
    color: var(--ink); text-decoration: none;
}
.logo b { color: var(--ink); font-weight: 700; }
.logo .accent { color: var(--brand); }
.logo--image .custom-logo-img {
    height: var(--logo-max-height, 2.5rem);
    width: var(--logo-max-width, none);
    max-width: var(--logo-max-width, none);
    object-fit: var(--logo-object-fit, contain);
}
.footer .logo--image .custom-logo-img {
    height: var(--footer-logo-size, 24px);
    width: var(--footer-logo-max-width, none);
    max-width: var(--footer-logo-max-width, none);
    object-fit: var(--footer-logo-object-fit, contain);
}
.footer .logo { font-size: 14px; }
.footer .logo__mark { width: 28px; height: 28px; }
.footer .logo__mark::after { width: 14px; height: 14px; bottom: -6px; right: -6px; font-size: 11px; }
.logo__mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ink); position: relative; flex-shrink: 0;
}
.logo__mark::before {
    content: ""; position: absolute; inset: 5px; border-radius: 5px;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0 2px, transparent 3px),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 60%, var(--warm) 100%);
}
.logo__mark::after {
    content: "="; position: absolute; color: #fff;
    font-family: var(--mono); font-weight: 600; font-size: 13px;
    bottom: -8px; right: -8px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--ink);
    display: grid; place-items: center;
    border: 2px solid var(--paper);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 8px 14px; border-radius: 999px; color: var(--ink-3);
    font-size: 14.5px; font-weight: 500;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.nav a:hover { background: rgba(14, 13, 18, .06); color: var(--ink); }
.nav a.is-current { background: var(--ink); color: #fff; }
.nav .hide-mobile { display: none; }
@media (min-width: 900px) { .nav .hide-mobile { display: inline-flex; } }

.topbar__right { display: flex; align-items: center; gap: 10px; }
.qsearch {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink-3); font-size: 13.5px;
    min-width: 240px;
}
.qsearch .material-symbols-outlined { font-size: 18px; color: var(--ink-4); }
.qsearch__input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 13.5px; color: var(--ink);
    padding: 0;
}
.qsearch__input::placeholder { color: var(--ink-4); }
.qsearch kbd {
    margin-left: auto; font-family: var(--mono); font-size: 11px;
    padding: 2px 6px; border-radius: 5px;
    background: var(--paper); border: 1px solid var(--line);
    color: var(--ink-3);
}

.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn .material-symbols-outlined { font-size: 20px; }

#theme-toggle .theme-toggle__icon { display: none; }
html:not(.dark) #theme-toggle .theme-toggle__icon--moon { display: block; }
html.dark #theme-toggle .theme-toggle__icon--sun { display: block; }

@media (max-width: 980px) {
    .nav { display: none; }
    .qsearch { min-width: 180px; }
}
@media (max-width: 640px) {
    .qsearch { display: none; }
}

/* ─────────── HERO ─────────── */
.hero { position: relative; overflow: hidden; }
.hero__bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(79, 70, 230, .18), transparent 60%),
        radial-gradient(50% 70% at 0% 90%, rgba(217, 119, 87, .14), transparent 60%);
}
.hero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(14, 13, 18, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 13, 18, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.hero__inner { position: relative; padding: 50px 0 70px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(14, 13, 18, .08);
}
.eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 4px rgba(31, 138, 91, .18);
}

.hero__h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(56px, 9.2vw, 144px);
    line-height: .92;
    letter-spacing: -.045em;
    color: var(--ink);
    margin: 24px 0 28px;
    max-width: 1100px;
}
.hero__h1 .gradient {
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 40%, var(--warm) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__h1 .serif {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    color: var(--ink); letter-spacing: -.02em;
}

.hero__lead {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.55; color: var(--ink-3);
    max-width: 620px; margin: 0 0 36px;
}

.heroSearch {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    max-width: 680px;
    box-shadow: 0 30px 60px -30px rgba(28, 15, 138, .35), 0 4px 12px rgba(14, 13, 18, .04);
}
.heroSearch > .material-symbols-outlined { font-size: 24px; color: var(--ink-4); }
.heroSearch__input {
    flex: 1; border: 0; outline: 0; font: inherit; font-size: 17px;
    padding: 14px 4px; background: transparent; color: var(--ink);
}
.heroSearch__input::placeholder { color: var(--ink-4); }
.heroSearch button.go {
    height: 48px; padding: 0 22px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-weight: 600; font-size: 14.5px; border: 0;
    display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.heroSearch button.go:hover { background: var(--brand); }
.heroSearch button.go .material-symbols-outlined { font-size: 18px; color: #fff; }

.hero__search-results {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 8px; z-index: 50; text-align: left;
    background: #fff; border: 1px solid var(--line);
    border-radius: 16px; padding: 8px;
    box-shadow: 0 20px 40px -10px rgba(14, 13, 18, .18);
}

.heroQuick {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 18px; color: var(--ink-3);
}
.heroQuick .lbl {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--ink-4); margin-right: 6px;
}
.chip {
    padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line);
    font-size: 13.5px; color: var(--ink-2);
    transition: all .15s; text-decoration: none;
}
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Fórmulas flotantes */
.formulaCard {
    position: absolute; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 10px 14px;
    font-family: var(--mono); font-size: 13px; color: var(--ink);
    box-shadow: 0 10px 30px -8px rgba(14, 13, 18, .18);
    display: flex; align-items: center; gap: 8px; z-index: 2;
}
.formulaCard .tag {
    font-size: 9.5px; letter-spacing: .16em; color: var(--ink-4);
    padding: 2px 6px; border-radius: 4px; background: var(--paper);
    text-transform: uppercase;
}
.formulaCard .eq { font-weight: 500; }
.formulaCard .eq .v { color: var(--brand); }
.fc1 { top: 90px; right: 6%; transform: rotate(3deg); }
.fc2 { top: 32%; right: 12%; transform: rotate(-4deg); }
.fc3 { bottom: 140px; right: 3%; transform: rotate(2deg); }
@media (max-width: 1100px) { .formulaCard { display: none; } }

/* Ticker */
.ticker {
    position: relative; margin-top: 60px;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .5);
    padding: 14px 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
    display: flex; gap: 48px; width: max-content;
    animation: tickerSlide 60s linear infinite;
}
.ticker__item {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink-3); white-space: nowrap;
}
.ticker__item b { color: var(--ink); font-weight: 600; }
.ticker__item .sep {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand); opacity: .7;
}
@keyframes tickerSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─────────── CATEGORIES CAROUSEL (FULL-WIDTH) ─────────── */
.categories-carousel-section {
    position: relative;
    margin: 80px 0;
    padding: 60px 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.categories-carousel__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, .08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(16, 185, 129, .06) 0%, transparent 50%);
    pointer-events: none;
}

.categories-carousel__grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(99, 102, 241, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
}

.categories-carousel__inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    z-index: 1;
}

.categories-carousel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 32px;
}

.categories-carousel__header-content {
    flex: 1;
}

.categories-carousel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--brand);
    margin-bottom: 16px;
}

.categories-carousel__eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.2); }
}

.categories-carousel__title {
    font-family: var(--heading-font);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 12px;
}

.categories-carousel__title .serif {
    font-family: var(--serif-font);
    font-weight: 400;
    font-style: italic;
}

.categories-carousel__description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 600px;
}

.categories-carousel__header-cta {
    flex-shrink: 0;
}

.categories-carousel__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--brand);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 8px;
    text-decoration: none;
    transition: all .3s ease;
}

.categories-carousel__cta:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, .3);
}

/* Carousel Wrapper */
.categories-carousel__wrapper {
    position: relative;
    margin: 0 -24px;
}

.categories-carousel__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 24px;
    margin: -20px -24px;
}

.categories-carousel__scroll::-webkit-scrollbar {
    display: none;
}

.categories-carousel__scroll::before,
.categories-carousel__scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.categories-carousel__scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--paper), transparent);
}

.categories-carousel__scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--paper), transparent);
}

.categories-carousel__track {
    display: flex;
    gap: 20px;
    width: max-content;
}

/* Category Cards */
.categories-carousel__card {
    display: flex;
    flex-direction: column;
    width: 280px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.categories-carousel__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    opacity: 0;
    transition: opacity .3s ease;
}

.categories-carousel__card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 12px 32px rgba(99, 102, 241, .15);
}

.categories-carousel__card:hover::before {
    opacity: 1;
}

.categories-carousel__card--featured {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(99, 102, 241, .05) 100%);
    border-color: var(--brand);
}

.categories-carousel__card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 28px;
    color: var(--brand);
    transition: all .3s ease;
}

.categories-carousel__card:hover .categories-carousel__card-icon {
    background: var(--brand);
    color: var(--paper);
    transform: scale(1.1);
}

.categories-carousel__card-content {
    flex: 1;
}

.categories-carousel__card-title {
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.3;
}

.categories-carousel__card-subtitle {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 16px;
    line-height: 1.4;
}

.categories-carousel__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.categories-carousel__card-count {
    font-size: 13px;
    color: var(--ink-2);
}

.categories-carousel__card-count b {
    color: var(--brand);
    font-weight: 700;
}

.categories-carousel__card-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--brand);
    color: var(--paper);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 20px;
}

.categories-carousel__card-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-2);
    transition: all .3s ease;
    opacity: 0;
    transform: translateX(-8px);
}

.categories-carousel__card:hover .categories-carousel__card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.categories-carousel__card:hover .categories-carousel__card-arrow {
    background: var(--brand);
    color: var(--paper);
    border-color: var(--brand);
}

/* Navigation Buttons */
.categories-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    z-index: 10;
    transition: all .3s ease;
    opacity: 0;
}

.categories-carousel__wrapper:hover .categories-carousel__nav {
    opacity: 1;
}

.categories-carousel__nav:hover {
    background: var(--brand);
    color: var(--paper);
    border-color: var(--brand);
    transform: translateY(-50%) scale(1.1);
}

.categories-carousel__nav--prev {
    left: 8px;
}

.categories-carousel__nav--next {
    right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .categories-carousel-section {
        margin: 60px 0;
        padding: 40px 0;
    }
    
    .categories-carousel__inner {
        padding: 0 16px;
    }
    
    .categories-carousel__header {
        flex-direction: column;
        gap: 20px;
    }
    
    .categories-carousel__title {
        font-size: 28px;
    }
    
    .categories-carousel__description {
        font-size: 14px;
    }
    
    .categories-carousel__wrapper {
        margin: 0 -16px;
    }
    
    .categories-carousel__scroll {
        padding: 16px;
        margin: -16px;
    }
    
    .categories-carousel__card {
        width: 240px;
        padding: 20px;
    }
    
    .categories-carousel__card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .categories-carousel__card-title {
        font-size: 16px;
    }
    
    .categories-carousel__nav {
        display: none;
    }
}

/* Dark Mode */
html.dark .categories-carousel-section {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

html.dark .categories-carousel__card {
    background: var(--surface);
    border-color: var(--line);
}

html.dark .categories-carousel__card:hover {
    border-color: var(--brand);
    box-shadow: 0 12px 32px rgba(99, 102, 241, .2);
}

html.dark .categories-carousel__card--featured {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(99, 102, 241, .1) 100%);
}

html.dark .categories-carousel__card-icon {
    background: var(--paper-2);
    color: var(--brand);
}

html.dark .categories-carousel__card-title {
    color: var(--ink);
}

html.dark .categories-carousel__card-subtitle {
    color: var(--ink-2);
}

html.dark .categories-carousel__card-count {
    color: var(--ink-2);
}

html.dark .categories-carousel__card-arrow {
    background: var(--paper-2);
    border-color: var(--line);
    color: var(--ink-2);
}

html.dark .categories-carousel__nav {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html.dark .categories-carousel__scroll::before,
html.dark .categories-carousel__scroll::after {
    background: linear-gradient(to right, var(--paper), transparent);
}

/* ─────────── SECTIONS / SECTHEAD ─────────── */
section.block { padding: 64px 0; }
.sectHead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; margin-bottom: 48px;
}
.sectHead__l { max-width: 680px; }
.kicker {
    font-family: var(--mono); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .22em;
    color: var(--brand);
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--brand); }
.sectHead h2 {
    font-size: clamp(34px, 4.4vw, 64px);
    line-height: 1; letter-spacing: -.03em; font-weight: 700;
    margin: 0 0 14px; color: var(--ink);
}
.sectHead h2 .serif {
    font-family: var(--serif); font-weight: 400;
    font-style: italic; letter-spacing: -.01em;
}
.sectHead p {
    font-size: 17px; line-height: 1.55; color: var(--ink-3);
    max-width: 560px; margin: 0;
}
.sectHead__r {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-2); font-weight: 500; font-size: 14.5px;
    padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff;
    flex-shrink: 0; text-decoration: none;
}
.sectHead__r:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sectHead__r .material-symbols-outlined { font-size: 18px; }
@media (max-width: 780px) {
    .sectHead { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ─────────── CATEGORÍAS (BENTO) ─────────── */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 14px;
}
.cat {
    position: relative; overflow: hidden;
    border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line);
    padding: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    text-decoration: none; color: inherit;
}
.cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(14, 13, 18, .18);
    border-color: var(--line-2);
}
.cat__icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    color: #fff; font-family: var(--mono); font-weight: 600; font-size: 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.cat__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: auto;
}
.cat__name {
    font-size: 22px; font-weight: 600;
    letter-spacing: -.015em; color: var(--ink); margin: 0;
}
.cat__count {
    font-family: var(--mono); font-size: 12px; color: var(--ink-4);
    display: flex; align-items: center; gap: 6px;
}
.cat__count b { color: var(--ink-2); font-weight: 600; }
.cat__arrow {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper); color: var(--ink-2);
    transition: all .2s; flex-shrink: 0;
}
.cat:hover .cat__arrow {
    background: var(--ink); color: #fff; transform: rotate(-45deg);
}
.cat__art {
    position: absolute; right: 18px; top: 18px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-4);
    display: flex; align-items: center; gap: 6px;
}
.cat__art b { color: var(--ok); font-weight: 600; }

/* Categoría destacada */
.cat--feature {
    grid-column: span 3; grid-row: span 2;
    background: linear-gradient(140deg, #15123f 0%, #1c0f8a 50%, #3525ce 100%);
    border-color: transparent; color: #fff; padding: 32px;
}
.cat--feature .cat__name { color: #fff; font-size: 34px; letter-spacing: -.025em; }
.cat--feature .cat__count { color: rgba(255, 255, 255, .6); }
.cat--feature .cat__count b { color: #fff; }
.cat--feature .cat__arrow { background: rgba(255, 255, 255, .12); color: #fff; }
.cat--feature:hover .cat__arrow { background: #fff; color: var(--ink); }
.cat--feature .featureBlurb {
    font-size: 15px; line-height: 1.5;
    color: rgba(255, 255, 255, .78); max-width: 380px; margin: 16px 0 0;
}
.cat--feature .formulaBg {
    position: absolute; inset: 0; pointer-events: none; opacity: .16;
    font-family: var(--serif); font-style: italic; color: #fff;
    font-size: 240px; line-height: 1;
    right: -30px; bottom: -80px; text-align: right;
}
.cat--feature .featureChips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px;
}
.cat--feature .featureChips span {
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    padding: 5px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
}

.cat--3 { grid-column: span 3; }
.cat--2 { grid-column: span 2; }
.cat--full { grid-column: span 6; }

/* Icon colors */
.ic-finanzas { background: linear-gradient(135deg, #1f8a5b, #0f6b46); }
.ic-salud    { background: linear-gradient(135deg, #d04562, #93203a); }
.ic-mate     { background: linear-gradient(135deg, #3525ce, #4f46e6); }
.ic-convert  { background: linear-gradient(135deg, #c97b1f, #a35d10); }
.ic-vida     { background: linear-gradient(135deg, #00798a, #005966); }

@media (max-width: 980px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .cat--feature { grid-column: span 2; grid-row: auto; padding: 24px; }
    .cat--feature .cat__name { font-size: 28px; }
    .cat--3, .cat--2, .cat--full { grid-column: span 1; }
}

/* ─────────── POPULARES ─────────── */
.popularWrap {
    background: var(--ink); color: #fff;
    border-radius: 32px; padding: 64px var(--pad);
    margin: 0 calc(var(--pad) * -1);
}
@media (max-width: 900px) {
    .popularWrap { border-radius: 0; margin: 0 calc(var(--pad) * -1); }
}
.popularWrap .sectHead h2 { color: #fff; }
.popularWrap .sectHead p { color: rgba(255, 255, 255, .65); }
.popularWrap .kicker { color: #9d95ff; }
.popularWrap .kicker::before { background: #9d95ff; }
.popularWrap .sectHead__r {
    background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff;
}
.popularWrap .sectHead__r:hover { background: #fff; color: var(--ink); }

.popGrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .popGrid { grid-template-columns: 1fr; } }

.pop {
    position: relative; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px; padding: 26px;
    background: rgba(255, 255, 255, .03);
    display: flex; flex-direction: column; gap: 18px;
    min-height: 280px; transition: all .25s;
    text-decoration: none; color: #fff;
}
.pop:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}
.pop__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
}
.pop__num {
    font-family: var(--mono); font-size: 12px;
    color: rgba(255, 255, 255, .45); letter-spacing: .12em;
}
.pop__cat {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
}
.pop h3 {
    font-size: 24px; line-height: 1.1; letter-spacing: -.02em;
    font-weight: 600; margin: 0; color: #fff;
}
.pop p {
    font-size: 14.5px; line-height: 1.5;
    color: rgba(255, 255, 255, .6); margin: 0; flex: 1;
}
.pop__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.pop__formula {
    font-family: var(--mono); font-size: 13px; color: #9d95ff;
    background: rgba(157, 149, 255, .08);
    padding: 5px 10px; border-radius: 7px;
}
.pop__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 500; color: #fff;
}
.pop__cta .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.pop:hover .pop__cta .material-symbols-outlined { transform: translateX(4px); }

.pop--feature {
    grid-column: span 2; grid-row: span 2;
    background: linear-gradient(140deg, #4f46e6 0%, #3525ce 50%, #1c0f8a 100%);
    border-color: transparent;
}
@media (max-width: 900px) {
    .pop--feature { grid-column: span 1; grid-row: auto; }
}
.pop--feature h3 {
    font-size: 42px; line-height: 1;
    letter-spacing: -.03em; font-weight: 700;
}
.pop--feature .pop__big {
    margin-top: auto; font-family: var(--mono);
    font-size: 13px; color: rgba(255, 255, 255, .7);
}
.pop--feature .preview {
    margin-top: 18px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px; padding: 18px;
    font-family: var(--mono);
}
.pop--feature .preview .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.pop--feature .preview .row:last-child { border-bottom: 0; }
.pop--feature .preview .row span:first-child {
    color: rgba(255, 255, 255, .5); font-size: 11.5px;
    letter-spacing: .12em; text-transform: uppercase;
}
.pop--feature .preview .row span:last-child {
    color: #fff; font-size: 15px; font-weight: 600;
}
.pop--feature .preview .row.total span:last-child {
    color: #fff7d6; font-size: 22px;
}

/* ─────────── CÓMO FUNCIONA ─────────── */
.howGrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    position: relative;
}
@media (max-width: 900px) { .howGrid { grid-template-columns: 1fr; } }
.step {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 32px;
    position: relative; overflow: hidden;
}
.step p.step__num,
.step .step__num {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 140px; line-height: .85; letter-spacing: -.04em;
    color: var(--brand); margin: 0 0 24px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2) 60%, var(--warm));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.step h3 {
    font-size: 24px; font-weight: 600;
    letter-spacing: -.015em; margin: 0 0 10px;
}
.step p {
    font-size: 15px; line-height: 1.55;
    color: var(--ink-3); margin: 0 0 20px;
}
.step__demo {
    background: var(--paper);
    border: 1px dashed var(--line-2);
    border-radius: 12px; padding: 14px;
    font-family: var(--mono); font-size: 13px; color: var(--ink-2);
    display: flex; align-items: center; gap: 10px;
}
.step__demo .ic {
    width: 26px; height: 26px; border-radius: 7px;
    display: grid; place-items: center;
    background: var(--ink); color: #fff; font-size: 14px; flex-shrink: 0;
}
.step__demo .ic .material-symbols-outlined { font-size: 16px; }
.step__demo .cursor {
    width: 7px; height: 14px; background: var(--brand);
    animation: cursorBlink 1.05s steps(2) infinite; margin-left: -4px;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* ─────────── STATS ─────────── */
.stats {
    background: linear-gradient(180deg, transparent, var(--paper-2));
    padding: 80px 0;
}
.statsGrid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
    padding: 48px; background: #fff;
    border-radius: var(--radius-lg); border: 1px solid var(--line);
    position: relative; overflow: hidden;
}
@media (max-width: 780px) {
    .statsGrid { grid-template-columns: repeat(2, 1fr); padding: 32px; gap: 24px; }
}
.stat { position: relative; padding-left: 18px; }
.stat::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 3px; height: calc(100% - 12px);
    background: var(--brand); border-radius: 99px;
}
.stat__num {
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: -.04em; line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 2px;
}
.stat__num small {
    font-size: .42em; font-weight: 600;
    color: var(--brand); margin-left: 4px;
}
.stat__lbl {
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-4); margin-top: 10px;
}
.stat__sub {
    font-size: 13.5px; color: var(--ink-3); margin-top: 4px;
}

/* ─────────── CTA RESOLVEDOR ─────────── */
.ctaWrap { padding: 48px 0 100px; }
.cta {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff;
    border-radius: var(--radius-lg);
    padding: 64px;
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 48px; align-items: center;
}
@media (max-width: 900px) {
    .cta { grid-template-columns: 1fr; padding: 40px; }
}
.cta__pill {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .18em; text-transform: uppercase;
    color: #fff; padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}
.cta__pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ffd166; box-shadow: 0 0 0 4px rgba(255, 209, 102, .2);
}
.cta h2 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: .95; letter-spacing: -.035em; font-weight: 700;
    margin: 18px 0 18px; color: #fff;
}
.cta h2 .serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.cta h2 .accent { color: #9d95ff; }
.cta p {
    font-size: 17px; line-height: 1.55;
    color: rgba(255, 255, 255, .72); max-width: 520px; margin: 0 0 28px;
}
.ctaBtn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 28px; background: #fff; color: var(--ink);
    border-radius: 999px; font-weight: 600; font-size: 15px;
    text-decoration: none;
}
.ctaBtn:hover { background: #9d95ff; color: #fff; }
.ctaBtn .material-symbols-outlined { font-size: 18px; }

.ctaCard {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px; padding: 24px;
    font-family: var(--mono); font-size: 13.5px;
}
.ctaCard .head {
    display: flex; align-items: center; justify-content: space-between;
    color: rgba(255, 255, 255, .5);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255, 255, 255, .14);
    margin-bottom: 14px;
}
.ctaCard .head .dots { display: flex; gap: 5px; }
.ctaCard .head .dots i {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); display: inline-block;
}
.ctaCard .head .dots i:nth-child(1) { background: #ff5f57; }
.ctaCard .head .dots i:nth-child(2) { background: #febc2e; }
.ctaCard .head .dots i:nth-child(3) { background: #28c840; }
.ctaCard .line {
    display: flex; justify-content: space-between;
    padding: 8px 0; color: #fff;
}
.ctaCard .line span:first-child { color: rgba(255, 255, 255, .55); }
.ctaCard .line .v { color: #9d95ff; }
.ctaCard .result {
    margin-top: 14px; padding: 14px;
    background: rgba(157, 149, 255, .12);
    border: 1px dashed rgba(157, 149, 255, .3);
    border-radius: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.ctaCard .result b { color: #fff7d6; font-size: 18px; font-weight: 600; }
.ctaCard .step {
    background: transparent; border: 0; padding: 0; margin-top: 14px;
    font-size: 12px; color: rgba(255, 255, 255, .55); line-height: 1.5;
    overflow: visible;
}
.ctaCard .step::before { content: "↳ "; color: #9d95ff; }
.cta__deco {
    position: absolute; font-family: var(--serif); font-style: italic;
    font-size: 560px; line-height: .8;
    color: rgba(255, 255, 255, .04);
    right: -100px; top: -180px; pointer-events: none;
    letter-spacing: -.04em;
}

/* ─────────── FOOTER ─────────── */
.footer {
    background: var(--paper-2);
    border-top: 1px solid var(--line-2);
    padding: 64px 0 32px; margin-top: 80px;
}
.footerGrid {
    display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
}
@media (max-width: 780px) { .footerGrid { grid-template-columns: 1fr 1fr; } }
.footer h4 {
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-4); margin: 0 0 16px; font-weight: 600;
}
.footer ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.footer ul a {
    color: var(--ink-2); font-size: 14.5px; text-decoration: none;
}
.footer ul a:hover { color: var(--brand); }
.footer__brand {
    font-size: 15px; line-height: 1.55;
    color: var(--ink-3); margin: 14px 0 20px; max-width: 340px;
}
.footer__social { display: flex; gap: 10px; }
.footer__newsletter-desc {
    font-size: 14px; color: var(--ink-3);
    margin: 0 0 14px; line-height: 1.5;
}
.footer__newsletter { display: flex; gap: 6px; }
.footer__newsletter-input {
    flex: 1; border: 1px solid var(--line); background: #fff;
    padding: 10px 14px; border-radius: 999px;
    font: inherit; font-size: 14px; outline: 0; color: var(--ink);
}
.footer__newsletter-btn {
    background: var(--ink); color: #fff;
    border: 0; border-radius: 999px;
    padding: 10px 18px; font-weight: 600; font-size: 13.5px;
    cursor: pointer;
}
.footer__newsletter-btn:hover { background: var(--brand); }
.footer__bottom {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    color: var(--ink-4); font-size: 13px; font-family: var(--mono);
}

/* ─────────── DARK MODE OVERRIDES ─────────── */
html.dark {
    --paper: #0a0a0c;
    --paper-2: #131316;
    --surface: #17171b;
    --ink: #f5f4f8;
    --ink-2: #d4d3dc;
    --ink-3: #98969f;
    --ink-4: #76747c;
    --line: #27262e;
    --line-2: #36353e;
    --brand: #9d95ff;
    --brand-2: #b4afff;
}
html.dark body { background: var(--paper); color: var(--ink); }
html.dark .topbar { background: rgba(10, 10, 12, .8); border-bottom-color: rgba(255, 255, 255, .06); }
html.dark .qsearch, html.dark .icon-btn, html.dark .cat, html.dark .step, html.dark .sectHead__r,
html.dark .statsGrid, html.dark .footer__newsletter-input {
    background: var(--surface); border-color: var(--line);
}
html.dark .qsearch kbd { background: var(--paper-2); border-color: var(--line); }
html.dark .step__demo { background: var(--paper-2); border-color: var(--line); }
html.dark .formulaCard { background: var(--surface); border-color: var(--line); color: var(--ink); }
html.dark .formulaCard .tag { background: var(--paper-2); }
html.dark .ticker { background: rgba(255, 255, 255, .02); border-color: var(--line); }
html.dark .nav a.is-current { background: var(--brand); color: var(--paper); }
html.dark .chip { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
html.dark .chip:hover { background: var(--brand); color: var(--paper); border-color: var(--brand); }
html.dark .footer { background: var(--paper-2); border-color: var(--line); }

/* ============================================================
   Dark Mode for Bento Grid Categories
   ============================================================ */
html.dark .cat {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html.dark .cat:hover {
    border-color: var(--line-2);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

html.dark .cat__icon {
    background: var(--paper-2);
    color: var(--ink-2);
}

html.dark .cat:hover .cat__icon {
    color: var(--brand);
}

html.dark .cat__name {
    color: var(--ink);
}

html.dark .cat__count {
    color: var(--ink-3);
}

html.dark .cat__count b {
    color: var(--ink);
}

html.dark .cat__arrow {
    background: var(--paper-2);
    color: var(--ink-2);
}

html.dark .cat:hover .cat__arrow {
    background: var(--brand);
    color: var(--paper);
}

html.dark .cat__art {
    color: var(--ink-4);
}

html.dark .cat__art b {
    color: var(--brand);
}

/* Dark mode for featured category */
html.dark .cat--feature {
    background: linear-gradient(140deg, #1a0f3a 0%, #2d1a8a 50%, #4a35ce 100%);
    border-color: transparent;
    color: #fff;
}

html.dark .cat--feature .cat__name {
    color: #fff;
}

html.dark .cat--feature .cat__count {
    color: rgba(255, 255, 255, 0.6);
}

html.dark .cat--feature .cat__count b {
    color: #fff;
}

html.dark .cat--feature .cat__arrow {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

html.dark .cat--feature:hover .cat__arrow {
    background: #fff;
    color: var(--ink);
}

html.dark .cat--feature .featureBlurb {
    color: rgba(255, 255, 255, 0.78);
}

html.dark .cat--feature .featureChips span {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

html.dark .cat--feature .formulaBg {
    color: #fff;
    opacity: 0.16;
}

/* ============================================================
   Improved Responsive for Bento Grid Categories
   ============================================================ */
@media (max-width: 980px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat--feature {
        grid-column: span 2;
        grid-row: auto;
        padding: 24px;
    }
    .cat--feature .cat__name {
        font-size: 28px;
    }
    .cat--3, .cat--2, .cat--full {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .bento {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cat--feature {
        grid-column: span 1;
        padding: 20px;
    }
    .cat--feature .cat__name {
        font-size: 24px;
    }
    .cat--feature .featureBlurb {
        font-size: 14px;
        max-width: 100%;
    }
    .cat--feature .formulaBg {
        font-size: 180px;
        right: -20px;
        bottom: -60px;
    }
    .cat {
        padding: 20px;
    }
    .cat__name {
        font-size: 18px;
    }
    .cat__icon {
        width: 32px;
        height: 32px;
    }
    .cat__art {
        font-size: 10px;
        right: 14px;
        top: 14px;
    }
}

/* ============================================================
   Contact Page - Math-Tech Editorial Style
   ============================================================ */
.contact-page {
  position: relative;
  padding: 50px 0 70px;
  overflow: hidden;
  background-color: var(--paper);
}

.contact-page__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(79, 70, 230, .12), transparent 60%),
    radial-gradient(50% 70% at 0% 90%, rgba(217, 119, 87, .10), transparent 60%);
}

.contact-page__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 13, 18, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 13, 18, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}

.contact-page__inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact-page__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 24px 0 16px;
}

.contact-page__lead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 48px;
  max-width: 600px;
}

.contact-page__content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}

.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 20px 40px -20px rgba(28, 15, 138, .15);
}

.contact-form-group {
  margin-bottom: 20px;
}

.contact-form-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--sans);
}

.contact-form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  transition: all 0.2s ease;
}

.contact-form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(53, 37, 206, 0.1);
}

.contact-form-input::placeholder {
  color: var(--ink-4);
}

.contact-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-form-submit:hover {
  background: var(--brand-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(53, 37, 206, 0.2);
}

.contact-form-submit .material-symbols-outlined {
  font-size: 18px;
}

.contact-page__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  transition: all 0.2s ease;
}

.contact-info-card:hover {
  background: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(53, 37, 206, 0.1);
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

.contact-info-icon .material-symbols-outlined {
  font-size: 24px;
  color: #fff;
}

.contact-info-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--sans);
}

.contact-info-text {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

/* Contact page dark mode */
html.dark .contact-page {
  background-color: #0f0f1a;
}

html.dark .contact-page__title {
  color: #fafafa;
}

html.dark .contact-page__lead {
  color: #d4d4d8;
}

html.dark .contact-form-card {
  background: rgba(26, 26, 46, 0.8);
  border-color: var(--line);
}

html.dark .contact-form-label {
  color: var(--ink);
}

html.dark .contact-form-input {
  background: rgba(26, 26, 46, 0.6);
  border-color: var(--line);
  color: var(--ink);
}

html.dark .contact-form-input:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(157, 149, 255, 0.1);
}

html.dark .contact-form-submit {
  background: var(--brand-2);
}

html.dark .contact-form-submit:hover {
  background: var(--brand);
}

html.dark .contact-info-card {
  background: rgba(26, 26, 46, 0.6);
  border-color: var(--line);
}

html.dark .contact-info-card:hover {
  background: rgba(26, 26, 46, 0.8);
  border-color: var(--brand-2);
}

html.dark .contact-info-title {
  color: var(--ink);
}

html.dark .contact-info-text {
  color: var(--ink-3);
}

/* Contact page light mode */
html:not(.dark) .contact-page {
  background-color: #f8fafc;
}

html:not(.dark) .contact-page__title {
  color: #191c1e;
}

html:not(.dark) .contact-page__lead {
  color: #464555;
}

/* Contact page responsive */
@media (max-width: 900px) {
  .contact-page__content {
    grid-template-columns: 1fr;
  }

  .contact-page__info {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-info-card {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 640px) {
  .contact-page {
    padding: 30px 0 50px;
  }

  .contact-page__title {
    font-size: clamp(28px, 8vw, 40px);
  }

  .contact-page__lead {
    font-size: 15px;
  }

  .contact-form-card {
    padding: 24px;
  }

  .contact-form-group {
    margin-bottom: 16px;
  }

  .contact-form-input {
    padding: 10px 14px;
    font-size: 14px;
  }

  .contact-form-textarea {
    min-height: 100px;
  }

  .contact-form-submit {
    padding: 12px 24px;
    font-size: 14px;
  }

  .contact-page__info {
    flex-direction: column;
  }

  .contact-info-card {
    padding: 20px;
  }

  .contact-info-icon {
    width: 40px;
    height: 40px;
  }

  .contact-info-icon .material-symbols-outlined {
    font-size: 20px;
  }

  .contact-info-title {
    font-size: 16px;
  }

  .contact-info-text {
    font-size: 13px;
  }
}

/* ============================================================
   Solver Page - Math-Tech Editorial Style
   ============================================================ */
.solver-page {
  position: relative;
  padding: 50px 0 70px;
  overflow: hidden;
  background-color: var(--paper);
}

.solver-page__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(79, 70, 230, .12), transparent 60%),
    radial-gradient(50% 70% at 0% 90%, rgba(217, 119, 87, .10), transparent 60%);
}

.solver-page__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 13, 18, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 13, 18, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}

.solver-page__inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.solver-page__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 24px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.solver-page__icon {
  font-size: 48px;
  color: var(--brand);
}

.solver-page__title .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.solver-page__lead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 48px;
  max-width: 700px;
}

.solver-page__code {
  font-family: var(--mono);
  font-size: 14px;
  background: rgba(53, 37, 206, 0.1);
  color: var(--brand);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(53, 37, 206, 0.2);
}

.solver-page__content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}

.solver-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 20px 40px -20px rgba(28, 15, 138, .15);
}

.solver-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 24px;
}

.solver-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}

.solver-tab:hover {
  color: var(--brand);
  background: rgba(53, 37, 206, 0.05);
}

.solver-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: rgba(53, 37, 206, 0.08);
}

.solver-tab .material-symbols-outlined {
  font-size: 18px;
}

.solver-form {
  margin-top: 24px;
}

.solver-form-group {
  margin-bottom: 20px;
}

.solver-form-group--variable {
  max-width: 150px;
}

.solver-form-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--sans);
}

.solver-form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: var(--mono);
  color: var(--ink);
  background: #fff;
  transition: all 0.2s ease;
}

.solver-form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(53, 37, 206, 0.1);
}

.solver-form-input::placeholder {
  color: var(--ink-4);
}

.solver-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.solver-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.2s ease;
}

.solver-form-submit:hover {
  background: var(--brand-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(53, 37, 206, 0.2);
}

.solver-form-submit .material-symbols-outlined {
  font-size: 18px;
}

.solver-error {
  margin-top: 20px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius);
  color: #dc2626;
  font-size: 14px;
}

.solver-steps {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.solver-steps__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 16px;
  font-family: var(--sans);
}

.solver-steps__header .material-symbols-outlined {
  font-size: 20px;
  color: var(--brand);
}

.solver-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.solver-steps__list li {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: rgba(53, 37, 206, 0.05);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.solver-steps__list li:last-child {
  margin-bottom: 0;
}

.solver-functions {
  padding: 32px;
}

.solver-functions__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 24px;
  font-family: var(--sans);
}

.solver-func-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.solver-func-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
}

.solver-func-card:hover {
  background: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(53, 37, 206, 0.1);
}

.solver-func-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.solver-func-icon .material-symbols-outlined {
  font-size: 16px;
  color: #fff;
}

/* Solver page dark mode */
html.dark .solver-page {
  background-color: #0f0f1a;
}

html.dark .solver-page__title {
  color: #fafafa;
}

html.dark .solver-page__lead {
  color: #d4d4d8;
}

html.dark .solver-page__code {
  background: rgba(157, 149, 255, 0.1);
  color: var(--brand-2);
  border-color: rgba(157, 149, 255, 0.2);
}

html.dark .solver-card {
  background: rgba(26, 26, 46, 0.8);
  border-color: var(--line);
}

html.dark .solver-tabs {
  border-bottom-color: var(--line);
}

html.dark .solver-tab {
  color: var(--ink-3);
  border-bottom-color: transparent;
}

html.dark .solver-tab:hover {
  color: var(--brand-2);
  background: rgba(157, 149, 255, 0.1);
}

html.dark .solver-tab.active {
  color: var(--brand-2);
  border-bottom-color: var(--brand-2);
  background: rgba(157, 149, 255, 0.15);
}

html.dark .solver-form-label {
  color: var(--ink);
}

html.dark .solver-form-input {
  background: rgba(26, 26, 46, 0.6);
  border-color: var(--line);
  color: var(--ink);
}

html.dark .solver-form-input:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(157, 149, 255, 0.1);
}

html.dark .solver-form-submit {
  background: var(--brand-2);
}

html.dark .solver-form-submit:hover {
  background: var(--brand);
}

html.dark .solver-steps {
  border-top-color: var(--line);
}

html.dark .solver-steps__header {
  color: var(--ink);
}

html.dark .solver-steps__list li {
  background: rgba(157, 149, 255, 0.08);
  border-left-color: var(--brand-2);
  color: var(--ink);
}

html.dark .solver-functions__title {
  color: var(--ink);
}

html.dark .solver-func-card {
  background: rgba(26, 26, 46, 0.6);
  border-color: var(--line);
}

html.dark .solver-func-card:hover {
  background: rgba(26, 26, 46, 0.8);
  border-color: var(--brand-2);
}

/* Solver page light mode */
html:not(.dark) .solver-page {
  background-color: #f8fafc;
}

html:not(.dark) .solver-page__title {
  color: #191c1e;
}

html:not(.dark) .solver-page__lead {
  color: #464555;
}

/* Solver page responsive */
@media (max-width: 900px) {
  .solver-page__content {
    grid-template-columns: 1fr;
  }

  .solver-func-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .solver-page {
    padding: 30px 0 50px;
  }

  .solver-page__title {
    font-size: clamp(28px, 8vw, 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .solver-page__icon {
    font-size: 36px;
  }

  .solver-page__lead {
    font-size: 15px;
  }

  .solver-card {
    padding: 24px;
  }

  .solver-tabs {
    flex-direction: column;
    gap: 0;
    border-bottom: none;
  }

  .solver-tab {
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px;
    padding: 16px;
  }

  .solver-tab.active {
    border-bottom-color: var(--brand);
  }

  .solver-form-group {
    margin-bottom: 16px;
  }

  .solver-form-input {
    padding: 12px 14px;
    font-size: 15px;
  }

  .solver-form-submit {
    padding: 12px 24px;
    font-size: 14px;
  }

  .solver-func-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solver-func-card {
    padding: 16px;
  }
}

/* Dark mode responsive adjustments */
@media (max-width: 640px) {
    html.dark .cat--feature {
        background: linear-gradient(140deg, #1a0f3a 0%, #2d1a8a 50%, #4a35ce 100%);
    }
    html.dark .cat {
        background: var(--surface);
        border-color: var(--line);
    }
}

/* ============================================================
   Dark Mode for Popular Calculators Section
   ============================================================ */
html.dark .popularWrap {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid var(--line);
}

html.dark .popularWrap .sectHead h2 {
    color: #fafafa;
}

html.dark .popularWrap .sectHead p {
    color: #d4d4d8;
}

html.dark .popularWrap .kicker {
    color: #9d95ff;
}

html.dark .popularWrap .kicker::before {
    background: #9d95ff;
}

html.dark .popularWrap .sectHead__r {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fafafa;
}

html.dark .popularWrap .sectHead__r:hover {
    background: #9d95ff;
    color: var(--paper);
    border-color: #9d95ff;
}

html.dark .pop {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fafafa;
}

html.dark .pop:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

html.dark .pop__num {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .pop__cat {
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

html.dark .pop h3 {
    color: #fafafa;
}

html.dark .pop p {
    color: #d4d4d8;
}

html.dark .pop__foot {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .pop__formula {
    color: #9d95ff;
    background: rgba(157, 149, 255, 0.1);
    border: 1px solid rgba(157, 149, 255, 0.2);
}

html.dark .pop__cta {
    color: #fafafa;
}

html.dark .pop--feature {
    background: linear-gradient(140deg, #2d1a8a 0%, #4a35ce 50%, #6b5ce8 100%);
    border-color: transparent;
}

html.dark .pop--feature h3 {
    color: #fff;
}

html.dark .pop--feature .pop__big {
    color: rgba(255, 255, 255, 0.7);
}

html.dark .pop--feature .preview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

html.dark .pop--feature .preview .row {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

html.dark .pop--feature .preview .row span:first-child {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .pop--feature .preview .row span:last-child {
    color: #fafafa;
}

html.dark .pop--feature .preview .row.total span:last-child {
    color: #fff7d6;
}

/* ============================================================
   Responsive Improvements for Popular Calculators
   ============================================================ */
@media (max-width: 640px) {
    .popularWrap {
        padding: 40px var(--pad);
        border-radius: 0;
        margin: 0 calc(var(--pad) * -1);
    }
    
    .popGrid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .pop {
        padding: 20px;
        min-height: auto;
    }
    
    .pop h3 {
        font-size: 20px;
    }
    
    .pop p {
        font-size: 14px;
    }
    
    .pop--feature h3 {
        font-size: 28px;
    }
    
    .pop--feature .preview {
        padding: 14px;
    }
    
    .pop--feature .preview .row {
        padding: 4px 0;
    }
    
    .pop--feature .preview .row span:last-child {
        font-size: 14px;
    }
    
    .pop--feature .preview .row.total span:last-child {
        font-size: 18px;
    }
    
    .popularWrap .sectHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .popularWrap .sectHead h2 {
        font-size: 28px;
    }
}

/* ============================================================
   Dark Mode for CTA Resolver Section
   ============================================================ */
html.dark .cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid var(--line);
}

html.dark .cta__pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fafafa;
}

html.dark .cta h2 {
    color: #fafafa;
}

html.dark .cta h2 .accent {
    color: #9d95ff;
}

html.dark .cta p {
    color: #d4d4d8;
}

html.dark .ctaBtn {
    background: #9d95ff;
    color: var(--paper);
    border: 1px solid #9d95ff;
}

html.dark .ctaBtn:hover {
    background: #b4afff;
    color: var(--paper);
    border-color: #b4afff;
}

html.dark .ctaCard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .ctaCard .head {
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

html.dark .ctaCard .head .dots i {
    background: rgba(255, 255, 255, 0.2);
}

html.dark .ctaCard .line {
    color: #fafafa;
}

html.dark .ctaCard .line span:first-child {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .ctaCard .line .v {
    color: #9d95ff;
}

html.dark .ctaCard .result {
    background: rgba(157, 149, 255, 0.1);
    border: 1px dashed rgba(157, 149, 255, 0.3);
}

html.dark .ctaCard .result b {
    color: #fff7d6;
}

html.dark .ctaCard .step {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .ctaCard .step::before {
    color: #9d95ff;
}

html.dark .cta__deco {
    color: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   Responsive Improvements for CTA Resolver Section
   ============================================================ */
@media (max-width: 640px) {
    .ctaWrap {
        padding: 32px 0 64px;
    }
    
    .cta {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 32px;
        border-radius: 20px;
    }
    
    .cta h2 {
        font-size: 32px;
        margin: 14px 0 14px;
    }
    
    .cta p {
        font-size: 15px;
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .ctaBtn {
        padding: 14px 24px;
        font-size: 14px;
    }
    
    .ctaCard {
        padding: 20px;
        font-size: 12px;
    }
    
    .ctaCard .head {
        font-size: 10px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    .ctaCard .line {
        font-size: 12px;
        padding: 6px 0;
    }
    
    .ctaCard .result {
        padding: 12px;
        margin-top: 12px;
    }
    
    .ctaCard .result b {
        font-size: 16px;
    }
    
    .ctaCard .step {
        font-size: 11px;
        margin-top: 12px;
    }
    
    .cta__deco {
        font-size: 320px;
        right: -60px;
        top: -120px;
    }
}