/* ========================================= */
/* Design tokens — matched to datasimply.co */
/* =========================================
   Fonts loaded via <link> in overrides/main.html
   for non-render-blocking preconnect behavior.
   ========================================= */

:root {
  /* Colors */
  --ds-primary: #22c55e;
  --ds-bg: #ffffff;
  --ds-surface: #fafafa;
  --ds-dark: #0a0a0a;
  --ds-heading: #000000;
  --ds-body: #404040;
  --ds-subtle: #555555;
  --ds-muted: #737373;
  --ds-placeholder: #a3a3a3;
  --ds-border: #e5e5e5;
  --ds-border-hover: #d1d5db;

  /* Type scale — px values to avoid Material's 20px root inflation */
  --ds-text-hero: 72px;     /* 4.5rem × 16 */
  --ds-text-display: 48px;  /* 3rem × 16 */
  --ds-text-section: 42px;  /* 2.625rem × 16 */
  --ds-text-subheading: 20px; /* 1.25rem × 16 */
  --ds-text-body-lg: 17px;  /* 1.0625rem × 16 */
  --ds-text-body-sm: 15px;  /* 0.9375rem × 16 */
  --ds-text-xs: 12px;       /* 0.75rem × 16 */
  --ds-text-sm: 14px;       /* 0.875rem × 16 */
  --ds-text-base: 16px;     /* 1rem × 16 */
  --ds-text-code: 11px;     /* 0.6875rem × 16 */

  /* Letter spacing */
  --ds-tracking-hero: -3.5px;
  --ds-tracking-display: -2px;
  --ds-tracking-section: -1.8px;
  --ds-tracking-stat: -1px;
  --ds-tracking-subheading: -0.3px;

  /* Line heights */
  --ds-leading-tight: 1.1;
  --ds-leading-heading: 1.15;
  --ds-leading-body: 1.6;
  --ds-leading-body-loose: 1.7;

  /* MkDocs Material overrides */
  --md-primary-fg-color: #22c55e;
  --md-primary-fg-color--light: #4ade80;
  --md-primary-fg-color--dark: #15803d;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: var(--ds-text-base);
  line-height: 1.5;
  color: var(--ds-heading);
}

.ds-page {
  overflow: hidden;
  width: 100%;
}


/* ========================================= */
/* Utility classes                           */
/* ========================================= */
.ds-text-dark    { color: var(--ds-dark); }
.ds-text-primary { color: var(--ds-primary); }
.ds-bg-surface   { background: var(--ds-surface); }

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

.ds-section {
  padding: 64px 24px;
}

@media (min-width: 48em) {
  .ds-section {
    padding: 80px 40px;
  }
}

/* Tighter rhythm for features (grouped with hero) */
.ds-section.ds-bg-surface {
  padding-top: 56px;
  padding-bottom: 64px;
}

@media (min-width: 48em) {
  .ds-section.ds-bg-surface {
    padding-top: 72px;
    padding-bottom: 80px;
  }
}


/* ========================================= */
/* Buttons — datasimply.co style             */
/* ========================================= */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--ds-text-sm);
  transition: opacity 0.2s ease;
}

.ds-btn-dark {
  background: var(--ds-dark);
  color: #fff;
  padding: 12px 24px;
}

@media (min-width: 48em) {
  .ds-btn-dark {
    padding: 16px 32px;
  }
}

.ds-btn-dark:hover {
  opacity: 0.9;
}

.ds-btn-text {
  color: var(--ds-heading);
  padding: 12px 4px;
  font-weight: 600;
}

.ds-btn-text:hover {
  opacity: 0.5;
}

.ds-btn-text--on-dark {
  color: rgba(255, 255, 255, 0.85);
}

.ds-btn-text--on-dark:hover {
  opacity: 0.5;
}


/* ========================================= */
/* Hero — typography-led, two-tone headline  */
/* ========================================= */
.ds-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 24px 40px;
}

@media (min-width: 48em) {
  .ds-hero {
    padding: 48px 40px 56px;
  }
}

.ds-hero-burst {
  position: absolute;
  pointer-events: none;
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.10) 0%, transparent 60%);
}

.ds-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-hero-content {
  max-width: 780px;
}

@media (min-width: 64em) {
  .ds-hero-content {
    margin-left: 8%;
  }
}

.ds-hero-headline {
  font-family: "Poppins", sans-serif;
  font-size: clamp(32px, 5vw + 8px, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ds-tracking-display);
  margin: 0;
}

@media (min-width: 64em) {
  .ds-hero-headline {
    letter-spacing: var(--ds-tracking-hero);
  }
}

.ds-hero-body {
  margin-top: 24px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: var(--ds-subtle);
  max-width: 480px;
  font-size: var(--ds-text-body-sm);
  line-height: var(--ds-leading-body);
}

.ds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 25em) {
  .ds-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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


/* ========================================= */
/* Logo Bar — scrolling marquee              */
/* ========================================= */
.ds-logo-bar {
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  padding: 48px 0;
  overflow: hidden;
}

.ds-logo-bar-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ds-logo-bar-label {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: var(--ds-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-bottom: 40px;
}

.ds-logo-bar-mask {
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

.ds-logo-scroll {
  display: flex;
  gap: 48px;
  animation: ds-scroll-logos 45s linear infinite;
  width: max-content;
}

.ds-logo-scroll span {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: var(--ds-text-subheading);
  font-weight: 600;
  color: var(--ds-placeholder);
  white-space: nowrap;
}

@keyframes ds-scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-logo-scroll {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .ds-logo-scroll span[aria-hidden="true"] {
    display: none;
  }
}


/* ========================================= */
/* Grid layout — sticky heading + cards      */
/* ========================================= */
.ds-grid-5 {
  display: grid;
  gap: 48px;
}

@media (min-width: 64em) {
  .ds-grid-5 {
    grid-template-columns: 2fr 3fr;
  }
}

.ds-sticky {
  position: sticky;
  top: 112px;
}

.ds-section-heading {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--ds-heading);
  font-size: clamp(28px, 3vw + 8px, 42px);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-section);
  margin: 0;
}

.ds-section-body {
  margin-top: 16px;
  font-family: "Inter", sans-serif;
  color: var(--ds-subtle);
  font-size: var(--ds-text-body-lg);
  line-height: var(--ds-leading-body);
}


/* ========================================= */
/* Bordered cards — "What we do" style       */
/* ========================================= */
.ds-card-bordered {
  border-top: 1px solid var(--ds-border);
  padding: 24px 0 32px;
}

.ds-card-heading {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--ds-heading);
  font-size: var(--ds-text-subheading);
  letter-spacing: var(--ds-tracking-subheading);
  margin: 0;
}

.ds-card-body {
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  color: var(--ds-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-body-loose);
}


/* ========================================= */
/* Impact stats — dark section               */
/* ========================================= */
.ds-stats {
  position: relative;
  overflow: hidden;
  background: var(--ds-dark);
  padding: 56px 32px;
}

@media (min-width: 64em) {
  .ds-stats {
    padding: 64px 64px;
  }
}

.ds-stats-burst {
  position: absolute;
  pointer-events: none;
  width: 500px;
  height: 500px;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
}

.ds-stats-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-stats-label {
  text-align: center;
  margin-bottom: 32px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--ds-primary);
  font-size: var(--ds-text-subheading);
  letter-spacing: var(--ds-tracking-subheading);
}

.ds-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (min-width: 64em) {
  .ds-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }
}

.ds-stat {
  text-align: center;
}

.ds-stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--ds-tracking-stat);
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 25em) {
  .ds-stat-value {
    font-size: 24px;
  }
}

@media (min-width: 48em) {
  .ds-stat-value {
    font-size: 36px;
  }
}

.ds-stat-desc {
  margin-top: 8px;
  font-family: "Inter", sans-serif;
  color: var(--ds-border-hover);
  font-size: var(--ds-text-body-sm);
  line-height: var(--ds-leading-body);
}


/* ========================================= */
/* Showcase — case-study style cards         */
/* ========================================= */
.ds-showcase-header {
  max-width: 640px;
  margin-bottom: 48px;
}

.ds-showcase-grid {
  display: grid;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 48em) {
  .ds-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-showcase-card--wide {
    grid-column: 1 / -1;
  }
}

.ds-showcase-card {
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: var(--ds-bg);
  transition: all 0.2s ease;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 48em) {
  .ds-showcase-card {
    padding: 32px;
  }
}

.ds-showcase-card:hover {
  border-color: var(--ds-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

@media (min-width: 48em) {
  .ds-showcase-card--wide {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .ds-showcase-card--wide .ds-code-window {
    flex: 0 0 45%;
    margin-bottom: 0;
  }

  .ds-showcase-card--wide .ds-showcase-card__text {
    flex: 1;
  }

  .ds-showcase-card--wide .ds-showcase-body {
    flex: initial;
  }
}

.ds-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: "Inter", sans-serif;
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #f0fdf4;
  color: #15803d;
  margin-bottom: 24px;
}

.ds-showcase-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 24px;
}

.ds-showcase-heading {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--ds-heading);
  font-size: var(--ds-text-subheading);
  letter-spacing: var(--ds-tracking-subheading);
  margin: 0;
}

.ds-showcase-body {
  margin-top: 12px;
  flex: 1;
  font-family: "Inter", sans-serif;
  color: var(--ds-subtle);
  font-size: var(--ds-text-body-sm);
  line-height: var(--ds-leading-body);
}

.ds-showcase-tags {
  margin-top: 16px;
  font-family: "Inter", sans-serif;
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-muted);
}


/* ========================================= */
/* Code window — compact, for showcase card  */
/* ========================================= */
.ds-code-window {
  background: #1e1e2e;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.ds-code-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #181825;
}

.ds-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ds-code-dot--red    { background: #f38ba8; }
.ds-code-dot--yellow { background: #f9e2af; }
.ds-code-dot--green  { background: #a6e3a1; }

.ds-code-filename {
  margin-left: 8px;
  font-size: var(--ds-text-xs);
  color: #6c7086;
  font-family: "Roboto Mono", monospace;
}

.ds-code-body {
  padding: 16px;
  margin: 0;
  overflow-x: auto;
  font-family: "Roboto Mono", monospace;
  font-size: var(--ds-text-code);
  line-height: 1.7;
  color: #cdd6f4;
}

.ds-code-body code {
  font-family: inherit;
}

/* Syntax highlighting — scoped to code windows */
.ds-code-body .kw  { color: #cba6f7; }
.ds-code-body .mod { color: #89b4fa; }
.ds-code-body .cls { color: #a6e3a1; }
.ds-code-body .fn  { color: #89dceb; }
.ds-code-body .cmt { color: #6c7086; }
.ds-code-body .num { color: #fab387; }
.ds-code-body .str { color: #f9e2af; }


/* ========================================= */
/* Final CTA — centered, with gradient burst */
/* ========================================= */
.ds-cta {
  position: relative;
  overflow: hidden;
  background: var(--ds-dark);
  padding: 100px 24px;
}

@media (min-width: 48em) {
  .ds-cta {
    padding: 100px 40px;
  }
}

.ds-cta-burst {
  position: absolute;
  pointer-events: none;
  width: 600px;
  height: 600px;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, transparent 60%);
}

.ds-cta-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ds-cta-heading {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 24px;
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-display);
  margin: 0;
}

@media (min-width: 48em) {
  .ds-cta-heading {
    font-size: var(--ds-text-display);
  }
}

.ds-cta-body {
  margin-top: 20px;
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--ds-text-body-lg);
  line-height: var(--ds-leading-body);
}

.ds-install-command {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: "Roboto Mono", monospace;
  font-size: var(--ds-text-sm);
  color: rgba(255, 255, 255, 0.85);
}

.ds-install-prompt {
  color: var(--ds-primary);
  margin-right: 8px;
}

.ds-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 25em) {
  .ds-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-cta-actions .ds-btn {
    justify-content: center;
  }
}


/* ========================================= */
/* MkDocs Material overrides                 */
/* ========================================= */

/* Header — clean white style */
.md-header {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-heading);
}

.md-header .md-header__button.md-logo {
  padding-right: 0;
  margin-right: 0.2rem;
}

.md-header__title {
  /* !important needed to override Material's inline margin from JS */
  margin-left: 0 !important;
  color: var(--ds-heading);
  font-weight: 600;
}

.md-header__topic {
  color: var(--ds-heading);
  font-weight: 600;
}

/* Nav tabs — clean text links */
.md-tabs {
  background: #fff;
  border: none;
}

.md-tabs__link {
  color: var(--ds-body);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--ds-heading);
}

/* Override Material's white active indicator */
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  border-bottom-color: var(--ds-primary);
}

/* Logo — match search box height */
.md-header .md-logo img,
.md-header .md-logo svg {
  height: 36px;
  width: auto;
}

/* Search icon */
.md-search__icon,
.md-header__button {
  color: var(--ds-body);
}

/* Mobile drawer */
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
  background: #fff;
  color: var(--ds-heading);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: auto;
  padding: 0.6rem 0.8rem;
}

.md-nav--primary .md-nav__title .md-logo {
  position: static;
  display: inline-flex;
  margin: 0;
  padding: 0;
  color: var(--ds-primary);
}

.md-nav--primary .md-nav__title .md-logo img,
.md-nav--primary .md-nav__title .md-logo svg {
  height: 1.4rem;
}

.md-nav__source {
  background: var(--ds-surface);
  color: var(--ds-body);
}

/* ========================================= */
/* Cookie consent — slim bottom bar          */
/* ========================================= */
.md-consent__overlay {
  display: none;
}

.md-consent__inner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  border-top: 1px solid var(--ds-border);
  background: #fff;
  padding: 0;
}

.md-consent__form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: var(--ds-text-sm);
}

.md-consent__form > :first-child {
  flex: 1;
  margin: 0;
}

.md-consent__form h4 {
  display: none;
}

.md-consent__form > :first-child p {
  margin: 0;
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
  line-height: 1.4;
}

.md-consent__controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.md-consent__controls .md-button {
  font-size: var(--ds-text-xs);
  padding: 6px 16px;
  min-width: auto;
}

/* ========================================= */
/* Install command — copy button             */
/* ========================================= */
.ds-install-copy {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ds-install-copy:hover {
  color: rgba(255, 255, 255, 0.8);
}

.ds-install-copy.copied {
  color: var(--ds-primary);
}