/* ==== site.css ==== */
@property --ab-rot { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root[data-theme="dark"], :root[data-abl-theme="dark"] {
--ab-bg-0:        #18181b;                    
--ab-bg-1:        #1c1c20;                    
--ab-card:        rgba(35, 35, 40, .72);      
--ab-card-2:      #2c2c33;                    
--ab-card-solid:  #232328;                    
--ab-border:      rgba(255,255,255,0.08);     
--ab-border-s:    rgba(255,255,255,0.14);     
--ab-text:        #fafafa;                    
--ab-text-s:      #d4d4d4;                    
--ab-subtext:     #888888;                    
--ab-accent:      var(--ab-mesh-1);
--ab-muted:       var(--ab-subtext);
--ab-text-2:      var(--ab-text-s);
--ab-shadow:      0 20px 45px rgba(0,0,0,0.35);
--ab-grid:        rgba(255,255,255,0.03);
--ab-mesh-1:      #7c3aed;
--ab-mesh-2:      #a78bfa;
--ab-mesh-3:      #6366f1;
--ab-mesh-4:      #22c55e;                    
--ab-mesh-5:      #06b6d4;
--ab-mesh-6:      #ec4899;
--ab-nav-bg:      rgba(28, 28, 32, 0.78);     
}
:root[data-theme="light"], :root[data-abl-theme="light"] {
--ab-bg-0:        #f4f6fb;                    
--ab-bg-1:        #eef1f8;                    
--ab-card:        rgba(255,255,255,0.82);
--ab-card-2:      #f7f8fc;                    
--ab-card-solid:  #ffffff;                    
--ab-border:      #ebedf4;                    
--ab-border-s:    #d8dce8;                    
--ab-text:        #0f172a;                    
--ab-text-s:      #334155;                    
--ab-subtext:     #64748b;                    
--ab-accent:      var(--ab-mesh-1);
--ab-muted:       var(--ab-subtext);
--ab-text-2:      var(--ab-text-s);
--ab-shadow:      0 18px 40px rgba(15,23,42,0.12);
--ab-grid:        rgba(15,23,42,0.07);
--ab-mesh-1:      #7c3aed;
--ab-mesh-2:      #a78bfa;
--ab-mesh-3:      #6366f1;
--ab-mesh-4:      #22c55e;
--ab-mesh-5:      #06b6d4;
--ab-mesh-6:      #ec4899;
--ab-nav-bg:      rgba(255,255,255,0.82);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ab-body {
background: var(--ab-bg-0);
color: var(--ab-text);
font-family: "Zain", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
position: relative;
font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ab-mesh-1); outline-offset: 3px; border-radius: 6px; }
.ab-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
overflow: hidden;
}
.ab-aurora { position: absolute; inset: -25%; filter: blur(80px) saturate(140%); opacity: .35; }
:root[data-theme="light"] .ab-aurora { opacity: .18; }
.ab-au { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; mix-blend-mode: screen; }
.ab-au-1 { background: radial-gradient(circle, var(--ab-mesh-1), transparent 60%); top: -15%; left: -10%;
animation: abAuA 24s ease-in-out infinite; }
.ab-au-2 { background: radial-gradient(circle, var(--ab-mesh-2), transparent 60%); top: -5%; right: -10%;
animation: abAuB 28s ease-in-out infinite; }
.ab-au-3 { background: radial-gradient(circle, var(--ab-mesh-5), transparent 60%); bottom: -15%; left: 10%;
animation: abAuC 26s ease-in-out infinite; }
.ab-au-4 { background: radial-gradient(circle, var(--ab-mesh-6), transparent 60%); bottom: -20%; right: -5%;
animation: abAuD 30s ease-in-out infinite; }
@keyframes abAuA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%,5%) scale(1.1);} }
@keyframes abAuB { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-7%,8%) scale(.95);} }
@keyframes abAuC { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6%,-5%) scale(1.06);} }
@keyframes abAuD { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5%,-6%) scale(.95);} }
.ab-grid { display: none !important; }
.ab-stars { position: absolute; inset: 0; }
.ab-stars span {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: var(--ab-text);
opacity: 0;
animation: abTwink var(--d, 4s) ease-in-out infinite var(--delay, 0s);
}
@keyframes abTwink { 0%,100%{opacity:0;} 50%{opacity:.7; box-shadow: 0 0 6px currentColor;} }
.ab-nav {
position: sticky; top: 0; z-index: 90;
background: var(--ab-nav-bg);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid var(--ab-border);
padding: 14px 0;
}
.ab-nav-inner {
max-width: 1320px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; gap: 28px;
}
.ab-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ab-brand-logo { height: 32px; }
.ab-logo-dark, .ab-logo-light { display: none; }
:root[data-theme="dark"] .ab-logo-dark, :root[data-abl-theme="dark"] .ab-logo-dark { display: inline-block; }
:root[data-theme="light"] .ab-logo-light, :root[data-abl-theme="light"] .ab-logo-light { display: inline-block; }
.ab-menu { display: flex; gap: 4px; flex: 1; }
.ab-menu-link {
position: relative;
padding: 8px 14px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: var(--ab-text-s);
background: transparent;
border: none;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: color .2s, background .2s;
}
.ab-menu-link:hover { color: var(--ab-text); background: var(--ab-card-2); }
.ab-menu-link.is-active { color: var(--ab-mesh-1); }
.ab-menu-link.is-active::after {
content: '';
position: absolute; bottom: -16px; left: 14px; right: 14px;
height: 2px; background: var(--ab-mesh-1); border-radius: 2px;
}
.ab-menu-drop { position: relative; }
.ab-menu-trigger i { font-size: 10px; opacity: .6; transition: transform .2s; }
.ab-menu-drop:hover .ab-menu-trigger i { transform: rotate(180deg); }
.ab-mega {
position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
width: 580px;
background: var(--ab-card);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid var(--ab-border);
border-radius: 18px;
padding: 12px;
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
box-shadow: 0 24px 60px rgba(0,0,0,.4);
opacity: 0; visibility: hidden;
transform: translateX(-50%) translateY(-8px);
transition: opacity .25s, transform .25s, visibility .25s;
}
.ab-menu-drop:hover .ab-mega, .ab-menu-drop:focus-within .ab-mega {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
.ab-mega-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px;
border-radius: 12px;
transition: background .15s;
}
.ab-mega-item:hover { background: var(--ab-card-2); }
.ab-mega-ico {
width: 38px; height: 38px;
border-radius: 11px;
background: color-mix(in srgb, var(--c) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--c);
font-size: 16px;
flex-shrink: 0;
}
.ab-mega-item b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ab-text); margin-bottom: 2px; }
.ab-mega-item span { display: block; font-size: 11.5px; color: var(--ab-subtext); line-height: 1.4; }
.ab-nav-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ab-icon-btn {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
color: var(--ab-text-s);
display: inline-flex; align-items: center; justify-content: center;
transition: all .2s;
position: relative; overflow: hidden;
}
.ab-icon-btn:hover { color: var(--ab-text); border-color: var(--ab-border-s); transform: translateY(-1px); }
.ab-icon-sun, .ab-icon-moon { position: absolute; transition: opacity .3s, transform .3s; }
:root[data-theme="dark"] .ab-icon-sun, :root[data-abl-theme="dark"] .ab-icon-sun { opacity: 0; transform: rotate(180deg) scale(.4); }
:root[data-theme="dark"] .ab-icon-moon, :root[data-abl-theme="dark"] .ab-icon-moon { opacity: 1; }
:root[data-theme="light"] .ab-icon-sun, :root[data-abl-theme="light"] .ab-icon-sun { opacity: 1; color: #f59e0b; }
:root[data-theme="light"] .ab-icon-moon, :root[data-abl-theme="light"] .ab-icon-moon { opacity: 0; transform: rotate(-180deg) scale(.4); }
.ab-lang-btn {
height: 38px; padding: 0 14px;
border-radius: 10px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
color: var(--ab-text-s);
font-weight: 700; font-size: 12.5px; letter-spacing: .5px;
display: inline-flex; align-items: center;
transition: all .2s;
}
.ab-lang-btn:hover { color: var(--ab-mesh-1); border-color: var(--ab-border-s); }
.ab-burger { display: none; }
.ab-btn {
display: inline-flex; align-items: center; gap: 8px;
height: 42px; padding: 0 18px;
border-radius: 11px;
font-weight: 700; font-size: 13.5px;
letter-spacing: .2px;
border: 1px solid transparent;
cursor: pointer;
transition: all .25s cubic-bezier(.2,.8,.2,1);
text-decoration: none !important;
white-space: nowrap;
}
.ab-btn-primary {
background: linear-gradient(135deg, var(--ab-mesh-1) 0%, var(--ab-mesh-3) 50%, var(--ab-mesh-1) 100%);
background-size: 220% 100%;
background-position: 0% 50%;
color: #fff !important;
box-shadow: 0 8px 22px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.ab-btn-primary:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.ab-btn-ghost {
background: var(--ab-card-2);
color: var(--ab-text) !important;
border-color: var(--ab-border);
}
.ab-btn-ghost:hover { border-color: var(--ab-border-s); transform: translateY(-1px); }
.ab-btn-lg { height: 52px; padding: 0 24px; font-size: 15px; border-radius: 13px; }
.ab-btn i { font-size: 12px; }
[dir="rtl"] .ab-btn i.fa-arrow-right { transform: scaleX(-1); }
.ab-drawer {
position: fixed; top: 0; inset-inline-end: 0;
width: min(320px, 88vw); height: 100vh;
background: var(--ab-card-solid);
border-inline-start: 1px solid var(--ab-border);
z-index: 200;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
overflow-y: auto;
}
[dir="rtl"] .ab-drawer { transform: translateX(-100%); }
.ab-drawer.is-open { transform: translateX(0); }
.ab-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--ab-border); }
.ab-drawer-nav { display: flex; flex-direction: column; padding: 16px; gap: 4px; }
.ab-drawer-nav a, .ab-drawer-nav summary {
padding: 12px 14px;
border-radius: 10px;
color: var(--ab-text);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.ab-drawer-nav a:hover, .ab-drawer-nav summary:hover { background: var(--ab-card-2); }
.ab-drawer-nav details a { padding-inline-start: 36px; font-size: 13px; color: var(--ab-subtext); }
.ab-drawer-nav hr { border: none; border-top: 1px solid var(--ab-border); margin: 8px 0; }
.ab-drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.5);
z-index: 190; opacity: 0; visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.ab-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.ab-main { position: relative; z-index: 2; }
.ab-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ab-container-sm { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.text-green { color: #22c55e !important; }
.ab-section { padding: 100px 0; position: relative; }
.ab-section-sm { padding: 60px 0; }
.ab-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
border-radius: 50px;
background: color-mix(in srgb, var(--ab-mesh-1) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--ab-mesh-1) 24%, transparent);
color: var(--ab-mesh-1);
font-size: 12px; font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin-bottom: 16px;
}
.ab-eyebrow i { font-size: 11px; }
.ab-h1, .ab-h-display {
font-size: clamp(34px, 5.5vw, 64px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.4px;
color: var(--ab-text);
margin: 0;
}
.ab-h2 {
font-size: clamp(28px, 3.8vw, 46px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
color: var(--ab-text);
margin: 0 0 18px;
}
.ab-h3 {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.5px;
color: var(--ab-text);
margin: 0 0 14px;
}
.ab-grad {
background: linear-gradient(110deg, var(--ab-mesh-1) 0%, var(--ab-mesh-2) 40%, var(--ab-mesh-6) 80%, var(--ab-mesh-3) 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: abGradFlow 8s linear infinite;
}
@keyframes abGradFlow { to { background-position: 220% center; } }
.ab-lead { font-size: 17px; color: var(--ab-subtext); line-height: 1.7; max-width: 640px; }
.ab-lead.large { font-size: 19px; }
.ab-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.ab-section-head .ab-h2 { margin-bottom: 14px; }
.ab-hero { padding: 80px 0 60px; position: relative; }
.ab-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: center; }
.ab-hero-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px;
border-radius: 50px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
backdrop-filter: blur(14px);
font-size: 12.5px;
font-weight: 700;
color: var(--ab-text-s);
margin-bottom: 24px;
animation: abFadeUp .8s ease-out both;
}
.ab-hero-tag .ab-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,.55);
animation: abPulseDot 2s ease-out infinite;
}
@keyframes abPulseDot {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
70%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}
.ab-hero h1 {
margin: 0 0 22px;
animation: abFadeUp .9s .1s ease-out both;
}
.ab-hero-sub {
font-size: 19px;
color: var(--ab-subtext);
max-width: 720px;
margin: 0 auto 36px;
line-height: 1.7;
animation: abFadeUp 1s .2s ease-out both;
}
.ab-hero-cta {
display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
animation: abFadeUp 1s .3s ease-out both;
}
.ab-hero-trust {
margin-top: 28px;
display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
font-size: 13px;
color: var(--ab-subtext);
animation: abFadeUp 1s .4s ease-out both;
}
.ab-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.ab-hero-trust i { color: var(--ab-mesh-4); }
@keyframes abFadeUp { from { opacity: 1; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.ab-hero-visual {
position: relative; max-width: 1080px; margin: 60px auto 0;
animation: abFadeUp 1.2s .5s ease-out both;
}
.ab-hero-visual::before {
content: '';
position: absolute; inset: -40px -10% -10%;
background: radial-gradient(50% 60% at 50% 50%, rgba(124,58,237,.25), transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.ab-hero-mock {
position: relative; z-index: 1;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 22px;
padding: 14px;
backdrop-filter: blur(22px);
box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.ab-hero-mock-inner {
background: var(--ab-card-solid);
border-radius: 14px;
min-height: 380px;
display: grid; grid-template-columns: 240px 1fr;
overflow: hidden;
}
.ab-hero-mock-sb {
background: var(--ab-card-2);
padding: 18px 14px;
border-inline-end: 1px solid var(--ab-border);
}
.ab-hero-mock-sb-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 8px;
font-size: 12.5px; color: var(--ab-text-s); margin-bottom: 4px;
}
.ab-hero-mock-sb-item.active { background: var(--ab-mesh-1); color: #fff; }
.ab-hero-mock-sb-item i { width: 16px; text-align: center; font-size: 12px; }
.ab-hero-mock-body { padding: 22px; }
.ab-hero-mock-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px;
}
.ab-hero-mock-stat {
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 10px;
padding: 14px;
}
.ab-hero-mock-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ab-text); }
.ab-hero-mock-stat span { font-size: 11px; color: var(--ab-subtext); text-transform: uppercase; letter-spacing: .3px; }
.ab-hero-mock-chart {
height: 160px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 10px;
position: relative; overflow: hidden;
padding: 14px;
}
.ab-hero-mock-chart svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
.ab-hero-mock-inner { grid-template-columns: 1fr; }
.ab-hero-mock-sb { display: none; }
.ab-hero-mock-stats { grid-template-columns: repeat(2, 1fr); }
}
.ab-float-badge {
position: absolute;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 50px;
backdrop-filter: blur(14px);
font-size: 12px;
font-weight: 600;
color: var(--ab-text-s);
box-shadow: 0 10px 28px rgba(0,0,0,.25);
white-space: nowrap;
animation: abFloatBob 5s ease-in-out infinite;
}
.ab-float-badge i { font-size: 13px; }
.ab-fb-1 { top: 10%; left: -2%; --d: 0s; }
.ab-fb-2 { top: 18%; right: -2%; --d: 1s; }
.ab-fb-3 { bottom: 18%; left: -3%; --d: 2s; }
.ab-fb-4 { bottom: 10%; right: -3%; --d: 3s; }
@keyframes abFloatBob {
0%,100% { transform: translateY(0); }
50%     { transform: translateY(-8px); }
}
@media (max-width: 768px) { .ab-float-badge { display: none; } }
.ab-strip {
padding: 50px 0;
border-top: 1px solid var(--ab-border);
border-bottom: 1px solid var(--ab-border);
}
.ab-strip-head {
text-align: center;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ab-subtext);
margin-bottom: 24px;
}
.ab-strip-logos {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 28px 50px;
}
.ab-strip-logo {
display: inline-flex; align-items: center; gap: 8px;
font-size: 18px; font-weight: 800;
color: var(--ab-subtext);
opacity: .8;
transition: opacity .25s, color .25s;
}
.ab-strip-logo:hover { opacity: 1; color: var(--ab-text); }
.ab-strip-logo i { font-size: 22px; color: var(--c, var(--ab-mesh-1)); }
.ab-feat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.ab-feat-card {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 18px;
padding: 28px;
backdrop-filter: blur(14px);
transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .25s;
position: relative;
overflow: hidden;
}
.ab-feat-card::before {
content: '';
position: absolute; top: 0; inset-inline-start: 0; right: 0;
height: 3px;
background: var(--c, var(--ab-mesh-1));
border-radius: 18px 18px 0 0;
}
.ab-feat-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 35%, transparent);
box-shadow: 0 22px 48px rgba(0,0,0,.3), 0 0 0 1px var(--c, var(--ab-mesh-1));
}
.ab-feat-ico {
width: 54px; height: 54px;
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--ab-mesh-1)) 22%, transparent), color-mix(in srgb, var(--c, var(--ab-mesh-1)) 8%, transparent));
border: 1px solid color-mix(in srgb, var(--c, var(--ab-mesh-1)) 28%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--c, var(--ab-mesh-1));
font-size: 22px;
margin-bottom: 18px;
flex-shrink: 0;
}
.ab-feat-title {
font-size: 18px; font-weight: 800;
color: var(--ab-text);
margin: 0 0 10px;
letter-spacing: -.2px;
}
.ab-feat-desc {
font-size: 14px;
color: var(--ab-subtext);
line-height: 1.65;
margin: 0 0 14px;
}
.ab-feat-card .ab-feat-link {
color: var(--c, var(--ab-mesh-1));
font-weight: 700;
font-size: 13px;
display: inline-flex; align-items: center; gap: 5px;
transition: gap .2s;
}
.ab-feat-card .ab-feat-link:hover { gap: 9px; }
[dir="rtl"] .ab-feat-card .ab-feat-link i { transform: scaleX(-1); }
.ab-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
padding: 36px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 22px;
backdrop-filter: blur(14px);
}
.ab-stat-cell { text-align: center; padding: 8px; }
.ab-stats-stamp { text-align: center; margin: 14px 0 0; font-size: 12.5px; color: var(--ab-subtext); line-height: 1.8; }
.ab-stats-stamp .ab-stamp { display: inline-flex; }
.ab-stat-cell b {
display: block;
font-size: 38px; font-weight: 900;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
letter-spacing: -1px;
margin-bottom: 6px;
}
.ab-stat-cell span {
display: block;
font-size: 13px;
color: var(--ab-subtext);
font-weight: 600;
}
.ab-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.ab-split.reverse { direction: rtl; }
.ab-split.reverse > * { direction: ltr; }
[dir="rtl"] .ab-split.reverse { direction: ltr; }
[dir="rtl"] .ab-split.reverse > * { direction: rtl; }
@media (max-width: 880px) { .ab-split { grid-template-columns: 1fr; gap: 40px; } .ab-split.reverse { direction: ltr; } }
.ab-split-visual {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 22px;
padding: 30px;
min-height: 380px;
backdrop-filter: blur(14px);
position: relative; overflow: hidden;
box-shadow: 0 24px 50px rgba(0,0,0,.25);
}
.ab-split-checks { list-style: none; padding: 0; margin: 24px 0 28px; }
.ab-split-checks li {
display: flex; align-items: flex-start; gap: 12px;
padding: 8px 0;
font-size: 15px;
color: var(--ab-text-s);
}
.ab-split-checks i {
color: var(--ab-mesh-4); font-size: 14px;
width: 22px; height: 22px;
background: color-mix(in srgb, #22c55e 15%, transparent);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.ab-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
max-width: 1100px; margin: 0 auto;
}
.ab-price-card {
background: var(--ab-card);
border: 1.5px solid var(--ab-border);
border-radius: 20px;
padding: 32px 26px;
backdrop-filter: blur(14px);
position: relative;
transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .3s;
}
.ab-price-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,.28); }
.ab-price-card.featured {
border-color: var(--ab-mesh-1);
background: linear-gradient(180deg, color-mix(in srgb, var(--ab-mesh-1) 8%, var(--ab-card)) 0%, var(--ab-card) 100%);
}
.ab-price-card.featured::before {
content: 'الأكثر شعبية / Most popular';
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
padding: 5px 14px;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff;
font-size: 11px; font-weight: 800; letter-spacing: .3px;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.ab-price-name { font-size: 16px; font-weight: 700; color: var(--ab-subtext); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .5px; }
.ab-price-amount {
display: flex; align-items: baseline; gap: 6px;
margin-bottom: 22px;
}
.ab-price-amount .v {
font-size: 52px; font-weight: 900;
color: var(--ab-text);
line-height: 1;
letter-spacing: -1.5px;
font-variant-numeric: tabular-nums;
}
.ab-price-amount .c { font-size: 22px; font-weight: 800; color: var(--ab-subtext); }
.ab-price-amount .p { font-size: 14px; color: var(--ab-subtext); }
.ab-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.ab-price-card ul li {
display: flex; gap: 10px; align-items: flex-start;
padding: 6px 0;
font-size: 14px;
color: var(--ab-text-s);
}
.ab-price-card ul li i {
color: var(--ab-mesh-4); font-size: 12px;
width: 18px; height: 18px;
background: color-mix(in srgb, #22c55e 14%, transparent);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 3px;
}
.ab-price-card .ab-btn { width: 100%; justify-content: center; }
.ab-test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.ab-test {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 18px;
padding: 28px;
backdrop-filter: blur(14px);
}
.ab-test-stars { color: #f59e0b; margin-bottom: 14px; font-size: 14px; }
.ab-test p { font-size: 15px; color: var(--ab-text-s); line-height: 1.7; margin: 0 0 18px; }
.ab-test-author { display: flex; gap: 12px; align-items: center; }
.ab-test-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
}
.ab-test-info b { display: block; font-size: 14px; color: var(--ab-text); }
.ab-test-info span { display: block; font-size: 12px; color: var(--ab-subtext); }
.ab-faq { max-width: 880px; margin: 0 auto; }
.ab-faq details {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 14px;
padding: 0;
margin-bottom: 10px;
backdrop-filter: blur(14px);
overflow: hidden;
transition: border-color .2s;
}
.ab-faq details[open] { border-color: var(--ab-mesh-1); }
.ab-faq summary {
padding: 18px 22px;
font-size: 16px; font-weight: 700;
color: var(--ab-text);
cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after {
content: '\f067';
font-family: 'Font Awesome 6 Free'; font-weight: 900;
color: var(--ab-mesh-1);
font-size: 12px;
transition: transform .25s;
}
.ab-faq details[open] summary::after { content: '\f068'; }
.ab-faq-body {
padding: 0 22px 18px;
color: var(--ab-text-s);
font-size: 14.5px;
line-height: 1.75;
}
.ab-cta-band {
background: linear-gradient(135deg, var(--ab-mesh-1) 0%, var(--ab-mesh-3) 60%, var(--ab-mesh-2) 100%);
color: #fff;
border-radius: 28px;
padding: 60px 50px;
text-align: center;
position: relative; overflow: hidden;
box-shadow: 0 30px 70px rgba(124,58,237,.4);
}
.ab-cta-band::before {
content: '';
position: absolute; inset: -50%;
background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.18), transparent 70%);
pointer-events: none;
}
.ab-cta-band > * { position: relative; z-index: 1; }
.ab-cta-band h2 { font-size: clamp(28px, 4vw, 42px); color: #fff !important; -webkit-text-fill-color: #fff !important; margin: 0 0 14px; font-weight: 800; }
.ab-cta-band p { font-size: 17px; color: rgba(255,255,255,.92); max-width: 580px; margin: 0 auto 28px; }
.ab-cta-band .ab-btn-primary {
background: #fff;
color: var(--ab-mesh-1) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.ab-cta-band .ab-btn-primary:hover { background: #fff; }
.ab-cta-band .ab-btn-ghost { background: rgba(255,255,255,.15); color: #fff !important; border-color: rgba(255,255,255,.3); backdrop-filter: blur(10px); }
.ab-cta-band .ab-btn-ghost:hover { background: rgba(255,255,255,.25); }
.ab-footer {
margin-top: 80px;
border-top: 1px solid var(--ab-border);
padding: 60px 0 24px;
background: var(--ab-card);
backdrop-filter: blur(20px);
position: relative; z-index: 2;
}
.ab-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ab-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
@media (max-width: 980px) { .ab-footer-grid { grid-template-columns: 1fr 1fr; } .ab-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ab-footer-grid { grid-template-columns: 1fr; } }
.ab-footer-col h4 {
font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
color: var(--ab-text); margin: 0 0 14px;
}
.ab-footer-col a {
display: block;
padding: 5px 0;
font-size: 14px;
color: var(--ab-subtext);
transition: color .15s;
}
.ab-footer-col a:hover { color: var(--ab-mesh-1); }
.ab-footer-pitch {
font-size: 14px;
color: var(--ab-subtext);
line-height: 1.7;
margin: 16px 0 18px;
}
.ab-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ab-fbadge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 50px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
font-size: 11px; font-weight: 700;
color: var(--ab-text-s);
}
.ab-fbadge i { color: var(--ab-mesh-1); font-size: 10px; }
.ab-footer-social { display: flex; gap: 10px; }
.ab-footer-social a {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--ab-text-s);
transition: all .2s;
padding: 0;
}
.ab-footer-social a:hover {
color: var(--ab-mesh-1);
border-color: var(--ab-mesh-1);
transform: translateY(-2px);
}
.ab-footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--ab-border);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 13px;
color: var(--ab-subtext);
}
.ab-footer-meta { display: flex; gap: 10px; align-items: center; }
.ab-footer-meta i { font-size: 8px; }
.ab-wa-float {
position: fixed; bottom: 24px; inset-inline-end: 24px;
width: 58px; height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: #fff !important;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
box-shadow: 0 12px 32px rgba(37,211,102,.5);
z-index: 80;
transition: transform .25s;
}
.ab-wa-float:hover { transform: scale(1.08); }
.ab-wa-pulse {
position: absolute; inset: -8px;
border-radius: 50%;
border: 2px solid #25d366;
opacity: 0;
animation: abWaPulse 2s ease-out infinite;
}
@keyframes abWaPulse {
0% { transform: scale(.85); opacity: .8; }
100% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 980px) {
.ab-menu { display: none; }
.ab-burger { display: inline-flex; }
.ab-nav-actions .ab-btn-ghost, .ab-nav-actions .ab-btn-primary { display: none; }
.ab-section { padding: 70px 0; }
}
.ab-reveal { opacity: 1; transform: none; transition: none; }
.ab-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.ab-au, .ab-grad, .ab-stars span, .ab-hero h1, .ab-hero-tag, .ab-hero-sub, .ab-hero-cta, .ab-hero-trust, .ab-hero-visual {
animation: none !important;
}
.ab-reveal { opacity: 1; transform: none; transition: none; }
}
.ab-price-toggle {
display: inline-flex;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 50px;
padding: 4px;
gap: 2px;
}
.ab-price-toggle button {
border: none; background: transparent;
padding: 9px 20px;
border-radius: 50px;
color: var(--ab-subtext);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all .25s;
}
.ab-price-toggle button.is-on {
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff;
box-shadow: 0 4px 14px rgba(124,58,237,.4);
}
.ab-price-foot {
display: flex; align-items: center; gap: 8px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--ab-border);
font-size: 12px;
color: var(--ab-subtext);
}
.ab-price-foot i { color: var(--ab-mesh-4); }
.ab-compare-note {
margin-top: 50px;
padding: 28px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 18px;
backdrop-filter: blur(14px);
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
align-items: center;
}
.ab-compare-note h3 { margin: 0 0 6px; font-size: 18px; }
.ab-compare-note p  { margin: 0; color: var(--ab-subtext); font-size: 14px; }
.ab-compare-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ab-compare-pills span {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: 50px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
font-size: 12px; font-weight: 700;
color: var(--ab-text-s);
}
.ab-compare-pills i { color: var(--ab-mesh-4); font-size: 10px; }
@media (max-width: 760px) {
.ab-compare-note { grid-template-columns: 1fr; }
.ab-compare-pills { justify-content: flex-start; }
}
.ab-empty {
text-align: center; padding: 60px 30px;
background: var(--ab-card); border: 1px dashed var(--ab-border);
border-radius: 18px;
}
.ab-empty p { color: var(--ab-subtext); margin: 0 0 18px; }
.ab-enterprise-card {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 22px;
padding: 40px;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
align-items: center;
backdrop-filter: blur(14px);
position: relative;
overflow: hidden;
}
.ab-enterprise-card::before {
content: '';
position: absolute; top: -50%; inset-inline-end: -20%;
width: 60%; height: 200%;
background: radial-gradient(circle, color-mix(in srgb, var(--ab-mesh-1) 18%, transparent), transparent 70%);
pointer-events: none;
}
.ab-enterprise-card > * { position: relative; z-index: 1; }
.ab-enterprise-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-enterprise-stats div {
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 14px;
padding: 18px;
text-align: center;
}
.ab-enterprise-stats b {
display: block;
font-size: 28px; font-weight: 900;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1; margin-bottom: 4px;
}
.ab-enterprise-stats span { font-size: 12px; color: var(--ab-subtext); }
@media (max-width: 780px) { .ab-enterprise-card { grid-template-columns: 1fr; padding: 28px; } }
.ab-sol-hero { padding: 80px 0 40px; }
.ab-sol-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: center;
}
@media (max-width: 880px) { .ab-sol-grid { grid-template-columns: 1fr; gap: 40px; } }
.ab-wa-mock { display: flex; justify-content: center; }
.ab-wa-mock-frame {
width: 100%; max-width: 380px;
background: #075e54;
border-radius: 22px;
padding: 12px;
box-shadow: 0 30px 70px rgba(0,0,0,.4);
position: relative;
}
.ab-wa-mock-head {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
border-radius: 12px 12px 0 0;
background: #128c7e;
color: #fff;
}
.ab-wa-mock-avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #25d366, #128c7e);
color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.ab-wa-mock-head b { display: block; font-size: 14px; }
.ab-wa-mock-head span { display: block; font-size: 11px; opacity: .8; }
.ab-wa-mock-body {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23128c7e' fill-opacity='.08' d='M20 4l16 9.2v13.6L20 36 4 26.8V13.2z'/%3E%3C/svg%3E") #e5ddd5;
padding: 14px 12px;
min-height: 320px;
border-radius: 0 0 12px 12px;
display: flex; flex-direction: column; gap: 8px;
}
.ab-wa-msg {
max-width: 80%;
padding: 8px 12px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
color: #111;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.ab-wa-msg.incoming { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.ab-wa-msg.outgoing { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; }
[dir="rtl"] .ab-wa-msg.incoming { border-top-left-radius: 10px; border-top-right-radius: 0; }
[dir="rtl"] .ab-wa-msg.outgoing { border-top-right-radius: 10px; border-top-left-radius: 0; }
.ab-wa-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ab-wa-quick span {
font-size: 11px;
padding: 3px 9px;
background: rgba(255,255,255,.6);
border: 1px solid rgba(0,0,0,.1);
border-radius: 20px;
color: #111;
}
.ab-wa-typing {
align-self: flex-start;
background: #fff;
padding: 8px 14px;
border-radius: 14px;
display: inline-flex; gap: 4px;
}
.ab-wa-typing span {
width: 6px; height: 6px;
background: #128c7e;
border-radius: 50%;
animation: abTypingDot 1.2s ease-in-out infinite;
}
.ab-wa-typing span:nth-child(2) { animation-delay: .15s; }
.ab-wa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes abTypingDot { 0%,80%,100%{opacity:.3;} 40%{opacity:1; transform:translateY(-3px);} }
.ab-msg-mock { display: flex; justify-content: center; }
.ab-msg-frame {
width: 100%; max-width: 380px;
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.ab-msg-head {
display: flex; align-items: center; gap: 10px;
padding: 16px;
color: #fff;
}
.ab-msg-head i { font-size: 20px; }
.ab-msg-head b { font-size: 14px; font-weight: 700; }
.ab-msg-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.ab-msg-row {
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
font-size: 13px;
line-height: 1.5;
}
.ab-msg-row.left { align-self: flex-start; background: var(--ab-card-2); color: var(--ab-text); border-bottom-left-radius: 4px; }
.ab-msg-row.right { align-self: flex-end; background: linear-gradient(135deg,#0084ff,#00c6ff); color: #fff; border-bottom-right-radius: 4px; }
.ab-msg-quick { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 95%; }
.ab-msg-quick span {
padding: 6px 12px;
background: var(--ab-card-2);
border: 1px solid #0084ff;
color: #0084ff;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
}
.ab-msg-cards { display: flex; gap: 8px; overflow-x: auto; margin-top: 4px; }
.ab-msg-card {
flex: 0 0 110px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 10px;
padding: 8px;
text-align: center;
}
.ab-msg-card .im {
height: 60px;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
border-radius: 6px; margin-bottom: 6px;
opacity: .6;
}
.ab-msg-card b { display: block; font-size: 11px; font-weight: 700; color: var(--ab-text); }
.ab-msg-card span { display: block; font-size: 11px; color: var(--ab-mesh-4); font-weight: 700; }
.ab-ig-mock { display: flex; justify-content: center; }
.ab-ig-frame {
width: 100%; max-width: 380px;
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 22px;
padding: 20px;
box-shadow: 0 30px 70px rgba(0,0,0,.4);
display: flex; flex-direction: column; gap: 14px;
}
.ab-ig-story-grad {
width: 64px; height: 64px;
border-radius: 50%;
background: conic-gradient(from 0deg, #fdac34, #e4405f, #833ab4, #5851db, #fdac34);
padding: 3px;
margin: 0 auto;
}
.ab-ig-story-grad div { width: 100%; height: 100%; background: var(--ab-card-solid); border-radius: 50%; }
.ab-ig-dm, .ab-ig-bot {
display: flex; align-items: center; gap: 10px;
padding: 12px;
border-radius: 14px;
}
.ab-ig-dm { background: var(--ab-card-2); border: 1px solid var(--ab-border); }
.ab-ig-bot {
background: linear-gradient(135deg, color-mix(in srgb, #e4405f 16%, transparent), color-mix(in srgb, #fdac34 14%, transparent));
border: 1px solid color-mix(in srgb, #e4405f 28%, transparent);
}
.ab-ig-dm i { color: #e4405f; font-size: 18px; }
.ab-ig-bot i { color: #fdac34; font-size: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ab-ig-dm b { display: block; font-size: 13px; }
.ab-ig-dm span { display: block; font-size: 12px; color: var(--ab-subtext); }
.ab-ig-bot p { margin: 0; font-size: 13px; color: var(--ab-text); }
.ab-ig-dot { width: 8px; height: 8px; background: #e4405f; border-radius: 50%; margin-inline-start: auto; }
.ab-fb-mock {
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.ab-fb-post { padding: 16px; }
.ab-fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ab-fb-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#1877f2,#0d5cb6); }
.ab-fb-head b { display: block; font-size: 14px; color: var(--ab-text); }
.ab-fb-head span { display: block; font-size: 11px; color: var(--ab-subtext); }
.ab-fb-post p { font-size: 14px; color: var(--ab-text); margin: 0 0 14px; line-height: 1.5; }
.ab-fb-actions { display: flex; gap: 18px; padding: 10px 0; border-top: 1px solid var(--ab-border); border-bottom: 1px solid var(--ab-border); font-size: 12px; color: var(--ab-subtext); }
.ab-fb-comment {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
margin-top: 8px;
background: var(--ab-card-2);
border-radius: 14px;
font-size: 13px;
}
.ab-fb-comment b { color: var(--ab-text); }
.ab-fb-bot {
margin-inline-start: auto;
font-size: 11px;
color: #22c55e;
display: inline-flex; align-items: center; gap: 4px;
font-weight: 700;
}
.ab-ai-orb {
position: relative;
height: 380px;
display: flex; align-items: center; justify-content: center;
}
.ab-ai-core {
width: 140px; height: 140px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--ab-mesh-2), var(--ab-mesh-1) 60%, var(--ab-mesh-3));
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 50px;
box-shadow: 0 0 80px rgba(124,58,237,.6), inset 0 -10px 30px rgba(0,0,0,.3);
animation: abOrbPulse 4s ease-in-out infinite;
}
@keyframes abOrbPulse {
0%,100% { transform: scale(1); box-shadow: 0 0 80px rgba(124,58,237,.6), inset 0 -10px 30px rgba(0,0,0,.3); }
50%     { transform: scale(1.05); box-shadow: 0 0 120px rgba(124,58,237,.9), inset 0 -10px 30px rgba(0,0,0,.3); }
}
.ab-ai-ring {
position: absolute;
border: 1.5px solid color-mix(in srgb, var(--ab-mesh-1) 30%, transparent);
border-radius: 50%;
animation: abRingRot 18s linear infinite;
}
.ab-ai-ring.r1 { width: 240px; height: 240px; }
.ab-ai-ring.r2 { width: 320px; height: 320px; animation-duration: 28s; animation-direction: reverse; border-color: color-mix(in srgb, var(--ab-mesh-6) 25%, transparent); }
.ab-ai-ring.r3 { width: 400px; height: 400px; animation-duration: 40s; border-color: color-mix(in srgb, var(--ab-mesh-5) 25%, transparent); }
@keyframes abRingRot { to { transform: rotate(360deg); } }
.ab-ai-chip {
position: absolute;
padding: 6px 12px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 50px;
font-size: 11px;
font-weight: 700;
color: var(--ab-text);
backdrop-filter: blur(14px);
transform: translate(var(--x), var(--y));
box-shadow: 0 6px 20px rgba(0,0,0,.3);
animation: abFloatBob 6s ease-in-out infinite;
}
@media (max-width: 760px) { .ab-ai-orb { height: 300px; transform: scale(.8); } }
.ab-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}
.ab-step {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 18px;
padding: 28px;
backdrop-filter: blur(14px);
position: relative;
transition: transform .25s, border-color .25s;
}
.ab-step:hover { transform: translateY(-4px); border-color: var(--ab-mesh-1); }
.ab-step-n {
position: absolute; top: -16px; inset-inline-start: 22px;
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 14px;
box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.ab-step-ico {
width: 48px; height: 48px;
border-radius: 14px;
background: color-mix(in srgb, var(--ab-mesh-1) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--ab-mesh-1) 22%, transparent);
color: var(--ab-mesh-1);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
margin: 4px 0 14px;
}
.ab-step h3 { margin: 0 0 8px; font-size: 16px; color: var(--ab-text); }
.ab-step p  { margin: 0; font-size: 13.5px; color: var(--ab-subtext); line-height: 1.6; }
.ab-uc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.ab-uc {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 16px;
padding: 20px;
text-align: center;
backdrop-filter: blur(14px);
transition: transform .25s, border-color .25s;
}
.ab-uc:hover { transform: translateY(-4px); border-color: var(--c); }
.ab-uc-ico {
width: 54px; height: 54px;
margin: 0 auto 14px;
border-radius: 16px;
background: color-mix(in srgb, var(--c) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
color: var(--c);
font-size: 22px;
display: flex; align-items: center; justify-content: center;
}
.ab-uc b { display: block; font-size: 15px; color: var(--ab-text); margin-bottom: 6px; }
.ab-uc span { display: block; font-size: 12.5px; color: var(--ab-subtext); line-height: 1.55; }
.ab-meta-badge-vis {
display: flex; flex-direction: column; align-items: center;
background: linear-gradient(180deg, color-mix(in srgb, #1877f2 12%, var(--ab-card)) 0%, var(--ab-card) 100%);
}
.ab-meta-shield {
width: 130px; height: 130px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #4267b2, #1877f2 60%, #0d47a1);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 56px;
box-shadow: 0 0 60px rgba(24,119,242,.5);
position: relative;
}
.ab-meta-shield::after {
content: '✓';
position: absolute; bottom: -4px; inset-inline-end: -4px;
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 900;
border: 3px solid var(--ab-card-solid);
}
.ab-contact-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
align-items: start;
}
@media (max-width: 900px) { .ab-contact-grid { grid-template-columns: 1fr; gap: 30px; } }
.ab-contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
@media (max-width: 480px) { .ab-contact-channels { grid-template-columns: 1fr; } }
.ab-contact-ch {
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 14px;
transition: all .2s;
}
.ab-contact-ch:hover { border-color: var(--c); transform: translateY(-2px); }
.ab-contact-ch i {
width: 44px; height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--c) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
color: var(--c);
font-size: 20px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ab-contact-ch b { display: block; font-size: 14px; color: var(--ab-text); margin-bottom: 2px; }
.ab-contact-ch span { display: block; font-size: 12px; color: var(--ab-subtext); }
.ab-contact-hours {
padding: 18px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
border-radius: 14px;
}
.ab-contact-hours h4 { margin: 0 0 6px; font-size: 14px; color: var(--ab-text); }
.ab-contact-hours p  { margin: 0; font-size: 13px; color: var(--ab-subtext); }
.ab-form {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 22px;
padding: 34px;
backdrop-filter: blur(14px);
box-shadow: 0 22px 50px rgba(0,0,0,.2);
}
.ab-form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 14px;
}
@media (max-width: 560px) { .ab-form-row { grid-template-columns: 1fr; } }
.ab-form label, .ab-form-full {
display: block;
margin-bottom: 14px;
}
.ab-form label span, .ab-form-full span {
display: block;
font-size: 12.5px; font-weight: 700;
color: var(--ab-text-s);
margin-bottom: 6px;
}
.ab-form input, .ab-form select, .ab-form textarea {
width: 100%;
height: 44px;
padding: 0 14px;
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 11px;
color: var(--ab-text);
font-family: inherit;
font-size: 14px;
transition: border-color .2s, box-shadow .2s;
}
.ab-form textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 120px; }
.ab-form input:focus, .ab-form select:focus, .ab-form textarea:focus {
outline: none;
border-color: var(--ab-mesh-1);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-mesh-1) 18%, transparent);
}
.ab-alert {
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 18px;
font-size: 13.5px;
display: flex; align-items: center; gap: 10px;
}
.ab-alert.ok  { background: color-mix(in srgb, #22c55e 12%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 24%, transparent); }
.ab-alert.err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; border: 1px solid color-mix(in srgb, #ef4444 24%, transparent); }
.ab-int-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.ab-int-card {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 14px;
padding: 22px 14px;
text-align: center;
backdrop-filter: blur(10px);
transition: all .2s;
}
.ab-int-card:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.ab-int-card i {
font-size: 32px;
color: var(--c);
display: block;
margin: 0 auto 10px;
}
.ab-int-card span { display: block; font-size: 13px; font-weight: 700; color: var(--ab-text); }
.ab-legal h1 { margin-bottom: 6px; }
.ab-legal-date { color: var(--ab-subtext); font-size: 13px; margin-bottom: 30px; }
.ab-legal h2 {
font-size: 20px; font-weight: 800; color: var(--ab-text);
margin: 32px 0 14px;
letter-spacing: -.3px;
}
.ab-legal p, .ab-legal li {
font-size: 15px;
line-height: 1.8;
color: var(--ab-text-s);
}
.ab-legal ul, .ab-legal ol { padding-inline-start: 24px; margin: 12px 0; }
.ab-legal li { margin-bottom: 6px; }
.ab-legal a { color: var(--ab-mesh-1); font-weight: 600; }
.ab-legal a:hover { text-decoration: underline; }
.ab-sol-hero--wa { padding-bottom: 60px; }
.ab-aurora,
.ab-stars,
.ab-meteors { display: none !important; }
.ab-bg.ab-sky {
--ab-sky-accent: #7c5cff;   
background:
radial-gradient(78% 55% at 50% 18%,
color-mix(in srgb, var(--ab-sky-accent) 7%, transparent) 0%,
color-mix(in srgb, var(--ab-sky-accent) 2.5%, transparent) 45%,
transparent 74%),
linear-gradient(180deg,
color-mix(in srgb, var(--ab-bg-0, #18181b) 97%, var(--ab-sky-accent)) 0%,
var(--ab-bg-0, #18181b) 55%,
color-mix(in srgb, var(--ab-bg-0, #18181b) 96%, #000) 100%);
}
.ab-bg.ab-sky::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .14;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
background-size: 160px 160px;
mix-blend-mode: overlay;
}
:root[data-theme="light"]  .ab-bg.ab-sky,
:root[data-abl-theme="light"] .ab-bg.ab-sky {
background:
radial-gradient(78% 55% at 50% 18%,
color-mix(in srgb, var(--ab-sky-accent) 6%, transparent) 0%,
color-mix(in srgb, var(--ab-sky-accent) 2%, transparent) 47%,
transparent 76%),
linear-gradient(180deg, var(--ab-bg-0, #f4f6fb) 0%, var(--ab-bg-1, #eef1f8) 100%);
}
:root[data-theme="light"]  .ab-bg.ab-sky::after,
:root[data-abl-theme="light"] .ab-bg.ab-sky::after {
opacity: .10;
mix-blend-mode: multiply;
}
/* ==== premium.css ==== */
@property --abp-rot   { syntax: '<angle>';   initial-value: 0deg;    inherits: false; }
@property --abp-glow  { syntax: '<percentage>'; initial-value: 0%;   inherits: false; }
@property --abp-shine { syntax: '<percentage>'; initial-value: -120%; inherits: false; }
:root {
--abp-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
--abp-ease-out:     cubic-bezier(.16, 1,   .3,  1);
--abp-ease-power:   cubic-bezier(.2,  .8,  .2,  1);
--abp-touch:        56px; 
--abp-r-sm:  14px;
--abp-r-md:  20px;
--abp-r-lg:  28px;
--abp-r-xl:  36px;
}
html { scroll-behavior: smooth; }
::selection { background: color-mix(in srgb, var(--ab-mesh-1) 60%, transparent); color: #fff; }
.abp-scroll-prog {
position: fixed; top: 0; left: 0; right: 0;
height: 2px;
z-index: 999;
pointer-events: none;
background: transparent;
}
.abp-scroll-prog::after {
content: '';
display: block;
height: 100%;
width: var(--abp-w, 0%);
background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6), var(--ab-mesh-5), var(--ab-mesh-1));
background-size: 200% 100%;
animation: abpProgFlow 3s linear infinite;
box-shadow: 0 0 12px var(--ab-mesh-1), 0 0 24px var(--ab-mesh-6);
transition: width .12s linear;
}
@keyframes abpProgFlow { to { background-position: 200% 0; } }
@media (pointer: fine) and (min-width: 980px) {
.abp-cursor {
position: fixed;
top: 0; left: 0;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--ab-mesh-1) 18%, transparent), transparent 60%);
pointer-events: none;
z-index: 1;
transform: translate3d(var(--abp-mx, -50vw), var(--abp-my, -50vh), 0) translate(-50%, -50%);
filter: blur(40px);
opacity: .9;
transition: opacity .3s;
mix-blend-mode: plus-lighter;
}
:root[data-theme="light"] .abp-cursor { opacity: .55; mix-blend-mode: multiply; }
.abp-cursor.is-hidden { opacity: 0; }
}
@media (pointer: coarse), (max-width: 979px) {
.abp-cursor { display: none; }
}
@media (pointer: fine) {
.abp-magnetic {
transition: transform .4s var(--abp-ease-out);
will-change: transform;
}
.abp-magnetic:hover {
transform: translate3d(var(--abp-mx-b, 0px), var(--abp-my-b, 0px), 0);
}
}
.abp-tilt {
transform-style: preserve-3d;
will-change: transform;
transition: transform .5s var(--abp-ease-out);
}
.abp-tilt > * { transform: translateZ(0); }
@media (pointer: fine) {
.abp-tilt:hover {
transform:
perspective(1200px)
rotateX(var(--abp-ty, 0deg))
rotateY(var(--abp-tx, 0deg))
translateZ(20px);
}
}
.abp-card {
position: relative;
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: var(--abp-r-md);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
overflow: hidden;
isolation: isolate;
transition: transform .5s var(--abp-ease-out), border-color .3s, box-shadow .4s;
}
.abp-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--abp-rot, 0deg),
transparent 0deg,
var(--abp-c, var(--ab-mesh-1)) 70deg,
transparent 140deg,
transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .35s;
pointer-events: none;
z-index: 0;
}
.abp-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,.10) 50%,
transparent 60%,
transparent 100%);
background-size: 220% 220%;
background-position: var(--abp-shine, -120%) 0;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity .25s;
}
.abp-card > * { position: relative; z-index: 1; }
.abp-card:hover {
border-color: color-mix(in srgb, var(--abp-c, var(--ab-mesh-1)) 28%, var(--ab-border));
box-shadow: 0 24px 60px -16px rgba(0,0,0,.35),
0 0 0 1px color-mix(in srgb, var(--abp-c, var(--ab-mesh-1)) 12%, transparent),
0 0 50px -10px color-mix(in srgb, var(--abp-c, var(--ab-mesh-1)) 35%, transparent);
}
.abp-card:hover::before {
opacity: 1;
animation: abpRotConic 4s linear infinite;
}
.abp-card:hover::after {
opacity: 1;
animation: abpShineSweep 1.2s var(--abp-ease-out);
}
@keyframes abpRotConic  { to { --abp-rot: 360deg; } }
@keyframes abpShineSweep { 0% { --abp-shine: -120%; } 100% { --abp-shine: 220%; } }
.ab-feat-card { transition: transform .5s var(--abp-ease-out), border-color .3s, box-shadow .4s; }
.ab-feat-card:hover { transform: translateY(-8px) scale(1.012); }
.ab-price-card {
transition: transform .55s var(--abp-ease-spring), border-color .3s, box-shadow .5s;
}
.ab-price-card.featured {
transform: translateY(-6px);
box-shadow:
0 30px 70px -20px color-mix(in srgb, var(--ab-mesh-1) 50%, transparent),
0 0 0 1px color-mix(in srgb, var(--ab-mesh-1) 30%, transparent),
0 0 80px -10px color-mix(in srgb, var(--ab-mesh-1) 45%, transparent);
}
.ab-price-card.featured::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from var(--abp-rot, 0deg),
var(--ab-mesh-1), var(--ab-mesh-6), var(--ab-mesh-5), var(--ab-mesh-2), var(--ab-mesh-1));
filter: blur(20px);
opacity: .35;
z-index: -1;
animation: abpRotConic 12s linear infinite;
}
.ab-btn { position: relative; overflow: hidden; isolation: isolate; }
.ab-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
background-size: 220% 100%;
background-position: -120% 0;
pointer-events: none;
z-index: 0;
transition: background-position .9s var(--abp-ease-out);
}
.ab-btn:hover::before { background-position: 220% 0; }
.ab-btn > * { position: relative; z-index: 1; }
.ab-btn-primary {
box-shadow:
0 8px 22px rgba(124,58,237,.35),
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -10px 18px rgba(0,0,0,.18);
}
.ab-btn-primary::after {
content: '';
position: absolute;
inset: -10px;
border-radius: inherit;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
filter: blur(18px);
opacity: .35;
z-index: -1;
animation: abpBreathe 3.5s ease-in-out infinite;
}
@keyframes abpBreathe { 0%,100%{ opacity:.25; transform:scale(.95); } 50%{ opacity:.5; transform:scale(1); } }
.ab-btn:active { transform: translateY(0) scale(.97); transition: transform .08s; }
.abp-stagger > * { opacity: 1; transform: none; transition: none; } 
.abp-stagger.is-in > * { opacity: 1; transform: translateY(0) scale(1); }
@supports (animation-timeline: view()) {
.abp-reveal-up {
animation: abpRevealUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@keyframes abpRevealUp {
from { opacity: 0; transform: translateY(40px); }
to   { opacity: 1; transform: translateY(0); }
}
}
.ab-hero { position: relative; }
.ab-hero::before {
content: '';
position: absolute;
top: 30%; left: 50%;
width: 90vmax; height: 90vmax;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
color-mix(in srgb, var(--ab-mesh-1) 12%, transparent) 0%,
color-mix(in srgb, var(--ab-mesh-6) 6%, transparent) 30%,
transparent 60%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: abpHeroHalo 14s ease-in-out infinite;
}
@keyframes abpHeroHalo {
0%,100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
50%     { transform: translate(-50%,-50%) scale(1.1) rotate(180deg); }
}
.ab-hero-inner { position: relative; z-index: 1; }
.ab-hero-visual { perspective: 1500px; }
.ab-hero-visual::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 110%; height: 130%;
transform: translate(-50%, -50%) rotateX(60deg);
border: 1px dashed color-mix(in srgb, var(--ab-mesh-1) 26%, transparent);
border-radius: 50%;
pointer-events: none;
animation: abpRingRot 60s linear infinite;
opacity: .5;
}
@keyframes abpRingRot { to { transform: translate(-50%, -50%) rotateX(60deg) rotate(360deg); } }
.ab-hero-mock {
transform-style: preserve-3d;
transition: transform .9s var(--abp-ease-out);
}
@media (pointer: fine) and (min-width: 980px) {
.ab-hero-mock {
transform: rotateX(var(--abp-hy, 4deg)) rotateY(var(--abp-hx, -4deg));
}
}
.ab-float-badge {
animation: abpFloat 8s ease-in-out infinite;
border: 1px solid var(--ab-border);
box-shadow:
0 12px 32px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.08);
}
.ab-float-badge::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: conic-gradient(from var(--abp-rot, 0deg),
color-mix(in srgb, var(--ab-mesh-1) 50%, transparent),
color-mix(in srgb, var(--ab-mesh-6) 50%, transparent),
color-mix(in srgb, var(--ab-mesh-5) 50%, transparent),
color-mix(in srgb, var(--ab-mesh-1) 50%, transparent));
filter: blur(8px);
opacity: .25;
z-index: -1;
animation: abpRotConic 8s linear infinite;
}
@keyframes abpFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
33%      { transform: translateY(-14px) rotate(-1.5deg); }
66%      { transform: translateY(8px) rotate(1.5deg); }
}
.ab-grad {
background: linear-gradient(110deg,
var(--ab-mesh-1)  0%,
var(--ab-mesh-2) 25%,
var(--ab-mesh-6) 50%,
var(--ab-mesh-5) 75%,
var(--ab-mesh-1) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: abpGradFlow 6s linear infinite;
filter: drop-shadow(0 4px 20px color-mix(in srgb, var(--ab-mesh-1) 35%, transparent));
}
@keyframes abpGradFlow { to { background-position: 300% center; } }
.ab-stars span {
width: 3px; height: 3px;
background: var(--ab-text);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ab-mesh-1) 20%, transparent);
animation: abpTwink var(--d, 4s) ease-in-out infinite var(--delay, 0s);
}
@keyframes abpTwink {
0%, 100% { opacity: 0;  transform: scale(.5); }
50%      { opacity: .9; transform: scale(1.2); box-shadow: 0 0 14px var(--ab-mesh-1), 0 0 6px #fff; }
}
.ab-nav.is-scrolled {
border-bottom-color: color-mix(in srgb, var(--ab-mesh-1) 15%, var(--ab-border));
box-shadow: 0 14px 40px -20px rgba(0,0,0,.4);
}
.ab-menu-link {
transition: color .2s, background .2s, transform .25s var(--abp-ease-spring);
}
.ab-menu-link:hover { transform: translateY(-1px); }
.ab-mega {
border-radius: var(--abp-r-md);
box-shadow:
0 30px 70px -10px rgba(0,0,0,.5),
0 0 0 1px var(--ab-border),
inset 0 1px 0 rgba(255,255,255,.05);
}
.ab-mega-item {
transition: background .15s, transform .25s var(--abp-ease-out);
}
.ab-mega-item:hover { transform: translateX(2px); }
[dir="rtl"] .ab-mega-item:hover { transform: translateX(-2px); }
.ab-faq details {
transition: border-color .3s, transform .35s var(--abp-ease-out), box-shadow .35s;
transform-origin: top;
}
.ab-faq details[open] {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--ab-mesh-1) 30%, transparent);
}
.ab-faq summary { transition: color .25s; }
.ab-faq summary::after { transition: transform .35s var(--abp-ease-spring); }
.ab-faq details[open] summary::after { transform: rotate(180deg); }
.ab-cta-band {
position: relative;
overflow: hidden;
}
.ab-cta-band::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from var(--abp-rot, 0deg),
rgba(255,255,255,.15) 0deg,
transparent 90deg,
rgba(255,255,255,.1) 180deg,
transparent 270deg);
mix-blend-mode: overlay;
pointer-events: none;
animation: abpRotConic 25s linear infinite;
}
.ab-footer {
position: relative;
overflow: hidden;
}
.ab-footer::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 80%; height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--ab-mesh-1), var(--ab-mesh-6), var(--ab-mesh-1), transparent);
opacity: .6;
filter: blur(.5px);
}
.ab-footer::after {
content: '';
position: absolute;
top: -200px; left: 50%;
width: 600px; height: 400px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ab-mesh-1) 14%, transparent), transparent 70%);
pointer-events: none;
}
.abp-tabbar {
display: none;
}
@media (max-width: 980px) {
.abp-tabbar {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
position: fixed;
bottom: 14px;
left: 14px; right: 14px;
z-index: 95;
padding: 10px;
background: color-mix(in srgb, var(--ab-card-solid) 88%, transparent);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--ab-border);
border-radius: 22px;
box-shadow:
0 18px 50px -10px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.04),
inset 0 1px 0 rgba(255,255,255,.08);
gap: 4px;
align-items: center;
transform: translateY(0);
transition: transform .4s var(--abp-ease-spring), opacity .3s;
-webkit-tap-highlight-color: transparent;
}
.abp-tabbar.is-hidden { transform: translateY(140%); opacity: 0; }
.abp-tab {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
padding: 8px 4px;
min-height: 48px;
color: var(--ab-subtext);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .2px;
border-radius: 14px;
text-decoration: none;
transition: color .25s, background .25s, transform .15s;
position: relative;
}
.abp-tab i { font-size: 18px; transition: transform .35s var(--abp-ease-spring); }
.abp-tab:active { transform: scale(.92); }
.abp-tab.is-active { color: var(--ab-mesh-1); }
.abp-tab.is-active i { transform: translateY(-2px) scale(1.1); }
.abp-tab.is-active::after {
content: '';
position: absolute;
bottom: 4px; left: 50%;
width: 18px; height: 3px;
transform: translateX(-50%);
background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6));
border-radius: 3px;
box-shadow: 0 0 10px var(--ab-mesh-1);
}
.abp-tab-cta {
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff !important;
height: 56px;
border-radius: 18px;
transform: translateY(-10px) scale(1.04);
box-shadow:
0 12px 28px -4px color-mix(in srgb, var(--ab-mesh-1) 55%, transparent),
0 0 0 4px var(--ab-card-solid),
inset 0 1px 0 rgba(255,255,255,.3);
}
.abp-tab-cta i { font-size: 22px !important; color: #fff; }
.abp-tab-cta::after { display: none !important; }
.abp-tab-cta:active { transform: translateY(-6px) scale(.98); }
.ab-burger { display: none !important; }
body.ab-body { padding-bottom: 96px; }
.ab-wa-float {
bottom: 96px;
inset-inline-end: 18px;
width: 50px;
height: 50px;
font-size: 22px;
}
}
@media (max-width: 980px) {
.ab-nav {
padding: 12px 0;
background: color-mix(in srgb, var(--ab-card-solid) 78%, transparent);
border-bottom: none;
backdrop-filter: blur(24px) saturate(180%);
}
.ab-nav-inner { padding: 0 16px; gap: 10px; }
.ab-brand-logo { height: 28px; }
.ab-nav-actions { gap: 6px; }
.ab-nav-actions .ab-btn-ghost, .ab-nav-actions .ab-btn-primary { display: none; }
.ab-icon-btn, .ab-lang-btn { height: 38px; }
}
@media (max-width: 760px) {
.ab-hero { padding: 30px 0 24px; }
.ab-hero-inner { padding: 0 18px; }
.ab-hero h1 {
font-size: clamp(32px, 9vw, 44px) !important;
line-height: 1.08 !important;
letter-spacing: -1.2px !important;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.ab-hero-sub {
font-size: 16.5px !important;
line-height: 1.65 !important;
margin-bottom: 28px !important;
}
.ab-hero-cta { width: 100%; flex-direction: column; gap: 10px !important; }
.ab-hero-cta .ab-btn { width: 100%; justify-content: center; height: 54px; font-size: 15px; }
.ab-hero-tag {
font-size: 11.5px;
padding: 7px 14px;
margin-bottom: 18px;
}
.ab-hero-trust {
margin-top: 22px;
font-size: 12px;
gap: 14px;
}
.ab-hero-visual {
margin: 36px auto 0;
max-width: 100%;
transform: none;
}
.ab-hero-mock { padding: 8px; border-radius: 18px; }
.ab-hero-mock-inner { min-height: 280px; border-radius: 12px; }
.ab-hero-mock-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
.ab-hero-mock-stat { padding: 10px; }
.ab-hero-mock-stat b { font-size: 18px; }
.ab-hero-mock-stat span { font-size: 10px; }
.ab-hero-mock-chart { height: 100px; }
.ab-hero-mock-body { padding: 16px; }
.ab-hero-mock-sb { display: none; }
.ab-hero-mock-inner { grid-template-columns: 1fr !important; }
.ab-float-badge { display: none; }
}
@media (max-width: 760px) {
.ab-section { padding: 56px 0; }
.ab-section-head { margin: 0 auto 36px; padding: 0 20px; }
.ab-h1, .ab-h-display {
font-size: clamp(30px, 8vw, 40px);
line-height: 1.05;
letter-spacing: -1.2px;
}
.ab-h2 {
font-size: clamp(28px, 7.5vw, 36px);
line-height: 1.1;
letter-spacing: -.9px;
}
.ab-h3 { font-size: clamp(20px, 5.5vw, 26px); }
.ab-lead, .ab-lead.large { font-size: 15.5px; line-height: 1.7; }
.ab-eyebrow { font-size: 11px; padding: 5px 12px; }
.ab-container, .ab-container-sm { padding: 0 18px; }
}
@media (max-width: 640px) {
.ab-feat-grid, .ab-uc-grid {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 14px;
padding: 6px 18px 18px;
margin: 0 -18px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ab-feat-grid::-webkit-scrollbar,
.ab-uc-grid::-webkit-scrollbar { display: none; }
.ab-feat-grid > *, .ab-uc-grid > * {
flex: 0 0 82%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.ab-feat-card {
border-radius: 22px;
padding: 26px;
}
.ab-feat-card::after {
content: '';
position: absolute;
top: 18px; inset-inline-end: 18px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c, var(--ab-mesh-1));
box-shadow: 0 0 10px var(--c, var(--ab-mesh-1));
}
}
@media (max-width: 760px) {
.ab-pricing-grid {
display: flex !important;
flex-direction: column;
gap: 18px;
padding: 0 18px;
}
.ab-price-card {
padding: 28px 24px;
border-radius: var(--abp-r-lg);
}
.ab-price-card.featured {
transform: scale(1.02);
}
.ab-price-amount .v { font-size: 44px; }
.ab-price-toggle { width: 100%; max-width: 320px; }
.ab-price-toggle button { flex: 1; }
}
@media (max-width: 760px) {
.ab-form {
padding: 24px;
border-radius: var(--abp-r-lg);
}
.ab-form input, .ab-form select, .ab-form textarea {
height: 50px;
font-size: 16px; 
border-radius: 14px;
}
.ab-form textarea { height: auto; min-height: 140px; }
}
@media (max-width: 760px) {
.ab-drawer {
position: fixed !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: 100vh !important;          
height: 100dvh !important;         
max-width: 100% !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
z-index: 200 !important;
border-inline-start: none;
border-radius: 0;
transform: translateY(100%) !important;
transition: transform .5s var(--abp-ease-spring), visibility 0s linear .5s;
visibility: hidden;                
pointer-events: none;
}
[dir="rtl"] .ab-drawer { transform: translateY(100%) !important; }
.ab-drawer.is-open {
transform: translateY(0) !important;
visibility: visible;
pointer-events: auto;
transition: transform .5s var(--abp-ease-spring), visibility 0s linear 0s;
}
.ab-drawer::before {
content: '';
position: absolute;
top: 10px; left: 50%;
width: 40px; height: 4px;
transform: translateX(-50%);
background: var(--ab-border-s);
border-radius: 4px;
}
.ab-drawer-head { padding: 28px 20px 12px; }
.ab-drawer-nav { padding: 12px 20px 40px; gap: 6px; }
.ab-drawer-nav a, .ab-drawer-nav summary {
padding: 16px 14px;
font-size: 16px;
border-radius: 14px;
}
}
@media (max-width: 760px) {
.ab-sol-hero { padding: 28px 0 30px !important; }
.ab-sol-grid { gap: 30px; }
.ab-contact-grid { gap: 24px; }
}
@media (max-width: 760px) {
.ab-footer { padding: 50px 0 20px; }
.ab-footer-grid { gap: 28px; }
.ab-footer-bottom { text-align: center; justify-content: center; }
}
@media (pointer: coarse) {
.ab-btn, .ab-feat-card, .ab-price-card, .ab-uc, .ab-int-card, .ab-contact-ch, .ab-mega-item {
transition: transform .25s var(--abp-ease-spring), border-color .3s, box-shadow .4s;
-webkit-tap-highlight-color: transparent;
}
.ab-btn:active, .ab-feat-card:active, .ab-price-card:active,
.ab-uc:active, .ab-int-card:active, .ab-contact-ch:active, .ab-mega-item:active {
transform: scale(.97);
}
}
.abp-num {
display: inline-block;
font-variant-numeric: tabular-nums;
transform-origin: center;
}
.abp-num.is-spin {
animation: abpNumSpin .6s var(--abp-ease-spring);
}
@keyframes abpNumSpin {
0%   { transform: translateY(-12px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.abp-pulse {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: #22c55e;
display: inline-block;
}
.abp-pulse::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid #22c55e;
animation: abpPulseRing 2s ease-out infinite;
}
@keyframes abpPulseRing {
0%   { transform: scale(.5); opacity: 1; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .15ms !important;
}
.abp-card::after, .abp-card::before { display: none; }
.abp-cursor { display: none; }
}
:root[data-theme="light"] .abp-card:hover,
:root[data-abl-theme="light"] .abp-card:hover {
box-shadow:
0 24px 60px -16px rgba(15,23,42,.15),
0 0 0 1px color-mix(in srgb, var(--abp-c, var(--ab-mesh-1)) 14%, transparent),
0 0 50px -10px color-mix(in srgb, var(--abp-c, var(--ab-mesh-1)) 22%, transparent);
}
:root[data-theme="light"] .abp-cursor,
:root[data-abl-theme="light"] .abp-cursor {
background: radial-gradient(circle, color-mix(in srgb, var(--ab-mesh-1) 14%, transparent), transparent 60%);
}
:root[data-theme="light"] .ab-stars span,
:root[data-abl-theme="light"] .ab-stars span {
background: var(--ab-mesh-1);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ab-mesh-6) 30%, transparent);
}
.ab-stats-row {
background:
radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--ab-mesh-1) 12%, transparent) 0%, transparent 60%),
var(--ab-card);
border-radius: var(--abp-r-lg);
position: relative;
overflow: hidden;
}
.ab-stats-row::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--ab-mesh-1) 8%, transparent),
transparent);
background-size: 200% 100%;
background-position: -100% 0;
animation: abpStatSweep 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes abpStatSweep { 50% { background-position: 100% 0; } }
.ab-stat-cell {
position: relative;
z-index: 1;
}
.ab-stat-cell b {
font-size: clamp(32px, 4vw, 44px);
filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--ab-mesh-1) 30%, transparent));
}
.abp-chart-line {
animation: abpChartDraw 2.4s cubic-bezier(.16,1,.3,1) .8s forwards;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ab-mesh-1) 50%, transparent));
}
@keyframes abpChartDraw { to { stroke-dashoffset: 0; } }
.abp-chart-area {
opacity: 0;
animation: abpChartFade 1.2s ease-out 2.4s forwards;
}
@keyframes abpChartFade { to { opacity: 1; } }
.abp-chart-dot {
opacity: 0;
filter: drop-shadow(0 0 10px #ec4899);
animation: abpChartDot .5s ease-out 3s forwards, abpDotPulse 1.6s ease-in-out 3.5s infinite;
}
@keyframes abpChartDot  { to { opacity: 1; } }
@keyframes abpDotPulse  { 50% { r: 5.5; filter: drop-shadow(0 0 16px #ec4899); } }
.ab-hero-mock-sb-item.active::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
margin-inline-start: auto;
box-shadow: 0 0 0 0 rgba(34,197,94,.6);
animation: abpPulseRing 2s ease-out infinite;
align-self: center;
}
.ab-test {
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform .5s var(--abp-ease-out), border-color .3s, box-shadow .4s;
}
.ab-test::before {
content: '"';
position: absolute;
top: -40px; inset-inline-start: -10px;
font-size: 200px;
font-weight: 900;
line-height: 1;
color: var(--ab-mesh-1);
opacity: .07;
font-family: Georgia, serif;
pointer-events: none;
z-index: 0;
}
.ab-test:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--ab-mesh-1) 25%, var(--ab-border));
box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--ab-mesh-1) 30%, transparent);
}
.ab-test > * { position: relative; z-index: 1; }
:root[lang="ar"] .ab-h1,
:root[lang="ar"] .ab-h-display,
[dir="rtl"] .ab-h1,
[dir="rtl"] .ab-h-display {
letter-spacing: normal;
line-height: 1.28;
}
:root[lang="ar"] .ab-h2,
[dir="rtl"] .ab-h2 { letter-spacing: normal; line-height: 1.3; }
:root[lang="ar"] .ab-h3,
[dir="rtl"] .ab-h3 { letter-spacing: normal; line-height: 1.35; }
:root[lang="ar"] .ab-h1 .ab-grad,
[dir="rtl"] .ab-h1 .ab-grad { line-height: inherit; }
@media (max-width: 760px) {
:root[lang="ar"] .ab-h1,
:root[lang="ar"] .ab-h-display,
[dir="rtl"] .ab-h1,
[dir="rtl"] .ab-h-display {
font-size: clamp(27px, 7.2vw, 34px);
line-height: 1.26;
}
:root[lang="ar"] .ab-lead,
:root[lang="ar"] .ab-lead.large,
[dir="rtl"] .ab-lead,
[dir="rtl"] .ab-lead.large { font-size: 15px; line-height: 1.85; }
}
/* ==== motion.css ==== */
@property --mx { syntax: '<percentage>'; initial-value: 50%; inherits: true; }
@property --my { syntax: '<percentage>'; initial-value: 50%; inherits: true; }
@property --mo-rot { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root {
--mo-spring: cubic-bezier(.34, 1.56, .64, 1);
--mo-out:    cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 980px) {
.ab-hero, .ab-hero-inner, .ab-hero-visual, .ab-section, .ab-container, .ab-container-sm,
.ab-pricing-grid, .ab-stats-row, .ab-cta-band, .ab-footer-grid, .ab-footer-inner {
max-width: 100%;
box-sizing: border-box;
}
.ab-hero, .ab-section, .ab-footer { overflow-x: clip; }
}
.mo-preload {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--ab-bg-0);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: clip-path .9s var(--mo-out) .4s, opacity .4s ease 1.3s;
clip-path: inset(0 0 0 0);
}
.mo-preload.is-out {
clip-path: inset(0 0 100% 0);
opacity: 0;
}
.mo-preload-mark {
display: flex; flex-direction: column; align-items: center; gap: 18px;
opacity: 0;
animation: moPreFade .5s ease .15s forwards, moPreOut .35s ease .8s forwards;
}
@keyframes moPreFade { to { opacity: 1; } }
@keyframes moPreOut  { to { opacity: 0; transform: scale(.94); } }
.mo-preload-logo {
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 28px;
font-weight: 900;
position: relative;
box-shadow: 0 0 60px color-mix(in srgb, var(--ab-mesh-1) 55%, transparent);
}
.mo-preload-logo::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 22px;
border: 2px solid transparent;
border-top-color: var(--ab-mesh-1);
border-right-color: var(--ab-mesh-6);
animation: moPreSpin .9s linear infinite;
}
@keyframes moPreSpin { to { transform: rotate(360deg); } }
.mo-preload-text {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ab-subtext);
font-weight: 700;
}
@media (pointer: fine) and (min-width: 980px) {
.ab-aurora {
transition: transform .8s var(--mo-out);
transform: translate3d(calc((var(--mx, 50%) - 50%) * 0.08), calc((var(--my, 50%) - 50%) * 0.08), 0);
}
.ab-au-1 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) *  0.20), calc((var(--my, 50%) - 50%) *  0.10)); }
.ab-au-2 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * -0.15), calc((var(--my, 50%) - 50%) *  0.20)); }
.ab-au-3 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) *  0.10), calc((var(--my, 50%) - 50%) * -0.18)); }
.ab-au-4 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * -0.22), calc((var(--my, 50%) - 50%) * -0.10)); }
}
@media (min-width: 981px) {
.ab-hero h1 .mo-w {
display: inline-block;
opacity: 1;
transform: none;
animation: none;
}
.ab-hero-sub  { animation-delay: .9s !important; }
.ab-hero-cta  { animation-delay: 1.0s !important; }
.ab-hero-trust{ animation-delay: 1.1s !important; }
.ab-hero-tag  { animation-delay: .2s !important; }
}
@media (max-width: 980px) {
.ab-hero h1 .mo-w {
display: inline;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
.mo-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.mo-lines svg {
width: 100%; height: 100%;
overflow: visible;
}
.mo-line-path {
fill: none;
stroke: url(#moLineGrad);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 4 6;
opacity: 0;
animation: moLineIn .6s ease forwards, moLineDash 18s linear infinite;
}
.mo-line-path:nth-child(1){ animation-delay: 2.5s, 0s; }
.mo-line-path:nth-child(2){ animation-delay: 2.7s, 0s; }
.mo-line-path:nth-child(3){ animation-delay: 2.9s, 0s; }
.mo-line-path:nth-child(4){ animation-delay: 3.1s, 0s; }
@keyframes moLineIn   { to { opacity: .35; } }
@keyframes moLineDash { to { stroke-dashoffset: -200; } }
.mo-line-end {
fill: var(--ab-mesh-1);
opacity: 0;
animation: moLineIn .6s ease forwards;
filter: drop-shadow(0 0 6px var(--ab-mesh-1));
}
.mo-line-end:nth-child(5){ animation-delay: 2.7s; }
.mo-line-end:nth-child(6){ animation-delay: 2.9s; }
.mo-line-end:nth-child(7){ animation-delay: 3.1s; }
.mo-line-end:nth-child(8){ animation-delay: 3.3s; }
@media (max-width: 980px) { .mo-lines { display: none; } }
.mo-toast-rail {
position: absolute;
top: 14px;
inset-inline-end: 14px;
z-index: 3;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
max-width: 240px;
}
.mo-toast {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--ab-mesh-1) 8%, transparent);
font-size: 11.5px;
color: var(--ab-text);
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateX(20px);
transition: opacity .45s var(--mo-out), transform .45s var(--mo-out);
}
[dir="rtl"] .mo-toast { transform: translateX(-20px); }
.mo-toast.is-in { opacity: 1; transform: translateX(0); }
.mo-toast::after {
content: '';
position: absolute;
bottom: 0; inset-inline-start: 0;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6));
transform-origin: left;
transform: scaleX(0);
animation: moToastBar 4s linear forwards;
}
[dir="rtl"] .mo-toast::after { transform-origin: right; }
@keyframes moToastBar { to { transform: scaleX(1); } }
.mo-toast-ico {
width: 26px; height: 26px;
border-radius: 8px;
background: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 18%, transparent);
color: var(--c, var(--ab-mesh-1));
display: flex; align-items: center; justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.mo-toast b { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.mo-toast span { display: block; font-size: 10px; color: var(--ab-subtext); margin-top: 2px; }
.mo-toast-amount {
margin-inline-start: auto;
font-family: "Geist Mono", monospace;
font-size: 11px;
font-weight: 800;
color: var(--ab-mesh-4);
white-space: nowrap;
}
@media (max-width: 760px) { .mo-toast-rail { display: none !important; } }
.mo-flip {
display: inline-flex;
gap: 2px;
}
.mo-flip-digit {
position: relative;
width: 1ch;
height: 1.1em;
overflow: hidden;
display: inline-block;
font-variant-numeric: tabular-nums;
}
.mo-flip-digit > span {
display: block;
height: 1.1em;
text-align: center;
transition: transform .55s var(--mo-spring);
}
.mo-flip-digit > span > i {
display: block;
height: 1.1em;
line-height: 1.1em;
font-style: normal;
}
.mo-flip-digit.is-changing { animation: moFlipFlash .3s ease; }
@keyframes moFlipFlash {
0%, 100% { filter: brightness(1); }
50%      { filter: brightness(1.5); }
}
@media (pointer: fine) and (min-width: 980px) {
.ab-feat-card, .ab-price-card, .ab-test, .ab-step, .ab-uc {
position: relative;
}
.ab-feat-card::before,
.ab-price-card::before,
.ab-step::before,
.ab-uc::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
280px circle at var(--mo-cx, 50%) var(--mo-cy, 50%),
color-mix(in srgb, var(--c, var(--ab-mesh-1)) 14%, transparent) 0%,
transparent 60%
);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
z-index: 0;
}
.ab-feat-card > *, .ab-price-card > *, .ab-step > *, .ab-uc > * { position: relative; z-index: 1; }
.ab-feat-card:hover::before,
.ab-price-card:hover::before,
.ab-step:hover::before,
.ab-uc:hover::before { opacity: 1; }
}
.mo-livedot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
margin-inline-end: 8px;
vertical-align: middle;
position: relative;
box-shadow: 0 0 0 0 rgba(34,197,94,.7);
animation: moLiveDot 1.8s ease-out infinite;
}
@keyframes moLiveDot {
0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ab-stat-cell b {
position: relative;
transition: filter .25s ease;
}
.ab-stat-cell b.is-pulse {
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ab-mesh-1) 70%, transparent));
}
@media (min-width: 981px) {
.ab-float-badge {
opacity: 0;
transform: translateY(20px) scale(.9);
animation: moBadgeIn .7s var(--mo-spring) forwards;
}
.ab-fb-1 { animation-delay: 1.2s; }
.ab-fb-2 { animation-delay: 1.35s; }
.ab-fb-3 { animation-delay: 1.5s; }
.ab-fb-4 { animation-delay: 1.65s; }
@keyframes moBadgeIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ab-float-badge::after {
content: '';
position: absolute;
top: 6px; inset-inline-end: 6px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ab-mesh-4);
box-shadow: 0 0 0 0 rgba(34,197,94,.6);
animation: moLiveDot 2s ease-out infinite;
}
}
.abp-chart-dot {
animation: abpChartDot .5s ease-out 3s forwards, moChartDotPulse 1.6s ease-in-out 3.5s infinite, moChartDotRoam 8s ease-in-out 4s infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes moChartDotPulse { 50% { r: 5.5; } }
@keyframes moChartDotRoam {
0%, 100% { transform: translate(0, 0); }
25%      { transform: translate(-30px, 6px); }
50%      { transform: translate(-60px, -4px); }
75%      { transform: translate(-20px, 8px); }
}
.mo-sticky-cta, .mo-live-pill { display: none !important; }
.mo-ripple {
position: absolute;
pointer-events: none;
border-radius: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
background: color-mix(in srgb, var(--ab-mesh-1) 35%, transparent);
transform: scale(0);
animation: moRipple .6s var(--mo-out) forwards;
z-index: 999;
}
@keyframes moRipple {
to { transform: scale(20); opacity: 0; }
}
.mo-section-enter { opacity: 1; transform: none; transition: none; }
.mo-section-enter.is-in { opacity: 1; transform: none; }
@media (max-width: 980px) {
.mo-section-enter { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 640px) {
.mo-snap-dots {
display: flex; gap: 6px;
justify-content: center;
margin-top: 18px;
}
.mo-snap-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ab-border-s);
transition: width .3s var(--mo-spring), background .3s;
}
.mo-snap-dot.is-active {
width: 22px;
background: var(--ab-mesh-1);
}
}
@media (min-width: 641px) { .mo-snap-dots { display: none; } }
@media (max-width: 980px) {
.ab-nav {
transition: padding .3s var(--mo-out), background .3s, border-color .3s;
}
.ab-nav.is-scrolled {
padding: 8px 0;
background: color-mix(in srgb, var(--ab-card-solid) 92%, transparent);
border-bottom: 1px solid var(--ab-border);
}
.ab-nav.is-scrolled .ab-brand-logo { height: 24px; transition: height .3s; }
}
@media (max-width: 760px) {
.ab-hero-mock {
animation: moHeroMockSimple .8s var(--mo-out) .15s both;
}
@keyframes moHeroMockSimple {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
.ab-hero-visual::after { display: none !important; }
.ab-hero-visual::before { display: none !important; }
.ab-hero::before { display: none !important; }
}
.ab-stars span {
animation-duration: 6s !important;
}
.ab-section-head .ab-h2 {
position: relative;
display: inline-block;
}
.ab-section-head .ab-h2::after {
content: '';
position: absolute;
bottom: -8px; left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6));
border-radius: 3px;
transform: translateX(-50%);
transition: width .8s var(--mo-out);
}
.ab-section-head.is-in .ab-h2::after {
width: 56px;
}
.ab-cta-band {
isolation: isolate;
}
.ab-cta-band::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from var(--mo-rot, 0deg),
transparent 0deg,
rgba(255,255,255,.3) 60deg,
transparent 120deg,
rgba(255,255,255,.15) 200deg,
transparent 280deg);
pointer-events: none;
mix-blend-mode: overlay;
animation: moCtaOrbit 12s linear infinite;
z-index: 0;
}
@keyframes moCtaOrbit { to { --mo-rot: 360deg; } }
.ab-cta-band > * { position: relative; z-index: 1; }
.ab-footer-col a, .ab-faq-body a {
position: relative;
}
.ab-footer-col a::after, .ab-faq-body a::after {
content: '';
position: absolute;
bottom: -2px;
inset-inline-start: 0;
width: 0;
height: 1.5px;
background: var(--ab-mesh-1);
transition: width .4s var(--mo-out);
}
.ab-footer-col a:hover::after, .ab-faq-body a:hover::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
.mo-preload, .mo-toast, .mo-toast::after, .mo-line-path, .mo-line-end,
.ab-hero h1 .mo-w, .ab-float-badge, .abp-chart-dot, .ab-cta-band::after { animation: none !important; }
.mo-preload { display: none; }
.ab-hero h1 .mo-w { opacity: 1; transform: none; }
.ab-float-badge { opacity: 1; transform: none; }
}
:root[data-theme="light"] .mo-toast,
:root[data-abl-theme="light"] .mo-toast {
box-shadow: 0 12px 32px rgba(15,23,42,.12), 0 0 0 1px var(--ab-border);
}
:root[data-theme="light"] .mo-preload,
:root[data-abl-theme="light"] .mo-preload { background: #ffffff; }
/* ==== nav.css ==== */
.abp-tabbar       { display: none !important; }
.ab-drawer        { display: none !important; }
.ab-drawer-overlay{ display: none !important; }
.ab-wa-float      { display: none !important; }
.mo-sticky-cta, .mo-live-pill { display: none !important; }
.site-tabbar { display: none; }
@media (max-width: 980px) {
body.ab-body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
.site-tabbar {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
position: fixed;
bottom: max(12px, env(safe-area-inset-bottom, 12px));
left: 12px;
right: 12px;
z-index: 90;
padding: 8px;
background: color-mix(in srgb, var(--ab-card-solid) 88%, transparent);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--ab-border);
border-radius: 22px;
box-shadow:
0 18px 50px -10px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.04),
inset 0 1px 0 rgba(255,255,255,.08);
gap: 4px;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.site-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px;
min-height: 50px;
color: var(--ab-subtext);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .2px;
border-radius: 12px;
text-decoration: none;
transition: color .25s, transform .15s;
}
.site-tab > i {
font-size: 18px;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .25s;
}
.site-tab:active { transform: scale(.92); }
.site-tab.is-active {
color: var(--ab-mesh-1);
}
.site-tab.is-active > i {
transform: translateY(-2px) scale(1.1);
}
.site-tab.is-active::after {
content: '';
position: absolute;
bottom: 3px;
left: 50%;
width: 18px;
height: 3px;
transform: translateX(-50%);
background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6));
border-radius: 3px;
box-shadow: 0 0 10px var(--ab-mesh-1);
}
.site-tab.cta {
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff !important;
height: 56px;
border-radius: 18px;
transform: translateY(-10px) scale(1.04);
box-shadow:
0 14px 28px -4px color-mix(in srgb, var(--ab-mesh-1) 55%, transparent),
0 0 0 4px var(--ab-bg-0),
inset 0 1px 0 rgba(255,255,255,.3);
position: relative;
overflow: hidden;
}
.site-tab.cta > i { color: #fff; font-size: 22px; }
.site-tab.cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
background-size: 220% 100%;
background-position: -100% 0;
pointer-events: none;
animation: tabCtaShine 4s ease-in-out infinite;
}
@keyframes tabCtaShine {
0%, 100% { background-position: -100% 0; }
50%      { background-position: 200% 0; }
}
.site-tab.cta::after { display: none !important; }
.site-tab.cta:active { transform: translateY(-6px) scale(.97); }
.wa-float {
bottom: 102px !important;
width: 50px !important;
height: 50px !important;
font-size: 22px !important;
}
body.menu-open .site-tabbar { opacity: 0; pointer-events: none; transition: opacity .25s; }
}
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: transparent;
border-bottom: 0;
padding: 14px 16px 0;
transition: padding .35s cubic-bezier(.16,1,.3,1);
pointer-events: none; 
}
.site-nav.is-stuck { padding-top: 10px; }
.site-nav-inner {
pointer-events: auto;
position: relative;
max-width: min(1240px, 92vw);
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 24px;
background: color-mix(in srgb, var(--ab-card-solid) 94%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid var(--ab-border);
border-radius: 999px;
transition:
padding .35s cubic-bezier(.16,1,.3,1),
background .25s,
border-color .25s,
max-width .35s cubic-bezier(.16,1,.3,1);
}
:root[data-theme="light"]  .site-nav-inner,
:root[data-abl-theme="light"] .site-nav-inner {
border-color: var(--ab-border-s);
box-shadow:
0 1px 2px rgba(24, 32, 64, .04),
0 8px 24px rgba(24, 32, 64, .07);
}
:root[data-theme="light"]  .site-nav.is-stuck .site-nav-inner,
:root[data-abl-theme="light"] .site-nav.is-stuck .site-nav-inner {
box-shadow:
0 1px 2px rgba(24, 32, 64, .05),
0 10px 30px rgba(24, 32, 64, .10);
}
.site-nav.is-stuck .site-nav-inner {
padding: 10px 22px;
max-width: min(1140px, 88vw);
background: var(--ab-card-solid);
border-color: var(--ab-border-s, var(--ab-border));
}
.site-nav-brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.site-nav-brand:hover { transform: scale(1.04); }
.site-nav-brand img {
height: 36px;
width: auto;
max-width: none;
object-fit: contain;
}
.site-nav.is-stuck .site-nav-brand img { height: 36px; }
.site-nav-brand-dark, .site-nav-brand-light,
.site-footer .site-nav-brand-dark, .site-footer .site-nav-brand-light { display: none !important; }
:root[data-theme="dark"]  .site-nav-brand-dark,
:root[data-abl-theme="dark"]  .site-nav-brand-dark  { display: inline-block !important; }
:root[data-theme="light"] .site-nav-brand-light,
:root[data-abl-theme="light"] .site-nav-brand-light { display: inline-block !important; }
.site-nav-menu {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
.site-nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border-radius: 11px;
font-size: 14px;
font-weight: 600;
color: var(--ab-text-s);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
position: relative;
text-decoration: none;
transition: color .2s, background .2s;
font-family: inherit;
}
.site-nav-link:hover {
color: var(--ab-text);
background: var(--ab-card-2);
}
.site-nav-link.is-active {
color: var(--ab-mesh-1);
background: color-mix(in srgb, var(--ab-mesh-1) 9%, transparent);
}
.site-nav-link .chev {
font-size: 9px;
opacity: .6;
transition: transform .3s;
}
.site-nav-drop { position: relative; }
.site-nav-drop:hover .site-nav-link .chev,
.site-nav-drop:focus-within .site-nav-link .chev {
transform: rotate(180deg);
}
.site-nav-drop-panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-6px) scale(.98);
transform-origin: top center;
width: 600px;
max-width: min(600px, calc(100vw - 32px));
max-height: min(80vh, 600px);
overflow-y: auto;
background: var(--ab-card-solid);
border: 1px solid var(--ab-border);
border-radius: 18px;
box-shadow:
0 28px 60px -10px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.04);
padding: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
opacity: 0;
visibility: hidden;
transition: opacity .3s, transform .3s, visibility 0s linear .3s;
z-index: 50;
}
.site-nav-drop:hover .site-nav-drop-panel,
.site-nav-drop:focus-within .site-nav-drop-panel {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
transition: opacity .3s, transform .3s, visibility 0s linear 0s;
}
.site-nav-drop-item {
display: flex;
gap: 12px;
padding: 12px;
border-radius: 12px;
transition: background .2s, transform .2s;
text-decoration: none;
}
.site-nav-drop-item:hover {
background: var(--ab-card-2);
transform: translateX(2px);
}
[dir="rtl"] .site-nav-drop-item:hover { transform: translateX(-2px); }
.site-nav-drop-item .ico {
width: 40px; height: 40px;
border-radius: 11px;
background: color-mix(in srgb, var(--c) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
color: var(--c);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.site-nav-drop-item b {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--ab-text);
margin-bottom: 3px;
}
.site-nav-drop-item span {
display: block;
font-size: 11.5px;
color: var(--ab-subtext);
line-height: 1.45;
}
.site-nav-drop.has-mega { position: static; }
.site-nav-drop-panel.is-mega {
left: 0;
right: 0;
margin-inline: auto;
width: min(1180px, 100%);
max-width: none;
transform: translateY(-6px) scale(.985);
transform-origin: top center;
grid-template-columns: repeat(4, 1fr);
gap: 2px 4px;
padding: 18px 18px 12px;
}
.site-nav-drop.has-mega:hover  .site-nav-drop-panel.is-mega,
.site-nav-drop.has-mega:focus-within .site-nav-drop-panel.is-mega {
transform: translateY(0) scale(1);
}
.nav-mega-col { display: flex; flex-direction: column; gap: 2px; }
[dir="rtl"] .nav-mega-col + .nav-mega-col { border-right: 1px solid var(--ab-border); padding-right: 10px; margin-right: 4px; }
[dir="ltr"] .nav-mega-col + .nav-mega-col { border-left:  1px solid var(--ab-border); padding-left:  10px; margin-left:  4px; }
.nav-mega-head {
margin: 2px 0 6px;
padding-inline-start: 12px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ab-subtext);
opacity: .75;
}
.nav-mega-foot {
grid-column: 1 / -1;
margin-top: 10px;
padding: 11px 14px;
border-radius: 13px;
border: 1px solid color-mix(in srgb, var(--ab-mesh-1) 22%, transparent);
background:
linear-gradient(90deg,
color-mix(in srgb, var(--ab-mesh-1) 11%, transparent),
transparent 70%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.nav-mega-foot-txt {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--ab-text-s);
line-height: 1.5;
}
.nav-mega-foot-txt i { color: var(--ab-mesh-1); font-size: 15px; flex-shrink: 0; }
.nav-mega-foot-cta {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
padding: 8px 15px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
color: #fff;
background: var(--ab-mesh-1);
transition: filter .2s, transform .2s;
}
.nav-mega-foot-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nav-mega-foot-cta i { font-size: 10px; }
[dir="rtl"] .nav-mega-arrow { transform: scaleX(-1); }
@media (max-width: 1240px) {
.site-nav-drop-panel.is-mega { grid-template-columns: repeat(2, 1fr); width: min(680px, 100%); }
[dir="rtl"] .nav-mega-col:nth-child(3) { border-right: 0; padding-right: 0; margin-right: 0; }
[dir="ltr"] .nav-mega-col:nth-child(3) { border-left:  0; padding-left:  0; margin-left:  0; }
}
.site-nav-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.site-nav-icon-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: 11px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
color: var(--ab-text-s);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
font-family: inherit;
font-weight: 700;
font-size: 12px;
letter-spacing: .5px;
text-decoration: none;
transition: all .25s cubic-bezier(.16,1,.3,1);
}
.site-nav-icon-btn[data-lang] {
width: auto;
min-width: 44px;
padding: 0 12px;
}
.site-nav-icon-btn:hover {
color: var(--ab-text);
border-color: var(--ab-border-s);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.site-nav-icon-sun, .site-nav-icon-moon {
position: absolute;
font-size: 15px;
transition: opacity .3s, transform .3s;
}
:root[data-theme="dark"] .site-nav-icon-sun,
:root[data-abl-theme="dark"] .site-nav-icon-sun  { opacity: 0; transform: rotate(-180deg) scale(.4); }
:root[data-theme="dark"] .site-nav-icon-moon,
:root[data-abl-theme="dark"] .site-nav-icon-moon { opacity: 1; }
:root[data-theme="light"] .site-nav-icon-sun,
:root[data-abl-theme="light"] .site-nav-icon-sun  { opacity: 1; color: #f59e0b; }
:root[data-theme="light"] .site-nav-icon-moon,
:root[data-abl-theme="light"] .site-nav-icon-moon { opacity: 0; transform: rotate(180deg) scale(.4); }
.site-nav-cta {
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 16px;
border-radius: 11px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .2px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
font-family: inherit;
position: relative;
overflow: hidden;
transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.site-nav-cta.ghost {
background: var(--ab-card-2);
color: var(--ab-text);
border-color: var(--ab-border);
}
.site-nav-cta.ghost:hover {
border-color: var(--ab-border-s);
transform: translateY(-1px);
}
.site-nav-cta.primary {
background: linear-gradient(135deg, var(--ab-mesh-1) 0%, var(--ab-mesh-3) 50%, var(--ab-mesh-1) 100%);
background-size: 220% 100%;
color: #fff;
box-shadow: 0 8px 20px -2px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.site-nav-cta.primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
background-size: 220% 100%;
background-position: -120% 0;
pointer-events: none;
transition: background-position .9s cubic-bezier(.16,1,.3,1);
}
.site-nav-cta.primary:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 12px 28px -2px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.site-nav-cta.primary:hover::before { background-position: 220% 0; }
.site-nav-cta i { font-size: 11px; position: relative; z-index: 1; }
[dir="rtl"] .site-nav-cta i.fa-arrow-right { transform: scaleX(-1); }
.site-nav-cta > span { position: relative; z-index: 1; }
.site-nav-burger {
display: none;
position: relative;
width: 42px;
height: 42px;
padding: 0;
border-radius: 11px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
color: var(--ab-text);
cursor: pointer;
font-family: inherit;
transition: background .25s, border-color .25s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.site-nav-burger:active { transform: scale(.94); }
.site-nav-burger span {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
top .25s ease .1s,
opacity .15s;
}
.site-nav-burger span:nth-child(1) { top: 14px; }
.site-nav-burger span:nth-child(2) { top: 20px; }
.site-nav-burger span:nth-child(3) { top: 26px; }
body.menu-open .site-nav-burger {
background: var(--ab-mesh-1);
border-color: var(--ab-mesh-1);
color: #fff;
}
body.menu-open .site-nav-burger span:nth-child(1) {
top: 20px;
transform: translateX(-50%) rotate(45deg);
transition: top .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1) .1s;
}
body.menu-open .site-nav-burger span:nth-child(2) {
opacity: 0;
transition: opacity .1s;
}
body.menu-open .site-nav-burger span:nth-child(3) {
top: 20px;
transform: translateX(-50%) rotate(-45deg);
transition: top .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1) .1s;
}
@media (max-width: 1024px) {
.site-nav-menu { display: none; }
.site-nav-cta.ghost,
.site-nav-cta.primary { display: none; }
.site-nav-burger { display: inline-flex; align-items: center; justify-content: center; }
.site-nav-inner {
padding: 12px 16px;
gap: 12px;
justify-content: space-between;
}
.site-nav-actions {
margin-inline-start: auto;  
gap: 6px;
}
.site-nav.is-stuck .site-nav-inner { padding: 9px 16px; }
.site-nav-brand img { height: 40px; }
.site-nav.is-stuck .site-nav-brand img { height: 40px; }
.site-nav-icon-btn {
width: 42px;
height: 42px;
border-radius: 12px;
}
.site-nav-icon-btn[data-lang] {
width: auto;
min-width: 46px;
padding: 0 12px;
font-size: 12.5px;
}
.site-nav-burger {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(180deg, var(--ab-card-2), var(--ab-card));
}
.site-nav-burger:hover {
border-color: color-mix(in srgb, var(--ab-mesh-1) 35%, var(--ab-border));
}
}
@media (max-width: 480px) {
.site-nav-inner { padding: 10px 14px; gap: 8px; }
.site-nav.is-stuck .site-nav-inner { padding: 8px 14px; }
.site-nav-actions { gap: 5px; }
.site-nav-icon-btn { width: 40px; height: 40px; }
.site-nav-burger { width: 42px; height: 42px; }
.site-nav-brand img { height: 36px; }
.site-nav.is-stuck .site-nav-brand img { height: 36px; }
}
@media (max-width: 360px) {
.site-nav-actions .site-nav-icon-btn[data-lang] { display: none; }
}
.site-mobile-menu {
position: fixed;
inset: 0 0 auto 0;
width: 100%;
height: 100vh;
height: 100dvh;
z-index: 99;
background: var(--ab-bg-0);
visibility: hidden;
opacity: 0;
transform: translateY(-30px);
transition: opacity .4s cubic-bezier(.16,1,.3,1),
transform .4s cubic-bezier(.16,1,.3,1),
visibility 0s linear .4s;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
pointer-events: none;
}
body.menu-open .site-mobile-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity .4s cubic-bezier(.16,1,.3,1),
transform .4s cubic-bezier(.16,1,.3,1),
visibility 0s linear 0s;
}
body.menu-open { overflow: hidden; }
.site-mobile-menu::before {
content: '';
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 90vw;
max-width: 600px;
height: 600px;
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--ab-mesh-1) 22%, transparent),
color-mix(in srgb, var(--ab-mesh-6) 8%, transparent) 40%,
transparent 70%);
filter: blur(60px);
pointer-events: none;
opacity: .9;
}
.site-mobile-inner {
position: relative;
z-index: 1;
padding: 96px 18px 56px;
max-width: 520px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 100%;
}
.site-mobile-link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 16px;
font-size: 16px;
font-weight: 700;
color: var(--ab-text);
background: var(--ab-card);
border: 1px solid var(--ab-border);
text-decoration: none;
transition: transform .2s cubic-bezier(.34,1.56,.64,1),
background .2s,
border-color .2s;
-webkit-tap-highlight-color: transparent;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.site-mobile-link:active {
transform: scale(.97);
background: var(--ab-card-2);
}
.site-mobile-link.is-active {
background: linear-gradient(135deg,
color-mix(in srgb, var(--ab-mesh-1) 14%, transparent),
color-mix(in srgb, var(--ab-mesh-1) 4%, transparent));
border-color: color-mix(in srgb, var(--ab-mesh-1) 35%, transparent);
}
.site-mobile-link > i:first-child {
width: 40px;
height: 40px;
border-radius: 11px;
background: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 16%, transparent);
color: var(--c, var(--ab-mesh-1));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.site-mobile-link .arrow {
margin-inline-start: auto;
color: var(--ab-subtext);
font-size: 13px;
transition: transform .25s, color .25s;
}
[dir="rtl"] .site-mobile-link .arrow.fa-arrow-right,
[dir="rtl"] .site-mobile-link .arrow.fa-chevron-right { transform: scaleX(-1); }
.site-mobile-detail {
background: var(--ab-card);
border: 1px solid var(--ab-border);
border-radius: 16px;
overflow: hidden;
transition: border-color .25s;
}
.site-mobile-detail summary {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
font-size: 16px;
font-weight: 700;
color: var(--ab-text);
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.site-mobile-detail summary::-webkit-details-marker { display: none; }
.site-mobile-detail summary > i:first-child {
width: 40px;
height: 40px;
border-radius: 11px;
background: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 16%, transparent);
color: var(--c, var(--ab-mesh-1));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.site-mobile-detail summary .arrow {
margin-inline-start: auto;
font-size: 12px;
transition: transform .3s;
color: var(--ab-subtext);
}
.site-mobile-detail[open] {
border-color: color-mix(in srgb, var(--ab-mesh-1) 35%, transparent);
}
.site-mobile-detail[open] summary .arrow {
transform: rotate(180deg);
color: var(--ab-mesh-1);
}
.site-mobile-sublist {
display: flex;
flex-direction: column;
padding: 4px 12px 14px;
gap: 2px;
}
.site-mobile-sublist a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
font-size: 14.5px;
font-weight: 500;
color: var(--ab-text-s);
text-decoration: none;
transition: background .2s, color .2s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.site-mobile-sublist a:active {
background: var(--ab-card-2);
color: var(--ab-mesh-1);
transform: scale(.98);
}
.site-mobile-sublist a i {
width: 30px;
height: 30px;
border-radius: 9px;
background: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 14%, transparent);
color: var(--c, var(--ab-mesh-1));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.site-mobile-divider {
height: 1px;
background: var(--ab-border);
margin: 12px 4px;
}
.site-mobile-cta {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.site-mobile-cta a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 56px;
border-radius: 16px;
font-size: 15.5px;
font-weight: 800;
text-decoration: none;
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color: transparent;
}
.site-mobile-cta a:active { transform: scale(.97); }
.site-mobile-cta a.primary {
background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3));
color: #fff;
box-shadow: 0 14px 32px -4px rgba(124,58,237,.5),
inset 0 1px 0 rgba(255,255,255,.25);
position: relative;
overflow: hidden;
}
.site-mobile-cta a.primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
background-size: 220% 100%;
background-position: -100% 0;
pointer-events: none;
animation: navCtaShine 3s ease-in-out infinite;
}
@keyframes navCtaShine {
0%, 100% { background-position: -100% 0; }
50%      { background-position: 200% 0; }
}
.site-mobile-cta a.ghost {
background: var(--ab-card);
border: 1px solid var(--ab-border);
color: var(--ab-text);
}
.site-mobile-cta a i { font-size: 13px; }
[dir="rtl"] .site-mobile-cta a i.fa-arrow-right { transform: scaleX(-1); }
.site-footer {
position: relative;
margin-top: 100px;
padding: 80px 0 28px;
background: color-mix(in srgb, var(--ab-card-solid) 78%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border-top: 1px solid var(--ab-border);
overflow: hidden;
z-index: 2;
}
.site-footer::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 600px;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--ab-mesh-1),
var(--ab-mesh-6),
var(--ab-mesh-1),
transparent);
opacity: .9;
filter: blur(.5px);
}
.site-footer::after {
content: '';
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 360px;
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--ab-mesh-1) 14%, transparent),
transparent 70%);
pointer-events: none;
filter: blur(30px);
opacity: .8;
}
.site-footer-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
.site-footer-main {
display: grid;
grid-template-columns: 1.4fr 3fr;
gap: 80px;
margin-bottom: 56px;
}
.site-footer-brand {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.site-footer-brand img { height: 36px; display: block; }
.site-footer-pitch {
margin: 22px 0;
font-size: 14.5px;
line-height: 1.7;
color: var(--ab-subtext);
max-width: 380px;
}
.site-footer-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.site-footer-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 50px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
font-size: 11.5px;
font-weight: 700;
color: var(--ab-text-s);
}
.site-footer-badges i {
color: var(--ab-mesh-1);
font-size: 10px;
}
.site-footer-social {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.site-footer-social a {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--ab-card-2);
border: 1px solid var(--ab-border);
color: var(--ab-text-s);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
text-decoration: none;
transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.site-footer-social a:hover {
color: #fff;
background: var(--ab-mesh-1);
border-color: var(--ab-mesh-1);
transform: translateY(-3px) rotate(-6deg);
box-shadow: 0 10px 22px -4px var(--ab-mesh-1);
}
.site-footer-social a.wa:hover { background: #25d366; border-color: #25d366; box-shadow: 0 10px 22px -4px #25d366; }
.site-footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px;
}
.site-footer-col {
display: flex;
flex-direction: column;
}
.site-footer-col-head {
font-size: 12px;
font-weight: 800;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--ab-text);
margin: 0 0 18px;
padding: 0;
}
.site-footer-col-links {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-footer-col-links a {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: var(--ab-subtext);
text-decoration: none;
padding: 7px 0;
position: relative;
transition: color .2s, padding .25s cubic-bezier(.16,1,.3,1);
}
.site-footer-col-links a::before {
content: '';
position: absolute;
top: 50%;
inset-inline-start: 0;
width: 10px;
height: 1.5px;
background: var(--ab-mesh-1);
transform: translateY(-50%) scaleX(0);
transform-origin: left;
transition: transform .3s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .site-footer-col-links a::before { transform-origin: right; }
.site-footer-col-links a:hover {
color: var(--ab-text);
padding-inline-start: 16px;
}
.site-footer-col-links a:hover::before { transform: translateY(-50%) scaleX(1); }
.site-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--ab-border);
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--ab-subtext);
}
.site-footer-bottom-meta {
display: inline-flex;
align-items: center;
gap: 12px;
}
.site-footer-bottom-meta .dot {
color: var(--ab-border-s);
}
.site-footer-status {
display: inline-flex;
align-items: center;
gap: 7px;
}
.site-footer-status::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,.7);
animation: footerStatusPulse 2s ease-out infinite;
flex-shrink: 0;
}
@keyframes footerStatusPulse {
0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (max-width: 1024px) {
.site-footer-main {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 40px;
}
.site-footer-pitch { max-width: none; }
}
@media (max-width: 640px) {
.site-footer { padding: 60px 0 24px; margin-top: 60px; }
.site-footer-inner { padding: 0 18px; }
.site-footer-main { gap: 32px; margin-bottom: 28px; }
.site-footer-cols {
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--ab-border);
}
.site-footer-col {
border-bottom: 1px solid var(--ab-border);
overflow: hidden;
}
.site-footer-col-head {
margin: 0;
padding: 18px 4px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.site-footer-col-head::after {
content: '+';
font-size: 22px;
color: var(--ab-mesh-1);
font-weight: 300;
line-height: 1;
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.site-footer-col[data-open] .site-footer-col-head::after {
transform: rotate(45deg);
}
.site-footer-col-links {
max-height: 0;
overflow: hidden;
transition: max-height .35s cubic-bezier(.16,1,.3,1), padding .35s;
padding: 0 4px;
}
.site-footer-col[data-open] .site-footer-col-links {
max-height: 500px;
padding: 0 4px 18px;
}
.site-footer-col-links a { padding: 9px 0; }
.site-footer-bottom {
flex-direction: column;
align-items: flex-start;
text-align: start;
padding-top: 24px;
font-size: 12px;
}
}
.wa-float {
position: fixed;
bottom: 24px;
inset-inline-end: 24px;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
text-decoration: none;
box-shadow: 0 14px 32px -4px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.25);
z-index: 80;
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.wa-float:hover { transform: scale(1.08) rotate(-5deg); }
.wa-float-pulse {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid #25d366;
opacity: 0;
animation: waFloatPulse 2.2s ease-out infinite;
pointer-events: none;
}
@keyframes waFloatPulse {
0%   { transform: scale(.85); opacity: .8; }
100% { transform: scale(1.55); opacity: 0; }
}
@media (max-width: 768px) {
.wa-float {
bottom: 20px;
inset-inline-end: 20px;
width: 52px;
height: 52px;
font-size: 22px;
}
}
body.menu-open .wa-float { opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) {
.site-mobile-menu,
.site-nav-burger span,
.site-footer-status::before,
.wa-float-pulse,
.site-nav-cta.primary::before,
.site-mobile-cta a.primary::before { animation: none !important; transition-duration: .1s !important; }
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 2px solid var(--ab-mesh-1);
outline-offset: 3px;
border-radius: 6px;
}
.ab-btn:focus-visible,
.site-nav-cta:focus-visible,
.site-tab:focus-visible,
.site-nav-icon-btn:focus-visible,
.site-nav-burger:focus-visible {
outline-offset: 2px;
}
:root[data-theme="light"] .site-nav,
:root[data-theme="light"] #siteNav {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 0;
}
:root[data-theme="light"] .site-mobile-menu { background: #fff; }
:root[data-theme="light"] .site-tabbar { background: rgba(255,255,255,.86); }
:root[data-theme="light"] .site-footer {
background: linear-gradient(180deg, #fafbff 0%, #f3f5ff 100%);
border-top-color: rgba(0,0,0,.08);
}
:root[data-theme="light"] .site-footer-col-head { color: #1f1f29; }
:root[data-theme="light"] .site-footer-col-links a { color: #4a4a55; }
:root[data-theme="light"] .site-footer-col-links a:hover { color: var(--ab-mesh-1); }
:root[data-theme="light"] .wa-float { box-shadow: 0 18px 40px -10px rgba(37,211,102,.45); }
@media (hover: none), (pointer: coarse) {
.ab-feat-card:hover,
.ab-card:hover,
.site-nav-cta:hover,
.site-nav-drop-item:hover,
.site-mobile-link:hover {
transform: none !important;
}
.site-tabbar,
.site-nav,
.site-mobile-menu {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
}
@media (max-width: 980px) {
.site-nav-icon-btn,
.site-nav-burger {
min-width: 44px;
min-height: 44px;
}
.site-footer-social a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
html, body { overflow-x: clip; }
.site-tabbar .site-tab { min-height: 48px; min-width: 48px; }
.site-mobile-cta.is-top { flex-direction: row; margin: 0 0 6px; }
.site-mobile-cta.is-top a.primary { flex: 1.5; height: 52px; font-size: 15px; }
.site-mobile-cta.is-top a.ghost   { flex: 1;   height: 52px; font-size: 15px; }
.site-mobile-sec {
font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--ab-subtext); padding: 10px 6px 0; margin-top: 4px;
}
[dir="rtl"] .site-mobile-sec { letter-spacing: 0; font-size: 12.5px; }
.site-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.site-mobile-tile {
display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px;
border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ab-text);
background: var(--ab-card); border: 1px solid var(--ab-border); text-decoration: none;
-webkit-tap-highlight-color: transparent; transition: transform .2s, background .2s;
}
.site-mobile-tile:active { transform: scale(.97); background: var(--ab-card-2); }
.site-mobile-tile.is-active { border-color: color-mix(in srgb, var(--ab-mesh-1) 35%, transparent); background: color-mix(in srgb, var(--ab-mesh-1) 10%, var(--ab-card)); }
.site-mobile-tile i {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--ab-mesh-1) 14%, transparent); color: var(--ab-mesh-1);
}
.site-mobile-foot {
display: flex; justify-content: center; gap: 10px; padding: 14px 0 0; font-size: 13.5px; color: var(--ab-subtext);
}
.site-mobile-foot a { color: var(--ab-text-s, var(--ab-subtext)); text-decoration: none; font-weight: 600; }
/* ==== design-2.css ==== */
:root[data-theme="dark"], :root[data-abl-theme="dark"] {
--acc:        #8b5cf6;   
--acc-deep:   #7c3aed;
--acc-line:   color-mix(in srgb, var(--acc) 30%, transparent);
--acc-wash:   color-mix(in srgb, var(--acc) 11%, transparent);
--acc-glow:   color-mix(in srgb, var(--acc) 22%, transparent);
--sf-1:       color-mix(in srgb, #ffffff 3%, transparent);
--sf-2:       color-mix(in srgb, var(--ab-card-solid) 70%, transparent);
--sf-3:       color-mix(in srgb, var(--ab-card-solid) 94%, transparent);
--sf-line:    rgba(255,255,255,.075);
--sf-line-s:  rgba(255,255,255,.14);
--sf-lift:    0 24px 60px -18px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset;
--hair:       rgba(255,255,255,.09);
}
:root[data-theme="light"], :root[data-abl-theme="light"] {
--acc:        #7c3aed;
--acc-deep:   #6d28d9;
--acc-line:   color-mix(in srgb, var(--acc) 26%, transparent);
--acc-wash:   color-mix(in srgb, var(--acc) 7%, transparent);
--acc-glow:   color-mix(in srgb, var(--acc) 16%, transparent);
--sf-1:       #f8f9fd;
--sf-2:       #ffffff;
--sf-3:       #ffffff;
--sf-line:    #e9ebf3;
--sf-line-s:  #d6dae8;
--sf-lift:    0 22px 50px -20px rgba(31,26,60,.20), 0 1px 0 rgba(255,255,255,.9) inset;
--hair:       #e9ebf3;
}
:root {
--ff-display: "Zain", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ff-text:    "Zain", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ff-data:    "Geist Mono", "Zain", ui-monospace, SFMono-Regular, monospace;
--sp-1: 6px;  --sp-2: 10px; --sp-3: 14px; --sp-4: 20px;
--sp-5: 28px; --sp-6: 40px; --sp-7: 56px; --sp-8: 80px;
--sp-9: clamp(56px, 7vw, 88px);   
--measure: 70ch;
}
.ab-h1, .ab-h-display, .ab-h2, .ab-h3,
.gd-hero h1, .gd-body h2, .gd-body h3,
.hub-tbl-head, .ans-q, .hub-row-head h2, .calc-big,
.cm-name, .nav-mega-head {
font-family: var(--ff-display);
font-optical-sizing: auto;
}
.ab-h1, .ab-h-display { letter-spacing: 0; text-wrap: balance; }
.ab-h2               { letter-spacing: 0; text-wrap: balance; }
.ab-h3               { letter-spacing: 0; text-wrap: balance; }
:root:lang(en) .ab-h1, :root:lang(en) .ab-h-display { letter-spacing: -1.4px; }
:root:lang(en) .ab-h2 { letter-spacing: -1px; }
:root:lang(en) .ab-h3 { letter-spacing: -.5px; }
.ab-lead {
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.85;
color: var(--ab-text-s);
max-width: var(--measure);
}
.ab-lead.large { font-size: clamp(17px, 1.7vw, 20px); }
:root:lang(ar) .ab-eyebrow,
:root:lang(ar) .gd-kicker,
:root:lang(ar) .ab-stamp,
:root:lang(ar) .nav-mega-head,
:root:lang(ar) .ans-topic h2,
:root:lang(ar) .fx-cap,
:root:lang(ar) .pr-badge,
:root:lang(ar) .pr-fx-note,
:root:lang(ar) .ab-btn,
:root:lang(ar) .ab-lang-btn,
:root:lang(ar) .ab-strip-head,
:root:lang(ar) .ab-hero-mock-stat span,
:root:lang(ar) .ab-hero-tag,
:root:lang(ar) .ab-hero-trust { letter-spacing: 0; }
.ab-grad {
background: linear-gradient(105deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 55%, var(--ab-mesh-3)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cm td, .cm th, .hub-row-stat b, .calc-big, .ans-meta,
.hub-row-n, .gd-stats b, table.gd-tbl td { font-variant-numeric: tabular-nums; }
.ab-stamp {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-family: var(--ff-data);
font-size: 11px; line-height: 1.65; letter-spacing: .04em;
color: var(--ab-subtext);
padding: 5px 11px;
border: 1px solid var(--hair);
border-radius: 7px;
background: var(--sf-1);
}
.ab-stamp b { font-weight: 400; color: var(--ab-text-s); }
.ab-stamp .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--acc); flex: none; }
.ab-tick { position: relative; height: 1px; background: var(--hair); margin: var(--sp-7) 0; }
.ab-tick::before, .ab-tick::after {
content: ''; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--acc);
}
.ab-tick::before { inset-inline-start: 0; }
.ab-tick::after  { inset-inline-end: 0; }
.hub-tbl-head { position: relative; padding-top: var(--sp-6); }
.hub-tbl-head::before {
content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--hair);
}
.hub-tbl-head::after {
content: ''; position: absolute; top: -3px; inset-inline-start: 0;
width: 1px; height: 7px; background: var(--acc);
}
.hub-row, .ans, .hub-else-card, .calc-in, .gd-note, .svl-all {
background: var(--sf-2);
border-color: var(--sf-line);
}
.hub-row:hover, .ans:hover {
background: var(--sf-3);
border-color: var(--acc-line);
box-shadow: var(--sf-lift);
}
.calc-out { background: var(--sf-3); border-color: var(--acc-line); box-shadow: var(--sf-lift); }
.gd-cta, .ab-cta-band {
background:
radial-gradient(120% 140% at 15% 0%, var(--acc-wash), transparent 62%),
var(--sf-3);
border: 1px solid var(--acc-line);
box-shadow: var(--sf-lift);
}
.cm, table.gd-tbl { border-collapse: collapse; }
.cm-wrap { background: transparent; }
.hub-row, .ans, .hub-pick a, .ab-btn, .site-nav-drop-item, .hub-else-card {
transition:
transform     .34s cubic-bezier(.2,.9,.25,1),
box-shadow    .34s cubic-bezier(.2,.9,.25,1),
border-color  .22s ease,
background    .22s ease;
}
.ab-btn-primary:hover { transform: translateY(-2px); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--acc);
outline-offset: 3px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.hub-row, .ans, .hub-pick a, .ab-btn, .site-nav-drop-item, .hub-else-card { transition: none; }
.hub-row:hover, .ans:hover, .ab-btn-primary:hover, .hub-pick a:hover { transform: none; }
}
.ab-section    { padding: var(--sp-9) 0; }
.ab-section-sm { padding: var(--sp-6) 0; }
.ab-section-head { margin-bottom: var(--sp-6); }
.gd-body > p, .gd-body > ul, .gd-body > ol { max-width: var(--measure); }
.gd-main { max-width: min(760px, 100%); }
.gd-body h2 { margin-top: var(--sp-7); }
.gd-body h3 { margin-top: var(--sp-6); }
.gd-body h2 + p, .gd-body h3 + p { margin-top: var(--sp-3); }
.fx-chip { font-family: var(--ff-text); }
.pr-card { background: var(--sf-2); border-color: var(--sf-line); }
.pr-card:hover { border-color: var(--acc-line); box-shadow: var(--sf-lift); }
.pr-name  { font-family: var(--ff-display); font-weight: 800; }
.pr-price .v { font-family: var(--ff-display); }
.pr-badge { font-family: var(--ff-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.pr-fx-note { font-family: var(--ff-data); font-size: 11px; letter-spacing: .03em; }
.wp-browser { border-color: var(--sf-line); box-shadow: var(--sf-lift); }
.wp-browser-bar { background: var(--sf-1); border-bottom: 1px solid var(--sf-line); }
.sv-card, .svl-all { background: var(--sf-2); border-color: var(--sf-line); }
.ab-section-head h2, .ab-section-head .ab-h2 { font-family: var(--ff-display); }
.ab-au-3 { background: radial-gradient(circle, color-mix(in srgb, var(--acc) 60%, var(--ab-mesh-3)), transparent 60%); }
.ab-au-4 { background: radial-gradient(circle, color-mix(in srgb, var(--acc) 45%, transparent), transparent 62%); }
.nr{max-width:var(--ab-wrap,1180px);margin:56px auto 8px;padding:0 20px}
.nr-h{
font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--ab-text-s);margin:0 0 14px 
}
:root:lang(ar) .nr-h{letter-spacing:0;text-transform:none;font-size:14px}
.nr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.nr-a{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:15px 17px;border:1px solid var(--sf-line,rgba(128,128,128,.22));border-radius:13px;
background:var(--sf-2,transparent);color:var(--ab-text);text-decoration:none;
font-size:14.5px;line-height:1.65;transition:border-color .18s,transform .18s,background .18s
}
.nr-a i{font-size:11px;opacity:.45;flex:0 0 auto;transition:opacity .18s,transform .18s}
.nr-a:hover{
border-color:color-mix(in srgb,var(--acc,#7c5cff) 45%,var(--sf-line,rgba(128,128,128,.22)));
background:var(--acc-wash,transparent);transform:translateY(-2px)
}
.nr-a:hover i{opacity:.9;transform:translateX(-3px)}
:root:lang(en) .nr-a:hover i{transform:translateX(3px)}
.nr-a:focus-visible{outline:2px solid var(--acc,#7c5cff);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.nr-a,.nr-a i{transition:none}.nr-a:hover{transform:none}}
.gd-proof{
display:flex;align-items:center;gap:15px;margin:26px 0;padding:16px 18px;
border:1px solid var(--sf-line,rgba(128,128,128,.22));border-radius:14px;
background:var(--sf-2,transparent);color:var(--ab-text);text-decoration:none;
transition:border-color .18s,transform .18s
}
.gd-proof:hover{border-color:color-mix(in srgb,#1877F2 42%,var(--sf-line,rgba(128,128,128,.22)));transform:translateY(-2px)}
.gd-proof > i:first-child{font-size:26px;color:#1877F2;flex:none}
.gd-proof div{flex:1 1 auto;min-width:0}
.gd-proof b{display:block;font-size:15px;line-height:1.6;margin-bottom:4px}
.gd-proof span{display:block;font-size:13px;color:var(--ab-subtext);line-height:1.75}
.gd-proof-go{font-size:12px;opacity:.4;flex:none}
.gd-proof:focus-visible{outline:2px solid var(--acc,#7c5cff);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gd-proof{transition:none}.gd-proof:hover{transform:none}}
/* ==== mobile-perf.css ==== */
@media (max-width: 980px) {
.site-nav, .site-nav-inner, .site-tabbar, .site-mobile-menu, .site-mobile-link,
.site-mobile-detail, .site-footer, .site-nav-drop-panel,
.ab-feat-card, .ab-price-card, .ab-test, .ab-step, .ab-uc, .ab-int-card,
.ab-hero-mock, .ab-faq details, .ab-stats-row, .ab-cta-band,
.mo-toast, .mo-preload, .ab-stars,
.abp-cursor, .abp-card, .ab-float-badge,
.ab-fbadge, .ab-footer, .ab-drawer, .mo-live-pill, .mo-sticky-cta,
.ab-bg, .ab-aurora, .ab-grid, body.ab-body {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.site-nav        { background: transparent !important; }
.site-nav-inner  { background: var(--ab-card-solid) !important; }
.site-tabbar     { background: var(--ab-card-solid) !important; }
.site-footer     { background: var(--ab-bg-1) !important; }
.site-mobile-menu{ background: var(--ab-bg-0) !important; }
.ab-feat-card,
.ab-price-card,
.ab-test,
.ab-step,
.ab-uc,
.ab-int-card,
.ab-faq details,
.ab-stats-row,
.ab-hero-mock,
.site-mobile-link,
.site-mobile-tile,
.site-mobile-detail { background: var(--ab-card-solid) !important; }
.ab-aurora .ab-au {
animation: none !important;
opacity: .22 !important;
filter: blur(40px) !important;   
}
.ab-au-3, .ab-au-4 { display: none !important; }
.ab-stars { display: block !important; }
.abp-card::before,
.abp-card::after,
.ab-cta-band::after,
.ab-cta-band::before,
.ab-price-card.featured::after,
.ab-float-badge::before {
animation: none !important;
display: none !important;
}
.ab-btn::before,
.ab-btn-primary::after,
.site-nav-cta.primary::before,
.site-mobile-cta a.primary::before,
.site-tab.cta::before,
.ab-feat-card::before,
.ab-feat-card::after {
animation: none !important;
display: none !important;
}
.ab-btn-primary {
box-shadow: 0 8px 22px rgba(124,58,237,.35) !important;
}
.abp-chart-dot {
animation: abpChartDot .5s ease-out .8s forwards !important;
filter: none !important;        
}
.abp-chart-line {
filter: none !important;
}
.ab-hero-visual::after,           
.ab-hero-visual::before,          
.ab-hero::before {
display: none !important;
}
.ab-hero-mock { transform: none !important; perspective: none !important; }
.site-footer::after,
.ab-footer::after { display: none !important; }
.ab-feat-card:hover,
.ab-price-card:hover,
.ab-test:hover,
.ab-uc:hover,
.ab-int-card:hover,
.ab-step:hover {
transform: none !important;
}
.ab-section {
content-visibility: auto;
contain-intrinsic-size: 1px 720px;
}
.ab-footer, .site-footer {
content-visibility: auto;
contain-intrinsic-size: 1px 480px;
}
.ab-stat-cell b.is-pulse { filter: none !important; }
.ab-stat-cell b { filter: none !important; }
.ab-grad { filter: none !important; }
.wa-float-pulse { animation: none !important; opacity: 0 !important; }
.ab-hero-mock { box-shadow: 0 18px 40px rgba(0,0,0,.4) !important; }
.ab-cta-band { box-shadow: 0 20px 50px rgba(124,58,237,.3) !important; }
.abp-magnetic, .abp-tilt, .ab-hero-mock {
will-change: auto !important;
}
.site-tabbar {
background: var(--ab-card-solid) !important;
border: 1px solid var(--ab-border) !important;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:    0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration:   0.001ms !important;
}
.ab-aurora, .ab-stars, .ab-float-badge,
.abp-cursor, .abp-card::before, .abp-card::after,
.ab-cta-band::after, .wa-float-pulse {
animation: none !important;
display: none !important;
}
}
@media (max-width: 480px) {
.ab-aurora  { opacity: .15 !important; }
.ab-meteors { display: none !important; }
}
@media (hover: none), (pointer: coarse) {
.ab-feat-card:hover,
.ab-pricing-card:hover,
.ab-int-tile:hover,
.ab-sol-card:hover,
.abp-card:hover,
.abp-feature-card:hover {
transform: none !important;
filter: none !important;
}
.ab-aurora .ab-au { filter: blur(28px) !important; opacity: .18 !important; }
}