/* Pylon — landing page styles */
*, *::before, *::after { box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  :root {
    --bg:#05070e; --surface:#0a0d16; --panel:#0b0f1a; --deep:#080b12; --inset:#121826; --raise:rgba(255,255,255,.06);
    --text:#ffffff; --body:#c9d2e3; --muted:#a2aabd; --dim:#8993a8; --faint:#7a839a;
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.05); --lineHi:rgba(255,255,255,.14);
    --brand:#9b6bff; --brand2:#c58bff; --brandGrad:linear-gradient(135deg,#9b6bff,#c58bff);
    --brandSoft:rgba(155,107,255,.10); --brandBr:rgba(155,107,255,.30);
    --green:#35e0a1; --teal:#21e6c8; --greenSoft:rgba(53,224,161,.10); --greenBr:rgba(53,224,161,.30);
    --amber:#ff9f45; --amberSoft:rgba(255,159,69,.10); --amberBr:rgba(255,159,69,.30);
    --pink:#ff5c8a; --pinkSoft:rgba(255,92,138,.12); --pinkBr:rgba(255,92,138,.35);
    --blue:#4db8ff; --blueSoft:rgba(77,184,255,.12); --blueBr:rgba(77,184,255,.35);
    --onBrand:#ffffff; --onGreen:#062018;
    --heroCard:linear-gradient(135deg,#17233d 0%,#0e1526 60%);
    --glow:radial-gradient(1200px 700px at 20% -10%, #10192e 0%, rgba(5,7,14,0) 62%);
  }
  [data-theme="light"] {
    --bg:#f4f6fb; --surface:#ffffff; --panel:#f7f9fc; --deep:#eef1f7; --inset:#eef1f7; --raise:rgba(10,13,22,.06);
    --text:#0a0d16; --body:#2c3446; --muted:#5b6478; --dim:#5f6880; --faint:#616a83;
    --line:rgba(10,13,22,.11); --line2:rgba(10,13,22,.07); --lineHi:rgba(10,13,22,.2);
    --brand:#6d3fd6; --brand2:#7a4ae0; --brandGrad:linear-gradient(135deg,#6d3fd6,#8d5df0);
    --brandSoft:rgba(109,63,214,.08); --brandBr:rgba(109,63,214,.28);
    --green:#0a7a53; --teal:#08787b; --greenSoft:rgba(10,122,83,.09); --greenBr:rgba(10,122,83,.30);
    --amber:#a75a06; --amberSoft:rgba(167,90,6,.09); --amberBr:rgba(167,90,6,.28);
    --pink:#c72d5c; --pinkSoft:rgba(199,45,92,.09); --pinkBr:rgba(199,45,92,.3);
    --blue:#1668ad; --blueSoft:rgba(22,104,173,.09); --blueBr:rgba(22,104,173,.3);
    --onBrand:#ffffff; --onGreen:#ffffff;
    --heroCard:linear-gradient(135deg,#ffffff 0%,#f2f5fb 60%);
    --glow:radial-gradient(1200px 700px at 20% -10%, #e6eaf6 0%, rgba(244,246,251,0) 62%);
  }
  body { font-family:'Archivo', system-ui, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
  a { color:var(--brand2); text-decoration:none; }
  a:hover { color:var(--brand); }
  @keyframes clockPulse { 0%,100% { box-shadow:0 0 0 0 rgba(155,107,255,.55); } 50% { box-shadow:0 0 0 8px rgba(155,107,255,0); } }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }
  /* The hero app-preview mockup is a fixed multi-column desktop layout; below 860px
     it just overflows/squishes rather than reading as a product screenshot, so hide it. */
  @media (max-width: 860px) { .app-preview { display:none; } }

/* interaction states */
.ix1:hover { color: var(--text) !important; }
.ix1:focus-visible { color: var(--text) !important; outline: 2px solid var(--brand) !important; outline-offset: 4px !important; }
.ix2:hover { color: var(--text) !important; }
.ix2:focus-visible { color: var(--text) !important; outline: 2px solid var(--brand) !important; outline-offset: 4px !important; }
.ix3:hover { color: var(--text) !important; }
.ix3:focus-visible { color: var(--text) !important; outline: 2px solid var(--brand) !important; outline-offset: 4px !important; }
.ix4:hover { color: var(--text) !important; }
.ix4:focus-visible { color: var(--text) !important; outline: 2px solid var(--brand) !important; outline-offset: 4px !important; }
.ix5:hover { color: var(--text) !important; }
.ix5:focus-visible { color: var(--text) !important; outline: 2px solid var(--brand) !important; outline-offset: 4px !important; }
.ix6:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(155,107,255,.32) !important; color: var(--onBrand) !important; }
.ix6:focus-visible { outline: 2px solid var(--brand2) !important; outline-offset: 3px !important; }
.ix7:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(155,107,255,.32) !important; color: var(--onBrand) !important; }
.ix7:focus-visible { outline: 2px solid var(--brand2) !important; outline-offset: 3px !important; }
.ix8:hover { border-color: var(--brandBr) !important; transform: translateY(-2px) !important; color: var(--text) !important; }
.ix8:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 3px !important; }
.ix9:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 48px rgba(0,0,0,.4) !important; }
.ix10:hover { transform: translateY(-3px) !important; border-color: var(--brandBr) !important; }
.ix11:hover { transform: translateY(-3px) !important; border-color: var(--greenBr) !important; }
.ix12:hover { border-color: var(--lineHi) !important; }
.ix13:hover { border-color: var(--lineHi) !important; }
.ix14:hover { border-color: var(--lineHi) !important; }
.ix15:hover { border-color: var(--brandBr) !important; transform: translateY(-2px) !important; color: var(--text) !important; }
.ix15:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 3px !important; }
.ix16:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(155,107,255,.32) !important; color: var(--onBrand) !important; }
.ix16:focus-visible { outline: 2px solid var(--brand2) !important; outline-offset: 3px !important; }
.ix17:hover { border-color: var(--lineHi) !important; color: var(--text) !important; }
.ix17:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 3px !important; }

/* press feedback on primary CTAs — hover already lifts them, :active gives tactile confirmation on click/tap */
.ix6:active, .ix7:active, .ix15:active, .ix16:active { transform: scale(.97) !important; transition-duration: 100ms !important; }

/* ============ scroll-reveal ============
   JS (script.js) adds .reveal-armed to <html> only once it has actually wired up an
   IntersectionObserver — so if JS fails or never runs, [data-reveal] elements are plain,
   fully-visible content (progressive enhancement, no flash-of-hidden-content risk). */
.reveal-armed [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.16,.8,.3,1), transform 700ms cubic-bezier(.16,.8,.3,1);
}
.reveal-armed [data-reveal].is-in { opacity: 1; transform: translateY(0); }
/* fade-only variant for cards that already own `transform` for their hover-lift —
   sharing the transform property between two different transitions is what causes
   janky hover after reveal, so these skip the translateY and just fade. */
.reveal-armed [data-reveal-fade] { opacity: 0; transition: opacity 700ms cubic-bezier(.16,.8,.3,1); }
.reveal-armed [data-reveal-fade].is-in { opacity: 1; }

/* reliability-diagram dots pop in with a stagger once the Proof panel is visible */
.reveal-armed [data-reveal-dots] circle {
  opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center;
  transition: opacity 450ms cubic-bezier(.16,.8,.3,1), transform 450ms cubic-bezier(.16,.8,.3,1);
}
.reveal-armed [data-reveal-dots].is-in circle { opacity: 1; transform: scale(1); }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(1) { transition-delay: 0ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(2) { transition-delay: 45ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(3) { transition-delay: 90ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(4) { transition-delay: 135ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(5) { transition-delay: 180ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(6) { transition-delay: 225ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(7) { transition-delay: 270ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(8) { transition-delay: 315ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(9) { transition-delay: 360ms; }
.reveal-armed [data-reveal-dots].is-in circle:nth-child(10) { transition-delay: 405ms; }

/* ============ progress / confidence bars ============
   Same progressive-enhancement pattern: markup ships with the real target width so it's
   correct with no JS; JS only zeroes .bar-fill out at boot (guarded by reveal-armed) so it
   can animate the fill in when the bar scrolls into view instead of just appearing static. */
.bar-fill { transition: width 900ms cubic-bezier(.16,.8,.3,1); }

/* ============ cursor-following spotlight on feature/pricing cards ============ */
.spot { position: relative; }
.spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity 300ms ease-out;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(155,107,255,.16), transparent 70%);
}
.spot:hover::before { opacity: 1; }

/* ============ live status dot ============ */
.live-dot { position: relative; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green);
  animation: livePing 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes livePing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }

/* ============ sticky header ============ */
header { position: sticky; top: 0; z-index: 50; transition: background-color 220ms ease-out, backdrop-filter 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out; }
header.hdr-solid { background-color: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line2); box-shadow: 0 8px 30px rgba(0,0,0,.18); }

/* ============ active nav link (scroll-spy) ============ */
.ix1.nav-active, .ix2.nav-active, .ix3.nav-active, .ix4.nav-active { color: var(--text) !important; }