/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 20px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f9fefc;
  --accent-2: #f2fcf8;
  --accent-3: #ddf9ef;
  --accent-4: #c7f5e6;
  --accent-5: #b0edda;
  --accent-6: #95e2cb;
  --accent-7: #6fd3b7;
  --accent-8: #1abf9c;
  --accent-9: #00b896;
  --accent-10: #00ac8b;
  --accent-11: #007e62;
  --accent-12: #084134;

  --accent-a1: #00d58006;
  --accent-a2: #00c5760d;
  --accent-a3: #00d28722;
  --accent-a4: #00d28e38;
  --accent-a5: #00c5884f;
  --accent-a6: #01ba826a;
  --accent-a7: #00b18090;
  --accent-a8: #00b891e5;
  --accent-a9: #00b896;
  --accent-a10: #00ac8b;
  --accent-a11: #007e62;
  --accent-a12: #003b2df7;

  --accent-contrast: #fff;
  --accent-surface: #effbf6cc;
  --accent-indicator: #00b896;
  --accent-track: #00b896;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0058 173.2);
      --accent-2: oklch(98.2% 0.0117 173.2);
      --accent-3: oklch(95.9% 0.0324 173.2);
      --accent-4: oklch(93.3% 0.0511 173.2);
      --accent-5: oklch(89.9% 0.0677 173.2);
      --accent-6: oklch(85.6% 0.0833 173.2);
      --accent-7: oklch(79.8% 0.103 173.2);
      --accent-8: oklch(71.8% 0.1338 173.2);
      --accent-9: oklch(69.8% 0.1338 173.2);
      --accent-10: oklch(66% 0.1338 173.2);
      --accent-11: oklch(52% 0.1338 173.2);
      --accent-12: oklch(33.7% 0.0601 173.2);

      --accent-a1: color(display-p3 0.0196 0.8039 0.4118 / 0.02);
      --accent-a2: color(display-p3 0.0196 0.7333 0.3765 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.7608 0.451 / 0.114);
      --accent-a4: color(display-p3 0.0039 0.7686 0.4941 / 0.185);
      --accent-a5: color(display-p3 0.0039 0.698 0.4588 / 0.259);
      --accent-a6: color(display-p3 0.0039 0.6549 0.4275 / 0.35);
      --accent-a7: color(display-p3 0.0039 0.6157 0.4039 / 0.467);
      --accent-a8: color(display-p3 0 0.5961 0.4157 / 0.651);
      --accent-a9: color(display-p3 0 0.5725 0.4039 / 0.679);
      --accent-a10: color(display-p3 0 0.5176 0.3608 / 0.699);
      --accent-a11: color(display-p3 0 0.349 0.2275 / 0.789);
      --accent-a12: color(display-p3 0 0.1569 0.1098 / 0.891);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9412 0.9843 0.9647 / 0.8);
      --accent-indicator: oklch(69.8% 0.1338 173.2);
      --accent-track: oklch(69.8% 0.1338 173.2);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
      --grayscale-track: color(display-p3 0.541 0.556 0.532);
    }
  }
}


.dark {
  --accent-1: #27302d;
  --accent-2: #293531;
  --accent-3: #25453c;
  --accent-4: #1e5144;
  --accent-5: #225c4d;
  --accent-6: #286958;
  --accent-7: #2e7865;
  --accent-8: #2f8c75;
  --accent-9: #00b896;
  --accent-10: #00ac8b;
  --accent-11: #45d8b5;
  --accent-12: #a7f1da;

  --accent-a1: #fa310012;
  --accent-a2: #fd700014;
  --accent-a3: #a1fe001a;
  --accent-a4: #43fe4429;
  --accent-a5: #4afc6e37;
  --accent-a6: #54fd8c47;
  --accent-a7: #59ffa359;
  --accent-a8: #4dfdb172;
  --accent-a9: #00ffc1a8;
  --accent-a10: #00ffbb99;
  --accent-a11: #50ffcfcf;
  --accent-a12: #b1ffe4ee;

  --accent-contrast: #fff;
  --accent-surface: #3b3a1f80;
  --accent-indicator: #00b896;
  --accent-track: #00b896;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(29.9% 0.0139 173.2);
      --accent-2: oklch(31.7% 0.0184 173.2);
      --accent-3: oklch(36.4% 0.0424 173.2);
      --accent-4: oklch(39.7% 0.0596 173.2);
      --accent-5: oklch(43.3% 0.0662 173.2);
      --accent-6: oklch(47.3% 0.0715 173.2);
      --accent-7: oklch(52.1% 0.0802 173.2);
      --accent-8: oklch(57.8% 0.0941 173.2);
      --accent-9: oklch(69.8% 0.1338 173.2);
      --accent-10: oklch(66% 0.1338 173.2);
      --accent-11: oklch(79.7% 0.1338 173.2);
      --accent-12: oklch(90.4% 0.0807 173.2);

      --accent-a1: color(display-p3 0.9882 0.2588 0 / 0.054);
      --accent-a2: color(display-p3 1 0.5647 0 / 0.062);
      --accent-a3: color(display-p3 0.7373 1 0.0275 / 0.101);
      --accent-a4: color(display-p3 0.4863 0.9961 0.3294 / 0.159);
      --accent-a5: color(display-p3 0.5059 1 0.4824 / 0.212);
      --accent-a6: color(display-p3 0.5294 1 0.5882 / 0.275);
      --accent-a7: color(display-p3 0.5529 1 0.6745 / 0.342);
      --accent-a8: color(display-p3 0.5294 1 0.7255 / 0.438);
      --accent-a9: color(display-p3 0.4392 1 0.7843 / 0.645);
      --accent-a10: color(display-p3 0.4353 1 0.7608 / 0.587);
      --accent-a11: color(display-p3 0.5373 1 0.8353 / 0.799);
      --accent-a12: color(display-p3 0.7686 0.9961 0.9098 / 0.924);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.2196 0.2275 0.1255 / 0.5);
      --accent-indicator: oklch(69.8% 0.1338 173.2);
      --accent-track: oklch(69.8% 0.1338 173.2);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 184, 150, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 184, 150, 1);
  --background: rgba(23, 48, 68, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #173044;
}

/* Ottimate Developer Landing Page Styles */
/* Using custom classes to avoid affecting Fern components */

/* Navbar Primary Button - filled with primary color */
a.fern-button[data-accent="true"],
.fern-navbar a.fern-button,
nav a[class*="primary"],
header a[class*="primary"] {
  background-color: var(--ottimate-accent) !important;
  color: white !important;
  border-color: var(--ottimate-accent) !important;
}

a.fern-button[data-accent="true"]:hover,
.fern-navbar a.fern-button:hover,
nav a[class*="primary"]:hover,
header a[class*="primary"]:hover {
  background-color: #00a085 !important;
  border-color: #00a085 !important;
}
a.fern-button[data-accent="true"]:focus-visible,
.fern-navbar a.fern-button:focus-visible,
nav a[class*="primary"]:focus-visible,
header a[class*="primary"]:focus-visible {
  background-color: #00a085 !important;
  border-color: #00a085 !important;
}

/* CSS Variables for theme consistency */
:root {
  --ottimate-accent: #00b896;
  --ottimate-dark-bg: #173044;
  --ottimate-light-bg: #ffffff;
  --ottimate-text-light: #ffffff;
  --ottimate-text-dark: #1a1a1a;
  --ottimate-text-muted: #718096;
  --ottimate-card-bg-light: #f8f9fa;
  --ottimate-card-bg-dark: #233C50;
  --ottimate-border-light: #e9ecef;
  --ottimate-border-dark: #4A5568;
}


/* Sidebar Section Headers */
.fern-sidebar-heading-content {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Custom List Styling - Only applies to elements with specific classes */

/* Bullet Lists - Use <div class="bullet-list"> in markdown */
.bullet-list ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}

.bullet-list ul li {
  list-style-type: disc !important;
  margin-bottom: 0.5rem !important;
  padding-left: 0 !important;
  display: list-item !important;
}

.bullet-list ul li::before {
  content: none !important;
}

/* Nested bullet lists */
.bullet-list ul ul {
  list-style-type: circle !important;
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
}

.bullet-list ul ul li {
  list-style-type: circle !important;
}

.bullet-list ul ul ul {
  list-style-type: square !important;
}

.bullet-list ul ul ul li {
  list-style-type: square !important;
}

/* Developer Landing Hero Section */
.dev-hero-section {
  background: linear-gradient(135deg, var(--ottimate-dark-bg) 0%, var(--ottimate-dark-bg) 100%);
  color: var(--ottimate-text-light);
  padding: 4rem 2rem;
  margin: -2rem -2rem 3rem -2rem;
  position: relative;
  overflow: hidden;
}

.dark .dev-hero-section {
  background: linear-gradient(135deg, var(--ottimate-dark-bg) 0%, var(--ottimate-dark-bg) 100%);
}

.light .dev-hero-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: var(--ottimate-text-dark);
}

.dev-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 768px) {

  .dev-hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

}

.dev-hero-content h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {

  .dev-hero-content h1 {
    font-size: 20px;
  }

}

.dev-hero-badge {
  display: inline-block;
  color: var(--ottimate-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 0.5rem;
}

.dev-hero-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 1.5rem;
}

.dev-cta-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 768px) {

  .dev-cta-container {
    flex-direction: column;
    align-items: stretch;
  }

}

.dev-cta-primary {
  background: var(--ottimate-accent);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dev-cta-primary:hover {
  background: #00a085;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 150, 0.3);
}
.dev-cta-primary:focus-visible {
  background: #00a085;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 150, 0.3);
}

.dev-cta-secondary {
  color: currentColor;
  padding: 1rem 2rem;
  border: 2px solid currentColor;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

.dev-cta-secondary:hover {
  background: var(--ottimate-text-light);
  color: var(--ottimate-dark-bg);
}
.dev-cta-secondary:focus-visible {
  background: var(--ottimate-text-light);
  color: var(--ottimate-dark-bg);
}

.light .dev-cta-secondary:hover {
  background: var(--ottimate-text-dark);
  color: var(--ottimate-light-bg);
}
.light .dev-cta-secondary:focus-visible {
  background: var(--ottimate-text-dark);
  color: var(--ottimate-light-bg);
}

/* Code Preview Cards */
.dev-hero-preview {
  position: relative;
}

.dev-code-preview {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.light .dev-code-preview {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--ottimate-border-light);
  backdrop-filter: blur(10px);
}

.dev-code-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.dev-code-dots {
  display: flex;
  gap: 0.25rem;
}

.dev-code-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dev-code-dot:nth-child(1) { background: #ff5f57; }
.dev-code-dot:nth-child(2) { background: #ffbd2e; }
.dev-code-dot:nth-child(3) { background: #28ca42; }

.dev-code-content {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.dev-api-response {
  background: rgba(0, 184, 150, 0.1);
  border: 1px solid rgba(0, 184, 150, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.dev-response-status {
  color: var(--ottimate-accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Features Grid */
.dev-features-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.dev-features-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dev-features-header h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 1rem;
  color: currentColor;
}

.dev-features-header p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.dev-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(249px, 1fr));
  gap: 20px;
}

.dev-feature-card {
  background: var(--ottimate-card-bg-light);
  border: 1px solid var(--ottimate-border-light);
  border-radius: 12px;
  padding: 16px;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.dark .dev-feature-card {
  background: var(--ottimate-card-bg-dark);
  border: 1px solid var(--ottimate-border-dark);
}

.dev-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.dev-feature-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dark .dev-feature-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.dark .dev-feature-card:focus-visible {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dev-feature-icon {
  width: 32px;
  height: 32px;
  background: var(--ottimate-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.dev-feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 0.5rem;
  color: currentColor;
}

.dev-feature-card p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 1rem;
}

.dev-feature-link {
  color: var(--ottimate-accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.dev-feature-link:hover {
  transform: translateX(4px);
}
.dev-feature-link:focus-visible {
  transform: translateX(4px);
}

.dev-feature-link::after {
  content: "→";
  transition: transform 0.3s ease;
}

.dev-feature-link:hover::after {
  transform: translateX(4px);
}
.dev-feature-link:focus-visible::after {
  transform: translateX(4px);
}

/* Stats Section */
.dev-stats-section {
  background: var(--ottimate-card-bg-light);
  border: 1px solid var(--ottimate-border-light);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin: 4rem 2rem;
  text-align: center;
}

.dark .dev-stats-section {
  background: var(--ottimate-card-bg-dark);
  border: 1px solid var(--ottimate-border-dark);
}

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

.dev-stat-item h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: var(--ottimate-accent);
  margin-bottom: 0.5rem;
}

.dev-stat-item p {
  opacity: 0.8;
  font-weight: 500;
}

/* Quick Start Section */
.dev-quickstart-section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.dev-quickstart-content {
  background: var(--ottimate-card-bg-light);
  border: 1px solid var(--ottimate-border-light);
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
}

.dark .dev-quickstart-content {
  background: var(--ottimate-card-bg-dark);
  border: 1px solid var(--ottimate-border-dark);
}

.dev-quickstart-content h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 1rem;
  color: currentColor;
}

.dev-quickstart-content p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 1.5rem;
}

.dev-quickstart-content .dev-cta-container {
  justify-content: center;
}

/* Quickstart specific CTA styles */
.dev-quickstart-cta-primary {
  background: var(--ottimate-accent);
  color: white;
  padding: 1.5rem 2rem 0.5rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: .5;
  font-size: 1rem;
}

.dev-quickstart-cta-primary:hover {
  background: #00a085;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 150, 0.3);
}
.dev-quickstart-cta-primary:focus-visible {
  background: #00a085;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 150, 0.3);
}

.dev-quickstart-cta-secondary {
  color: currentColor;
  padding: 1.25rem 2rem 0rem 2rem;
  border: 2px solid currentColor;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  line-height: 1;
  font-size: 1rem;
}

.dev-quickstart-cta-secondary:hover {
  background: var(--ottimate-text-light);
  color: var(--ottimate-dark-bg);
}
.dev-quickstart-cta-secondary:focus-visible {
  background: var(--ottimate-text-light);
  color: var(--ottimate-dark-bg);
}

.light .dev-quickstart-cta-secondary:hover {
  background: var(--ottimate-text-dark);
  color: var(--ottimate-light-bg);
}
.light .dev-quickstart-cta-secondary:focus-visible {
  background: var(--ottimate-text-dark);
  color: var(--ottimate-light-bg);
}

/* Responsive Design */
@media (max-width: 768px) {

  .dev-hero-section {
    padding: 3rem 1rem;
    margin: -1rem -1rem 2rem -1rem;
  }
  
  .dev-features-section,
  .dev-quickstart-section {
    padding: 3rem 1rem;
  }
  
  .dev-stats-section {
    margin: 3rem 1rem;
    padding: 2rem 1rem;
  }
  
  .dev-features-grid {
    grid-template-columns: 1fr;
  }
  
  .dev-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 480px) {

  .dev-stats-grid {
    grid-template-columns: 1fr;
  }

}