/* Souqly – marketing site */
:root{
  --ink:#0b1b3a;--ink2:#33415f;--muted:#5b6785;--line:#e6e9f2;--bg:#ffffff;--soft:#f5f7fc;
  --blue:#0a84ff;--indigo:#3b5bfd;--violet:#7b3fe4;--orange:#ff8a1f;--green:#16a34a;
  --grad:linear-gradient(115deg,#0a84ff 0%,#3b5bfd 45%,#7b3fe4 100%);
  --r:16px;--shadow:0 1px 2px rgba(11,27,58,.05),0 8px 30px rgba(11,27,58,.08);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}
html[dir=rtl]{--font:'Cairo',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0;line-height:1.35}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.wrap.narrow{width:min(820px,100% - 32px)}
.muted{color:var(--muted)}.small{font-size:.88rem}.center{text-align:center}.right{text-align:end}
.ic{flex:none;vertical-align:middle}
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;font:600 15px/1.2 var(--font);border:1px solid transparent;cursor:pointer;transition:.18s ease;text-decoration:none!important;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(59,91,253,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(59,91,253,.45)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#c7cee0;background:var(--soft)}
.btn-white{background:#fff;color:var(--indigo)}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(230,233,242,.7)}
.nav-in{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.03em;text-decoration:none!important}
.brand img{border-radius:8px}
.nav-links{display:flex;gap:4px;margin-inline-start:12px}
.nav-links a{color:var(--ink2);font-weight:600;font-size:15px;padding:8px 12px;border-radius:10px}
.nav-links a:hover{background:var(--soft);text-decoration:none;color:var(--ink)}
.nav-cta{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang-switch{font-weight:700;color:var(--ink2);padding:8px 10px;border-radius:10px;font-size:14px}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 80px}
.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 500px at 85% -10%,#eef2ff 0,transparent 60%),linear-gradient(#fff,#f8f9ff)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 14s ease-in-out infinite}
.b1{width:420px;height:420px;background:#bfe0ff;top:-120px;inset-inline-end:8%}
.b2{width:340px;height:340px;background:#e2d4ff;top:180px;inset-inline-end:-80px;animation-delay:-5s}
.b3{width:260px;height:260px;background:#ffe1c4;bottom:-80px;inset-inline-start:30%;animation-delay:-9s}
@keyframes float{50%{transform:translate(30px,20px) scale(1.06)}}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--ink2);box-shadow:var(--shadow)}
.pill .ic{color:var(--orange)}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;margin:20px 0 18px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:620px;margin:0 0 28px}
.claim{display:flex;gap:10px;flex-wrap:wrap;max-width:600px}
.claim-field{flex:1;min-width:240px;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:0 16px;box-shadow:var(--shadow);direction:ltr}
.claim-field:focus-within{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(59,91,253,.12)}
.claim-field input{flex:1;border:0;outline:0;font:600 16px var(--font);padding:15px 0;min-width:60px;background:none;color:var(--ink)}
.claim-field span{color:var(--muted);font-weight:600}
.ticks{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0;color:var(--ink2);font-size:14.5px;font-weight:600}
.ticks li{display:flex;align-items:center;gap:6px}.ticks .ic{color:var(--green)}

/* Hero art */
.hero-art{position:relative;min-height:460px}
.mock-dash{position:absolute;inset-inline-start:0;top:10px;width:92%;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(11,27,58,.16);overflow:hidden;transform:perspective(1400px) rotateY(-6deg) rotateX(3deg)}
html[dir=rtl] .mock-dash{transform:perspective(1400px) rotateY(6deg) rotateX(3deg)}
.md-top{display:flex;gap:6px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:#fafbff;direction:ltr}
.md-top i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.md-top i:nth-child(2){background:#febc2e}.md-top i:nth-child(3){background:#28c840}
.md-top span{margin-inline-start:12px;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 10px;border-radius:6px}
.md-body{display:flex;min-height:330px}
.md-side{width:62px;border-inline-end:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:12px;background:#fbfcff}
.md-side b{height:28px;border-radius:8px;background:var(--grad)}
.md-side span{height:10px;border-radius:5px;background:#e8ebf5}.md-side span.on{background:#c9d3ff}
.md-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px}
.md-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.md-stats div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.md-stats small{font-size:10.5px;color:var(--muted)}.md-stats strong{font-size:18px}.md-stats em{font-style:normal;font-size:10.5px;color:var(--green);font-weight:700}
.md-chart{height:130px;display:flex;align-items:flex-end;gap:6px;border:1px solid var(--line);border-radius:12px;padding:14px}
.md-chart span{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#7b3fe4,#0a84ff);opacity:.85;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}
.md-chart span:nth-child(odd){animation-delay:.1s}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}}
.md-rows{display:flex;flex-direction:column;gap:8px}
.md-rows div{display:flex;align-items:center;gap:10px}
.md-rows i{width:24px;height:24px;border-radius:7px;background:#eef1fa}.md-rows span{flex:1;height:8px;border-radius:4px;background:#eef1fa}
.md-rows b{font-size:10px;padding:2px 8px;border-radius:99px;background:#fff4e6;color:#c2410c}.md-rows b.g{background:#e8f8ee;color:#15803d}
.mock-phone{position:absolute;inset-inline-end:0;bottom:-10px;width:200px;height:390px;background:#fff;border-radius:30px;border:7px solid #0b1b3a;box-shadow:0 30px 60px rgba(11,27,58,.25);padding:26px 12px 12px;display:flex;flex-direction:column;gap:10px;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.mp-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:60px;height:14px;background:#0b1b3a;border-radius:10px}
.mp-hero{border-radius:14px;padding:14px;background:linear-gradient(135deg,#ff8a1f,#ff5e3a);color:#fff;display:flex;flex-direction:column}
.mp-hero span{font-size:10px;opacity:.9}.mp-hero b{font-size:16px}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mp-grid div{display:flex;flex-direction:column;gap:4px}.mp-grid i{height:62px;border-radius:10px}
.mp-grid .c1{background:#dbeafe}.mp-grid .c2{background:#ede9fe}.mp-grid .c3{background:#ffedd5}.mp-grid .c4{background:#dcfce7}
.mp-grid span{height:6px;border-radius:3px;background:#eef1fa;width:80%}.mp-grid b{font-size:11px}
.mp-btn{margin-top:auto;background:var(--grad);color:#fff;text-align:center;border-radius:10px;padding:9px;font-size:12px;font-weight:700}
.float-card{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;box-shadow:var(--shadow);animation:bob 7s ease-in-out infinite}
.float-card .ic{color:#fff;background:var(--green);border-radius:50%;padding:3px;width:22px;height:22px}
.fc1{top:-8px;inset-inline-end:16%}.fc2{bottom:40px;inset-inline-start:-14px;animation-delay:-3s}.fc2 .ic{background:var(--indigo)}

/* Trust */
.trust{border-block:1px solid var(--line);background:#fff;padding:22px 0}
.trust-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.paylogos{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.paylogos span{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.paylogos.big{margin:0;gap:12px}.paylogos.big span{font-size:15px;padding:8px 16px;border-radius:10px}

/* Sections */
.section{padding:88px 0}
.section.alt{background:var(--soft)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
.sec-head h2{font-size:clamp(28px,3.6vw,44px);font-weight:800}
.sec-head .lead{margin-inline:auto}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--indigo);margin-bottom:12px}
html[dir=rtl] .eyebrow{letter-spacing:0}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.type-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;transition:.25s;position:relative;overflow:hidden}
.type-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;opacity:.12}
.t-store::after{background:var(--blue)}.t-port::after{background:var(--violet)}.t-serv::after{background:var(--orange)}
.type-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tc-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:18px}
.t-store .tc-ic{background:linear-gradient(135deg,#0a84ff,#3b5bfd)}.t-port .tc-ic{background:linear-gradient(135deg,#7b3fe4,#b05bff)}.t-serv .tc-ic{background:linear-gradient(135deg,#ff8a1f,#ff5e3a)}
.type-card h3{font-size:22px}.type-card p{color:var(--muted)}
.type-card a{font-weight:700;display:inline-flex;align-items:center;gap:6px}
html[dir=rtl] .ic-arrow,html[dir=rtl] .btn .ic:last-child,html[dir=rtl] .type-card a .ic{transform:scaleX(-1)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s}
.feat:hover{border-color:#cfd6ea;box-shadow:var(--shadow)}
.feat-ic{width:44px;height:44px;border-radius:12px;background:#eef1ff;color:var(--indigo);display:grid;place-items:center;margin-bottom:14px}
.feat-ic.big{width:60px;height:60px;border-radius:16px;background:var(--grad);color:#fff;margin:0}
.feat h3{font-size:18px;margin-bottom:6px}.feat p{color:var(--muted);margin:0;font-size:15px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;position:relative}
.steps li span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;margin-bottom:14px;font-size:18px}
.steps p{color:var(--muted);margin:0}

/* Theme cards */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-bottom:30px}
.theme-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
.theme-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tp{background:var(--bg);padding:12px;display:flex;flex-direction:column;gap:10px;aspect-ratio:16/11;border-bottom:1px solid var(--line)}
.tp-nav{display:flex;align-items:center;gap:6px}.tp-nav b{width:38px;height:9px;border-radius:3px;background:var(--t)}.tp-nav span{width:18px;height:5px;border-radius:3px;background:var(--t);opacity:.3}.tp-nav span:first-of-type{margin-inline-start:auto}.tp-nav i{width:16px;height:16px;border-radius:50%;background:var(--p)}
.tp-hero{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:10px;background:var(--s);border-radius:var(--r);padding:12px;align-items:center}
.tp-hero div:first-child{display:flex;flex-direction:column;gap:6px}
.tp-hero b{height:10px;width:90%;border-radius:3px;background:var(--t)}.tp-hero span{height:5px;width:75%;border-radius:3px;background:var(--t);opacity:.3}.tp-hero span.short{width:50%}
.tp-hero em{width:46px;height:14px;border-radius:var(--r);background:var(--p);margin-top:4px}
.tp-img{height:100%;min-height:50px;border-radius:var(--r);background:linear-gradient(135deg,var(--p),var(--a))}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tp-grid div{height:26px;border-radius:calc(var(--r)/1.5);background:var(--s)}
.theme-meta{padding:16px 18px}.theme-meta h3{margin:0 0 4px;font-size:18px}.theme-meta p{margin:0 0 10px;color:var(--muted);font-size:14px}
.swatches{display:flex;gap:6px}.swatches i{width:20px;height:20px;border-radius:50%;border:1px solid var(--line)}

/* Pricing */
.period-toggle{display:flex;gap:4px;width:max-content;margin:0 auto 34px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px}
.period-toggle button{border:0;background:none;padding:10px 20px;border-radius:10px;font:700 15px var(--font);cursor:pointer;color:var(--ink2);display:flex;gap:8px;align-items:center}
.period-toggle button.on{background:var(--ink);color:#fff}
.period-toggle em{font-style:normal;font-size:11.5px;background:#e8f8ee;color:#15803d;padding:2px 8px;border-radius:99px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-direction:column}
.plan.popular{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 20px 50px rgba(59,91,253,.18);transform:scale(1.03)}
.badge-pop{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:12.5px;font-weight:800;padding:5px 14px;border-radius:99px;white-space:nowrap}
html[dir=rtl] .badge-pop{transform:translateX(50%)}
.plan h3{font-size:20px;margin-bottom:10px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.price strong{font-size:44px;font-weight:800;letter-spacing:-.03em}.price span{color:var(--muted);font-weight:600}.price span b{font-weight:600}
.plan ul{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink2)}.plan li .ic{color:var(--green);margin-top:3px}
.paybox{text-align:center;margin-top:50px;background:var(--soft);border-radius:20px;padding:30px}.paybox .paylogos{justify-content:center;margin:14px 0}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:22px;color:var(--indigo);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 18px;color:var(--muted)}

/* CTA band */
.cta-band{background:var(--grad);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.08);top:-250px;inset-inline-end:-100px}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative}
.cta-in h2{font-size:clamp(26px,3vw,38px);margin-bottom:8px}.cta-in p{margin:0;opacity:.9;font-size:17px}

/* Footer */
.foot{background:#0b1b3a;color:#c5cde3;padding:64px 0 24px}
.foot .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot h4{color:#fff;font-size:15px;margin-bottom:14px}
.foot a{color:#c5cde3;display:block;padding:4px 0;font-size:14.5px}
.foot a:hover{color:#fff}
.foot .muted{color:#8f9bbb;max-width:340px}
.foot .paylogos span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#dfe5f5}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:14px}
.foot-bottom a{display:inline;color:#fff;font-weight:700}
.wa-float{position:fixed;bottom:22px;inset-inline-end:22px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);transition:.2s}
.wa-float:hover{transform:scale(1.08)}

/* Inner pages */
.page-hero{padding:80px 0 40px;text-align:center;background:radial-gradient(900px 300px at 50% -20%,#eaf0ff,transparent),#fff}
.page-hero h1{font-size:clamp(32px,4.6vw,54px);font-weight:800;max-width:900px;margin-inline:auto}
.page-hero .lead{margin-inline:auto}
.page-hero.small{padding:64px 0 24px}
.fgroup{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--line)}
.fg-head{display:flex;gap:18px;align-items:flex-start}.fg-head h2{font-size:28px;margin-bottom:6px}
.fg-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.fg-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink2)}.fg-list .ic{color:var(--green);margin-top:3px}
.prose{font-size:17px;color:var(--ink2)}.prose h2{margin-top:1.6em;font-size:26px}.prose h3{margin-top:1.3em}.prose img{border-radius:14px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.post-title{font-size:clamp(30px,4vw,46px)}
.post-cover{width:100%;border-radius:18px;margin:18px 0 28px}
.post-cta{margin-top:40px;text-align:center}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;color:var(--ink);transition:.2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.pc-img{aspect-ratio:16/9;background:var(--grad) center/cover}
.pc-body{padding:18px}.pc-body h3{font-size:18px;margin:6px 0 0}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:28px}
.contact-side{display:flex;flex-direction:column;gap:14px}
.contact-tile{display:flex;gap:16px;align-items:center;background:var(--soft);border-radius:16px;padding:20px;color:var(--ink)}
.contact-tile:hover{text-decoration:none;background:#eef1fb}.contact-tile .ic{color:var(--indigo)}.contact-tile div{display:flex;flex-direction:column}.contact-tile span{color:var(--muted)}

/* Forms & auth */
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--ink2);margin-bottom:14px}
.form input,.form select,.form textarea{font:500 15px var(--font);padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%;transition:.15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(59,91,253,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label.check{flex-direction:row;align-items:center;gap:10px;font-weight:500}.form label.check input{width:18px;height:18px;accent-color:var(--indigo)}
.addon{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.addon:focus-within{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(59,91,253,.12)}
.addon input{border:0!important;box-shadow:none!important;border-radius:0!important}
.addon span{padding:0 12px;color:var(--muted);background:var(--soft);align-self:stretch;display:flex;align-items:center;font-size:14px;white-space:nowrap}
.slug-status{font-weight:600;font-size:12.5px}.slug-status.ok{color:var(--green)}.slug-status.bad{color:#dc2626}
.auth{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:40px 16px;background:radial-gradient(800px 400px at 50% 0,#eef2ff,transparent),var(--soft)}
.auth-card{width:min(560px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:0 20px 60px rgba(11,27,58,.1)}
.auth-card h1{font-size:28px;margin-top:16px}
.auth-logo{display:block;width:max-content}
.types-pick{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.types-pick legend{font-weight:700;font-size:14px;margin-bottom:8px;color:var(--ink2)}
.pick input,.pick-plan input,.method input,.seg input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:flex;flex-direction:column;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:14px;padding:14px 8px;font-weight:700;font-size:14px;cursor:pointer;text-align:center;transition:.15s}
.pick input:checked+span{border-color:var(--indigo);background:#f1f4ff;color:var(--indigo);box-shadow:0 0 0 3px rgba(59,91,253,.12)}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-weight:600;font-size:14.5px}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.alert-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.alert-warn{background:#fffbeb;color:#b45309;border:1px solid #fde68a}

/* Checkout */
.checkout{padding:40px 0 80px;background:var(--soft);min-height:100vh}
.checkout-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.checkout h1{font-size:28px;margin:14px 0 4px}
.step-title{display:flex;align-items:center;gap:10px;font-size:17px;margin:26px 0 12px}
.step-title span{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}
.plan-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick-plan span{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.pick-plan small{color:var(--muted)}
.pick-plan input:checked+span,.method input:checked+span{border-color:var(--indigo);background:#f1f4ff;box-shadow:0 0 0 3px rgba(59,91,253,.12)}
.seg{display:flex;gap:6px;background:var(--soft);padding:5px;border-radius:12px;margin-top:12px}
.seg label{flex:1;margin:0!important}
.seg span{display:block;text-align:center;padding:10px;border-radius:9px;cursor:pointer;font-weight:700;color:var(--ink2)}
.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.method span{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;height:100%}
.method .ic{color:var(--indigo);margin-bottom:4px}.method small{color:var(--muted);font-weight:500}
.transfer-box{background:linear-gradient(135deg,#f1f4ff,#f7f0ff);border:1px dashed #b8c3ff;border-radius:16px;padding:18px;margin-bottom:16px}
.transfer-box p{margin:0 0 8px}
.copy-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-line b{font-size:24px;letter-spacing:.04em}
.copy-line input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:600 14px var(--font)}
.amount-line{font-size:16px;margin-top:10px!important}
.upload input{padding:10px!important;border-style:dashed!important}
.summary{position:sticky;top:90px}
.ticks-col{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.ticks-col li{display:flex;gap:8px;color:var(--ink2)}.ticks-col .ic{color:var(--green);margin-top:3px}
.sum-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;font-size:18px}
.sum-total b{font-size:26px}
.status-box{text-align:center}
.status-ic{width:76px;height:76px;margin:10px auto 16px;border-radius:50%;display:grid;place-items:center;background:#fff7ed;color:var(--orange)}
.s-approved .status-ic{background:#f0fdf4;color:var(--green)}.s-rejected .status-ic{background:#fef2f2;color:#dc2626}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;text-align:start;background:var(--soft);border-radius:14px;padding:16px;margin:18px 0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}.hero-art{min-height:420px;max-width:600px;margin-inline:auto;width:100%}
  .types,.feat-grid,.steps,.plans{grid-template-columns:1fr 1fr}.plan.popular{transform:none}
  .foot-grid{grid-template-columns:1fr 1fr}.fgroup{grid-template-columns:1fr}.contact-grid,.checkout-grid{grid-template-columns:1fr}.summary{position:static}
}
@media (max-width:1060px){
  .nav-links{display:none;position:absolute;top:70px;inset-inline:0;background:#fff;flex-direction:column;padding:12px 16px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);margin:0;z-index:60}
  .menu-open .nav-links{display:flex}.burger{display:block}
}
@media (max-width:760px){
  .hide-sm{display:none}
  .types,.feat-grid,.steps,.plans,.fg-list,.row2,.plan-pick{grid-template-columns:1fr}
  .section{padding:64px 0}.hero{padding:44px 0 60px}
  .mock-phone{width:160px;height:320px}.hero-art{min-height:360px}.md-stats strong{font-size:14px}
  .foot-grid{grid-template-columns:1fr}.auth-card{padding:24px}
  .types-pick{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html,body{overflow-x:hidden}@supports (overflow:clip){html,body{overflow-x:clip}}.claim-field input{min-width:0}
.nav-in{min-width:0}.nav-cta{flex-shrink:0}
.hero-grid>*{min-width:0}@media (max-width:760px){.claim-field{min-width:0;flex-basis:100%}.claim .btn{width:100%}}

/* =====================================================================
   v2 motion design – marketing site
   ===================================================================== */
.nav{transition:background .3s,box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px -20px rgba(11,27,58,.35)}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in,.reveal.in{opacity:1;transform:none}
[data-spot]{--mx:50%;--my:50%}

/* Hero v2 */
.hero2{position:relative;overflow:hidden;padding:64px 0 90px;min-height:calc(100vh - 70px);display:flex;align-items:center;isolation:isolate}
.h2-bg{position:absolute;inset:0;z-index:-1;background:#f7f8ff}
#meshCanvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(60px) saturate(130%);opacity:.9}
.h2-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(59,91,253,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(59,91,253,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(500px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 60%)}
.h2-grid-in{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center;width:min(1280px,100% - 32px)}
.h2-grid-in>*{min-width:0}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pd 1.8s infinite}
@keyframes pd{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.h2-title{font-size:clamp(40px,5.8vw,76px);font-weight:800;line-height:1.02;margin:22px 0 22px;letter-spacing:-.035em}
html[dir=rtl] .h2-title{line-height:1.25;letter-spacing:0}
.h2-title .ln{display:block}.js .h2-title .ln{opacity:0;transform:translateY(40px);animation:lnIn 1s cubic-bezier(.2,.8,.2,1) forwards}
.h2-title .ln:nth-child(2){animation-delay:.12s}.h2-title .ln:nth-child(3){animation-delay:.24s}
@keyframes lnIn{to{opacity:1;transform:none}}
.rot{position:relative;height:1.1em;overflow:hidden}
html[dir=rtl] .rot{height:1.35em}
.rot-w{position:absolute;inset-inline-start:0;top:0;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(110%);opacity:0;transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .5s}
.rot-w.on{transform:none;opacity:1}
.rot-w.out{transform:translateY(-110%);opacity:0}
.hero2 .lead{max-width:560px}
.claim-field{flex-direction:row}
.claim-field span{padding-inline-end:2px}
.h2-stage{position:relative;transform-style:preserve-3d;transition:transform .2s ease-out;animation:stageIn 1.3s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes stageIn{from{opacity:0;transform:translateY(60px) rotateX(10deg)}}
.dev-browser{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(11,27,58,.08);box-shadow:0 50px 100px -30px rgba(23,35,90,.45),0 0 0 8px rgba(255,255,255,.5)}
.db-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f4f6fc;border-bottom:1px solid #e6e9f2;direction:ltr}
.db-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.db-bar i:nth-child(2){background:#febc2e}.db-bar i:nth-child(3){background:#28c840}
.db-bar span{margin-inline-start:12px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 12px;border-radius:7px}
.db-video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef1fa}
.dev-phone{position:absolute;width:30%;aspect-ratio:9/19;inset-inline-end:-6%;bottom:-12%;border-radius:30px;border:7px solid #0b1b3a;background:#0b1b3a;overflow:hidden;box-shadow:0 40px 70px -20px rgba(11,27,58,.55);animation:bob 7s ease-in-out infinite}
.dev-phone video{width:100%;height:100%;object-fit:cover}
.dp-notch{position:absolute;z-index:2;top:6px;left:50%;transform:translateX(-50%);width:34%;height:14px;background:#0b1b3a;border-radius:10px}
.chip{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid rgba(11,27,58,.08);border-radius:16px;padding:10px 14px;box-shadow:0 20px 40px -18px rgba(11,27,58,.35);font-size:13px;animation:chipIn .9s cubic-bezier(.3,1.5,.5,1) both,bob 6s ease-in-out infinite}
.chip b{display:block;font-size:13px}.chip small{color:var(--muted)}.chip strong{font-size:22px;color:var(--green);margin-inline-start:6px}
.ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:900}
.ci.g{background:#22c55e}.ci.b{background:var(--indigo)}.ci.y{background:#ffc439;color:#003087;font-style:italic}
.c1{top:-24px;inset-inline-start:-34px;animation-delay:.9s,0s}
.c2{top:40%;inset-inline-start:-58px;animation-delay:1.2s,-2s}
.c3{bottom:-30px;inset-inline-start:22%;animation-delay:1.5s,-4s}
@keyframes chipIn{from{opacity:0;transform:scale(.6) translateY(20px)}}
.meter{display:block;width:90px;height:6px;border-radius:9px;background:#e6e9f2;overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;width:96%;background:linear-gradient(90deg,#22c55e,#86efac);animation:meter 2.2s cubic-bezier(.2,.8,.2,1) 1.4s both}
@keyframes meter{from{width:0}}
.h2-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(11,27,58,.25);border-radius:20px}
.h2-scroll span{position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--indigo);animation:cue 1.8s infinite}
@keyframes cue{60%{transform:translateY(13px);opacity:0}}

/* Ticker */
.ticker-band{background:#0b1b3a;color:#fff;padding:22px 0;overflow:hidden;transform:skewY(-1.5deg);margin:-10px 0 0}
.tk-row{overflow:hidden}
.tk-track{display:flex;gap:28px;width:max-content;animation:tk 40s linear infinite;align-items:center;padding:6px 0}
.tk-row.rev .tk-track{animation-direction:reverse;animation-duration:50s}
.tk-track span{font-weight:800;font-size:clamp(20px,2.6vw,34px);white-space:nowrap;letter-spacing:-.02em}
.tk-track span.o{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}
.tk-track i{font-style:normal;color:var(--orange)}
@keyframes tk{to{transform:translateX(-50%)}}
html[dir=rtl] .tk-track{animation-name:tkr}
@keyframes tkr{to{transform:translateX(50%)}}

/* Type cards v2: spotlight border */
.type-card{background:#fff}
.type-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(240px circle at var(--mx) var(--my),var(--indigo),transparent 70%);-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}
.type-card:hover::before{opacity:1}
.tc-ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.type-card:hover .tc-ic{transform:rotate(-10deg) scale(1.1)}

/* Live theme gallery */
.dark-band{background:radial-gradient(ellipse at 20% 0,#1d2a6b 0,#0b1b3a 45%,#070f24 100%);color:#e8ecff}
.dark-band .sec-head h2{color:#fff}.dark-band .lead{color:#aab4d6}.dark-band .eyebrow{color:#9fb1ff}
.theme-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-16px 0 34px}
.theme-filter button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#dfe5ff;font:700 14px var(--font);padding:9px 18px;border-radius:99px;cursor:pointer;transition:.2s}
.theme-filter button.on,.theme-filter button:hover{background:#fff;color:#0b1b3a}
.section:not(.dark-band) .theme-filter button{border-color:var(--line);background:#fff;color:var(--ink2)}
.section:not(.dark-band) .theme-filter button.on{background:var(--ink);color:#fff}
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:28px}
.theme-card{background:transparent;border:0;overflow:visible}
.theme-card:hover{transform:none;box-shadow:none}
.theme-card[hidden]{display:none}
.tc-frame{position:relative;display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;text-decoration:none!important}
.theme-card:hover .tc-frame{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 40px 80px -30px color-mix(in srgb,var(--p) 70%,#000)}
.tc-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#eef1f7;direction:ltr}
.tc-bar i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.tc-bar i:nth-child(2){background:#febc2e}.tc-bar i:nth-child(3){background:#28c840}
.tc-bar span{margin-inline-start:8px;font-size:11px;color:#5b6785;background:#fff;padding:2px 9px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-screen{position:relative;aspect-ratio:16/11;overflow:hidden;container-type:size;background:#ddd}
.tc-full{position:absolute;top:0;left:0;width:100%;height:auto;transition:transform 7s cubic-bezier(.45,0,.3,1)}
.theme-card:hover .tc-full{transform:translateY(calc(-100% + 100cqh))}
.tc-screen .tp{aspect-ratio:auto;height:100%;border:0}
.tc-live{position:absolute;bottom:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(11,27,58,.85);backdrop-filter:blur(6px);color:#fff;font-weight:700;font-size:13px;padding:7px 13px;border-radius:99px;transform:translateY(8px);opacity:0;transition:.35s}
.theme-card:hover .tc-live{transform:none;opacity:1}
.theme-meta{padding:18px 4px 0}
.dark-band .theme-meta h3{color:#fff}.dark-band .theme-meta p{color:#aab4d6}
.tm-top{display:flex;justify-content:space-between;align-items:center}
.tm-tags{display:flex;gap:6px;flex-wrap:wrap}
.tm-tags span{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(59,91,253,.12);color:#7f95ff}
.dark-band .swatches i{border-color:rgba(255,255,255,.25)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:18px}
.bx{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;overflow:hidden;transition:transform .4s,box-shadow .4s}
.bx::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx) var(--my),rgba(59,91,253,.08),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.bx:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.bx:hover::before{opacity:1}
.bx h3{font-size:18px;margin:14px 0 6px}.bx p{color:var(--muted);margin:0;font-size:14.5px}
.bx-art{position:relative;flex:1;min-height:130px;border-radius:14px;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.bx-builder,.bx-motion{grid-column:span 2}
.bx-builder .bx-art{min-height:190px}
.stack{display:flex;flex-direction:column;gap:8px;width:62%}
.stack i{display:block;height:28px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 14px -10px rgba(11,27,58,.4);animation:stk 6s ease-in-out infinite}
.stack .s1{height:54px;background:var(--grad);border:0}.stack .s2{animation-delay:.3s;width:80%}.stack .s3{animation-delay:.6s}.stack .s4{animation-delay:.9s;width:60%;background:#ffefe0}
@keyframes stk{0%,10%{transform:translateY(20px);opacity:0}25%,85%{transform:none;opacity:1}100%{opacity:0}}
.stack .s3{animation-name:stk3}
@keyframes stk3{0%,10%{transform:translateY(20px);opacity:0}25%,40%{transform:none;opacity:1}50%,60%{transform:translateX(30px) rotate(3deg);opacity:1}70%,85%{transform:none;opacity:1}100%{opacity:0}}
.cursor{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(255,138,31,.25);top:62%;left:62%;animation:cur 6s ease-in-out infinite}
@keyframes cur{0%,40%{transform:translate(0,0)}55%{transform:translate(40px,-4px)}70%,100%{transform:translate(0,0)}}
.serp{position:absolute;top:16px;inset-inline:16px;background:#fff;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 20px -14px rgba(0,0,0,.4)}
.serp b{height:10px;width:70%;background:#1a0dab;border-radius:4px;opacity:.75}.serp span{height:6px;border-radius:3px;background:#dfe3ee}.serp .s{width:60%}
.bars{position:absolute;bottom:14px;inset-inline:16px;height:55px;display:flex;align-items:flex-end;gap:8px}
.bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#22c55e,#86efac);transform-origin:bottom;animation:barg 3s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.15s}.bars i:nth-child(3){animation-delay:.3s}.bars i:nth-child(4){animation-delay:.45s}.bars i:nth-child(5){animation-delay:.6s}.bars i:nth-child(6){animation-delay:.75s}
@keyframes barg{0%{transform:scaleY(.2)}40%,100%{transform:scaleY(1)}}
.pay-cycle{position:relative;width:80%;height:56px}
.pay-cycle span{position:absolute;inset:0;display:grid;place-items:center;background:#fff;border-radius:14px;font-weight:800;font-size:20px;box-shadow:0 10px 24px -14px rgba(11,27,58,.45);opacity:0;animation:pc 10s infinite}
.pay-cycle span:nth-child(2){animation-delay:2s;color:#1a1f71}.pay-cycle span:nth-child(3){animation-delay:4s;color:#003087;font-style:italic}.pay-cycle span:nth-child(4){animation-delay:6s;color:#0a7f3f}.pay-cycle span:nth-child(5){animation-delay:8s;font-size:16px}
.pay-cycle span:nth-child(1){color:#6c2bd9}
@keyframes pc{0%{opacity:0;transform:translateY(20px) scale(.9)}5%,18%{opacity:1;transform:none}23%,100%{opacity:0;transform:translateY(-20px) scale(.9)}}
.pixels{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:2}
.pixels span{background:#fff;border-radius:10px;padding:8px 14px;font-weight:800;font-size:13px;text-align:center;box-shadow:0 8px 18px -12px rgba(0,0,0,.4);animation:pxl 4s ease-in-out infinite}
.pixels span:nth-child(2){animation-delay:1s}.pixels span:nth-child(3){animation-delay:2s}.pixels span:nth-child(4){animation-delay:3s}
@keyframes pxl{0%,20%,100%{transform:none;box-shadow:0 8px 18px -12px rgba(0,0,0,.4)}10%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(59,91,253,.25)}}
.pulse-ring{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid var(--indigo);animation:pr 2.4s ease-out infinite}
@keyframes pr{from{transform:scale(1);opacity:.8}to{transform:scale(6);opacity:0}}
.bx-motion .bx-art{padding:0}.bx-motion video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.addr{display:flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:10px 16px;font-weight:700;font-size:15px;box-shadow:0 10px 24px -14px rgba(11,27,58,.4);direction:ltr;min-width:72%}
.addr .lock{color:#22c55e;display:flex}.caret{width:2px;height:18px;background:var(--indigo);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bx-analytics svg{position:absolute;inset:20px 0 0;width:100%;height:calc(100% - 20px)}
.bx-analytics .line{fill:none;stroke:var(--indigo);stroke-width:3;stroke-dasharray:500;stroke-dashoffset:500;animation:draw 4s ease-in-out infinite}
.bx-analytics .area{fill:url(#none);fill:rgba(59,91,253,.12);animation:fadeA 4s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:500}60%,100%{stroke-dashoffset:0}}
@keyframes fadeA{0%,30%{opacity:0}70%,100%{opacity:1}}
.lang-flip{position:relative;width:70%;height:64px;perspective:500px}
.lang-flip span{position:absolute;inset:0;display:grid;place-items:center;background:#fff;border-radius:14px;font-size:28px;font-weight:800;backface-visibility:hidden;box-shadow:0 10px 24px -14px rgba(11,27,58,.4);animation:flip 6s ease-in-out infinite}
.lang-flip span:nth-child(2){font-family:'Cairo',sans-serif;transform:rotateX(180deg);animation-name:flip2;color:var(--indigo)}
@keyframes flip{0%,40%{transform:rotateX(0)}50%,90%{transform:rotateX(180deg)}100%{transform:rotateX(360deg)}}
@keyframes flip2{0%,40%{transform:rotateX(180deg)}50%,90%{transform:rotateX(360deg)}100%{transform:rotateX(540deg)}}

/* Steps v2 */
.steps2{position:relative}
.steps2::before{content:"";position:absolute;top:50px;inset-inline:16%;height:3px;background:linear-gradient(90deg,var(--indigo),var(--violet),var(--orange));border-radius:3px;transform-origin:left;transform:scaleX(var(--prog,0));transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
html[dir=rtl] .steps2::before{transform-origin:right}
.steps2.in::before{--prog:1}
.steps2 li{z-index:1}

/* Stats band */
.stats-band{background:var(--grad);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;animation:drift 30s linear infinite}
@keyframes drift{to{background-position:220px 220px}}
.stats-in{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats-in b{display:block;font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1}
.stats-in span{opacity:.9;font-weight:600}

/* CTA aurora */
.cta-aurora{position:absolute;inset:0;pointer-events:none}
.cta-aurora i{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(70px);opacity:.5}
.cta-aurora i:nth-child(1){background:#ff8a1f;top:-200px;inset-inline-start:10%;animation:aur 14s ease-in-out infinite alternate}
.cta-aurora i:nth-child(2){background:#00c2ff;bottom:-220px;inset-inline-end:5%;animation:aur 18s ease-in-out infinite alternate-reverse}
.cta-aurora i:nth-child(3){background:#ff4d8d;top:-100px;inset-inline-end:35%;opacity:.35;animation:aur 22s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate(120px,60px) scale(1.2)}}
.cta-band .cta-in{z-index:1}

/* pricing card hover */
.plan{transition:transform .4s,box-shadow .4s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.popular:hover{transform:scale(1.03) translateY(-6px)}

@media (max-width:1000px){
  .h2-grid-in{grid-template-columns:1fr}.hero2{min-height:0}
  .h2-stage{max-width:640px;margin:20px auto 40px;width:100%}
  .bento{grid-template-columns:1fr 1fr}.stats-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .bento{grid-template-columns:1fr}.bx-builder,.bx-motion{grid-column:auto}
  .chip{transform:scale(.85)}.c2{display:none}.c1{inset-inline-start:-6px;top:-30px}.c3{inset-inline-start:4%}
  .dev-phone{width:28%;inset-inline-end:-2%}
  .steps2::before{display:none}
  .theme-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.reveal,.h2-title .ln{opacity:1!important;transform:none!important}.tk-track{animation:none}}
.bx-analytics,.bx-ar{grid-column:span 2}
.dev-phone{inset-inline-end:-2%}
.c2{z-index:3}
@media (max-width:1000px){.bx-analytics,.bx-ar{grid-column:span 1}}
@media (max-width:760px){.bx-analytics,.bx-ar{grid-column:auto}}
.chip{translate:0 0 60px}.dev-phone{translate:0 0 30px}