@charset "UTF-8";
/* Holistics AI page — animations + custom CSS only.
   Tokens come from assets/holistics.css. */
:root {
  /* Sparkle palette — lifted from sparkle-gradient.svg */
  --sp-1: #146DCD;
  --sp-2: #67A4F3;
  --sp-3: #77C9FF;
  --sp-4: #76E0B6;
  --sp-5: #7BE3B0;
  /* Matches the production /ai/v3b 4-stop aurora: purple → blue → sky → cyan */
  --aurora: linear-gradient(96deg, #8D8EF6 0%, #67A4F3 32%, #77C9FF 64%, #8CEADA 100%);
  --aurora-soft: linear-gradient(96deg, rgba(141,142,246,0.30), rgba(103,164,243,0.30), rgba(119,201,255,0.30), rgba(140,234,218,0.30));
  --bg-deep: #02101F;
  --bg-mid: #061B36;
  --bg-shallow: #0A2A4F;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16); }

/* Scoped to .ai-v3-page so styles can't leak into the shared site footer
   (which sits outside the page wrapper). The wrapper class is added in
   tmp/ai-v3-render/render.js and lives on the outer div in _content.html.erb. */
.ai-v3-page {
  background: var(--bg-deep);
  color: #fff;
  font-family: "InterVariable", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }

.ai-v3-page * {
  box-sizing: border-box; }

/* Type helpers --------------------------------------------------------- */
.h-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  background: rgba(20, 109, 205, 0.08);
  border: 1px solid rgba(20, 109, 205, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 540;
  color: rgba(255, 255, 255, 0.85); }

.h-eyebrow .pill {
  background: var(--aurora);
  color: #05264C;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.h-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase; }

.aurora-text {
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }

/* Buttons --------------------------------------------------------------- */
.h-btn {
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 540;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease; }

.h-btn:hover {
  transform: translateY(-1px); }

.h-btn:active {
  transform: translateY(0); }

.h-btn--primary {
  background: var(--green-600);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 18px -8px rgba(37, 155, 108, 0.55); }

.h-btn--primary:hover {
  background: var(--green-700); }

.h-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

.h-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.13); }

/* Aurora gradient border ------------------------------------------------ */
.aurora-border {
  position: relative; }

.aurora-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; }

/* Card on dark ---------------------------------------------------------- */
.card-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  border-radius: 18px; }

/* Media frame — light card holding a product video / screenshot --------- */
.media-frame {
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 50px 100px -30px rgba(0, 0, 0, 0.6), 0 0 80px -20px rgba(20, 109, 205, 0.2); }

.media-frame > video,
.media-frame > img {
  display: block;
  width: 100%;
  border-radius: 10px; }

/* Section padding ------------------------------------------------------- */
.ai-v3-page section {
  position: relative; }

.ai-v3-page .section-pad {
  padding: 100px 0 !important; }

.ai-v3-page .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px; }

@media (max-width: 700px) {
  .ai-v3-page .section-pad {
    padding: 64px 0; } }

/* Headline scale — explicit color overrides Holistics .h1/.h2/.h3
   which default to dark --fg-strong (intended for light surfaces).
   Scoped under .ai-v3-page to match the specificity of the scoped
   overrides in holistics.css.scss. */
.ai-v3-page .h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 510;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 28;
  margin: 0;
  color: #fff; }

.ai-v3-page .h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 540;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 28;
  margin: 0;
  color: #fff; }

.ai-v3-page .h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 540;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
  color: #fff; }

.body-lg {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0; }

.body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0; }

/* ===================== AMBIENT ANIMATIONS =============================== */
/* Slow drifting particles in hero */
@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0); }
  50% {
    transform: translate3d(20px, -30px, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.85); }
  50% {
    opacity: 1;
    transform: scale(1.1); } }

.spark {
  position: absolute;
  border-radius: 50%;
  background: var(--sp-4);
  filter: blur(0.5px);
  pointer-events: none;
  animation: twinkle 3.6s ease-in-out infinite; }

/* Aurora "breathing" wash */
@keyframes aurora-breath {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1); }
  50% {
    opacity: 1;
    transform: scale(1.04); } }

.aurora-wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 109, 205, 0.45) 0%, rgba(20, 109, 205, 0) 70%);
  filter: blur(40px);
  animation: aurora-breath 6s ease-in-out infinite; }

/* Pulsing dot */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: .35; } }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-5);
  box-shadow: 0 0 12px var(--sp-5);
  animation: pulse-dot 1.4s ease-in-out infinite; }

/* Caret blink */
@keyframes caret {
  0%, 49% {
    opacity: 1; }
  50%, 100% {
    opacity: 0; } }

.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -2px;
  animation: caret 1s step-end infinite; }

/* Shimmer bar */
@keyframes shimmer {
  0% {
    background-position: -200% 0; }
  100% {
    background-position: 200% 0; } }

.shimmer {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(20, 109, 205, 0.55) 40%, rgba(118, 224, 182, 0.55) 60%, rgba(255, 255, 255, 0.08) 100%);
  background-size: 200% 100%;
  animation: shimmer 3.2s linear infinite; }

/* Scan line — animated stripe sweeping a panel */
@keyframes scan {
  0% {
    transform: translateY(-100%);
    opacity: 0; }
  20% {
    opacity: 0.6; }
  80% {
    opacity: 0.6; }
  100% {
    transform: translateY(100%);
    opacity: 0; } }

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(118, 224, 182, 0) 0%, rgba(118, 224, 182, 0.25) 50%, rgba(118, 224, 182, 0) 100%);
  animation: scan 4s ease-in-out infinite;
  pointer-events: none; }

/* Orbit (slow rotation) */
@keyframes orbit-cw {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes orbit-ccw {
  from {
    transform: rotate(360deg); }
  to {
    transform: rotate(0deg); } }

/* Logo strip marquee */
@keyframes marquee {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-50%); } }

.marquee-track {
  display: flex;
  gap: 64px;
  align-items: center;
  width: max-content;
  animation: marquee 50s linear infinite; }

.marquee-track img {
  height: 28px;
  opacity: 0.55;
  filter: brightness(0) invert(1);
  transition: opacity 200ms ease; }

.marquee-track img:hover {
  opacity: 1; }

/* Stroke draw for SVG paths */
@keyframes draw {
  to {
    stroke-dashoffset: 0; } }

.path-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 2.4s ease-out forwards infinite; }

/* Floating glow node */
@keyframes node-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(118, 224, 182, 0.5), 0 0 16px 2px rgba(118, 224, 182, 0.4); }
  50% {
    box-shadow: 0 0 0 12px rgba(118, 224, 182, 0), 0 0 32px 6px rgba(118, 224, 182, 0.6); } }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1); }

.reveal.in {
  opacity: 1;
  transform: translateY(0); }

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

/* Quote block ---------------------------------------------------------- */
.quote-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px; }
  @media (min-width: 1024px) {
    .quote-card {
      flex-direction: row-reverse;
      align-items: flex-start;
      gap: 0; } }
.quote-card blockquote {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 510;
  color: rgba(255, 255, 255, 0.86);
  position: relative; }
  @media (min-width: 1024px) {
    .quote-card blockquote {
      flex: 1;
      padding-left: 2.5rem;
      border-left: 1px solid var(--line); } }
.quote-card blockquote::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 16px;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M4.00293 4C2.89874 4 2.00347 4.89483 2.00293 5.99902L2 11.999C1.99946 13.104 2.89505 14 4 14H5.00016L5.00342 19.0007C5.00363 19.3285 5.16455 19.6354 5.43409 19.8221C5.70363 20.0088 6.04755 20.0514 6.35454 19.9363L6.35653 19.9356L6.36474 19.9325L6.38078 19.9262C6.39338 19.9213 6.40976 19.9147 6.42967 19.9065C6.46948 19.8901 6.5235 19.867 6.58971 19.8368C6.72196 19.7766 6.90379 19.6878 7.11868 19.5669C7.54676 19.3261 8.11607 18.9526 8.68736 18.417C9.84161 17.3349 11.0034 15.5853 11.0034 13V5.99882C11.0034 4.89272 10.1065 4 9.00342 4H4.00293Z'/><path d='M15.0039 4C13.8993 4 13.0039 4.89543 13.0039 6V12C13.0039 13.1046 13.8993 14 15.0039 14H16.0039V19C16.0039 19.328 16.1647 19.6351 16.4343 19.8219C16.7039 20.0087 17.0479 20.0515 17.355 19.9363L17.356 19.936L17.357 19.9356L17.3594 19.9347L17.3652 19.9325L17.3813 19.9262C17.3939 19.9213 17.4103 19.9147 17.4302 19.9065C17.47 19.8901 17.524 19.867 17.5902 19.8368C17.7225 19.7766 17.9043 19.6878 18.1192 19.5669C18.5473 19.3261 19.1166 18.9526 19.6879 18.417C20.8421 17.3349 22.0039 15.5853 22.0039 13V5.99882C22.0039 4.89272 21.107 4 20.0039 4H15.0039Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none; }

.quote-card blockquote strong {
  color: #fff;
  font-weight: 600; }

.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px; }
  @media (min-width: 1024px) {
    .quote-card figcaption {
      flex: 0 0 220px;
      padding-right: 2.5rem; } }
.quote-card figcaption img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0; }

.quote-card figcaption .name {
  font-weight: 600;
  color: #fff; }

.quote-card figcaption .role {
  color: rgba(255, 255, 255, 0.55); }

/* FAQ ----------------------------------------------------------------- */
.faq-item {
  padding: 22px 4px;
  border-bottom: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 540;
  color: #fff; }

.faq-item summary::-webkit-details-marker {
  display: none; }

.faq-item summary .icn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  transition: background 150ms ease, transform 250ms ease; }

.faq-item[open] summary .icn {
  background: var(--aurora);
  color: #05264C;
  transform: rotate(45deg); }

.faq-item p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 800px; }

/* Section header (eyebrow + title + sub) ------------------------------ */
.sec-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center; }

.sec-head.left {
  margin: 0 0 48px;
  text-align: left;
  max-width: 720px; }

.sec-head .h2 {
  margin: 12px 0 14px; }

.sec-head .body-lg {
  color: rgba(255, 255, 255, 0.7); }

/* Grid for feature pairs ---------------------------------------------- */
.split {
  display: grid;
  gap: 56px;
  align-items: center;
  grid-template-columns: 1fr 1fr; }

.split.media-left {
  grid-template-columns: 1fr 1fr; }

.split > .text {
  max-width: 480px; }

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr; } }

/* Floating chip ------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 109, 205, 0.1);
  border: 1px solid rgba(20, 109, 205, 0.3);
  color: var(--sp-4);
  font-size: 11.5px;
  font-weight: 540;
  font-family: "JetBrains Mono", monospace; }

/* AI badge (small) — pair with <SparkIcon /> in markup */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  background: rgba(20, 109, 205, 0.12);
  border: 1px solid rgba(20, 109, 205, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92); }

.ai-badge .ai-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad-aurora, var(--aurora));
  box-shadow: 0 0 10px rgba(118, 224, 182, 0.45);
  display: grid;
  place-items: center;
  flex-shrink: 0; }

.ai-badge .ai-dot svg {
  width: 11px;
  height: 11px; }

/* ─── /ai/v3b responsive tweaks (lifted from design's HTML shell) ─────── */
@media (max-width: 900px) {
  .ai-v3-page .hero-grid {
    grid-template-columns: 1fr !important; }
  .ai-v3-page .aql-pillars {
    grid-template-columns: 1fr !important; }
  .ai-v3-page .as-code-grid {
    grid-template-columns: 1fr !important; }
  .ai-v3-page .everywhere-grid {
    grid-template-columns: 1fr !important; }
  .ai-v3-page .aql-bracket {
    grid-template-columns: 1fr !important; }
  .ai-v3-page .aql-bracket-label,
  .ai-v3-page .aql-bracket-rule {
    display: none !important; }
  .ai-v3-page .aql-bracket > div:last-child {
    padding-left: 0 !important; } }

/* Unified green-gradient emphasis for /ai/v3b headings.
   Applies to both .txt-gradient-green and .aurora-text spans inside any
   heading. Brand-aligned green → near-white pastel mint.
   h-cap eyebrows (which also use .aurora-text) are NOT inside .h1/.h2/.h3,
   so they retain the blue→green sweep from --aurora. */
.h1 .txt-gradient-green, .h1 .aurora-text,
.h2 .txt-gradient-green, .h2 .aurora-text,
.h3 .txt-gradient-green, .h3 .aurora-text {
  background: linear-gradient(to right, #34D399, #A8F0D0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }

/* Section eyebrows: strip the aurora gradient so they recede instead of
   competing with the headline below them. */
.h-cap.aurora-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 600;
  letter-spacing: 0.2em; }

/* card hover-lift (was inline onMouseEnter in JSX) */
.everywhere-grid .card-dark {
  transition: transform 200ms ease, border-color 200ms ease; }

.everywhere-grid .card-dark:hover {
  transform: translateY(-4px);
  border-color: rgba(118, 224, 182, 0.3); }