@font-face{font-family:'Cairo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/cairo-var-ar.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/cairo-var-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--bg:#001326;--bg2:#00203f;--panel:#012a52;--line:#0b3d6e;--ink:#eaf4ff;--dim:#9dc0e0;--c1:#41b4e6;--c2:#7fd0f2;--acc:#ffce00;--wa:#25d366;--grad1:#004a97;--grad2:#001d3d;--r:20px;--sh:0 14px 44px rgba(0,0,0,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(1000px 560px at 90% -10%,var(--grad1) 0%,transparent 62%),radial-gradient(820px 480px at 4% 2%,var(--grad2) 0%,transparent 64%),var(--bg);color:var(--ink);font:16px/1.9 "Cairo",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:1120px;margin:auto;padding:0 18px}a{color:inherit;text-decoration:none}
.hdr{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}.hdr .wrap{display:flex;align-items:center;gap:18px;height:74px}.logo{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--line);border-radius:16px;padding:6px 14px 6px 8px}.logo svg{width:54px;height:48px;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}.logo .txt{line-height:1.15}.logo .n1{font-weight:900;font-size:20px;letter-spacing:-.4px;display:block}.logo .n2{font-size:11.5px;color:var(--acc);letter-spacing:.6px;font-weight:700;display:block}.menu{display:flex;gap:26px;margin-inline-start:auto;font-size:15px;color:var(--dim);font-weight:600}.menu a{padding:6px 0;border-bottom:2px solid transparent;transition:.18s}.menu a:hover,.menu a.on{color:var(--ink);border-color:var(--c1)}.hcall{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:800;padding:11px 18px;border-radius:14px;font-size:15px;box-shadow:0 8px 22px color-mix(in srgb,var(--c1) 35%,transparent)}
.hero{padding:64px 0 48px}.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.pill{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--c1);font-weight:700;background:color-mix(in srgb,var(--c1) 10%,transparent);border:1px solid color-mix(in srgb,var(--c1) 30%,transparent);padding:8px 15px;border-radius:999px;margin-bottom:20px}.dot{width:7px;height:7px;border-radius:50%;background:var(--c1);animation:p 2.2s infinite}@keyframes p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}h1{font-size:clamp(29px,4.5vw,47px);line-height:1.3;margin:0 0 16px;font-weight:900;letter-spacing:-.6px}h1 em{font-style:normal;background:linear-gradient(100deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}.sub{color:var(--dim);font-size:17px;max-width:52ch;margin:0 0 26px}.cta{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:15px;font-weight:800;font-size:16px;transition:transform .15s,box-shadow .15s;font-family:inherit;border:0;cursor:pointer}.btn:hover{transform:translateY(-2px)}.b1{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--c1) 34%,transparent)}.b2{background:var(--wa);color:#fff;box-shadow:0 12px 28px rgba(37,211,102,.26)}.trust{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;font-size:14px;color:var(--dim)}.trust b{color:var(--ink);display:block;font-size:21px;font-weight:900}.art{position:relative;aspect-ratio:1/.94;border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--bg2));overflow:hidden;box-shadow:var(--sh)}.art svg{position:absolute;inset:0;width:100%;height:100%}
section{padding:56px 0}.sec-h{text-align:center;margin-bottom:36px}.kicker{color:var(--c1);font-size:13.5px;font-weight:800;letter-spacing:.5px}h2{font-size:clamp(23px,2.8vw,32px);margin:8px 0 10px;font-weight:900;letter-spacing:-.4px}.sec-h p{color:var(--dim);margin:0 auto;max-width:60ch}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s}.card:hover{border-color:color-mix(in srgb,var(--c1) 45%,transparent);transform:translateY(-4px);box-shadow:var(--sh)}.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:linear-gradient(135deg,var(--c1),var(--c2))}.ic svg{width:23px;height:23px;fill:#fff}.card h3{margin:0 0 7px;font-size:18px;font-weight:800}.card p{margin:0;color:var(--dim);font-size:15px}.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:16px}.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}.step::before{counter-increment:s;content:"0" counter(s);font-weight:900;font-size:28px;background:linear-gradient(120deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:8px}.step h3{margin:0 0 6px;font-size:16.5px;font-weight:800}.step p{margin:0;color:var(--dim);font-size:14.5px}
.prose h2{margin-top:40px}.prose p{color:var(--ink);opacity:.88;margin:0 0 14px}.prose ul{color:var(--ink);opacity:.88;padding-inline-start:22px;margin:0 0 16px}.prose li{margin-bottom:7px}.note{border-inline-start:4px solid var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);padding:16px 20px;border-radius:0 14px 14px 0;margin:18px 0;font-size:15px}details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px 20px;margin-bottom:10px}details[open]{border-color:color-mix(in srgb,var(--c1) 40%,transparent)}summary{cursor:pointer;font-weight:800;list-style:none}summary::-webkit-details-marker{display:none}summary::after{content:"+";float:left;color:var(--c1);font-weight:900;font-size:21px;line-height:1}details[open] summary::after{content:"–"}details p{margin:10px 0 0;color:var(--dim);font-size:15px}.band{background:linear-gradient(135deg,var(--grad1),var(--grad2));border:1px solid var(--line);border-radius:26px;padding:44px 30px;text-align:center}.band h2{margin-top:0}.band p{color:var(--dim);max-width:56ch;margin:0 auto 22px}
.ftr{border-top:1px solid var(--line);margin-top:44px;padding:36px 0 100px;color:var(--dim);font-size:14.5px}.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin-bottom:24px}.ftr h4{color:var(--ink);margin:0 0 10px;font-size:15px;font-weight:800}.ftr a{display:block;padding:3px 0}.ftr a:hover{color:var(--c1)}.bar{position:fixed;inset:auto 0 0 0;z-index:60;display:none;gap:10px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line)}.bar .btn{flex:1;justify-content:center;padding:14px}.keeplinks{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 10px}.keeplinks a{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:14px;color:var(--dim);transition:.18s}.keeplinks a:hover{color:var(--ink);border-color:var(--c1)}
@media(max-width:900px){.hero-in{grid-template-columns:1fr}.menu{display:none}.hcall{margin-inline-start:auto}.bar{display:flex}.art{order:-1}}.near{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.near a{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--dim);text-decoration:none;font-size:14px;transition:.15s}.near a:hover{color:var(--ink);border-color:var(--c1)}

/* ===== FX 2026-08-30 : motion + decorated boxes ===== */
@keyframes fxUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fxIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fxBar{from{width:0;opacity:0}to{width:56px;opacity:1}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fxShine{0%{transform:translateX(-140%) rotate(18deg)}100%{transform:translateX(240%) rotate(18deg)}}
@keyframes fxRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fxDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes fxSweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* animated aurora behind everything */
body::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:80vh;z-index:-1;pointer-events:none;
 background:radial-gradient(620px 380px at 78% 12%,color-mix(in srgb,var(--c1) 24%,transparent),transparent 68%),
            radial-gradient(520px 340px at 12% 0%,color-mix(in srgb,var(--acc) 11%,transparent),transparent 66%);
 filter:blur(8px);animation:fxDrift 26s ease-in-out infinite}

/* scroll reveal */
@supports (animation-timeline: view()){
 .card,.step,details,.band,.sec-h,.prose>h2,.prose>p,.prose>ul,.note,.near,.trust{
  animation:fxUp .7s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 22%}
 .grid .card:nth-child(2n){animation-delay:.05s}
 .grid .card:nth-child(3n){animation-delay:.09s}
}

/* ---- boxes ---- */
.card{position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(160deg,color-mix(in srgb,var(--panel) 92%,#fff 8%),var(--panel));
 border-radius:var(--r);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
 background:linear-gradient(90deg,var(--c1),var(--c2),var(--acc),var(--c1));background-size:200% 100%;
 opacity:.75;transition:opacity .3s}
.card::after{content:"";position:absolute;top:-60%;inset-inline-start:-40%;width:45%;height:220%;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 12%,transparent),transparent);
 opacity:0;pointer-events:none}
.card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--c1) 55%,var(--line));
 box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--c1) 25%,transparent)}
.card:hover::before{opacity:1;animation:fxSweep 2.4s linear infinite}
.card:hover::after{opacity:1;animation:fxShine .9s ease-out}
.card:hover .ic{animation:fxRing 1.4s ease-out infinite}
.ic{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.08)}

/* steps: glowing numbered boxes */
.step{position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.step:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
 box-shadow:0 16px 40px rgba(0,0,0,.4)}
.step::before{transition:transform .3s,box-shadow .3s}
.step:hover::before{transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 18%,transparent)}

/* section headings with animated accent bar */
.sec-h,.prose>h2{position:relative}
.prose>h2{padding-inline-start:16px}
.prose>h2::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:5px;height:1.1em;border-radius:4px;
 background:linear-gradient(180deg,var(--c2),var(--c1));box-shadow:0 0 14px color-mix(in srgb,var(--c1) 55%,transparent)}
.sec-h h2::after{content:"";display:block;height:4px;border-radius:4px;margin-top:10px;
 background:linear-gradient(90deg,var(--acc),var(--c1));animation:fxBar .9s .1s both}

/* FAQ boxes */
details{position:relative;overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s}
details::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
 background:linear-gradient(180deg,var(--c1),var(--acc));opacity:0;transition:opacity .25s}
details:hover{border-color:color-mix(in srgb,var(--c1) 45%,var(--line))}
details[open]{box-shadow:0 10px 30px rgba(0,0,0,.3)}
details[open]::before{opacity:1}
summary{transition:color .2s}
summary::after{transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s}
details[open] summary{color:var(--c2)}
details[open] p{animation:fxUp .38s ease both}

/* CTA / band */
.band{position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,#fff 7%,transparent) 45%,transparent 60%);
 background-size:240% 100%;animation:fxSweep 7s linear infinite}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:-60%;inset-inline-start:-50%;width:40%;height:220%;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 26%,transparent),transparent);
 transform:translateX(-140%) rotate(18deg)}
.btn:hover::after{animation:fxShine .75s ease-out}
.b1{animation:fxRing 2.6s ease-out infinite}
.b1:hover{animation:none}
.pill .dot{will-change:opacity}
.trust b{transition:color .2s}
.trust>div{transition:transform .25s}
.trust>div:hover{transform:translateY(-3px)}

/* nearby chips */
.near a{position:relative;transition:transform .2s,color .2s,border-color .2s,background .2s}
.near a:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c1) 16%,var(--panel))}

/* note box */
.note{position:relative;overflow:hidden}
.note::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
 background:linear-gradient(180deg,var(--acc),var(--c1))}

/* logo float */
.logo svg{animation:fxFloat 5.5s ease-in-out infinite}
.hero .art svg{animation:fxFloat 7s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}