/* ============================================================
   AI CALLER — AMBIENT MOTION
   Continuous, never-resting motion in every section.

   Rules that keep it feeling expensive rather than busy:
   - transform and opacity only, so it stays on the compositor
   - every loop has a different duration, so nothing ever syncs
     up into a mechanical pulse
   - slow. Nothing under 3s unless it is a deliberate accent
   - anything offscreen gets .motion-off and stops entirely
   - all of it disappears under prefers-reduced-motion
   ============================================================ */

.motion-off *,
.motion-off::before,
.motion-off::after { animation-play-state: paused !important; }

/* ---------- Shared: slow aurora field for dark sections ---------- */
.aurora{position:relative;isolation:isolate}
.aurora::before,.aurora::after{
  content:'';position:absolute;inset:-25%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(232,130,26,.20) 0%, transparent 62%),
    radial-gradient(34% 38% at 78% 68%, rgba(232,130,26,.13) 0%, transparent 64%);
  animation:aurora-a 26s var(--ease-soft) infinite alternate;
}
.aurora::after{
  background:
    radial-gradient(30% 34% at 68% 18%, rgba(255,154,46,.14) 0%, transparent 60%),
    radial-gradient(40% 30% at 18% 82%, rgba(232,130,26,.10) 0%, transparent 66%);
  animation:aurora-b 34s var(--ease-soft) infinite alternate;
}
@keyframes aurora-a{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  100%{transform:translate3d(4%,-3%,0) scale(1.18) rotate(6deg)}
}
@keyframes aurora-b{
  0%{transform:translate3d(0,0,0) scale(1.1) rotate(0deg)}
  100%{transform:translate3d(-5%,4%,0) scale(1) rotate(-8deg)}
}

/* ---------- Shared: light sweep across a surface ---------- */
.sweep{position:relative;overflow:hidden}
.sweep::after{
  content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  animation:sweep-x 7s var(--ease-soft) infinite;
}
.dark .sweep::after{background:linear-gradient(100deg,transparent,rgba(255,200,120,.10),transparent)}
@keyframes sweep-x{0%{left:-60%}55%,100%{left:130%}}

/* ---------- Shared: organic idle float ----------
   Each element gets its own duration and delay so the group
   drifts like something alive rather than a metronome. */
.float{animation:float-y 7s var(--ease-soft) infinite alternate}
.float:nth-child(2){animation-duration:8.4s;animation-delay:-1.1s}
.float:nth-child(3){animation-duration:6.6s;animation-delay:-2.4s}
.float:nth-child(4){animation-duration:9.1s;animation-delay:-0.7s}
.float:nth-child(5){animation-duration:7.7s;animation-delay:-3.2s}
.float:nth-child(6){animation-duration:8.9s;animation-delay:-1.8s}
@keyframes float-y{from{transform:translateY(0)}to{transform:translateY(-6px)}}

/* ============================================================
   HERO
   ============================================================ */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(28% 30% at 88% 78%, rgba(255,154,46,.12) 0%, transparent 66%);
  animation:aurora-b 29s var(--ease-soft) infinite alternate;
}

/* drifting star field, very low contrast, pure atmosphere */
.hero-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-dust i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(255,190,120,.55);
  animation:dust-rise 18s linear infinite;
}
.hero-dust i:nth-child(1){left:12%;animation-duration:19s;animation-delay:-2s}
.hero-dust i:nth-child(2){left:26%;animation-duration:24s;animation-delay:-7s}
.hero-dust i:nth-child(3){left:41%;animation-duration:16s;animation-delay:-11s}
.hero-dust i:nth-child(4){left:57%;animation-duration:27s;animation-delay:-4s}
.hero-dust i:nth-child(5){left:69%;animation-duration:21s;animation-delay:-15s}
.hero-dust i:nth-child(6){left:83%;animation-duration:17s;animation-delay:-9s}
.hero-dust i:nth-child(7){left:92%;animation-duration:25s;animation-delay:-1s}
.hero-dust i:nth-child(8){left:5%; animation-duration:22s;animation-delay:-13s}
@keyframes dust-rise{
  from{transform:translateY(105%) translateX(0);opacity:0}
  10%{opacity:.7}
  85%{opacity:.5}
  to{transform:translateY(-15%) translateX(22px);opacity:0}
}

/* the trust numbers shimmer very occasionally */
.trust-item b{background-size:200% 100%;
  background-image:linear-gradient(100deg,var(--amber-hot) 40%,#FFD9A8 50%,var(--amber-hot) 60%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 9s linear infinite}
.trust-item:nth-child(2) b{animation-delay:-2.2s}
.trust-item:nth-child(3) b{animation-delay:-4.4s}
.trust-item:nth-child(4) b{animation-delay:-6.6s}
@keyframes shimmer{0%{background-position:120% 0}45%,100%{background-position:-60% 0}}

/* demo widget: a live breathing edge so it reads as "active" */
.hero .demo{animation:demo-glow 6.5s var(--ease-soft) infinite alternate}
@keyframes demo-glow{
  from{box-shadow:0 0 60px rgba(232,130,26,.14),var(--sh-l)}
  to{box-shadow:0 0 110px rgba(232,130,26,.30),var(--sh-l)}
}
.demo-head h3::after{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--amber);margin-left:.5em;vertical-align:middle;
  animation:live-blip 2.4s ease-in-out infinite}
@keyframes live-blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.78)}}

/* ============================================================
   MARQUEES (logos + integrations)
   ============================================================ */
.marq-track{animation:marq 38s linear infinite}
.marq-track--rev{animation:marq-rev 44s linear infinite}
@keyframes marq-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.imarq{overflow:hidden;position:relative;padding-block:.4em;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.imarq + .imarq{margin-top:var(--s-2xs)}
.imarq-track{display:flex;gap:var(--s-2xs);width:max-content;animation:marq 46s linear infinite}
.imarq--rev .imarq-track{animation:marq-rev 52s linear infinite}
.imarq--slow .imarq-track{animation-duration:58s}
.imarq:hover .imarq-track{animation-play-state:paused}

.ichip{
  display:flex;flex-direction:column;gap:.15em;justify-content:center;
  background:var(--surface);border:1px solid var(--ink-12);border-radius:var(--r-m);
  padding:.85em 1.4em;min-width:170px;white-space:nowrap;
  transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.ichip:hover{border-color:var(--amber);background:var(--amber-tint);transform:translateY(-2px)}
.ichip b{font-size:var(--t-sm);font-weight:650;color:var(--ink)}
.ichip span{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink-40);
  text-transform:uppercase;letter-spacing:var(--ls-wide)}
.ichip-dot{position:absolute}

/* ============================================================
   COMPARISON
   ============================================================ */
.cmp--win{position:relative;overflow:hidden}   /* contains the sweep; badge is in-flow so it is unaffected */
.cmp--win::after{
  content:'';position:absolute;top:0;bottom:0;width:40%;left:-55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,130,26,.10),transparent);
  animation:sweep-x 8.5s var(--ease-soft) infinite}
.cmp--bad li svg{animation:fade-throb 5s ease-in-out infinite}
.cmp--bad:nth-child(2) li svg{animation-duration:6.2s;animation-delay:-1.5s}
@keyframes fade-throb{0%,100%{opacity:.55}50%{opacity:.22}}

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.roi-out{position:relative;overflow:hidden}
.roi-out::before{
  content:'';position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(40% 45% at 30% 25%, rgba(232,130,26,.22) 0%, transparent 64%);
  animation:aurora-a 22s var(--ease-soft) infinite alternate}
.roi-out > *{position:relative}
.roi-big{background-size:220% 100%;
  background-image:linear-gradient(100deg,var(--amber-hot) 42%,#FFE0B5 50%,var(--amber-hot) 58%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 7.5s linear infinite}
input[type=range]::-webkit-slider-thumb{animation:thumb-breathe 4.2s var(--ease-soft) infinite alternate}
@keyframes thumb-breathe{
  from{box-shadow:0 2px 8px rgba(18,16,13,.22),0 0 0 0 rgba(232,130,26,.30)}
  to{box-shadow:0 2px 8px rgba(18,16,13,.22),0 0 0 7px rgba(232,130,26,0)}
}

/* ============================================================
   STEPS: a pulse travels the rails, forever
   ============================================================ */
.steps.in .step::after{width:100%}
.step .step-pulse{
  position:absolute;top:-2px;left:0;width:34px;height:6px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--amber-hot),transparent);
  filter:blur(1px);opacity:0;
  animation:pulse-travel 9s linear infinite}
.steps .step:nth-child(1) .step-pulse{animation-delay:0s}
.steps .step:nth-child(2) .step-pulse{animation-delay:.55s}
.steps .step:nth-child(3) .step-pulse{animation-delay:1.1s}
.steps .step:nth-child(4) .step-pulse{animation-delay:1.65s}
@keyframes pulse-travel{
  0%{left:-12%;opacity:0}
  4%{opacity:1}
  22%{left:100%;opacity:0}
  100%{left:100%;opacity:0}
}
.step-n{position:relative}

/* ============================================================
   CAPABILITY CARDS: icons drift, borders breathe
   ============================================================ */
.fcard{position:relative;overflow:hidden}
.fgrid.in .fcard .fcard-ic{animation:float-y 7s var(--ease-soft) infinite alternate}
.fgrid.in .fcard:nth-child(2) .fcard-ic{animation-duration:8.6s;animation-delay:-1.3s}
.fgrid.in .fcard:nth-child(3) .fcard-ic{animation-duration:6.4s;animation-delay:-2.7s}
.fgrid.in .fcard:nth-child(4) .fcard-ic{animation-duration:9.2s;animation-delay:-0.9s}
.fgrid.in .fcard:nth-child(5) .fcard-ic{animation-duration:7.4s;animation-delay:-3.4s}
.fgrid.in .fcard:nth-child(6) .fcard-ic{animation-duration:8.1s;animation-delay:-2.1s}
.fcard::before{
  content:'';position:absolute;top:0;left:-55%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,130,26,.07),transparent);
  animation:sweep-x 11s var(--ease-soft) infinite}
.fgrid.in .fcard:nth-child(2)::before{animation-duration:12.5s;animation-delay:-3s}
.fgrid.in .fcard:nth-child(3)::before{animation-duration:10.2s;animation-delay:-6s}
.fgrid.in .fcard:nth-child(4)::before{animation-duration:13s;animation-delay:-1.5s}
.fgrid.in .fcard:nth-child(5)::before{animation-duration:11.4s;animation-delay:-8s}
.fgrid.in .fcard:nth-child(6)::before{animation-duration:12s;animation-delay:-4.5s}

/* ============================================================
   INDUSTRY CARDS
   ============================================================ */
.icard .ia{animation:nudge-x 4.5s var(--ease-soft) infinite}
.icards .icard:nth-child(2) .ia{animation-duration:5.3s;animation-delay:-1.4s}
.icards .icard:nth-child(3) .ia{animation-duration:4.9s;animation-delay:-2.8s}
@keyframes nudge-x{0%,72%,100%{transform:translateX(0)}82%{transform:translateX(4px)}}

/* ============================================================
   STATS
   ============================================================ */
.stat b{background-size:220% 100%;
  background-image:linear-gradient(100deg,var(--amber-hot) 42%,#FFE0B5 50%,var(--amber-hot) 58%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 8s linear infinite}
.stats .stat:nth-child(2) b{animation-delay:-2s}
.stats .stat:nth-child(3) b{animation-delay:-4s}
.stats .stat:nth-child(4) b{animation-delay:-6s}

/* ============================================================
   PROOF CARDS
   ============================================================ */
.pcard{position:relative;overflow:hidden}
.pcard::after{
  content:'';position:absolute;top:0;left:-55%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,154,46,.08),transparent);
  animation:sweep-x 10s var(--ease-soft) infinite}
.proof .pcard:nth-child(2)::after{animation-duration:11.6s;animation-delay:-3.5s}
.proof .pcard:nth-child(3)::after{animation-duration:9.4s;animation-delay:-7s}

/* ============================================================
   SECURITY ICONS
   ============================================================ */
.secgrid.in .seci svg{animation:float-y 6.8s var(--ease-soft) infinite alternate}
.secgrid.in .seci:nth-child(2) svg{animation-duration:8.2s;animation-delay:-1.6s}
.secgrid.in .seci:nth-child(3) svg{animation-duration:7.1s;animation-delay:-3.1s}
.secgrid.in .seci:nth-child(4) svg{animation-duration:9s;animation-delay:-0.8s}

/* ============================================================
   PRICING: the featured card keeps a living border
   ============================================================ */
.price--best{position:relative;overflow:hidden}
.price--best::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,130,26,.10),transparent);
  animation:sweep-x 9s var(--ease-soft) infinite}
.price--best{animation:best-breathe 5.5s var(--ease-soft) infinite alternate}
@keyframes best-breathe{
  from{box-shadow:0 8px 28px rgba(18,16,13,.09),0 0 0 0 rgba(232,130,26,0)}
  to{box-shadow:0 8px 28px rgba(18,16,13,.09),0 0 0 6px rgba(232,130,26,.09)}
}

/* ============================================================
   FAQ: the plus sign has a faint idle tick
   ============================================================ */
.faq details:not([open]) .fplus{animation:plus-idle 6s var(--ease-soft) infinite}
.faq details:nth-child(2n):not([open]) .fplus{animation-delay:-2s}
.faq details:nth-child(3n):not([open]) .fplus{animation-delay:-4s}
@keyframes plus-idle{0%,88%,100%{transform:rotate(0)}94%{transform:rotate(90deg)}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{overflow:hidden}
.cta::after{
  content:'';position:absolute;inset:-40%;pointer-events:none;
  background:
    radial-gradient(32% 36% at 24% 30%, rgba(232,130,26,.24) 0%, transparent 62%),
    radial-gradient(28% 32% at 76% 72%, rgba(255,154,46,.16) 0%, transparent 64%);
  animation:aurora-a 24s var(--ease-soft) infinite alternate}
.cta > *{position:relative;z-index:1}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{position:relative;overflow:hidden}
.ftr::before{
  content:'';position:absolute;inset:-50% -10% auto;height:160%;pointer-events:none;
  background:radial-gradient(30% 40% at 18% 20%, rgba(232,130,26,.10) 0%, transparent 62%);
  animation:aurora-b 32s var(--ease-soft) infinite alternate}
.ftr > *{position:relative}
.ftr-badge{transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.ftr-badge:hover{border-color:var(--amber);color:var(--amber-hot)}

/* ============================================================
   REDUCED MOTION: stop absolutely everything
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after,.hero::after,.hero-dust,.hero-dust i,
  .trust-item b,.hero .demo,.demo-head h3::after,
  .marq-track,.marq-track--rev,.imarq-track,
  .cmp--win,.cmp--win::after,.cmp--bad li svg,
  .roi-out::before,.roi-big,input[type=range]::-webkit-slider-thumb,
  .step .step-pulse,.fcard-ic,.fcard::before,.icard .ia,
  .stat b,.pcard::after,.seci svg,
  .price--best,.price--best::after,.fplus,
  .cta::after,.ftr::before,.sweep::after{
    animation:none!important}
  .hero-dust{display:none}
  .trust-item b,.roi-big,.stat b{
    -webkit-text-fill-color:currentColor;background:none;color:var(--amber-hot)}
}

/* ============================================================
   CTA SHADER FIELD

   Layer order inside .cta (which is isolation:isolate, so this
   stack is self-contained):
     0  .cta-shader   the WebGL canvas + its scrim
     1  .cta::before  amber brand wash, .cta-orbit embers
     2  h2 / p / buttons

   The scrim is what makes this safe to put text on. A flat pass
   plus a pool of darkness under the text column means the worst
   pixel the shader can physically produce still leaves the
   heading at 7.2:1 and the muted paragraph at 4.6:1. Both clear
   WCAG AA. Verified by computing the composite, not by eye.

   Nothing here is visible until JS confirms WebGL2 compiled and
   adds .cta--shader, so a failure shows the original gradient.
   ============================================================ */
.cta > .cta-shader{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 900ms var(--ease-soft);
}
.cta--shader > .cta-shader{opacity:1}
.cta-canvas{display:block;width:100%;height:100%}

.cta > .cta-shader::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(58% 76% at 50% 46%, rgba(11,10,8,.55) 0%, rgba(11,10,8,.28) 62%, transparent 82%),
    rgba(11,10,8,.58);
}

/* brand wash and embers sit above the field, not below it */
.cta::before{z-index:1}
.cta-orbit{z-index:1}

/* ============================================================
   SECTION SPARKLE FIELD

   z-index:-1 inside an isolated section puts the canvas above
   the section's own background and below its in-flow content,
   which is why no text needs a z-index of its own. isolation
   keeps the negative index from escaping behind an ancestor.
   ============================================================ */
section, .ftr{isolation:isolate}
/* Every field host must be its own containing block AND clip its
   injected layers: an absolutely-positioned glow anchored to the
   document (instead of its section) extends the page scroll height,
   which surfaced as dead space below the footer. Variant sections
   (.hero/.phero/.cta/…) declare the same values themselves; this
   element-level rule is the catch-all and loses to none of them. */
section{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){ canvas.spk{display:none} }

/* ============================================================
   POINTER GLOW

   One per section, tracking the cursor. Sits at the same
   z-index:-1 plane as the particle canvas, so it is above the
   section's own background and below its content.

   Alphas were chosen against the text that sits on them:
     paper  amber .16  -> heading 16.3:1, body 6.6:1
     night  warm  .20  -> heading 11.7:1, body 6.9:1
   Both clear WCAG AA at the glow's brightest point, so the light
   can never wash out a line of copy.
   ============================================================ */
.spk-glow{
  /* position, size, z-index and transform are set inline by
     sparkles.js so no section-scoped rule can drop this layer
     into normal flow. Appearance only, here. */
  opacity:0;transition:opacity 520ms var(--ease-soft);
  background:radial-gradient(circle at center,
    rgba(232,130,26,.16) 0%,
    rgba(232,130,26,.09) 34%,
    rgba(232,130,26,.03) 58%,
    transparent 74%);
  filter:blur(30px);
  will-change:left,top;
}
.spk-glow--night{
  background:radial-gradient(circle at center,
    rgba(255,196,128,.20) 0%,
    rgba(255,170,90,.11) 34%,
    rgba(232,130,26,.04) 58%,
    transparent 74%);
}
.spk-glow.on{opacity:1}

@media (prefers-reduced-motion:reduce){ .spk-glow{display:none} }
@media (hover:none){ .spk-glow{display:none} }