.cfd .eg-sr {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cfd main section {position:relative;padding:clamp(56px,8vw,120px) 20px;overflow-wrap:anywhere}
@media (min-width:720px) {.cfd main section {padding-left:32px;padding-right:32px}}
.cfd .eg-wrap {max-width:var(--cf-max-width);margin:0 auto;position:relative}
.cfd main p, .cfd main li {font-size:17px;line-height:1.6}
.cfd main h2 {font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--cf-color-primary-900);margin:0 0 var(--cf-space-4)}
.cfd main h3 {font-weight:600;letter-spacing:-.01em;color:var(--cf-color-primary-900)}
.cfd .eg-head {max-width:68ch;margin-bottom:var(--cf-space-10)}
.cfd .eg-head .cf-lead {color:var(--cf-color-text-secondary);margin:0}
.cfd .eg-white {background:var(--cf-color-background-page)}
.cfd .eg-blue {background:var(--cf-color-background-blue)}
.cfd .eg-navy {background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse)}
.cfd .eg-navy h2, .cfd .eg-navy h3 {color:var(--cf-color-text-inverse)}
.cfd .eg-navy p, .cfd .eg-navy li {color:var(--cf-color-primary-100)}
.cfd .eg-navy a:not(:where(.cf-btn)):not(.cf-btn) {color:var(--cf-color-text-inverse)}
.cfd .cf-actions .cf-btn {width:100%;justify-content:center;text-align:center}
@media (min-width:720px) {.cfd .cf-actions .cf-btn {width:auto}}
.cfd main code {font-family: var(--cf-font);font-size:.95em}
.cfd .eg-card {background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-large);box-shadow:var(--cf-shadow-small);transition:transform .25s ease,box-shadow .25s ease;min-width:0}
.cfd .eg-card:hover {transform:translateY(-3px);box-shadow:var(--cf-shadow-medium)}
.cfd .eg-tile {display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:var(--cf-radius-medium);background:var(--cf-color-primary-100);color:var(--cf-color-primary-700)}
.cfd .eg-tile i {width:22px;height:22px}
.cfd cite {font-style:normal;font-size:14px}
.cfd cite a:not(:where(.cf-btn)) {color:var(--cf-color-link)}
.cfd .eg-hero {min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;z-index:2}
.cfd .eg-hero .eg-hwrap {max-width:1320px;margin:0 auto;width:100%;position:relative}
.cfd .eg-hero h1 {font-size:clamp(34px,4.4vw,54px);line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--cf-color-text-inverse);margin:0 0 var(--cf-space-5)}
.cfd .eg-hero .cf-lead {color:var(--cf-color-primary-100);max-width:40ch;margin:0 0 var(--cf-space-6)}
.cfd .eg-benefits {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-4);margin-top:var(--cf-space-12);position:relative;z-index:3}
.cfd .eg-benefit {padding:var(--cf-space-5) var(--cf-space-6);display:flex;gap:var(--cf-space-4);align-items:flex-start}
.cfd .eg-benefit h3 {font-size:19px;margin:0 0 var(--cf-space-1)}
.cfd .eg-benefit p {margin:0;color:var(--cf-color-text-secondary);font-size:16px}
@media (min-width:720px) {.cfd .eg-benefits {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px) {.cfd .eg-benefits {transform:translateY(50%);margin-top:var(--cf-space-8)}
.cfd .eg-hero {padding-bottom:var(--cf-space-10)}
.cfd .eg-proof {padding-top:calc(clamp(56px,8vw,120px) + 64px)}}
@keyframes egDrop {0%{transform:translateY(-280px);opacity:0}60%{transform:translateY(10px);opacity:1}80%{transform:translateY(-4px)}100%{transform:none;opacity:1}}
.cfd .eg-answer {max-width:68ch;margin-bottom:var(--cf-space-12)}
.cfd .eg-answer p {font-size:20px;line-height:1.6;color:var(--cf-color-text-primary);margin:0}
.cfd .eg-stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--cf-space-8);border-top:1px solid var(--cf-color-border);padding-top:var(--cf-space-8)}
.cfd .eg-stat {min-width:0}
.cfd .eg-stat .n {display:block;font-size:clamp(44px,5vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--cf-color-primary-900)}
.cfd .eg-stat p {margin:var(--cf-space-3) 0 var(--cf-space-1);color:var(--cf-color-text-secondary)}
.cfd .f1 {background:var(--cf-color-primary-100)}
.cfd .f2 {background:var(--cf-color-success-100)}
.cfd .f3 {background:var(--cf-color-accent-100)}
.cfd .cf-nudge {margin-top:var(--cf-space-12)}
.cfd .cf-nudge p {color:var(--cf-color-text-secondary)}
.cfd .eg-navy .cf-nudge p {color:var(--cf-color-primary-100)}
.cfd .eg-launch {border-radius:var(--cf-radius-large);overflow:hidden;border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-medium);background:var(--cf-color-surface)}
.cfd .eg-launch iframe {display:block;width:100%;height:720px;border:0}
.cfd .eg-poster {background:var(--cf-color-primary-900);padding:var(--cf-space-8) var(--cf-space-6);display:grid;gap:var(--cf-space-8);grid-template-columns:minmax(0,1fr)}
.cfd .eg-poster h3 {color:var(--cf-color-text-inverse);font-size:24px;margin:0 0 var(--cf-space-3)}
.cfd .eg-poster p {color:var(--cf-color-primary-100);margin:0 0 var(--cf-space-5)}
.cfd .eg-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-3)}
.cfd .eg-tiles div {aspect-ratio:1;border-radius:var(--cf-radius-medium);display:flex;align-items:flex-end;padding:var(--cf-space-3)}
.cfd .eg-tiles span {font-size:14px;font-weight:700;color:var(--cf-color-primary-900)}
@media (min-width:720px) {.cfd .eg-poster {grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:var(--cf-space-12)}}
.cfd .eg-sgrid {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-10);align-items:start}
.cfd .eg-sgrid ol {padding-left:var(--cf-space-6);margin:0 0 var(--cf-space-6)}
.cfd .eg-sgrid li {margin-bottom:var(--cf-space-3)}
.cfd .eg-code {margin:0;background:var(--cf-color-primary-900);border-radius:var(--cf-radius-large);box-shadow:var(--cf-shadow-large);overflow:hidden;min-width:0}
.cfd .eg-code header {display:flex;align-items:center;gap:var(--cf-space-3);padding:var(--cf-space-3) var(--cf-space-4);border-bottom:1px solid color-mix(in srgb,var(--cf-color-primary-100) 20%,transparent)}
.cfd .eg-code header span {font-size:14px;color:var(--cf-color-primary-100)}
.cfd .eg-code header .lang {font-family: var(--cf-font);margin-left:auto}
.cfd .eg-code button {display:inline-flex;align-items:center;gap:var(--cf-space-2);min-height:36px;padding:0 var(--cf-space-3);border-radius:var(--cf-radius-small);border:1px solid var(--cf-color-primary-100);background:transparent;color:var(--cf-color-text-inverse);font:inherit;font-size:16px;cursor:pointer}
.cfd .eg-code button i {width:18px;height:18px}
.cfd .eg-code button:focus-visible {outline:2px solid var(--cf-color-accent-500);outline-offset:2px}
.cfd .eg-code pre {margin:0;padding:var(--cf-space-5);font-family: var(--cf-font);font-size:16px;line-height:1.6;color:var(--cf-color-text-inverse);white-space:pre-wrap;overflow-wrap:anywhere}
.cfd .eg-code .c {color:var(--cf-color-primary-100);font-style:italic}
.cfd .eg-code .t {color:var(--cf-color-primary-100)}
.cfd .eg-code .a {color:var(--cf-color-accent-500)}
@media (min-width:1080px) {.cfd .eg-sgrid {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--cf-space-16)}}
.cfd .eg-fgrid {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-10);align-items:start}
.cfd .eg-faq {display:grid;gap:var(--cf-space-3)}
.cfd .eg-faq details {background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-medium);padding:var(--cf-space-4) var(--cf-space-5);transition:border-color .2s}
.cfd .eg-faq details[open] {border-color:var(--cf-color-cta)}
.cfd .eg-faq summary {font-weight:600;font-size:18px;color:var(--cf-color-primary-900);cursor:pointer;min-height:24px}
.cfd .eg-faq details div p {margin:var(--cf-space-3) 0 0;color:var(--cf-color-text-secondary)}
@media (min-width:1080px) {.cfd .eg-fgrid {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cf-space-16)}}
.cfd main a:not(:where(.cf-btn)):focus-visible, .cfd main summary:focus-visible {outline:3px solid var(--cf-color-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce) {.cfd .eg-card, .cfd .eg-card:hover {transition:none;transform:none}}
.cfd .pg {position:relative;background:radial-gradient(1200px 520px at 85% -10%,rgba(46,123,246,.16),transparent 60%),radial-gradient(900px 480px at -10% 110%,rgba(0,194,168,.12),transparent 60%),var(--cf-color-primary-050);overflow:hidden}
.cfd .eg-navy .eg-benefit h3 {color:var(--cf-color-primary-900)}
.cfd .eg-dev {background:radial-gradient(900px 500px at 90% 10%,color-mix(in srgb,var(--cf-color-cta) 35%,transparent),transparent 60%),var(--cf-color-primary-900)}
.cfd .eg-dgrid {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-10);align-items:center}
@media (min-width:1000px) {.cfd .eg-dgrid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cf-space-12)}}
.cfd .eg-kicker {display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--cf-space-4);padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cfd .eg-kicker i, .cfd .eg-kicker svg {width:16px;height:16px;display:inline-flex}
.cfd .eg-dev h2 {margin:0 0 var(--cf-space-4)}
.cfd .eg-dev .cf-lead {color:var(--cf-color-primary-100);max-width:52ch}
.cfd .eg-dev .cf-lead strong {color:#fff}
.cfd .eg-dlist {list-style:none;margin:var(--cf-space-6) 0;padding:0;display:grid;gap:var(--cf-space-3)}
.cfd .eg-dlist li {display:flex;gap:var(--cf-space-3);align-items:flex-start;font-size:17px;line-height:1.5}
.cfd .eg-dlist strong {color:#fff}
.cfd .eg-dic {flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#9BE7C4}
.cfd .eg-dic i, .cfd .eg-dic svg {width:18px;height:18px;display:inline-flex}
.cfd .eg-dmock {position:relative;display:grid;gap:var(--cf-space-4)}
.cfd .eg-dcode {border-radius:18px;background:#071530;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.35);overflow:hidden}
.cfd .eg-dbar {display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.cfd .eg-dbar span {width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.cfd .eg-dbar em {margin-left:10px;font-style:normal;font-size:13px;color:var(--cf-color-primary-100)}
.cfd .eg-dcode code {display:block;padding:18px 20px;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#E6EEFF;white-space:pre;overflow-x:auto}
.cfd .eg-dcode .c {color:#7F93B5}
.cfd .eg-dcode .k {color:#FF9DB0}
.cfd .eg-dcode .s {color:#FFD98A}
.cfd .eg-dres {margin-left:auto;width:min(100%,380px);margin-top:-48px;padding:18px 20px;border-radius:18px;background:var(--cf-color-surface);color:var(--cf-color-text-primary);box-shadow:0 26px 60px rgba(0,0,0,.35);position:relative;animation:eg-dfloat 6s ease-in-out infinite}
.cfd .eg-dres-k {display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:14px;font-weight:700;color:var(--cf-color-primary-900)}
.cfd .eg-dres-k span {font-size:12px;font-weight:500;color:var(--cf-color-text-muted)}
.cfd .eg-dnums {display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cfd .eg-dnums p {margin:0;padding:10px;border-radius:12px;background:var(--cf-color-background-blue);text-align:center}
.cfd .eg-dnums b {display:block;font-size:24px;line-height:1.1;color:var(--cf-color-primary-900)}
.cfd .eg-dnums small {font-size:12px;color:var(--cf-color-text-secondary)}
.cfd .eg-dbars {display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:14px;border-bottom:1px solid var(--cf-color-border)}
.cfd .eg-dbars i {flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(var(--cf-color-cta),var(--cf-color-primary-100))}
.cfd .eg-dbars i:last-child {background:linear-gradient(var(--cf-color-accent-500),var(--cf-color-accent-100))}
@keyframes eg-dfloat {0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce) {.cfd .eg-dres {animation:none}}
.cfd .eg-dev .eg-dres p, .cfd .eg-dev .eg-dres .eg-dres-k {color:var(--cf-color-primary-900)}
.cfd .eg-dev .eg-dres .eg-dres-k span, .cfd .eg-dev .eg-dres small {color:var(--cf-color-text-secondary)}
.cfd .eg-stat cite a:not(:where(.cf-btn)), .cfd .eg-help li a:not(:where(.cf-btn)) {display:inline-flex;align-items:center;min-height:24px}
.cfd #top.eg-hero {min-height:0;justify-content:flex-start;padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(56px,7vw,104px);background:radial-gradient(60% 70% at 80% 30%,rgba(46,123,246,.5),transparent 62%),radial-gradient(40% 50% at 8% 12%,rgba(0,194,168,.2),transparent 62%),radial-gradient(55% 55% at 45% 115%,rgba(124,92,255,.3),transparent 65%),linear-gradient(180deg,#03163a 0%,#062a63 58%,#073378 100%)}
.cfd .hx-bg {position:absolute;top:-160px;bottom:-160px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.cfd .hx-orb {position:absolute;border-radius:50%;opacity:.6}
.cfd .hx-o1 {width:760px;height:760px;right:-6%;top:-22%;background:radial-gradient(circle closest-side,rgba(46,123,246,.7),rgba(46,123,246,0));animation:hx-drift1 22s ease-in-out infinite alternate}
.cfd .hx-o2 {width:640px;height:640px;left:-14%;bottom:-24%;background:radial-gradient(circle closest-side,rgba(0,194,168,.38),rgba(0,194,168,0));animation:hx-drift2 26s ease-in-out infinite alternate}
.cfd .hx-o3 {width:560px;height:560px;left:30%;top:24%;background:radial-gradient(circle closest-side,rgba(124,92,255,.32),rgba(124,92,255,0));animation:hx-drift1 30s ease-in-out infinite alternate-reverse}
.cfd .hx-dots {position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000 0,transparent 75%);mask-image:radial-gradient(70% 60% at 70% 40%,#000 0,transparent 75%)}
@keyframes hx-drift1 {to{transform:translate3d(-60px,40px,0) scale(1.08)}}
@keyframes hx-drift2 {to{transform:translate3d(70px,-50px,0) scale(1.1)}}
.cfd .hx-layout {position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-10);align-items:center}
@media (min-width:1000px) {.cfd .hx-layout.is-playing .hx-copy h1 {font-size:clamp(32px,3vw,44px)}
.cfd .hx-layout {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,4.5vw,72px);transition:grid-template-columns .6s cubic-bezier(.2,.8,.2,1)}
.cfd .hx-layout.is-playing {grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}
.cfd .hx-copy {min-width:0}
.cfd .hx-copy>* {animation:hx-up .8s cubic-bezier(.2,.8,.2,1) both}
.cfd .hx-copy>:nth-child(2) {animation-delay:.08s}
.cfd .hx-copy>:nth-child(3) {animation-delay:.16s}
.cfd .hx-copy>:nth-child(4) {animation-delay:.24s}
.cfd .hx-copy>:nth-child(5) {animation-delay:.32s}
@keyframes hx-up {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cfd .hx-eyebrow {display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--cf-space-5);padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:600;letter-spacing:.02em;color:#E6EEFF}
.cfd .hx-eyedot {width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 4px rgba(61,220,151,.18)}
.cfd .eg-hero .hx-copy h1 {transition:font-size .5s ease;font-size:clamp(36px,4.2vw,58px);line-height:1.05;letter-spacing:-.03em;margin:0 0 var(--cf-space-5);max-width:17ch;text-wrap:balance}
.cfd .hx-grad {background:linear-gradient(92deg,#8DBBFF 0%,#9BE7C4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cfd .eg-hero .hx-lead {max-width:46ch;margin:0 0 var(--cf-space-8);font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:#C9D8F5}
.cfd .eg-hero .hx-lead strong {color:#fff}
.cfd .hx-ctas {display:flex;flex-wrap:wrap;gap:var(--cf-space-3)}
.cfd .hx-ctas .cf-btn {display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.cfd .hx-ctas .cf-btn i, .cfd .hx-ctas .cf-btn svg {width:18px;height:18px;display:inline-flex}
.cfd .hx-try {box-shadow:0 14px 30px rgba(46,123,246,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.cfd .hx-try:hover {transform:translateY(-2px);box-shadow:0 18px 38px rgba(46,123,246,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.cfd .hx-dev {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff}
.cfd .hx-dev:hover {background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff;transform:translateY(-2px)}
.cfd .hx-dev:hover i, .cfd .hx-dev:hover svg {transform:translateX(3px)}
.cfd .hx-dev i, .cfd .hx-dev svg {transition:transform .2s ease}
.cfd .hx-ctas .cf-btn:focus-visible {outline:3px solid #9BE7C4;outline-offset:3px}
.cfd .hx-works {margin-top:var(--cf-space-8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3) var(--cf-space-4)}
.cfd .hx-works-k {margin:0;font-size:14px;color:#9FB4DA}
.cfd .hx-builders {display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cfd .hx-builders li {padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#DCE6FA}
.cfd .hx-demo {position:relative;min-width:0;animation:hx-demo-in 1s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes hx-demo-in {from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.cfd .hx-halo {position:absolute;inset:6% -4% 2% 6%;border-radius:40px;background:radial-gradient(closest-side,rgba(46,123,246,.55),transparent);filter:blur(40px);pointer-events:none}
.cfd .hx-browser {position:relative;z-index:2;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -24px rgba(1,10,34,.75),0 24px 50px -30px rgba(0,0,0,.6);overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
@media (min-width:1000px) {.cfd .hx-browser {transform:perspective(1800px) rotateY(-5deg) rotateX(2deg)}
.cfd .hx-demo:hover .hx-browser, .cfd .hx-demo.is-playing .hx-browser {transform:none}}
.cfd .hx-chrome {display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;background:linear-gradient(#F7F9FD,#EEF2F9);border-bottom:1px solid #E1E7F1}
.cfd .hx-lights {display:flex;gap:7px}
.cfd .hx-lights i {width:11px;height:11px;border-radius:50%;background:#FF5F57}
.cfd .hx-lights i:nth-child(2) {background:#FEBC2E}
.cfd .hx-lights i:nth-child(3) {background:#28C840}
.cfd .hx-url {flex:1;min-width:0;max-width:360px;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid #E1E7F1;font-size:12.5px;color:#4A5B78;white-space:nowrap;overflow:hidden}
.cfd .hx-url svg {width:13px;height:13px;flex:none;color:#28A060}
.cfd .hx-url span {overflow:hidden;text-overflow:ellipsis}
.cfd .hx-live {margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#E9F9F1;color:#0F7A47;font-size:12px;font-weight:700}
.cfd .hx-live-dot {width:7px;height:7px;border-radius:50%;background:#28C840;animation:hx-blink 1.6s ease-in-out infinite}
@keyframes hx-blink {50%{opacity:.35}}
.cfd .hx-page {padding:14px 18px 16px;background:#fff}
.cfd .hx-site {display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cfd .hx-site b {width:70px;height:14px;border-radius:5px;background:#0B1F3F}
.cfd .hx-site i {width:44px;height:8px;border-radius:5px;background:#E4E9F2}
.cfd .hx-site i:first-of-type {margin-left:auto}
.cfd .hx-intro {overflow:hidden;max-height:70px;transition:max-height .5s ease,opacity .4s ease,margin .5s ease;margin-bottom:12px}
.cfd .hx-intro p {margin:0 0 8px;font-size:15px;font-weight:800;color:#0B1F3F}
.cfd .hx-intro i {display:block;height:7px;width:72%;border-radius:4px;background:#EDF1F7;margin-bottom:6px}
.cfd .hx-intro i.s {width:48%}
.cfd .hx-slot {position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0B1F3F;box-shadow:0 14px 30px rgba(6,51,116,.22);transition:aspect-ratio .5s ease}
.cfd .hx-slides, .cfd .hx-slide {position:absolute;inset:0;margin:0}
.cfd .hx-slide {opacity:0;transform:scale(1.08);filter:blur(8px);transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.cfd .hx-slide.is-on {opacity:1;transform:none;filter:none}
.cfd .hx-slide img {width:100%;height:100%;object-fit:cover;display:block}
.cfd .hx-slot::after {content:"";position:absolute;inset:8px;border-radius:10px;border:2px dashed rgba(155,231,196,.95);box-shadow:inset 0 0 40px rgba(155,231,196,.35);opacity:0;transform:scale(.97);transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:3}
.cfd .hx-slot.is-drop::after {opacity:1;transform:none}
.cfd .hx-start {position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(60% 60% at 50% 50%,rgba(6,24,56,.42),rgba(6,24,56,.1) 70%),linear-gradient(180deg,rgba(6,24,56,0) 55%,rgba(6,24,56,.45) 100%);text-decoration:none;cursor:pointer}
.cfd .hx-pb {display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;background:rgba(255,255,255,.96);color:#0B1F3F;font-size:16px;box-shadow:0 10px 26px rgba(0,0,0,.3);transition:transform .25s ease,box-shadow .25s ease}
.cfd .hx-pb b {font-weight:800}
.cfd .hx-pb-ic {position:relative;width:40px;height:40px;border-radius:50%;background:var(--cf-color-cta,#2E7BF6);box-shadow:0 0 0 0 rgba(46,123,246,.6);animation:hx-ring 2.4s ease-out infinite}
.cfd .hx-pb-ic::after {content:"";position:absolute;left:16px;top:13px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
@keyframes hx-ring {0%{box-shadow:0 0 0 0 rgba(46,123,246,.6)}70%{box-shadow:0 0 0 12px rgba(46,123,246,0)}100%{box-shadow:0 0 0 0 rgba(46,123,246,0)}}
.cfd .hx-start:hover .hx-pb, .cfd .hx-start:focus-visible .hx-pb {transform:translateY(-2px) scale(1.03);box-shadow:0 14px 32px rgba(0,0,0,.38)}
.cfd .hx-start:focus-visible {outline:3px solid #9BE7C4;outline-offset:-3px;border-radius:14px}
.cfd .hx-frame {position:absolute;inset:0;z-index:4;display:none;background:#000 radial-gradient(circle at 50% 50%,rgba(46,123,246,.35),transparent 40%)}
.cfd .hx-frame iframe {width:100%;height:100%;border:0;display:block}
.cfd .hx-close {position:absolute;top:10px;right:10px;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:rgba(6,24,56,.82);color:#fff;font-family: var(--cf-font);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.cfd .hx-close[hidden] {display:none}
.cfd .hx-close i, .cfd .hx-close svg {width:15px;height:15px;display:inline-flex}
.cfd .hx-close:hover {background:rgba(6,24,56,.95)}
.cfd .eg-hero .hx-more {margin:10px 0 0;text-align:right;font-size:13px;color:#4A5B78}
.cfd .hx-more u {color:var(--cf-color-link,#1F66E5)}
.cfd .hx-demo.is-playing .hx-intro {max-height:0;opacity:0;margin-bottom:0}
.cfd .hx-demo.is-playing .hx-slot {aspect-ratio:16/10}
.cfd .hx-demo.is-playing .hx-frame {display:block}
.cfd .hx-demo.is-playing .hx-start {display:none}
.cfd .hx-rail {position:relative;z-index:2;display:flex;justify-content:flex-end;gap:8px;margin-top:16px;transition:opacity .3s ease}
.cfd .hx-thumb {position:relative;width:56px;height:36px;padding:0;border:2px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden;background:#0B1F3F;cursor:pointer;opacity:.7;transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
.cfd .hx-thumb img {width:100%;height:100%;object-fit:cover;display:block}
.cfd .hx-thumb:hover {opacity:1;transform:translateY(-2px)}
.cfd .hx-thumb.is-on {opacity:1;border-color:#9BE7C4}
.cfd .hx-thumb:focus-visible {outline:3px solid #9BE7C4;outline-offset:2px}
.cfd .hx-prog {position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.35)}
.cfd .hx-prog i {display:block;height:100%;width:0;background:#9BE7C4}
.cfd .hx-thumb.is-on .hx-prog i {animation:hx-prog var(--hx-t,5200ms) linear forwards}
.cfd .hx-demo.is-paused .hx-thumb.is-on .hx-prog i {animation-play-state:paused}
@keyframes hx-prog {to{width:100%}}
.cfd .hx-code {position:absolute;z-index:3;left:-44px;bottom:-14px;width:min(345px,54%);padding:12px 16px 14px;border-radius:16px;background:rgba(7,21,48,.88);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);backdrop-filter:blur(12px);transition:opacity .35s ease,transform .35s ease}
.cfd .hx-code-h {display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9FB4DA}
.cfd .hx-chip {position:relative;display:inline-grid;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;letter-spacing:0;text-transform:none;font-size:12px;transition:background-color .25s ease,color .25s ease}
.cfd .hx-chip>span {grid-area:1/1;transition:opacity .2s ease}
.cfd .hx-c2 {opacity:0}
.cfd .hx-chip.is-copied {background:#28C840;color:#06351A}
.cfd .hx-chip.is-copied .hx-c1 {opacity:0}
.cfd .hx-chip.is-copied .hx-c2 {opacity:1}
.cfd .hx-code code {display:block;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#E6EEFF;white-space:pre;overflow:hidden}
.cfd .hx-code .t {color:#8FB8FF}
.cfd .hx-code .a {color:#9BE7C4}
.cfd .hx-code .s {color:#FFD98A}
.cfd .hx-key {color:#FF9DB0;font-weight:700;border-radius:4px;padding:0 2px}
.cfd .hx-key.is-new {animation:hx-key .9s ease}
@keyframes hx-key {0%{background:rgba(255,157,176,.45)}100%{background:transparent}}
.cfd .hx-fly {position:absolute;left:0;top:0;z-index:6;display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;background:var(--cf-color-cta,#2E7BF6);color:#fff;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 0 4px rgba(46,123,246,.25),0 10px 24px rgba(46,123,246,.55);opacity:0;pointer-events:none}
.cfd .hx-float {position:absolute;z-index:1;margin:0;width:150px;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.7);box-shadow:0 20px 40px rgba(0,0,0,.4);opacity:.9;transition:opacity .35s ease}
.cfd .hx-float img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cfd .hx-f1 {right:-18px;top:-40px;transform:rotate(7deg);animation:hx-bob 8s ease-in-out infinite}
.cfd .hx-f2 {right:-40px;bottom:84px;width:124px;transform:rotate(-6deg);animation:hx-bob 9s -3s ease-in-out infinite}
@keyframes hx-bob {50%{translate:0 -10px}}
.cfd .hx-demo.is-playing .hx-code, .cfd .hx-demo.is-playing .hx-float, .cfd .hx-demo.is-playing .hx-rail {opacity:0;pointer-events:none}
.cfd .hx-demo.is-playing .hx-code {transform:translateY(12px)}
@media (max-width:1199px) {.cfd .hx-float {display:none}
.cfd .hx-code {position:relative;left:auto;bottom:auto;width:100%;margin-top:14px}
.cfd .hx-rail {justify-content:center}}
@media (max-width:999px) {.cfd .hx-demo {max-width:720px;width:100%;margin:0 auto}
.cfd .hx-code {position:relative;left:auto;bottom:auto;width:100%;margin-top:14px}
.cfd .hx-rail {justify-content:center;margin-top:14px}}
@media (max-width:639px) {.cfd .hx-code {display:none}
.cfd .hx-rail {justify-content:center}
.cfd .hx-thumb {width:48px;height:32px}
.cfd .hx-ctas .cf-btn {width:100%;justify-content:center}
.cfd .hx-works {margin-top:var(--cf-space-6)}
.cfd .hx-page {padding:10px 12px 12px}
.cfd .hx-site {margin-bottom:10px}
.cfd .hx-intro {display:none}
.cfd .hx-live {display:none}
.cfd .hx-pb {font-size:14px}}
@media (prefers-reduced-motion:reduce) {.cfd .hx-orb, .cfd .hx-copy>*, .cfd .hx-demo, .cfd .hx-live-dot, .cfd .hx-pb-ic, .cfd .hx-float {animation:none}
.cfd .hx-slide, .cfd .hx-browser, .cfd .hx-layout, .cfd .hx-slot, .cfd .hx-intro {transition:none}
.cfd .hx-thumb.is-on .hx-prog i {animation:none;width:100%}}
.cfd .eg-proof {padding-top:clamp(56px,7vw,104px)}
.cfd .eg-stat .n span {font:inherit}
.cfd .sx-top {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-8);align-items:center}
@media (min-width:1000px) {.cfd .sx-top {grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--cf-space-12)}}
.cfd .sx-head {margin-bottom:0}
.cfd .sx-kicker {display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--cf-space-4);padding:6px 14px;border-radius:999px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);color:var(--cf-color-primary-700);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cfd .sx-kicker i, .cfd .sx-kicker svg {width:16px;height:16px;display:inline-flex}
.cfd .sx-head h2 {text-wrap:balance}
.cfd .sx-phones {margin:0;justify-self:center;max-width:420px;width:100%}
.cfd .sx-phones img {display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(6,51,116,.22))}
.cfd .sx-areas {margin-top:var(--cf-space-10);padding:var(--cf-space-6);border-radius:20px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small)}
.cfd .sx-areas-k {margin:0 0 var(--cf-space-4);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-color-text-secondary)}
.cfd .sx-areas ul {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--cf-space-3);margin:0;padding:0;list-style:none}
.cfd .sx-areas li {display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:var(--cf-space-3) var(--cf-space-4);border-radius:14px;background:var(--cf-color-background-blue)}
.cfd .sx-areas li b {font-size:17px;color:var(--cf-color-primary-900)}
.cfd .sx-areas li span:last-child {grid-column:2;font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .sx-dot {grid-row:span 2;width:12px;height:12px;border-radius:50%}
.cfd .sx-a1 {background:#2E7BF6}
.cfd .sx-a2 {background:#7C5CFF}
.cfd .sx-a3 {background:#F28C28}
.cfd .sx-a4 {background:#16A37A}
.cfd .sx-a5 {background:#E0457B}
.cfd .sx-areas-n {margin:var(--cf-space-3) 0 0;font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .sx-cards {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-5);margin-top:var(--cf-space-8)}
@media (min-width:860px) {.cfd .sx-cards {grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfd .sx-card {padding:var(--cf-space-6);border-radius:20px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small);transition:transform .25s ease,box-shadow .25s ease}
.cfd .sx-card:hover {transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,51,116,.12)}
.cfd .sx-card img {display:block;width:auto;height:96px;margin-bottom:var(--cf-space-4)}
.cfd .sx-card h3 {margin:0 0 var(--cf-space-2);font-size:20px;color:var(--cf-color-primary-900)}
.cfd .sx-card p {margin:0;color:var(--cf-color-text-secondary)}
.cfd .sx-logos {margin-top:var(--cf-space-10);text-align:center}
.cfd .sx-logos p {margin:0 0 var(--cf-space-4);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-color-text-secondary)}
.cfd .sx-logos img {display:block;width:100%;max-width:820px;height:auto;margin:0 auto;opacity:.85;mix-blend-mode:multiply}
.cfd .sx-note {display:flex;gap:var(--cf-space-2);align-items:flex-start;justify-content:center;margin:var(--cf-space-8) 0 0;font-size:15px;color:var(--cf-color-text-secondary);text-align:center}
.cfd .sx-note i, .cfd .sx-note svg {width:18px;height:18px;flex:none;display:inline-flex;margin-top:2px;color:var(--cf-color-primary-700)}
.cfd .wx-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-5)}
@media (min-width:720px) {.cfd .wx-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px) {.cfd .wx-grid {grid-template-columns:repeat(4,minmax(0,1fr))}}
.cfd .wx-card {display:flex;flex-direction:column;padding:var(--cf-space-4) var(--cf-space-4) var(--cf-space-6);border-radius:20px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small);transition:transform .25s ease,box-shadow .25s ease}
.cfd .wx-card:hover {transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,51,116,.12)}
.cfd .wx-site {display:block;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--cf-color-border);box-shadow:0 10px 24px rgba(6,51,116,.1);margin-bottom:var(--cf-space-5)}
.cfd .wx-bar {display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F3F6FB;border-bottom:1px solid var(--cf-color-border)}
.cfd .wx-bar i {width:7px;height:7px;border-radius:50%;background:#C3CDDC}
.cfd .wx-bar em {margin-left:8px;font-style:normal;font-size:12px;color:var(--cf-color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfd .wx-shot {display:block;padding:10px}
.cfd .wx-shot img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;transition:transform .4s ease}
.cfd .wx-card:hover .wx-shot img {transform:scale(1.04)}
.cfd .wx-card h3 {margin:0 var(--cf-space-2) var(--cf-space-2);font-size:19px;color:var(--cf-color-primary-900)}
.cfd .wx-card p {margin:0 var(--cf-space-2);color:var(--cf-color-text-secondary);font-size:16px}
.cfd .wx-card .wx-try {margin-top:auto;padding-top:var(--cf-space-4);font-size:14px;color:var(--cf-color-primary-700)}
.cfd .wx-try strong {color:var(--cf-color-primary-900)}
.cfd .hw-steps {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-5);margin:0;padding:0;list-style:none;counter-reset:none}
@media (min-width:860px) {.cfd .hw-steps {grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfd .hw-steps li {position:relative;padding:var(--cf-space-6);border-radius:20px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small)}
.cfd .hw-n {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:var(--cf-space-4);border-radius:12px;background:linear-gradient(135deg,var(--cf-color-primary-700),var(--cf-color-primary-900));color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 18px rgba(6,51,116,.25)}
.cfd .hw-steps h3 {margin:0 0 var(--cf-space-2);font-size:20px;color:var(--cf-color-primary-900)}
.cfd .hw-steps p {margin:0;color:var(--cf-color-text-secondary)}
.cfd .hw-builders {margin-top:var(--cf-space-8);padding:var(--cf-space-6);border-radius:20px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border)}
.cfd .hw-builders h3 {margin:0 0 var(--cf-space-4);font-size:18px;color:var(--cf-color-primary-900)}
.cfd .hw-builders ul {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--cf-space-3);margin:0;padding:0;list-style:none}
.cfd .hw-builders li {display:flex;flex-direction:column;gap:2px;padding:var(--cf-space-3) var(--cf-space-4);border-radius:12px;background:var(--cf-color-background-blue)}
.cfd .hw-builders b {font-size:16px;color:var(--cf-color-primary-900)}
.cfd .hw-builders li span {font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .hw-note {margin:var(--cf-space-4) 0 0;font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .ax-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-8);align-items:center}
@media (min-width:1000px) {.cfd .ax-grid {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--cf-space-12)}}
.cfd .ax-shot {margin:0}
.cfd .ax-shot img {display:block;width:100%;height:auto;filter:drop-shadow(0 26px 36px rgba(6,51,116,.18))}
.cfd .ax-shot figcaption {margin-top:var(--cf-space-3);font-size:14px;color:var(--cf-color-text-secondary);text-align:center}
.cfd .ax-table {overflow-x:auto;border-radius:20px;border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small);background:var(--cf-color-surface)}
.cfd .ax-table table {width:100%;border-collapse:collapse;font-size:16px}
.cfd .ax-table th, .cfd .ax-table td {padding:14px 18px;text-align:start;border-bottom:1px solid var(--cf-color-border);vertical-align:middle}
.cfd .ax-table tbody tr:last-child th, .cfd .ax-table tbody tr:last-child td {border-bottom:0}
.cfd .ax-table thead th {font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cf-color-text-secondary);background:var(--cf-color-background-blue)}
.cfd .ax-table tbody th {font-weight:600;color:var(--cf-color-text-primary)}
.cfd .ax-table td {text-align:center;color:var(--cf-color-text-secondary)}
.cfd .ax-table .ax-pro {background:color-mix(in srgb,var(--cf-color-primary-100) 45%,transparent)}
.cfd .ax-table thead .ax-pro {color:var(--cf-color-primary-900);background:var(--cf-color-primary-100)}
.cfd .ax-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cfd .ax-yes, .cfd .ax-no {display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
.cfd .ax-yes {color:#0F7A47}
.cfd .ax-no {color:var(--cf-color-text-secondary)}
.cfd .ax-yes {position:relative}
.cfd .ax-yes::before {content:"";width:18px;height:18px;border-radius:50%;background:#16A37A}
.cfd .ax-yes::after {content:"";position:absolute;left:6px;top:50%;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
.cfd .ax-no::before {content:"";width:18px;height:2px;border-radius:2px;background:var(--cf-color-border-strong)}
.cfd .ax-cost td {font-size:15px}
.cfd .ax-cost .ax-pro strong {color:var(--cf-color-primary-900)}
@media (prefers-reduced-motion:reduce) {.cfd .sx-card, .cfd .wx-card, .cfd .wx-shot img {transition:none}}
@media (min-width:860px) {.cfd .hw-builders ul {grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfd .pg {position:relative;background:radial-gradient(1200px 520px at 85% -10%,rgba(46,123,246,.16),transparent 60%),radial-gradient(900px 480px at -10% 110%,rgba(0,194,168,.12),transparent 60%),var(--cf-color-primary-050);overflow:hidden}
.cfd .pg-head {max-width:68ch;margin-bottom:var(--cf-space-10)}
.cfd .pg-eyebrow {display:inline-flex;align-items:center;gap:var(--cf-space-2);margin:0 0 var(--cf-space-3);padding:6px 14px;border-radius:999px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);color:var(--cf-color-primary-700);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cfd .pg-eyebrow i, .cfd .pg-eyebrow svg {width:16px;height:16px;display:inline-flex}
.cfd .pg-head h2 {margin:0 0 var(--cf-space-4);text-wrap:balance}
.cfd .pg-app {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-6);padding:var(--cf-space-6);border-radius:28px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:0 30px 70px rgba(6,51,116,.14)}
@media (min-width:1000px) {.cfd .pg-app {grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:var(--cf-space-8);gap:var(--cf-space-8)}}
.cfd .pg-browse {display:flex;flex-direction:column;gap:var(--cf-space-4);min-width:0}
.cfd .pg-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;border-radius:18px;background:var(--cf-color-primary-050);border:1px solid var(--cf-color-border)}
.cfd .pg-tabs button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 var(--cf-space-3);border:0;border-radius:13px;background:transparent;font-family: var(--cf-font);font-size:15px;font-weight:700;color:var(--cf-color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.cfd .pg-tabs button i, .cfd .pg-tabs button svg {width:18px;height:18px;display:inline-flex;flex:none}
.cfd .pg-tabs button:hover {color:var(--cf-color-text-primary)}
.cfd .pg-tabs button[aria-selected="true"] {background:var(--cf-color-surface);color:var(--cf-color-primary-900);box-shadow:0 6px 16px rgba(6,51,116,.12)}
.cfd .pg-n {display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 7px;border-radius:999px;background:var(--cf-color-primary-100);color:var(--cf-color-primary-900);font-size:12px;font-weight:700}
@media (max-width:560px) {.cfd .pg-tabs button {flex-direction:column;gap:2px;font-size:13px;min-height:58px}
.cfd .pg-tabs button i, .cfd .pg-tabs button svg {display:none}}
.cfd .pg-search {display:flex;align-items:center;gap:var(--cf-space-2);min-height:38px;padding:0 var(--cf-space-4);border-radius:12px;border:1px solid var(--cf-color-border-strong);background:var(--cf-color-surface);color:var(--cf-color-text-secondary);transition:border-color .2s ease,box-shadow .2s ease}
.cfd .pg-search:focus-within {border-color:var(--cf-color-primary-700);box-shadow:0 0 0 3px rgba(46,123,246,.18)}
.cfd .pg-search i, .cfd .pg-search svg {width:18px;height:18px;display:inline-flex;flex:none}
.cfd .pg-search input {flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--cf-color-text-primary)}
.cfd .pg-chips {display:flex;flex-wrap:wrap;gap:8px}
.cfd .pg-chips[hidden], .cfd .pg-note[hidden], .cfd .pg-empty[hidden] {display:none}
.cfd .pg-chips button {min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--cf-color-border-strong);background:var(--cf-color-surface);font-family: var(--cf-font);font-size:14px;font-weight:600;color:var(--cf-color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cfd .pg-chips button:hover {border-color:var(--cf-color-primary-700);color:var(--cf-color-primary-900)}
.cfd .pg-chips button[aria-pressed="true"] {background:var(--cf-color-primary-900);border-color:var(--cf-color-primary-900);color:#fff}
.cfd .pg-note {display:flex;gap:var(--cf-space-2);align-items:flex-start;margin:0;padding:var(--cf-space-3) var(--cf-space-4);border-radius:12px;background:#FFF7E6;color:#6B4A00;font-size:15px}
.cfd .pg-note i, .cfd .pg-note svg {width:18px;height:18px;flex:none;display:inline-flex;margin-top:2px}
.cfd .pg-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;max-height:560px;overflow:auto;padding:4px 6px 12px 4px;margin:0 -6px 0 -4px;scrollbar-width:thin;scroll-behavior:smooth;overscroll-behavior:contain}
.cfd .pg-static {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cfd .pg-static li {padding:6px 12px;border-radius:999px;background:var(--cf-color-primary-050);font-size:14px}
.cfd .pg-card {position:relative;display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--cf-color-border);border-radius:16px;background:var(--cf-color-surface);text-align:start;font-family: var(--cf-font);color:var(--cf-color-text-primary);cursor:pointer;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:pg-in .35s ease both}
.cfd .pg-card:hover {transform:translateY(-3px);box-shadow:0 14px 28px rgba(6,51,116,.14);border-color:var(--cf-color-primary-100)}
.cfd .pg-card[aria-pressed="true"] {border-color:var(--cf-color-primary-700);box-shadow:0 0 0 3px rgba(46,123,246,.22),0 14px 28px rgba(6,51,116,.14)}
.cfd .pg-thumb {position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--cf-color-primary-100),var(--cf-color-primary-050));overflow:hidden}
.cfd .pg-thumb img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.cfd .pg-thumb--icon img {width:auto;height:76%;margin:6% auto 0;object-fit:contain;border-radius:14px;box-shadow:0 8px 18px rgba(6,51,116,.18)}
.cfd .pg-card:hover .pg-thumb img {transform:scale(1.05)}
.cfd .pg-thumb::after {content:"";position:absolute;inset:auto 8px 8px auto;width:30px;height:30px;border-radius:50%;background:var(--cf-color-primary-900) none center/16px no-repeat;opacity:0;transform:scale(.7);transition:opacity .2s ease,transform .2s ease}
.cfd .pg-card:hover .pg-thumb::after, .cfd .pg-card[aria-pressed="true"] .pg-thumb::after {opacity:1;transform:scale(1)}
.cfd .pg-cname {display:block;padding:10px 12px 2px;font-size:14px;font-weight:700;line-height:1.3}
.cfd .pg-cmeta {display:block;padding:0 12px 10px;font-size:12px;color:var(--cf-color-text-secondary);line-height:1.35}
@keyframes pg-in {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cfd .pg-empty {margin:0;color:var(--cf-color-text-secondary)}
.cfd .pg-side {display:flex;flex-direction:column;gap:var(--cf-space-4);min-width:0}
@media (min-width:1000px) {.cfd .pg-side {position:sticky;top:90px;align-self:start}}
.cfd .pg-stage {position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#0B1F3F;box-shadow:0 22px 50px rgba(6,51,116,.28);isolation:isolate}
.cfd .pg-stage:fullscreen {border-radius:0;aspect-ratio:auto}
.cfd .pg-poster {position:absolute;inset:0;background:#0B1F3F center/cover no-repeat;transform:scale(1.02);transition:opacity .3s ease,transform .6s ease}
.cfd .pg-stage:hover .pg-poster {transform:scale(1.06)}
.cfd .pg-over {position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--cf-space-3);padding:var(--cf-space-6);background:linear-gradient(180deg,rgba(6,24,56,0) 30%,rgba(6,24,56,.88) 100%)}
.cfd .pg-name {margin:0;color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.cfd .pg-play {display:inline-flex;align-items:center;gap:var(--cf-space-2);min-height:38px;padding:0 var(--cf-space-5);font-size:16px;box-shadow:0 12px 26px rgba(46,123,246,.45);animation:pg-pulse 2.4s ease-in-out infinite}
.cfd .pg-play i, .cfd .pg-play svg {width:18px;height:18px;display:inline-flex}
@keyframes pg-pulse {0%,100%{box-shadow:0 12px 26px rgba(46,123,246,.45),0 0 0 0 rgba(46,123,246,.45)}50%{box-shadow:0 12px 26px rgba(46,123,246,.45),0 0 0 12px rgba(46,123,246,0)}}
.cfd .pg-frame {position:absolute;inset:0;display:none;background:#000}
.cfd .pg-frame iframe {width:100%;height:100%;border:0;display:block}
.cfd .pg-stage.is-on .pg-frame {display:block}
.cfd .pg-stage.is-on .pg-over, .cfd .pg-stage.is-on .pg-poster {display:none}
.cfd .pg-ctl {position:absolute;inset:10px 10px auto auto;display:flex;gap:6px;z-index:2}
.cfd .pg-ctl[hidden] {display:none}
.cfd .pg-ctl button {display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:0;background:rgba(6,24,56,.78);color:#fff;font-family: var(--cf-font);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.cfd .pg-ctl button:hover {background:rgba(6,24,56,.95)}
.cfd .pg-ctl i, .cfd .pg-ctl svg {width:15px;height:15px;display:inline-flex}
.cfd .pg-tags {display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.cfd .pg-tags span {padding:3px 10px;border-radius:999px;background:var(--cf-color-primary-050);border:1px solid var(--cf-color-border);color:var(--cf-color-primary-900);font-size:13px;font-weight:600}
.cfd .pg-snip {margin:0;border-radius:18px;background:var(--cf-color-primary-900);overflow:hidden}
.cfd .pg-snip figcaption {display:flex;align-items:center;justify-content:space-between;gap:var(--cf-space-3);padding:8px 8px 8px var(--cf-space-5);border-bottom:1px solid rgba(255,255,255,.12)}
.cfd .pg-snip-k {color:var(--cf-color-primary-100);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cfd .pg-copy {display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-family: var(--cf-font);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s ease}
.cfd .pg-copy:hover {background:rgba(255,255,255,.1)}
.cfd .pg-copy i, .cfd .pg-copy svg {width:16px;height:16px;display:inline-flex}
.cfd .pg-snip pre {margin:0;padding:var(--cf-space-5);max-height:230px;overflow:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#E6EEFF;white-space:pre-wrap;word-break:break-all}
.cfd .pg-snip .t {color:#8FB8FF}
.cfd .pg-snip .a {color:#9BE7C4}
.cfd .pg-snip .s {color:#FFD98A}
.cfd .pg-snip .k {color:#FF9DB0;font-weight:700}
.cfd .pg-req {display:flex;gap:var(--cf-space-2);align-items:flex-start;margin:0;font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .pg-req i, .cfd .pg-req svg {width:18px;height:18px;flex:none;display:inline-flex;margin-top:2px;color:var(--cf-color-primary-700)}
.cfd .pg-cta {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cf-space-4) var(--cf-space-8);margin-top:var(--cf-space-8);padding:var(--cf-space-6) var(--cf-space-8);border-radius:22px;background:linear-gradient(120deg,var(--cf-color-primary-900),var(--cf-color-primary-700));color:#fff}
.cfd .pg-cta p {margin:0;flex:1 1 360px;font-size:17px;color:rgba(255,255,255,.88)}
.cfd .pg-cta strong {color:#fff}
@media (prefers-reduced-motion:reduce) {.cfd .pg-card, .cfd .pg-play {animation:none}
.cfd .pg-card, .cfd .pg-thumb img, .cfd .pg-poster {transition:none}}
@media (pointer:coarse) {.cfd .pg-tabs button, .cfd .pg-search, .cfd .pg-play {min-height:44px}}
.cfd .pg-stage {aspect-ratio:16/9}
.cfd .pg-poster {background:#0B1F3F;transform:none;overflow:hidden;cursor:pointer}
.cfd .pg-pimg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cfd .pg-stage:hover .pg-pimg {transform:scale(1.04)}
.cfd .pg-pblur {position:absolute;inset:-20px;background:center/cover no-repeat;filter:blur(24px) saturate(1.2);opacity:.75}
.cfd .pg-picon {position:absolute;left:50%;top:44%;width:auto;height:52%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:22px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.cfd .pg-over {align-items:center;justify-content:center;padding:var(--cf-space-5);background:radial-gradient(60% 60% at 50% 50%,rgba(6,24,56,.38),rgba(6,24,56,.06) 70%),linear-gradient(180deg,rgba(6,24,56,0) 60%,rgba(6,24,56,.45) 100%);pointer-events:none}
.cfd .pg-play {pointer-events:auto;display:inline-flex;align-items:center;gap:12px;min-height:0;padding:8px 22px 8px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.96);color:#0B1F3F;font-family: var(--cf-font);font-size:16px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.32);animation:none;transition:transform .25s ease,box-shadow .25s ease}
.cfd .pg-play:hover, .cfd .pg-play:focus-visible {transform:translateY(-2px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.cfd .pg-play:focus-visible {outline:3px solid #9BE7C4;outline-offset:3px}
.cfd .pg-play b {font-weight:800}
.cfd .pg-play-ic {position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--cf-color-cta,#2E7BF6);animation:pg-ring 2.4s ease-out infinite}
.cfd .pg-play-ic::after {content:"";position:absolute;left:16px;top:13px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
@keyframes pg-ring {0%{box-shadow:0 0 0 0 rgba(46,123,246,.6)}70%{box-shadow:0 0 0 12px rgba(46,123,246,0)}100%{box-shadow:0 0 0 0 rgba(46,123,246,0)}}
.cfd .pg-snip {background:#0A1A36;border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 50px rgba(6,24,56,.28)}
.cfd .pg-snip figcaption {display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:#0F2347;border-bottom:1px solid rgba(255,255,255,.08)}
.cfd .pg-dots {display:flex;gap:6px;margin-right:4px}
.cfd .pg-dots i {width:10px;height:10px;border-radius:50%;background:#FF5F57}
.cfd .pg-dots i:nth-child(2) {background:#FEBC2E}
.cfd .pg-dots i:nth-child(3) {background:#28C840}
.cfd .pg-file {padding:4px 10px;border-radius:7px;background:#0A1A36;color:#E6EEFF;font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cfd .pg-lang {margin-left:auto;padding:3px 8px;border-radius:6px;background:rgba(143,184,255,.14);color:#8FB8FF;font-size:12px;font-weight:700;letter-spacing:.06em}
.cfd .pg-snip pre {max-height:none;padding:14px 0;white-space:pre;word-break:normal;overflow-x:auto;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#C9D6EE;counter-reset:pgln;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.cfd .pg-snip pre:focus-visible {outline:2px solid #9BE7C4;outline-offset:-2px}
.cfd .pg-snip code {display:block;min-width:max-content;padding-right:18px}
.cfd .pg-snip .ln {display:block;counter-increment:pgln}
.cfd .pg-snip .ln::before {content:counter(pgln);display:inline-block;width:2.4em;margin-right:14px;padding-right:10px;text-align:right;color:rgba(201,214,238,.35);border-right:1px solid rgba(255,255,255,.08);user-select:none}
.cfd .pg-snip .ln:hover {background:rgba(255,255,255,.04)}
.cfd .tk-p {color:#7F93B5}
.cfd .tk-t {color:#7FB2FF}
.cfd .tk-a {color:#9BE7C4}
.cfd .tk-s {color:#FFD98A}
.cfd .tk-x {color:#E6EEFF}
.cfd .tk-k {color:#FF9DB0;font-weight:700;background:rgba(255,157,176,.12);border-radius:3px;padding:0 2px}
.cfd .pg-snip .pg-snip-k {margin:0;padding:10px 16px 12px;border-top:1px solid rgba(255,255,255,.08);color:#9FB4DA;font-size:13px;letter-spacing:0;text-transform:none;font-weight:500}
@media (prefers-reduced-motion:reduce) {.cfd .pg-play-ic {animation:none}
.cfd .pg-pimg {transition:none}}
.cfd .pg-snip pre {overflow-x:hidden}
.cfd .pg-snip code {min-width:0;padding-right:16px}
.cfd .pg-snip .ln {display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:12px}
.cfd .pg-snip .ln::before {width:auto;margin:0;padding-right:10px}
.cfd .pg-snip .lc {white-space:pre-wrap;overflow-wrap:anywhere}
.cfd .pg-tabs button {white-space:nowrap;gap:6px;padding:0 8px;font-size:14px}
.cfd .pg-stage.is-icon .pg-over {justify-content:flex-end;padding-bottom:18px}
.cfd .pg-stage.is-icon .pg-picon {top:40%;height:50%}
.cfd #get-started.cx {position:relative;overflow:hidden;text-align:center;padding-bottom:0;background:radial-gradient(60% 70% at 80% 20%,rgba(46,123,246,.5),transparent 62%),radial-gradient(40% 50% at 8% 80%,rgba(0,194,168,.2),transparent 62%),radial-gradient(55% 55% at 45% 115%,rgba(124,92,255,.3),transparent 65%),linear-gradient(180deg,#03163a 0%,#062a63 58%,#073378 100%)}
.cfd .cx-wrap {position:relative}
.cfd .cx-copy {position:relative;z-index:1;max-width:760px;margin:0 auto}
.cfd .cx-copy h2 {font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--cf-space-4);color:#fff;text-wrap:balance}
.cfd .cx-copy .cf-lead {color:#C9D8F5;margin:0 auto var(--cf-space-8);max-width:52ch}
.cfd .cx-copy .cf-actions {justify-content:center}
.cfd .cx-copy .cf-btn--inverse {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff}
.cfd .cx-copy .cf-btn--inverse:hover {background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff}
.cfd .cx-games {position:relative;z-index:1;display:grid;gap:18px;margin:clamp(48px,6vw,80px) -10% 0;padding-bottom:clamp(40px,5vw,64px);transform:rotate(-3deg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cfd .cx-row {display:flex;gap:18px;width:max-content;animation:cx-scroll 48s linear infinite}
.cfd .cx-r2 {animation-direction:reverse;animation-duration:56s}
.cfd .cx-games:hover .cx-row {animation-play-state:paused}
.cfd .cx-row figure {position:relative;flex:none;margin:0;width:clamp(170px,17vw,240px);border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.22);box-shadow:0 18px 36px rgba(0,0,0,.35)}
.cfd .cx-row img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cfd .cx-play {position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;transform:scale(.7);transition:opacity .25s ease,transform .25s ease}
.cfd .cx-play::after {content:"";position:absolute;left:16px;top:13px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #2E7BF6}
.cfd .cx-row figure:nth-child(3n+2) .cx-play {animation:cx-tap 6s ease-in-out infinite}
.cfd .cx-row figure:hover .cx-play {opacity:1;transform:none}
@keyframes cx-scroll {to{transform:translateX(-50%)}}
@keyframes cx-tap {0%,70%,100%{opacity:0;transform:scale(.7)}78%,92%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) {.cfd .cx-row, .cfd .cx-row figure .cx-play {animation:none}}
.cfd #top>.hx-bg, .cfd .cx>.hx-bg {top:0;bottom:0;left:0;right:0;width:auto;transform:none}
.cfd .cx-row {animation-duration:80s}
.cfd .cx-r2 {animation-duration:92s}
.cfd .cx-row {animation-name:cx-scroll3}
@keyframes cx-scroll3 {to{transform:translateX(-33.3333%)}}
.cfd #top.eg-hero {min-height:calc(100svh - 60px);justify-content:center}
.cfd .hx-ctl {position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:6px}
.cfd .hx-ctl[hidden] {display:none}
.cfd .hx-cbtn {display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:rgba(6,24,56,.82);color:#fff;font-family: var(--cf-font);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:background-color .2s ease}
.cfd .hx-cbtn:hover {background:rgba(6,24,56,.95)}
.cfd .hx-cbtn:focus-visible {outline:2px solid #9BE7C4;outline-offset:2px}
.cfd .hx-cbtn i, .cfd .hx-cbtn svg {width:15px;height:15px;display:inline-flex}
.cfd .hx-slot:fullscreen {aspect-ratio:auto;border-radius:0;box-shadow:none}
.cfd .hx-slot:-webkit-full-screen {aspect-ratio:auto;border-radius:0}
.cfd .hx-f3 {left:-62px;top:-34px;width:132px;transform:rotate(-8deg);animation:hx-bob 9s -1s ease-in-out infinite}
.cfd .hx-f4 {left:-86px;top:42%;width:116px;transform:rotate(6deg);opacity:.75;filter:saturate(.9);animation:hx-bob 11s -4s ease-in-out infinite}
.cfd .hx-f5 {left:34%;top:-64px;width:112px;transform:rotate(4deg);opacity:.8;animation:hx-bob 10s -2s ease-in-out infinite}
.cfd .hx-f6 {right:-74px;top:30%;width:126px;transform:rotate(-5deg);animation:hx-bob 12s -6s ease-in-out infinite}
.cfd .hx-f7 {left:-44px;bottom:110px;width:104px;transform:rotate(-4deg);opacity:.7;animation:hx-bob 10s -7s ease-in-out infinite}
.cfd .hx-f8 {right:22%;top:-46px;width:98px;transform:rotate(-7deg);opacity:.7;animation:hx-bob 13s -3s ease-in-out infinite}
@media (max-width:1399px) {.cfd .hx-f4, .cfd .hx-f7 {display:none}}
.cfd .eg-hero .hx-more a:not(:where(.cf-btn)) {color:var(--cf-color-link,#1F66E5);text-decoration:underline;text-underline-offset:2px}
.cfd .eg-hero .hx-more a:not(:where(.cf-btn)):hover {color:var(--cf-color-link-hover,#174FB3)}
.cfd .bx-grid {gap:var(--cf-space-5)}
.cfd .eg-navy .eg-benefit.bx {position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cf-space-4);min-height:128px;padding:var(--cf-space-5) var(--cf-space-5) var(--cf-space-5) var(--cf-space-6);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 40px -18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.cfd .eg-navy .eg-benefit.bx::before {content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(143,184,255,.9),rgba(155,231,196,.7),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}
.cfd .eg-navy .eg-benefit.bx::after {content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(46,123,246,.35),transparent);pointer-events:none}
.cfd .eg-navy .eg-benefit.bx:hover {transform:translateY(-4px);border-color:rgba(255,255,255,.24);box-shadow:0 28px 50px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.cfd .eg-navy .eg-benefit.bx:hover::before {opacity:1}
.cfd .bx-txt {position:relative;z-index:1;min-width:0}
.cfd .eg-navy .eg-benefit.bx h3 {margin:0 0 6px;font-size:18px;color:#fff}
.cfd .eg-navy .eg-benefit.bx p {margin:0;font-size:15px;line-height:1.45;color:#C9D8F5}
.cfd .bx-vis {position:relative;z-index:1;flex:0 0 112px;height:84px}
.cfd .bx-cv {position:absolute;left:50%;top:50%;width:84px;margin:-24px 0 0 -42px;border-radius:9px;overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 22px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cfd .bx-cv img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cfd .bx-cv.c1 {transform:translate(-18px,6px) rotate(-12deg)}
.cfd .bx-cv.c2 {transform:translate(18px,6px) rotate(12deg)}
.cfd .bx-cv.c3 {transform:translateY(-6px);z-index:1}
.cfd .bx1:hover .bx-cv.c1 {transform:translate(-34px,10px) rotate(-18deg)}
.cfd .bx1:hover .bx-cv.c2 {transform:translate(34px,10px) rotate(18deg)}
.cfd .bx1:hover .bx-cv.c3 {transform:translateY(-12px) scale(1.06)}
.cfd .bx-code {position:absolute;inset:6px 0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 12px;border-radius:12px;background:#071530;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px rgba(0,0,0,.4);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#E6EEFF;white-space:nowrap;overflow:hidden}
.cfd .bx-code b {font-weight:400;color:#8FB8FF}
.cfd .bx-code i {font-style:normal;color:#9BE7C4}
.cfd .bx-code u {text-decoration:none;color:#FFD98A}
.cfd .bx-l {display:block;overflow:hidden;width:0;animation:bx-type 3.2s steps(18,end) infinite}
.cfd .bx-l+.bx-l {animation-delay:.6s}
.cfd .bx-caret {display:inline-block;width:6px;height:11px;margin-left:2px;vertical-align:-1px;background:#9BE7C4;animation:bx-blink 1s steps(1) infinite}
.cfd .bx-ok {position:absolute;right:6px;top:6px;padding:2px 7px;border-radius:999px;background:#28C840;color:#06351A;font:700 12px/1.4 system-ui,sans-serif;opacity:0;animation:bx-ok 3.2s ease infinite}
@keyframes bx-type {0%{width:0}35%,85%{width:100%}100%{width:100%}}
@keyframes bx-blink {50%{opacity:0}}
@keyframes bx-ok {0%,45%{opacity:0;transform:scale(.7)}55%,85%{opacity:1;transform:none}100%{opacity:0}}
.cfd .bx-chart {position:absolute;inset:8px 4px 6px;display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid rgba(255,255,255,.25)}
.cfd .bx-chart i {flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#8DBBFF,rgba(46,123,246,.35));transform-origin:bottom;animation:bx-grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.cfd .bx-chart i:nth-child(2) {animation-delay:.08s}
.cfd .bx-chart i:nth-child(3) {animation-delay:.16s}
.cfd .bx-chart i:nth-child(4) {animation-delay:.24s}
.cfd .bx-chart i:nth-child(5) {animation-delay:.32s}
.cfd .bx-chart i:nth-child(6) {animation-delay:.4s}
.cfd .bx-chart i.up {background:linear-gradient(180deg,#9BE7C4,rgba(22,163,122,.4));box-shadow:0 0 18px rgba(155,231,196,.45)}
.cfd .bx3:hover .bx-chart i {animation:bx-grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes bx-grow {from{transform:scaleY(0)}to{transform:none}}
@media (max-width:719px) {.cfd .bx-vis {flex-basis:96px;height:72px}
.cfd .eg-navy .eg-benefit.bx {min-height:110px}}
@media (prefers-reduced-motion:reduce) {.cfd .eg-navy .eg-benefit.bx, .cfd .bx-cv {transition:none}
.cfd .bx-l, .cfd .bx-caret, .cfd .bx-ok, .cfd .bx-chart i {animation:none}
.cfd .bx-l {width:auto}
.cfd .bx-ok {opacity:1}}
.cfd .hx-devlink {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 6px;color:#DCE6FA;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,gap .2s ease}
.cfd .hx-devlink:hover {color:#fff;gap:12px}
.cfd .hx-devlink i, .cfd .hx-devlink svg {width:18px;height:18px;display:inline-flex}
.cfd .hx-devlink:focus-visible {outline:3px solid #9BE7C4;outline-offset:3px;border-radius:6px}
.cfd .hx-try i, .cfd .hx-try svg {transition:transform .2s ease}
.cfd .hx-try:hover i, .cfd .hx-try:hover svg {transform:translateY(2px)}
.cfd .bx2 .bx-vis {flex-basis:178px}
.cfd .bx-code {padding:10px 12px}
@media (max-width:1099px) {.cfd .bx2 .bx-vis {flex-basis:150px}}
.cfd .pg-how {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cf-space-6);margin-top:var(--cf-space-8)}
@media (min-width:1000px) {.cfd .pg-how {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.cfd .pg-steps {display:grid;gap:var(--cf-space-3);margin:0;padding:0;list-style:none}
.cfd .pg-steps li {display:flex;gap:var(--cf-space-4);align-items:flex-start;padding:var(--cf-space-4) var(--cf-space-5);border-radius:16px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border)}
.cfd .pg-sn {flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--cf-color-primary-700),var(--cf-color-primary-900));color:#fff;font-weight:800}
.cfd .pg-steps h3 {margin:0 0 2px;font-size:17px;color:var(--cf-color-primary-900)}
.cfd .pg-steps p {margin:0;font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .pg-builders {padding:var(--cf-space-5);border-radius:16px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border)}
.cfd .pg-builders-k {margin:0 0 var(--cf-space-3);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-color-text-secondary)}
.cfd .pg-builders ul {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cfd .pg-builders li {display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:var(--cf-color-background-blue)}
.cfd .pg-builders b {font-size:15px;color:var(--cf-color-primary-900)}
.cfd .pg-builders li span {font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .pg-builders-n {margin:var(--cf-space-3) 0 0;font-size:13px;color:var(--cf-color-text-secondary)}
.cfd .sx-stats {display:flex;flex-wrap:wrap;gap:var(--cf-space-3);margin:var(--cf-space-6) 0 0;padding:0;list-style:none}
.cfd .sx-stats li {display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:14px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border)}
.cfd .sx-stats b {font-size:24px;color:var(--cf-color-primary-900);letter-spacing:-.02em}
.cfd .sx-stats span {font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .ax-cta .cf-actions {align-items:center}
.cfd .ax-link {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 6px;color:var(--cf-color-link);font-weight:600;text-decoration:none;transition:gap .2s ease}
.cfd .ax-link:hover {gap:12px;text-decoration:underline}
.cfd .ax-link i, .cfd .ax-link svg {width:18px;height:18px;display:inline-flex}
.cfd .ax-table table {table-layout:fixed}
.cfd .ax-table th, .cfd .ax-table td {overflow-wrap:normal;word-break:normal;hyphens:none}
.cfd .ax-table thead th:first-child {width:44%}
.cfd .ax-table thead th {font-size:13px;letter-spacing:.03em}
@media (min-width:1000px) {.cfd .ax-grid {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.cfd .ax-cost .ax-pro {text-align:start}
.cfd .hx-site {justify-content:space-between;gap:12px}
.cfd .hx-logo {display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:#0B1F3F;white-space:nowrap}
.cfd .hx-mark {position:relative;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#16A37A,#2E7BF6)}
.cfd .hx-mark::after {content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid #fff}
.cfd .hx-nav {display:flex;gap:16px;font-size:13px;color:#4A5B78;white-space:nowrap}
.cfd .hx-nav .on {position:relative;color:#1F66E5;font-weight:700}
.cfd .hx-nav .on::after {content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#1F66E5}
.cfd .hx-burger {display:none;flex-direction:column;gap:3px}
.cfd .hx-burger span {width:16px;height:2px;border-radius:2px;background:#0B1F3F}
.cfd .hx-intro {max-height:80px}
.cfd .hx-intro .hx-intro-t {margin:0 0 2px;font-size:17px;font-weight:800;color:#0B1F3F;letter-spacing:-.01em}
.cfd .hx-intro .hx-intro-s {margin:0;font-size:13px;font-weight:400;color:#4A5B78}
.cfd .hx-extra {display:none;margin-top:12px}
.cfd .eg-hero .hx-extra-k {margin:0 0 8px;font-size:13px;font-weight:800;color:#0B1F3F}
.cfd .hx-minis {display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfd .hx-minis span {display:flex;flex-direction:column;gap:4px}
.cfd .hx-minis img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.cfd .hx-minis b {font-size:12px;color:#0B1F3F}
.cfd .hx-devices {position:relative;z-index:3;display:flex;justify-content:center;gap:4px;width:max-content;margin:0 auto 16px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.cfd .hx-devices button {display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#C9D8F5;font-family: var(--cf-font);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.cfd .hx-devices button:hover {color:#fff}
.cfd .hx-devices button[aria-pressed="true"] {background:#fff;color:#0B1F3F;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.cfd .hx-devices button:focus-visible {outline:2px solid #9BE7C4;outline-offset:2px}
.cfd .hx-devices i, .cfd .hx-devices svg {width:16px;height:16px;display:inline-flex}
.cfd .hx-browser {width:100%;margin-left:auto;margin-right:auto;border:0 solid #0E1525;transition:width .6s cubic-bezier(.2,.8,.2,1),border-width .6s ease,border-radius .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.cfd .hx-demo[data-device="tablet"] .hx-browser {width:min(100%,560px);border-width:12px;border-radius:30px;transform:none}
.cfd .hx-demo[data-device="phone"] .hx-browser {width:300px;border-width:10px;border-radius:42px;transform:none}
.cfd .hx-demo[data-device="tablet"] .hx-chrome, .cfd .hx-demo[data-device="phone"] .hx-chrome {height:34px;justify-content:center;background:#F7F9FD}
.cfd .hx-demo[data-device="tablet"] .hx-lights, .cfd .hx-demo[data-device="phone"] .hx-lights, .cfd .hx-demo[data-device="tablet"] .hx-live, .cfd .hx-demo[data-device="phone"] .hx-live {display:none}
.cfd .hx-demo[data-device="tablet"] .hx-url, .cfd .hx-demo[data-device="phone"] .hx-url {flex:0 1 auto;height:22px;font-size:12px}
.cfd .hx-demo[data-device="phone"] .hx-chrome {height:58px;align-items:flex-end;padding-bottom:8px}
.cfd .hx-demo[data-device="phone"] .hx-browser::before {content:"";position:absolute;z-index:3;left:50%;top:6px;width:84px;height:20px;margin-left:-42px;border-radius:12px;background:#0E1525}
.cfd .hx-demo[data-device="phone"] .hx-page {padding:12px}
.cfd .hx-demo[data-device="phone"] .hx-nav {display:none}
.cfd .hx-demo[data-device="phone"] .hx-burger {display:flex}
.cfd .hx-demo[data-device="phone"] .hx-intro .hx-intro-t {font-size:15px}
.cfd .hx-demo[data-device="phone"] .hx-pb {font-size:13px;padding:5px 12px 5px 5px}
.cfd .hx-demo[data-device="phone"] .hx-pb-ic {width:30px;height:30px}
.cfd .hx-demo[data-device="phone"] .hx-pb-t {white-space:nowrap}
.cfd .hx-demo[data-device="phone"] [data-hx-verb] {display:none}
.cfd .hx-demo[data-device="phone"] .hx-pb-ic::after {left:12px;top:9px;border-width:6px 0 6px 9px}
.cfd .hx-demo[data-device="phone"] .hx-more {text-align:center}
.cfd .hx-demo[data-device="phone"] .hx-extra {display:block}
.cfd .hx-demo[data-device="phone"].is-playing .hx-extra {display:none}
.cfd .hx-demo[data-device="phone"].is-playing .hx-slot {aspect-ratio:auto;height:470px}
.cfd .hx-demo[data-device="phone"] .hx-cbtn span {display:none}
.cfd .hx-demo[data-device="phone"] .hx-cbtn {padding:0 9px}
.cfd .hx-demo[data-device="tablet"].is-playing .hx-slot {aspect-ratio:4/3}
@media (min-width:1000px) {.cfd .hx-layout.is-playing:has(.hx-demo[data-device="phone"]) {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cfd .hx-layout.is-playing:has(.hx-demo[data-device="phone"]) .hx-copy h1 {font-size:clamp(36px,4.2vw,58px)}}
.cfd .hx-sb, .cfd .hx-time, .cfd .hx-sig {display:none}
.cfd .hx-demo[data-device="phone"] .hx-browser, .cfd .hx-demo[data-device="tablet"] .hx-browser {border-width:0;overflow:visible;background:linear-gradient(150deg,#3a4458,#0e1421 45%,#232c3d);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #05080f,0 2px 0 rgba(255,255,255,.08),0 46px 70px -24px rgba(0,0,0,.8),0 20px 30px -18px rgba(0,0,0,.6)}
.cfd .hx-demo[data-device="phone"] .hx-browser {padding:10px;border-radius:50px}
.cfd .hx-demo[data-device="tablet"] .hx-browser {padding:16px;border-radius:38px;background:linear-gradient(150deg,#4a5468,#1a2232 50%,#2c3546)}
.cfd .hx-demo[data-device="phone"] .hx-sb, .cfd .hx-demo[data-device="tablet"] .hx-sb {display:block;position:absolute;border-radius:2px;background:linear-gradient(90deg,#0b0f18,#3a4458)}
.cfd .hx-demo[data-device="phone"] .hx-sb1 {left:-3px;top:110px;width:3px;height:28px}
.cfd .hx-demo[data-device="phone"] .hx-sb2 {left:-3px;top:150px;width:3px;height:48px}
.cfd .hx-demo[data-device="phone"] .hx-sb3 {right:-3px;top:136px;width:3px;height:66px;background:linear-gradient(270deg,#0b0f18,#3a4458)}
.cfd .hx-demo[data-device="tablet"] .hx-sb1 {top:-3px;right:64px;width:44px;height:3px;background:linear-gradient(0deg,#0b0f18,#3a4458)}
.cfd .hx-demo[data-device="tablet"] .hx-sb2 {right:-3px;top:74px;width:3px;height:36px;background:linear-gradient(270deg,#0b0f18,#3a4458)}
.cfd .hx-demo[data-device="tablet"] .hx-sb3 {right:-3px;top:118px;width:3px;height:36px;background:linear-gradient(270deg,#0b0f18,#3a4458)}
.cfd .hx-demo[data-device="phone"] .hx-chrome, .cfd .hx-demo[data-device="tablet"] .hx-chrome {height:auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;padding:8px 18px 8px;background:#fff;border-bottom:1px solid #EEF2F7}
.cfd .hx-demo[data-device="phone"] .hx-chrome {border-radius:40px 40px 0 0;padding-top:12px}
.cfd .hx-demo[data-device="tablet"] .hx-chrome {border-radius:22px 22px 0 0}
.cfd .hx-demo[data-device="phone"] .hx-time, .cfd .hx-demo[data-device="tablet"] .hx-time {display:block;order:1;font-size:12px;font-weight:700;color:#0d1a33}
.cfd .hx-demo[data-device="phone"] .hx-sig, .cfd .hx-demo[data-device="tablet"] .hx-sig {display:flex;order:2;align-items:flex-end;gap:2px}
.cfd .hx-sig i {display:block;width:3px;border-radius:1px;background:#0d1a33}
.cfd .hx-sig i:nth-child(1) {height:4px}
.cfd .hx-sig i:nth-child(2) {height:6px}
.cfd .hx-sig i:nth-child(3) {height:8px}
.cfd .hx-sig i:nth-child(4) {height:10px}
.cfd .hx-sig u {display:block;width:20px;height:10px;margin-left:5px;border:1.5px solid #0d1a33;border-radius:3px;background:linear-gradient(90deg,#0d1a33 70%,transparent 70%);background-clip:content-box;padding:1px}
.cfd .hx-demo[data-device="phone"] .hx-url, .cfd .hx-demo[data-device="tablet"] .hx-url {order:3;flex:0 0 100%;max-width:none;justify-content:center;height:26px;border:0;background:#EEF2F8;border-radius:9px}
.cfd .hx-demo[data-device="tablet"] .hx-url {flex-basis:auto;width:60%;margin:0 auto}
.cfd .hx-demo[data-device="phone"] .hx-page {border-radius:0 0 40px 40px;padding:12px 12px 26px;position:relative}
.cfd .hx-demo[data-device="tablet"] .hx-page {border-radius:0 0 22px 22px;position:relative;padding-bottom:22px}
.cfd .hx-demo[data-device="phone"] .hx-page::after, .cfd .hx-demo[data-device="tablet"] .hx-page::after {content:"";position:absolute;left:50%;bottom:8px;width:96px;height:4px;margin-left:-48px;border-radius:4px;background:#0d1a33;opacity:.85}
.cfd .hx-demo[data-device="phone"] .hx-browser::before {top:20px;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:#05080f}
.cfd .hx-demo[data-device="tablet"] .hx-browser::before {content:"";position:absolute;z-index:3;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#0b111d;box-shadow:inset 0 0 0 1.5px #1e2a40}
.cfd .hx-demo[data-device="phone"] .hx-chrome {min-height:0}
.cfd .hx-demo[data-device="tablet"] .hx-url {order:2}
.cfd .hx-demo[data-device="tablet"] .hx-sig {order:3}
.cfd .hx-float {right:auto;bottom:auto;transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.cfd .hx-demo[data-device="desktop"] .hx-f1 {left:80%;top:-3%}
.cfd .hx-demo[data-device="desktop"] .hx-f2 {left:87%;top:62%}
.cfd .hx-demo[data-device="desktop"] .hx-f3 {left:-6%;top:-4%}
.cfd .hx-demo[data-device="desktop"] .hx-f4 {left:-7%;top:40%}
.cfd .hx-demo[data-device="desktop"] .hx-f5 {left:16%;top:-11%}
.cfd .hx-demo[data-device="desktop"] .hx-f6 {left:89%;top:30%}
.cfd .hx-demo[data-device="desktop"] .hx-f7 {left:-5%;top:70%}
.cfd .hx-demo[data-device="desktop"] .hx-f8 {left:68%;top:-11%}
.cfd .hx-demo[data-device="tablet"] .hx-f1 {left:80%;top:-3%}
.cfd .hx-demo[data-device="tablet"] .hx-f2 {left:87%;top:64%}
.cfd .hx-demo[data-device="tablet"] .hx-f3 {left:-4%;top:4%}
.cfd .hx-demo[data-device="tablet"] .hx-f4 {left:-10%;top:38%}
.cfd .hx-demo[data-device="tablet"] .hx-f5 {left:10%;top:-11%}
.cfd .hx-demo[data-device="tablet"] .hx-f6 {left:89%;top:32%}
.cfd .hx-demo[data-device="tablet"] .hx-f7 {left:-9%;top:62%}
.cfd .hx-demo[data-device="tablet"] .hx-f8 {left:68%;top:-10%}
.cfd .hx-demo[data-device="phone"] .hx-f1 {left:78%;top:8%}
.cfd .hx-demo[data-device="phone"] .hx-f2 {left:76%;top:60%}
.cfd .hx-demo[data-device="phone"] .hx-f3 {left:8%;top:8%}
.cfd .hx-demo[data-device="phone"] .hx-f4 {left:4%;top:30%}
.cfd .hx-demo[data-device="phone"] .hx-f5 {left:8%;top:-10%}
.cfd .hx-demo[data-device="phone"] .hx-f6 {left:78%;top:34%}
.cfd .hx-demo[data-device="phone"] .hx-f7 {left:10%;top:50%}
.cfd .hx-demo[data-device="phone"] .hx-f8 {left:68%;top:-8%}
.cfd .hx-demo[data-device="phone"] .hx-browser {width:252px;padding:9px;border-radius:46px;margin-right:auto}
.cfd .hx-demo[data-device="phone"] .hx-chrome {border-radius:37px 37px 0 0;padding:10px 14px 7px}
.cfd .hx-demo[data-device="phone"] .hx-page {border-radius:0 0 37px 37px;padding:10px 10px 24px}
.cfd .hx-demo[data-device="phone"] .hx-browser::before {top:18px;width:64px;height:20px;margin-left:-32px}
.cfd .hx-demo[data-device="phone"] .hx-sb1 {top:96px}
.cfd .hx-demo[data-device="phone"] .hx-sb2 {top:134px;height:42px}
.cfd .hx-demo[data-device="phone"] .hx-sb3 {top:120px;height:58px}
.cfd .hx-demo[data-device="phone"] .hx-logo {font-size:13px}
.cfd .hx-demo[data-device="phone"] .hx-intro .hx-intro-s {font-size:12px}
.cfd .hx-demo[data-device="phone"] .hx-minis b {font-size:12px}
.cfd .hx-demo[data-device="phone"].is-playing .hx-slot {height:420px}
.cfd .hx-demo[data-device="tablet"] .hx-browser {margin-right:auto}
.cfd .hx-demo[data-device="phone"] .hx-rail, .cfd .hx-demo[data-device="tablet"] .hx-rail {justify-content:center}
@media (min-width:1200px) {.cfd .hx-code {transition:left .7s cubic-bezier(.2,.8,.2,1),bottom .7s cubic-bezier(.2,.8,.2,1),width .7s ease,opacity .35s ease,transform .35s ease}
.cfd .hx-demo[data-device="phone"] .hx-code {left:calc(50% - 126px - 302px);bottom:78px;width:290px}
.cfd .hx-demo[data-device="tablet"] .hx-code {left:-100px;bottom:-58px}
.cfd .hx-demo[data-device="tablet"] .hx-rail {justify-content:flex-start;padding-left:260px}}
@media (max-width:639px) {.cfd .hx-devices {display:none}}
@media (prefers-reduced-motion:reduce) {.cfd .hx-browser, .cfd .hx-devices button {transition:none}}
.cfd .bi {display:block;width:100%;height:100%;fill:currentColor}
.cfd .hx-builders {gap:5px}
.cfd .hx-builders li {display:inline-flex;align-items:center;gap:5px;padding:4px 8px}
.cfd .hx-builders .bi {width:14px;height:14px;flex:none;opacity:.9}
.cfd .pg-builders li {flex-direction:row;align-items:center;gap:12px}
.cfd .pg-bi {flex:none;display:inline-flex;width:36px;height:36px;padding:8px;border-radius:10px;background:#fff;box-shadow:0 4px 10px rgba(6,51,116,.1);transition:transform .25s ease}
.cfd .pg-builders li:hover .pg-bi {transform:translateY(-2px) rotate(-4deg)}
.cfd .pg-bt {display:flex;flex-direction:column;min-width:0}
.cfd .b-wordpress .pg-bi {color:#21759B}
.cfd .b-wix .pg-bi {color:#0C6EFC}
.cfd .b-squarespace .pg-bi {color:#111}
.cfd .b-shopify .pg-bi {color:#5E8E3E}
.cfd .b-webflow .pg-bi {color:#146EF5}
.cfd .b-googlesites .pg-bi {color:#4285F4}
.cfd .b-html5 .pg-bi {color:#E34F26}
@media (min-width:1000px) {.cfd .pg-how {align-items:stretch}
.cfd .pg-builders {display:flex;flex-direction:column}
.cfd .pg-builders ul {flex:1;grid-auto-rows:1fr}}
@media (min-width:1000px) {.cfd .pg-app {align-items:stretch}
.cfd .pg-grid {flex:1 1 0;min-height:420px;max-height:none}}
.cfd .pg-steps li {align-items:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cfd .pg-steps li>div:not(.st-vis) {flex:1;min-width:0}
.cfd .pg-steps li:hover {transform:translateY(-3px);border-color:var(--cf-color-primary-100);box-shadow:0 16px 32px rgba(6,51,116,.1)}
.cfd .st-vis {position:relative;flex:0 0 132px;height:78px}
.cfd .st-cv {position:absolute;left:50%;top:50%;width:74px;margin:-21px 0 0 -37px;border-radius:8px;overflow:hidden;border:2px solid #fff;box-shadow:0 8px 18px rgba(6,51,116,.22)}
.cfd .st-cv img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cfd .st-cv.c1 {transform:translate(-30px,6px) rotate(-10deg)}
.cfd .st-cv.c2 {transform:translate(30px,6px) rotate(10deg)}
.cfd .st-cv.c3 {z-index:1;animation:st-pick 4.8s ease-in-out infinite}
.cfd .st-play {position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#2E7BF6;animation:st-ring 4.8s ease-out infinite}
.cfd .st-play::after {content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}
@keyframes st-pick {0%,6%{transform:none}16%,34%{transform:translateY(-8px) scale(1.14);box-shadow:0 0 0 3px #2E7BF6,0 14px 24px rgba(6,51,116,.3)}46%,100%{transform:none}}
@keyframes st-ring {0%,14%{box-shadow:0 0 0 0 rgba(46,123,246,.6)}32%,100%{box-shadow:0 0 0 12px rgba(46,123,246,0)}}
.cfd .st-code {position:absolute;inset:6px 0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:22px 10px 10px 12px;border-radius:10px;background:#0A1A36;box-shadow:0 10px 22px rgba(6,24,56,.25);overflow:hidden}
.cfd .st-ln {position:relative;z-index:1;display:flex;gap:4px}
.cfd .st-ln i {display:block;width:var(--w);height:6px;border-radius:3px}
.cfd .st-ln .t {background:#8FB8FF}
.cfd .st-ln .a {background:#9BE7C4}
.cfd .st-ln .s {background:#FFD98A}
.cfd .st-sel {position:absolute;left:8px;right:8px;top:18px;bottom:6px;border-radius:5px;background:rgba(46,123,246,.45);transform-origin:left;transform:scaleX(0);animation:st-select 4.8s ease infinite}
.cfd .st-chip {position:absolute;right:6px;top:5px;display:grid;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:#E6EEFF;font:700 12px/1.5 system-ui,sans-serif}
.cfd .st-chip>span {grid-area:1/1}
.cfd .st-c2 {opacity:0;color:#06351A}
.cfd .st-chip {animation:st-chip 4.8s ease infinite}
.cfd .st-c1 {animation:st-c1 4.8s ease infinite}
.cfd .st-c2 {animation:st-c2 4.8s ease infinite}
@keyframes st-select {0%,30%{transform:scaleX(0);opacity:1}46%,66%{transform:scaleX(1);opacity:1}76%,100%{transform:scaleX(1);opacity:0}}
@keyframes st-chip {0%,48%{background:rgba(255,255,255,.12)}52%,74%{background:#28C840}80%,100%{background:rgba(255,255,255,.12)}}
@keyframes st-c1 {0%,48%{opacity:1}52%,74%{opacity:0}80%,100%{opacity:1}}
@keyframes st-c2 {0%,48%{opacity:0}52%,74%{opacity:1}80%,100%{opacity:0}}
.cfd .st-win {position:absolute;inset:4px 0;border-radius:10px;background:#fff;border:1px solid var(--cf-color-border);box-shadow:0 10px 22px rgba(6,51,116,.14);overflow:hidden}
.cfd .st-bar {display:flex;gap:3px;height:13px;padding:4px 7px;background:#F3F6FB;border-bottom:1px solid var(--cf-color-border)}
.cfd .st-bar i {width:5px;height:5px;border-radius:50%;background:#C3CDDC}
.cfd .st-body {display:grid;grid-template-columns:.8fr 1.2fr;gap:7px;align-items:center;padding:8px}
.cfd .st-sk {display:flex;flex-direction:column;gap:5px}
.cfd .st-sk i {display:block;height:5px;border-radius:3px;background:#DCE5F2}
.cfd .st-sk .s {width:60%}
.cfd .st-slot {position:relative;display:block;aspect-ratio:16/9;border-radius:6px;border:1.5px dashed #9FB4DA;overflow:hidden}
.cfd .st-slot img {display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.6);animation:st-drop 4.8s cubic-bezier(.2,.8,.2,1) infinite}
.cfd .st-live {position:absolute;right:6px;bottom:5px;display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;background:#E7F8EF;color:#0F7A47;font:700 12px/1.6 system-ui,sans-serif;opacity:0;animation:st-live 4.8s ease infinite}
.cfd .st-live i {width:6px;height:6px;border-radius:50%;background:#16A37A}
@keyframes st-drop {0%,68%{opacity:0;transform:scale(.6)}78%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes st-live {0%,80%{opacity:0;transform:translateY(4px)}86%,94%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:479px) {.cfd .st-vis {display:none}}
@media (prefers-reduced-motion:reduce) {.cfd .pg-steps li, .cfd .pg-bi {transition:none}
.cfd .st-cv.c3, .cfd .st-play, .cfd .st-sel, .cfd .st-chip, .cfd .st-c1, .cfd .st-c2, .cfd .st-slot img, .cfd .st-live {animation:none}
.cfd .st-slot img, .cfd .st-live {opacity:1;transform:none}}
.cfd .sx-areas li {column-gap:12px;transition:transform .25s ease,box-shadow .25s ease}
.cfd .sx-areas li:hover {transform:translateY(-3px);box-shadow:0 12px 24px rgba(6,51,116,.12)}
.cfd .sx-ic {grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;box-shadow:0 8px 16px -6px currentColor}
.cfd .sx-ic img {display:block;width:30px;height:30px;object-fit:contain}
.cfd .sx-ic.sx-a1 {background:#2E7BF6;color:#2E7BF6}
.cfd .sx-ic.sx-a2 {background:#7C5CFF;color:#7C5CFF}
.cfd .sx-ic.sx-a3 {background:#F28C28;color:#F28C28}
.cfd .sx-ic.sx-a4 {background:#16A37A;color:#16A37A}
.cfd .sx-ic.sx-a5 {background:#E0457B;color:#E0457B}
.cfd .sx-areas li:hover .sx-ic img {animation:sx-wiggle .6s ease}
@keyframes sx-wiggle {30%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg)}}
.cfd .sx-wall {display:flex;flex-direction:column;gap:18px;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cfd .sx-mq {overflow:hidden}
.cfd .sx-track {display:flex;width:max-content;animation:sx-run 90s linear infinite}
.cfd .sx-mq.r2 .sx-track {animation-direction:reverse;animation-duration:100s}
.cfd .sx-mq.r3 .sx-track {animation-duration:80s}
.cfd .sx-wall:hover .sx-track {animation-play-state:paused}
.cfd .sx-logos .sx-track img {display:block;flex:none;width:2300px;max-width:2300px;height:auto;margin:0;opacity:.8;mix-blend-mode:normal}
@keyframes sx-run {to{transform:translateX(-33.3333%)}}
@media (max-width:719px) {.cfd .sx-logos .sx-track img {width:1500px;max-width:1500px}
.cfd .sx-wall {gap:12px}}
@media (prefers-reduced-motion:reduce) {.cfd .sx-track {animation:none}
.cfd .sx-areas li {transition:none}}
.cfd .hx-frame {overflow:hidden}
.cfd .hx-demo[data-device="phone"].is-playing .hx-slot {border-radius:12px;background:#0B1F3F}
.cfd .hx-demo[data-device="phone"] .hx-frame {top:36px}
.cfd .hx-demo[data-device="phone"].is-playing .hx-slides, .cfd .hx-demo[data-device="phone"].is-playing .hx-start {visibility:hidden}
.cfd .hx-demo[data-device="phone"] .hx-ctl {top:4px;right:4px;gap:4px}
.cfd .hx-demo[data-device="phone"] .hx-cbtn {min-height:28px;min-width:28px;padding:0;justify-content:center;background:rgba(255,255,255,.12)}
.cfd .hx-demo[data-device="phone"] .hx-cbtn:hover {background:rgba(255,255,255,.22)}
.cfd .hx-demo[data-device="phone"] .hx-slot:fullscreen .hx-frame {top:0}
.cfd .pg-copy {white-space:nowrap;flex:none}
.cfd .pg-file {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfd .hx-demo.is-playing .hx-slot {background:#0B1F3F}
.cfd .hx-demo.is-playing .hx-slides, .cfd .hx-demo.is-playing .hx-start {visibility:hidden}
.cfd .hx-frame {top:40px}
.cfd .hx-ctl {top:6px;right:6px;gap:4px}
.cfd .hx-cbtn {min-height:28px;padding:0 10px}
.cfd .hx-demo[data-device] .hx-slot:fullscreen .hx-frame {top:40px}
.cfd .pg-stage.is-on {background:#0B1F3F}
.cfd .pg-stage.is-on .pg-frame {top:44px}
.cfd .pg-ctl {inset:6px 6px auto auto}
@media (max-width:639px) {.cfd .hx-nav {display:none}
.cfd .hx-burger {display:flex}}
@media (max-width:560px) {.cfd .pg-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cfd .pg-cname {font-size:14px}
.cfd .pg-cmeta {font-size:12px}}
@media (max-width:479px) {.cfd .ax-table thead th {font-size:12px;letter-spacing:0;padding:10px 8px}
.cfd .ax-table th, .cfd .ax-table td {padding:12px 10px}}
@media (max-width:479px) {.cfd .pg-lang {display:none}
.cfd .pg-copy {margin-left:auto;padding:0 12px}
.cfd .pg-snip figcaption {gap:8px;padding-left:12px}}