/* Seele Design Contract: seele-home-v1
 * Contract SHA-256: 17bea35f1076327e230e2ee722a4b60cce1b0fbbeebe32f7306a27b71c4a8ee1
 * Code4Agent source: 6d36a85d4fd3b3f17ea6eb942071810f302c2ed8:apps/site/src/assets/styles/tokens.css
 * Generated file. Do not edit directly.
 */
:root {
  --seele-bg-void: #101110;
  --seele-bg-base: #141615;
  --seele-bg-raised: #191c1a;
  --seele-bg-high: #222522;
  --seele-bg-peak: #2d322e;
  --seele-ink-0: #f7faf7;
  --seele-ink-1: #e7ece7;
  --seele-ink-2: #aeb8ae;
  --seele-ink-3: #7f8a80;
  --seele-ink-4: #565f57;
  --seele-line-1: rgba(71, 78, 72, 0.9);
  --seele-line-2: rgba(76, 84, 77, 0.5);
  --seele-soul: #8ee66b;
  --seele-soul-dim: #6ec952;
  --seele-soul-bright: #a7ff82;
  --seele-soul-glow: rgba(142, 230, 107, 0.18);
  --seele-soul-ink: #162415;
  --seele-amber: #d9a852;
  --seele-amber-dim: rgba(217, 168, 82, 0.15);
  --seele-danger: #d9534f;
  --seele-danger-dim: rgba(217, 83, 79, 0.12);
  --seele-grid-line: rgba(255, 255, 255, 0.025);
  --seele-font-display: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --seele-font-body: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --seele-font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --seele-font-cn: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'Source Han Sans CN', sans-serif;
  --seele-fs-hero: clamp(36px, 5vw, 64px);
  --seele-fs-display: clamp(32px, 4.5vw, 56px);
  --seele-fs-h1: 32px;
  --seele-fs-h2: 24px;
  --seele-fs-h3: 20px;
  --seele-fs-lead: 18px;
  --seele-fs-body: 16px;
  --seele-fs-sm: 13px;
  --seele-fs-xs: 11px;
  --seele-r-1: 6px;
  --seele-r-2: 12px;
  --seele-r-3: 16px;
  --seele-r-4: 24px;
  --seele-r-full: 9999px;
  --seele-bp-sm: 640px;
  --seele-bp-md: 860px;
  --seele-bp-lg: 1120px;
  --seele-bp-xl: 1440px;
  --seele-w-prose: 720px;
  --seele-w-narrow: 960px;
  --seele-w-page: 1200px;
  --seele-w-wide: 1440px;
  --seele-h-sm: 28px;
  --seele-h-md: 36px;
  --seele-h-lg: 44px;
  --seele-h-xl: 56px;
  --seele-s-1: 4px;
  --seele-s-2: 8px;
  --seele-s-3: 12px;
  --seele-s-4: 16px;
  --seele-s-5: 24px;
  --seele-s-6: 32px;
  --seele-s-7: 48px;
  --seele-s-8: 64px;
  --seele-s-9: 96px;
  --seele-s-10: 128px;
  --seele-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --seele-ease-in: cubic-bezier(0.55, 0.08, 0.68, 0.53);
  --seele-t-fast: 120ms;
  --seele-t-base: 200ms;
  --seele-t-slow: 400ms;
  --seele-shadow-soft: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --seele-shadow-pop: 0 0 0 1px var(--seele-line-1) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --seele-shadow-soul: 0 0 0 1px var(--seele-soul) inset, 0 0 32px -4px var(--seele-soul-glow);
  --seele-grid-size: 48px;
}

@supports (color: oklch(0.82 0.18 130)) {
  :root {
    --seele-bg-void: oklch(0.11 0.004 140);
    --seele-bg-base: oklch(0.14 0.005 140);
    --seele-bg-raised: oklch(0.17 0.006 140);
    --seele-bg-high: oklch(0.21 0.008 140);
    --seele-bg-peak: oklch(0.26 0.01 140);
    --seele-ink-0: oklch(0.98 0.005 120);
    --seele-ink-1: oklch(0.92 0.005 120);
    --seele-ink-2: oklch(0.72 0.008 120);
    --seele-ink-3: oklch(0.55 0.01 120);
    --seele-ink-4: oklch(0.38 0.01 120);
    --seele-line-1: oklch(0.28 0.012 140 / 0.9);
    --seele-line-2: oklch(0.3 0.012 140 / 0.5);
    --seele-soul: oklch(0.82 0.18 130);
    --seele-soul-dim: oklch(0.7 0.16 130);
    --seele-soul-bright: oklch(0.9 0.2 130);
    --seele-soul-glow: oklch(0.82 0.18 130 / 0.18);
    --seele-soul-ink: oklch(0.15 0.05 140);
    --seele-amber: oklch(0.78 0.14 70);
    --seele-amber-dim: oklch(0.78 0.14 70 / 0.15);
    --seele-danger: oklch(0.68 0.19 25);
    --seele-danger-dim: oklch(0.68 0.19 25 / 0.12);
    --seele-grid-line: oklch(1 0 0 / 0.025);
  }
}
/* Shared page foundation. Loaded only by templates that opt into the contract. */
:where([data-seele-design-contract="seele-home-v1"]) {
  min-width: 0;
  margin: 0;
  background: var(--seele-bg-void);
  color: var(--seele-ink-1);
  font-family: var(--seele-font-body);
  font-size: var(--seele-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where([data-seele-design-contract="seele-home-v1"]) *,
:where([data-seele-design-contract="seele-home-v1"]) *::before,
:where([data-seele-design-contract="seele-home-v1"]) *::after {
  box-sizing: border-box;
}

.seele-grid-backdrop {
  background:
    linear-gradient(var(--seele-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--seele-grid-line) 1px, transparent 1px),
    var(--seele-bg-void);
  background-size: var(--seele-grid-size) var(--seele-grid-size);
}

.seele-container,
.seele-container--narrow,
.seele-container--prose,
.seele-container--wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--seele-s-6);
}

.seele-container { max-width: var(--seele-w-page); }
.seele-container--narrow { max-width: var(--seele-w-narrow); }
.seele-container--prose { max-width: var(--seele-w-prose); }
.seele-container--wide { max-width: var(--seele-w-wide); }

.seele-section {
  padding-block: var(--seele-s-9);
}

.seele-section--tight {
  padding-block: var(--seele-s-8);
}

.seele-display,
.seele-heading {
  margin-block: 0;
  color: var(--seele-ink-0);
  font-family: var(--seele-font-display);
  text-wrap: balance;
}

.seele-display {
  font-size: var(--seele-fs-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.seele-prose {
  color: var(--seele-ink-1);
  font-size: var(--seele-fs-body);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.seele-prose :where(h2, h3) {
  color: var(--seele-ink-0);
  font-family: var(--seele-font-display);
  line-height: 1.2;
  text-wrap: balance;
}

.seele-prose :where(a) {
  color: var(--seele-soul-bright);
  text-decoration-color: var(--seele-soul-dim);
  text-decoration-color: color-mix(in oklch, var(--seele-soul) 55%, transparent);
  text-underline-offset: 0.2em;
}

@media (max-width: 860px) {
  .seele-container,
  .seele-container--narrow,
  .seele-container--prose,
  .seele-container--wide {
    padding-inline: var(--seele-s-5);
  }

  .seele-section { padding-block: var(--seele-s-8); }
  .seele-section--tight { padding-block: var(--seele-s-7); }
}

@media (max-width: 640px) {
  .seele-container,
  .seele-container--narrow,
  .seele-container--prose,
  .seele-container--wide {
    padding-inline: var(--seele-s-4);
  }

  .seele-section { padding-block: var(--seele-s-7); }
  .seele-section--tight { padding-block: var(--seele-s-6); }
}

/* Shared components are deliberately namespaced; page templates own composition. */
.seele-button {
  display: inline-flex;
  min-height: var(--seele-h-lg);
  align-items: center;
  justify-content: center;
  gap: var(--seele-s-2);
  padding-inline: var(--seele-s-5);
  border: 1px solid transparent;
  border-radius: var(--seele-r-2);
  font: 600 var(--seele-fs-body) / 1 var(--seele-font-body);
  text-decoration: none;
  cursor: pointer;
}

.seele-button--primary {
  background: var(--seele-soul);
  color: var(--seele-soul-ink);
  box-shadow: var(--seele-shadow-soul);
}

.seele-button--secondary {
  border-color: var(--seele-line-1);
  background: var(--seele-bg-raised);
  color: var(--seele-ink-1);
}

.seele-card {
  min-width: 0;
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-3);
  background: var(--seele-bg-raised);
  box-shadow: var(--seele-shadow-soft);
}

.seele-chip {
  display: inline-flex;
  min-height: var(--seele-h-sm);
  align-items: center;
  gap: var(--seele-s-2);
  padding-inline: var(--seele-s-3);
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-full);
  background: var(--seele-bg-raised);
  color: var(--seele-ink-2);
  font: 500 var(--seele-fs-sm) / 1 var(--seele-font-body);
}

.seele-field {
  width: 100%;
  min-height: var(--seele-h-lg);
  padding-inline: var(--seele-s-4);
  border: 1px solid var(--seele-line-1);
  border-radius: var(--seele-r-2);
  background: var(--seele-bg-base);
  color: var(--seele-ink-1);
  font: inherit;
}

.seele-site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid var(--seele-line-2);
  background: rgba(16, 17, 16, 0.92);
  background: color-mix(in oklch, var(--seele-bg-void) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* One navigation shell shared by every SEO page type. */
.seele-site-header .feature-header,
.seele-site-header .header-shell,
.seele-site-footer .footer-inner,
.seele-site-footer .footer-shell {
  width: min(var(--seele-w-page), calc(100% - 48px));
  margin-inline: auto;
}
.seele-site-header .feature-header,
.seele-site-header .header-shell {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seele-s-6);
}
.seele-site-header .seele-brand,
.seele-site-header .brand,
.seele-site-footer .seele-brand,
.seele-site-footer .brand {
  flex: 0 0 auto;
  color: var(--seele-ink-0);
  font: 700 18px/1 var(--seele-font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.seele-site-header .feature-nav,
.seele-site-header .main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
  flex: 1;
}
.seele-site-header .feature-nav a,
.seele-site-header .main-nav a,
.seele-site-header .nav-link {
  color: var(--seele-ink-2);
  font-size: 13px;
  text-decoration: none;
  transition: color 160ms ease;
}
.seele-site-header .feature-nav a:hover,
.seele-site-header .main-nav a:hover,
.seele-site-header .nav-link:hover { color: var(--seele-ink-0); }
.seele-site-header .feature-header-cta,
.seele-site-header .primary-button,
.seele-site-header .btn-login {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: var(--seele-r-2);
}
.seele-site-footer .footer-inner,
.seele-site-footer .footer-shell { padding-block: var(--seele-s-8); }
.seele-site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seele-s-6);
}
.seele-site-footer .footer-inner nav,
.seele-site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.seele-site-footer .footer-inner nav a,
.seele-site-footer .footer-links a { color: var(--seele-ink-2); font-size: 13px; text-decoration: none; }
.seele-site-footer .footer-inner nav a:hover,
.seele-site-footer .footer-links a:hover { color: var(--seele-soul-bright); }

.seele-site-footer {
  border-top: 1px solid var(--seele-line-2);
  background: var(--seele-bg-base);
  color: var(--seele-ink-2);
}

.seele-cta,
.feature-cta,
.article-cta,
.compare-final-cta {
  border-block: 1px solid var(--seele-line-2);
  background:
    radial-gradient(circle at 82% 18%, var(--seele-soul-glow), transparent 28rem),
    var(--seele-bg-base);
}

.seele-faq,
.faq-list,
.runtime-faq,
.compare-faq-list {
  border-top: 1px solid var(--seele-line-1);
}

.seele-faq :where(details, .faq-item, .runtime-faq-item),
.faq-list :where(details, .faq-item, .runtime-faq-item),
.runtime-faq :where(details, .faq-item, .runtime-faq-item),
.compare-faq-list :where(details, .faq-item, .runtime-faq-item) {
  border-bottom: 1px solid var(--seele-line-2);
}

.seele-media,
.article-image,
.feature-card-media,
.compare-proof-media,
.image-carousel-stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-3);
  background: var(--seele-bg-raised);
}

.seele-media :where(img, video),
.article-image :where(img, video),
.feature-card-media :where(img, video),
.compare-proof-media :where(img, video),
.image-carousel-stage :where(img, video) {
  display: block;
  width: 100%;
  height: auto;
}

.seele-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--seele-s-2);
  color: var(--seele-soul-bright);
  font: 500 var(--seele-fs-xs) / 1 var(--seele-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seele-eyebrow::before {
  width: var(--seele-s-2);
  height: var(--seele-s-2);
  background: var(--seele-soul);
  content: "";
}

:where(.seele-button, .seele-field, [data-seele-design-contract="seele-home-v1"] a):focus-visible {
  outline: 2px solid var(--seele-soul);
  outline-offset: 3px;
}

@media (hover: hover) {
  .seele-button--primary:hover { background: var(--seele-soul-bright); }
  .seele-button--secondary:hover { background: var(--seele-bg-high); }
  .seele-card:hover { border-color: var(--seele-line-1); }
}

@media (max-width: 640px) {
  .seele-button--mobile-wide { width: 100%; }
}

/* Motion is state feedback only. Critical SEO content never starts hidden. */
.seele-button,
.seele-card,
.seele-field {
  transition:
    color var(--seele-t-fast) var(--seele-ease-out),
    background-color var(--seele-t-fast) var(--seele-ease-out),
    border-color var(--seele-t-fast) var(--seele-ease-out),
    box-shadow var(--seele-t-base) var(--seele-ease-out),
    transform var(--seele-t-base) var(--seele-ease-out);
}

@media (hover: hover) {
  .seele-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-seele-design-contract="seele-home-v1"]) *,
  :where([data-seele-design-contract="seele-home-v1"]) *::before,
  :where([data-seele-design-contract="seele-home-v1"]) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}