/**
 * Iliana AI: animations and scroll effects
 * Ported from the iliana-future prototype. Paired with assets/js/ilianaai-motion.js.
 *
 * Motion only: layout, colours and fonts come from Elementor. The few layout rules that remain are
 * marked "mechanism" because the effect cannot work without them (sticky scroll, stacked layers).
 * The classes / IDs used here are attached to the existing Elementor elements by
 * includes/ilianaai-motion-map.php, so nothing has to be added in the editor.
 * Selectors that must beat Elementor's own element styles are scoped to a section ID.
 *
 * Contents
 *  01. DESIGN TOKENS
 *  02. HELPERS
 *  03. BUTTONS
 *  04. SCROLL PROGRESS BAR
 *  05. HEADER
 *  06. HERO
 *  07. PROBLEM (SCROLL-SCRUBBED STATEMENT)
 *  08. MEET ILIANA
 *  09. HOW IT WORKS (STICKY STEPS)
 *  10. WHAT ILIANA ENABLES (FEATURE CARDS)
 *  11. BEFORE AND AFTER (WITH / WITHOUT SWITCH)
 *  12. USE CASES (TABS)
 *  13. NEWS
 *  14. SCROLL MOTION
 *  15. REDUCED MOTION
 *  16. SECURITY VAULT
 *  17. CTA ORB
 *  18. FAQ SIDE
 *  19. SUN RAYS
 *  20. HOW-IT-WORKS SCENES
 *  21. HERO BACKGROUND
 */


/* ==========================================================================
   01. DESIGN TOKENS
   Easing curves and the brand colours the animated states use.
   ========================================================================== */

:root{
  /* motion: strong custom curves, no overshoot (a B2B sales tool should feel crisp, not bouncy) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* brand colours used by animated states */
  --ink:#0A0E2A;
  --slate:#4B5373;
  --volt:#1A3AF7;
  --volt-hi:#3D5CFF;
  --volt-soft:#ECEFFF;
  --sun:#FDA412;
  --good:#00A63E;
  --good-soft:#E2F5EB;
  --bad:#C93A50;
  --bad-soft:#FCEBEE;
  /* surfaces + type used inside the HTML-widget scenes (20) */
  --paper:#FFFFFF;
  --mist:#F4F6FC;
  --line:#E3E7F2;
  --line-hi:#CED6EC;
  --dim:#8D94B0;
  --shadow:0 1px 2px rgba(10,14,42,.04),0 14px 34px -16px rgba(10,14,42,.16);
  --sans:"Geist",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  --display:"Poppins","Geist",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-lg:0 2px 6px rgba(10,14,42,.04),0 44px 90px -36px rgba(26,58,247,.32);
}


/* ==========================================================================
   02. HELPERS
   [hidden]: the JS hides inactive use-case panels.
   .ping:    small coloured dot containers ("LIVE", "Live now", "Live on /pricing") get a pulsing ring.
   ========================================================================== */

[hidden]{display:none!important}

/* the ring is a pseudo-element that scales and fades (transform + opacity, no box-shadow repaints) */
.ping{position:relative;overflow:visible!important}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s var(--ease-out) infinite;pointer-events:none}
@keyframes ping{from{transform:scale(1);opacity:.7}80%,to{transform:scale(3);opacity:0}}


/* ==========================================================================
   03. BUTTONS
   .btn:       press                  .btn-sun: adds the light sweep on hover (orange buttons)
   .btn-arrow: the arrow icon nudges right on hover (not used on the avatar buttons)
   ========================================================================== */

.btn .elementor-button{transition:transform .16s var(--ease-out),background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
.btn .elementor-button:active{transform:scale(.97)}
.btn .elementor-button-icon{transition:transform .2s var(--ease-out)}
/* mechanism: the shine sweep is clipped to the button */
.btn-sun .elementor-button{position:relative;overflow:hidden;isolation:isolate}
.btn-sun .elementor-button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn-sun .elementor-button::after{transition:transform .7s var(--ease-out)}
  .btn-sun .elementor-button:hover::after{transform:translateX(120%)}
  .btn-arrow .elementor-button:hover .elementor-button-icon{transform:translateX(3px)}
  /* .btn-line (white outline buttons): the border darkens to ink and the button lifts slightly */
  .btn-line .elementor-button:is(:hover,:focus-visible),a.btn-line:is(:hover,:focus-visible){border-color:var(--ink)!important;background-color:var(--paper)!important;color:var(--ink)!important;box-shadow:0 10px 24px -14px rgba(10,14,42,.35)}
}


/* ==========================================================================
   04. SCROLL PROGRESS BAR
   Created by the JS; fills as the page scrolls (see 14).
   ========================================================================== */

.ili-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:9999;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--volt),var(--volt-hi),var(--sun));pointer-events:none}


/* ==========================================================================
   05. HEADER
   #nav (blue header bar) gets .is-scrolled once the page moves.
   ========================================================================== */

.nav{transition:box-shadow .35s}
.nav.is-scrolled{box-shadow:0 20px 44px -18px rgba(10,14,42,.45)}

/* ==========================================================================
   06. HERO
   Load-in:       .ld + .ld-1 … .ld-6 (each starts 60ms after the previous one)
   Live session:  #stage (card + chips), #stage-cap (caption), #stage-clock, .hud-1/2/3 (chips), #intent-num
   ========================================================================== */

.ld{animation:ld .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms + 80ms)}
.ld-1{--i:1}.ld-2{--i:2}.ld-3{--i:3}.ld-4{--i:4}.ld-5{--i:5}.ld-6{--i:6}
@keyframes ld{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}

/* caption words light up one by one as Iliana "speaks" */
#stage-cap span{opacity:.25;transition:opacity .3s}
#stage-cap span.on{opacity:1}

/* voice meter: the bars bounce only while Iliana is speaking (#stage gets .is-speaking) */
.vu{display:flex;align-items:center;gap:3px;height:24px;flex:none}
.vu i{width:3px;height:100%;border-radius:2px;background:var(--volt);transform:scaleY(.18);transition:transform .2s}
.is-speaking .vu i{animation:vu .42s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -67ms)}
@keyframes vu{from{transform:scaleY(.15)}to{transform:scaleY(var(--h,.9))}}

/* hiding is quicker than showing; each chip grows out of the video card it sits on */
.hud{transform-origin:var(--o,50% 50%);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.hud.is-off{opacity:0;transform:translateY(8px) scale(.94);transition-duration:.2s}
.hud-1,.hud-3{--o:100% 50%}
.hud-2{--o:0% 50%}


/* ==========================================================================
   07. PROBLEM (SCROLL-SCRUBBED STATEMENT)
   .problem (the section) > its inner box sticks > .scrub (the paragraph)
   ========================================================================== */

/* mechanism: the section is taller than the screen and its content stays pinned while the words light up */
.problem{height:210vh;justify-content:flex-start!important}
/* Elementor makes a boxed container's inner box grow to fill the section; keep it one screen tall so it can stick */
.problem > .e-con-inner{position:sticky;top:0;flex:0 0 auto!important;height:100vh!important;height:100svh!important;min-height:0!important;max-height:100svh;justify-content:center}
.scrub .sw{color:#BCC3DA;transition:color .35s}
.scrub .sw.on{color:inherit}


/* ==========================================================================
   08. MEET ILIANA
   Floating chips .orbit / .orbit-2 / .orbit-3, stats with .count-up (see JS 08)
   ========================================================================== */

.orbit{animation:bob 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.orbit-2{--dl:-1.5s}
.orbit-3{--dl:-3s}
@keyframes bob{50%{transform:translateY(-10px)}}


/* ==========================================================================
   09. HOW IT WORKS (STICKY STEPS)
   #steps.steps (column with the 2px left border) > .step ×4, .how-viz (right column), #viz-label
   ========================================================================== */

/* the column's own left border is the track; a gradient fill runs down it to the active step */
.steps{position:relative}
.steps::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;border-radius:2px;transform-origin:50% 0;transform:scaleY(var(--p,.25));background:linear-gradient(var(--volt),var(--sun));transition:transform .5s var(--ease-in-out);pointer-events:none}
/* the static gradient bar next to step 1 is replaced by the animated fill (kept in place so nothing shifts) */
.step-bar{opacity:0}
.step{opacity:.4;transition:opacity .45s}
.step.is-on{opacity:1}
/* mechanism: tall steps scroll past a visual that sticks in the middle of the screen */
@media (min-width:901px){
  .step{min-height:56vh;justify-content:center}
  .step:first-child{min-height:44vh;justify-content:flex-start;align-items:flex-start}
  .how-viz{position:sticky;top:max(100px,calc(50vh - 270px));align-self:flex-start}
}


/* ==========================================================================
   10. WHAT ILIANA ENABLES (FEATURE CARDS)
   .spot (mouse glow), #greet-word / #greet-lang, .marquee-track (language chips),
   .draw-in (intent graph), .med-tile .med-1…7 (MEDDICC letters), #hours / #hours-now (24h bars)
   ========================================================================== */

/* pointer spotlight lives on its own empty layer, so moving it never restyles the card's content */
.spot{position:relative;isolation:isolate}
.spot-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease}
.spot-fx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(26,58,247,.55),transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(480px circle at var(--mx,50%) var(--my,0%),rgba(61,92,255,.07),transparent 45%)}
@media (hover:hover) and (pointer:fine){.spot:hover .spot-fx{opacity:1}}

#greet-word{transition:opacity .45s var(--ease-out),transform .6s var(--ease-out),filter .45s}
#greet-word.out{opacity:0;transform:translateY(-12px);filter:blur(6px);transition-duration:.25s}
#greet-word.pre{opacity:0;transform:translateY(18px);filter:blur(8px);transition:none}

/* mechanism: the JS doubles the chips and wraps them in .marquee, so sliding the track by half loops seamlessly */
/* min-width:0 + contain stop the max-content track from widening its flex parents (and the page) on mobile */
.elementor-element-2587d6e .e-con:not(.marquee-track):not(.marquee-track *){min-width:0}
.elementor-element-2587d6e{overflow-x:clip}
#greet-word{white-space:nowrap}
.marquee{width:100%;max-width:100%;min-width:0;contain:inline-size paint;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee > .marquee-track{flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;animation:marq 40s linear infinite}
/* chips are e-con-full (width:100%), which is circular inside a max-content track: size them to their text */
.marquee > .marquee-track > *{flex:none!important;width:auto!important;max-width:none!important;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* the MEDDICC letters light up one after another (each tile 0.55s after the previous one) */
.med-tile{animation:medlit 7s var(--ease-out) infinite;animation-delay:calc(var(--i) * .55s)}
.med-tile .elementor-widget-text-editor{animation:medtxt 7s var(--ease-out) infinite;animation-delay:calc(var(--i) * .55s)}
.med-1{--i:0}.med-2{--i:1}.med-3{--i:2}.med-4{--i:3}.med-5{--i:4}.med-6{--i:5}.med-7{--i:6}
@keyframes medlit{8%,40%{background-color:var(--volt);box-shadow:0 14px 26px -12px rgba(26,58,247,.8)}}
@keyframes medtxt{8%,40%{color:#fff}}

/* the bars sit at the bottom of the card, growing up from a shared baseline */
.hours{display:grid!important;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;align-items:end;height:170px;margin-top:auto!important;align-self:flex-end}
.hours i{display:block;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--volt-hi),#B9C6FF);transform-origin:50% 100%}
.hours i.now{background:linear-gradient(180deg,var(--sun),#FFD58A);box-shadow:0 8px 18px -6px rgba(253,164,18,.7)}


/* ==========================================================================
   11. BEFORE AND AFTER (WITH / WITHOUT SWITCH)
   #compare (section), #cmp-switch with .cmp-opt-without / .cmp-opt-with, .cmp-card, .cmp-row,
   .cmp-ic (icon circle, the JS adds a ✕ next to the ✓), .cmp-t (text, the JS adds the "without" line)
   ========================================================================== */

/* the switch: the existing blue pill becomes one layer that slides behind the selected label */
#cmp-switch{position:relative;cursor:pointer;user-select:none;transition:transform .16s var(--ease-out)}
#cmp-switch:active{transform:scale(.98)}
#cmp-switch > :not(.cmp-pill){position:relative;z-index:1}
#cmp-switch.has-pill .cmp-opt-with{background:transparent!important;box-shadow:none!important}
#cmp-switch .cmp-pill{position:absolute;top:0;left:0;z-index:0;border-radius:99px;background:var(--volt);box-shadow:0 8px 20px -2px rgba(26,58,247,.9);pointer-events:none}
#cmp-switch.is-ready .cmp-pill{transition:transform .25s var(--ease-in-out),width .25s var(--ease-in-out),background-color .25s ease,box-shadow .25s ease}
/* on "Without AI" the pill turns plain white, with no glow */
#cmp-switch[aria-checked="false"] .cmp-pill{background:#FFFFFF;box-shadow:none}
#cmp-switch .cmp-opt-without,#cmp-switch .cmp-opt-with .elementor-widget-text-editor{transition:color .25s ease}
#cmp-switch[aria-checked="true"] .cmp-opt-without{color:var(--slate)}
#cmp-switch[aria-checked="true"] .cmp-opt-with .elementor-widget-text-editor{color:#fff}
#cmp-switch[aria-checked="false"] .cmp-opt-without{color:var(--ink)}
#cmp-switch[aria-checked="false"] .cmp-opt-with .elementor-widget-text-editor{color:var(--slate)}

#compare .cmp-card{transition:box-shadow .6s}
#compare.is-with .cmp-card{box-shadow:var(--shadow-lg)}

/* the circle turns red / green; the ✕ and ✓ sit on top of each other and cross-fade */
#compare .cmp-ic{transition:background-color .4s,box-shadow .4s}
#compare:not(.is-with) .cmp-ic{background-color:var(--bad-soft)!important;box-shadow:none!important}
#compare .cmp-ic .elementor-icon{display:grid;place-items:center}
#compare .cmp-ic .elementor-icon svg{grid-area:1/1;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),filter .25s var(--ease-out)}
#compare .cmp-ic svg.no{width:1em;height:1em;fill:none!important;stroke:var(--bad);stroke-width:3;stroke-linecap:round}
#compare .cmp-ic svg.ok,#compare.is-with .cmp-ic svg.no{opacity:0;transform:scale(.6);filter:blur(2px)}
#compare.is-with .cmp-ic svg.ok,#compare:not(.is-with) .cmp-ic svg.no{opacity:1;transform:none;filter:none}

/* the two lines of text cross-fade in place */
#compare .cmp-tt{display:grid}
#compare .cmp-tt > span{grid-area:1/1;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),filter .3s var(--ease-out)}
#compare .t-without{color:var(--slate)}
#compare .t-with{opacity:0;transform:translateY(8px);filter:blur(3px)}
#compare.is-with .t-with{opacity:1;transform:none;filter:none}
#compare.is-with .t-without{opacity:0;transform:translateY(-8px);filter:blur(3px)}
#compare .cmp-row:nth-child(2) :is(svg,.cmp-tt > span){transition-delay:.04s}
#compare .cmp-row:nth-child(3) :is(svg,.cmp-tt > span){transition-delay:.08s}
#compare .cmp-row:nth-child(4) :is(svg,.cmp-tt > span){transition-delay:.12s}


/* ==========================================================================
   12. USE CASES (TABS)
   #use-cases, .uc-tabs (tab bar) > .uc-tab ×5, .uc-panel ×5. The JS adds the sliding pill and the timer line.
   ========================================================================== */

.uc-tabs{position:relative}
.uc-tab{position:relative;z-index:1;transition:transform .16s var(--ease-out)}
.uc-tab:active{transform:scale(.97)}
/* every tab is drawn transparent; the sliding pill behind it shows which one is selected */
#use-cases .uc-tab .elementor-button{background-color:transparent;color:var(--slate);fill:var(--slate);transition:color .2s ease}
#use-cases .uc-tab .elementor-button:hover{color:var(--ink)}
#use-cases .uc-tab[aria-selected="true"] .elementor-button{color:var(--volt);fill:var(--volt)}
#use-cases .uc-tabs:not(.has-ind) .uc-tab[aria-selected="true"] .elementor-button{background-color:var(--volt-soft)}
/* one highlight that slides to the selected tab */
.uc-ind{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:var(--volt-soft);pointer-events:none;opacity:0}
.uc-tabs.has-ind .uc-ind{opacity:1}
.uc-tabs.is-ready .uc-ind{transition:transform .3s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out)}
.uc-prog{position:absolute;left:18px;right:18px;bottom:4px;height:2px;border-radius:2px;background:rgba(26,58,247,.15);overflow:hidden;opacity:0;pointer-events:none}
.uc-prog::after{content:"";position:absolute;inset:0;background:var(--volt);transform-origin:0 50%;transform:scaleX(0)}
.is-auto.is-play .uc-tab[aria-selected="true"] .uc-prog{opacity:1}
.is-auto.is-play .uc-tab[aria-selected="true"] .uc-prog::after{animation:ucfill 8s linear forwards}
#use-cases:hover .uc-prog::after{animation-play-state:paused!important}
@keyframes ucfill{to{transform:scaleX(1)}}
.uc-panel{animation:ucin .3s var(--ease-out)}
@keyframes ucin{from{opacity:0;transform:translateY(6px)}}


/* ==========================================================================
   13. NEWS
   .post-card (loop item card), .post-img (its image)
   ========================================================================== */

.post-card{transition:box-shadow .3s ease,transform .3s var(--ease-out)}
.post-img{overflow:hidden}
.post-img img{transition:transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .post-card:hover{transform:translateY(-3px)}
  .post-card:hover .post-img img{transform:scale(1.03)}
}


/* ==========================================================================
   14. SCROLL MOTION
   Reveal on scroll: .rv (+ .rv-2 / .rv-3 / .rv-4 for an 80 / 160 / 240ms stagger)
   Scroll-linked:    .tilt (dashboard), .stage-wrap (hero card), .sun-rise (Why Iliana), .draw-in, 24h bars, progress bar
   ========================================================================== */

/* Reveals play once, when an element is properly in view (JS adds .in). Nothing is left half-faded at the bottom
   of the screen and nothing hides again on the way back up. They use the separate `translate` property, so they
   never fight an element's own transform (press, hover lift, tilt). Siblings stagger 80ms apart. */
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:rv .8s var(--ease-out) backwards;animation-delay:var(--rd,0s)}
.js .rv-2{--rd:.08s}
.js .rv-3{--rd:.16s}
.js .rv-4{--rd:.24s}
@keyframes rv{from{opacity:0;translate:0 18px}}
@keyframes fade{from{opacity:0}}
/* explanatory motion stays tied to the scrollbar: the dashboard tilts up, the sun rises, the bars grow */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tilt{transform-origin:50% 100%;animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes tilt{from{transform:perspective(1600px) rotateX(24deg) scale(.9) translateY(40px);opacity:.4}to{transform:perspective(1600px) rotateX(0) scale(1);opacity:1}}
    .sun-rise{animation:rise linear both;animation-timeline:view();animation-range:cover 0% cover 55%}
    @keyframes rise{from{translate:0 270px;scale:.8;opacity:.3}to{translate:0 0;scale:1;opacity:1}}
    .draw-in img{animation:wipe linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
    @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
    .hours i{animation:grow-y linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes grow-y{from{transform:scaleY(.08)}}
    .stage-wrap{animation:float-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes float-out{to{transform:translateY(-60px) scale(.96);opacity:.4}}
  }
  @supports (animation-timeline:scroll()){.ili-progress{animation:grow-x linear both;animation-timeline:scroll(root)}}
  @keyframes grow-x{to{transform:scaleX(1)}}
}


/* ==========================================================================
   15. REDUCED MOTION
   Fewer and gentler, not none: loops stop and nothing travels across the screen,
   but fades stay so every state change still reads.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .ld,.js .rv.in,.uc-panel{animation-name:fade!important;animation-duration:.3s!important}
  .med-tile,.med-tile .elementor-widget-text-editor{animation:none!important}
  .hud.is-off,#compare .cmp-ic svg,#compare .cmp-tt > span{transform:none!important;filter:none!important}
  #cmp-switch.is-ready .cmp-pill,.uc-tabs.is-ready .uc-ind{transition:none}
  .problem{height:auto}
  .problem > .e-con-inner{position:relative;height:auto}
  .scrub .sw{color:inherit}
}


/* ==========================================================================
   16. SECURITY VAULT
   HTML widget: .vault > .ring.r1–r4, .vault-core (lock icon), .vtag.vt1–vt4 (cipher labels)
   ========================================================================== */

.vault{position:relative;width:100%;max-width:480px;aspect-ratio:1;margin-inline:auto;contain:paint}
/* three rings turn at different speeds and directions, each carrying a small dot */
.ring{position:absolute;border-radius:50%;border:1px solid rgba(26,58,247,.18)}
.ring.r1{inset:0;border-style:dashed;border-color:rgba(26,58,247,.22);animation:rot 60s linear infinite}
.ring.r2{inset:12%;animation:rot 40s linear infinite reverse}
.ring.r3{inset:25%;border-style:dashed;border-color:rgba(26,58,247,.3);animation:rot 26s linear infinite}
.ring.r4{inset:37%;background:radial-gradient(circle at 35% 30%,#5C78FF,var(--volt) 60%,#1430D6);border:0;box-shadow:0 30px 60px -18px rgba(26,58,247,.7),inset 0 2px 0 rgba(255,255,255,.3)}
@keyframes rot{to{transform:rotate(360deg)}}
.ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--volt)}
.ring.r2 i{background:var(--sun)}
.vault-core{position:absolute;inset:37%;display:grid;place-items:center;color:#fff}
.vault-core svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vtag{position:absolute;z-index:2;padding:7px 12px;border-radius:999px;background:#FFFFFF;border:1px solid #E3E7F2;box-shadow:0 1px 2px rgba(10,14,42,.04),0 14px 34px -16px rgba(10,14,42,.16);font:500 11.5px/1 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--volt);white-space:nowrap}
.vt1{top:9%;left:8%}
.vt2{top:46%;right:0}
.vt3{bottom:10%;left:12%}
.vt4{bottom:26%;right:10%;color:var(--good)}
@media (max-width:900px){.vault{max-width:360px}}
/* mobile: the HTML widget collapses to 0 in the stacked column, so give it a real size */
@media (max-width:767px){
  .elementor-widget-html:has(.vault){width:100%;min-height:360px;align-self:stretch}
  .vault{min-height:360px}
}


/* ==========================================================================
   17. CTA ORB
   HTML widget: .cta-orb > .ring.r1–r3 (+ i dots), img (Iliana portrait), optional .vtag labels
   Reuses the .ring rotation from 16; on the blue CTA panel the rings go white and r3 pulses.
   ========================================================================== */

.cta-orb{position:relative;width:100%;max-width:360px;aspect-ratio:1;margin-inline:auto}
.cta-orb .ring{border-color:rgba(255,255,255,.25)}
.cta-orb .ring i{background:#fff}
.cta-orb .ring.r2{inset:14%}
.cta-orb .ring.r2 i{background:var(--sun)}
/* r3 stays still and sends out a soft pulse every 3s */
.cta-orb .ring.r3{inset:28%;border:1.5px solid rgba(255,255,255,.5);animation:none}
.cta-orb .ring.r3::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);animation:orbp 3s var(--ease-out) infinite}
@keyframes orbp{from{transform:scale(1);opacity:1}to{transform:scale(1.55);opacity:0}}
.cta-orb img{position:absolute;inset:30%;width:40%!important;height:40%!important;max-width:none;border-radius:50%;object-fit:cover;object-position:50% 22%;border:3px solid #fff;box-shadow:0 20px 50px -10px rgba(5,10,60,.6)}
.cta-orb .vtag{border-color:transparent;color:var(--ink)}
@media (max-width:900px){.cta-orb{max-width:260px}}
/* mobile: keep the HTML widget from collapsing to 0 in the stacked column */
@media (max-width:767px){.elementor-widget-html:has(.cta-orb){width:100%;min-height:260px;align-self:stretch}}


/* ==========================================================================
   18. FAQ SIDE
   .faq-side (left column with the heading) stays pinned while the questions scroll past.
   align-self keeps it from stretching to the full row height, which would stop sticky working.
   ========================================================================== */

.faq-side{position:sticky!important;top:120px;align-self:flex-start!important;height:auto!important}
@media (max-width:900px){.faq-side{position:static!important;align-self:stretch!important}}


/* ==========================================================================
   19. SUN RAYS
   .rays (HTML widget or empty container) behind the rising sun: a slowly turning fan of warm rays.
   Uses the `translate` property for centring so the rot keyframes (16) can own `transform`.
   ========================================================================== */

.e-con:has(> .rays),.e-con-inner:has(> .rays),.e-con:has(> .elementor-widget-html .rays){position:relative;isolation:isolate;overflow:hidden}
.rays{position:absolute!important;left:50%;bottom:0;z-index:-1;width:min(1600px,200vw)!important;max-width:none!important;aspect-ratio:1;translate:-50% calc(50% - 150px);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(253,164,18,.13) 0deg 2deg,transparent 2deg 9deg);-webkit-mask:radial-gradient(closest-side,#000 18%,transparent 66%);mask:radial-gradient(closest-side,#000 18%,transparent 66%);animation:rot 120s linear infinite;pointer-events:none}
.elementor-widget-html:has(.rays){position:static!important}


/* ==========================================================================
   20. HOW-IT-WORKS SCENES
   HTML widget inside .how-viz: 4 x .scene (JS 09 toggles .is-on with the active step).
   [data-a] children fade up one after another, using their inline --d (ms) as the delay.
   Scene 1 .mb browser + chat | Scene 2 .intent gauge + .signals | Scene 3 .leadcard | Scene 4 .flow timeline
   Icons (#i-check, #i-spark, ...) and the gauge gradient (#g-intent) are injected by the JS.
   ========================================================================== */

/* the widget is the positioning frame for the stacked scenes */
.elementor-widget-html:has(.scene){position:relative;width:100%;height:100%;min-height:540px;align-self:stretch}
.elementor-widget-html:has(.scene) > .elementor-widget-container{position:absolute;inset:0}
.scene,.scene *{box-sizing:border-box}
.scene p,.scene ul,.scene ol{margin:0;padding:0;list-style:none}
.scene .ic{width:1em;height:1em;flex:none}

/* outgoing scene clears in 200ms, the incoming one settles in 450-600ms; a small blur hides the overlap */
.scene{position:absolute;inset:0;display:grid;place-items:center;padding:56px 32px 32px;opacity:0;transform:scale(.98);filter:blur(4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),filter .2s var(--ease-out);pointer-events:none;font-family:var(--sans);color:var(--ink)}
.scene.is-on{opacity:1;transform:none;filter:none;pointer-events:auto;transition-duration:.45s,.6s,.45s;transition-delay:.08s}
.scene [data-a]{opacity:0;transform:translateY(10px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.scene.is-on [data-a]{opacity:1;transform:none;transition-duration:.45s,.6s;transition-delay:calc(var(--d,0) * 1ms + 180ms)}
/* Elementor editor: show the first scene so the widget can be edited */
.elementor-editor-active .scene:first-child,.elementor-editor-active .scene:first-child [data-a]{opacity:1;transform:none;filter:none}

/* shared bits */
.hud-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--volt-soft);color:var(--volt);flex:none}
.hud-ic .ic{width:19px;height:19px}
.v-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#22C47A;box-shadow:0 0 0 3px rgba(34,196,122,.18)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:500 12px/1.3 var(--sans);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-good{background:var(--good-soft);color:var(--good)}

/* scene 1: browser mock with a live chat */
.mb{width:min(100%,460px);border-radius:20px;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.mb-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--mist)}
.mb-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-hi)}
.mb-bar span{margin-left:10px;padding:4px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font:400 11px/1 var(--mono);color:var(--slate)}
.mb-body{position:relative;height:300px;padding:18px}
.skel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skel div{height:150px;border-radius:12px;background:var(--mist);border:1px solid var(--line)}
.skel-l{height:10px;border-radius:6px;background:#E6EAF5;margin-bottom:10px}
.mb-chat{position:absolute;right:14px;bottom:14px;width:min(270px,calc(100% - 28px));display:grid;gap:8px}
.bub{display:flex;gap:8px;align-items:flex-end;font-size:13px;line-height:1.4}
.bub img{width:28px!important;height:28px!important;max-width:none;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--sun)}
.bub p{padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--volt);color:#fff;box-shadow:0 8px 18px -10px rgba(26,58,247,.7)}
.bub.you{justify-content:flex-end}
.bub.you p{border-radius:14px 14px 4px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
/* typing indicator */
.dots{display:inline-flex;gap:4px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--volt-soft);width:max-content;margin-left:36px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--volt);animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.scene-note{position:absolute;left:22px;bottom:20px;display:flex;align-items:center;gap:8px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--slate)}
.scene-note .v-dot{width:6px;height:6px}

/* scene 2: intent gauge - the ring draws to 87% and the number counts up with it (CSS only) */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.intent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;width:min(100%,520px)}
.gauge{position:relative;width:200px;height:200px;border-radius:50%;background:var(--paper);box-shadow:var(--shadow-lg)}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:10}
.gauge .trk{stroke:#E8ECF7}
.gauge .val{stroke:url(#g-intent) var(--volt);stroke-linecap:round;stroke-dasharray:527.8;stroke-dashoffset:527.8;transition:stroke-dashoffset 1.6s var(--ease-out) .3s}
.scene.is-on .gauge .val{stroke-dashoffset:68.6}
.gauge-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge-num{font:500 52px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);--n:0;counter-reset:n var(--n);transition:--n 1.6s var(--ease-out) .3s}
.gauge-num::after{content:counter(n)}
.scene.is-on .gauge-num{--n:87}
.gauge-mid small{margin-top:6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.signals{display:grid;gap:10px}
.signals li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px}
.signals li .ic{width:18px;height:18px;color:var(--good)}
.signals li b{font-weight:600}
.signals li span{color:var(--slate)}

/* scene 3: structured lead card */
.leadcard{width:min(100%,440px);padding:22px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.lc-head{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--volt),#6B85FF);color:#fff;font:600 15px/1 var(--sans);flex:none}
.lc-head div{min-width:0;flex:1}
.lc-head b{display:block;font-weight:600;font-size:16px}
.lc-head span{display:block;font-size:13px;color:var(--slate)}
.lc-head .pill{display:inline-flex;font-size:12px;color:var(--good)}
.lc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.lc-fields div{padding:10px 12px;border-radius:12px;background:var(--mist)}
.lc-fields small{display:block;font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lc-fields b{display:block;margin-top:4px;font-weight:600;font-size:14px}
.lc-med{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.lc-med small{font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lc-med ol{display:flex;gap:5px}
.lc-med li{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-hi);font:600 12px/1 var(--mono);color:var(--dim)}
.lc-med li.y{background:var(--volt);border-color:var(--volt);color:#fff}
.scene .lc-sum{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink)}
.lc-sum small{display:block;margin-bottom:6px;font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* scene 4: action timeline - the connecting line fills blue to green once the scene is on */
.flow{position:relative;display:grid;gap:14px;width:min(100%,420px)}
.flow::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line-hi)}
.flow::after{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(var(--volt),var(--good));transition:transform .2s var(--ease-out)}
.scene.is-on .flow::after{transform:none;transition:transform 1.4s var(--ease-in-out) .3s}
.node{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.node .hud-ic{width:32px;height:32px;border-radius:10px}
.node div{flex:1;min-width:0}
.node b{display:block;font-weight:600;font-size:14.5px}
.node span{display:block;font-size:12.5px;color:var(--slate)}
.node .hud-ic{display:grid}
.node time{font:400 11px/1 var(--mono);color:var(--dim)}
.node.last{border-color:rgba(15,138,82,.45);box-shadow:0 0 0 4px rgba(15,138,82,.08),var(--shadow)}
.node.last .hud-ic{background:var(--good-soft);color:var(--good)}

@media (max-width:900px){.elementor-widget-html:has(.scene){min-height:500px}}
@media (max-width:560px){
  .elementor-widget-html:has(.scene){min-height:540px}
  .intent{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
  .gauge{width:160px;height:160px}
  .gauge-num{font-size:44px}
  .signals{width:100%}
  .scene{padding:52px 16px 20px}
}
@media (prefers-reduced-motion:reduce){.scene,.scene [data-a]{transform:none!important;filter:none!important}.dots i{animation:none}}


/* ==========================================================================
   21. HERO BACKGROUND
   HTML widget in the hero container: .hero-bg > canvas#aurora (JS 05) + .hero-grid + .hero-fade.
   The widget is lifted out of the flex flow and fills the container behind the content.
   ========================================================================== */

/* mechanism: the hero container is the frame, the widget covers it on a layer below the content */
.e-con:has(> .elementor-widget-html .hero-bg),.e-con-inner:has(> .elementor-widget-html .hero-bg){position:relative;isolation:isolate;overflow:hidden}
.elementor-widget-html:has(.hero-bg){position:absolute!important;inset:0;z-index:-1;width:auto!important;max-width:none!important;margin:0!important;pointer-events:none}
.elementor-widget-html:has(.hero-bg) > .elementor-widget-container{position:absolute;inset:0}
.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 75% 40%,rgba(61,92,255,.22),transparent 65%),radial-gradient(50% 40% at 10% 95%,rgba(61,92,255,.14),transparent 60%),linear-gradient(180deg,#F6F8FF,#FFFFFF)}
#aurora{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s var(--ease-out)}
#aurora.is-on{opacity:1}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(26,58,247,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,58,247,.07) 1px,transparent 1px);background-size:72px 72px;background-position:center -1px;-webkit-mask:radial-gradient(ellipse 75% 65% at 50% 25%,#000 15%,transparent 78%);mask:radial-gradient(ellipse 75% 65% at 50% 25%,#000 15%,transparent 78%)}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(rgba(255,255,255,0),var(--paper))}
/* white wash on the copy side so the headline stays readable over the aurora */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.4) 42%,rgba(255,255,255,0) 62%)}
@media (max-width:980px){.hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.3) 45%,rgba(255,255,255,0) 70%)}}