/*
 * Design system — typography + color (premium SaaS)
 *
 * Radius: see --radius-* below.
 *
 * Type scale (aligned with templates/partials/tailwind-config.html fontSize.*):
 *   H1: clamp 2.375rem–3.25rem / 600 / lh 1.08 / ls -0.035em
 *   H2: clamp 1.625rem–2rem / 600 / lh 1.2 / ls -0.028em
 *   H3: clamp 1.0625rem–1.25rem / 600 / lh 1.35 / ls -0.02em
 *   Body: 1rem / 400 / lh 1.65 / ls -0.011em
 *   Small: 0.875rem / lh 1.5
 *   Eyebrow: 0.75rem / 600 uppercase / lh 1.4 / ls 0.08em
 *
 * Colors:
 *   Primary #4F46E5 | hover #4338CA | on-primary #FFF
 *   Accent #047857 (success / focus)
 *   Warning #B45309
 *   Ink #18181B | Muted #52525B | Muted-soft #71717A
 *   Canvas #FFF | Surface #F4F4F5 | Panel #FAFAFA | Line #E4E4E7
 */
:root {
  --pw-blue: #4f46e5;
  --pw-blue-hover: #4338ca;
  --pw-green: #047857;
  --pw-amber: #b45309;
  --ink: #18181b;
  --muted: #52525b;
  --muted-soft: #71717a;
  --surface: #f4f4f5;
  --line: #e4e4e7;
  --panel: #fafafa;
  --canvas: #ffffff;
  /* Tailwind semantic colors (rgb triple + alpha via Tailwind) */
  --rgb-canvas: 255 255 255;
  --rgb-surface: 244 244 245;
  --rgb-panel: 250 250 250;
  --rgb-ink: 24 24 27;
  --rgb-muted: 82 82 91;
  --rgb-muted-soft: 113 113 122;
  --rgb-line: 228 228 231;
  --rgb-pwblue: 79 70 229;
  --rgb-pwblue-hover: 67 56 202;
  --rgb-accent: 4 120 87;
  --rgb-pwamber: 180 83 9;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --layout-max: 1200px;
  --section-py: 60px;
  --section-px: 20px;
  --section-gap: 60px;
  --card-pad: 20px;
  /* Radius scale: not everything should look like a pill or a bubble */
  --radius-sm: 4px;
  --radius-chip: 8px;
  --radius-button: 10px;
  --radius-card: 12px;
  --radius-frame: 16px;
  --card-radius: var(--radius-card);
  --card-gap: 24px;
  --font-h1: clamp(2.375rem, 2.5vw + 1.25rem, 3.25rem);
  --font-h2: clamp(1.625rem, 1.2vw + 1rem, 2rem);
  --font-h3: clamp(1.0625rem, 0.35vw + 0.95rem, 1.25rem);
  --font-body: 1rem;
  --font-small: 0.875rem;
  --font-micro: 0.75rem;
  --lh-display: 1.08;
  --lh-h2: 1.2;
  --lh-h3: 1.35;
  --lh-body: 1.65;
  --lh-small: 1.5;
  --ls-display: -0.035em;
  --ls-heading: -0.028em;
  --ls-h3: -0.02em;
  --ls-body: -0.011em;
  --ls-micro: 0.08em;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --btn-h: 44px;
  --btn-pad-y: 10px;
  --btn-pad-x: 22px;
  --btn-fs: 0.875rem;
  --space-1: 8px;
}

@media (max-width: 767px) {
  :root {
    --section-py: 40px;
    --section-px: 16px;
    --section-gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

::selection {
  background: rgba(79, 70, 229, 0.16);
  color: var(--ink);
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--font-body);
  line-height: var(--lh-body);
}

main#main a.text-pwblue:not([class*="inline-flex"]):not([class*="rounded-full"]) {
  font-weight: var(--fw-medium);
  color: var(--pw-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(79, 70, 229, 0.35);
}

main#main a.text-pwblue:not([class*="inline-flex"]):not([class*="rounded-full"]):hover {
  color: var(--pw-blue-hover);
  text-decoration-color: rgba(67, 56, 202, 0.85);
}

body > main {
  flex: 1 0 auto;
}

.lang-switch {
  flex-shrink: 0;
}

.lang-switch__panel {
  max-height: min(70vh, 24rem);
  overflow-y: auto;
}

.lang-switch[open] .lang-switch-chevron {
  transform: rotate(180deg);
}

html[data-theme="dark"] .lang-switch summary,
html[data-theme="dark"] .lang-switch__panel {
  background-color: var(--panel);
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.22);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.card-hover {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -28px rgba(79, 70, 229, 0.2);
  border-color: rgba(79, 70, 229, 0.14);
}

.back-to-top {
  position: fixed;
  z-index: 60;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid rgba(79, 70, 229, 0.14);
  background: linear-gradient(180deg, #fff, var(--panel));
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 36px -20px rgba(12, 12, 15, 0.18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.25s ease;
}

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

.back-to-top:focus-visible {
  outline: 2px solid var(--pw-green);
  outline-offset: 3px;
}

.back-to-top:hover {
  box-shadow: 0 18px 44px -22px rgba(79, 70, 229, 0.28);
}

.fixed-download-btn {
  position: fixed;
  z-index: 55;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #134e4a 100%);
  color: #fafafa;
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.28) inset,
    0 16px 44px -18px rgba(12, 10, 15, 0.45);
  border: 1px solid rgba(5, 150, 105, 0.25);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
}

.fixed-download-btn:hover {
  transform: translateY(-50%) translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 22px 50px -20px rgba(5, 150, 105, 0.28);
}

.fixed-download-btn:focus-visible {
  outline: 2px solid var(--pw-green);
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .fixed-download-btn span {
    display: none;
  }
  .fixed-download-btn {
    width: 3rem;
    height: 3rem;
    padding: 0;
    justify-content: center;
    border-radius: 9999px;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(145%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 250, 250, 0.86) 100%);
  border-bottom: 1px solid rgba(79, 70, 229, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Let the brand + toolbar row shrink so the nav rail can scroll instead of clipping under actions */
.site-header > .mx-auto {
  min-width: 0;
}

.site-header__toolbar {
  min-width: 0;
}

.site-header nav[aria-label] a {
  border-radius: var(--radius-chip);
  transition: color 0.2s ease, background 0.25s var(--ease-out), box-shadow 0.25s ease, transform 0.2s ease;
}

/* Primary header CTA — readable radius, not a stadium pill */
.site-header a.inline-flex.rounded-full.font-semibold {
  border-radius: var(--radius-button) !important;
}

/* Brand row chip — calmer than a large superellipse */
.site-header a.site-brand {
  border-radius: var(--radius-button) !important;
}

.site-header nav[aria-label] a:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 10px 28px -12px rgba(79, 70, 229, 0.14);
}

.site-footer {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #060b14 0%, #030712 42%, #071a16 100%) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35) inset;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 280px at 12% 0%, rgba(79, 70, 229, 0.14), transparent 55%),
    radial-gradient(600px 220px at 88% 100%, rgba(5, 150, 105, 0.1), transparent 50%);
  opacity: 0.9;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__top {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 2.5rem 3rem;
  }
}

.site-footer .site-brand {
  text-decoration: none;
  color: inherit;
}

.site-footer .site-brand--compact {
  width: fit-content;
  max-width: 100%;
}

.site-footer__tagline {
  margin-top: 1rem;
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #94a3b8;
}

.site-footer__folder {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-wrap: anywhere;
}

.site-footer__nav-title {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.site-footer__linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-footer__linklist a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  margin-inline: -0.7rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.site-footer__linklist a:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.07);
}

.site-footer__linklist a:focus-visible {
  outline: 2px solid rgba(52, 211, 153, 0.65);
  outline-offset: 2px;
}

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__legal {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: #64748b;
}

.site-footer__legal-primary {
  color: #94a3b8;
}

.site-footer__legal-note {
  display: inline;
  color: #cbd5e1;
}

@media (max-width: 639px) {
  .site-footer__legal-note {
    display: block;
    margin-top: 0.35rem;
  }
}

/* Header / footer brand mark */
.site-brand {
  text-decoration: none;
  color: inherit;
}

.site-brand__mark {
  display: grid;
  place-items: center;
  padding: 3px;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.72), rgba(5, 150, 105, 0.52) 52%, rgba(180, 83, 9, 0.38));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 14px 36px -22px rgba(79, 70, 229, 0.45);
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.site-brand:hover .site-brand__mark,
.site-brand:focus-visible .site-brand__mark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78) inset,
    0 20px 44px -20px rgba(5, 150, 105, 0.35);
  transform: translateY(-1px);
}

.site-brand__img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  object-fit: contain;
  background: #fff;
}

.site-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}

.site-brand__name {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .site-brand__name {
    font-size: 0.9375rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
    max-width: 14rem;
  }
}

@media (min-width: 1024px) {
  .site-brand__name {
    max-width: 17rem;
  }
}

.site-brand__tagline:empty {
  display: none !important;
}

.site-brand__tagline {
  display: none;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
  max-width: 11rem;
}

@media (min-width: 640px) {
  .site-brand__tagline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 13rem;
    font-size: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .site-brand__tagline {
    max-width: 17rem;
    -webkit-line-clamp: 2;
  }
}

.site-brand--inverse .site-brand__mark {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.55), rgba(52, 211, 153, 0.48) 52%, rgba(251, 191, 36, 0.38));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 12px 32px -18px rgba(0, 0, 0, 0.5);
}

.site-brand--inverse .site-brand__img {
  background: rgba(12, 21, 40, 0.45);
}

.site-brand--inverse .site-brand__name {
  color: #f8fafc;
}

.site-brand--inverse .site-brand__tagline {
  color: #94a3b8;
}

.site-brand--compact {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-brand--compact .site-brand__img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
}

.site-brand--compact .site-brand__mark {
  padding: 2px;
  border-radius: 0.75rem;
}

.site-brand--compact .site-brand__name {
  font-size: 0.875rem;
  color: #f8fafc;
  max-width: none;
}

.hero-mesh {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(79, 70, 229, 0.09), transparent 58%),
    radial-gradient(800px 480px at 92% 4%, rgba(4, 120, 87, 0.06), transparent 52%),
    radial-gradient(600px 400px at 50% 100%, rgba(180, 83, 9, 0.04), transparent 55%),
    linear-gradient(185deg, #ffffff 0%, var(--surface) 52%, #eef2f7 100%);
}

/* Inner pages inside site-flow: airy grain cap on standard heroes (not index stage/deck) */
main#main.site-flow > section.hero-mesh:not(.hero-deck):not(.hero-stage) {
  position: relative;
  isolation: isolate;
}

main#main.site-flow > section.hero-mesh:not(.hero-deck):not(.hero-stage) > .mx-auto {
  position: relative;
  z-index: 1;
}

main#main.site-flow > section.hero-mesh:not(.hero-deck):not(.hero-stage)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.45;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 48%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 48%);
}

.hero-mesh.hero-deck {
  background:
    radial-gradient(980px 460px at -5% 5%, rgba(79, 70, 229, 0.14), transparent 52%),
    radial-gradient(760px 420px at 102% 0%, rgba(4, 120, 87, 0.11), transparent 48%),
    radial-gradient(600px 320px at 40% 100%, rgba(180, 83, 9, 0.05), transparent 55%),
    linear-gradient(168deg, #fdfdff 0%, #f4f4f8 42%, #eef2ff 78%, #fafafa 100%);
}

.hero-mesh.hero-deck .hero-deck__noise,
.hero-mesh.hero-stage .hero-deck__noise {
  background-image: radial-gradient(rgba(24, 24, 27, 0.038) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
}

.hero-mesh.hero-stage {
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(79, 70, 229, 0.13), transparent 56%),
    radial-gradient(720px 380px at 102% 10%, rgba(4, 120, 87, 0.1), transparent 52%),
    radial-gradient(560px 320px at 42% 102%, rgba(180, 83, 9, 0.045), transparent 55%),
    linear-gradient(198deg, #fcfdff 0%, #eef2ff 38%, #f6f6f8 72%, #fafafa 100%);
}

.hero-stage__chrome {
  position: relative;
  z-index: 1;
}

.hero-stage__figure {
  border-radius: 0 0 var(--radius-frame) var(--radius-frame);
}

.hero-stage__trust-card {
  list-style: none;
  border-radius: var(--radius-card);
  border: 1px solid rgba(228, 228, 231, 0.95);
  background: rgba(255, 255, 255, 0.86);
  padding: 1rem 1rem 1.15rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px -26px rgba(79, 70, 229, 0.18);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-transparency: reduce) {
  .hero-stage__trust-card {
    backdrop-filter: none;
    background: #ffffff;
  }
}

@media (min-width: 1024px) {
  .hero-stage__media {
    padding-top: 0.35rem;
  }
}

/* Index hero (stage) → first band: soft snow-field bridge */
main#main.site-flow > section.hero-mesh.hero-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(120px, 22vw);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, rgba(250, 250, 252, 0.97) 100%);
}

main#main .hero-mesh.hero-deck .hero-deck__grid {
  gap: clamp(1.75rem, 4vw, 2.75rem) !important;
}

.hero-mesh.hero-deck .hero-deck__figure {
  border-radius: var(--radius-frame);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 32px 64px -28px rgba(24, 24, 27, 0.22);
}

@media (min-width: 1024px) {
  .hero-mesh.hero-deck .hero-deck__visual {
    padding-bottom: 0.25rem;
  }
}

.saas-section.site-section {
  position: relative;
}

/* --------------------------------------------------------------------------
   Homepage flow — non-linear section rhythm (scoped to main.site-flow)
   -------------------------------------------------------------------------- */

main#main.site-flow > section.site-section {
  position: relative;
  isolation: isolate;
  border-bottom: none !important;
  overflow: clip;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

main#main.site-flow > section.site-section > .mx-auto:first-child {
  position: relative;
  z-index: 1;
}

/* Flat column band (e.g. FAQ): no inner .mx-auto wrapper — keep content above wash layers */
main#main.site-flow > section.site-section.mx-auto > * {
  position: relative;
  z-index: 1;
}

/* Soft connector between bands — ribbon fade + micro-glow */
main#main.site-flow > section.site-section:not(.site-section--terminal)::after {
  content: "";
  position: absolute;
  left: clamp(0.75rem, 5vw, 3.5rem);
  right: clamp(0.75rem, 5vw, 3.5rem);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 70, 229, 0.22) 18%,
    rgba(4, 120, 87, 0.2) 50%,
    rgba(79, 70, 229, 0.18) 82%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.12);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 767px) {
  main#main.site-flow > section.site-section:not(.site-section--terminal)::after {
    left: 1rem;
    right: 1rem;
    box-shadow: 0 0 14px rgba(79, 70, 229, 0.08);
  }
}

/* Editorial “scallop” — alternating bottom corners between bands (no skew) */
main#main.site-flow > section.site-section:nth-of-type(1):not(.site-section--terminal) {
  border-bottom-right-radius: clamp(14px, 3vw, 26px);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 2):not(.site-section--terminal),
main#main.site-flow > section.site-section:nth-of-type(6n + 6):not(.site-section--terminal) {
  border-bottom-left-radius: clamp(12px, 2.5vw, 22px);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 3):not(.site-section--terminal),
main#main.site-flow > section.site-section:nth-of-type(6n + 5):not(.site-section--terminal) {
  border-bottom-right-radius: clamp(12px, 2.5vw, 22px);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 4):not(.site-section--terminal),
main#main.site-flow > section.site-section:nth-of-type(6n + 7):not(.site-section--terminal) {
  border-bottom-left-radius: clamp(10px, 2vw, 18px);
  border-bottom-right-radius: clamp(10px, 2vw, 18px);
}

/* R0 — first content band (blog index / 404): aurora cap + cool floor */
main#main.site-flow > section.site-section:nth-of-type(1) {
  background:
    linear-gradient(180deg, rgba(79, 70, 229, 0.16) 0, rgba(4, 120, 87, 0.12) 3px, transparent 3px),
    radial-gradient(100% 85% at 50% -28%, rgba(79, 70, 229, 0.09), transparent 58%),
    radial-gradient(720px 380px at 92% 108%, rgba(4, 120, 87, 0.07), transparent 52%),
    radial-gradient(520px 320px at -5% 105%, rgba(79, 70, 229, 0.05), transparent 50%),
    linear-gradient(178deg, #ffffff 0%, #f7f7fb 55%, #fafafa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(79, 70, 229, 0.04),
    inset 4px 0 0 rgba(79, 70, 229, 0.07);
}

main#main.site-flow > section.site-section:nth-of-type(1):not(.saas-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(79, 70, 229, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
  opacity: 0.85;
}

/* R1 — “beacon”: bloom + airy mesh veil */
main#main.site-flow > section.site-section:nth-of-type(6n + 2) {
  background:
    linear-gradient(180deg, rgba(79, 70, 229, 0.14) 0, transparent 4px),
    radial-gradient(820px 400px at 108% -8%, rgba(79, 70, 229, 0.13), transparent 56%),
    radial-gradient(560px 340px at -8% 102%, rgba(4, 120, 87, 0.08), transparent 54%),
    radial-gradient(480px 280px at 72% 88%, rgba(180, 83, 9, 0.04), transparent 50%),
    linear-gradient(182deg, #ffffff 0%, #f8f8fc 48%, #fafafa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 3px 0 0 rgba(79, 70, 229, 0.1);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 2):not(.saas-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(24, 24, 27, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, transparent 70%);
  opacity: 0.5;
}

/* R2 — “drift”: layered dusk + soft crown light */
main#main.site-flow > section.site-section:nth-of-type(6n + 3) {
  background:
    linear-gradient(180deg, rgba(4, 120, 87, 0.16) 0, transparent 4px),
    radial-gradient(110% 70% at 50% -20%, rgba(255, 255, 255, 0.95), transparent 55%),
    linear-gradient(188deg, #fdfdff 0%, #ececf2 46%, #ffffff 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset -4px 0 0 rgba(4, 120, 87, 0.14);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 3):not(.saas-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(79, 70, 229, 0.055), transparent 58%),
    radial-gradient(700px 400px at 100% 100%, rgba(4, 120, 87, 0.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* R3 — “bias”: prismatic sweep */
main#main.site-flow > section.site-section:nth-of-type(6n + 4) {
  background:
    linear-gradient(90deg, rgba(79, 70, 229, 0.2) 0%, rgba(4, 120, 87, 0.18) 50%, rgba(180, 83, 9, 0.12) 100%) 0 0 / 100% 3px no-repeat,
    conic-gradient(from 210deg at 78% 18%, rgba(79, 70, 229, 0.06), transparent 42%),
    linear-gradient(122deg, #ffffff 0%, #eef2ff 38%, #f4f4f7 72%, #ffffff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 3px 0 rgba(79, 70, 229, 0.1),
    inset 0 0 80px rgba(79, 70, 229, 0.04),
    inset -5px 0 0 rgba(79, 70, 229, 0.08);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 4):not(.saas-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(128deg, transparent 38%, rgba(255, 255, 255, 0.55) 49%, transparent 62%);
  opacity: 0.4;
}

/* R4 — “ledger”: rail + paper warmth */
main#main.site-flow > section.site-section:nth-of-type(6n + 5) {
  background:
    linear-gradient(180deg, rgba(180, 83, 9, 0.2) 0, transparent 4px),
    radial-gradient(900px 420px at 0% 50%, rgba(180, 83, 9, 0.04), transparent 45%),
    linear-gradient(180deg, #fcfcfd 0%, #f0f0f3 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 5):not(.saas-section)::before {
  content: "";
  position: absolute;
  top: clamp(2.5rem, 8vw, 5rem);
  bottom: clamp(2.5rem, 8vw, 5rem);
  left: 0;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.65), rgba(4, 120, 87, 0.5));
  box-shadow: 4px 0 24px rgba(79, 70, 229, 0.12);
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 639px) {
  main#main.site-flow > section.site-section:nth-of-type(6n + 5):not(.saas-section)::before {
    top: 1.75rem;
    bottom: 1.75rem;
    width: 3px;
  }
}

/* R5 — “field”: dual-scale grain */
main#main.site-flow > section.site-section:nth-of-type(6n + 6) {
  background-color: #f7f8fb !important;
  background-image:
    linear-gradient(180deg, rgba(24, 24, 27, 0.09) 0, transparent 3px),
    radial-gradient(rgba(24, 24, 27, 0.038) 1px, transparent 1px),
    radial-gradient(rgba(79, 70, 229, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 3px, 20px 20px, 7px 7px !important;
  background-position: 0 0, 0 0, 11px 9px !important;
  background-repeat: no-repeat, repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset -4px 0 0 rgba(79, 70, 229, 0.09);
}

/* R6 — “orbit”: moonlit stage */
main#main.site-flow > section.site-section:nth-of-type(6n + 7) {
  background:
    linear-gradient(90deg, rgba(79, 70, 229, 0.18) 0%, rgba(4, 120, 87, 0.15) 100%) 0 0 / 100% 3px no-repeat,
    radial-gradient(900px 380px at 50% 0%, rgba(79, 70, 229, 0.08), transparent 58%),
    linear-gradient(198deg, #ffffff 0%, #ebebf3 55%, #f8f8fa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset -3px 0 0 rgba(4, 120, 87, 0.11);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
  border-radius: var(--radius-frame);
  border: 1px solid rgba(228, 228, 231, 0.92);
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 32px 64px -38px rgba(24, 24, 27, 0.16),
    0 12px 40px -24px rgba(79, 70, 229, 0.1);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
  main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
    border-radius: var(--radius-card);
    margin-inline: 0;
  }
}

/* SaaS band: chroma lift + glassy ceiling */
main#main.site-flow > section.site-section.saas-section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(79, 70, 229, 0.12) 50%, rgba(4, 120, 87, 0.1) 100%) 0 0 / 100% 3px no-repeat,
    radial-gradient(1000px 440px at 18% -12%, rgba(79, 70, 229, 0.14), transparent 56%),
    radial-gradient(780px 400px at 94% 108%, rgba(4, 120, 87, 0.09), transparent 54%),
    linear-gradient(172deg, #f2f3ff 0%, #eef2ff 36%, #f0f0f4 70%, #e9e9f1 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 120px rgba(79, 70, 229, 0.06);
}

/* Final CTA — cinematic strip + faint grid */
main#main.site-flow > section.site-section--terminal {
  border-top-left-radius: clamp(18px, 4vw, 32px);
  border-top-right-radius: clamp(18px, 4vw, 32px);
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(79, 70, 229, 0.35), transparent 55%),
    radial-gradient(700px 240px at 95% 80%, rgba(4, 120, 87, 0.18), transparent 50%),
    radial-gradient(rgba(248, 250, 252, 0.04) 1px, transparent 1px),
    linear-gradient(165deg, #0b0f1a 0%, #09090b 45%, #052e26 100%) !important;
  background-size: auto, auto, 20px 20px, auto !important;
  color: #e2e8f0;
}

main#main.site-flow > section.site-section--terminal::after {
  display: none;
}

main#main.site-flow > section.site-section--terminal .text-white {
  color: #f8fafc !important;
}

main#main.site-flow > section.site-section--terminal .text-slate-400 {
  color: #94a3b8 !important;
}

@media (prefers-reduced-transparency: reduce) {
  main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
    backdrop-filter: none;
    background: #ffffff;
  }
}

/* Nested “related” band inside long-form articles (blog) */
main#main.site-flow article section.site-section {
  position: relative;
  isolation: isolate;
  margin-top: 3rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--radius-frame);
  border-bottom-left-radius: calc(var(--radius-frame) + 6px);
  border-top-right-radius: calc(var(--radius-card) + 4px);
  border: 1px solid rgba(228, 228, 231, 0.95);
  background:
    radial-gradient(640px 220px at 100% 0%, rgba(4, 120, 87, 0.05), transparent 55%),
    radial-gradient(600px 200px at 0% 0%, rgba(79, 70, 229, 0.07), transparent 55%),
    linear-gradient(185deg, #f7f7fb 0%, #ffffff 100%);
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 22px 56px -36px rgba(79, 70, 229, 0.14);
}

main#main.site-flow article section.site-section::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.35), rgba(4, 120, 87, 0.35));
  opacity: 0.85;
  pointer-events: none;
}

/* Staggered vertical rhythm inside bands (no skew) */
main#main.site-flow > section.site-section:nth-of-type(6n + 2) > .mx-auto:first-child {
  padding-top: calc(var(--section-py) * 1.04);
  padding-bottom: calc(var(--section-py) * 0.94);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 3) > .mx-auto:first-child {
  padding-top: calc(var(--section-py) * 0.9);
  padding-bottom: calc(var(--section-py) * 1.06);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 4) > .mx-auto:first-child {
  padding-top: calc(var(--section-py) * 1.02);
  padding-bottom: calc(var(--section-py) * 0.98);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 5) > .mx-auto:first-child {
  padding-inline: calc(var(--section-px) + min(1.25rem, 2vw));
}

main#main.site-flow > section.site-section:nth-of-type(6n + 6) > .mx-auto:first-child {
  padding-top: calc(var(--section-py) * 0.96);
  padding-bottom: calc(var(--section-py) * 1.03);
}

main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
  padding-top: calc(var(--section-py) * 0.94);
  padding-bottom: calc(var(--section-py) * 1.02);
}

/* --------------------------------------------------------------------------
   Site layout system — max width 1200px, section rhythm, typography, cards
   -------------------------------------------------------------------------- */

/* Primary containers */
.site-header .max-w-6xl,
.site-footer .site-footer__inner.max-w-6xl,
main#main .max-w-6xl {
  max-width: var(--layout-max) !important;
}

.site-header .max-w-6xl,
#mobile-nav .max-w-6xl {
  padding-left: var(--section-px) !important;
  padding-right: var(--section-px) !important;
}

.site-footer .site-footer__inner.max-w-6xl {
  padding-top: calc(var(--section-py) * 0.65) !important;
  padding-bottom: calc(var(--section-py) * 0.65) !important;
  padding-left: var(--section-px) !important;
  padding-right: var(--section-px) !important;
}

/* Section vertical rhythm: padding lives on first direct .mx-auto child */
main#main > section {
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

/* FAQ-style sections where the band itself is the centered column */
main#main > section.mx-auto {
  padding: var(--section-py) var(--section-px) !important;
  box-sizing: border-box;
}

main#main > section > div.mx-auto:first-child {
  padding: var(--section-py) var(--section-px) !important;
  box-sizing: border-box;
}

/* Space between stacked section bands ≈ one gap (padding already separates content) */
main#main > section + section {
  margin-top: 0;
}

/* Blog / pages: article or hero blocks as first layout child */
main#main > article.mx-auto {
  box-sizing: border-box;
  max-width: min(100%, 48rem) !important;
  padding: var(--section-py) var(--section-px) !important;
}

/* Long-form blog body inside site-flow: “folio” rail + soft panel corners */
main#main.site-flow > article.mx-auto {
  position: relative;
  isolation: isolate;
  border-radius: 0 var(--radius-frame) var(--radius-frame) 0;
  box-shadow: inset 5px 0 0 rgba(79, 70, 229, 0.11);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 28%);
}

main#main > nav[aria-label] .mx-auto,
main#main > nav.border-b .mx-auto {
  padding-left: var(--section-px) !important;
  padding-right: var(--section-px) !important;
}

/* Blog index: card grid inside section bands */
main#main.site-flow > section.site-section .grid {
  gap: var(--card-gap) !important;
}

/* Headings — section/article page chrome only (card titles keep Tailwind utilities) */
main#main section h1,
main#main article.mx-auto h1 {
  font-size: var(--font-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--ls-display) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--ink) !important;
}

main#main section h2 {
  font-size: var(--font-h2) !important;
  line-height: var(--lh-h2) !important;
  letter-spacing: var(--ls-heading) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--ink) !important;
}

main#main section h3 {
  font-size: var(--font-h3) !important;
  line-height: var(--lh-h3) !important;
  letter-spacing: var(--ls-h3) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--ink) !important;
}

/* Body copy: default paragraphs & list text in sections */
main#main section p,
main#main section li,
main#main article p,
main#main article li {
  font-size: var(--font-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-body);
}

main#main p.text-xs,
main#main .text-xs.font-semibold.uppercase {
  font-size: var(--font-micro) !important;
  line-height: var(--lh-small) !important;
  letter-spacing: var(--ls-micro) !important;
}

/* Primary CTAs in content — keep tap targets; soften endless pill shapes */
main#main a.rounded-full.font-semibold {
  min-height: var(--btn-h);
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: var(--btn-fs) !important;
  line-height: 1.25 !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

main#main a.inline-flex.rounded-full.font-semibold {
  border-radius: var(--radius-button) !important;
}

/* Filled primary buttons — solid hover (replaces brightness-only hovers) */
a.bg-pwblue:hover,
a.inline-flex.bg-pwblue:hover {
  background-color: var(--pw-blue-hover) !important;
  filter: none !important;
}

/* Numbered step / index badges (square tiles, not faux coins) */
main#main span.flex.h-10.w-10.rounded-full,
main#main span.flex.h-8.w-8.rounded-full,
main#main span.inline-flex.h-8.w-8.rounded-full {
  border-radius: var(--radius-chip) !important;
}

/* Small “tab” badges on cards — rounded rectangle, not capsule */
main#main span.absolute.rounded-full[class*="bg-pwblue"][class*="px-2"] {
  border-radius: var(--radius-sm) !important;
}

/* Images never overflow layout column */
main#main img,
.site-header img,
.site-footer img {
  max-width: 100%;
}

/* Card tiles */
main#main section article:not(.overflow-hidden),
main#main section li.rounded-2xl.border.border-line {
  padding: var(--card-pad) !important;
  border-radius: var(--card-radius) !important;
}

main#main section article.overflow-hidden {
  padding: 0 !important;
  border-radius: var(--card-radius) !important;
}

main#main section article.overflow-hidden > div.flex.flex-1,
main#main section article.overflow-hidden > div:last-child {
  padding: var(--card-pad) !important;
}

main#main section article[class*="shadow"]:not(.overflow-hidden) {
  border-radius: var(--card-radius) !important;
}

main#main section details.group.rounded-2xl {
  padding: var(--card-pad) !important;
  border-radius: var(--card-radius) !important;
}

main#main section div.rounded-2xl.border.border-line.shadow-sm:is(.bg-panel, .bg-white) {
  padding: var(--card-pad) !important;
  border-radius: var(--card-radius) !important;
}

/* Grids: card lanes use 20px gap (8px grid × 2.5 → spec 20px) */
main#main section .grid.gap-4 {
  gap: calc(var(--space-1) * 2) !important;
}

main#main section .grid.gap-6,
main#main section .grid.gap-8,
main#main section .grid.gap-10,
main#main section .grid.gap-12 {
  gap: var(--card-gap) !important;
}

main#main section dl.grid {
  gap: var(--card-gap) !important;
}

/* Large media / card frames (Tailwind arbitrary radius) */
main#main section .rounded-\[28px\],
main#main section .rounded-\[24px\],
main#main section .rounded-\[22px\] {
  border-radius: var(--card-radius) !important;
}

/* Inner pages: large rounded hero frame when markup uses rounded-[28px] */
main#main .hero-mesh:not(.hero-deck):not(.hero-stage) .rounded-\[28px\] {
  border-radius: var(--radius-frame) !important;
}

/* Video chrome reads as a “screen”, not the same as a content card */
main#main section .overflow-hidden.rounded-\[24px\] {
  border-radius: var(--radius-frame) !important;
}

/* Reduce oversized stacked spacing inside sections */
main#main section .mt-10,
main#main section .mt-12 {
  margin-top: 24px !important;
}

main#main section .mt-8 {
  margin-top: 16px !important;
}

@media (min-width: 768px) {
  main#main section .mt-10,
  main#main section .mt-12 {
    margin-top: 32px !important;
  }

  main#main section .mt-8 {
    margin-top: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   Theme toggle + dark mode (data-theme="dark" on <html>)
   -------------------------------------------------------------------------- */

.theme-toggle__icons {
  pointer-events: none;
}

.theme-toggle__icon {
  transition: opacity 0.35s var(--ease-out), transform 0.38s var(--ease-out);
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-16deg) scale(0.88);
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(16deg) scale(0.88);
}

html[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, filter;
    transition-duration: 0.38s;
    transition-timing-function: var(--ease-out);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --muted-soft: #8b8c96;
  --surface: #141416;
  --line: #2a2a30;
  --panel: #1a1a1f;
  --canvas: #0c0c0f;
  --rgb-canvas: 12 12 15;
  --rgb-surface: 20 20 22;
  --rgb-panel: 26 26 31;
  --rgb-ink: 244 244 245;
  --rgb-muted: 161 161 170;
  --rgb-muted-soft: 139 140 150;
  --rgb-line: 42 42 48;
  --rgb-pwblue: 129 140 248;
  --rgb-pwblue-hover: 165 180 252;
  --rgb-accent: 52 211 153;
  --rgb-pwamber: 251 191 36;
}

html[data-theme="dark"] ::selection {
  background: rgba(129, 140, 248, 0.35);
  color: var(--ink);
}

html[data-theme="dark"] .site-header {
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.94) 0%, rgba(12, 12, 15, 0.92) 100%);
  border-bottom-color: rgba(129, 140, 248, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-theme="dark"] .site-header nav[aria-label] a:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 28px -12px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .hero-mesh {
  background:
    radial-gradient(1000px 520px at 8% -8%, rgba(129, 140, 248, 0.12), transparent 58%),
    radial-gradient(800px 480px at 92% 4%, rgba(52, 211, 153, 0.08), transparent 52%),
    radial-gradient(600px 400px at 50% 100%, rgba(251, 191, 36, 0.05), transparent 55%),
    linear-gradient(185deg, #12121a 0%, #101014 52%, #0c0c10 100%);
}

html[data-theme="dark"] .hero-mesh.hero-deck {
  background:
    radial-gradient(980px 460px at -5% 5%, rgba(129, 140, 248, 0.16), transparent 52%),
    radial-gradient(760px 420px at 102% 0%, rgba(52, 211, 153, 0.1), transparent 48%),
    linear-gradient(168deg, #14141c 0%, #101018 42%, #0e0e12 78%, #0c0c0f 100%);
}

html[data-theme="dark"] .hero-mesh.hero-stage {
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(129, 140, 248, 0.14), transparent 56%),
    radial-gradient(720px 380px at 102% 10%, rgba(52, 211, 153, 0.1), transparent 52%),
    linear-gradient(198deg, #12121c 0%, #10101a 38%, #0e0e12 72%, #0c0c0f 100%);
}

html[data-theme="dark"] .hero-stage__trust-card {
  border-color: rgba(63, 63, 70, 0.85);
  background: rgba(22, 22, 28, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 36px -26px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] .hero-stage__trust-card {
    background: #16161c;
  }
}

html[data-theme="dark"] main#main.site-flow > section.hero-mesh.hero-stage::after {
  background: linear-gradient(180deg, transparent 0%, rgba(12, 12, 15, 0.35) 50%, rgba(12, 12, 15, 0.96) 100%);
}

html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(1):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 2):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 3):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 4):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 5):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 6):not(.site-section--terminal):not(.saas-section),
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 7):not(.site-section--terminal):not(.saas-section) {
  background:
    linear-gradient(180deg, rgba(129, 140, 248, 0.12) 0, rgba(52, 211, 153, 0.08) 3px, transparent 3px),
    radial-gradient(100% 85% at 50% -28%, rgba(129, 140, 248, 0.08), transparent 58%),
    linear-gradient(178deg, #14141a 0%, #101014 55%, #0e0e12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(129, 140, 248, 0.06),
    inset 4px 0 0 rgba(129, 140, 248, 0.1);
}

html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(1):not(.saas-section)::before,
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 2):not(.saas-section)::before {
  opacity: 0.22 !important;
}

html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 3):not(.saas-section)::before,
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 4):not(.saas-section)::before,
html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 5):not(.saas-section)::before {
  opacity: 0.18 !important;
}

html[data-theme="dark"] main#main.site-flow > section.site-section.saas-section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(129, 140, 248, 0.12) 50%, rgba(52, 211, 153, 0.08) 100%) 0 0 / 100% 3px no-repeat,
    radial-gradient(1000px 440px at 18% -12%, rgba(129, 140, 248, 0.12), transparent 56%),
    linear-gradient(172deg, #16162a 0%, #12121e 36%, #101018 70%, #0e0e12 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 120px rgba(79, 70, 229, 0.05);
}

html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
  border-color: rgba(63, 63, 70, 0.85);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 32px 64px -38px rgba(0, 0, 0, 0.55),
    0 12px 40px -24px rgba(129, 140, 248, 0.12);
  background: rgba(22, 22, 28, 0.78);
}

html[data-theme="dark"] main#main.site-flow > article.mx-auto {
  box-shadow: inset 5px 0 0 rgba(129, 140, 248, 0.14);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%);
}

html[data-theme="dark"] main#main.site-flow article section.site-section {
  border-color: rgba(63, 63, 70, 0.85);
  background:
    radial-gradient(640px 220px at 100% 0%, rgba(52, 211, 153, 0.06), transparent 55%),
    radial-gradient(600px 200px at 0% 0%, rgba(129, 140, 248, 0.08), transparent 55%),
    linear-gradient(185deg, #16161c 0%, #121218 100%);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 56px -36px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] main#main.site-flow > section.hero-mesh:not(.hero-deck):not(.hero-stage)::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  opacity: 0.35;
}

html[data-theme="dark"] .card-hover:hover {
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.55);
  border-color: rgba(129, 140, 248, 0.2);
}

html[data-theme="dark"] .back-to-top {
  border-color: rgba(129, 140, 248, 0.22);
  background: linear-gradient(180deg, #1c1c22, #16161c);
  color: var(--ink);
  box-shadow: 0 12px 36px -20px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .bg-white {
  background-color: rgb(var(--rgb-panel) / 1) !important;
}

html[data-theme="dark"] .bg-white\/5 {
  background-color: rgb(var(--rgb-panel) / 0.05) !important;
}

html[data-theme="dark"] .bg-white\/85 {
  background-color: rgb(var(--rgb-panel) / 0.85) !important;
}

html[data-theme="dark"] .bg-white\/90 {
  background-color: rgb(var(--rgb-panel) / 0.9) !important;
}

html[data-theme="dark"] .bg-white\/95 {
  background-color: rgb(var(--rgb-panel) / 0.95) !important;
}

html[data-theme="dark"] .border-white\/10 {
  border-color: rgb(255 255 255 / 0.08) !important;
}

html[data-theme="dark"] .border-white\/20 {
  border-color: rgb(255 255 255 / 0.12) !important;
}

html[data-theme="dark"] .border-white\/40 {
  border-color: rgb(255 255 255 / 0.18) !important;
}

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] main#main.site-flow > section.site-section:nth-of-type(6n + 7) > .mx-auto:first-child {
    background: #16161c;
  }
}