* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0066cc;
  --secondary-color: #004d99;
  --accent-color: #00a3e0;
  --text-color: #1a1a1a;
  --text-light: #666;
  --bg-color: #ffffff;
  --bg-light: #f8f9fa;
  --border-color: #e0e0e0;
  --hover-color: #004d99;
  --success-color: #28a745;

--color-background-primary: light-dark(rgba(255, 255, 255, 1), rgba(48, 48, 46, 1));
    --color-background-secondary: light-dark(rgba(245, 244, 237, 1), rgba(38, 38, 36, 1));
    --color-background-tertiary: light-dark(rgba(250, 249, 245, 1), rgba(20, 20, 19, 1));
    --color-background-inverse: light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1));
    --color-background-ghost: light-dark(rgba(255, 255, 255, 0), rgba(48, 48, 46, 0));
    --color-background-info: light-dark(rgba(214, 228, 246, 1), rgba(37, 62, 95, 1));
    --color-background-danger: light-dark(rgba(247, 236, 236, 1), rgba(96, 42, 40, 1));
    --color-background-success: light-dark(rgba(233, 241, 220, 1), rgba(27, 70, 20, 1));
    --color-background-warning: light-dark(rgba(246, 238, 223, 1), rgba(72, 58, 15, 1));
    --color-background-disabled: light-dark(rgba(255, 255, 255, 0.5), rgba(48, 48, 46, 0.5));
    --color-text-primary: light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1));
    --color-text-secondary: light-dark(rgba(61, 61, 58, 1), rgba(194, 192, 182, 1));
    --color-text-tertiary: light-dark(rgba(115, 114, 108, 1), rgba(156, 154, 146, 1));
    --color-text-inverse: light-dark(rgba(255, 255, 255, 1), rgba(20, 20, 19, 1));
    --color-text-info: light-dark(rgba(50, 102, 173, 1), rgba(128, 170, 221, 1));
    --color-text-danger: light-dark(rgba(127, 44, 40, 1), rgba(238, 136, 132, 1));
    --color-text-success: light-dark(rgba(38, 91, 25, 1), rgba(122, 185, 72, 1));
    --color-text-warning: light-dark(rgba(90, 72, 21, 1), rgba(209, 160, 65, 1));
    --color-text-disabled: light-dark(rgba(20, 20, 19, 0.5), rgba(250, 249, 245, 0.5));
    --color-text-ghost: light-dark(rgba(115, 114, 108, 0.5), rgba(156, 154, 146, 0.5));
    --color-border-primary: light-dark(rgba(31, 30, 29, 0.4), rgba(222, 220, 209, 0.4));
    --color-border-secondary: light-dark(rgba(31, 30, 29, 0.3), rgba(222, 220, 209, 0.3));
    --color-border-tertiary: light-dark(rgba(31, 30, 29, 0.15), rgba(222, 220, 209, 0.15));
    --color-border-inverse: light-dark(rgba(255, 255, 255, 0.3), rgba(20, 20, 19, 0.15));
    --color-border-ghost: light-dark(rgba(31, 30, 29, 0), rgba(222, 220, 209, 0));
    --color-border-info: light-dark(rgba(70, 130, 213, 1), rgba(70, 130, 213, 1));
    --color-border-danger: light-dark(rgba(167, 61, 57, 1), rgba(205, 92, 88, 1));
    --color-border-success: light-dark(rgba(67, 116, 38, 1), rgba(89, 145, 48, 1));
    --color-border-warning: light-dark(rgba(128, 92, 31, 1), rgba(168, 120, 41, 1));
    --color-border-disabled: light-dark(rgba(31, 30, 29, 0.1), rgba(222, 220, 209, 0.1));
    --color-ring-primary: light-dark(rgba(20, 20, 19, 0.7), rgba(250, 249, 245, 0.7));
    --color-ring-secondary: light-dark(rgba(61, 61, 58, 0.7), rgba(194, 192, 182, 0.7));
    --color-ring-inverse: light-dark(rgba(255, 255, 255, 0.7), rgba(20, 20, 19, 0.7));
    --color-ring-info: light-dark(rgba(50, 102, 173, 0.5), rgba(128, 170, 221, 0.5));
    --color-ring-danger: light-dark(rgba(167, 61, 57, 0.5), rgba(205, 92, 88, 0.5));
    --color-ring-success: light-dark(rgba(67, 116, 38, 0.5), rgba(89, 145, 48, 0.5));
    --color-ring-warning: light-dark(rgba(128, 92, 31, 0.5), rgba(168, 120, 41, 0.5));
    --font-sans: Anthropic Sans, sans-serif;
    --font-mono: ui-monospace, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-text-xs-size: 12px;
    --font-text-sm-size: 14px;
    --font-text-md-size: 16px;
    --font-text-lg-size: 20px;
    --font-heading-xs-size: 12px;
    --font-heading-sm-size: 14px;
    --font-heading-md-size: 16px;


  --p: var(--color-text-primary);
    --s: var(--color-text-secondary);
    --t: var(--color-text-tertiary);
    --bg2: var(--color-background-secondary);
    --b: var(--color-border-secondary);
}



body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

header {
  background-color: var(--bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.logo {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  align-items: center;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-links a:hover {
  color: var(--primary-color);
  background-color: var(--bg-light);
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  list-style: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
}

.dropdown-menu a:hover {
  background-color: var(--bg-light);
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-color);
}

.lang-link {
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

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

.lang-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

.lang-separator {
  color: var(--border-color);
}

main {
  min-height: calc(100vh - 300px);
}

.hero {
  background: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
  color: white;
  padding: 5rem 0;
  text-align: center;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  font-weight: 400;
}

.hero .lead {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  opacity: 0.95;
  font-weight: 400;
}

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

.btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 1rem;
  cursor: pointer;
  border: none;
}

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

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

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

.page-header {
  background: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.page-header .lead {
  font-size: 1.25rem;
  opacity: 0.9;
}

.features {
  padding: 5rem 0;
  background-color: var(--bg-light);
}

.features h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  font-weight: 700;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  padding: 2.5rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-color);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-weight: 600;
}

.feature-card p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.feature-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.feature-link:hover {
  color: var(--secondary-color);
}

.cta-section {
  background-color: var(--bg-light);
  padding: 5rem 0;
  text-align: center;
}

.cta-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.cta-section p {
  font-size: 1.25rem;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.products-section {
  padding: 4rem 0;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.product-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2.5rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.product-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-color);
}

.product-icon {
  font-size: 4rem;
  line-height: 1;
}

.product-content h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 600;
}

.product-content h2 a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-content h2 a:hover {
  color: var(--primary-color);
}

.product-content > p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.product-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
  list-style: none;
  padding: 0;
}

.product-features li {
  color: var(--text-light);
  padding-left: 1.5rem;
  position: relative;
}

.product-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success-color);
  font-weight: bold;
}

.product-detail {
  padding: 4rem 0;
}

.product-overview {
  max-width: 800px;
  margin: 0 auto 4rem;
  text-align: center;
}

.product-overview h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.product-overview p {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.6;
}

.features-detailed {
  margin-bottom: 4rem;
}

.features-detailed h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  font-weight: 700;
}

.feature-detail {
  padding: 2rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feature-detail:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.feature-detail h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  font-weight: 600;
}

.feature-detail p {
  color: var(--text-light);
  line-height: 1.6;
}

.cta-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem;
  background: var(--bg-light);
  border-radius: 12px;
}

.cta-box h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.cta-box p {
  font-size: 1.125rem;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.about-section {
  padding: 4rem 0;
}

.about-content {
  max-width: 900px;
  margin: 0 auto;
}

.about-content h2 {
  font-size: 2rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.about-content h2:first-child {
  margin-top: 0;
}

.about-content p {
  font-size: 1.125rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.value-item {
  padding: 2rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.value-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  font-weight: 600;
}

.value-item p {
  color: var(--text-light);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 0;
}

.contact-section {
  padding: 4rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 4rem;
  margin-top: 3rem;
}

.contact-info h2,
.contact-form-wrapper h2 {
  font-size: 1.75rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

.contact-item {
  margin-bottom: 2rem;
}

.contact-item h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-weight: 600;
}

.contact-item p {
  color: var(--text-light);
  line-height: 1.6;
}

.contact-item a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-item a:hover {
  color: var(--secondary-color);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-group input,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

footer {
  background-color: var(--text-color);
  color: white;
  padding: 3rem 0 2rem;
  margin-top: 5rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-section h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-section p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: white;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero .lead {
    font-size: 1.25rem;
  }

  .page-header h1 {
    font-size: 2rem;
  }

  .nav-links {
    gap: 0.25rem;
  }

  .nav-links a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .lang-switcher {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .product-item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-icon {
    font-size: 3rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: var(--bg-light);
    margin-top: 0.5rem;
    border-radius: 6px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}



/* ============================================
   Pretty Tables CSS
   A collection of table styles for any project
   ============================================ */

/* ─── CSS Variables ─────────────────────────── */
:root {

  --tbl-radius: 10px;
  --tbl-border: #d4d4d4;
  --tbl-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  --tbl-head-bg: #1a1a2e;
  --tbl-head-fg: #ffffff;

  --tbl-row-odd: #ffffff;
  --tbl-row-even: #f8f9fb;
  --tbl-row-hover: #eef2ff;

  --tbl-text: #1e1e2e;
  --tbl-text-muted: #6b7280;

  --tbl-accent-blue: #3b82f6;
  --tbl-accent-green: #10b981;
  --tbl-accent-amber: #f59e0b;
  --tbl-accent-red: #ef4444;
  --tbl-accent-purple: #8b5cf6;
}


/* ─── 1. Classic Elegant ─────────────────────
   Clean serif-inspired table with ruled borders
   ──────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--tbl-text);
  background: #ffffff;
  box-shadow: var(--tbl-shadow);
  border-radius: var(--tbl-radius);
  overflow: hidden;
  margin-bottom:1rem;
}

table thead tr {
  background: var(--tbl-head-bg);
  color: var(--tbl-head-fg);
}

table thead th {
  padding: 14px 20px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  border: none;
}

table tbody tr:nth-child(odd)  { background: var(--tbl-row-odd); }
table tbody tr:nth-child(even) { background: var(--tbl-row-even); }
table tbody tr:hover           { background: var(--tbl-row-hover); transition: background 0.15s; }

table tbody td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--tbl-border);
  vertical-align: middle;
}

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

table tfoot td {
  padding: 12px 20px;
  font-weight: 600;
  background: #f3f4f6;
  border-top: 2px solid var(--tbl-border);
}


/* ─── 2. Stripe Minimal ──────────────────────
   Ultra-clean with bold color stripe header
   ──────────────────────────────────────────── */
.table-stripe {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbl-sans);
  font-size: 14px;
  color: var(--tbl-text);
}

.table-stripe thead th {
  padding: 10px 16px;
  background: var(--tbl-accent-blue);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  border: none;
}

.table-stripe thead th:first-child { border-radius: 8px 0 0 0; }
.table-stripe thead th:last-child  { border-radius: 0 8px 0 0; }

.table-stripe tbody tr:nth-child(even) { background: #eff6ff; }
.table-stripe tbody tr:hover { background: #dbeafe; transition: background 0.1s; }

.table-stripe tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

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


/* ─── 3. Card Style ──────────────────────────
   Rounded card with soft shadow, no outer border
   ──────────────────────────────────────────── */
.table-card {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--tbl-sans);
  font-size: 14px;
  color: var(--tbl-text);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  overflow: hidden;
}

.table-card thead th {
  padding: 14px 20px;
  background: #f8faff;
  color: var(--tbl-text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 2px solid #e8ecf5;
}

.table-card tbody tr { transition: background 0.12s; }
.table-card tbody tr:hover { background: #f0f4ff; }

.table-card tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f8;
  vertical-align: middle;
}

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


/* ─── 4. Dark Mode ───────────────────────────
   Deep navy/charcoal table for dark interfaces
   ──────────────────────────────────────────── */
.table-dark {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbl-sans);
  font-size: 14px;
  color: #e2e8f0;
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.table-dark thead th {
  padding: 13px 18px;
  background: #0f172a;
  color: #94a3b8;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid #334155;
}

.table-dark tbody tr:nth-child(odd)  { background: #1e293b; }
.table-dark tbody tr:nth-child(even) { background: #243044; }
.table-dark tbody tr:hover { background: #2d3f5c; transition: background 0.12s; }

.table-dark tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid #2d3748;
  vertical-align: middle;
}

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


/* ─── 5. Lined / Borderless ──────────────────
   Horizontal rules only, editorial feel
   ──────────────────────────────────────────── */
.table-lined {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbl-sans);
  font-size: 15px;
  color: var(--tbl-text);
}

.table-lined thead th {
  padding: 8px 12px;
  border-bottom: 2px solid #1a1a2e;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  color: var(--tbl-text);
}

.table-lined tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.table-lined tbody tr:hover td { color: var(--tbl-accent-blue); transition: color 0.15s; }
.table-lined tbody tr:last-child td { border-bottom: 2px solid #1a1a2e; }


/* ─── 6. Colorful Accent ─────────────────────
   Left border accent per row with color classes
   ──────────────────────────────────────────── */
.table-accent {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbl-sans);
  font-size: 14px;
  color: var(--tbl-text);
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--tbl-shadow);
}

.table-accent thead th {
  padding: 12px 18px;
  background: #1a1a2e;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  border: none;
}

.table-accent tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.table-accent tbody tr { border-left: 4px solid transparent; transition: background 0.12s; }
.table-accent tbody tr:hover { background: #fafafa; }

/* Color variants: add class to <tr> */
.table-accent tr.accent-blue   { border-left-color: var(--tbl-accent-blue);   }
.table-accent tr.accent-green  { border-left-color: var(--tbl-accent-green);  }
.table-accent tr.accent-amber  { border-left-color: var(--tbl-accent-amber);  }
.table-accent tr.accent-red    { border-left-color: var(--tbl-accent-red);    }
.table-accent tr.accent-purple { border-left-color: var(--tbl-accent-purple); }


/* ─── Shared Badge / Status Utilities ────────
   Use inside any table cell
   ──────────────────────────────────────────── */
.tbl-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tbl-badge-success { background: #d1fae5; color: #065f46; }
.tbl-badge-warning { background: #fef3c7; color: #92400e; }
.tbl-badge-danger  { background: #fee2e2; color: #991b1b; }
.tbl-badge-info    { background: #dbeafe; color: #1e40af; }
.tbl-badge-neutral { background: #f3f4f6; color: #374151; }

/* Numeric cell alignment */
.tbl-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--tbl-mono); }

/* Sortable header indicator */
.tbl-sort { cursor: pointer; user-select: none; }
.tbl-sort::after { content: ' ↕'; opacity: 0.4; font-size: 10px; }
.tbl-sort.asc::after  { content: ' ↑'; opacity: 1; }
.tbl-sort.desc::after { content: ' ↓'; opacity: 1; }

/* Responsive wrapper — adds horizontal scroll on small screens */
.tbl-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--tbl-radius);
}


/*pricing grid*/
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 1.5rem 0;
  }
  .tier-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }
  .tier-card.featured {
    border: 2px solid var(--color-border-info);
  }
  .badge {
    display: inline-block;
    background: var(--color-background-info);
    color: var(--color-text-info);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--border-radius-md);
    margin-bottom: 4px;
    align-self: flex-start;
  }
  .tier-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
  }
  .tier-tagline {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 2px 0 0;
  }
  .price-block {
    border-top: 0.5px solid var(--color-border-tertiary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    padding: 14px 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .price-amount {
    font-size: 32px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1;
  }
  .price-currency {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-secondary);
  }
  .price-period {
    font-size: 13px;
    color: var(--color-text-secondary);
  }
  .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .features-list li {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
  }
  .check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-size: 10px;
  }
  .check-basic { background: #D3D1C7; color: #444441; }
  .check-pro { background: #B5D4F4; color: #0C447C; }
  .check-enterprise { background: #C0DD97; color: #27500A; }
  .cta-btn {
    display: block;
    text-align: center;
    padding: 10px 0;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-primary);
    transition: background 0.15s;
    text-decoration: none;
  }
  .cta-btn:hover { background: var(--color-background-secondary); }
  .cta-btn.cta-featured {
    background: var(--color-background-info);
    color: var(--color-text-info);
    border-color: transparent;
  }
  .cta-btn.cta-featured:hover { opacity: 0.85; }


  /*alerts*/
  .alert {
  padding: 1rem;
  border-radius: 8px;
  border-left: 5px solid #ccc;
  background: #f9f9f9;
  margin: 1rem 0;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

.alert-danger {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}