/* public/css/anim.css — scroll-reveal + section-relevant animated widgets (brand palette) */

/* ---------- scroll reveal (universal) ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*70ms)}
.reveal.in{opacity:1;transform:none}

/* gentle living details */
.aw-float{animation:awFloat 4.5s ease-in-out infinite}
@keyframes awFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gradient-shimmer{background-size:200% 100%;animation:awShimmer 6s linear infinite}
@keyframes awShimmer{to{background-position:200% 0}}

/* ---------- animated chat (heroes) ---------- */
.aw-chat{width:100%;max-width:330px;display:flex;flex-direction:column;gap:10px}
.aw-m{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:10px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 22px rgba(0,2,46,.06);opacity:0;max-width:88%}
.dark .aw-m{background:#04164b;border-color:#12285e;color:#fff}
.aw-m.u{align-self:flex-end}
.aw-m.b{align-self:flex-start;background:#000235;color:#fff;border-color:#000235}
.aw-av{width:22px;height:22px;border-radius:50%;background:var(--grad);flex-shrink:0}
.aw-m.m1{animation:awMsg 7.5s 0.3s infinite}
.aw-m.m3{animation:awMsg 7.5s 3.2s infinite}
.aw-m.typing{animation:awType 7.5s 1.7s infinite}
.aw-m.typing i{width:6px;height:6px;border-radius:50%;background:#577297;display:inline-block;animation:awBlink 1.2s infinite}
.aw-m.typing i:nth-child(2){animation-delay:.15s}.aw-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes awMsg{0%{opacity:0;transform:translateY(8px) scale(.97)}4%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes awType{0%,18%{opacity:0;transform:translateY(8px)}22%,40%{opacity:1;transform:none}44%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes awBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ---------- bar chart panel (sales hero "Leads captured") ---------- */
.aw-panel{width:100%;max-width:360px;background:#00083c;border:1px solid #12285e;border-radius:16px;padding:18px}
.dark .aw-panel{background:#010E42}
.aw-panel-h{color:#fff;font-weight:700;font-size:14px;margin-bottom:14px}
.aw-bars{display:flex;align-items:flex-end;gap:7px;height:130px}
.aw-bars.sm{height:64px;gap:4px}
.aw-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--grad);height:0;transition:height 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*100ms)}
.aw-bars i.dim{opacity:.4}
.reveal.in .aw-bars i,.aw-panel.in .aw-bars i{height:var(--h)}
.aw-axis{display:flex;gap:7px;margin-top:7px}.aw-axis span{flex:1;text-align:center;font-size:9px;color:#597498}

/* ---------- progress track (how-it-works) ---------- */
.aw-track{position:relative;height:3px;background:var(--line2);border-radius:3px;margin:0 0 22px}
.aw-track .aw-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad);border-radius:3px;animation:awFill 6s ease-in-out infinite}
.aw-track .aw-dot{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--brand);transform:translate(-50%,-50%);animation:awDot 6s ease-in-out infinite}
@keyframes awFill{0%{width:0}45%,55%{width:100%}100%{width:0}}
@keyframes awDot{0%{left:0}45%,55%{left:100%}100%{left:0}}
.dark .aw-track{background:rgba(255,255,255,.12)}
.steps .step .num{transition:color .3s}
.steps.in .step:nth-child(1) .num{animation:awPulse 6s .0s infinite}
.steps.in .step:nth-child(2) .num{animation:awPulse 6s 1.2s infinite}
.steps.in .step:nth-child(3) .num{animation:awPulse 6s 2.4s infinite}
.steps.in .step:nth-child(4) .num{animation:awPulse 6s 3.6s infinite}
@keyframes awPulse{0%,12%{color:var(--app-brand-text,var(--brand-text,#0170C5));text-shadow:0 0 0 rgba(1,112,197,.5)}3%{text-shadow:0 0 14px rgba(1,112,197,.6)}20%,100%{color:#27def7;text-shadow:none}}

/* ---------- mini widgets inside feature cards ---------- */
.aw-top{height:128px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;margin-bottom:14px}
.dark .aw-top{background:#04164b;border-color:#12285e}
.aw-mini{width:100%}
/* real-time order bar */
.aw-orderbar .aw-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);margin-bottom:8px}
.aw-pbar{height:8px;border-radius:6px;background:#dee9f0;overflow:hidden}
.aw-pbar>span{display:block;height:100%;width:30%;background:var(--grad);border-radius:6px;animation:awProg 3.2s ease-in-out infinite}
@keyframes awProg{0%{width:12%}60%{width:88%}100%{width:12%}}
.aw-sync{margin-top:9px;font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.aw-sync::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--brand);border-top-color:transparent;animation:awSpin 1s linear infinite}
@keyframes awSpin{to{transform:rotate(360deg)}}
/* reporting chart */
.aw-chart .aw-bars i{background:var(--grad)}
.aw-top .aw-bars{height:88px}
.aw-top.in .aw-bars i{height:var(--h)}
/* escalation ticket */
.aw-ticket{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.aw-chip{font-size:12px;padding:7px 11px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,2,46,.05);opacity:0}
.aw-chip.q{align-self:flex-end;animation:awMsg 5s .2s infinite}
.aw-chip.r{background:#000235;color:#fff;border-color:#000235;animation:awMsg 5s 1.4s infinite}
.aw-tk{font-size:12px;padding:8px 12px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%);width:100%;opacity:0;animation:awSlideUp 5s 2.6s infinite;display:flex;align-items:center;gap:8px}
.aw-tk::before{content:"";width:7px;height:7px;border-radius:50%;background:#27def7;box-shadow:0 0 8px #27def7}
@keyframes awSlideUp{0%,40%{opacity:0;transform:translateY(10px)}50%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
/* models compare */
.aw-models{display:flex;gap:10px}
.aw-mchip{font-size:12px;font-weight:600;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink2)}
.aw-mchip:nth-child(1){animation:awGlow 3s 0s infinite}
.aw-mchip:nth-child(2){animation:awGlow 3s 1s infinite}
.aw-mchip:nth-child(3){animation:awGlow 3s 2s infinite}
@keyframes awGlow{0%,100%{border-color:var(--line);box-shadow:none;color:var(--ink2)}25%{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,112,197,.12);color:var(--ink)}}
/* integrations orbit */
.aw-orbit{position:relative;width:120px;height:120px}
.aw-orbit .aw-core{position:absolute;top:50%;left:50%;width:30px;height:30px;border-radius:9px;background:var(--grad);transform:translate(-50%,-50%)}
.aw-orbit b{position:absolute;width:22px;height:22px;border-radius:7px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 10px rgba(0,2,46,.06)}
.aw-orbit b:nth-child(2){top:-2px;left:50%;margin-left:-11px;animation:awBeat 2.4s 0s infinite}
.aw-orbit b:nth-child(3){top:50%;right:-2px;margin-top:-11px;animation:awBeat 2.4s .5s infinite}
.aw-orbit b:nth-child(4){bottom:-2px;left:50%;margin-left:-11px;animation:awBeat 2.4s 1s infinite}
.aw-orbit b:nth-child(5){top:50%;left:-2px;margin-top:-11px;animation:awBeat 2.4s 1.5s infinite}
@keyframes awBeat{0%,100%{transform:scale(1);box-shadow:0 3px 10px rgba(0,2,46,.06)}50%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(1,112,197,.12)}}
/* guardrail deflect */
.aw-guard{position:relative;width:160px;height:70px;display:flex;align-items:center}
.aw-guard .aw-bad{font-size:11px;padding:6px 9px;border-radius:9px;background:#fff;border:1px solid #f3c6c6;color:#dc2626;position:absolute;left:0;animation:awDeflect 3s ease-in-out infinite}
.aw-guard .aw-wall{position:absolute;right:8px;top:0;bottom:0;width:4px;border-radius:4px;background:var(--grad);box-shadow:0 0 12px rgba(1,112,197,.4)}
@keyframes awDeflect{0%{left:0;opacity:.4}45%{left:96px;opacity:1}55%{left:96px}100%{left:0;opacity:.4}}

/* ---------- shield (security) ---------- */
.aw-shield{position:relative;width:96px;height:110px;margin-top:18px}
.aw-shield svg{width:100%;height:100%}
.aw-shield .ring{position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(1,112,197,.3);animation:awRing 2.6s ease-out infinite}
@keyframes awRing{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.aw-shield .chk{stroke-dasharray:40;stroke-dashoffset:40;animation:awDraw 2.6s ease-in-out infinite}
@keyframes awDraw{0%,20%{stroke-dashoffset:40}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}

/* popular pricing tier soft pulse */
.tier.pop{animation:awPop 3.4s ease-in-out infinite}
@keyframes awPop{0%,100%{box-shadow:0 0 0 0 rgba(1,112,197,0)}50%{box-shadow:0 0 0 4px rgba(1,112,197,.10)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
 *{animation:none!important}
 .reveal{opacity:1!important;transform:none!important}
 .aw-m,.aw-chip,.aw-tk{opacity:1!important}
 .aw-bars i{height:var(--h)!important}
 .aw-pbar>span{width:70%!important}
}

/* ===================== explanatory widget library v2 ===================== */
.aw-top svg{overflow:visible}
/* build / toggle (simplicity) */
.aw-build{display:flex;align-items:center;gap:10px}
.aw-pill{font-size:12px;font-weight:600;padding:8px 12px;border-radius:9px;background:#000235;color:#fff}
.aw-toggle{width:34px;height:20px;border-radius:999px;background:#cad6e1;position:relative;animation:awTgBg 3s infinite}
.aw-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;animation:awTg 3s infinite}
@keyframes awTg{0%,30%{left:2px}45%,88%{left:16px}100%{left:2px}}
@keyframes awTgBg{0%,30%{background:#cad6e1}45%,100%{background:linear-gradient(135deg,#00A7F1,#0170C5,#0164BF)}}
/* action (automation) */
.aw-action{width:130px;display:flex;flex-direction:column;gap:7px;align-items:center}
.aw-flash{font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0164BF,#0170C5);padding:5px 10px;border-radius:8px;animation:awBeat 2.2s infinite}
.aw-line{height:7px;border-radius:5px;background:#dee9f0;width:100%;overflow:hidden;position:relative}
.aw-line::after{content:"";position:absolute;inset:0;width:30%;background:var(--grad);border-radius:5px;animation:awProg 2.6s ease-in-out infinite}
.aw-line.short::after{animation-delay:.4s}
/* integrations grid */
.aw-int{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.aw-int span{width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--line);animation:awBeat 2.8s infinite}
.aw-int span:nth-child(2){animation-delay:.3s}.aw-int span:nth-child(3){animation-delay:.6s}
.aw-int span:nth-child(5){animation-delay:.9s}.aw-int span:nth-child(7){animation-delay:1.2s}.aw-int span:nth-child(9){animation-delay:1.5s}
/* profile (personalization) */
.aw-profile{width:140px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 14px rgba(0,2,46,.05)}
.aw-profile .pa{width:30px;height:30px;border-radius:50%;background:var(--grad);flex-shrink:0;animation:awFloat 4s infinite}
.aw-profile .pl{height:7px;border-radius:5px;background:#dee9f0;margin:4px 0;overflow:hidden;position:relative}
.aw-profile .pl::after{content:"";position:absolute;inset:0;background:var(--grad);width:0;animation:awGrowW 2.6s ease-out infinite}
@keyframes awGrowW{0%{width:0}55%{width:100%}100%{width:0}}
/* bolt (instant) */
.aw-bolt{width:60px;height:78px;animation:awFloat 3.4s infinite}
.aw-bolt path{fill:url(#shg);animation:awBoltGlow 1.8s infinite}
@keyframes awBoltGlow{0%,100%{opacity:.7}50%{opacity:1}}
/* brand chat (empathetic / smart responses) */
.aw-brandchat{display:flex;flex-direction:column;gap:8px;width:130px}
.aw-brandchat .ub{align-self:flex-end;font-size:11px;background:#fff;color:var(--ink);border:1px solid var(--line);padding:6px 9px;border-radius:10px}
.aw-brandchat .bb{align-self:flex-start;font-size:11px;color:#fff;padding:6px 9px;border-radius:10px;background:#000235;animation:awBrand 4s infinite}
@keyframes awBrand{0%,100%{background:#000235}50%{background:linear-gradient(135deg,#00A7F1,#0170C5,#0164BF)}}
/* reasoning net (LLM) */
.aw-net{width:120px;height:84px}
.aw-net .ln{stroke:url(#shg);stroke-width:1.6;animation:awLn 2.6s infinite}
@keyframes awLn{0%,100%{opacity:.25}50%{opacity:1}}
.aw-net .nd{fill:url(#shg);transform-box:fill-box;transform-origin:center;animation:awNd 2.6s infinite}
@keyframes awNd{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
/* handoff (escalation) */
.aw-handoff{width:130px;height:70px}
.aw-handoff .ar{stroke:url(#shg);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;animation:awDraw 3s infinite}
.aw-handoff .nd{fill:url(#shg)}.aw-handoff .person{fill:#000235}
.dark .aw-handoff .person{fill:#fff}
/* eye (observability) */
.aw-eye{width:90px;height:60px}
.aw-eye .out{stroke:url(#shg);stroke-width:2.5;fill:none}
.aw-eye .pup{fill:url(#shg);transform-box:fill-box;transform-origin:center;animation:awScan 3s ease-in-out infinite}
@keyframes awScan{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
/* avatar (account manager) */
.aw-avatar{position:relative;width:60px;height:60px}
.aw-avatar .av{width:60px;height:60px;border-radius:50%;background:var(--grad)}
.aw-avatar .on{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#34d399;border:2px solid #fff;animation:awBeat 2s infinite}
/* ── clock: "24/7 support, monitoring and guidance" ─────────────────────────
   A static avatar with a green dot said "someone is online". The promise on this
   card is about the CLOCK — that the hour never matters — so the card shows one,
   running. The second hand steps rather than sweeps: a smooth one reads as a
   stopwatch, a stepping one reads as time passing. */
.aw-clock{position:relative;width:94px;height:94px;border-radius:50%;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,2,53,.07)}
/* hour ticks, drawn as a masked conic ring so twelve of them cost no DOM */
.aw-clock::before{content:'';position:absolute;inset:5px;border-radius:50%;
  background:repeating-conic-gradient(var(--line) 0 1.6deg,transparent 1.6deg 30deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#00022E calc(100% - 7px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#00022E calc(100% - 7px))}
.aw-clock::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,#00A7F1,#0170C5,#0164BF,#00A7F1);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#00022E calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#00022E calc(100% - 2px));
  opacity:.55;animation:awRim 7s linear infinite}
@keyframes awRim{to{transform:rotate(360deg)}}
.aw-clock b{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px;display:block}
.aw-clock .hh{width:3.4px;height:20px;margin-left:-1.7px;background:var(--ink);animation:awHand 24s linear infinite}
.aw-clock .mm{width:2.6px;height:29px;margin-left:-1.3px;background:var(--ink2);animation:awHand 4s linear infinite}
.aw-clock .ss{width:1.6px;height:32px;margin-left:-.8px;background:#007DD4;animation:awHand 2s steps(30) infinite}
@keyframes awHand{to{transform:rotate(360deg)}}
.aw-clock .pin{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--grad);bottom:auto;transform-origin:50% 50%}
.aw-clock .on{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;
  background:#34d399;border:2px solid #fff;bottom:1px;animation:awBeat 2s infinite}
.dark .aw-clock{background:#0A2054;border-color:#12285e}
.dark .aw-clock .hh{background:#ecf6fb}.dark .aw-clock .mm{background:#91a3b8}
.dark .aw-clock .on{border-color:#04164b}

/* ── ladder: "higher limits" ────────────────────────────────────────────────
   A gauge filling to 78% is a picture of a ceiling being approached, which is the
   opposite of what this card sells. A ladder climbs, and each rung stays lit
   behind the climber, so the shape of the animation is the claim. */
.aw-ladder{display:flex;flex-direction:column;align-items:center;gap:7px}
.aw-ladder .lad{position:relative;width:54px;height:72px;padding:4px 0;
  display:flex;flex-direction:column-reverse;justify-content:space-between}
.aw-ladder .lad::before,.aw-ladder .lad::after{content:'';position:absolute;top:0;bottom:0;
  width:3.5px;border-radius:3px;background:#cad6e1}
.aw-ladder .lad::before{left:0}.aw-ladder .lad::after{right:0}
.aw-ladder .lad i{display:block;height:4px;margin:0 3px;border-radius:3px;position:relative;z-index:1;
  background:linear-gradient(90deg,#00A7F1,#0170C5,#0164BF);opacity:.15;transform:scaleX(.8);
  animation:awRung 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes awRung{
  0%,6%{opacity:.15;transform:scaleX(.8)}
  18%,76%{opacity:1;transform:scaleX(1)}
  92%,100%{opacity:.15;transform:scaleX(.8)}}
.aw-ladder .climb{position:absolute;left:50%;bottom:2px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;z-index:2;background:linear-gradient(135deg,#00A7F1,#0164BF);
  box-shadow:0 0 0 4px rgba(1,112,197,.14);animation:awClimb 3.4s ease-in-out infinite}
@keyframes awClimb{
  0%,18%{transform:translateY(0)}
  30%{transform:translateY(-16px)}
  42%{transform:translateY(-32px)}
  53%{transform:translateY(-48px)}
  65%,88%{transform:translateY(-64px)}
  100%{transform:translateY(0)}}
.aw-ladder .lb{font-size:11.5px;font-weight:700;color:var(--ink2)}
.dark .aw-ladder .lad::before,.dark .aw-ladder .lad::after{background:rgba(255,255,255,.15)}
.dark .aw-ladder .lb{color:#cad6e1}
/* the global reduced-motion rule kills the animation; without these the ladder would
   rest at 15% opacity and read as broken rather than still. */
@media (prefers-reduced-motion: reduce){
  .aw-ladder .lad i{opacity:1;transform:none}
  .aw-ladder .climb{transform:translateY(-64px)}
  .aw-clock .hh{transform:rotate(310deg)}
  .aw-clock .mm{transform:rotate(60deg)}
  .aw-clock .ss{transform:rotate(190deg)}
}

/* gauge ring (SLA / limits) */
.aw-gauge{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.aw-gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
.aw-gauge .tr{stroke:#dee9f0;stroke-width:8;fill:none}
.aw-gauge .vl{stroke:url(#shg);stroke-width:8;fill:none;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;animation:awGauge 3s ease-out infinite}
@keyframes awGauge{0%{stroke-dashoffset:251}55%,100%{stroke-dashoffset:var(--off,60)}}
.aw-gauge .lb{font-size:12px;font-weight:700;color:var(--ink2)}
.dark .aw-gauge .tr{stroke:rgba(255,255,255,.15)}.dark .aw-gauge .lb{color:#cad6e1}
/* lock (security) */
.aw-lock{width:60px;height:76px}
.aw-lock .body{fill:url(#shg)}
.aw-lock .sh{stroke:url(#shg);stroke-width:6;fill:none;transform-box:fill-box;transform-origin:bottom;animation:awShackle 3s ease-in-out infinite}
@keyframes awShackle{0%,40%{transform:translateY(-5px)}55%,100%{transform:translateY(0)}}
/* checklists (roadmap / qualification) */
.aw-list{width:130px;display:flex;flex-direction:column;gap:8px}
.aw-list .li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink2)}
.aw-list .bx{width:16px;height:16px;border-radius:5px;border:2px solid var(--brand);position:relative;flex-shrink:0}
.aw-list .bx::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.aw-list .li:nth-child(1) .bx,.aw-list .li:nth-child(1) .bx::after{animation:awBoxFill 4s .2s infinite}
.aw-list .li:nth-child(2) .bx,.aw-list .li:nth-child(2) .bx::after{animation:awBoxFill 4s 1.0s infinite}
.aw-list .li:nth-child(3) .bx,.aw-list .li:nth-child(3) .bx::after{animation:awBoxFill 4s 1.8s infinite}
.aw-list .bx::after{animation-name:awStampSm!important}
@keyframes awStampSm{0%,8%{opacity:0}16%,90%{opacity:1}100%{opacity:0}}
@keyframes awBoxFill{0%,8%{background:transparent;border-color:var(--brand)}16%,90%{background:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%);border-color:transparent}100%{background:transparent;border-color:var(--brand)}}
/* funnel (lead capture) */
.aw-funnel{position:relative;width:100px;height:90px;display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:10px}
.aw-funnel .fl{height:13px;border-radius:3px;background:var(--grad)}
.aw-funnel .fl:nth-child(2){width:90px;opacity:.5}.aw-funnel .fl:nth-child(3){width:62px;opacity:.75}.aw-funnel .fl:nth-child(4){width:36px}
.aw-funnel .dot{position:absolute;top:0;left:50%;width:9px;height:9px;border-radius:50%;background:#000235;margin-left:-4px;animation:awDrop 2.4s ease-in infinite}
.dark .aw-funnel .dot{background:#fff}
@keyframes awDrop{0%{top:0;opacity:0}10%{opacity:1}72%{top:74px;opacity:1}100%{top:74px;opacity:0}}
/* branch (routing) */
.aw-branch{width:130px;height:74px}
.aw-branch path{stroke:url(#shg);stroke-width:2.5;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:awDraw 3s infinite}
.aw-branch path:nth-child(2){animation-delay:.3s}.aw-branch path:nth-child(3){animation-delay:.6s}
.aw-branch .nd{fill:url(#shg)}
/* calendar (booking) */
.aw-cal{width:110px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;box-shadow:0 4px 14px rgba(0,2,46,.05)}
.aw-cal .ch{height:6px;width:42%;background:var(--grad);border-radius:4px;margin-bottom:7px}
.aw-cal .gr{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.aw-cal .gr span{height:13px;border-radius:3px;background:#e8f1f8}
.aw-cal .gr span.bk{animation:awBook 3s infinite}
@keyframes awBook{0%,30%{background:#e8f1f8}45%,90%{background:linear-gradient(135deg,#00A7F1,#0170C5,#0164BF)}100%{background:#e8f1f8}}
/* chart up (conversion) */
.aw-chartup{width:120px;height:80px}
.aw-chartup .ln{stroke:url(#shg);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:170;stroke-dashoffset:170;animation:awDraw 3s ease-out infinite}
.aw-chartup .ar{fill:url(#shg);opacity:0;animation:awArrow 3s infinite}
@keyframes awArrow{0%,72%{opacity:0}82%,100%{opacity:1}}
/* clock (handle time) */
.aw-clock{width:68px;height:68px}
.aw-clock .face{stroke:url(#shg);stroke-width:3;fill:none}
.aw-clock .hand{stroke:#000235;stroke-width:2.5;stroke-linecap:round;transform-box:fill-box;transform-origin:bottom;animation:awSweep 2.6s linear infinite}
.dark .aw-clock .hand{stroke:#fff}
@keyframes awSweep{to{transform:rotate(360deg)}}
/* rating (experience) */
.aw-rating{position:relative;font-size:18px;letter-spacing:3px;line-height:1}
.aw-rating .base{color:#ccd8e3}
.aw-rating .fill{position:absolute;left:0;top:0;color:#f5b301;overflow:hidden;white-space:nowrap;width:0;animation:awStars 3s ease-out infinite}
@keyframes awStars{0%{width:0}60%,100%{width:100%}}
/* policy doc (on-policy) */
.aw-policy{position:relative;width:78px;height:94px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;box-shadow:0 4px 14px rgba(0,2,46,.05)}
.aw-policy i{display:block;height:6px;border-radius:4px;background:#dee9f0;margin-bottom:7px}
.aw-policy i:nth-child(2){width:80%}.aw-policy i:nth-child(3){width:60%}
.aw-policy .ck{position:absolute;right:-8px;bottom:-8px;width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;animation:awStampBig 3s infinite}
.aw-policy .ck::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);margin-top:-3px}
@keyframes awStampBig{0%,40%{transform:scale(0);opacity:0}50%,90%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}

/* ===================== v3: richer hero + more explanatory widgets ===================== */
/* hero conversation — longer, shows "Replied with AI" under each AI reply */
.aw-convo{display:flex;flex-direction:column;gap:8px;width:322px;max-width:100%;animation:awSeam 14s infinite}
@keyframes awSeam{0%,3%{opacity:0}7%,95%{opacity:1}100%{opacity:0}}
.aw-convo .aw-m{opacity:0;max-width:90%}
.aw-convo .u{align-self:flex-end}.aw-convo .b{align-self:flex-start}
.aw-convo .e1{animation:awPopIn 14s 1.0s infinite}
.aw-convo .e2{animation:awPopIn 14s 2.5s infinite}
.aw-convo .g1{animation:awPopIn 14s 3.1s infinite}
.aw-convo .e3{animation:awPopIn 14s 4.7s infinite}
.aw-convo .e4{animation:awPopIn 14s 6.1s infinite}
.aw-convo .g2{animation:awPopIn 14s 6.7s infinite}
@keyframes awPopIn{0%{opacity:0;transform:translateY(10px) scale(.97)}5%{opacity:1;transform:none}100%{opacity:1}}
.aw-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);opacity:0;font-weight:500}
.aw-tag .spark{width:11px;height:11px;border-radius:3px;background:var(--grad);animation:awBeat 1.6s infinite}
.dark .aw-tag{color:#91a3b8}
/* API (code window) */
.aw-api{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;background:#00093e;color:#c8d5e0;border-radius:9px;padding:10px 12px;width:142px;line-height:1.8}
.aw-api .req{color:#27def7}.aw-api .res{color:#6ee7b7;opacity:0;animation:awPopIn 3.2s 1.2s infinite}
.aw-api .cur{display:inline-block;width:6px;height:11px;background:#6ee7b7;vertical-align:-1px;animation:awBlink 1s infinite}
/* white-label */
.aw-wl{width:142px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,2,46,.05)}
.aw-wl .bar{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid var(--line2)}
.aw-wl .lg{width:18px;height:18px;border-radius:5px;background:var(--grad)}.aw-wl .tx{font-size:11px;font-weight:600}
.aw-wl .bd{padding:9px 10px;font-size:10px;color:var(--ink3)}
.aw-wl .pw{font-size:9px;color:#577297;text-align:center;padding:5px;border-top:1px dashed var(--line);animation:awRemove 4s infinite}
@keyframes awRemove{0%,35%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.9)}}
/* always improving (retrain loop) */
.aw-improve{width:56px;height:56px;animation:awSpin 3.6s linear infinite}
.aw-improve path{stroke:url(#shg);stroke-width:5;fill:none;stroke-linecap:round}
/* your data stays yours (vault) */
.aw-vault{position:relative;width:96px;height:64px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.aw-vault i{height:9px;border-radius:4px;background:var(--grad)}
.aw-vault i:nth-child(2){width:78%}.aw-vault i:nth-child(3){width:56%}
.aw-vault .lk{position:absolute;right:-10px;top:-12px;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,2,46,.08);animation:awBeat 2.4s infinite}
.aw-vault .lk svg{width:15px;height:17px}
/* data encryption */
.aw-encrypt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;width:130px;text-align:center}
.aw-encrypt .plain{font-size:12px;color:var(--ink);animation:awEncShow 4s infinite}
.dark .aw-encrypt .plain{color:#dee9f0}
.aw-encrypt .arrow{font-size:14px;color:var(--app-brand-text,var(--brand-text,#0170C5));margin:3px 0}
.aw-encrypt .cipher{font-size:12px;letter-spacing:1px;color:var(--app-brand-text,var(--brand-text,#0170C5));animation:awEncCipher 4s infinite}
@keyframes awEncShow{0%,30%{opacity:1}48%,100%{opacity:.22}}
@keyframes awEncCipher{0%,30%{opacity:.22;filter:blur(1.5px)}48%,100%{opacity:1;filter:none}}
/* secure integrations (secured link) */
.aw-link{width:130px;height:54px}
.aw-link .ln{stroke:url(#shg);stroke-width:2.5;fill:none}.aw-link .nd{fill:url(#shg)}
.aw-link .lock{fill:#fff;stroke:url(#shg);stroke-width:2}.dark .aw-link .lock{fill:#04164b}
.aw-link .ck{stroke:#16a34a;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:16;stroke-dashoffset:16;animation:awDraw 3s infinite}
/* CTA emblem + living blobs */
.aw-cta-emblem{width:130px;margin:0 auto 8px;display:flex;justify-content:center}
.cta-band .blob{animation:awBlob 9s ease-in-out infinite}
.cta-band .b-r{animation-delay:-4.5s}
@keyframes awBlob{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(16px,-12px) scale(1.14);opacity:1}}

/* ===== hero: cycling multi-conversation showcase ===== */
.aw-multi{position:relative;width:332px;max-width:100%;height:290px}
.aw-scene{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;justify-content:center;opacity:0;animation:awScene 42s var(--sd,0s) infinite}
.aw-scene .aw-m{opacity:0;max-width:90%;font-size:12px;padding:7px 11px}
.aw-scene .u{align-self:flex-end}.aw-scene .b{align-self:flex-start}
.aw-scene .e1{animation:awSP 42s calc(var(--sd,0s) + .3s) infinite}
.aw-scene .e2{animation:awSP 42s calc(var(--sd,0s) + 1.0s) infinite}
.aw-scene .e3{animation:awSP 42s calc(var(--sd,0s) + 1.8s) infinite}
.aw-scene .e4{animation:awSP 42s calc(var(--sd,0s) + 2.5s) infinite}
.aw-scene .e5{animation:awSP 42s calc(var(--sd,0s) + 3.3s) infinite}
.aw-scene .e6{animation:awSP 42s calc(var(--sd,0s) + 4.0s) infinite}
.aw-scene .e7{animation:awSP 42s calc(var(--sd,0s) + 4.6s) infinite}
@keyframes awSP{0%{opacity:0;transform:translateY(9px) scale(.98)}2%{opacity:1;transform:none}100%{opacity:1}}
@keyframes awScene{0%{opacity:0;transform:translateY(8px)}1.6%,15.5%{opacity:1;transform:none}17.5%,100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){.aw-scene{animation:none!important;opacity:0}.aw-scene:first-child{opacity:1}.aw-scene .aw-m,.aw-scene .aw-tag{opacity:1!important}}

/* ===================== "Discover the platform" — browser-framed auto-cycling tabs ===================== */
.pe{margin-top:26px}
.pe-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.pe-tab{font-size:13.5px;font-weight:600;color:#778daa;padding:9px 15px;border-radius:10px;white-space:nowrap}
.pe-tab.t0{animation:peTab 25s 0s infinite}.pe-tab.t1{animation:peTab 25s 5s infinite}
.pe-tab.t2{animation:peTab 25s 10s infinite}.pe-tab.t3{animation:peTab 25s 15s infinite}.pe-tab.t4{animation:peTab 25s 20s infinite}
@keyframes peTab{0%,1%{color:#778daa;background:transparent}2%,18%{color:#fff;background:rgba(255,255,255,.10)}20%,100%{color:#778daa;background:transparent}}
.pe-frame-wrap{border-radius:20px;background:linear-gradient(135deg,#00A7F1,#0170C5,#0164BF);padding:11px}
.pe-frame{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 26px 70px rgba(0,2,46,.32)}
.pe-winbar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid #e8f1f8;background:#f7fcff}
.pe-winbar .d{width:11px;height:11px;border-radius:50%}.pe-winbar .d.r{background:#ff5f57}.pe-winbar .d.y{background:#febc2e}.pe-winbar .d.g{background:#28c840}
.pe-crumb{margin-left:10px;font-size:12.5px;color:#375282;display:flex;align-items:center;gap:7px}
.pe-crumb img{width:18px;height:18px}
.pe-pro{font-size:10px;font-weight:700;color:var(--app-brand-text,var(--brand-text,#0164bf));border:1px solid #a6edfd;border-radius:999px;padding:1px 7px}
.pe-screens{position:relative;height:432px;background:#fff;color:#021247}
@media(max-width:760px){.pe-screens{height:392px}}
.pe-screen{position:absolute;inset:0;padding:18px 20px;opacity:0;overflow:hidden;--pd:0s}
.pe-screen.s0{animation:peShow 25s 0s infinite;--pd:0s}.pe-screen.s1{animation:peShow 25s 5s infinite;--pd:5s}
.pe-screen.s2{animation:peShow 25s 10s infinite;--pd:10s}.pe-screen.s3{animation:peShow 25s 15s infinite;--pd:15s}.pe-screen.s4{animation:peShow 25s 20s infinite;--pd:20s}
@keyframes peShow{0%{opacity:0;transform:translateY(10px)}2%,18%{opacity:1;transform:none}20.5%,100%{opacity:0;transform:translateY(-8px)}}
.pe-h{font-size:16px;font-weight:700;margin:0 0 2px}.pe-sub{font-size:11.5px;color:#597498;margin:0 0 14px}
.pe-2col{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;height:100%}
@media(max-width:760px){.pe-2col{grid-template-columns:1fr}.pe-hide-sm{display:none!important}}
.pe-pop{opacity:0;animation:pePop 25s calc(var(--pd, 0s) + var(--o, 0s)) infinite}
@keyframes pePop{0%{opacity:0;transform:translateY(8px)}1.6%{opacity:1;transform:none}100%{opacity:1}}
.pe-label{font-size:11px;color:#597498;margin:0 0 5px}
.pe-pill{border:1px solid #dee9f0;border-radius:9px;padding:8px 11px;font-size:12.5px;display:flex;align-items:center;gap:8px}
.pe-pill .dot{width:16px;height:16px;border-radius:5px;background:var(--grad)}
.pe-lines i{display:block;height:7px;border-radius:4px;background:#e6f0f6;margin:6px 0}
.pe-lines i:nth-child(2){width:85%}.pe-lines i:nth-child(3){width:65%}
.pe-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#15803d;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:8px;padding:5px 10px}
.pe-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a}
/* playground chat */
.pe-chat{background:#f5fbff;border:1px solid #e8f1f8;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;background-image:radial-gradient(#dee9f0 1px,transparent 1px);background-size:14px 14px}
.pe-msg{font-size:12px;padding:8px 11px;border-radius:11px;max-width:84%;line-height:1.45}
.pe-msg.b{align-self:flex-start;background:#fff;border:1px solid #dee9f0}
.pe-msg.u{align-self:flex-end;background:#000235;color:#fff}
.pe-msg.b.head{background:#000235;color:#fff;border:none;font-weight:600;max-width:100%}
.pe-typ{display:inline-flex;gap:4px}.pe-typ i{width:5px;height:5px;border-radius:50%;background:#577297;animation:awBlink 1.2s infinite}.pe-typ i:nth-child(2){animation-delay:.15s}.pe-typ i:nth-child(3){animation-delay:.3s}
.pe-compose{margin-top:auto;display:flex;align-items:center;gap:8px;border:1px solid #dee9f0;border-radius:10px;padding:8px 11px;font-size:12px;color:#577297;background:#fff}
.pe-compose .send{margin-left:auto;width:22px;height:22px;border-radius:6px;background:var(--grad)}
/* analytics */
.pe-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:760px){.pe-kpis{grid-template-columns:1fr 1fr}}
.pe-kpi{border:1px solid #e8f1f8;border-radius:11px;padding:11px}
.pe-kpi .l{font-size:10.5px;color:#597498}.pe-kpi .n{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.pe-chartcard{border:1px solid #e8f1f8;border-radius:11px;padding:14px;flex:1}
.pe-chartcard .t{font-size:12.5px;font-weight:600;margin-bottom:8px}
.pe-svg{width:100%;height:150px}
.pe-svg .area{fill:url(#peGrad)}
.pe-svg .ln{stroke:#008DE1;stroke-width:2.5;fill:none;stroke-dasharray:900;stroke-dashoffset:900;animation:peDraw 25s var(--pd) infinite}
@keyframes peDraw{0%{stroke-dashoffset:900}12%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.pe-svg .area{opacity:0;animation:peArea 25s var(--pd) infinite}
@keyframes peArea{0%,6%{opacity:0}16%{opacity:1}100%{opacity:1}}
/* activity */
.pe-rows{display:flex;flex-direction:column;gap:2px;position:relative}
.pe-row{padding:9px 10px;border-radius:8px;font-size:11.5px}
.pe-row .t{font-weight:600}.pe-row .s{color:#577297;font-size:10.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-row .tm{float:right;color:#577297;font-size:10px}
.pe-hl{position:absolute;left:0;right:0;height:44px;border:1.5px solid var(--brand);border-radius:8px;background:rgba(1,112,197,.05);top:0;animation:peHl 25s var(--pd) infinite}
@keyframes peHl{0%,3%{top:0;opacity:0}6%{opacity:1}9%{top:46px}13%{top:92px}17%{top:46px;opacity:1}19%,100%{opacity:0}}
.pe-convo{border:1px solid #e8f1f8;border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:9px}
/* sources */
.pe-drop{border:1.5px dashed #d1dee7;border-radius:11px;padding:18px;text-align:center;font-size:11.5px;color:#577297}
.pe-drop .up{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.pe-file{display:flex;align-items:center;gap:10px;border:1px solid #e8f1f8;border-radius:9px;padding:9px 11px;margin-top:9px;font-size:11.5px}
.pe-file .bar{flex:1;height:5px;border-radius:4px;background:#e6f0f6;overflow:hidden}
.pe-file .bar>span{display:block;height:100%;width:8%;background:var(--grad);animation:peUp 25s var(--pd) infinite}
.pe-file.f2 .bar>span{animation-delay:calc(var(--pd) + .6s)}
@keyframes peUp{0%{width:8%}9%{width:62%}15%{width:96%}100%{width:96%}}
.pe-sum{border:1px solid #e8f1f8;border-radius:11px;padding:6px 12px}
.pe-sum .r{display:flex;justify-content:space-between;font-size:11.5px;padding:8px 0;border-bottom:1px solid #ecf6fb}
.pe-sum .r:last-child{border-bottom:none}.pe-sum .r b{color:#375282;font-weight:500}.pe-sum .r .c{color:#577297}
.pe-retrain{margin-top:10px;font-size:10.5px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:6px}
.pe-retrain::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid #b45309;border-top-color:transparent;animation:awSpin 1.4s linear infinite}
/* actions */
.pe-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:760px){.pe-acts{grid-template-columns:1fr 1fr}}
.pe-act{border:1px solid #e8f1f8;border-radius:11px;padding:13px}
.pe-act .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.pe-act .ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%)}
.pe-act .ti{font-size:12.5px;font-weight:600}.pe-act .st{font-size:10.5px;color:#577297;margin-top:2px}
.pe-tg{width:30px;height:18px;border-radius:999px;background:#cad6e1;position:relative;flex-shrink:0;animation:peTrack 25s calc(var(--pd,0s) + var(--td,0s)) infinite}
.pe-tg i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;animation:peKnob 25s calc(var(--pd,0s) + var(--td,0s)) infinite}
@keyframes peKnob{0%,4%{left:2px}7%,18%{left:14px}20%,100%{left:2px}}
@keyframes peTrack{0%,4%{background:#cad6e1}7%,18%{background:#34d399}20%,100%{background:#cad6e1}}
@media (prefers-reduced-motion: reduce){.pe-tab,.pe-screen{animation:none!important}.pe-screen{opacity:0}.pe-screen.s0{opacity:1}.pe-tab.t0{color:#fff;background:rgba(255,255,255,.10)}.pe-pop,.pe-svg .ln,.pe-svg .area{opacity:1!important;stroke-dashoffset:0!important;animation:none!important}}

/* ===================== feature-card flow widgets (image 1) + integrations marquee (image 2) ===================== */
.aw-top:has(.fw){height:auto;min-height:170px;display:block;padding:14px 14px 6px;overflow:visible}
.fw{display:flex;flex-direction:column;gap:7px;width:100%;height:100%;justify-content:center;font-size:10.5px;color:#021247}
.fw .f1,.fw .f2,.fw .f2b,.fw .f3,.fw .f4{opacity:0}
.fw .f1{animation:fwPop 5s .2s infinite}
.fw .f2,.fw .f2b{animation:fwPop 5s 1.1s infinite}
.fw .f3{animation:fwPop 5s 1.9s infinite}
.fw .f4{animation:fwPop 5s 2.7s infinite}
@keyframes fwPop{0%{opacity:0;transform:translateY(7px)}5%{opacity:1;transform:none}84%{opacity:1}93%{opacity:0}100%{opacity:0}}
.fw-bub{padding:7px 10px;border-radius:11px;max-width:92%;line-height:1.35}
.fw-bub.u{align-self:flex-end;background:#000235;color:#fff}
.fw-bub.b{align-self:flex-start;background:#fff;border:1px solid #dee9f0;display:inline-flex;align-items:center;gap:6px}
.fw-spark{width:14px;height:14px;border-radius:4px;background:var(--grad);flex-shrink:0}
/* sync with real-time data */
.fw-line2{display:flex;align-items:center;gap:8px}
.fw-card{flex:1;border:1px solid #dee9f0;border-radius:10px;padding:8px 10px;background:#fff}
.fw-cardtop{display:flex;justify-content:space-between;font-size:10px}.fw-cardtop b{font-weight:700}.fw-cardtop span{color:#577297}
.fw-prog{height:6px;border-radius:4px;background:#e6f0f6;margin-top:6px;overflow:hidden}
.fw-prog i{display:block;height:100%;width:20%;background:var(--grad);animation:fwFill 2.4s infinite}
@keyframes fwFill{0%{width:16%}55%{width:84%}100%{width:16%}}
.fw-api{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#0170C5 0%,#0164BF 55%,#052C71 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
/* take actions & automate */
.fw-srcs{display:flex;gap:7px}
.fw-src{flex:1;border:1px solid #dee9f0;border-radius:9px;padding:7px 6px;background:#fff;font-weight:600;text-align:center;font-size:9px}
.fw-aiact{align-self:center;background:linear-gradient(135deg,#0164BF,#0170C5);color:#fff;font-weight:700;font-size:9.5px;padding:5px 13px;border-radius:999px;animation:awBeat 2.2s infinite}
.fw-result{border:1px solid #dee9f0;border-radius:10px;padding:8px 10px;background:#fff;display:flex;justify-content:space-between;align-items:center}
.fw-result b{font-weight:700}.fw-result s{color:#577297}.fw-result em{font-weight:700;font-style:normal}
/* compare ai models */
.fw-models{display:flex;align-items:center;gap:6px}
.fw-model{flex:1;border:1px solid #dee9f0;border-radius:10px;padding:8px;background:#fff;font-weight:700;font-size:9.5px}
.fw-model i{display:block;height:5px;border-radius:3px;background:#e6f0f6;margin-top:5px}.fw-model i:nth-child(3){width:70%}
.fw-merge{width:26px;height:26px;border-radius:50%;border:1px solid #dee9f0;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fw-merge svg{width:14px;height:14px}.fw-merge path{stroke:var(--brand);stroke-width:2;fill:none;stroke-linecap:round}
/* smart escalation */
.fw-divider{text-align:center;font-size:9px;color:#577297}
.fw-ticket{border:1px solid #dee9f0;border-radius:10px;padding:8px 10px;background:#fff;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}
.fw-ticket::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.fw-ticket .ti{font-weight:700}.fw-ticket .tg{font-size:8px;color:var(--app-brand-text,var(--brand-text,#0170C5));border:1px solid #E0EAF2;border-radius:5px;padding:0 5px;margin-left:4px}.fw-ticket .tm{color:#577297;font-size:9px}
/* advanced reporting */
.fw-report{gap:8px}
.fw-chart{position:relative;border:1px solid #dee9f0;border-radius:10px;padding:8px;background:#fff;height:82px;overflow:hidden}
.fw-topics{font-size:9.5px;font-weight:700;position:relative;z-index:2}
.fw-rsvg{position:absolute;left:0;right:0;bottom:0;width:100%;height:58px}
.fw-rsvg path{fill:none}
.fw-rsvg .rarea{fill:url(#peGrad);stroke:none}
.fw-rsvg .c1{stroke:#d2dee8;stroke-width:2;vector-effect:non-scaling-stroke}
.fw-rsvg .c2{stroke:#0170C5;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:fwDraw 3.6s ease-in-out infinite}
@keyframes fwDraw{0%{stroke-dashoffset:340}45%{stroke-dashoffset:0}92%{stroke-dashoffset:0}100%{stroke-dashoffset:340}}
.fw-pill{position:absolute;top:8px;right:8px;z-index:2;font-size:8px;font-weight:600;background:#fff;border:1px solid #dee9f0;border-radius:6px;padding:2px 6px;display:flex;align-items:center;gap:4px}
.fw-pill::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--grad)}
.fw-stats{display:flex;gap:8px;font-size:9.5px}
.fw-stats span{flex:1;background:#f2f8fc;border-radius:8px;padding:5px 8px;font-weight:600}
.fw-stats .pos{color:#15803d}.fw-stats .neg{color:#dc2626}
/* works with your tools — marquee */
.fw-marqwrap{justify-content:center;gap:8px;overflow:hidden}
.fw-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#00022E 12%,#00022E 88%,transparent);mask-image:linear-gradient(90deg,transparent,#00022E 12%,#00022E 88%,transparent)}
.fw-marqrow{display:flex;gap:8px;width:max-content;animation:fwMarq 16s linear infinite}
.fw-marqrow.r2{animation-direction:reverse;animation-duration:19s}
@keyframes fwMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #dee9f0;border-radius:999px;padding:6px 11px;background:#fff;font-size:10px;font-weight:600;white-space:nowrap}
.fw-chip .cd{width:13px;height:13px;border-radius:4px;flex-shrink:0}
@media (prefers-reduced-motion: reduce){.fw .f1,.fw .f2,.fw .f2b,.fw .f3,.fw .f4{opacity:1!important;animation:none!important}.fw-marqrow{animation:none!important}.fw-rsvg .c2{stroke-dashoffset:0!important;animation:none!important}}

/* ===================== full-width Compare + Works sections ===================== */
.splitv{align-items:center}
.cmpw{position:relative;max-width:500px}
.cmpw-q{background:#000235;color:#fff;font-size:13px;padding:10px 14px;border-radius:13px 13px 13px 4px;display:inline-block;max-width:92%;line-height:1.4;opacity:0;animation:fwPop 6s .3s infinite}
.cmpw-models{display:flex;gap:12px;margin-top:30px;position:relative}
.cmpw-models::before{content:"";position:absolute;top:-22px;left:16%;right:16%;height:22px;border-top:2px dashed var(--line);border-left:2px dashed var(--line);border-right:2px dashed var(--line);border-radius:10px 10px 0 0;opacity:.8}
.cmpw-card{flex:1;border:1px solid var(--line);border-radius:13px;padding:13px;background:#fff;font-weight:700;font-size:13px;box-shadow:0 8px 22px rgba(0,2,46,.06);opacity:0}
.cmpw-card.m1{animation:fwPop 6s 1.1s infinite}.cmpw-card.m2{animation:fwPop 6s 1.4s infinite}.cmpw-card.m3{animation:fwPop 6s 1.7s infinite}
.cmpw-card i{display:block;height:6px;border-radius:4px;background:#e6f0f6;margin-top:8px}.cmpw-card i:nth-child(3){width:82%}.cmpw-card i:nth-child(4){width:58%}
.cmpw-best{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0164BF;background:#fff;border:1px solid #E0EAF2;border-radius:999px;padding:8px 15px;box-shadow:0 6px 18px rgba(1,112,197,.12);opacity:0;animation:fwPop 6s 2.5s infinite}
.cmpw-best svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round}
.toolsw{display:flex;flex-direction:column;gap:13px}
.toolsw .fw-chip{font-size:13px;padding:9px 15px}.toolsw .fw-chip .cd{width:15px;height:15px}
@media(max-width:820px){.cmpw{max-width:none}}

/* ===================== CS hero 3-exchange chat + problem-section illustration ===================== */
.aw-convo{display:flex;flex-direction:column;gap:7px;justify-content:center;min-height:272px;padding:4px}
.aw-convo .aw-m{opacity:0;max-width:88%;font-size:12.5px}
.aw-convo .u{align-self:flex-end}.aw-convo .b{align-self:flex-start}
.aw-convo .c1{animation:awConvo 13s .4s infinite}
.aw-convo .c2{animation:awConvo 13s 1.4s infinite}
.aw-convo .c3{animation:awConvo 13s 2.6s infinite}
.aw-convo .c4{animation:awConvo 13s 3.6s infinite}
.aw-convo .c5{animation:awConvo 13s 4.8s infinite}
.aw-convo .c6{animation:awConvo 13s 5.8s infinite}
@keyframes awConvo{0%{opacity:0;transform:translateY(8px)}3%{opacity:1;transform:none}91%{opacity:1}96%{opacity:0}100%{opacity:0}}
.probw{margin-top:24px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px 18px;max-width:470px;box-shadow:0 12px 34px rgba(3,28,97,.06)}
.probw-top{font-size:12.5px;font-weight:700;color:#0e2359;margin-bottom:4px}
.probw-meter{display:flex;align-items:center;gap:12px;margin:11px 0 13px}
.probw-track{flex:1;position:relative;height:12px;border-radius:7px;background:#e8f1f8;overflow:hidden}
.probw-track .fill{position:absolute;left:0;top:0;bottom:0;width:8%;border-radius:7px;background:linear-gradient(90deg,#00A7F1,#0170C5);animation:probFill 4.2s ease-out infinite}
.probw-track .fill.sales{background:linear-gradient(90deg,#0170C5,#0164BF)}
@keyframes probFill{0%{width:8%}40%{width:80%}94%{width:80%}100%{width:8%}}
.probw-pct{font-size:12.5px;font-weight:800;color:var(--app-brand-text,var(--brand-text,#0170C5));white-space:nowrap}
.probw-chips{display:flex;flex-wrap:wrap;gap:7px}
.probw-chips .pk{font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:#f5fbff;color:#243d74;opacity:0;animation:fwPop 4.2s infinite}
.probw-chips .pk:nth-child(1){animation-delay:.3s}.probw-chips .pk:nth-child(2){animation-delay:.7s}.probw-chips .pk:nth-child(3){animation-delay:1.1s}.probw-chips .pk:nth-child(4){animation-delay:1.5s}
.probw-chips .ok{color:#15803d;border-color:#bbf7d0;background:#f0fdf4}
.probw-chips .esc{color:#b45309;border-color:#fde68a;background:#fffbeb}
@media(prefers-reduced-motion:reduce){.aw-convo .aw-m{opacity:1!important;animation:none!important}.probw-track .fill{width:80%!important;animation:none!important}.probw-chips .pk{opacity:1!important;animation:none!important}}

/* ===================== animated micro-icons for problem items & how-it-works steps ===================== */
.pi{width:40px;height:40px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(1,112,197,.22)}
.pi svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pi svg *{transform-box:fill-box}
.plist .pitem{display:flex;gap:13px;align-items:flex-start;border-left:none;padding-left:0}
.pi-body{flex:1;min-width:0}
.step .pi{margin-bottom:12px}
@keyframes piSpin{to{transform:rotate(360deg)}}
.pi-clock .h{transform-box:view-box;transform-origin:12px 12px;animation:piSpin 3s linear infinite}
.pi-spin svg{transform-origin:center;animation:piSpin 2.2s linear infinite}
.pi-rise rect{fill:#fff;stroke:none;transform-origin:center bottom}
.pi-rise .b1{animation:piRise 1.5s ease-in-out infinite}.pi-rise .b2{animation:piRise 1.5s ease-in-out .18s infinite}.pi-rise .b3{animation:piRise 1.5s ease-in-out .36s infinite}
@keyframes piRise{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.pi-drip .d{animation:piDrip 1.5s ease-in infinite}
@keyframes piDrip{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(7px);opacity:0}}
.pi-drop .ar{animation:piBobD 1.6s ease-in-out infinite}
@keyframes piBobD{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(2.5px)}}
.pi-diverge svg{transform-origin:center;animation:piWobble 2.2s ease-in-out infinite}
@keyframes piWobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.pi-funnel .d{animation:piFunnel 1.9s ease-in infinite}
@keyframes piFunnel{0%{transform:translateY(-4px);opacity:0}35%{opacity:1}100%{transform:translateY(7px);opacity:0}}
.pi-pulse .r{transform-origin:center;animation:piPulse 1.8s ease-out infinite}
@keyframes piPulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}
.pi-slide .k1{animation:piSlideA 2.4s ease-in-out infinite}.pi-slide .k2{animation:piSlideB 2.4s ease-in-out infinite}
@keyframes piSlideA{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
@keyframes piSlideB{0%,100%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
.pi-up .ar{animation:piUpB 1.6s ease-in-out infinite}
@keyframes piUpB{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2.5px)}}
.pi-check .ck{stroke-dasharray:22;stroke-dashoffset:22;animation:piDraw2 2.3s ease-in-out infinite}
.pi-chartup .ln{stroke-dasharray:24;stroke-dashoffset:24;animation:piDraw2 2.5s ease-in-out infinite}
@keyframes piDraw2{0%{stroke-dashoffset:var(--dl,22)}40%{stroke-dashoffset:0}85%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--dl,22)}}
.pi-chartup .ln{--dl:24}
.pi-target .dot{transform-origin:center;animation:piDot 1.6s ease-out infinite}
@keyframes piDot{0%,100%{transform:scale(.7)}50%{transform:scale(1.3)}}
@media (prefers-reduced-motion: reduce){.pi *{animation:none!important}.pi-check .ck,.pi-chartup .ln{stroke-dashoffset:0!important}}

/* i18n: keep the animated chat demo compact & contained for verbose languages */
.aw-multi{overflow:hidden;border-radius:16px}
.aw-scene{gap:5px}
.aw-scene .aw-m{font-size:11.5px;padding:6px 10px;max-width:94%;line-height:1.35;overflow-wrap:break-word}
.aw-convo .aw-m{overflow-wrap:break-word}
/* i18n: tighten the scene cross-fade so verbose-language scenes don't overlap */
@keyframes awScene{0%{opacity:0;transform:translateY(8px)}1.6%,15.5%{opacity:1;transform:none}16.6%,100%{opacity:0;transform:translateY(-6px)}}

/* --- New feature-card visuals: Voice, Synthia (radar), Translation --- */
.aw-voice{display:flex;align-items:center;gap:5px;height:70px}
.aw-voice i{width:7px;border-radius:5px;background:var(--grad);height:18px;animation:awVoice 1.1s ease-in-out infinite}
.aw-voice i:nth-child(1){animation-delay:0s}.aw-voice i:nth-child(2){animation-delay:.1s}.aw-voice i:nth-child(3){animation-delay:.22s}.aw-voice i:nth-child(4){animation-delay:.34s}.aw-voice i:nth-child(5){animation-delay:.24s}.aw-voice i:nth-child(6){animation-delay:.14s}.aw-voice i:nth-child(7){animation-delay:.04s}
@keyframes awVoice{0%,100%{height:16px;opacity:.55}50%{height:60px;opacity:1}}
.aw-radar{position:relative;width:108px;height:108px}
.aw-radar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.aw-radar .ring.r2{inset:20px}.aw-radar .ring.r3{inset:40px}
.aw-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(1,112,197,.32),transparent 70deg);animation:awSpin 2.8s linear infinite}
.aw-radar b{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:7px;background:var(--grad);transform:translate(-50%,-50%);animation:awBeat 2s infinite}
.aw-radar .blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--grad);animation:awBlip 2.8s infinite}
.aw-radar .blip.b1{top:20%;left:66%}.aw-radar .blip.b2{top:64%;left:30%;animation-delay:1.2s}
@keyframes awSpin{to{transform:rotate(360deg)}}
@keyframes awBlip{0%,40%,100%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1)}}
.aw-trans{position:relative;width:170px;height:46px}
.aw-trans span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:awTrans 6s infinite}
.aw-trans span:nth-child(1){animation-delay:0s}.aw-trans span:nth-child(2){animation-delay:1.2s}.aw-trans span:nth-child(3){animation-delay:2.4s}.aw-trans span:nth-child(4){animation-delay:3.6s}.aw-trans span:nth-child(5){animation-delay:4.8s}
@keyframes awTrans{0%,20%,100%{opacity:0;transform:translateY(7px)}4%,16%{opacity:1;transform:none}}
.sales-bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding:10px 0}
.sales-bars i{flex:1;background:linear-gradient(180deg,#0170C5,#00A7F1);border-radius:6px 6px 0 0;transform-origin:bottom;animation:awGrow 3s ease-in-out infinite}
@keyframes awGrow{0%{transform:scaleY(.12);opacity:.7}45%,60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.12);opacity:.7}}


/* =====================================================================
   Site polish layer — motion that responds to the visitor.
   The component animations above play on their own; this adds the bits
   that were missing: hover feedback, depth behind the hero, reading
   progress, and stagger. Everything here is CSS-only so it cannot break
   the runtime translator, which matches whole text nodes.
   ===================================================================== */

/* ---------- 1. hover feedback (there was none) ---------- */
.card, .feature-card, .tcard, .stat-card, .post, .news-card, .tier, .addon, .mitem, .step {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease;
}
.card:hover, .feature-card:hover, .tcard:hover, .stat-card:hover, .post:hover, .news-card:hover, .addon:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,2,53,.10);
  border-color: #d2dee8;
}
.dark .card:hover, .dark .tcard:hover, .dark .stat-card:hover {
  box-shadow: 0 18px 44px rgba(0,2,46,.45);
  border-color: rgba(255,255,255,.18);
}
/* pricing tiers lift a little further — they are the click target that matters */
.tier:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(1,112,197,.16); border-color: rgba(1,112,197,.35); }
.mitem:hover { transform: translateX(3px); }

/* ---------- 2. buttons: lift + a light sweep on the primary CTA ---------- */
.btn, .btn-dark, .btn-light, .btn-ghost, .btn-lg {
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease;
  position: relative; overflow: hidden;
}
.btn:hover, .btn-dark:hover, .btn-light:hover, .btn-lg:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,2,53,.18); }
.btn:active, .btn-dark:active, .btn-light:active, .btn-lg:active { transform: translateY(0); }
.btn-dark::after, .btn-lg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%);
}
.btn-dark:hover::after, .btn-lg:hover::after { animation: awSweep .75s ease; }
@keyframes awSweep { to { transform: translateX(120%); } }

/* ---------- 3. depth behind the hero ---------- */
/* Animating background-position, not transform/inset: a pseudo-element that
   grows outside its parent adds real document overflow (it added ~4,800px to
   the home page height the first time round). This version cannot move layout. */
.hero { position: relative; z-index: 0; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 20% 25%, rgba(0,167,241,.15), transparent 70%),
    radial-gradient(38% 46% at 80% 18%, rgba(1,100,191,.12), transparent 70%),
    radial-gradient(46% 56% at 55% 80%, rgba(1,112,197,.14), transparent 72%);
  background-repeat: no-repeat;
  background-size: 160% 160%, 150% 150%, 170% 170%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  animation: awAurora 24s ease-in-out infinite alternate;
}
@keyframes awAurora {
  to { background-position: 18% 12%, 82% 16%, 42% 82%; }
}
/* the same idea on dark bands, brighter so it reads on black */
section.dark { position: relative; }
section.dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(34% 44% at 14% 12%, rgba(1,112,197,.26), transparent 70%),
    radial-gradient(30% 40% at 86% 88%, rgba(1,100,191,.18), transparent 70%);
  background-repeat: no-repeat;
  background-size: 150% 150%, 150% 150%;
  background-position: 0% 0%, 100% 100%;
  animation: awAurora 28s ease-in-out infinite alternate-reverse;
}
section.dark > * { position: relative; z-index: 1; }

/* Pages without a .hero or a dark band (pricing, blog, changelog) opened on flat
   white. Give the first section the same wash so the whole site shares one
   atmosphere rather than only the pages that happen to use a hero. */
section.sec-sm:first-of-type, section.sec:first-of-type { position: relative; }
section.sec-sm:first-of-type::before, section.sec:first-of-type::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(36% 60% at 15% 0%, rgba(0,167,241,.10), transparent 70%),
    radial-gradient(34% 56% at 85% 6%, rgba(1,100,191,.08), transparent 70%);
  background-repeat: no-repeat;
  background-size: 150% 150%, 150% 150%;
  background-position: 0% 0%, 100% 0%;
  animation: awAurora 26s ease-in-out infinite alternate;
}
section.sec-sm:first-of-type > *, section.sec:first-of-type > * { position: relative; z-index: 1; }

/* ---------- 4. reading progress ---------- */
#awProgress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 999; pointer-events: none;
  background: linear-gradient(90deg,#00A7F1,#0170C5,#0164BF);
  box-shadow: 0 0 12px rgba(1,112,197,.55);
  transition: width .12s linear;
}

/* ---------- 5. stagger inside a group of revealed items ---------- */
.reveal[style*="--d"] { transition-delay: calc(var(--d,0) * 70ms); }

/* ---------- 6. eyebrows breathe, section titles catch light ---------- */
.eyebrow::before { animation: awBeacon 2.6s ease-in-out infinite; }
@keyframes awBeacon { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---------- 7. images and mockups settle in rather than pop ---------- */
.card img, .feature-card img { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.card:hover img, .feature-card:hover img { transform: scale(1.02); }

/* ---------- 8. keyboard users get the same affordance ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid #0170C5; outline-offset: 3px; border-radius: 8px;
}

/* Motion is decoration. If the visitor asked for less, give them none of it. */
@media (prefers-reduced-motion: reduce) {
  .hero::before, section.dark::before,
  section.sec-sm:first-of-type::before, section.sec:first-of-type::before { animation: none; }
  .card, .feature-card, .tcard, .stat-card, .post, .news-card, .tier, .addon, .mitem, .step,
  .btn, .btn-dark, .btn-light, .btn-ghost, .btn-lg { transition: none; }
  .card:hover, .feature-card:hover, .tcard:hover, .stat-card:hover, .post:hover,
  .news-card:hover, .addon:hover, .tier:hover, .btn:hover, .btn-dark:hover { transform: none; }
  .btn-dark:hover::after, .btn-lg:hover::after { animation: none; }
  .eyebrow::before { animation: none; }
  #awProgress { display: none; }
}