/* Clarity showcase (homepage + /client-dashboard/). Own tokens so it works on any page. */
.cl{--cl-bg:transparent;--cl-card:#FFFFFF;--cl-card2:#F6F8FB;--cl-ink:#0B1220;--cl-body:#3F5378;--cl-dim:#5B6B82;--cl-line:#E3E9F1;--cl-acc:#19728A;
  --cl-grad:linear-gradient(135deg,#283850 0%,#19728A 55%,#34A3BC 100%);--cl-glow:rgba(52,163,188,.16)}
html[data-theme="dark"] .cl,html:not([data-theme="light"]) .cl.cl-darkdefault{--cl-card:#111C2F;--cl-card2:#0E1728;--cl-ink:#EEF1F6;--cl-body:#C4D0DD;--cl-dim:#9AA8BC;--cl-line:rgba(238,241,246,.09);--cl-acc:#6ACDE0;--cl-glow:rgba(106,205,224,.12)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .cl{--cl-card:#111C2F;--cl-card2:#0E1728;--cl-ink:#EEF1F6;--cl-body:#C4D0DD;--cl-dim:#9AA8BC;--cl-line:rgba(238,241,246,.09);--cl-acc:#6ACDE0;--cl-glow:rgba(106,205,224,.12)}}
.cl{color:var(--cl-body)}
.cl *{box-sizing:border-box}

/* section head (homepage) */
.cl-sec{padding:100px 0;position:relative;overflow:hidden}
.cl-sec::before{content:"";position:absolute;width:720px;height:720px;left:50%;top:-260px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--cl-glow),transparent);pointer-events:none}
.cl-sec>.ms-container{position:relative}
.cl-head{text-align:center;max-width:760px;margin:0 auto 40px}
.cl-kick{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:999px;background:var(--cl-card);border:1px solid var(--cl-line);font:600 13px/1.2 "Outfit",sans-serif;color:var(--cl-ink)}
.cl-kick i{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;font-style:normal;color:#fff;background:var(--cl-grad);padding:5px 8px;border-radius:999px}
.cl-head h2{font-family:"Sora",sans-serif;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:var(--cl-ink);margin:18px 0 14px;text-wrap:balance}
.cl-head h2 em{font-style:normal;background-image:var(--cl-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="dark"] .cl-head h2 em,html:not([data-theme="light"]) .cl-darkdefault .cl-head h2 em{background-image:linear-gradient(100deg,#EEF1F6,#6ACDE0);-webkit-background-clip:text;background-clip:text}
.cl-head p{font-size:1.06rem;line-height:1.7;color:var(--cl-body);margin:0 auto;max-width:640px}

/* video */
.cl-video{margin:0 auto;max-width:1040px}
.cl-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B1B3F;border:1px solid var(--cl-line);box-shadow:0 40px 90px -40px rgba(11,18,32,.55),0 0 0 6px var(--cl-card2)}
.cl-frame video,.cl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.cl-play{all:unset;position:absolute;inset:0;display:block;cursor:pointer}
.cl-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cl-play:hover img{transform:scale(1.02)}
.cl-btn{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--cl-grad);box-shadow:0 18px 44px -10px rgba(25,114,138,.75),0 0 0 10px rgba(255,255,255,.14);transition:transform .25s}
.cl-btn svg{width:32px;height:32px;margin-left:4px}
.cl-play:hover .cl-btn{transform:scale(1.07)}
.cl-play:focus-visible .cl-btn{outline:3px solid #6ACDE0;outline-offset:4px}
.cl-dur{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(11,18,32,.72);color:#fff;font:600 12.5px/1 "Outfit",sans-serif;backdrop-filter:blur(6px)}
.cl-dur svg{width:14px;height:14px}
.cl-video figcaption{text-align:center;font-size:13px;color:var(--cl-dim);margin-top:14px}

/* facts strip */
.cl-facts{list-style:none;margin:34px auto 0;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cl-facts li{display:flex;align-items:center;gap:12px;background:var(--cl-card);border:1px solid var(--cl-line);border-radius:16px;padding:14px 16px}
.cl-facts svg{width:22px;height:22px;color:var(--fc,var(--cl-acc));flex:0 0 auto}
.cl-facts span{font-size:13.5px;line-height:1.35;color:var(--cl-dim)}
.cl-facts b{display:block;font:700 15.5px/1.2 "Sora",sans-serif;color:var(--cl-ink)}

/* feature groups */
.cl-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
.cl-group{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:22px;padding:24px 22px;position:relative;overflow:hidden}
.cl-group::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cl-grad)}
.cl-group.cl-act{grid-column:1/-1}
.cl-group.cl-act .cl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 26px}
@media (max-width:980px){.cl-group.cl-act .cl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cl-gname{font:700 11px/1 "JetBrains Mono",monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-acc)!important;margin:0 0 16px!important}
.cl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.cl-list li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start}
.cl-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--cl-grad);box-shadow:0 10px 22px -12px rgba(25,114,138,.7)}
.cl-ic svg{width:20px;height:20px;color:#fff;stroke:#fff}
.cl-list b{display:block;font:600 16px/1.3 "Sora",sans-serif;color:var(--cl-ink);margin-bottom:4px}
.cl-list li>div>span{display:block;font-size:14.5px;line-height:1.55;color:var(--cl-body)}
.cl-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cl-link{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 "Sora",sans-serif;color:var(--cl-acc)!important;text-decoration:none;padding:16px 8px}
.cl-link:hover{text-decoration:underline}

/* ===== Interactive tour (v2) ===== */
.clx{margin-top:64px;--ease:cubic-bezier(.2,.8,.2,1)}
.clx-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;scrollbar-width:none}
.clx-tabs::-webkit-scrollbar{display:none}
.clx-tab{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--cl-card);border:1px solid var(--cl-line);cursor:pointer;overflow:hidden;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s}
.clx-tab:hover{transform:translateY(-2px)}
.clx-tab:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
.clx-tab.is-on{border-color:color-mix(in srgb,var(--c1) 55%,transparent);background:color-mix(in srgb,var(--c1) 9%,var(--cl-card));box-shadow:0 18px 34px -22px var(--c1)}
.clx-ti{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px -10px var(--c1)}
.clx-ti svg{width:18px;height:18px;stroke:#fff;color:#fff}
.clx-tab:not(.is-on) .clx-ti{filter:saturate(.75)}
.clx-tl{min-width:0}
.clx-tl b{display:block;font:700 14.5px/1.2 "Sora",sans-serif;color:var(--cl-ink);white-space:nowrap}
.clx-tl small{display:block;font:500 12px/1.3 "Outfit",sans-serif;color:var(--cl-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clx-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--c1),var(--c2))}
.clx-tab.is-on .clx-prog{width:100%}
.clx.is-run .clx-tab.is-on .clx-prog{animation:clxProg 8s linear forwards}
.clx.is-paused .clx-tab.is-on .clx-prog{animation-play-state:paused}

.clx-panel{display:none;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:center;margin-top:18px;padding:44px 48px 52px;border-radius:28px;background:var(--cl-card);border:1px solid var(--cl-line);position:relative;overflow:hidden;isolation:isolate}
.clx-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--c1) 16%,transparent),transparent 70%),radial-gradient(40% 50% at 10% 100%,color-mix(in srgb,var(--c2) 10%,transparent),transparent 70%)}
.clx-panel.is-on{display:grid;animation:clxIn .55s var(--ease)}
.clx-eye{display:inline-flex;align-items:center;gap:10px;font:700 11.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-ink)}
.clx-eye .clx-ti{width:30px;height:30px;border-radius:9px}
.clx-eye .clx-ti svg{width:15px;height:15px}
.clx-copy h3{font:800 clamp(1.6rem,2.6vw,2.15rem)/1.12 "Sora",sans-serif;letter-spacing:-.025em;color:var(--cl-ink);margin:18px 0 12px;text-wrap:balance}
.clx-copy>p{font-size:16px;line-height:1.6;color:var(--cl-body);margin:0 0 22px}
.clx-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.clx-feats li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;animation:clxRow .5s var(--ease) backwards}
.clx-feats li:nth-child(2){animation-delay:.08s}.clx-feats li:nth-child(3){animation-delay:.16s}
.clx-fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 15%,transparent);border:1px solid color-mix(in srgb,var(--c1) 30%,transparent)}
.clx-fi svg{width:17px;height:17px;stroke:var(--c1)}
.clx-feats li>span:last-child{font-size:14.5px;line-height:1.5;color:var(--cl-body)}
.clx-feats b{display:block;font:600 15.5px/1.3 "Sora",sans-serif;color:var(--cl-ink);margin-bottom:2px}

.clx-stage{position:relative;perspective:1400px;margin:10px 18px 10px 0}
.clx-glow{position:absolute;inset:8% 4%;z-index:0;border-radius:40%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 50%,transparent),transparent);filter:blur(34px);opacity:.75;animation:clxGlow 7s ease-in-out infinite}
.clx-screen{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#0B1220;border:1px solid rgba(255,255,255,.1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .35s var(--ease);box-shadow:0 44px 80px -42px rgba(6,10,20,.85),0 0 0 6px color-mix(in srgb,var(--c1) 14%,transparent)}
.clx-chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#0E1626;border-bottom:1px solid rgba(255,255,255,.06)}
.clx-chrome i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.clx-chrome i:nth-child(2){background:#FEBC2E}.clx-chrome i:nth-child(3){background:#28C840}
.clx-chrome span{margin-left:10px;font:500 11px/1 "JetBrains Mono",monospace;color:#8A9BB4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clx-screen img{display:block;width:100%;height:auto}
.clx-screen--card{max-width:540px;margin-left:auto;background:var(--cl-card)}
.clx-dk{display:none!important}
html[data-theme="dark"] .clx .clx-dk,html:not([data-theme="light"]) .cl-darkdefault .clx-dk{display:block!important}
html[data-theme="dark"] .clx .clx-lt,html:not([data-theme="light"]) .cl-darkdefault .clx-lt{display:none!important}
@media (prefers-color-scheme:dark){html:not([data-theme]) .clx .clx-dk{display:block!important}html:not([data-theme]) .clx .clx-lt{display:none!important}}

/* floating cards */
.clx-float{position:absolute;z-index:3;background:var(--cl-card);border:1px solid var(--cl-line);border-radius:16px;padding:12px 14px;font-size:13px;color:var(--cl-body);box-shadow:0 26px 50px -24px rgba(6,10,20,.6),0 0 0 1px rgba(255,255,255,.02);animation:clxPop .6s var(--ease) .25s backwards,clxBob 6s ease-in-out 1s infinite}
.clx-fa{left:-34px;bottom:-30px;width:270px}
.clx-fb{right:-22px;top:-26px;animation-delay:.45s,1.8s}
.clx-fh{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 10.5px/1.2 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--cl-dim);margin-bottom:6px}
.clx-fh svg{width:14px;height:14px;stroke:var(--c1)}
.clx-sample{margin-left:auto;font:600 9px/1 "JetBrains Mono",monospace;letter-spacing:.06em;padding:4px 6px;border-radius:6px;background:var(--cl-card2);color:var(--cl-dim);text-transform:uppercase}
.clx-live{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:clxPing 1.6s infinite}
.clx-float b{color:var(--cl-ink)}
.clx-float em{font:700 11.5px/1 "JetBrains Mono",monospace;font-style:normal;padding:4px 6px;border-radius:6px;color:#16A34A;background:rgba(34,197,94,.13);display:inline-block}
.clx-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--cl-line);animation:clxRow .5s var(--ease) var(--d) backwards}
.clx-ri{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--rc)}
.clx-ri svg{width:15px;height:15px;stroke:#fff}
.clx-row b{display:block;font:600 13px/1.25 "Sora",sans-serif}
.clx-row small{display:block;font-size:11.5px;color:var(--cl-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.clx-call{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px}
.clx-pl{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2))}
.clx-pl svg{width:12px;height:12px;margin-left:2px;color:#fff}
.clx-wave{display:flex;align-items:center;gap:2px;height:26px}
.clx-wave i{width:3px;height:30%;border-radius:2px;background:linear-gradient(var(--c1),var(--c2));animation:clxWave 1.1s ease-in-out infinite}
.clx-wave i:nth-child(3n){animation-delay:-.3s;height:70%}.clx-wave i:nth-child(3n+1){animation-delay:-.6s;height:45%}.clx-wave i:nth-child(4n){animation-delay:-.85s;height:90%}
.clx-call b{font:600 12px/1 "JetBrains Mono",monospace}
.clx-bars{width:270px}
.clx-bar{margin-top:9px;font-size:12.5px;color:var(--cl-ink)}
.clx-bar span{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-weight:600}
.clx-bar span svg{width:14px;height:14px;stroke:var(--bc)}
.clx-bar i{display:block;height:7px;border-radius:99px;background:var(--cl-card2);overflow:hidden}
.clx-bar i::after{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--bc);transform-origin:left;animation:clxGrow 1s var(--ease) var(--d) backwards}
.clx-kpi{padding:14px 16px}
.clx-kpi small,.clx-kpis small{display:block;font-size:11.5px;color:var(--cl-dim);margin-bottom:2px}
.clx-kpi b,.clx-kpis b{display:block;font:800 24px/1.1 "Sora",sans-serif;margin-bottom:6px;font-variant-numeric:tabular-nums}
.clx-gbp{display:flex;align-items:center;gap:12px;width:290px}
.clx-gi{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2))}
.clx-gi svg{width:20px;height:20px;stroke:#fff}
.clx-gi img{width:26px;height:26px;background:#fff;border-radius:6px;padding:2px}
.clx-gbp b,.clx-push b{display:block;font:600 13.5px/1.25 "Sora",sans-serif}
.clx-gbp small,.clx-push small{display:block;font-size:12px;color:var(--cl-dim);margin-top:2px}
.clx-review{width:236px}
.clx-stars{color:#FBBC04;letter-spacing:2px;font-size:15px}
.clx-review p{margin:4px 0 9px;font-size:13px;color:var(--cl-ink)}
.clx-reply{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:color-mix(in srgb,var(--c1) 15%,transparent);font:600 12px/1 "Outfit",sans-serif;color:var(--cl-ink);margin-bottom:8px}
.clx-reply svg{width:14px;height:14px;stroke:var(--c1)}
.clx-review .clx-sample{display:inline-block;margin:0 0 0 6px}
.clx-ai{width:262px}
.clx-big{font:800 32px/1 "Sora",sans-serif;margin-right:8px;vertical-align:middle}
.clx-eng{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.clx-eng span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:var(--cl-card2);border:1px solid var(--cl-line);font:600 12px/1 "Outfit",sans-serif;color:var(--cl-ink);animation:clxPop .45s var(--ease) var(--d) backwards}
.clx-eng svg{width:12px;height:12px;stroke:var(--c1)}
.clx-shotcard{padding:0;width:200px;overflow:hidden;background:#fff}
.clx-shotcard img,.clx-phone img{display:block;width:100%;height:auto}
.clx-chat{width:280px}
.clx-q{margin:4px 0 8px auto;max-width:88%;padding:8px 11px;border-radius:12px 12px 4px 12px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:12.5px;width:max-content;animation:clxRow .45s var(--ease) .35s backwards}
.clx-a{margin:0 0 9px;padding:8px 11px;border-radius:12px 12px 12px 4px;background:var(--cl-card2);border:1px solid var(--cl-line);font-size:12.5px;line-height:1.45;color:var(--cl-body);animation:clxRow .45s var(--ease) .75s backwards}
.clx-named{display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 "Outfit",sans-serif;color:#16A34A;background:rgba(34,197,94,.13);padding:5px 9px;border-radius:99px;animation:clxPop .45s var(--ease) 1.1s backwards}
.clx-named svg{width:12px;height:12px;stroke:#16A34A}
.clx-kpis{display:flex;flex-wrap:wrap;gap:6px 22px;width:auto;max-width:330px}
.clx-kpis .clx-sample{flex-basis:100%;margin:2px 0 0;width:max-content}
.clx-jobs{width:244px}
.clx-jobs p{margin:2px 0 10px;font-size:13px}
.clx-yn{display:flex;gap:8px}
.clx-yn span{flex:1;text-align:center;padding:8px;border-radius:10px;border:1px solid var(--cl-line);font:600 12.5px/1 "Outfit",sans-serif;color:var(--cl-ink)}
.clx-yn .y{background:linear-gradient(135deg,var(--c1),var(--c2));border-color:transparent;color:#fff}
.clx-push{display:flex;align-items:center;gap:12px;width:300px;top:-28px;bottom:auto;left:-30px}
.clx-pi{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2))}
.clx-pi svg{width:18px;height:18px;stroke:#fff;animation:clxRing 2.4s ease-in-out infinite}
.clx-push em{margin-left:auto;background:none;color:var(--cl-dim);padding:0;align-self:flex-start}
.clx-phone{padding:6px;width:150px;border-radius:26px;background:#0B1220;border-color:rgba(255,255,255,.12);top:auto;bottom:-46px;right:-16px}
.clx-phone img{border-radius:20px}

/* extras */
.clx-more,.clx-src{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;margin-top:30px}
.clx-mh{font:700 11px/1.3 "JetBrains Mono",monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-dim)!important;margin:0!important}
.clx-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.clx-more li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:99px;background:var(--cl-card);border:1px solid var(--cl-line);font:600 13.5px/1 "Outfit",sans-serif;color:var(--cl-ink);transition:transform .25s var(--ease),border-color .25s}
.clx-more li:hover{transform:translateY(-2px);border-color:var(--mc)}
.clx-more li>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mc)}
.clx-more li svg{width:14px;height:14px;stroke:#fff}
.clx-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clx-track,.clx-dup{display:flex;gap:10px}
.clx-track{width:max-content;animation:clxMarq 46s linear infinite}
.clx-marq:hover .clx-track{animation-play-state:paused}
.clx-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:12px;background:var(--cl-card);border:1px solid var(--cl-line);font:600 13.5px/1 "Outfit",sans-serif;color:var(--cl-ink);white-space:nowrap}
.clx-chip i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 17%,transparent)}
.clx-chip svg{width:15px;height:15px;stroke:var(--sc)}
.clx-chip img{width:18px;height:18px}
html[data-theme="dark"] .clx-chip img[src*="chatgpt"],html:not([data-theme="light"]) .cl-darkdefault .clx-chip img[src*="chatgpt"]{filter:invert(1)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .clx-chip img[src*="chatgpt"]{filter:invert(1)}}

@keyframes clxProg{from{width:0}to{width:100%}}
@keyframes clxIn{from{opacity:0;transform:translateY(10px)}}
@keyframes clxRow{from{opacity:0;transform:translateY(8px)}}
@keyframes clxPop{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes clxBob{50%{translate:0 -7px}}
@keyframes clxGlow{50%{opacity:.5;transform:scale(1.06)}}
@keyframes clxPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
@keyframes clxWave{50%{transform:scaleY(.35)}}
@keyframes clxGrow{from{transform:scaleX(0)}}
@keyframes clxRing{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@keyframes clxMarq{to{transform:translateX(calc(-50% - 5px))}}

@media (max-width:1180px){.clx-tl small{display:none}.clx-panel{gap:40px;padding:36px}}
@media (max-width:980px){
 .clx-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 6px}
 .clx-tab{flex:0 0 auto;scroll-snap-align:start}
 .clx-tl small{display:block}
 .clx-panel{grid-template-columns:minmax(0,1fr);gap:34px;padding:28px 22px 56px}
 .clx-stage{margin:20px 14px 0}
 .clx-screen--card{margin:0 auto}
}
@media (max-width:560px){
 .clx-tab{padding:10px}.clx-tl small{display:none}
 .clx-float{font-size:12px;padding:10px 12px}
 .clx-fa{left:-14px;bottom:-40px;width:228px}
 .clx-fb{right:-12px;top:-22px}
 .clx-push{left:-12px;top:-30px;bottom:auto;width:250px}
 .clx-phone{top:auto!important;bottom:-48px}
 .clx-feed .clx-row:nth-child(4){display:none}
 .clx-panel{padding-bottom:84px}
 .clx-stage{margin-top:34px}
 .clx-chat{width:220px}.clx-a{display:none}
 .clx-shotcard{width:120px}.clx-phone{width:96px;border-radius:18px;padding:4px;bottom:-48px}.clx-phone img{border-radius:14px}
 .clx-gbp{width:236px}.clx-review{width:190px}.clx-bars{width:210px}.clx-ai{width:214px}.clx-jobs{width:200px}
 .clx-kpi b,.clx-kpis b{font-size:20px}.clx-big{font-size:26px}
 .clx-more,.clx-src{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media (prefers-reduced-motion:reduce){
 .clx *,.clx *::before,.clx *::after{animation:none!important;transition:none!important}
 .clx-track{flex-wrap:wrap;width:auto}.clx-dup{display:none}.clx-marq{-webkit-mask-image:none;mask-image:none}
}

@media (max-width:1024px){.cl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cl-sec{padding:72px 0}.cl-groups{grid-template-columns:minmax(0,1fr);margin-top:40px}.cl-btn{width:68px;height:68px;margin:-34px 0 0 -34px}.cl-btn svg{width:26px;height:26px}.cl-frame{border-radius:14px;box-shadow:0 24px 50px -30px rgba(11,18,32,.55)}.cl-facts li{padding:12px}.cl-group.cl-act .cl-list{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cl-play img,.cl-btn{transition:none}}