/* ASBAB UI — shared design system for public pages (v0.9).
   Loaded after style.css and brand.css; aligns tools.asbab.online with asbab.online. */
:root{
 --ax-navy:#19103d;--ax-navy-2:#241a57;--ax-blue:#18abe3;--ax-blue-d:#0878b0;--ax-green:#80cc28;--ax-green-d:#4f8a12;--ax-violet:#7a4dd8;
 --ax-ink:#160e38;--ax-text:#2f3754;--ax-muted:#525b77;--ax-line:#dbe2ec;--ax-soft:#f4f7fb;--ax-card:#fff;
 --ax-r:20px;--ax-r-sm:12px;--ax-shadow:0 1px 2px #19103d0a,0 12px 32px -12px #19103d1f;--ax-shadow-lg:0 30px 70px -30px #19103d55;
 --ax-max:1200px;--ax-gut:clamp(16px,4vw,32px);
 --ink:var(--ax-ink);--line:var(--ax-line);--paper:var(--ax-soft);--blue:var(--ax-blue);--green:var(--ax-green)
}
body.ax{background:var(--ax-soft);color:var(--ax-text);font-family:Tajawal,Arial,sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.ax h1,body.ax h2,body.ax h3{color:var(--ax-ink);line-height:1.35;letter-spacing:0}
body.ax a:hover{text-decoration:none}
body.ax>main{max-width:none;margin:0;padding:0}
.ax-wrap{max-width:var(--ax-max);margin-inline:auto;padding-inline:var(--ax-gut)}

/* Header */
body.ax>header{position:sticky;top:0;z-index:50;max-width:none;margin:0;padding:10px max(var(--ax-gut),calc((100% - var(--ax-max))/2 + var(--ax-gut)));background:#ffffffe6;backdrop-filter:saturate(1.4) blur(12px);border:0;border-bottom:1px solid var(--ax-line);border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
body.ax>header .brand.tools-brand img{width:auto;height:52px}
body.ax .header-links{gap:6px;font-size:15px;font-weight:700}
body.ax .header-links a{padding:8px 14px;border-radius:10px;color:var(--ax-ink)}
body.ax .header-links a:hover{background:var(--ax-soft);color:var(--ax-blue-d)}
body.ax .header-links a.ax-nav-cta{background:var(--ax-navy);color:#fff;margin-inline-start:6px}
body.ax .header-links a.ax-nav-cta:hover{background:var(--ax-blue-d);color:#fff}

/* Buttons */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:14px;font:700 16px/1.3 Tajawal,Arial,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .15s,background-color .15s,box-shadow .15s;text-decoration:none!important;color:#fff;background:var(--ax-blue-d)}
.ax-btn:hover{transform:translateY(-1px);background:var(--ax-navy);color:#fff;box-shadow:0 10px 24px -12px #0878b0aa}
.ax-btn.is-green{background:var(--ax-green);color:var(--ax-navy)}.ax-btn.is-green:hover{background:#94dc3c;color:var(--ax-navy)}
.ax-btn.is-ghost{background:transparent;border-color:#ffffff59;color:#fff}.ax-btn.is-ghost:hover{background:#ffffff14;box-shadow:none}
.ax-btn.is-line{background:#fff;border-color:var(--ax-line);color:var(--ax-ink)}.ax-btn.is-line:hover{border-color:var(--ax-blue);color:var(--ax-blue-d);background:#fff}
.ax-btn:focus-visible,.ax a:focus-visible{outline:3px solid var(--ax-blue);outline-offset:3px}

/* Section scaffolding */
.ax-sec{padding-block:clamp(56px,8vw,96px)}
.ax-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ax-blue-d);background:#e8f6fc;border-radius:999px;padding:5px 14px}
.ax-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ax-head{max-width:720px;margin-bottom:clamp(28px,4vw,44px)}
.ax-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 10px}
.ax-head p{font-size:18px;color:var(--ax-muted);margin:0;max-width:none}
.ax-head.is-center{margin-inline:auto;text-align:center}

/* Hero — asbab.online style, tools edition */
.ax-hero{--hb:#0b1118;position:relative;background:radial-gradient(900px 520px at 22% 40%,#18abe31f,transparent 65%),radial-gradient(700px 480px at 10% 100%,#80cc2824,transparent 60%),var(--hb);color:#c7cfda;overflow:hidden;isolation:isolate}
.ax-hero-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent)}
.ax-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.ax-live{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#bfe8f8;background:#18abe314;border:1px solid #18abe333;border-radius:999px;padding:5px 14px}
.ax-live i{width:8px;height:8px;border-radius:50%;background:var(--ax-green);box-shadow:0 0 0 0 #80cc2899;animation:axLive 1.8s infinite}
body.ax .ax-hero h1{color:#fff;font-size:clamp(36px,4.6vw,62px);line-height:1.3;margin:20px 0 18px;font-weight:700}
.ax-hero h1 span{display:block}
.ax-hero h1 .l2{background:linear-gradient(90deg,#4fd1a5,var(--ax-green));-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-hero h1 .l3{background:linear-gradient(90deg,#18abe3,#3b82c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-hero-lead{font-size:clamp(16.5px,1.5vw,19px);color:#b3bccb;max-width:560px;margin:0 0 28px}
.ax-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ax-hero .ax-btn{background:linear-gradient(135deg,#1e8fd0,#2f6fb8);border-radius:999px;padding-inline:28px}
.ax-hero .ax-btn:hover{background:linear-gradient(135deg,#18abe3,#1e8fd0)}
.ax-hero .ax-btn.is-ghost{background:transparent;border:1px solid #ffffff55;color:#fff}.ax-hero .ax-btn.is-ghost:hover{background:#ffffff12}
.ax-hero-trust{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:24px 0 0;font-size:14px;color:#98a3b5}
.ax-hero-trust li::before{content:"✓ ";color:var(--ax-green);font-weight:700}

/* Hero scene */
.axh{position:relative;width:100%;max-width:640px;aspect-ratio:1/.86;margin-inline:auto;font-size:clamp(9px,1vw,13.5px);perspective:1400px;direction:rtl}
.axh *{box-sizing:border-box}
.axh-bg{position:absolute;inset:-6%;z-index:0;pointer-events:none}
.axh-bg i{position:absolute;border-radius:50%;filter:blur(52px)}
.axh-bg .o1{width:50%;height:50%;right:8%;top:6%;background:#18abe3;opacity:.32;animation:axBlob 14s ease-in-out infinite}
.axh-bg .o2{width:40%;height:40%;left:4%;bottom:6%;background:#80cc28;opacity:.26;animation:axBlob 16s ease-in-out infinite reverse}
.axh-bg .o3{width:30%;height:30%;left:30%;top:20%;background:#7a4dd8;opacity:.22;animation:axBlob 18s ease-in-out infinite}
.axh-orbit{position:absolute;left:50%;top:50%;width:94%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px dashed #18abe338;border-radius:50%;animation:axSpin 70s linear infinite;z-index:0}
.axh-orbit b{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ax-green);box-shadow:0 0 0 5px #80cc2833}
.axh-orbit b:nth-child(1){top:-5px;left:50%}.axh-orbit b:nth-child(2){bottom:12%;left:4%;background:var(--ax-blue);box-shadow:0 0 0 5px #18abe333}.axh-orbit b:nth-child(3){bottom:8%;right:10%;width:7px;height:7px;background:var(--ax-violet)}
.axh-scene{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.axh-win{position:absolute;right:2%;top:13%;width:80%;height:64%;border-radius:20px;background:#121a24e6;border:1px solid #ffffff1c;box-shadow:0 40px 90px -30px #000c,inset 0 1px 0 #ffffff12;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(14px)}
.axh-bar{display:flex;align-items:center;gap:6px;padding:.75em 1em;direction:ltr;border-bottom:1px solid #ffffff12}
.axh-bar .d{width:.7em;height:.7em;border-radius:50%;background:#ff5f57}.axh-bar .d:nth-child(2){background:#febc2e}.axh-bar .d:nth-child(3){background:#28c840}
.axh-url{display:flex;align-items:center;gap:.45em;margin-inline:auto;padding:.25em 1em;border-radius:999px;background:#ffffff0d;color:#9aa6b8;font:600 .8em/1.4 system-ui,sans-serif}
.axh-url i{width:.7em;height:.8em;border:2px solid #28c840;border-radius:2px 2px 3px 3px;border-top-width:3px}
.axh-app{flex:1;display:flex;min-height:0}
.axh-side{width:15%;border-inline-start:1px solid #ffffff12;padding:1em .7em;display:flex;flex-direction:column;gap:.7em;align-items:center;background:#19103d66;order:2}
.axh-side .lg{width:70%;height:1em;border-radius:6px;background:linear-gradient(90deg,#18abe3,#80cc28);margin-bottom:.4em}
.axh-side i{width:60%;height:.6em;border-radius:4px;background:#ffffff1f}.axh-side i.on{background:#18abe3}
.axh-main{flex:1;padding:4% 5%;display:flex;flex-direction:column;gap:5%;min-width:0}
.axh-tabs{display:flex;gap:.5em}
.axh-tabs span{font:700 .78em/1 Tajawal,sans-serif;color:#9aa6b8;background:#ffffff0d;border-radius:8px;padding:.55em .9em}
.axh-tabs span.on{background:#18abe3;color:#fff}
.axh-edit{flex:1;display:grid;grid-template-columns:1fr 1.05fr;gap:6%;min-height:0}
.axh-prod{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff 0,#dff2fb 55%,#bfe3f3 100%);display:grid;place-items:center}
.axh-prod svg{width:40%;filter:drop-shadow(0 14px 14px #19103d40)}
.axh-scan{position:absolute;inset-inline:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,#80cc2855 80%,#80cc28);mix-blend-mode:multiply;animation:axScan 3.4s 1s ease-in-out infinite}
.axh-fields{display:flex;flex-direction:column;gap:.55em;justify-content:center;min-width:0}
.axh-fields em{width:40%;height:1.1em;border-radius:999px;background:#80cc2833}
.axh-fields b{height:.85em;border-radius:6px;background:#e6ebf2}
.axh-fields .a{width:95%}.axh-fields .b{width:70%;background:linear-gradient(90deg,#0878b0,#18abe3)}.axh-fields .c{width:88%;height:.5em;opacity:.25}.axh-fields .c.s{width:62%}
.axh-thumbs{display:flex;gap:.4em;margin-top:.2em}
.axh-thumbs i{flex:1;aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#dff2fb,#9fd8f0)}
.axh-thumbs i:nth-child(2){background:linear-gradient(135deg,#eef8e2,#c6ea9b)}.axh-thumbs i:nth-child(3){background:linear-gradient(135deg,#efe8fb,#cdbbf2)}
.axh-go{align-self:flex-start;margin-top:.3em;font:700 .78em/1 Tajawal,sans-serif;color:#0b1118;background:var(--ax-green);border-radius:999px;padding:.6em 1.1em}
.axh-phone{position:absolute;left:0;bottom:3%;width:26%;aspect-ratio:9/18.5;border-radius:1.9em;background:#05080d;padding:.45em;border:1px solid #ffffff26;box-shadow:0 40px 70px -24px #000d;transform:translateZ(60px);z-index:2}
.axh-phone .nt{position:absolute;top:.8em;left:50%;transform:translateX(-50%);width:30%;height:.6em;border-radius:6px;background:#05080d;z-index:2}
.axh-phone .sc{height:100%;border-radius:1.5em;background:#fff;padding:2em .6em .7em;display:flex;flex-direction:column;gap:.45em;overflow:hidden}
.ig-hd{display:flex;align-items:center;gap:.4em}.ig-hd i{width:1.4em;height:1.4em;border-radius:50%;background:conic-gradient(#f58529,#dd2a7b,#8134af,#f58529);padding:2px}.ig-hd b{width:45%;height:.5em;border-radius:4px;background:#19103d;opacity:.7}
.ig-im{position:relative;aspect-ratio:1;border-radius:.6em;background:linear-gradient(135deg,#18abe3,#80cc28);display:grid;place-items:center}
.ig-im svg{width:40%;filter:drop-shadow(0 8px 8px #0004)}
.ig-im .tag{position:absolute;top:.4em;right:.4em;font:800 .7em/1 Tajawal,sans-serif;background:#ff4d6d;color:#fff;border-radius:999px;padding:.35em .55em}
.ig-ac{display:flex;gap:.4em}.ig-ac i{width:.9em;height:.9em;border-radius:50%;border:1.5px solid #19103d99}
.axh-phone .sc>b{height:.5em;border-radius:4px;background:#19103d;opacity:.7;width:85%}.axh-phone .sc>b.s{opacity:.2;width:60%}
.ig-bt{margin-top:auto;text-align:center;font:800 .72em/1 Tajawal,sans-serif;color:#fff;background:#0878b0;border-radius:999px;padding:.7em}
.axh-card{position:absolute;z-index:3;display:flex;align-items:center;gap:.7em;padding:.75em .9em;border-radius:16px;background:#141c27eb;border:1px solid #ffffff1f;color:#fff;box-shadow:0 20px 40px -18px #000c;backdrop-filter:blur(12px);animation:axFloat 6s ease-in-out infinite}
.axh-card .ic{flex:none;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.8em;background:linear-gradient(135deg,var(--c,#18abe3),color-mix(in srgb,var(--c,#18abe3) 55%,#80cc28))}
.axh-card .ic svg{width:1.25em;height:1.25em}
.axh-card .t{display:grid;line-height:1.35}
.axh-card strong{font-size:1em;font-weight:800;white-space:nowrap}
.axh-card small{font-size:.82em;color:#9aa6b8;display:flex;align-items:center;gap:.35em;white-space:nowrap}
.axh-card .ok{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#80cc2833;color:var(--ax-green);font-weight:900;font-size:.85em}
.axh-done{top:1%;right:10%;--c:#18abe3;transform:translateZ(90px)}
.axh-copy{top:2%;left:1%;width:38%;flex-direction:column;align-items:stretch;gap:.55em;animation-delay:-2.5s;transform:translateZ(70px)}
.axh-copy .hd{display:flex;justify-content:space-between;align-items:center}
.axh-copy .ar{font-size:.78em;font-weight:800;color:#0b1118;background:var(--ax-green);border-radius:999px;padding:.1em .6em}
.axh-copy .ln{display:grid;gap:.4em}.axh-copy .ln i{height:.5em;border-radius:4px;background:#ffffff40}.axh-copy .ln i.s{width:60%}
.axh-copy .tg{display:flex;flex-wrap:wrap;gap:.35em}.axh-copy .tg em{font-style:normal;font-size:.75em;color:#bfe8f8;background:#18abe326;border-radius:999px;padding:.15em .6em}
.axh-wa{bottom:30%;left:-5%;--c:#25d366;animation-delay:-4s;transform:translateZ(100px)}
.axh-wa .live{width:.55em;height:.55em;border-radius:50%;background:#28c840;animation:axLive 1.8s infinite}
.axh-woo{bottom:-1%;right:8%;--c:#7a4dd8;animation-delay:-1.2s;transform:translateZ(80px)}
.axh-ai{position:absolute;z-index:4;top:44%;right:-4%;display:flex;align-items:center;gap:.45em;padding:.55em 1em;border-radius:999px;font-weight:800;font-size:.9em;color:#fff;background:linear-gradient(135deg,#7a4dd8,#18abe3);box-shadow:0 14px 30px -12px #7a4dd8b3;animation:axFloat 6s -3s ease-in-out infinite;transform:translateZ(110px)}
.axh-ai span{display:inline-block;animation:axSpin 6s linear infinite}
@keyframes axFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes axBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.08)}}
@keyframes axSpin{to{rotate:360deg}}
@keyframes axLive{0%{box-shadow:0 0 0 0 #80cc2899}70%{box-shadow:0 0 0 8px #80cc2800}100%{box-shadow:0 0 0 0 #80cc2800}}
@keyframes axScan{0%{top:-30%}60%,100%{top:110%}}
.axh-orbit{rotate:0deg;transform:translate(-50%,-50%)}

/* Steps */
.ax-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s;list-style:none;padding:0;margin:0}
.ax-steps li{position:relative;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-r);padding:28px 24px 24px;box-shadow:var(--ax-shadow)}
.ax-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ax-navy);color:#fff;font-weight:700;font-size:18px;margin-bottom:16px}
.ax-steps li:nth-child(2)::before{background:var(--ax-blue-d)}.ax-steps li:nth-child(3)::before{background:var(--ax-green);color:var(--ax-navy)}
.ax-steps h3{font-size:20px;margin:0 0 6px}.ax-steps p{margin:0;color:var(--ax-muted);font-size:15.5px}

/* Tools */
.ax-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ax-tool{position:relative;display:flex;flex-direction:column;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-r);padding:24px;box-shadow:var(--ax-shadow);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.ax-tool:hover{transform:translateY(-3px);border-color:#bfe3f3;box-shadow:0 22px 44px -24px #19103d40}
.ax-tool-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#e8f6fc;color:var(--ax-blue-d);margin-bottom:16px}
.ax-tool-ic svg{width:27px;height:27px}
.ax-tool.is-green .ax-tool-ic{background:#eef8e2;color:var(--ax-green-d)}.ax-tool.is-violet .ax-tool-ic{background:#f0eafc;color:var(--ax-violet)}
.ax-tool h3{font-size:21px;margin:0 0 6px}.ax-tool p{color:var(--ax-muted);font-size:15.5px;margin:0 0 18px}
.ax-tool .ax-chip{position:absolute;top:22px;inset-inline-end:22px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 11px;background:#eef8e2;color:var(--ax-green-d)}
.ax-tool .ax-chip.is-paid{background:#e8f6fc;color:var(--ax-blue-d)}
.ax-tool .ax-link{margin-top:auto;font-weight:700;color:var(--ax-blue-d);display:inline-flex;align-items:center;gap:6px}
.ax-tool .ax-link::after{content:"←";transition:transform .2s}.ax-tool:hover .ax-link::after{transform:translateX(-4px)}
.ax-tool .ax-link::before{content:"";position:absolute;inset:0;border-radius:inherit}
.ax-tool.is-feature{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;align-items:center;background:linear-gradient(135deg,#fff 40%,#eef8fd);padding:30px}
.ax-tool.is-feature h3{font-size:26px}
.ax-tool.is-feature ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;font-size:15px;color:var(--ax-text)}
.ax-tool.is-feature ul li{display:flex;gap:10px;align-items:flex-start}
.ax-tool.is-feature ul li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border-radius:50%;background:#e8f6fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230878b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.ax-tool.is-feature .ax-link{margin-top:0}
.ax-mini{background:#fff;border:1px solid var(--ax-line);border-radius:16px;padding:14px;box-shadow:var(--ax-shadow)}
.ax-mini-row{display:flex;gap:12px;align-items:center}
.ax-mini-img{width:72px;height:72px;flex:none;border-radius:12px;background:radial-gradient(circle at 50% 40%,#fff,#d6eef8);display:grid;place-items:center}
.ax-mini-img svg{width:34px}
.ax-mini b{display:block;color:var(--ax-ink);font-size:14.5px;line-height:1.5}
.ax-mini small{color:var(--ax-muted);font-size:12.5px;line-height:1.6;display:block}
.ax-mini-bar{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.ax-mini-bar span{font-size:11.5px;border-radius:8px;padding:3px 9px;background:var(--ax-soft);color:var(--ax-text)}
.ax-mini-bar span.is-on{background:var(--ax-navy);color:#fff}

/* Soon strip */
.ax-soon{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;margin:0;padding:16px 20px;border:1px dashed #b9c6d8;border-radius:16px;background:#fff;font-size:15px}
.ax-soon b{color:var(--ax-ink);font-size:21px}.ax-soon p{margin:0;color:var(--ax-muted);max-width:none}.ax-soon span.ax-pill{font-size:12px;font-weight:700;color:#fff;background:var(--ax-violet);border-radius:999px;padding:3px 11px}

/* Pricing */
.ax-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.ax-plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ax-line);border-radius:var(--ax-r);padding:28px;box-shadow:var(--ax-shadow);min-width:0}
.ax-plan h3{font-size:20px;margin:0}
.ax-plan .ax-price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px;color:var(--ax-ink)}
.ax-plan .ax-price b{font-size:44px;line-height:1;font-weight:700}
.ax-plan .ax-price span{color:var(--ax-muted);font-size:15px}
.ax-plan .ax-plan-sub{color:var(--ax-muted);font-size:14.5px;margin:0 0 18px}
.ax-plan ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px;font-size:15px}
.ax-plan ul li{display:flex;gap:10px}
.ax-plan ul li::before{content:"✓";color:var(--ax-green-d);font-weight:700}
.ax-plan .ax-btn{margin-top:auto;width:100%}
.ax-plan.is-free{background:transparent;box-shadow:none;border-style:dashed}
.ax-plan.is-pop{background:var(--ax-navy);border-color:var(--ax-navy);color:#d9d6ee;position:relative;box-shadow:var(--ax-shadow-lg)}
body.ax .ax-plan.is-pop h3,body.ax .ax-plan.is-pop .ax-price{color:#fff}.ax-plan.is-pop .ax-price span,.ax-plan.is-pop .ax-plan-sub{color:#bdb8dc}
.ax-plan.is-pop ul li::before{color:var(--ax-green)}
.ax-plan .ax-flag{position:absolute;top:-13px;inset-inline-start:24px;background:var(--ax-green);color:var(--ax-navy);font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 12px}
.ax-note{text-align:center;color:var(--ax-muted);font-size:14.5px;margin:22px auto 0;max-width:760px}

/* Agency band */
.ax-agency{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:linear-gradient(120deg,var(--ax-navy),#2c1f6b);color:#d9d6ee;border-radius:28px;padding:clamp(28px,4vw,48px);position:relative;overflow:hidden}
.ax-agency::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;inset-inline-end:-140px;top:-200px;background:radial-gradient(circle,#18abe355,transparent 65%)}
body.ax .ax-agency h2{color:#fff;font-size:clamp(24px,3vw,34px);margin:12px 0 8px}
.ax-agency p{margin:0;max-width:620px}
.ax-agency .ax-eyebrow{background:#ffffff14;color:#c7f08f}
.ax-agency-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ax-agency-links a{font-size:14px;color:#fff;border:1px solid #ffffff33;border-radius:999px;padding:5px 14px}
.ax-agency-links a:hover{background:#ffffff14;color:#fff}
.ax-agency .ax-btn{position:relative}

/* FAQ */
.ax-faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}
.ax-faq details{background:#fff;border:1px solid var(--ax-line);border-radius:16px;padding:4px 22px}
.ax-faq summary{cursor:pointer;list-style:none;font-weight:700;color:var(--ax-ink);font-size:17px;padding:16px 0;display:flex;justify-content:space-between;gap:16px}
.ax-faq summary::-webkit-details-marker{display:none}
.ax-faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--ax-blue-d);transition:transform .2s}
.ax-faq details[open] summary::after{transform:rotate(45deg)}
.ax-faq details p{margin:0 0 18px;color:var(--ax-muted);max-width:none}

/* Footer */
.ax-foot{background:var(--ax-navy);color:#bdb8dc;padding-block:48px 28px;margin-top:clamp(56px,8vw,96px);font-size:14.5px}
.ax-foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.ax-foot img{height:64px;width:auto;display:block;margin-bottom:12px}
.ax-foot h3{color:#fff;font-size:15px;margin:0 0 10px}
.ax-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ax-foot a{color:#d9d6ee}.ax-foot a:hover{color:var(--ax-green)}
.ax-foot-bottom{border-top:1px solid #ffffff1f;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
body.ax>footer.ax-foot{max-width:none;margin-inline:0;padding-inline:0}

/* Responsive */
@media(max-width:1000px){
 .ax-hero-in{grid-template-columns:1fr}.axh{max-width:560px}
 .ax-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.ax-tool.is-feature{grid-column:1/-1}.ax-soon{grid-column:1/-1}
 .ax-plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
 .ax-agency{grid-template-columns:1fr}
}
@media(max-width:760px){
 body.ax>header{padding-block:8px}body.ax>header .brand.tools-brand img{height:44px}
 body.ax .has-menu .header-links a{padding:10px 12px}body.ax .has-menu .header-links a.ax-nav-cta{margin:4px 0 0;text-align:center}
 body.ax .ax-hero h1{font-size:34px}.ax-hero-actions .ax-btn{flex:1 1 200px}
 .axh{font-size:8.6px;width:100%}.axh-copy{width:44%}.axh-wa{left:3%;bottom:36%}.axh-ai{right:-2%}
 .ax-steps,.ax-tools{grid-template-columns:1fr}.ax-tool.is-feature{grid-template-columns:1fr;padding:24px}
 .ax-head p{font-size:16px}.ax-foot-in{grid-template-columns:1fr 1fr}.ax-foot-in>div:first-child{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){.axh *,.ax-live i{animation:none!important}.axh-scene{transition:none}.ax-btn,.ax-tool,.ax-tool .ax-link::after{transition:none}}

[data-tight]{padding-top:0!important}
.ax-inline-link{color:var(--ax-blue-d);font-weight:700}
.ax-foot-about{margin:0;max-width:340px}
.ax-hero+.ax-sec{padding-top:clamp(56px,8vw,96px)}

/* ===== Dark mode =====
   Follows the device by default; a manual choice (theme.js) wins. */
:root[data-theme=dark]{color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark}}
:root[data-theme=dark] body.ax{--ax-ink:#eef2f8;--ax-text:#c3cad6;--ax-muted:#8f9ab0;--ax-line:#243041;--ax-soft:#0b1118;--ax-card:#121a24;--ax-tint:#18abe31f;--ax-shadow:0 1px 2px #0006,0 14px 34px -16px #000c}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body.ax{--ax-ink:#eef2f8;--ax-text:#c3cad6;--ax-muted:#8f9ab0;--ax-line:#243041;--ax-soft:#0b1118;--ax-card:#121a24;--ax-tint:#18abe31f;--ax-shadow:0 1px 2px #0006,0 14px 34px -16px #000c}}

:root[data-theme=dark] body.ax>header{background:#0b1118e6;border-bottom-color:var(--ax-line)}
:root[data-theme=dark] body.ax .header-links a:hover{background:#ffffff0f;color:#7fd3f3}
:root[data-theme=dark] body.ax .header-links a.ax-nav-cta{background:#18abe3;color:#06121c}
:root[data-theme=dark] body.ax .header-links a.ax-nav-cta:hover{background:#56c4ee;color:#06121c}
:root[data-theme=dark] body.ax .menu-toggle{background:#121a24;border-color:var(--ax-line);color:var(--ax-ink)}
:root[data-theme=dark] body.ax .has-menu .header-links{border-top-color:var(--ax-line)}
:root[data-theme=dark] body.ax .has-menu .header-links a:hover{background:#ffffff0f}
:root[data-theme=dark] body.ax .ax-eyebrow{background:var(--ax-tint);color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-btn.is-line{background:var(--ax-card);border-color:var(--ax-line);color:var(--ax-ink)}
:root[data-theme=dark] body.ax .ax-btn.is-line:hover{border-color:var(--ax-blue);color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-tool.is-feature{background:linear-gradient(135deg,#121a24 40%,#10273a)}
:root[data-theme=dark] body.ax .ax-tool:hover{border-color:#2d5f7d}
:root[data-theme=dark] body.ax .ax-tool-ic,:root[data-theme=dark] body.ax .ax-tool .ax-chip.is-paid,:root[data-theme=dark] body.ax .ax-copy .ax-tags span{background:#18abe321;color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-tool.is-green .ax-tool-ic,:root[data-theme=dark] body.ax .ax-tool .ax-chip{background:#80cc281f;color:#a6e05e}
:root[data-theme=dark] body.ax .ax-tool.is-violet .ax-tool-ic{background:#7a4dd82b;color:#b79cf2}
:root[data-theme=dark] body.ax .ax-tool .ax-link,:root[data-theme=dark] body.ax .ax-inline-link{color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-mini,:root[data-theme=dark] body.ax .ax-soon,:root[data-theme=dark] body.ax .ax-plan,:root[data-theme=dark] body.ax .ax-faq details{background:var(--ax-card)}
:root[data-theme=dark] body.ax .ax-mini-bar span{background:#ffffff0d}
:root[data-theme=dark] body.ax .ax-mini-bar span.is-on{background:#18abe3;color:#06121c}
:root[data-theme=dark] body.ax .ax-soon{border-color:#34445a}
:root[data-theme=dark] body.ax .ax-plan.is-free{background:transparent}
:root[data-theme=dark] body.ax .ax-plan.is-pop{background:linear-gradient(160deg,#1b2a52,#19103d);border-color:#2f3f6b}
:root[data-theme=dark] body.ax .ax-plan ul li::before{color:#a6e05e}
:root[data-theme=dark] body.ax .ax-faq summary::after{color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-steps li::before{background:#24315f}
:root[data-theme=dark] body.ax .ax-foot{background:#070b10;border-top:1px solid var(--ax-line)}
:root[data-theme=dark] body.ax .ax-agency{background:linear-gradient(120deg,#141d3d,#24185a)}
:root[data-theme=dark] body.ax .ax-auth-side{border:1px solid var(--ax-line)}
:root[data-theme=dark] body.ax .ax-auth-card{background:var(--ax-card);border-color:var(--ax-line)}
:root[data-theme=dark] body.ax .ax-auth-card #notice{background:#ffffff0a}
:root[data-theme=dark] body.ax input,:root[data-theme=dark] body.ax select,:root[data-theme=dark] body.ax textarea{background:#0e151e;border-color:#2b384b;color:var(--ax-ink)}
:root[data-theme=dark] body.ax .ax-auth-card .actions button[value=register]{background:transparent;border-color:#2b384b;color:var(--ax-ink)}
:root[data-theme=dark] body.ax .ax-auth-card .actions button[value=register]:hover{background:#80cc2814;border-color:var(--ax-green)}
:root[data-theme=dark] body.ax .ax-auth-card .actions button.text{color:#7fd3f3}
:root[data-theme=dark] body.ax .ax-auth-card .actions button.text:hover{background:#ffffff0a;color:#fff}
:root[data-theme=dark] body.ax .ax-auth-card .google-login{background:#131314;border-color:#8e918f;color:#e3e3e3}
:root[data-theme=dark] body.ax .ax-auth-card .google-login:hover{background:#1f1f20;border-color:#18abe3;color:#fff}
:root[data-theme=dark] body.ax .ax-auth-card .password-toggle{color:var(--ax-ink)}
:root[data-theme=dark] body.ax .ax-auth-card .password-toggle[aria-pressed=true]{background:#18abe326}
:root[data-theme=dark] body.ax .auth-notice.success{background:#80cc281a;border-color:#4f8a12;color:#c7f08f}
:root[data-theme=dark] body.ax .auth-notice.error{background:#ff5d4a1a;border-color:#b74532;color:#ffb4a8}
:root[data-theme=dark] body.ax .auth-notice.pending,:root[data-theme=dark] body.ax .auth-notice{background:#18abe314;border-color:#2d5f7d;color:#bfe8f8}
:root[data-theme=dark] body.ax .muted{color:var(--ax-muted)}
:root[data-theme=dark] body.ax .brand.tools-brand img{content:url(/asbab-tools-logo-white.webp)}
@media(prefers-color-scheme:dark){
:root:not([data-theme=light]) body.ax>header{background:#0b1118e6;border-bottom-color:var(--ax-line)}
:root:not([data-theme=light]) body.ax .header-links a:hover{background:#ffffff0f;color:#7fd3f3}
:root:not([data-theme=light]) body.ax .header-links a.ax-nav-cta{background:#18abe3;color:#06121c}
:root:not([data-theme=light]) body.ax .header-links a.ax-nav-cta:hover{background:#56c4ee;color:#06121c}
:root:not([data-theme=light]) body.ax .menu-toggle{background:#121a24;border-color:var(--ax-line);color:var(--ax-ink)}
:root:not([data-theme=light]) body.ax .has-menu .header-links{border-top-color:var(--ax-line)}
:root:not([data-theme=light]) body.ax .has-menu .header-links a:hover{background:#ffffff0f}
:root:not([data-theme=light]) body.ax .ax-eyebrow{background:var(--ax-tint);color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-btn.is-line{background:var(--ax-card);border-color:var(--ax-line);color:var(--ax-ink)}
:root:not([data-theme=light]) body.ax .ax-btn.is-line:hover{border-color:var(--ax-blue);color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-tool.is-feature{background:linear-gradient(135deg,#121a24 40%,#10273a)}
:root:not([data-theme=light]) body.ax .ax-tool:hover{border-color:#2d5f7d}
:root:not([data-theme=light]) body.ax .ax-tool-ic,:root:not([data-theme=light]) body.ax .ax-tool .ax-chip.is-paid,:root:not([data-theme=light]) body.ax .ax-copy .ax-tags span{background:#18abe321;color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-tool.is-green .ax-tool-ic,:root:not([data-theme=light]) body.ax .ax-tool .ax-chip{background:#80cc281f;color:#a6e05e}
:root:not([data-theme=light]) body.ax .ax-tool.is-violet .ax-tool-ic{background:#7a4dd82b;color:#b79cf2}
:root:not([data-theme=light]) body.ax .ax-tool .ax-link,:root:not([data-theme=light]) body.ax .ax-inline-link{color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-mini,:root:not([data-theme=light]) body.ax .ax-soon,:root:not([data-theme=light]) body.ax .ax-plan,:root:not([data-theme=light]) body.ax .ax-faq details{background:var(--ax-card)}
:root:not([data-theme=light]) body.ax .ax-mini-bar span{background:#ffffff0d}
:root:not([data-theme=light]) body.ax .ax-mini-bar span.is-on{background:#18abe3;color:#06121c}
:root:not([data-theme=light]) body.ax .ax-soon{border-color:#34445a}
:root:not([data-theme=light]) body.ax .ax-plan.is-free{background:transparent}
:root:not([data-theme=light]) body.ax .ax-plan.is-pop{background:linear-gradient(160deg,#1b2a52,#19103d);border-color:#2f3f6b}
:root:not([data-theme=light]) body.ax .ax-plan ul li::before{color:#a6e05e}
:root:not([data-theme=light]) body.ax .ax-faq summary::after{color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-steps li::before{background:#24315f}
:root:not([data-theme=light]) body.ax .ax-foot{background:#070b10;border-top:1px solid var(--ax-line)}
:root:not([data-theme=light]) body.ax .ax-agency{background:linear-gradient(120deg,#141d3d,#24185a)}
:root:not([data-theme=light]) body.ax .ax-auth-side{border:1px solid var(--ax-line)}
:root:not([data-theme=light]) body.ax .ax-auth-card{background:var(--ax-card);border-color:var(--ax-line)}
:root:not([data-theme=light]) body.ax .ax-auth-card #notice{background:#ffffff0a}
:root:not([data-theme=light]) body.ax input,:root:not([data-theme=light]) body.ax select,:root:not([data-theme=light]) body.ax textarea{background:#0e151e;border-color:#2b384b;color:var(--ax-ink)}
:root:not([data-theme=light]) body.ax .ax-auth-card .actions button[value=register]{background:transparent;border-color:#2b384b;color:var(--ax-ink)}
:root:not([data-theme=light]) body.ax .ax-auth-card .actions button[value=register]:hover{background:#80cc2814;border-color:var(--ax-green)}
:root:not([data-theme=light]) body.ax .ax-auth-card .actions button.text{color:#7fd3f3}
:root:not([data-theme=light]) body.ax .ax-auth-card .actions button.text:hover{background:#ffffff0a;color:#fff}
:root:not([data-theme=light]) body.ax .ax-auth-card .google-login{background:#131314;border-color:#8e918f;color:#e3e3e3}
:root:not([data-theme=light]) body.ax .ax-auth-card .google-login:hover{background:#1f1f20;border-color:#18abe3;color:#fff}
:root:not([data-theme=light]) body.ax .ax-auth-card .password-toggle{color:var(--ax-ink)}
:root:not([data-theme=light]) body.ax .ax-auth-card .password-toggle[aria-pressed=true]{background:#18abe326}
:root:not([data-theme=light]) body.ax .auth-notice.success{background:#80cc281a;border-color:#4f8a12;color:#c7f08f}
:root:not([data-theme=light]) body.ax .auth-notice.error{background:#ff5d4a1a;border-color:#b74532;color:#ffb4a8}
:root:not([data-theme=light]) body.ax .auth-notice.pending,:root:not([data-theme=light]) body.ax .auth-notice{background:#18abe314;border-color:#2d5f7d;color:#bfe8f8}
:root:not([data-theme=light]) body.ax .muted{color:var(--ax-muted)}
:root:not([data-theme=light]) body.ax .brand.tools-brand img{content:url(/asbab-tools-logo-white.webp)}
}
/* Theme toggle */
.ax-theme{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;border:1px solid var(--ax-line);background:transparent;color:var(--ax-ink);cursor:pointer;flex:none}
.ax-theme:hover{background:var(--ax-soft);color:var(--ax-blue-d)}
.ax-theme svg{width:20px;height:20px}
.ax-theme .moon{display:none}
:root[data-theme=dark] .ax-theme .sun{display:none}:root[data-theme=dark] .ax-theme .moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ax-theme .sun{display:none}:root:not([data-theme=light]) .ax-theme .moon{display:block}}
body.ax>header .ax-head-end{display:flex;align-items:center;gap:8px}
@media(max-width:760px){body.ax>header .ax-head-end{order:2;margin-inline-start:auto}body.ax>header .menu-toggle{order:3}body.ax>header .header-links{order:4}}

/* ===== Public inner pages (help, website planner, readiness) ===== */
body.ax-page>main.portal{max-width:1100px;margin:0 auto;padding:28px var(--ax-gut) 24px}
.ax-page .breadcrumbs{font-size:14px;color:var(--ax-muted);margin-bottom:16px}
.ax-page .breadcrumbs a{color:var(--ax-blue-d);text-decoration:none;font-weight:700}
.ax-page main .tag{display:inline-flex;align-items:center;gap:8px;background:#e8f6fc;border:0;color:var(--ax-blue-d);font-weight:700;font-size:13.5px;padding:5px 14px;border-radius:999px}
.ax-page main h1{font-size:clamp(28px,3.4vw,42px);margin:12px 0 10px;color:var(--ax-ink)}
.ax-page main>p,.ax-page .free-tool>p{color:var(--ax-muted);font-size:17px}
:where(.ax-page main) .panel{background:var(--ax-card);border:1px solid var(--ax-line);border-radius:20px;box-shadow:var(--ax-shadow);padding:clamp(18px,2.4vw,28px)}
:where(.ax-page main) label{font-weight:700;color:var(--ax-ink);font-size:14.5px}
:where(.ax-page main) input:not([type=checkbox]):not([type=radio]),:where(.ax-page main) select,:where(.ax-page main) textarea{border:1px solid #cfd8e4;border-radius:12px;min-height:46px;padding:10px 14px;font:400 15.5px/1.6 Tajawal,Arial,sans-serif;color:var(--ax-ink);background:var(--ax-card)}
:where(.ax-page main) input:focus,:where(.ax-page main) select:focus,:where(.ax-page main) textarea:focus{outline:0;border-color:var(--ax-blue);box-shadow:0 0 0 4px #18abe326}
:where(.ax-page main) input[type=checkbox],:where(.ax-page main) input[type=radio]{accent-color:var(--ax-blue-d)}
:where(.ax-page main) button,:where(.ax-page main) .download{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:12px;border:1px solid transparent;background:var(--ax-blue-d);color:#fff;font:700 15px/1.3 Tajawal,Arial,sans-serif;text-decoration:none}
:where(.ax-page main) button:hover:not(:disabled),:where(.ax-page main) .download:hover{background:var(--ax-navy);color:#fff;text-decoration:none}
:where(.ax-page main) .secondary{background:var(--ax-card);border-color:var(--ax-line);color:var(--ax-ink)}
:where(.ax-page main) .secondary:hover{background:var(--ax-soft);border-color:var(--ax-blue);color:var(--ax-blue-d)}
.ax-page .help-index a{border-radius:999px;background:var(--ax-card);border-color:var(--ax-line);font-weight:700;padding:8px 16px}
.ax-page .help-index a:hover{border-color:var(--ax-blue);color:var(--ax-blue-d);text-decoration:none}
.ax-page .help-faq details{border-top-color:var(--ax-line)}
.ax-page .notice{background:#e8f6fc;color:var(--ax-text);border-radius:14px}
.ax-page .help-banner{background:var(--ax-card);border:1px solid var(--ax-line);border-radius:20px;padding:24px;margin-top:24px}
body.ax-page>.ax-foot{margin-top:56px}
:root[data-theme=dark] .ax-page main .tag,:root[data-theme=dark] .ax-page .notice{background:#18abe31f;color:#7fd3f3}
:root[data-theme=dark] :where(.ax-page main) input:not([type=checkbox]):not([type=radio]),:root[data-theme=dark] :where(.ax-page main) select,:root[data-theme=dark] :where(.ax-page main) textarea{border-color:#2b384b;background:#0e151e}
:root[data-theme=dark] .ax-page .breadcrumbs a{color:#7fd3f3}
@media(prefers-color-scheme:dark){
:root:not([data-theme=light]) .ax-page main .tag,:root:not([data-theme=light]) .ax-page .notice{background:#18abe31f;color:#7fd3f3}
:root:not([data-theme=light]) :where(.ax-page main) input:not([type=checkbox]):not([type=radio]),:root:not([data-theme=light]) :where(.ax-page main) select,:root:not([data-theme=light]) :where(.ax-page main) textarea{border-color:#2b384b;background:#0e151e}
:root:not([data-theme=light]) .ax-page .breadcrumbs a{color:#7fd3f3}
}