/* Direction: premium SaaS — white paper, electric blue to violet gradients, a geometric display face */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5fd;
  --border: #e2e4f4;
  --border-strong: #b6b5bd;
  --ink: #0f1535;
  --muted: #565d80;
  --accent: #5b3df5;
  --accent-hover: #4d34d0;
  --accent-ink: #ffffff;
  --accent-text: #4a2fd9;
  --accent-strong: #5b3df5;
  --accent-soft: #edeafe;
  --accent-border: #b5a8fb;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #5b3df5;
  --chart-2: #dd1ab2;
  --chart-3: #8c320a;
  --chart-4: #8f7f0c;
  --chart-5: #09603e;
  --chart-6: #208fab;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --gradient-brand: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --x-on-photo: #ffffff;
  --x-band: #0e1236;
  --x-blue: #2563eb;
  --x-purple: #7c3aed;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080615;
  --surface: #211f2c;
  --surface-2: #141221;
  --border: #2b2936;
  --border-strong: #52515b;
  --ink: #ffffff;
  --muted: #9c9ba1;
  --accent: #5b3df5;
  --accent-hover: #745af7;
  --accent-ink: #ffffff;
  --accent-text: #8974f9;
  --accent-strong: #8974f9;
  --accent-soft: #1a1246;
  --accent-border: #2d1f7a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0b211e;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2e1712;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2f0b17;
  --danger-strong: #d16969;
  --chart-1: #6454f8;
  --chart-2: #e541bb;
  --chart-3: #d54e0e;
  --chart-4: #9d8b05;
  --chart-5: #159765;
  --chart-6: #1f9cbb;
}

.hero-glow {
  background:
    radial-gradient(55% 55% at 15% 0%, color-mix(in srgb, var(--x-blue) 20%, transparent), transparent),
    radial-gradient(50% 55% at 88% 8%, color-mix(in srgb, var(--x-purple) 22%, transparent), transparent);
}
.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-bg { background: var(--gradient-brand); color: var(--x-on-photo); }
.btn.btn-grad {
  background: var(--gradient-brand);
  color: var(--x-on-photo);
  border-color: transparent;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--x-purple) 70%, transparent);
}
.btn.btn-grad:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.btn-grad:active { transform: translateY(0); }
.btn.btn-light {
  background: var(--x-on-photo);
  color: var(--x-band);
  border-color: transparent;
}
.btn.btn-light:hover { filter: brightness(0.94); }
.band-dark { background: var(--x-band); color: var(--x-on-photo); }
.band-dark .band-dim { opacity: 0.72; }
.feature-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--accent-border, var(--accent)); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--x-purple) 60%, transparent); }
.book-card { transition: transform 0.25s ease; }
.book-card:hover { transform: translateY(-4px); }
.float-chip { animation: floaty 5s ease-in-out infinite; }
.float-chip.delay { animation-delay: -2.4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
html.reduced-motion .float-chip { animation: none; }
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chev { transform: rotate(180deg); }
.faq-chev { transition: transform 0.2s ease; }