/*
 * eCommerce Autopilot - animated feature visuals (markup: resources/views/landing/feature-anim.blade.php).
 * Everything is sized in em off the card width, so it scales on every screen.
 * Each visual's resting style is its finished state: with reduced motion the
 * animations are off and the visual still reads correctly.
 * Animations run only while the card is on screen (.is-live, set by landing-motion.js).
 */

.photo-box.has-anim {
    container-type: inline-size;
    background: #fff;
}

.fa {
    --ink: #0e1726;
    --muted: #6b7686;
    --line: #e6eaf0;
    --soft: #f4f6f9;
    --green: #2fc28a;
    --green-d: #13875e;
    --green-s: #e6f7ef;
    --red: #e5484d;
    --red-s: #fdecec;
    --amber: #e8a317;
    --amber-s: #fdf4e1;
    --navy: #0c2034;
    --d: 6s;
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    font-family: "Hanken Grotesk", "Anek Bangla", system-ui, sans-serif;
    font-size: 5.2cqw;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--ink);
    background: #fff;
    padding: 1.1em;
    user-select: none;
}

.fa *,
.fa *::before,
.fa *::after {
    box-sizing: border-box;
}

.photo-box:not(.is-live) .fa *,
.photo-box:not(.is-live) .fa *::before,
.photo-box:not(.is-live) .fa *::after {
    animation-play-state: paused !important;
}

/* ---------- shared bits ---------- */
.fa-top {
    display: flex;
    align-items: center;
    gap: .3em;
    margin: -.3em -.2em .8em;
}

.fa-top i {
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: var(--line);
}

.fa-top span {
    margin-left: .5em;
    flex: 1;
    font-size: .62em;
    color: var(--muted);
    background: var(--soft);
    border-radius: 99px;
    padding: .25em .9em;
}

.fa-sk {
    height: .45em;
    border-radius: 99px;
    background: #e9edf2;
    margin: .35em 0;
}

.fa span.tk { display: inline !important; font-family: system-ui, "Segoe UI", sans-serif !important; font-size: 1em !important; font-weight: inherit !important; color: inherit !important; background: none !important; padding: 0 !important; margin: 0 !important; position: static !important; width: auto !important; }

.fa-sk.w40 { width: 40%; }
.fa-sk.w45 { width: 45%; }
.fa-sk.w60 { width: 60%; }
.fa-sk.w70 { width: 70%; }
.fa-sk.w80 { width: 80%; }

.fa-tick {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: var(--green);
    position: relative;
    vertical-align: -.2em;
    margin-right: .4em;
    flex: none;
}

.fa-tick::after {
    content: "";
    position: absolute;
    left: .36em;
    top: .2em;
    width: .3em;
    height: .55em;
    border: solid #fff;
    border-width: 0 .14em .14em 0;
    transform: rotate(45deg);
}

.fa-cursor {
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    z-index: 5;
    background: var(--ink);
    clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 96%, 54% 90%, 38% 55%, 70% 55%);
    filter: drop-shadow(0 .1em .15em rgba(0, 0, 0, .25));
}

/* ---------- 1. Speed ---------- */
.fa-speed .sp-head { margin-bottom: .9em; }
.fa-speed .sp-big { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 2.6em; letter-spacing: -.04em; color: var(--green-d); line-height: 1; }
.fa-speed .sp-cap { display: block; color: var(--muted); font-size: .8em; margin-top: .2em; }
.fa-speed .sp-row { display: grid; grid-template-columns: 1fr auto; gap: .3em .6em; margin-top: .8em; }
.fa-speed .sp-name { font-size: .72em; font-weight: 600; }
.fa-speed .sp-t { font-size: .72em; font-weight: 700; grid-row: 1; grid-column: 2; }
.fa-speed .sp-track { grid-column: 1 / -1; height: .7em; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fa-speed .sp-track b { display: block; height: 100%; width: 100%; border-radius: inherit; }
.fa-speed .sp-us .sp-track b { background: var(--green); animation: sp-us var(--d) cubic-bezier(.3, .7, .2, 1) infinite; }
.fa-speed .sp-them .sp-track b { background: #c9d1dc; animation: sp-them var(--d) linear infinite; }
.fa-speed .sp-us .sp-t { color: var(--green-d); animation: sp-t-us var(--d) infinite; }
.fa-speed .sp-them .sp-t { color: var(--muted); animation: sp-t-them var(--d) infinite; }
@keyframes sp-us { 0% { width: 0; } 18%, 100% { width: 100%; } }
@keyframes sp-them { 0% { width: 0; } 72%, 100% { width: 100%; } }
@keyframes sp-t-us { 0%, 17% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes sp-t-them { 0%, 71% { opacity: 0; } 76%, 100% { opacity: 1; } }

/* ---------- 2. Storefront ---------- */
.fa-store .st-nav { display: flex; align-items: center; gap: .5em; margin-bottom: .7em; }
.fa-store .st-logo { width: 2.4em; height: .7em; border-radius: 99px; background: var(--navy); margin-right: auto; }
.fa-store .st-nav i { width: 1.6em; height: .4em; border-radius: 99px; background: var(--line); }
.fa-store .st-cart { position: relative; width: 1.2em; height: 1.2em; border-radius: .3em; border: .12em solid var(--ink); }
.fa-store .st-cart em { position: absolute; top: -.7em; right: -.7em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: .62em; font-weight: 700; display: grid; place-items: center; animation: st-bump var(--d) infinite; }
.fa-store .st-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: .6em; align-items: center; background: var(--green-s); border-radius: .6em; padding: .7em; margin-bottom: .6em; animation: st-in var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-store .st-hero .fa-sk { background: #c7ead8; }
.fa-store .st-btn { display: inline-block; margin-top: .3em; font-size: .6em; font-weight: 700; color: #fff; background: var(--green-d); padding: .35em .8em; border-radius: 99px; }
.fa-store .st-pic { height: 3.2em; border-radius: .5em; background: linear-gradient(135deg, #9fe3c3, #2fc28a); }
.fa-store .st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.fa-store .st-p { border: 1px solid var(--line); border-radius: .5em; padding: .35em; animation: st-in var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-store .st-p:nth-child(2) { animation-delay: .12s; }
.fa-store .st-p:nth-child(3) { animation-delay: .24s; }
.fa-store .st-p:nth-child(4) { animation-delay: .36s; }
.fa-store .st-p i { display: block; height: 2em; border-radius: .35em; background: var(--soft); }
.fa-store .st-p b { display: block; height: .35em; width: 80%; margin-top: .35em; border-radius: 99px; background: var(--line); }
.fa-store .st-p s { display: block; height: .35em; width: 45%; margin-top: .25em; border-radius: 99px; background: var(--green); }
@keyframes st-in { 0% { opacity: 0; transform: translateY(.8em) scale(.96); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st-bump { 0%, 55% { transform: scale(0); } 62% { transform: scale(1.3); } 68%, 100% { transform: scale(1); } }

/* ---------- 3. No-code builder ---------- */
.fa-build { display: grid; grid-template-columns: 34% 1fr; gap: .7em; }
.fa-build .bd-side { background: var(--soft); border-radius: .6em; padding: .5em; }
.fa-build .bd-blk { font-size: .62em; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: .5em; padding: .55em .6em; margin-bottom: .45em; }
.fa-build .bd-src { border-style: dashed; color: var(--muted); }
.fa-build .bd-canvas { border: 1px solid var(--line); border-radius: .6em; padding: .6em; }
.fa-build .bd-c { border-radius: .4em; background: var(--soft); margin-bottom: .5em; }
.fa-build .bd-h { height: .9em; width: 70%; background: var(--navy); opacity: .85; }
.fa-build .bd-img { height: 3.3em; background: linear-gradient(135deg, #e3e8ef, #cfd8e3); }
.fa-build .bd-slot { height: 2.1em; border-radius: .5em; border: .1em dashed transparent; display: grid; place-items: center; animation: bd-slot var(--d) infinite; }
.fa-build .bd-slot span { font-size: .62em; font-weight: 700; color: #fff; background: var(--green); padding: .45em 1.1em; border-radius: 99px; animation: bd-btn var(--d) infinite; }
.fa-build .bd-ghost { position: absolute; left: 1.6em; top: 6.3em; font-size: .62em; font-weight: 600; background: #fff; border: 1px solid var(--green); color: var(--green-d); border-radius: .5em; padding: .55em .8em; box-shadow: 0 .6em 1.2em rgba(7, 23, 38, .15); opacity: 0; animation: bd-ghost var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
.fa-build .bd-cur { left: 4.2em; top: 4.6em; opacity: 0; animation: bd-cur var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes bd-ghost {
    0%, 12% { opacity: 0; transform: none; }
    16% { opacity: 1; transform: none; }
    46% { opacity: 1; transform: translate(14em, 4.4em) rotate(-3deg); }
    52%, 100% { opacity: 0; transform: translate(14em, 4.4em); }
}
@keyframes bd-cur {
    0%, 8% { opacity: 0; transform: none; }
    14% { opacity: 1; transform: none; }
    46% { opacity: 1; transform: translate(9.2em, 2.9em); }
    58%, 100% { opacity: 0; transform: translate(9.2em, 2.9em); }
}
@keyframes bd-slot { 0%, 14% { border-color: transparent; background: transparent; } 18%, 46% { border-color: var(--green); background: var(--green-s); } 52%, 100% { border-color: transparent; background: transparent; } }
@keyframes bd-btn { 0%, 48% { opacity: 0; transform: scale(.7); } 56% { opacity: 1; transform: scale(1.08); } 62%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ---------- 4. Landing pages ---------- */
.fa-pages .pg-head { display: flex; justify-content: space-between; align-items: center; font-size: .75em; font-weight: 700; margin-bottom: .8em; }
.fa-pages .pg-new { font-size: .85em; color: #fff; background: var(--green-d); padding: .35em .8em; border-radius: 99px; }
.fa-pages .pg-stack { position: relative; height: 72%; }
.fa-pages .pg { position: absolute; left: 50%; top: 0; width: 58%; height: 100%; margin-left: -29%; background: #fff; border: 1px solid var(--line); border-radius: .7em; padding: .55em; box-shadow: 0 .8em 1.6em -1em rgba(7, 23, 38, .35); animation: pg-cycle calc(var(--d) * 1.5) cubic-bezier(.4, 0, .2, 1) infinite; }
.fa-pages .pg-b { animation-delay: calc(var(--d) * -.5); }
.fa-pages .pg-c { animation-delay: calc(var(--d) * -1); }
.fa-pages .pg i { display: block; height: 38%; border-radius: .45em; background: linear-gradient(135deg, #2fc28a, #13875e); }
.fa-pages .pg-b i { background: linear-gradient(135deg, #6d8cff, #3b5bdb); }
.fa-pages .pg-c i { background: linear-gradient(135deg, #f7b955, #e8890c); }
.fa-pages .pg b { display: block; height: .5em; width: 70%; border-radius: 99px; background: var(--ink); margin: .55em 0 .35em; opacity: .85; }
.fa-pages .pg s { display: block; height: .35em; width: 90%; border-radius: 99px; background: var(--line); margin-bottom: .3em; }
.fa-pages .pg em { position: absolute; left: .55em; bottom: .55em; font-style: normal; font-size: .55em; font-weight: 700; color: var(--green-d); background: var(--green-s); padding: .3em .7em; border-radius: 99px; }
@keyframes pg-cycle {
    0% { transform: translateX(60%) rotate(6deg) scale(.86); opacity: 0; z-index: 1; }
    8% { opacity: .6; }
    33% { transform: translateX(0) rotate(0) scale(1); opacity: 1; z-index: 3; }
    58% { transform: translateX(0) rotate(0) scale(1); opacity: 1; z-index: 3; }
    70% { transform: translateX(-62%) rotate(-6deg) scale(.86); opacity: .6; z-index: 2; }
    90%, 100% { transform: translateX(-70%) rotate(-8deg) scale(.82); opacity: 0; z-index: 1; }
}

/* ---------- 5. SEO ---------- */
.fa-seo .se-bar { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: .5em .9em; margin-bottom: .8em; box-shadow: 0 .3em .8em -.4em rgba(7, 23, 38, .2); }
.fa-seo .se-q { font-size: .72em; white-space: nowrap; overflow: hidden; display: inline-block; max-width: 100%; animation: se-type var(--d) steps(22) infinite; }
.fa-seo .se-caret { width: .1em; height: 1em; background: var(--ink); margin-left: .1em; animation: se-blink .8s steps(1) infinite; }
.fa-seo .se-list { position: relative; height: 70%; }
.fa-seo .se-r { position: absolute; left: 0; right: 0; height: 22%; display: flex; align-items: center; gap: .5em; padding: 0 .6em; border-radius: .5em; border: 1px solid var(--line); background: #fff; }
.fa-seo .se-r b { font-size: .68em; font-weight: 600; color: #3651c9; }
.fa-seo .se-r i { flex: 1; height: .35em; border-radius: 99px; background: var(--line); }
.fa-seo .se-us { top: 0; border-color: var(--green); background: var(--green-s); animation: se-us var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
.fa-seo .se-us b { color: var(--green-d); }
.fa-seo .se-rank { font-size: .6em; font-weight: 800; color: #fff; background: var(--green-d); border-radius: 99px; padding: .2em .55em; }
.fa-seo .se-a { top: 26%; animation: se-a var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
.fa-seo .se-b { top: 52%; animation: se-b var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
.fa-seo .se-c { top: 78%; animation: se-c var(--d) cubic-bezier(.5, 0, .2, 1) infinite; opacity: .55; }
@keyframes se-type { 0% { width: 0; } 30%, 100% { width: 12em; } }
@keyframes se-blink { 50% { opacity: 0; } }
@keyframes se-us { 0%, 36% { top: 78%; } 62%, 100% { top: 0; } }
@keyframes se-a { 0%, 36% { top: 0; } 62%, 100% { top: 26%; } }
@keyframes se-b { 0%, 36% { top: 26%; } 62%, 100% { top: 52%; } }
@keyframes se-c { 0%, 36% { top: 52%; opacity: 1; } 62%, 100% { top: 78%; opacity: .55; } }

/* ---------- 6. Checkout ---------- */
.fa-checkout .co-title { font-size: .78em; font-weight: 700; margin-bottom: .6em; }
.fa-checkout .co-f { border: 1px solid var(--line); border-radius: .5em; padding: .3em .6em; margin-bottom: .45em; }
.fa-checkout .co-f label { display: block; font-size: .52em; color: var(--muted); }
.fa-checkout .co-v { display: inline-block; font-size: .7em; font-weight: 600; white-space: nowrap; overflow: hidden; vertical-align: top; }
.fa-checkout .co-v1 { animation: co-v1 var(--d) steps(10) infinite; }
.fa-checkout .co-v2 { animation: co-v2 var(--d) steps(12) infinite; }
.fa-checkout .co-v3 { animation: co-v3 var(--d) steps(16) infinite; }
.fa-checkout .co-btn { text-align: center; font-size: .7em; font-weight: 700; color: #fff; background: #f05a28; border-radius: .5em; padding: .6em; margin-top: .3em; animation: co-press var(--d) infinite; }
.fa-checkout .co-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85em; font-weight: 700; color: var(--green-d); background: rgba(255, 255, 255, .96); opacity: 0; animation: co-done var(--d) infinite; }
@keyframes co-v1 { 0%, 4% { width: 0; } 18%, 100% { width: 7em; } }
@keyframes co-v2 { 0%, 20% { width: 0; } 36%, 100% { width: 7em; } }
@keyframes co-v3 { 0%, 38% { width: 0; } 54%, 100% { width: 9.5em; } }
@keyframes co-press { 0%, 58% { transform: none; filter: none; } 61% { transform: scale(.96); filter: brightness(.9); } 64%, 100% { transform: none; filter: none; } }
@keyframes co-done { 0%, 64% { opacity: 0; transform: scale(.96); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 7. Analytics ---------- */
.fa-analytics .an-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; margin-bottom: .7em; }
.fa-analytics .an-kpis div { border: 1px solid var(--line); border-radius: .55em; padding: .45em .55em; }
.fa-analytics .an-kpis span { display: block; font-size: .52em; color: var(--muted); }
.fa-analytics .an-kpis b { font-size: .9em; font-weight: 700; letter-spacing: -.02em; }
.fa-analytics .an-chart { position: relative; height: 58%; border: 1px solid var(--line); border-radius: .6em; padding: .6em; }
.fa-analytics .an-bars { position: absolute; inset: .6em; display: flex; align-items: flex-end; gap: 6%; }
.fa-analytics .an-bars i { flex: 1; height: var(--h); border-radius: .25em .25em 0 0; background: #d7f2e5; transform-origin: bottom; animation: an-bar var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-analytics .an-bars i:last-child { background: var(--green); }
.fa-analytics .an-bars i:nth-child(2) { animation-delay: .08s; }
.fa-analytics .an-bars i:nth-child(3) { animation-delay: .16s; }
.fa-analytics .an-bars i:nth-child(4) { animation-delay: .24s; }
.fa-analytics .an-bars i:nth-child(5) { animation-delay: .32s; }
.fa-analytics .an-bars i:nth-child(6) { animation-delay: .4s; }
.fa-analytics .an-bars i:nth-child(7) { animation-delay: .48s; }
@keyframes an-bar { 0% { transform: scaleY(0); } 22%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* ---------- 8. AI automation ---------- */
.fa-ai .ai-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.fa-ai .ai-wires path { fill: none; stroke: #d5dbe3; stroke-width: .7; }
.fa-ai .ai-wires .ai-flow { stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 10; opacity: 0; }
.fa-ai .ai-f0 { animation: ai-f0 var(--d) linear infinite; }
.fa-ai .ai-f1 { animation: ai-f1 var(--d) linear infinite; }
.fa-ai .ai-node { position: absolute; z-index: 2; transform: translateY(-50%); font-size: .56em; font-weight: 700; background: #fff; border: 1px solid var(--line); border-radius: .6em; padding: .55em .65em; white-space: nowrap; display: flex; align-items: center; box-shadow: 0 .4em 1em -.6em rgba(7, 23, 38, .35); }
.fa-ai .ai-in { left: 2%; top: 50%; }
.fa-ai .ai-core { left: 39%; top: 50%; width: 21%; justify-content: center; font-size: .82em; color: #fff; background: var(--navy); border-color: var(--navy); padding: .75em .5em; animation: ai-pulse var(--d) infinite; }
.fa-ai .ai-spark { width: .8em; height: .8em; margin-right: .35em; background: var(--green); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ai-spin 3s linear infinite; }
.fa-ai .ai-o { left: 64%; }
.fa-ai .ai-o1 { top: 17.5%; }
.fa-ai .ai-o2 { top: 50%; }
.fa-ai .ai-o3 { top: 82.5%; }
.fa-ai .ai-o .fa-tick { animation: ai-tick var(--d) infinite; }
.fa-ai .ai-o2 .fa-tick { animation-delay: .2s; }
.fa-ai .ai-o3 .fa-tick { animation-delay: .4s; }
@keyframes ai-f0 { 0%, 4% { stroke-dashoffset: 10; opacity: 0; } 5% { opacity: 1; } 24% { stroke-dashoffset: -90; opacity: 1; } 25%, 100% { stroke-dashoffset: -90; opacity: 0; } }
@keyframes ai-f1 { 0%, 32% { stroke-dashoffset: 10; opacity: 0; } 33% { opacity: 1; } 52% { stroke-dashoffset: -90; opacity: 1; } 53%, 100% { stroke-dashoffset: -90; opacity: 0; } }
@keyframes ai-pulse { 0%, 22% { box-shadow: 0 0 0 0 rgba(47, 194, 138, 0); } 27% { box-shadow: 0 0 0 .5em rgba(47, 194, 138, .28); } 34%, 100% { box-shadow: 0 0 0 0 rgba(47, 194, 138, 0); } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-tick { 0%, 52% { transform: scale(0); } 58% { transform: scale(1.25); } 62%, 94% { transform: scale(1); } 100% { transform: scale(0); } }

/* ---------- 9. Fraud blocking ---------- */
.fa-fraud .fr-head { display: flex; justify-content: space-between; align-items: center; font-size: .72em; font-weight: 700; margin-bottom: .6em; }
.fa-fraud .fr-live { font-size: .8em; font-weight: 600; color: var(--green-d); background: var(--green-s); padding: .25em .7em; border-radius: 99px; }
.fa-fraud .fr-row { position: relative; display: flex; align-items: center; gap: .55em; padding: .45em .55em; border: 1px solid var(--line); border-radius: .55em; margin-bottom: .4em; }
.fa-fraud .fr-row > i { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--soft); flex: none; }
.fa-fraud .fr-row > div { flex: 1; min-width: 0; }
.fa-fraud .fr-row b { display: block; font-size: .62em; font-weight: 700; }
.fa-fraud .fr-row s { display: block; font-size: .52em; color: var(--muted); text-decoration: none; }
.fa-fraud .fr-row em { font-style: normal; font-size: .52em; font-weight: 700; padding: .25em .7em; border-radius: 99px; }
.fa-fraud .fr-ok { color: var(--green-d); background: var(--green-s); }
.fa-fraud .fr-bad { border-color: var(--red); background: var(--red-s); animation: fr-bad var(--d) infinite; }
.fa-fraud .fr-bad s { color: var(--red); }
.fa-fraud .fr-bad .fr-ok { display: none; }
.fa-fraud .fr-block { color: #fff; background: var(--red); animation: fr-stamp var(--d) infinite; }
.fa-fraud .fr-scan { position: absolute; left: 1.1em; right: 1.1em; top: 2.4em; height: 2.2em; border-radius: .55em; background: linear-gradient(180deg, rgba(47, 194, 138, 0), rgba(47, 194, 138, .18)); border-bottom: .12em solid var(--green); pointer-events: none; opacity: 0; animation: fr-scan var(--d) ease-in-out infinite; }
@keyframes fr-scan { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 40% { opacity: 1; transform: translateY(8.6em); } 46%, 100% { opacity: 0; transform: translateY(8.6em); } }
@keyframes fr-bad { 0%, 26% { border-color: var(--line); background: #fff; } 30%, 94% { border-color: var(--red); background: var(--red-s); } 100% { border-color: var(--line); background: #fff; } }
@keyframes fr-stamp { 0%, 30% { opacity: 0; transform: scale(1.8) rotate(-8deg); } 36% { opacity: 1; transform: scale(.95) rotate(-4deg); } 40%, 94% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; } }

/* ---------- 10. Invoice ---------- */
.fa-invoice { justify-content: flex-start; }
.fa-invoice .iv-printer { position: relative; z-index: 2; height: 2.4em; margin: 0 14%; border-radius: .6em; background: var(--navy); }
.fa-invoice .iv-slot { position: absolute; left: 10%; right: 10%; bottom: .5em; height: .3em; border-radius: 99px; background: #050f1a; }
.fa-invoice .iv-feed { height: 8.4em; margin: -.8em 22% 0; padding: 0 .6em .8em; overflow: hidden; }
.fa-invoice .fa-sk { background: #dfe4eb; }
.fa-invoice .iv-paper { background: #fff; border: 1px solid #d5dbe3; border-top: 0; border-radius: 0 0 .45em .45em; padding: 1.1em .7em .6em; box-shadow: 0 .6em 1.2em -1em rgba(7, 23, 38, .5); animation: iv-print var(--d) cubic-bezier(.3, .6, .3, 1) infinite; }
.fa-invoice .iv-ph { display: flex; justify-content: space-between; font-size: .58em; margin-bottom: .35em; }
.fa-invoice .iv-ph b { font-weight: 800; letter-spacing: .02em; }
.fa-invoice .iv-ph span { color: var(--muted); }
.fa-invoice .iv-total { display: flex; justify-content: space-between; font-size: .62em; font-weight: 600; border-top: 1px dashed var(--line); padding-top: .4em; margin-top: .4em; }
.fa-invoice .iv-total b { color: var(--green-d); }
.fa-invoice .iv-btn { position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%); font-size: .62em; font-weight: 700; color: #fff; background: var(--green-d); padding: .55em 1.2em; border-radius: 99px; z-index: 3; animation: iv-press var(--d) infinite; }
.fa-invoice .iv-cur { left: 58%; bottom: .3em; animation: iv-cur var(--d) cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes iv-print { 0%, 18% { transform: translateY(-100%); opacity: 1; } 60%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes iv-press { 0%, 14% { transform: translateX(-50%); } 17% { transform: translateX(-50%) scale(.92); } 20%, 100% { transform: translateX(-50%); } }
@keyframes iv-cur { 0% { transform: translate(3em, 2em); opacity: 0; } 4% { opacity: 1; } 13%, 19% { transform: translate(-.4em, -.6em); opacity: 1; } 30%, 100% { transform: translate(1.5em, 1.5em); opacity: 0; } }

/* ---------- 11. Secure data ---------- */
.fa-secure .sc-ring { position: absolute; left: 50%; top: 28%; width: 5.4em; height: 5.4em; margin: -2.7em 0 0 -2.7em; border-radius: 50%; border: .14em dashed rgba(47, 194, 138, .5); animation: sc-spin 12s linear infinite; }
.fa-secure .sc-shield { position: absolute; left: 50%; top: 28%; width: 3em; height: 3.5em; margin: -1.75em 0 0 -1.5em; background: linear-gradient(160deg, #2fc28a, #13875e); clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%); display: grid; place-items: center; animation: sc-beat var(--d) infinite; }
.fa-secure .sc-lock { position: relative; width: 1.2em; height: .95em; border-radius: .2em; background: #fff; margin-top: .5em; }
.fa-secure .sc-lock::before { content: ""; position: absolute; left: .22em; right: .22em; top: -.62em; height: .8em; border: .16em solid #fff; border-bottom: 0; border-radius: .5em .5em 0 0; }
.fa-secure .sc-rows { position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em; }
.fa-secure .sc-rows div { display: flex; justify-content: space-between; font-size: .6em; padding: .45em .7em; border: 1px solid var(--line); border-radius: .55em; margin-top: .4em; }
.fa-secure .sc-rows span { color: var(--muted); }
.fa-secure .sc-rows b { letter-spacing: .08em; }
.fa-secure .sc-badge { position: absolute; right: 1.1em; top: 1.1em; font-size: .55em; font-weight: 700; color: var(--green-d); background: var(--green-s); padding: .3em .8em; border-radius: 99px; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-beat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.08); } 16% { transform: scale(1); } }

/* ---------- 12. Unlimited ---------- */
@property --ul-n {
    syntax: "<integer>";
    inherits: false;
    initial-value: 9999;
}
.fa-unlimited .ul-card { border: 1px solid var(--line); border-radius: .7em; padding: .7em .8em; margin-bottom: .6em; }
.fa-unlimited .ul-card > span, .fa-unlimited .ul-team > span { display: block; font-size: .58em; color: var(--muted); }
.fa-unlimited .ul-count { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 2em; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; counter-reset: n var(--ul-n); animation: ul-count calc(var(--d) * 1.5) linear infinite; }
.fa-unlimited .ul-count::after { content: counter(n); }
.fa-unlimited .ul-spark { display: flex; align-items: flex-end; gap: .25em; height: 1.4em; margin-top: .3em; }
.fa-unlimited .ul-spark i { flex: 1; border-radius: .15em; background: var(--green); opacity: .35; height: 30%; animation: ul-spark 1.2s ease-in-out infinite alternate; }
.fa-unlimited .ul-spark i:nth-child(2n) { animation-delay: .3s; height: 55%; }
.fa-unlimited .ul-spark i:nth-child(3n) { animation-delay: .6s; height: 75%; }
.fa-unlimited .ul-spark i:last-child { opacity: 1; height: 100%; }
.fa-unlimited .ul-team { border: 1px solid var(--line); border-radius: .7em; padding: .6em .8em; }
.fa-unlimited .ul-avs { display: flex; margin: .4em 0 .3em; }
.fa-unlimited .ul-avs i, .fa-unlimited .ul-add { width: 1.7em; height: 1.7em; border-radius: 50%; border: .14em solid #fff; margin-left: -.45em; display: grid; place-items: center; font-style: normal; font-size: .7em; font-weight: 700; color: #fff; }
.fa-unlimited .ul-avs i:first-child { margin-left: 0; }
.fa-unlimited .av1 { background: #3b82f6; }
.fa-unlimited .av2 { background: #f05a28; }
.fa-unlimited .av3 { background: #8b5cf6; }
.fa-unlimited .av4 { background: #e8a317; animation: ul-join var(--d) infinite; }
.fa-unlimited .av5 { background: #13875e; animation: ul-join var(--d) infinite .4s; }
.fa-unlimited .ul-add { background: var(--soft); color: var(--muted); border-style: dashed; border-color: #c9d1dc; }
.fa-unlimited .ul-team em { font-style: normal; font-size: .55em; font-weight: 700; color: var(--green-d); }
@keyframes ul-count { from { --ul-n: 1240; } to { --ul-n: 9999; } }
@keyframes ul-spark { to { opacity: .8; transform: scaleY(1.15); } }
@keyframes ul-join { 0%, 30% { transform: scale(0); } 38% { transform: scale(1.2); } 42%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

/* ---------- 13. Recover orders ---------- */
.fa-recover .rc-card { border: 1px solid var(--line); border-radius: .7em; padding: .7em; }
.fa-recover .rc-top { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: .66em; margin-bottom: .6em; }
.fa-recover .rc-st { font-weight: 700; font-size: .85em; padding: .25em .7em; border-radius: 99px; }
.fa-recover .rc-inc { position: absolute; right: 0; color: #a86b00; background: var(--amber-s); animation: rc-inc var(--d) infinite; opacity: 0; }
.fa-recover .rc-done { color: var(--green-d); background: var(--green-s); animation: rc-done var(--d) infinite; }
.fa-recover .rc-item { display: flex; align-items: center; gap: .6em; }
.fa-recover .rc-item > i { width: 2.4em; height: 2.4em; border-radius: .5em; background: var(--soft); flex: none; }
.fa-recover .rc-item > div { flex: 1; }
.fa-recover .rc-item > b { font-size: .7em; }
.fa-recover .rc-sms { position: relative; margin: .8em 0 0 18%; font-size: .62em; line-height: 1.4; background: var(--navy); color: #fff; padding: .6em .8em; border-radius: .8em .8em .2em .8em; animation: rc-sms var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-recover .rc-sms span { display: block; font-size: .8em; font-weight: 700; color: var(--green); margin-bottom: .15em; }
.fa-recover .rc-gain { margin-top: .9em; font-size: .72em; font-weight: 700; color: var(--green-d); animation: rc-gain var(--d) infinite; }
@keyframes rc-inc { 0%, 2% { opacity: 0; } 6%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes rc-done { 0%, 52% { opacity: 0; transform: scale(.8); } 58%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rc-sms { 0%, 16% { opacity: 0; transform: translateY(1em) scale(.95); } 24%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rc-gain { 0%, 58% { opacity: 0; transform: translateY(.5em); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 14. Payments ---------- */
.fa-pay .py-phone { position: absolute; left: 50%; top: .9em; bottom: -.6em; width: 9.6em; margin-left: -4.8em; border: .3em solid var(--navy); border-bottom: 0; border-radius: 1.3em 1.3em 0 0; padding: .9em .7em; }
.fa-pay .py-amt { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; }
.fa-pay .py-amt span { font-size: .55em; color: var(--muted); }
.fa-pay .py-amt b { font-size: .95em; }
.fa-pay .py-m { display: flex; align-items: center; gap: .5em; font-size: .6em; font-weight: 600; border: 1px solid var(--line); border-radius: .6em; padding: .5em .6em; margin-bottom: .4em; }
.fa-pay .py-m i { width: .9em; height: .9em; border-radius: 50%; border: .14em solid #c9d1dc; flex: none; }
.fa-pay .py-m1 { animation: py-sel var(--d) infinite; }
.fa-pay .py-m1 i { animation: py-dot var(--d) infinite; }
.fa-pay .py-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .7em; font-weight: 700; color: var(--green-d); background: rgba(255, 255, 255, .97); border-radius: 1em 1em 0 0; opacity: 0; animation: py-ok var(--d) infinite; }
@keyframes py-sel { 0%, 10% { border-color: var(--line); background: #fff; } 14%, 52% { border-color: var(--green); background: var(--green-s); } 56%, 100% { border-color: var(--line); background: #fff; } }
@keyframes py-dot { 0%, 10% { border-color: #c9d1dc; background: transparent; } 14%, 52% { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 .14em #fff; } 56%, 100% { border-color: #c9d1dc; background: transparent; } }
@keyframes py-ok { 0%, 54% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 15. Delivery ---------- */
.fa-delivery .dl-chips { display: flex; gap: .4em; margin-bottom: .8em; }
.fa-delivery .dl-chips span { font-size: .58em; font-weight: 700; border: 1px solid var(--line); border-radius: 99px; padding: .3em .8em; }
.fa-delivery .dl-road { position: relative; height: 3.6em; margin: 0 .4em 1em; }
.fa-delivery .dl-road b { position: absolute; left: 0; right: 0; top: 50%; height: .2em; margin-top: -.1em; background: repeating-linear-gradient(90deg, #c9d1dc 0 .6em, transparent .6em 1.1em); border-radius: 99px; }
.fa-delivery .dl-pin { position: absolute; top: 50%; width: .9em; height: .9em; margin-top: -.45em; border-radius: 50%; background: #fff; border: .2em solid var(--navy); }
.fa-delivery .dl-a { left: -.2em; }
.fa-delivery .dl-b { right: -.2em; border-color: var(--green); }
.fa-delivery .dl-truck { position: absolute; top: 50%; left: 0; width: 2.4em; height: 1.4em; margin-top: -1.15em; border-radius: .25em; background: var(--green-d); animation: dl-drive var(--d) cubic-bezier(.45, 0, .3, 1) infinite; }
.fa-delivery .dl-truck::before { content: ""; position: absolute; right: -.75em; bottom: 0; width: .8em; height: .9em; border-radius: 0 .3em .1em 0; background: var(--navy); }
.fa-delivery .dl-truck::after { content: ""; position: absolute; left: .3em; bottom: -.3em; width: .55em; height: .55em; border-radius: 50%; background: var(--ink); box-shadow: 1.5em 0 0 var(--ink); }
.fa-delivery .dl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.fa-delivery .dl-s { font-size: .58em; font-weight: 700; text-align: center; color: var(--muted); }
.fa-delivery .dl-s i { display: block; width: 1.3em; height: 1.3em; margin: 0 auto .35em; border-radius: 50%; background: var(--soft); border: .15em solid var(--line); }
.fa-delivery .dl-s1 i { animation: dl-step var(--d) infinite; }
.fa-delivery .dl-s2 i { animation: dl-step2 var(--d) infinite; }
.fa-delivery .dl-s3 i { animation: dl-step3 var(--d) infinite; }
@keyframes dl-drive { 0%, 8% { left: 0; opacity: 1; } 70%, 92% { left: calc(100% - 3.2em); opacity: 1; } 100% { left: calc(100% - 3.2em); opacity: 0; } }
@keyframes dl-step { 0%, 6% { background: var(--soft); border-color: var(--line); } 10%, 94% { background: var(--green); border-color: var(--green); } 100% { background: var(--soft); } }
@keyframes dl-step2 { 0%, 34% { background: var(--soft); border-color: var(--line); } 38%, 94% { background: var(--green); border-color: var(--green); } 100% { background: var(--soft); } }
@keyframes dl-step3 { 0%, 68% { background: var(--soft); border-color: var(--line); } 72%, 94% { background: var(--green); border-color: var(--green); } 100% { background: var(--soft); } }

/* ---------- 16. Order kanban ---------- */
.fa-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; align-content: stretch; }
.fa-kanban .kb-col { position: relative; background: var(--soft); border-radius: .6em; padding: .5em; }
.fa-kanban .kb-col:first-child { z-index: 2; }
.fa-kanban .kb-col > span { display: block; font-size: .58em; font-weight: 700; color: var(--muted); margin-bottom: .6em; }
.fa-kanban .kb-c { height: 2.2em; background: #fff; border: 1px solid var(--line); border-radius: .45em; margin-bottom: .4em; }
.fa-kanban .kb-move { position: relative; height: 2.2em; background: #fff; border: 1px solid var(--green); border-radius: .45em; padding: .35em .45em; box-shadow: 0 .6em 1.2em -.6em rgba(7, 23, 38, .35); animation: kb-move var(--d) cubic-bezier(.6, 0, .2, 1) infinite; }
.fa-kanban .kb-move b { display: block; font-size: .55em; font-weight: 800; color: var(--green-d); }
.fa-kanban .kb-move i { display: block; height: .3em; width: 70%; border-radius: 99px; background: var(--line); margin-top: .35em; }
/* column pitch = card width + 2 x column padding (.5em) + gap (.5em) */
@keyframes kb-move {
    0%, 12% { transform: translate(0, 0); opacity: 1; }
    36%, 50% { transform: translate(calc(100% + 1.5em), -2.6em); opacity: 1; }
    70%, 90% { transform: translate(calc(200% + 3em), 0); opacity: 1; }
    100% { transform: translate(calc(200% + 3em), 0); opacity: 0; }
}

/* ---------- 17. Inventory ---------- */
.fa-stock .sk-head { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: .72em; font-weight: 700; margin-bottom: .9em; }
.fa-stock .sk-head em { position: absolute; right: 0; font-style: normal; font-size: .78em; padding: .25em .7em; border-radius: 99px; }
.fa-stock .sk-alert { color: var(--red); background: var(--red-s); opacity: 0; animation: sk-alert var(--d) infinite; }
.fa-stock .sk-re { color: var(--green-d); background: var(--green-s); animation: sk-re var(--d) infinite; }
.fa-stock .sk-row { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: .5em; margin-bottom: .75em; }
.fa-stock .sk-row span { font-size: .62em; font-weight: 600; }
.fa-stock .sk-bar { height: .7em; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fa-stock .sk-bar b { display: block; height: 100%; width: var(--w, 88%); border-radius: inherit; background: #9fdcc2; }
.fa-stock .sk-low .sk-bar b { background: var(--green); animation: sk-level var(--d) ease-in-out infinite; }
.fa-stock .sk-truck { position: absolute; left: 1.1em; bottom: 1.1em; display: flex; align-items: center; gap: .5em; font-size: .6em; font-weight: 700; color: var(--muted); animation: sk-truck var(--d) cubic-bezier(.45, 0, .3, 1) infinite; }
.fa-stock .sk-truck i { position: relative; width: 2.6em; height: 1.5em; border-radius: .25em; background: var(--navy); }
.fa-stock .sk-truck i::after { content: ""; position: absolute; left: .3em; bottom: -.3em; width: .6em; height: .6em; border-radius: 50%; background: var(--ink); box-shadow: 1.5em 0 0 var(--ink); }
@keyframes sk-level { 0% { width: 70%; background: var(--green); } 34% { width: 12%; background: var(--red); } 52% { width: 12%; background: var(--red); } 72%, 100% { width: 88%; background: var(--green); } }
@keyframes sk-alert { 0%, 28% { opacity: 0; } 32%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sk-re { 0%, 54% { opacity: 0; } 58%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sk-truck { 0%, 40% { transform: translateX(-140%); opacity: 0; } 48% { opacity: 1; } 64%, 92% { transform: none; opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } }

/* ---------- 18. Offers ---------- */
@property --of-s {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}
.fa-offer .of-card { position: absolute; left: 50%; top: 1.1em; bottom: 1.1em; width: 10.5em; margin-left: -5.25em; border: 1px solid var(--line); border-radius: .8em; padding: .6em; box-shadow: 0 .8em 1.6em -1.2em rgba(7, 23, 38, .4); }
.fa-offer .of-img { position: relative; height: 48%; border-radius: .55em; background: linear-gradient(160deg, #eef7f2, #d6efe2); }
.fa-offer .of-img::before { content: ""; position: absolute; left: 50%; bottom: 14%; width: 2.6em; height: 2.4em; margin-left: -1.3em; border-radius: .3em .3em .5em .5em; background: linear-gradient(160deg, #2fc28a, #13875e); }
.fa-offer .of-img::after { content: ""; position: absolute; left: 50%; bottom: calc(14% + 2.1em); width: 1.3em; height: 1em; margin-left: -.65em; border: .2em solid #13875e; border-bottom: 0; border-radius: .7em .7em 0 0; }
.fa-offer .of-tag { position: absolute; left: .5em; top: .5em; font-size: .55em; font-weight: 800; color: #fff; background: var(--red); padding: .3em .7em; border-radius: 99px; animation: of-tag var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-offer .of-name { display: block; font-size: .7em; margin: .55em 0 .25em; }
.fa-offer .of-price { position: relative; font-size: .8em; height: 1.3em; }
.fa-offer .of-old { color: var(--muted); font-size: .8em; animation: of-old var(--d) infinite; }
.fa-offer .of-new { margin-left: .4em; color: var(--red); animation: of-new var(--d) infinite; }
.fa-offer .of-timer { display: flex; justify-content: space-between; align-items: center; margin-top: .45em; font-size: .58em; background: var(--soft); border-radius: .5em; padding: .4em .6em; }
.fa-offer .of-timer span { color: var(--muted); }
.fa-offer .of-timer em { font-style: normal; counter-reset: s var(--of-s); animation: of-sec 60s steps(60) infinite; }
.fa-offer .of-sec::after { content: counter(s, decimal-leading-zero); }
@keyframes of-tag { 0%, 10% { transform: translateY(-2em) rotate(-10deg); opacity: 0; } 20%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes of-old { 0%, 18% { text-decoration: none; color: var(--ink); font-size: 1em; } 26%, 100% { text-decoration: line-through; color: var(--muted); font-size: .8em; } }
@keyframes of-new { 0%, 24% { opacity: 0; } 32%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes of-sec { from { --of-s: 59; } to { --of-s: 0; } }

/* ---------- 19. Coupons ---------- */
.fa-coupon .cp-ticket { position: relative; display: flex; align-items: center; justify-content: space-between; margin: .2em .4em .9em; padding: .7em 1em; border-radius: .6em; background: var(--green-d); color: #fff; animation: cp-ticket var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-coupon .cp-ticket::before, .fa-coupon .cp-ticket::after { content: ""; position: absolute; top: 50%; width: .9em; height: .9em; margin-top: -.45em; border-radius: 50%; background: #fff; }
.fa-coupon .cp-ticket::before { left: -.45em; }
.fa-coupon .cp-ticket::after { right: -.45em; }
.fa-coupon .cp-ticket b { font-size: 1em; letter-spacing: .12em; border-right: .1em dashed rgba(255, 255, 255, .5); padding-right: 1em; }
.fa-coupon .cp-ticket span { font-size: .7em; font-weight: 700; }
.fa-coupon .cp-cart { border: 1px solid var(--line); border-radius: .7em; padding: .6em .8em; }
.fa-coupon .cp-cart > div { position: relative; display: flex; justify-content: space-between; font-size: .64em; padding: .35em 0; }
.fa-coupon .cp-cart span { color: var(--muted); }
.fa-coupon .cp-disc { color: var(--green-d); animation: cp-disc var(--d) infinite; }
.fa-coupon .cp-disc span { color: var(--green-d); }
.fa-coupon .cp-total { border-top: 1px solid var(--line); margin-top: .2em; font-size: .8em !important; font-weight: 700; }
.fa-coupon .cp-total span { color: var(--ink); }
.fa-coupon .cp-t1 { position: absolute; right: 0; opacity: 0; animation: cp-t1 var(--d) infinite; }
.fa-coupon .cp-t2 { animation: cp-t2 var(--d) infinite; }
@keyframes cp-ticket { 0%, 6% { transform: translateY(-.6em) rotate(-4deg) scale(.9); opacity: 0; } 16%, 94% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes cp-disc { 0%, 36% { opacity: 0; transform: translateX(-.5em); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cp-t1 { 0%, 3% { opacity: 0; } 8%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes cp-t2 { 0%, 46% { opacity: 0; transform: translateY(.4em); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 20. Business email ---------- */
.fa-mail .ml-compose { border: 1px solid var(--line); border-radius: .7em; padding: .4em .7em .7em; animation: ml-out var(--d) cubic-bezier(.5, 0, .3, 1) infinite; }
.fa-mail .ml-compose > div:not(.ml-send) { display: flex; gap: .5em; font-size: .6em; padding: .55em 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fa-mail .ml-compose span { color: var(--muted); width: 4em; flex: none; }
.fa-mail .ml-type { overflow: hidden; display: inline-block; animation: ml-type var(--d) steps(22) infinite; }
.fa-mail .ml-send { align-self: flex-start; display: inline-block; margin-top: .6em; font-size: .62em; font-weight: 700; color: #fff; background: var(--green-d); padding: .45em 1.1em; border-radius: 99px; animation: ml-press var(--d) infinite; }
.fa-mail .ml-env { position: absolute; left: 50%; top: 38%; width: 3em; height: 2.1em; margin-left: -1.5em; border-radius: .3em; background: var(--green); opacity: 0; animation: ml-env var(--d) cubic-bezier(.5, 0, .3, 1) infinite; }
.fa-mail .ml-env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, rgba(255, 255, 255, .7) 50%, transparent 54%), linear-gradient(to bottom left, transparent 49%, rgba(255, 255, 255, .7) 50%, transparent 54%); background-size: 50% 100%; background-repeat: no-repeat; background-position: left, right; }
.fa-mail .ml-sent { position: absolute; left: 0; right: 0; bottom: 1.4em; display: flex; justify-content: center; align-items: center; font-size: .72em; font-weight: 700; color: var(--green-d); opacity: 0; animation: ml-sent var(--d) infinite; }
@keyframes ml-type { 0%, 4% { width: 0; } 30%, 100% { width: 11em; } }
@keyframes ml-press { 0%, 36% { transform: none; } 39% { transform: scale(.92); } 42%, 100% { transform: none; } }
@keyframes ml-out { 0%, 42% { transform: none; opacity: 1; } 52%, 92% { transform: translateY(-.6em) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ml-env { 0%, 44% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1); } 66% { opacity: 1; transform: translate(6em, -4em) rotate(18deg) scale(.6); } 70%, 100% { opacity: 0; transform: translate(7em, -5em) scale(.4); } }
@keyframes ml-sent { 0%, 66% { opacity: 0; transform: translateY(.5em); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 21. Support chat ---------- */
.fa-chat .ch-head { display: flex; align-items: center; gap: .55em; padding-bottom: .6em; border-bottom: 1px solid var(--line); margin-bottom: .7em; }
.fa-chat .ch-head > i { position: relative; width: 1.9em; height: 1.9em; border-radius: 50%; background: linear-gradient(135deg, #9fe3c3, #13875e); }
.fa-chat .ch-head > i::after { content: ""; position: absolute; right: 0; bottom: 0; width: .55em; height: .55em; border-radius: 50%; background: var(--green); border: .12em solid #fff; }
.fa-chat .ch-head b { display: block; font-size: .66em; }
.fa-chat .ch-head span { display: block; font-size: .52em; color: var(--green-d); }
.fa-chat .ch-msg { max-width: 78%; width: fit-content; font-size: .64em; line-height: 1.4; padding: .55em .8em; margin-bottom: .5em; border-radius: 1em; }
.fa-chat .ch-me { margin-left: auto; background: var(--navy); color: #fff; border-bottom-right-radius: .25em; animation: ch-in var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-chat .ch-them { background: var(--soft); border-bottom-left-radius: .25em; animation: ch-in3 var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-chat .ch-me2 { animation-name: ch-in4; }
.fa-chat .ch-typing { position: absolute; left: 1.1em; top: 6.6em; display: flex; gap: .25em; background: var(--soft); padding: .55em .7em; border-radius: 1em; opacity: 0; animation: ch-typing var(--d) infinite; }
.fa-chat .ch-typing i { width: .4em; height: .4em; border-radius: 50%; background: var(--muted); animation: ch-dot .9s ease-in-out infinite; }
.fa-chat .ch-typing i:nth-child(2) { animation-delay: .15s; }
.fa-chat .ch-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-in { 0%, 4% { opacity: 0; transform: translateY(.6em); } 10%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ch-typing { 0%, 14% { opacity: 0; } 18%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes ch-in3 { 0%, 38% { opacity: 0; transform: translateY(.6em); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ch-in4 { 0%, 60% { opacity: 0; transform: translateY(.6em); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ch-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-.25em); opacity: 1; } }

/* ---------- 22. Monthly review ---------- */
.fa-review .rv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.fa-review .rv-head b { font-size: .75em; }
.fa-review .rv-badge { font-size: .55em; font-weight: 700; color: var(--green-d); background: var(--green-s); padding: .3em .8em; border-radius: 99px; animation: rv-badge var(--d) cubic-bezier(.2, .75, .15, 1) infinite; }
.fa-review .rv-chart { display: block; width: 100%; height: 45%; overflow: visible; }
.fa-review .rv-line { fill: none; stroke: var(--green-d); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: rv-draw var(--d) ease-out infinite; }
.fa-review .rv-area { fill: rgba(47, 194, 138, .14); animation: rv-area var(--d) ease-out infinite; }
.fa-review .rv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .7em; }
.fa-review .rv-stats div { border: 1px solid var(--line); border-radius: .55em; padding: .4em .5em; }
.fa-review .rv-stats span { display: block; font-size: .5em; color: var(--muted); }
.fa-review .rv-stats b { font-size: .78em; }
@keyframes rv-draw { 0%, 6% { stroke-dashoffset: 100; } 50%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes rv-area { 0%, 30% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rv-badge { 0%, 46% { opacity: 0; transform: scale(.7); } 54% { opacity: 1; transform: scale(1.1); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ================= new features (Oct 2026) ================= */
/* shared: fade/slide in at a step, stay, then reset at the loop end (resting = shown) */
@keyframes nf-in1 { 0%, 4% { opacity: 0; transform: translateY(.6em); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nf-in2 { 0%, 26% { opacity: 0; transform: translateY(.6em); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nf-in3 { 0%, 48% { opacity: 0; transform: translateY(.6em); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nf-in4 { 0%, 66% { opacity: 0; transform: scale(.85); } 74%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nf-grow { 0%, 8% { transform: scaleX(0); } 60%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nf-growy { 0%, 8% { transform: scaleY(0); } 55%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.fa .nf-card { background: #fff; border: 1px solid var(--line); border-radius: .7em; box-shadow: 0 .3em .9em rgba(12, 32, 52, .08); }

/* themes */
.fa-themes { background: linear-gradient(160deg, #f6f8fb, #fff); }
.fa-themes .tm-tags { display: flex; gap: .35em; align-items: center; margin-bottom: .7em; font-size: .56em; position: relative; height: 1.8em; }
.fa-themes .tm-t { position: absolute; left: 0; padding: .3em .9em; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 600; opacity: 0; }
.fa-themes .tm-t3 { opacity: 1; }
.fa-themes .tm-tags b { margin-left: auto; color: var(--green-d); }
.fa-themes .tm-frame { position: relative; height: 7.4em; border-radius: .7em; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.fa-themes .tm-skin { position: absolute; inset: 0; padding: .6em; opacity: 0; }
.fa-themes .tm-s3 { opacity: 1; }
.fa-themes .tm-hero { display: flex; gap: .6em; align-items: center; border-radius: .5em; padding: .55em; margin-bottom: .55em; }
.fa-themes .tm-hero > div { flex: 1; }
.fa-themes .tm-hero .fa-sk { background: rgba(255, 255, 255, .75); }
.fa-themes .tm-hero i { width: 2.6em; height: 2.6em; border-radius: .5em; background: rgba(255, 255, 255, .55); }
.fa-themes .tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.fa-themes .tm-grid i { height: 2.3em; border-radius: .4em; }
.fa-themes .tm-s1 .tm-hero { background: linear-gradient(120deg, #e86a92, #f4a6bd); } .fa-themes .tm-s1 .tm-grid i { background: #fbe3eb; }
.fa-themes .tm-s2 .tm-hero { background: linear-gradient(120deg, #3fa34d, #9ad08f); } .fa-themes .tm-s2 .tm-grid i { background: #e5f4e2; }
.fa-themes .tm-s3 .tm-hero { background: linear-gradient(120deg, #1f4e8c, #4f8fe0); } .fa-themes .tm-s3 .tm-grid i { background: #e2ecfa; }
.fa-themes .tm-s1, .fa-themes .tm-t1 { animation: tm-a var(--d) infinite; }
.fa-themes .tm-s2, .fa-themes .tm-t2 { animation: tm-b var(--d) infinite; }
.fa-themes .tm-s3, .fa-themes .tm-t3 { animation: tm-c var(--d) infinite; }
@keyframes tm-a { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes tm-b { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes tm-c { 0%, 63% { opacity: 0; } 67%, 100% { opacity: 1; } }
.fa-themes .tm-apply { margin-top: .7em; font-size: .6em; font-weight: 600; color: var(--green-d); display: flex; align-items: center; }

/* auto messages */
.fa-automsg { flex-direction: row; gap: .8em; align-items: center; background: #f6f8fb; }
.fa-automsg .am-phone { flex: 1.5; background: #fff; border: .18em solid var(--navy); border-radius: 1em; padding: .6em; height: 100%; display: flex; flex-direction: column; gap: .4em; }
.fa-automsg .am-top { display: flex; justify-content: space-between; font-size: .5em; padding-bottom: .4em; border-bottom: 1px solid var(--line); }
.fa-automsg .am-top span { color: var(--muted); }
.fa-automsg .am-b { font-size: .5em; line-height: 1.35; background: var(--green-s); border-radius: .9em; border-bottom-left-radius: .2em; padding: .55em .75em; }
.fa-automsg .am-b1 { animation: nf-in1 var(--d) infinite; }
.fa-automsg .am-b2 { animation: nf-in2 var(--d) infinite; }
.fa-automsg .am-b3 { animation: nf-in3 var(--d) infinite; background: var(--amber-s); }
.fa-automsg .am-tags { flex: 1; display: flex; flex-direction: column; gap: .5em; font-size: .52em; }
.fa-automsg .am-tags span { padding: .45em .7em; border-radius: .5em; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.fa-automsg .am-tags span::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--green); margin-right: .45em; }

/* one inbox */
.fa-inbox .ib-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; }
.fa-inbox .ib-head b { font-size: .75em; } .fa-inbox .ib-head span { font-size: .55em; color: var(--red); font-weight: 600; }
.fa-inbox .ib-row { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border: 1px solid var(--line); border-radius: .6em; margin-bottom: .45em; animation: nf-in1 var(--d) infinite; }
.fa-inbox .ib-row:nth-of-type(3) { animation-name: nf-in2; } .fa-inbox .ib-row:nth-of-type(4) { animation-name: nf-in3; }
.fa-inbox .ib-row > i { width: 1.6em; height: 1.6em; border-radius: 50%; flex: none; }
.fa-inbox .ib-ms { background: linear-gradient(135deg, #0a7cff, #a033ff); } .fa-inbox .ib-ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); } .fa-inbox .ib-wa { background: #25d366; }
.fa-inbox .ib-row > div { flex: 1; min-width: 0; }
.fa-inbox .ib-row b { display: block; font-size: .56em; } .fa-inbox .ib-row s { display: block; text-decoration: none; font-size: .5em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-inbox .ib-av { font-style: normal; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--navy); color: #fff; font-size: .55em; display: grid; place-items: center; font-weight: 700; }
.fa-inbox .ib-a2 { background: var(--amber); }
.fa-inbox .ib-hot { border-color: var(--green); background: var(--green-s); }
.fa-inbox .ib-ord { font-style: normal; font-size: .48em; font-weight: 700; color: #fff; background: var(--green-d); padding: .3em .6em; border-radius: 99px; animation: nf-in4 var(--d) infinite; }

/* ai chat */
.fa-aichat { justify-content: flex-start; }
.fa-aichat .ac-head { display: flex; align-items: center; gap: .55em; padding-bottom: .55em; border-bottom: 1px solid var(--line); margin-bottom: .7em; }
.fa-aichat .ac-bot { width: 3.2em; height: 3.2em; border-radius: 50%; background: linear-gradient(135deg, #5b7cfa, #9b5bfa); color: #fff; font-size: .6em; font-weight: 800; display: grid; place-items: center; }
.fa-aichat .ac-head div b { display: block; font-size: .64em; } .fa-aichat .ac-head div span { display: block; font-size: .5em; color: var(--green-d); }
.fa-aichat .ac-msg { font-size: .58em; line-height: 1.4; padding: .55em .8em; border-radius: 1em; max-width: 82%; width: fit-content; margin-bottom: .5em; }
.fa-aichat .ac-me { margin-left: auto; background: var(--navy); color: #fff; border-bottom-right-radius: .2em; animation: nf-in1 var(--d) infinite; }
.fa-aichat .ac-ai { background: #eef1ff; border-bottom-left-radius: .2em; animation: nf-in3 var(--d) infinite; }
.fa-aichat .ac-typing { display: flex; gap: .25em; width: fit-content; background: #eef1ff; padding: .5em .7em; border-radius: 1em; position: absolute; left: 1.1em; bottom: 1.2em; opacity: 0; animation: ac-type var(--d) infinite; }
.fa-aichat .ac-typing i { width: .35em; height: .35em; border-radius: 50%; background: #7c8cf0; }
@keyframes ac-type { 0%, 20% { opacity: 0; } 24%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }

/* sales team */
.fa-team .tl-head { display: flex; justify-content: space-between; margin-bottom: .7em; }
.fa-team .tl-head b { font-size: .72em; } .fa-team .tl-head span { font-size: .55em; color: var(--amber); font-weight: 700; }
.fa-team .tl-row { display: flex; align-items: center; gap: .5em; margin-bottom: .6em; font-size: .58em; }
.fa-team .tl-row em { font-style: normal; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 700; }
.fa-team .tl-r1 em { background: var(--amber); color: #fff; }
.fa-team .tl-row > span { width: 4.6em; font-weight: 600; }
.fa-team .tl-bar { flex: 1; height: .8em; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fa-team .tl-bar b { display: block; height: 100%; border-radius: 99px; background: var(--green); transform-origin: left; animation: nf-grow var(--d) cubic-bezier(.2, .7, .2, 1) infinite; }
.fa-team .tl-r1 b { width: 92%; } .fa-team .tl-r2 b { width: 78%; background: #5fd3a6; } .fa-team .tl-r3 b { width: 61%; background: #a8e6cc; }
.fa-team .tl-row s { text-decoration: none; width: 2.4em; text-align: right; color: var(--muted); }
.fa-team .tl-crown { align-self: flex-start; font-size: .52em; font-weight: 700; background: var(--amber-s); color: #8a5a00; padding: .3em .8em; border-radius: 99px; animation: nf-in4 var(--d) infinite; }

/* factory */
.fa-factory .fc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; text-align: center; font-size: .56em; margin-bottom: .4em; }
.fa-factory .fc-cols div { background: var(--soft); border-radius: .5em; padding: .4em 0; }
.fa-factory .fc-track { position: relative; height: 3.2em; border-radius: .6em; background: repeating-linear-gradient(90deg, #f7f9fb 0 33.2%, #fff 33.2% 33.5%); border: 1px dashed var(--line); }
.fa-factory .fc-job { position: absolute; top: .4em; left: calc(66.66% + .3em); width: calc(33.33% - .6em); height: 2.4em; background: #fff; border: 1px solid var(--green); border-radius: .5em; padding: .3em .45em; animation: fc-move var(--d) cubic-bezier(.5, 0, .3, 1) infinite; box-shadow: 0 .2em .5em rgba(12, 32, 52, .1); }
.fa-factory .fc-job b { display: block; font-size: .5em; } .fa-factory .fc-job span { display: block; font-size: .44em; color: var(--muted); }
@keyframes fc-move { 0%, 10% { left: .3em; } 30%, 42% { left: calc(33.33% + .3em); } 62%, 100% { left: calc(66.66% + .3em); } }
.fa-factory .fc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .55em; font-size: .5em; font-weight: 600; }
.fa-factory .fc-steps span { display: flex; align-items: center; }
.fa-factory .fc-s1 { animation: nf-in1 var(--d) infinite; } .fa-factory .fc-s2 { animation: nf-in2 var(--d) infinite; } .fa-factory .fc-s3 { animation: nf-in3 var(--d) infinite; }
.fa-factory .fc-target { margin-top: .7em; font-size: .56em; font-weight: 700; color: var(--green-d); background: var(--green-s); border-radius: .5em; padding: .45em .7em; width: fit-content; }

/* attendance & payroll */
.fa-staff { flex-direction: row; gap: .8em; align-items: center; }
.fa-staff .sf-machine { position: relative; flex: 1; background: var(--navy); border-radius: .8em; padding: .7em .6em 1.4em; color: #fff; }
.fa-staff .sf-screen { background: #123a5c; border-radius: .45em; padding: .5em; text-align: center; animation: nf-in2 var(--d) infinite; }
.fa-staff .sf-screen b { display: block; font-size: .8em; color: #7ff0bf; } .fa-staff .sf-screen span { display: block; font-size: .46em; opacity: .85; }
.fa-staff .sf-card { position: absolute; left: 50%; bottom: -.4em; width: 2.6em; height: 1.6em; margin-left: -1.3em; border-radius: .25em; background: linear-gradient(135deg, #fff, #dde4ec); box-shadow: 0 .2em .5em rgba(0, 0, 0, .3); animation: sf-tap var(--d) infinite; }
@keyframes sf-tap { 0%, 6% { transform: translateY(1.6em); } 18%, 28% { transform: translateY(0); } 40%, 100% { transform: translateY(1.6em); } }
.fa-staff .sf-rows { flex: 1.2; display: flex; flex-direction: column; gap: .4em; }
.fa-staff .sf-rows div { display: flex; justify-content: space-between; font-size: .56em; padding: .45em .65em; border: 1px solid var(--line); border-radius: .5em; animation: nf-in2 var(--d) infinite; }
.fa-staff .sf-rows div:nth-child(2) { animation-name: nf-in3; }
.fa-staff .sf-rows span { color: var(--muted); }
.fa-staff .sf-pay { background: var(--green-s); border-color: var(--green) !important; animation-name: nf-in4 !important; }
.fa-staff .sf-pay b { color: var(--green-d); }

/* accounts P&L */
.fa-accounts .pl-head { display: flex; justify-content: space-between; margin-bottom: .6em; }
.fa-accounts .pl-head b { font-size: .72em; } .fa-accounts .pl-head span { font-size: .55em; color: var(--muted); }
.fa-accounts .pl-bars { display: flex; gap: 1em; align-items: flex-end; height: 6.5em; padding: 0 .6em; }
.fa-accounts .pl-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.fa-accounts .pl-bars b { width: 100%; border-radius: .35em .35em 0 0; transform-origin: bottom; animation: nf-growy var(--d) cubic-bezier(.2, .7, .2, 1) infinite; }
.fa-accounts .pl-bars span { font-size: .48em; color: var(--muted); margin-top: .3em; }
.fa-accounts .pl-bars > div > b { max-height: calc(100% - 1.2em); }
.fa-accounts .pl-in b { height: 85%; background: var(--green); }
.fa-accounts .pl-out b { height: 52%; background: #f39a9d; animation-delay: .15s; }
.fa-accounts .pl-net b { height: 33%; background: var(--navy); animation-delay: .3s; }
.fa-accounts .pl-approve { margin-top: .8em; display: flex; align-items: center; gap: .5em; font-size: .52em; font-weight: 600; color: #8a5a00; background: var(--amber-s); padding: .5em .8em; border-radius: .5em; animation: nf-in4 var(--d) infinite; }
.fa-accounts .pl-approve i { width: .85em; height: .7em; background: var(--amber); border-radius: .12em; position: relative; margin-top: .3em; }
.fa-accounts .pl-approve i::before { content: ""; position: absolute; left: .15em; top: -.4em; width: .55em; height: .5em; border: .12em solid var(--amber); border-bottom: 0; border-radius: .3em .3em 0 0; }

/* CEO + Telegram */
.fa-ceo .ce-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; margin-bottom: .7em; }
.fa-ceo .ce-tiles div { background: var(--navy); color: #fff; border-radius: .55em; padding: .5em .55em; }
.fa-ceo .ce-tiles span { display: block; font-size: .46em; opacity: .75; } .fa-ceo .ce-tiles b { display: block; font-size: .78em; }
.fa-ceo .ce-tg { border: 1px solid #cfe6f7; background: #f2f9ff; border-radius: .7em; padding: .55em .7em; animation: nf-in2 var(--d) infinite; }
.fa-ceo .ce-tg-h { display: flex; align-items: center; gap: .45em; margin-bottom: .35em; font-size: .52em; }
.fa-ceo .ce-tg-h i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #29a9eb; position: relative; }
.fa-ceo .ce-tg-h i::after { content: ""; position: absolute; left: .3em; top: .35em; border-left: .7em solid #fff; border-top: .3em solid transparent; border-bottom: .3em solid transparent; }
.fa-ceo .ce-tg-h span { margin-left: auto; color: var(--muted); }
.fa-ceo .ce-line { font-size: .52em; padding: .15em 0; animation: nf-in3 var(--d) infinite; }
.fa-ceo .ce-red { color: var(--red); font-weight: 600; animation-name: nf-in4; }

/* pixel + CAPI */
.fa-capi { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: .6em 1.6em; align-content: center; }
.fa-capi .cp-node { position: relative; z-index: 1; text-align: center; font-size: .6em; font-weight: 700; padding: .7em .4em; border-radius: .6em; border: 1px solid var(--line); background: #fff; box-shadow: 0 .2em .6em rgba(12, 32, 52, .07); }
.fa-capi .cp-node small { display: block; font-size: .8em; font-weight: 500; color: var(--muted); }
.fa-capi .cp-br { grid-column: 1; grid-row: 1; } .fa-capi .cp-sv { grid-column: 1; grid-row: 2; background: var(--navy); color: #fff; } .fa-capi .cp-sv small { color: #a9bdd0; }
.fa-capi .cp-fb { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; background: #1877f2; color: #fff; border: 0; } .fa-capi .cp-fb small { color: #d3e4fd; }
.fa-capi .cp-dot { position: absolute; width: .6em; height: .6em; border-radius: 50%; background: var(--green); left: 44%; z-index: 2; opacity: 0; animation: cp-fly var(--d) infinite; }
.fa-capi .cp-d1 { top: 28%; } .fa-capi .cp-d2 { top: 50%; animation-delay: .5s; }
@keyframes cp-fly { 0%, 10% { opacity: 0; transform: translateX(-1.5em); } 15% { opacity: 1; } 40% { opacity: 1; transform: translateX(1.8em); } 45%, 100% { opacity: 0; transform: translateX(1.8em); } }
.fa-capi .cp-ev { grid-column: 1 / span 2; grid-row: 3; justify-self: center; display: flex; align-items: center; font-size: .56em; font-weight: 700; color: var(--green-d); background: var(--green-s); padding: .45em .9em; border-radius: 99px; animation: nf-in3 var(--d) infinite; }

/* marketing */
.fa-mkt { align-items: center; text-align: center; }
.fa-mkt .mk-offer { background: linear-gradient(120deg, #13875e, #2fc28a); color: #fff; border-radius: .7em; padding: .65em 1.4em; margin-bottom: .8em; }
.fa-mkt .mk-offer b { display: block; font-size: .78em; } .fa-mkt .mk-offer span { display: block; font-size: .52em; opacity: .9; }
.fa-mkt .mk-ch { display: flex; gap: .45em; margin-bottom: .8em; }
.fa-mkt .mk-ch span { font-size: .54em; font-weight: 700; padding: .45em .85em; border-radius: 99px; color: #fff; animation: nf-in1 var(--d) infinite; }
.fa-mkt .mk-sms { background: var(--navy); } .fa-mkt .mk-wa { background: #25d366; animation-name: nf-in2 !important; } .fa-mkt .mk-em { background: #e8a317; animation-name: nf-in3 !important; }
.fa-mkt .mk-count b { display: block; font-size: 1.2em; color: var(--ink); animation: nf-in4 var(--d) infinite; } .fa-mkt .mk-count span { font-size: .52em; color: var(--muted); }

/* youtube */
.fa-yt .yt-vid { display: flex; gap: .6em; align-items: center; margin-bottom: .6em; }
.fa-yt .yt-vid i { width: 4.2em; height: 2.6em; border-radius: .45em; background: linear-gradient(135deg, #2b2f36, #565c66); position: relative; flex: none; }
.fa-yt .yt-vid i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.05em; margin: -.52em 0 0 -.75em; border-radius: .3em; background: #ff0000; }
.fa-yt .yt-vid div { flex: 1; }
.fa-yt .yt-c { display: flex; gap: .55em; align-items: center; padding: .5em .6em; border: 1px solid var(--line); border-radius: .6em; margin-bottom: .45em; animation: nf-in1 var(--d) infinite; }
.fa-yt .yt-c + .yt-c { animation-name: nf-in2; }
.fa-yt .yt-c em { font-style: normal; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: .6em; font-weight: 700; flex: none; }
.fa-yt .yt-c > div { flex: 1; min-width: 0; }
.fa-yt .yt-c b { display: block; font-size: .52em; } .fa-yt .yt-c s { display: block; text-decoration: none; font-size: .5em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-yt .yt-rep { font-size: .46em; font-weight: 700; color: var(--green-d); background: var(--green-s); padding: .3em .6em; border-radius: 99px; animation: nf-in3 var(--d) infinite; }
.fa-yt .yt-rep2 { animation-name: nf-in4; }

/* languages */
.fa-lang { align-items: center; }
.fa-lang .lg-switch { position: relative; display: flex; background: var(--soft); border-radius: 99px; padding: .2em; font-size: .58em; font-weight: 700; margin-bottom: .8em; }
.fa-lang .lg-switch span { position: relative; z-index: 1; padding: .4em 1.1em; }
.fa-lang .lg-en { animation: lg-on2 var(--d) infinite; } .fa-lang .lg-bn { color: #fff; animation: lg-on var(--d) infinite; }
.fa-lang .lg-knob { position: absolute; top: .2em; bottom: .2em; left: 50%; width: 50%; border-radius: 99px; background: var(--green-d); animation: lg-knob var(--d) cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes lg-knob { 0%, 40% { left: .2em; } 50%, 90% { left: 50%; } 100% { left: .2em; } }
@keyframes lg-on { 0%, 40% { color: var(--ink); } 50%, 90% { color: #fff; } 100% { color: var(--ink); } }
@keyframes lg-on2 { 0%, 40% { color: #fff; } 50%, 90% { color: var(--ink); } 100% { color: #fff; } }
.fa-lang .lg-page { position: relative; width: 82%; height: 4.6em; border: 1px solid var(--line); border-radius: .7em; }
.fa-lang .lg-txt { position: absolute; inset: 0; padding: .7em .8em; }
.fa-lang .lg-a { opacity: 0; animation: lg-a var(--d) infinite; } .fa-lang .lg-b { animation: lg-b var(--d) infinite; }
@keyframes lg-a { 0%, 40% { opacity: 1; } 47%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lg-b { 0%, 43% { opacity: 0; } 50%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.fa-lang .lg-btn { display: inline-block; margin-top: .4em; font-size: .5em; font-weight: 700; color: #fff; background: var(--navy); padding: .35em .8em; border-radius: .4em; }
.fa-lang .lg-btn2 { background: var(--green-d); }
.fa-lang .lg-note { margin-top: .7em; font-size: .52em; color: var(--muted); }

/* own domain + SSL */
.fa-domain .dm-bar { display: flex; align-items: center; gap: .5em; background: var(--soft); border-radius: 99px; padding: .5em .9em; margin-bottom: .9em; font-size: .7em; }
.fa-domain .dm-lock { width: .75em; height: .6em; background: var(--green); border-radius: .1em; position: relative; margin-top: .25em; animation: nf-in3 var(--d) infinite; }
.fa-domain .dm-lock::before { content: ""; position: absolute; left: .12em; top: -.38em; width: .5em; height: .45em; border: .1em solid var(--green); border-bottom: 0; border-radius: .3em .3em 0 0; }
.fa-domain .dm-url { font-weight: 600; overflow: hidden; white-space: nowrap; border-right: .1em solid var(--ink); width: 7.6em; animation: dm-type var(--d) steps(12) infinite; }
@keyframes dm-type { 0%, 5% { width: 0; } 28%, 92% { width: 7.6em; } 100% { width: 0; } }
.fa-domain .dm-s { display: flex; align-items: center; font-size: .6em; font-weight: 600; padding: .5em .7em; border: 1px solid var(--line); border-radius: .55em; margin-bottom: .4em; }
.fa-domain .dm-s1 { animation: nf-in2 var(--d) infinite; } .fa-domain .dm-s2 { animation: nf-in3 var(--d) infinite; }
.fa-domain .dm-s3 { animation: nf-in4 var(--d) infinite; background: var(--green-s); border-color: var(--green); color: var(--green-d); }

/* learning hub */
.fa-learn .ln-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.fa-learn .ln-head b { font-size: .72em; }
.fa-learn .ln-print { font-size: .5em; font-weight: 700; border: 1px solid var(--navy); border-radius: .4em; padding: .3em .8em; animation: nf-in4 var(--d) infinite; }
.fa-learn .ln-step { display: flex; align-items: center; gap: .6em; padding: .35em .5em; border-radius: .5em; background: var(--soft); margin-bottom: .4em; }
.fa-learn .ln-step em { font-style: normal; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--green); color: #fff; font-size: .58em; font-weight: 700; display: grid; place-items: center; flex: none; }
.fa-learn .ln-step .fa-sk { margin: 0; }
.fa-learn .ln-1 { animation: nf-in1 var(--d) infinite; } .fa-learn .ln-2 { animation: nf-in2 var(--d) infinite; } .fa-learn .ln-3 { animation: nf-in3 var(--d) infinite; }
.fa-learn .ln-jobs { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .4em; }
.fa-learn .ln-jobs span { font-size: .48em; padding: .25em .7em; border-radius: 99px; background: #eef1ff; color: #3b4fb8; font-weight: 600; }

/* free trial + Google */
.fa-trial { align-items: center; background: linear-gradient(160deg, #f6f8fb, #fff); }
.fa-trial .tr-card { position: relative; width: 84%; height: 2.6em; margin-bottom: .9em; }
.fa-trial .tr-g, .fa-trial .tr-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em; border-radius: .6em; font-size: .66em; font-weight: 700; }
.fa-trial .tr-g { background: #fff; border: 1px solid #d5dbe3; opacity: 0; animation: tr-g var(--d) infinite; }
.fa-trial .tr-logo { width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .9em; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.fa-trial .tr-ok { background: var(--green-s); border: 1px solid var(--green); color: var(--green-d); animation: tr-ok var(--d) infinite; }
@keyframes tr-g { 0%, 38% { opacity: 1; transform: none; } 34% { transform: scale(.96); } 44%, 100% { opacity: 0; } }
@keyframes tr-ok { 0%, 40% { opacity: 0; transform: scale(.9); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fa-trial .tr-days { width: 84%; font-size: .56em; }
.fa-trial .tr-days span { font-weight: 700; }
.fa-trial .tr-bar { height: .7em; border-radius: 99px; background: var(--soft); margin: .4em 0; overflow: hidden; }
.fa-trial .tr-bar b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), #7fe0b6); transform-origin: left; animation: nf-grow var(--d) infinite; animation-delay: .4s; }
.fa-trial .tr-days em { font-style: normal; color: var(--muted); }
.fa-trial .tr-cur { left: 60%; top: 40%; animation: tr-cur var(--d) infinite; }
@keyframes tr-cur { 0% { transform: translate(3em, 3em); opacity: 0; } 12% { opacity: 1; } 30%, 36% { transform: translate(0, 0); opacity: 1; } 34% { transform: translate(0, 0) scale(.85); } 46%, 100% { transform: translate(0, 0); opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
    .fa *,
    .fa *::before,
    .fa *::after {
        animation: none !important;
    }
    .fa-recover .rc-inc,
    .fa-stock .sk-alert,
    .fa-checkout .co-done,
    .fa-pay .py-ok,
    .fa-mail .ml-env,
    .fa-fraud .fr-scan,
    .fa-coupon .cp-t1,
    .fa-chat .ch-typing,
    .fa-mail .ml-sent,
    .fa-aichat .ac-typing,
    .fa-trial .tr-g,
    .fa-trial .tr-cur,
    .fa-capi .cp-dot {
        display: none;
    }
}