/* =============================================================================
   PREMIUM PRODUCT LAYER
   A visual-only enhancement that intentionally leaves the document structure,
   content and progressive interactions untouched.
   ============================================================================= */
:root {
  --color-bg-primary: oklch(97.8% 0.008 270);
  --color-bg-secondary: oklch(94.8% 0.014 270);
  --color-surface: oklch(100% 0.005 270 / 0.84);
  --color-glass-subtle: oklch(100% 0.006 270 / 0.62);
  --color-glass-medium: oklch(100% 0.008 270 / 0.72);
  --color-glass-strong: oklch(100% 0.005 270 / 0.78);
  --color-text-primary: oklch(20% 0.025 270);
  --color-text-secondary: oklch(43% 0.025 270);
  --color-text-tertiary: oklch(58% 0.02 270);
  --color-text-on-accent: oklch(99% 0.005 270);
  --color-accent: oklch(58% 0.2 278);
  --color-accent-strong: oklch(48% 0.21 278);
  --color-accent-soft: oklch(91% 0.06 278);
  --color-accent-border: oklch(58% 0.2 278 / 0.3);
  --color-highlight: oklch(70% 0.16 190);
  --color-glow: oklch(70% 0.18 215);
  --color-glow-strong: oklch(57% 0.2 215);
  --color-glow-soft: oklch(91% 0.06 215);
  --color-glow-violet: oklch(58% 0.2 310);
  --color-border: oklch(86% 0.018 270 / 0.9);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-card: 24px;
  --space-card: 1.5rem;
  --surface-card: color-mix(in oklch, var(--color-glass-medium), transparent 7%);
  --border-card: color-mix(in oklch, var(--color-border), transparent 6%);
  --transition-card-premium: 0.38s var(--ease-out-expo);
  --shadow-menu: 0 18px 50px oklch(28% 0.06 270 / 0.1);
  --shadow-panel: 0 24px 70px oklch(28% 0.06 270 / 0.11), 0 1px 0 oklch(100% 0 0 / 0.72) inset;
  --shadow-panel-hover: 0 32px 80px oklch(35% 0.1 270 / 0.16), 0 1px 0 oklch(100% 0 0 / 0.82) inset;
  --shadow-card: 0 14px 38px oklch(28% 0.05 270 / 0.08), 0 1px 0 oklch(100% 0 0 / 0.66) inset;
  --shadow-card-hover: 0 24px 54px oklch(35% 0.1 270 / 0.15), 0 1px 0 oklch(100% 0 0 / 0.8) inset;
  --shadow-btn-hover: 0 12px 30px oklch(58% 0.2 278 / 0.32);
  --container-max-width: 1240px;
}

body {
  background:
    radial-gradient(ellipse 72% 48% at 12% -12%, oklch(72% 0.15 278 / 0.18), transparent 68%),
    radial-gradient(ellipse 52% 36% at 96% 28%, oklch(74% 0.12 215 / 0.11), transparent 72%),
    radial-gradient(ellipse 42% 34% at 46% 104%, oklch(68% 0.12 300 / 0.08), transparent 76%),
    repeating-linear-gradient(90deg, oklch(45% 0.04 270 / 0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, oklch(45% 0.04 270 / 0.035) 0 1px, transparent 1px 72px),
    radial-gradient(oklch(45% 0.04 270 / 0.055) 0.7px, transparent 0.8px),
    var(--color-bg-primary);
  background-size: auto, auto, auto, auto, auto, 5px 5px, auto;
}

/* Dark-mode atmosphere is deliberately global and token-driven. It replaces
   the light surface texture only when the persisted theme is dark. */
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 70% 48% at 8% -14%, var(--color-bg-glow-violet), transparent 68%),
    radial-gradient(ellipse 54% 40% at 96% 24%, var(--color-bg-glow-cyan), transparent 72%),
    radial-gradient(ellipse 48% 38% at 52% 108%, oklch(58% 0.16 292 / 0.08), transparent 76%),
    repeating-linear-gradient(90deg, var(--color-bg-grid) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, var(--color-bg-grid) 0 1px, transparent 1px 72px),
    var(--color-bg-main);
}

.section { position: relative; isolation: isolate; }
.section > .container { position: relative; z-index: 1; }
.section--alt {
  background:
    radial-gradient(ellipse 58% 74% at 8% 50%, oklch(71% 0.13 278 / 0.08), transparent 72%),
    radial-gradient(ellipse 50% 60% at 96% 34%, oklch(72% 0.11 215 / 0.065), transparent 75%),
    linear-gradient(180deg, transparent, var(--color-bg-secondary) 10%, var(--color-bg-secondary) 90%, transparent);
}

.services::after,
.platform::after,
.how-it-works::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, oklch(68% 0.16 278 / 0.15), oklch(68% 0.12 215 / 0.06) 38%, transparent 70%);
  filter: blur(28px);
  opacity: 0.68;
  animation: ambient-drift 18s ease-in-out infinite alternate;
}

.services::after { top: 16%; right: -17%; }
.platform::after { top: 10%; left: -18%; animation-delay: -6s; }
.how-it-works::after { right: -16%; bottom: 6%; animation-delay: -11s; }

@keyframes ambient-drift {
  from { transform: translate3d(-2%, -2%, 0) scale(0.94); }
  to { transform: translate3d(7%, 5%, 0) scale(1.08); }
}

.btn { padding: 0.82rem 1.5rem; letter-spacing: -0.01em; }

.badge { border-color: var(--color-accent-border); background: color-mix(in oklch, var(--color-glass-medium), var(--color-accent-soft) 20%); box-shadow: 0 4px 16px oklch(50% 0.1 278 / .08); }
.hero { padding-top: clamp(2rem, 5vw, 5rem); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(oklch(55% .05 270 / .08) 1px, transparent 1px), linear-gradient(90deg, oklch(55% .05 270 / .08) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero__glow { width: min(70vw, 840px); background: radial-gradient(circle, oklch(72% .17 278 / .28), transparent 68%); filter: blur(22px); }
.hero__heading { max-width: 11ch; font-weight: var(--fw-bold); letter-spacing: -0.045em; }
.hero__heading-accent { background: linear-gradient(100deg, var(--color-accent-strong), var(--color-glow-strong)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero__lead { color: var(--color-text-secondary); }
.hero__visual { border-radius: var(--radius-xl); }
.hero__trust { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }

.services__node, .workflow__card { background: color-mix(in oklch, var(--color-glass-medium), transparent 5%); }
.services__node { border-radius: var(--radius-xl); }
.services__node-icon, .workflow__card-icon { background: linear-gradient(145deg, var(--color-accent-soft), color-mix(in oklch, var(--color-glow-soft), transparent 28%)); }
.platform__panel { background: color-mix(in oklch, var(--color-glass-subtle), transparent 4%); border-radius: 32px; }
.platform__chip { box-shadow: var(--shadow-chip), 0 1px 0 oklch(100% 0 0 / .35) inset; }
.featured-capability::before, .how-it-works::before { content: ''; position: absolute; inset: 8% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border), transparent); }
.workflow { gap: var(--space-2); }
.workflow__card { border-radius: var(--radius-xl); }
.workflow__card--automate { background: linear-gradient(145deg, color-mix(in oklch, var(--color-surface), var(--color-accent-soft) 35%), var(--color-glass-medium)); }

/* Shared card system — specialized layouts retain their content and sizing,
   while every card uses the same surface, edge, depth and interaction rules. */
.services__node,
.workflow__card,
.platform__panel,
.carousel__image,
.ai-assistant__panel,
.hero__dashboard {
  border-color: var(--border-card);
  border-radius: var(--radius-card);
  background-color: var(--surface-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.services__node,
.workflow__card {
  padding: var(--space-card);
}

.services__node,
.workflow__card,
.platform__panel,
.hero__dashboard {
  transition: opacity 0.7s var(--ease-out-expo), transform var(--transition-card-premium),
    translate var(--transition-card-premium),
    box-shadow var(--transition-card-premium), border-color var(--transition-card-premium),
    background-color var(--transition-card-premium);
}

.services__node:hover,
.services__node:focus-within,
.workflow__card:hover,
.workflow__card:focus-within,
.platform__panel:hover,
.platform__panel:focus-within,
.hero__dashboard:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.carousel__image {
  transition: opacity 0.7s var(--ease-out-expo), transform var(--transition-card-premium),
    box-shadow var(--transition-card-premium), border-color var(--transition-card-premium);
}

.carousel__image:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Dashboard cards already float via a transform animation; the individual
   translate property preserves that motion while adding the shared hover lift. */
.hero__dashboard:hover { translate: 0 -6px; }

.platform__panel::before {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.services__node::before {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.ai-assistant__panel {
  box-shadow: var(--shadow-panel);
}

.site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, transparent, var(--color-bg-secondary) 24%, var(--color-bg-primary)); }
.site-footer::before { content: ''; position: absolute; width: min(70vw, 900px); aspect-ratio: 1; left: 50%; top: -18%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, oklch(68% .15 278 / .13), transparent 66%); filter: blur(14px); pointer-events: none; }
.site-footer__closing, .site-footer__grid, .site-footer__bottom { position: relative; }

/* Dark-mode surface system. It intentionally changes only surfaces, borders
   and shadows; existing layout, copy and transform-based hover motion remain
   under each component's original control. */
:root[data-theme="dark"] .section--alt {
  background:
    radial-gradient(ellipse 62% 76% at 7% 44%, oklch(57% 0.16 292 / 0.075), transparent 72%),
    radial-gradient(ellipse 54% 66% at 96% 38%, oklch(68% 0.17 215 / 0.05), transparent 75%),
    linear-gradient(180deg, transparent, var(--color-bg-section) 11%, var(--color-bg-section) 89%, transparent);
}

:root[data-theme="dark"] .site-footer {
  background: linear-gradient(180deg, transparent, var(--color-bg-section) 24%, var(--color-bg-main));
}

:root[data-theme="dark"] .services__node,
:root[data-theme="dark"] .workflow__card,
:root[data-theme="dark"] .platform__panel,
:root[data-theme="dark"] .ai-assistant__panel,
:root[data-theme="dark"] .carousel__slide {
  background: linear-gradient(145deg, oklch(24% 0.04 264 / 0.78), oklch(17% 0.03 264 / 0.82));
  border-color: color-mix(in oklch, var(--color-glow), var(--color-accent) 30%);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.065) inset, 0 14px 36px oklch(2% 0.018 264 / 0.32),
    0 0 20px oklch(60% 0.19 278 / 0.045);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Floating nodes/chips sit inside the platform panel, so they use a slightly
   denser tint to preserve separation from the parent glass surface. */
:root[data-theme="dark"] .platform__chip,
:root[data-theme="dark"] .platform__node-label {
  background: color-mix(in oklch, var(--color-bg-card), var(--color-accent-soft) 18%);
  border-color: color-mix(in oklch, var(--color-glow), transparent 70%);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.07) inset, 0 8px 18px oklch(2% 0.018 264 / 0.28);
}

:root[data-theme="dark"] .carousel__image {
  border-color: color-mix(in oklch, var(--color-glow), transparent 68%);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 14px 32px oklch(2% 0.018 264 / 0.32);
}

:root[data-theme="dark"] .services__node:hover,
:root[data-theme="dark"] .services__node:focus-within,
:root[data-theme="dark"] .workflow__card:hover,
:root[data-theme="dark"] .workflow__card:focus-within,
:root[data-theme="dark"] .platform__panel:hover,
:root[data-theme="dark"] .platform__panel:focus-within,
:root[data-theme="dark"] .carousel__image:hover {
  border-color: color-mix(in oklch, var(--color-glow), var(--color-accent) 52%);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.09) inset, 0 20px 44px oklch(2% 0.018 264 / 0.42),
    0 0 26px oklch(60% 0.19 278 / 0.1), 0 0 16px oklch(68% 0.18 215 / 0.06);
}

:root[data-theme="dark"] .services__node-title,
:root[data-theme="dark"] .workflow__card-title,
:root[data-theme="dark"] .carousel__slide-title,
:root[data-theme="dark"] .platform__panel-header {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .services__node-body,
:root[data-theme="dark"] .workflow__card-body,
:root[data-theme="dark"] .carousel__slide-body,
:root[data-theme="dark"] .workflow__card-meta-label,
:root[data-theme="dark"] .platform__chip-label,
:root[data-theme="dark"] .platform__node-label {
  color: var(--color-text-secondary);
}

@media (max-width: 699px) {
  .hero { padding-top: 1.5rem; }
  .hero::before { background-size: 42px 42px; }
  .hero__heading { max-width: 13ch; }
  .hero__visual { max-width: 520px; margin-inline: auto; }
  .workflow { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__links a, .site-header__links a::after { transition: none; }
}