/* =========================================================
   Web Mosis v4 — main site
   Mobile first. Teal + navy brand on a warm light canvas.
   ========================================================= */
/* Droid Arabic Kufi (regular, bundled). Heavier weights come from Noto Kufi Arabic, the same design family. */
@font-face{font-family:"Droid Arabic Kufi";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/DroidKufi-Regular.woff2) format("woff2"),url(../fonts/DroidKufi-Regular.ttf) format("truetype")}
@font-face{font-family:"Droid Arabic Kufi";font-weight:500 900;font-style:normal;font-display:swap;src:url(../fonts/NotoKufiArabic-wght.woff2) format("woff2")}
:root{
  --navy:#0b2540;--navy-2:#123a62;--ink:#0a1c30;--text:#2e4459;--muted:#64788c;
  --teal:#159a9c;--teal-2:#22c3bd;--teal-3:#7fe0d8;--blue:#1f5f94;--mint:#dff4f0;
  --bg:#f5f2ea;--bg-2:#ece6d8;--card:#fcfbf7;--line:rgba(11,37,64,.1);--line-2:rgba(11,37,64,.16);
  --grad:linear-gradient(135deg,#1aa8a6 0%,#1f5f94 100%);
  --grad-soft:linear-gradient(135deg,rgba(34,195,189,.16),rgba(31,95,148,.12));
  --r:22px;--r-s:14px;
  --sh-1:0 1px 2px rgba(11,37,64,.06),0 8px 24px -12px rgba(11,37,64,.18);
  --sh-2:0 30px 60px -30px rgba(11,37,64,.45);
  --ff-h:"Droid Arabic Kufi","DM Sans",system-ui,sans-serif;
  --ff-b:"Droid Arabic Kufi","DM Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --hdr-h:72px;
}
.lang-en{--ff-h:"Bricolage Grotesque",system-ui,sans-serif;--ff-b:"DM Sans",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
main{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:16px;line-height:1.75;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lang-en body,body.lang-en{line-height:1.6}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--ff-h);color:var(--navy);margin:0;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.lang-en h1,.lang-en h2{letter-spacing:-.035em;line-height:1.02}
.lang-en h3{letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:3px;border-radius:8px}
::selection{background:var(--teal-2);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;z-index:200}
.skip:focus{top:12px}
[hidden]{display:none!important}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.center{text-align:center}
.mt{margin-top:40px}
.mt-s{margin-top:22px}

/* highlighted word in headings */
.hl{font-style:normal;color:var(--teal);background-image:linear-gradient(90deg,rgba(34,195,189,.32),rgba(31,95,148,.18));background-repeat:no-repeat;background-position:var(--hl-x,0) 88%;background-size:0% .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:6px;padding-inline:.06em;transition:background-size .9s .35s var(--ease)}
[dir=rtl] .hl{--hl-x:100%}
.lang-en .hl{font-style:italic}
.is-ready .hl,.in .hl{background-size:100% .32em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;font-family:var(--ff-h);font-weight:700;font-size:.98rem;line-height:1;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .3s,background .3s,color .3s,border-color .3s;position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent}
.lang-ar .btn{font-weight:600}
.btn .arr{transition:transform .35s var(--spring)}
[dir=rtl] .btn .arr,[dir=rtl] .lnk .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(4px)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(21,154,156,.75)}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#22c3bd,#1a6fa8);opacity:0;transition:opacity .3s;z-index:-1}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(21,154,156,.85)}
.btn-primary:hover::before{opacity:1}
.btn-ghost{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,37,64,.7)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1fbb59;transform:translateY(-2px)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.9rem}
.btn-lg{min-height:56px;padding:0 30px;font-size:1.02rem}
.lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-h);font-weight:700;color:var(--navy);font-size:.95rem}
.lnk .arr{transition:transform .35s var(--spring)}
.lnk:hover{color:var(--teal)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--navy);box-shadow:var(--sh-1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.eyebrow--light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#d7f5f1;box-shadow:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 0 rgba(34,195,189,.6);animation:ping 2s infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,195,189,.6)}70%{box-shadow:0 0 0 9px rgba(34,195,189,0)}100%{box-shadow:0 0 0 0 rgba(34,195,189,0)}}
.icon-sq{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--navy);color:var(--teal-3);flex:none;transition:transform .5s var(--spring),background .3s}

/* ---------- Promo bar ---------- */
.promo{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding:6px 48px;background:var(--ink);color:#e4f6f3;font-size:.86rem;font-weight:500;text-align:center;overflow:hidden;transition:margin .4s var(--ease),opacity .3s}
.promo::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 60px at 50% 100%,rgba(34,195,189,.35),transparent);pointer-events:none}
.promo-txt{position:relative;display:inline-flex;align-items:center;gap:10px}
.promo-x{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff}
.promo-x:hover{background:rgba(255,255,255,.18)}
.promo.gone{display:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;padding:10px 0;transition:padding .35s var(--ease)}
.hdr{display:flex;align-items:center;gap:14px;min-height:60px;padding-inline:14px 10px;border-radius:999px;background:rgba(252,251,247,.72);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -18px rgba(11,37,64,.35);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);max-width:calc(1200px - 40px);width:calc(100% - 24px);transition:box-shadow .3s,background .3s}
.site-header.scrolled .hdr{background:rgba(252,251,247,.9);box-shadow:0 16px 40px -20px rgba(11,37,64,.45)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:58px;height:auto}
.brand-name{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:800;font-size:.98rem;letter-spacing:.14em;color:var(--navy);white-space:nowrap}
.nav{display:none}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-weight:600;font-size:.88rem;color:var(--navy);background:rgba(255,255,255,.6);transition:background .25s,border-color .25s}
.lang-pill:hover{background:#fff;border-color:var(--teal)}
.lp-full{display:none}
.hdr-cta{display:none}
.burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;border-radius:50%;border:0;background:var(--navy);padding:0}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--spring),opacity .2s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu panel */
@media (max-width:1023px){
  .nav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:-1;padding:calc(var(--hdr-h) + 34px) 22px 26px;background:#f5f2ea;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .18s ease,transform .22s ease,visibility 0s .22s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .22s ease,visibility 0s}
  .nav>a,.nav .nav-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 4px;border:0;border-bottom:1px solid var(--line);background:none;font-family:var(--ff-h);font-size:1.12rem;font-weight:700;color:var(--navy);text-align:start}
  .nav>a:active,.nav .nav-btn:active{color:var(--teal)}
  .nav a.on,.nav .nav-item.on .nav-btn{color:var(--teal)}
  .nav-item .nav-btn svg{transition:transform .3s}
  .nav-item.open .nav-btn svg{transform:rotate(180deg)}
  .mega{display:grid;gap:6px;max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .3s}
  .nav-item.open .mega{max-height:520px;padding:10px 0}
  .mega-i{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px}
  .mega-i:hover,.mega-i.on{background:rgba(21,154,156,.08)}
  .mega-i .icon-sq{width:42px;height:42px;border-radius:12px}
  .nav-foot{display:grid;gap:10px;margin-top:auto;padding-top:24px}
  .mt-txt{display:grid;gap:2px;line-height:1.6}
  .mt-txt b{font-family:var(--ff-h);color:var(--navy);font-size:1rem}
  .mt-txt small{color:var(--muted);font-size:.84rem}
  .nav-foot .btn{width:100%}
  body.menu-open{overflow:hidden}
  body.menu-open .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(252,251,247,.98)}
}
@media (min-width:600px){.lp-full{display:inline}.lp-short{display:none}.hdr-cta{display:inline-flex}}
@media (min-width:1024px){
  .site-header{padding:14px 0}
  .hdr{gap:18px;padding-inline:18px 10px}
  .brand img{width:66px}
  .nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
  .nav>a,.nav-btn{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:999px;border:0;background:none;font-weight:600;font-size:.94rem;color:var(--navy);position:relative;transition:color .2s,background .2s}
  .nav>a::after,.nav-btn::after{content:"";position:absolute;inset-inline:16px;bottom:4px;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transition:transform .35s var(--ease)}
  .nav>a:hover,.nav-btn:hover{background:rgba(11,37,64,.05)}
  .nav>a.on,.nav-item.on>.nav-btn{color:var(--teal)}
  .nav>a.on::after,.nav-item.on>.nav-btn::after{transform:scaleX(1)}
  .nav-btn svg{transition:transform .3s}
  .nav-item{position:relative}
  .nav-item.open .nav-btn svg,.nav-item:hover .nav-btn svg{transform:rotate(180deg)}
  .mega{position:absolute;top:calc(100% + 14px);inset-inline-start:50%;width:560px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;border-radius:24px;background:rgba(252,251,247,.97);border:1px solid var(--line);box-shadow:var(--sh-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.98);transition:opacity .25s,transform .35s var(--ease),visibility 0s .3s}
  [dir=rtl] .mega{transform:translate(50%,8px) scale(.98)}
  .mega::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
  .nav-item:hover .mega,.nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
  [dir=rtl] .nav-item:hover .mega,[dir=rtl] .nav-item.open .mega{transform:translate(50%,0) scale(1)}
  .mega-i{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;transition:background .2s}
  .mega-i:hover,.mega-i.on{background:var(--mint)}
  .mega-i:hover .icon-sq{transform:rotate(-8deg) scale(1.06);background:var(--teal)}
  .mega-i .icon-sq{width:44px;height:44px;border-radius:13px}
  .mt-txt{display:grid;line-height:1.35}
  .mt-txt b{font-family:var(--ff-h);color:var(--navy);font-size:.95rem}
  .mt-txt small{color:var(--muted);font-size:.82rem}
  .nav-foot{display:none}
  .burger{display:none}
}
.soon{font-style:normal;font-size:.68rem;font-weight:700;background:var(--teal);color:#fff;border-radius:999px;padding:2px 8px;margin-inline-start:8px;vertical-align:middle}

/* ---------- Entrance + reveal ---------- */
.js .in-1,.js .in-2,.js .in-3,.js .in-4{opacity:0;transform:translateY(26px)}
.is-ready .in-1,.is-ready .in-2,.is-ready .in-3,.is-ready .in-4{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.is-ready .in-2{transition-delay:.12s}.is-ready .in-3{transition-delay:.24s}.is-ready .in-4{transition-delay:.36s}
.js .rv{opacity:0;transform:translateY(34px) scale(.985)}
.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:34px 0 40px;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(11,37,64,.09) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:blob 18s ease-in-out infinite alternate}
.b1{width:380px;height:380px;background:#9fe7df;top:-120px;inset-inline-end:-80px}
.b2{width:320px;height:320px;background:#b8d4f0;bottom:-120px;inset-inline-start:-100px;animation-delay:-6s}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.12)}100%{transform:translate(-20px,20px) scale(.95)}}
.hero-grid{position:relative;display:grid;gap:36px;align-items:center}
.hero-text{display:grid;justify-items:start;gap:18px}
.hero h1{font-size:clamp(2.15rem,7.6vw,4.4rem);line-height:1.18}
.lang-en .hero h1{font-size:clamp(2.5rem,9vw,5.1rem);line-height:.98}
.hero .lead{font-size:clamp(1rem,2.6vw,1.12rem);color:var(--text);max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;max-width:520px;margin-top:10px}
.stat{padding-inline:14px;border-inline-start:2px solid var(--line-2)}
.stat:first-child{padding-inline-start:12px}
.stat b{display:block;font-family:var(--ff-h);font-size:clamp(1.5rem,5vw,2rem);font-weight:800;color:var(--navy);line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:4px}

/* hero art */
.art{position:relative;width:min(100%,420px);aspect-ratio:1;margin-inline:auto}
.art-orb{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#1a4a76,var(--navy) 55%,#071a2e);display:grid;place-items:center;align-content:center;gap:14px;box-shadow:0 40px 80px -30px rgba(11,37,64,.7),inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.art-orb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(127,224,216,.55) 1.4px,transparent 1.6px);background-size:22px 22px;opacity:.45;-webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);mask-image:radial-gradient(circle,#000 40%,transparent 72%);animation:drift 40s linear infinite}
.art-orb::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(34,195,189,.35) 80%,transparent 90%);animation:spin 9s linear infinite}
@keyframes drift{to{background-position:220px 220px}}
@keyframes spin{to{transform:rotate(360deg)}}
.art-orb img{position:relative;z-index:1;width:58%;filter:drop-shadow(0 10px 30px rgba(34,195,189,.45));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}
.art-word{position:relative;z-index:1;font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:800;letter-spacing:.32em;color:#e8fbf8;font-size:clamp(.8rem,2.6vw,1.05rem);padding-inline-start:.32em}
.art-ring{position:absolute;inset:-6%;border-radius:50%;border:1.5px dashed rgba(21,154,156,.45);animation:spin 40s linear infinite;z-index:0}
.art-ring.r2{inset:-14%;border:1px solid rgba(31,95,148,.15);animation-duration:70s;animation-direction:reverse}
.art .art-ring{position:absolute}
.art>.art-orb>.art-ring{display:none}
.art::before,.art::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.art::before{inset:2%;border:1.5px dashed rgba(21,154,156,.4);animation:spin 50s linear infinite}
.art::after{inset:-5%;border:1px solid rgba(31,95,148,.12)}
.fcard{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(252,251,247,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px -18px rgba(11,37,64,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:bob 6s ease-in-out infinite;line-height:1.3;max-width:62%}
.fcard b{display:block;font-family:var(--ff-h);font-size:.86rem;color:var(--navy)}
.fcard small{display:block;font-size:.72rem;color:var(--muted)}
.fc-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--mint);color:var(--teal);flex:none}
.f1{top:6%;inset-inline-start:-2%}
.f2{bottom:18%;inset-inline-end:-4%;animation-delay:-2s}
.f3{bottom:-1%;inset-inline-start:10%;animation-delay:-4s}
.f3 .fc-ico{background:#dcf8e6;color:#18a957}
.fbar{top:16%;inset-inline-end:-2%;padding:12px;gap:5px;align-items:flex-end;height:64px;animation-delay:-3s}
.fbar i{display:block;width:8px;height:var(--h);border-radius:4px;background:var(--grad);transform-origin:bottom;animation:grow 2.6s var(--ease) infinite alternate}
.fbar i:nth-child(2){animation-delay:.2s}.fbar i:nth-child(3){animation-delay:.4s}.fbar i:nth-child(4){animation-delay:.6s}.fbar i:nth-child(5){animation-delay:.8s}
@keyframes grow{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@keyframes bob{50%{transform:translateY(-10px)}}
.art[data-parallax] .fcard{translate:var(--px,0) var(--py,0);transition:translate .6s var(--ease)}

@media (min-width:900px){
  .hero{padding:56px 0 70px}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:40px}
  .art{width:100%;max-width:470px}
}

/* ---------- Ticker ---------- */
.ticker{position:relative;overflow:hidden;background:var(--navy);color:#dff6f2;padding:16px 0;transform:rotate(-1.2deg) scale(1.03);margin:10px 0 20px;box-shadow:0 20px 40px -24px rgba(11,37,64,.6);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;gap:36px;animation:marquee 32s linear infinite}
[dir=rtl] .ticker-track{animation-name:marquee-rtl}
.ticker span{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-h);font-weight:700;font-size:1rem;white-space:nowrap}
.ticker span svg{color:var(--teal-2)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marquee-rtl{to{transform:translateX(50%)}}

/* ---------- Sections ---------- */
.section{position:relative;padding:64px 0}
.section--tint{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section--flush{padding-top:10px}
.section--flush-b{padding-bottom:10px}
.section--meet{padding-top:20px}
.sec-head{display:grid;justify-items:center;gap:12px;text-align:center;max-width:760px;margin:0 auto 36px}
.sec-head h2{font-size:clamp(1.75rem,5.4vw,3rem)}
.lang-en .sec-head h2{font-size:clamp(2rem,6vw,3.4rem)}
.sec-head p{color:var(--muted);font-size:1.02rem;max-width:60ch}
@media (min-width:900px){.section{padding:96px 0}.sec-head{margin-bottom:52px}}

.grid-3{display:grid;gap:18px}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr);gap:22px}}

.card{position:relative;padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .5s var(--spring),box-shadow .4s,border-color .3s}
.card h3{font-size:1.15rem;margin:18px 0 8px}
.card p{color:var(--muted);font-size:.95rem}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(21,154,156,.35)}
.card:hover .icon-sq{transform:rotate(-8deg) scale(1.08);background:var(--teal);color:#fff}

/* solution cards (numbered) */
.kind{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 28px 28px;border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:transform .5s var(--spring),box-shadow .4s,border-color .3s}
.kind::before{content:"";position:absolute;width:180px;height:180px;top:-70px;inset-inline-end:-60px;border-radius:50%;background:radial-gradient(circle,rgba(34,195,189,.35),transparent 70%);transition:transform .6s var(--ease)}
.kind-num{position:absolute;top:10px;inset-inline-end:18px;font-family:var(--ff-h);font-weight:800;font-size:4.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(21,154,156,.28);letter-spacing:-.04em;transition:transform .6s var(--spring)}
.kind .icon-sq{position:relative}
.kind h3{position:relative;font-size:1.3rem;margin:20px 0 6px}
.kind-sub{position:relative;display:block;color:var(--teal);font-family:var(--ff-h);font-weight:700;font-size:.98rem;line-height:1.5;margin-bottom:10px}
.kind p{position:relative;color:var(--muted);font-size:.94rem;margin-bottom:22px}
.kind .lnk{margin-top:auto;position:relative}
.kind-tag{position:absolute;top:22px;inset-inline-end:22px;z-index:1;background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.kind:hover{transform:translateY(-8px);box-shadow:var(--sh-2);border-color:rgba(21,154,156,.5)}
.kind:hover::before{transform:scale(1.5)}
.kind:hover .kind-num{transform:translateY(6px) scale(1.06)}
.kind:hover .icon-sq{transform:rotate(-8deg) scale(1.06);background:var(--teal);color:#fff}
.kind:hover .lnk .arr{transform:translateX(5px)}
[dir=rtl] .kind:hover .lnk .arr{transform:scaleX(-1) translateX(5px)}

/* ---------- Filters ---------- */
.filters{position:relative;display:flex;gap:6px;width:max-content;max-width:100%;margin:0 auto 28px;padding:6px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid var(--line);box-shadow:var(--sh-1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filter{position:relative;z-index:1;flex:none;height:40px;padding:0 18px;border:0;border-radius:999px;background:none;font-weight:600;font-size:.9rem;color:var(--navy);transition:color .3s}
.filter.on{color:#fff}
.filter-pill{display:none}
.filter{transition:color .3s,background .3s,transform .35s var(--spring)}
.filter:hover{background:rgba(11,37,64,.06)}
.filter.on{background:var(--navy);animation:pillin .45s var(--spring)}
@keyframes pillin{from{transform:scale(.85)}}

/* ---------- Template cards ---------- */
.tgrid{display:grid;gap:22px}
@media (min-width:700px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.tgrid{grid-template-columns:repeat(3,1fr);gap:26px}}
.tcard{--tc:var(--teal);display:flex;flex-direction:column;border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:transform .5s var(--spring),box-shadow .4s}
.tcard:hover{transform:translateY(-8px);box-shadow:var(--sh-2)}
.tcard-media{position:relative;display:block;width:100%;padding:12px 12px 0;border:0;background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 22%,#fff),color-mix(in srgb,var(--tc) 8%,var(--bg)));text-align:start;overflow:hidden}
.tbar{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:12px 12px 0 0;background:#fff;border-bottom:1px solid #eef0f2}
.tbar i{width:8px;height:8px;border-radius:50%;background:#f26b5b}
.tbar i:nth-child(2){background:#f5bd4f}.tbar i:nth-child(3){background:#58c46b}
.turl{margin-inline-start:8px;flex:1;height:16px;border-radius:6px;background:#f2f4f6;font-size:.62rem;line-height:16px;color:#8a97a5;padding-inline:8px;overflow:hidden;white-space:nowrap}
.tscreen{position:relative;display:block;height:230px;overflow:hidden;background:#fff;border-radius:0 0 4px 4px}
.tscreen iframe{max-width:none;position:absolute;top:0;inset-inline-start:0;width:1280px;height:1700px;border:0;transform-origin:0 0;pointer-events:none;transition:transform 4s var(--ease)}
[dir=rtl] .tscreen iframe{transform-origin:100% 0}
.tscreen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s var(--ease)}
.tempty{display:grid;place-items:center;height:100%;background:var(--grad-soft);color:var(--teal)}
.tscreen img.is-mob{object-fit:contain;background:#f4f4f4}
.tcard-media:hover .tscreen img{transform:scale(1.04)}
.tscreen img{transition:transform 1.2s var(--ease)}
.tphone{position:absolute;bottom:12px;inset-inline-end:22px;z-index:2;width:74px;aspect-ratio:9/18.5;border-radius:14px;border:4px solid #10161d;background:#10161d;overflow:hidden;box-shadow:0 16px 30px -10px rgba(0,0,0,.55);transform:rotate(-4deg);transition:transform .6s var(--spring)}
[dir=rtl] .tphone{transform:rotate(4deg)}
.tphone img{width:100%;height:100%;object-fit:cover;object-position:top}
.tcard-media:hover .tphone{transform:translateY(-8px) rotate(0)}
@media (min-width:700px){.tphone{width:84px}}
.bico{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.bico svg{flex:none}
.bico--wa svg{color:#25d366}
.bico--meta svg{color:#0a7cff}
.section--dark .bico--meta svg,.plan .bico--meta svg{color:#5aa9ff}
.tload{position:absolute;inset:0;background:linear-gradient(100deg,#f3f3f3 30%,#fafafa 50%,#f3f3f3 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}
.tscreen.ready .tload{opacity:0;transition:opacity .4s;pointer-events:none}
.tcard-cta{position:absolute;inset-inline-start:50%;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:.86rem;white-space:nowrap;box-shadow:0 14px 28px -12px rgba(11,37,64,.7);opacity:0;transform:translate(-50%,12px);transition:opacity .3s,transform .4s var(--spring)}
[dir=rtl] .tcard-cta{transform:translate(50%,12px)}
.tcard-media:hover .tcard-cta,.tcard-media:focus-visible .tcard-cta{opacity:1;transform:translate(-50%,0)}
[dir=rtl] .tcard-media:hover .tcard-cta,[dir=rtl] .tcard-media:focus-visible .tcard-cta{transform:translate(50%,0)}
@media (hover:none){.tcard-cta{opacity:1;transform:translate(-50%,0)}[dir=rtl] .tcard-cta{transform:translate(50%,0)}}
.tcard-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 22px}
.tcard-body h3{font-size:1.18rem}
.tcard-body p{color:var(--muted);font-size:.9rem;line-height:1.6}
.tchips{display:flex;flex-wrap:wrap;gap:6px}
.tchip{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--mint);color:#0f7c7d}
.tchip--plan-2{background:#e2ecf8;color:var(--blue)}
.tchip--plan-3{background:var(--navy);color:#fff}
.tchip--services{background:#f3e9d4;color:#8a5a12}
.tcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.empty{text-align:center;color:var(--muted);padding:30px 0}

/* ---------- Plans (dark section) ---------- */
.section--dark{background:radial-gradient(1000px 500px at 80% -10%,#174c78 0,transparent 60%),radial-gradient(800px 500px at 0% 110%,#0f5d63 0,transparent 60%),var(--ink);color:#c9dbe8;overflow:hidden}
.section--dark h2{color:#fff}
.section--dark .sec-head p{color:#9fb7ca}
.section--dark .hl{color:var(--teal-3)}
.dark-glow{position:absolute;inset:0;background-image:radial-gradient(rgba(127,224,216,.25) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.plans{display:grid;gap:22px;align-items:start}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;border-radius:26px;background:linear-gradient(180deg,#0f2f50,#0c2440);border:1px solid rgba(127,224,216,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;transition:transform .5s var(--spring),box-shadow .4s,border-color .3s}
.plan:hover{transform:translateY(-8px);border-color:rgba(127,224,216,.4);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(127,224,216,.2)}
.plan-top{position:relative;display:grid;justify-items:center;gap:12px;padding:26px 22px 22px;background:linear-gradient(135deg,#1b9a9e,#1f5f94);text-align:center;overflow:hidden}
.plan-top::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.plan:hover .plan-top::after{transform:translateX(120%)}
.plan-name{display:inline-block;padding:8px 22px;border-radius:999px;background:#eaf6f5;color:var(--navy);font-family:var(--ff-h);font-weight:800;font-size:1.05rem}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;color:#fff}
.plan-price strong{font-family:var(--ff-h);font-size:2.9rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.plan-cur{font-weight:700;font-size:1rem;opacity:.9}
.plan-price s{order:-1;align-self:center;padding:4px 10px;border-radius:10px;background:rgba(10,28,48,.45);color:#ff9b8f;font-weight:700;font-size:.86rem}
.plan-badge{position:absolute;top:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#ffd166;color:#4a3300;font-size:.72rem;font-weight:800}
.plan-badge svg{fill:currentColor}
.plan-body{display:flex;flex-direction:column;flex:1;padding:24px 22px 24px}
.ticks{display:grid;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:#dce9f2;font-size:.94rem;line-height:1.6}
.ticks li svg{flex:none;width:22px;height:22px;padding:4px;margin-top:1px;border-radius:50%;background:rgba(127,224,216,.18);color:var(--teal-3);stroke-width:3}
.plan--top .ticks li svg{background:var(--teal-2);color:var(--ink)}
.dchips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle;margin-inline:2px}
.dchip{display:inline-block;padding:0 8px;border-radius:999px;border:1px solid rgba(127,224,216,.4);font-size:.76rem;font-weight:700;color:var(--teal-3);line-height:1.6}
.plan-more{display:inline-block;margin-top:14px;color:var(--teal-3);font-weight:700;font-size:.88rem}
.plan-more:hover{text-decoration:underline}
.plan-actions{display:grid;gap:12px;margin-top:auto;padding-top:24px}
.plan-actions .btn{width:100%}
.plan-designs{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#bcd2e2;font-weight:600;font-size:.88rem}
.plan-designs b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.78rem}
.plan-designs:hover{color:#fff}
.plan--top{border-color:rgba(255,209,102,.35)}
@media (min-width:900px){.plan--top{transform:translateY(-14px)}.plan--top:hover{transform:translateY(-22px)}}
/* plans page: on light background */
.section--plans{padding-bottom:90px}
.plans-note{margin:34px auto 0;max-width:760px;text-align:center;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* ---------- Steps ---------- */
.steps{position:relative;display:grid;gap:16px;counter-reset:s}
.steps li{position:relative;display:grid;gap:6px;padding:24px 24px 24px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.steps .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--ff-h);font-weight:800;font-size:1.1rem;box-shadow:0 10px 24px -10px rgba(21,154,156,.8);margin-bottom:8px}
.steps b{font-family:var(--ff-h);color:var(--navy);font-size:1.1rem}
.steps p{color:var(--muted);font-size:.93rem}
.js .steps li{opacity:0;transform:translateY(24px)}
.steps.in li{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d),transform .8s var(--spring) var(--d)}
.js .steps.rv{opacity:1;transform:none}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:20px}
  .steps--3{grid-template-columns:repeat(3,1fr)}
  .steps::before{content:"";position:absolute;top:47px;inset-inline:12%;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 8px,transparent 8px 16px);opacity:.5;transform:scaleX(0);transform-origin:var(--hl-o,left);transition:transform 1.4s var(--ease) .3s}
  [dir=rtl] .steps::before{--hl-o:right}
  .steps.in::before{transform:scaleX(1)}
  .steps li{z-index:1}
}

/* ---------- Meeting band ---------- */
.meet-band{position:relative;display:grid;gap:28px;align-items:center;padding:32px 24px;border-radius:30px;background:var(--grad);color:#e5f7f5;overflow:hidden;box-shadow:0 40px 80px -40px rgba(21,95,148,.8)}
.meet-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.meet-txt{position:relative;display:grid;gap:12px}
.meet-band h2{color:#fff;font-size:clamp(1.6rem,4.6vw,2.4rem)}
.meet-band .hl{color:#fff}
.meet-band .hl{background-image:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.15))}
.meet-join{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.meet-join input{flex:1 1 220px;min-height:52px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-weight:600;letter-spacing:.04em}
.meet-join input::placeholder{color:rgba(255,255,255,.75);letter-spacing:0}
.meet-join input:focus{outline:0;background:rgba(255,255,255,.22);border-color:#fff}
.meet-join .btn-primary{background:#fff;color:var(--navy);box-shadow:none}
.meet-join .btn-primary::before{display:none}
.meet-viz{position:relative;display:grid;place-items:center;height:170px}
.mv-screen{position:relative;width:200px;height:130px;border-radius:16px;background:rgba(10,28,48,.45);border:1px solid rgba(255,255,255,.3);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;transform:perspective(600px) rotateY(-12deg);animation:tilt 7s ease-in-out infinite}
.mv-screen i{border-radius:10px;background:rgba(255,255,255,.18)}
.mv-screen i:nth-child(2){background:rgba(127,224,216,.45)}
.mv-wave{position:absolute;bottom:4px;display:flex;gap:5px;align-items:center;height:40px;padding:6px 14px;border-radius:999px;background:#fff}
.mv-wave i{width:4px;height:100%;border-radius:4px;background:var(--teal);animation:wave 1s ease-in-out infinite}
.mv-wave i:nth-child(2){animation-delay:.1s}.mv-wave i:nth-child(3){animation-delay:.2s}.mv-wave i:nth-child(4){animation-delay:.3s}.mv-wave i:nth-child(5){animation-delay:.4s}.mv-wave i:nth-child(6){animation-delay:.5s}.mv-wave i:nth-child(7){animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes tilt{50%{transform:perspective(600px) rotateY(10deg) translateY(-6px)}}
@media (min-width:860px){.meet-band{grid-template-columns:.8fr 1.2fr;padding:48px 52px}}

/* ---------- Form ---------- */
.form-card{display:grid;gap:28px;padding:26px 20px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2)}
.form-side{display:grid;align-content:start;gap:14px}
.form-side h2{font-size:clamp(1.6rem,4.6vw,2.4rem)}
.form-side .lead{color:var(--muted)}
@media (min-width:900px){.form-card{grid-template-columns:.85fr 1.15fr;gap:48px;padding:48px}.form-card--single{grid-template-columns:.7fr 1.3fr}}
.clist{display:grid;gap:10px;margin-top:10px}
.clist a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--navy);transition:border-color .2s,transform .3s var(--spring)}
.clist a:hover{border-color:var(--teal);transform:translateX(4px)}
[dir=rtl] .clist a:hover{transform:translateX(-4px)}
.ci{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--teal);flex:none}
.wmform{display:grid;gap:18px}
.fgrid{display:grid;gap:14px}
@media (min-width:600px){.fgrid{grid-template-columns:1fr 1fr}.f.full,.fnote{grid-column:1/-1}}
.f{display:grid;gap:6px;min-width:0}
.f>span,.fl{font-weight:600;font-size:.88rem;color:var(--navy)}
.f input,.f textarea,.cs-btn{width:100%;min-height:52px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-size:1rem;transition:border-color .2s,box-shadow .2s}
.f textarea{resize:vertical;min-height:96px;line-height:1.6}
.f input:focus,.f textarea:focus,.cs-btn:focus-visible,.cs.open .cs-btn{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(34,195,189,.18)}
.f-ico{position:relative;display:block}
.f-ico svg{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.f-ico input{padding-left:44px}
[dir=rtl] .f-ico input{padding-left:16px;padding-right:44px;text-align:right}
[dir=rtl] .f-ico input:focus,[dir=rtl] .f-ico input:not(:placeholder-shown){text-align:left}
.is-hidden{display:none!important}
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);pointer-events:none}
.fnote{margin:0;padding:12px 16px;border-radius:14px;background:var(--mint);color:#0f6e6f;font-size:.9rem;font-weight:500}
.wmform .btn{justify-self:start}
@media (max-width:599px){.wmform .btn{width:100%}}
.fresult{display:none;padding:16px;border-radius:16px;font-weight:600}
.fresult.err{display:block;background:#fdecea;color:#a1271b}
.fresult.ok{display:grid;gap:6px;background:var(--mint);color:#0f5f60}
.fresult.ok b{font-family:var(--ff-h);font-size:1.1rem}
.fresult .btn{justify-self:start;margin-top:8px}
.is-sent .fgrid,.is-sent>button[type=submit]{display:none}
/* custom select */
.cs{position:relative}
.cs-native{position:absolute!important;opacity:0;pointer-events:none;height:0;width:0}
.cs-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:start}
.cs-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn svg{flex:none;transition:transform .3s}
.cs.open .cs-btn svg{transform:rotate(180deg)}
.cs-list{position:absolute;z-index:20;inset-inline:0;top:calc(100% + 6px);max-height:280px;overflow:auto;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
.cs.open .cs-list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cs-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:.94rem;color:var(--ink)}
.cs-opt .ck{opacity:0;color:var(--teal)}
.cs-opt[aria-selected=true] .ck{opacity:1}
.cs-opt[aria-selected=true]{font-weight:700}
.cs-opt.act,.cs-opt:hover{background:var(--mint)}
.cs-opt[aria-disabled=true]{opacity:.4;pointer-events:none}

/* ---------- Inner page hero ---------- */
.phero{position:relative;padding:48px 0 40px;text-align:center;overflow:hidden}
.phero .container{display:grid;justify-items:center;gap:14px;max-width:820px}
.phero h1{font-size:clamp(2rem,6.4vw,3.6rem)}
.lang-en .phero h1{font-size:clamp(2.3rem,7vw,4rem)}
.phero .lead{color:var(--muted);font-size:1.05rem;max-width:62ch}
.phero-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:var(--navy);color:var(--teal-3);box-shadow:0 18px 40px -16px rgba(11,37,64,.6);transform:rotate(-6deg)}
.phero-glow{position:absolute;inset:-40% 10% auto;height:120%;background:radial-gradient(closest-side,rgba(34,195,189,.28),transparent);pointer-events:none}
@media (min-width:900px){.phero{padding:80px 0 56px}}
.about-top{display:grid;gap:14px;max-width:780px;margin:0 auto 36px;text-align:center}
.about-top h2{font-size:clamp(1.6rem,4.6vw,2.6rem)}
.about-top .lead{color:var(--muted)}
.prose{max-width:780px}
.prose h1{margin-bottom:20px}
.prose p{margin-bottom:14px}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--ink);color:#9fb3c6;padding:56px 0 24px;overflow:hidden}
.foot-glow{position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(closest-side,rgba(34,195,189,.22),transparent);pointer-events:none}
.foot-cta{position:relative;display:grid;gap:18px;justify-items:start;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-cta h2{color:#fff;font-size:clamp(1.6rem,4.8vw,2.6rem)}
.foot-cta .hl{color:var(--teal-3)}
.foot-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:900px){.foot-cta{grid-template-columns:1fr auto;align-items:center}}
.foot-grid{position:relative;display:grid;gap:30px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-brand img{width:130px;margin-bottom:14px}
.foot-brand p{max-width:36ch;font-size:.94rem}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer ul{display:grid;gap:8px}
.site-footer ul a{font-size:.94rem;transition:color .2s}
.site-footer ul a:hover{color:var(--teal-3)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .2s,transform .3s var(--spring)}
.social a:hover{transform:translateY(-3px);background:var(--teal)}
.social a.wa-s:hover{background:#25d366}
.social a.fb:hover{background:#1877f2}
.foot-bottom{position:relative;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:.84rem;text-align:center}

/* ---------- WhatsApp float ---------- */
.wa{position:fixed;z-index:40;bottom:calc(16px + env(safe-area-inset-bottom));inset-inline-end:16px;display:flex;align-items:center;gap:10px}
.wa-label{display:none;padding:8px 14px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:.86rem;box-shadow:var(--sh-1)}
.wa-btn{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 14px 30px -10px rgba(37,211,102,.8);transition:transform .35s var(--spring)}
.wa-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ring 2.4s infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.wa:hover .wa-btn{transform:scale(1.08) rotate(-6deg)}
@media (min-width:760px){.wa-label{display:block}.wa{bottom:24px;inset-inline-end:24px}}

/* ---------- Modal (screenshot designs) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(10,28,48,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.modal.open{opacity:1;visibility:visible;transition-delay:0s}
.modal-box{position:relative;display:grid;gap:14px;grid-template-columns:1fr;width:min(1100px,100%);max-height:90vh;overflow:auto;padding:22px;border-radius:24px;background:var(--card);transform:scale(.96);transition:transform .4s var(--spring)}
.modal.open .modal-box{transform:none}
@media (min-width:800px){.modal-box{grid-template-columns:3fr 1fr}.modal-box.no-mob{grid-template-columns:1fr}}
.modal-title{grid-column:1/-1;padding-inline-end:40px}
.modal-x{position:absolute;top:14px;inset-inline-end:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:#fff}
.modal figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}

/* ---------- Maintenance page ---------- */
body.maint{min-height:100vh;display:grid;place-items:center;background:var(--ink);color:#fff;padding:32px 20px;position:relative;overflow-x:hidden}
body.maint::before{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(34,195,189,.5) 1.5px,transparent 1.6px);background-size:26px 26px;opacity:.35;animation:drift 50s linear infinite}
body.maint::after{content:"";position:fixed;inset:auto -10% -30% -10%;height:60%;background:radial-gradient(closest-side,rgba(34,195,189,.45),transparent)}
.maint-box{position:relative;z-index:1;width:min(720px,100%);text-align:center}
.maint-box img{width:min(240px,60%);margin:0 auto 36px}
.maint-box h1{font-size:clamp(2rem,5vw,3.2rem);color:#fff}
.maint-box p{color:#b9cddd;font-size:1.15rem;margin:18px auto 0;max-width:46ch}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:40px auto 0;max-width:560px;direction:ltr}
.cd div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px 6px}
.cd b{display:block;font-size:clamp(1.8rem,6vw,2.8rem);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:6px;font-size:.82rem;color:#b9cddd}
.cd-done{margin-top:30px;font-weight:800;color:var(--teal-3)}
.maint-links{display:flex;gap:12px;justify-content:center;margin-top:38px}
.maint-links a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.maint-links a.wa-link{background:#25d366}
.maint-links a.fb-link{background:#1877f2}
.maint-lang{position:absolute;top:20px;inset-inline-end:20px;z-index:2;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .in-1,.js .in-2,.js .in-3,.js .in-4,.js .steps li{opacity:1;transform:none}
}

/* ---------- Personal message (founder) ---------- */
.founder-sec{padding-bottom:30px}
.founder{position:relative;display:grid;gap:30px;align-items:center;padding:28px 22px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.founder::before{content:"";position:absolute;width:420px;height:420px;top:-200px;inset-inline-end:-160px;border-radius:50%;background:radial-gradient(circle,rgba(34,195,189,.18),transparent 70%);pointer-events:none}
.founder-photo{position:relative;width:min(240px,70%);aspect-ratio:1;margin-inline:auto}
.founder-photo>img,.founder-ph{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 24px 50px -24px rgba(11,37,64,.6)}
.founder-ph{display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#1a4a76,var(--navy) 60%)}
.founder-ph img{width:58%}
.founder-ring{position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed rgba(21,154,156,.5);animation:spin 40s linear infinite}
.founder-txt{position:relative;display:grid;gap:14px;justify-items:start}
.founder-txt h2{font-size:clamp(1.6rem,4.4vw,2.4rem)}
.founder-msg{display:grid;gap:10px;color:var(--text);font-size:1.02rem;line-height:1.95}
.founder-sign{display:flex;align-items:center;gap:14px;margin-top:4px}
.founder-line{width:44px;height:2px;background:var(--teal)}
.founder-sign span:last-child{display:grid;line-height:1.35}
.founder-sign b{font-family:var(--ff-h);color:var(--navy);font-size:1.05rem}
.founder-sign small{color:var(--muted)}
.founder-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (min-width:860px){.founder{grid-template-columns:.7fr 1.3fr;gap:50px;padding:50px}.founder-photo{width:100%;max-width:300px}}

/* ---------- Plans: swipe carousel on phones ---------- */
.plans-dots{display:none}
@media (max-width:899px){
  .plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 20px 18px;margin-inline:-20px;scroll-padding-inline:20px}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 84%;scroll-snap-align:center}
  .plan:hover{transform:none}
  .plans-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px}
  .plans-dots button{width:9px;height:9px;padding:0;border-radius:999px;border:0;background:rgba(127,224,216,.35);transition:width .3s var(--spring),background .3s}
  .plans-dots button.on{width:26px;background:var(--teal-2)}
  .section--plans .plans-dots button{background:rgba(11,37,64,.2)}
  .section--plans .plans-dots button.on{background:var(--teal)}
  .plans-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:.84rem;color:#9fb7ca}
  .section--plans .plans-hint{color:var(--muted)}
  .plans-hint svg{animation:nudge 1.6s ease-in-out infinite}
  [dir=rtl] .plans-hint svg{transform:scaleX(-1);animation-name:nudge-rtl}
}
@media (min-width:900px){.plans-hint{display:none}}
@keyframes nudge{50%{transform:translateX(6px)}}
@keyframes nudge-rtl{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateX(6px)}}

/* filters row on phones: fade edges so it's clear it scrolls */
@media (max-width:699px){
  .filters{max-width:calc(100% + 40px);margin-inline:-20px;border-radius:0;border-inline:0;padding-inline:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);background:transparent;box-shadow:none;border:0}
  .filter{background:rgba(255,255,255,.75);border:1px solid var(--line)}
}
.ticks li .bico svg{width:16px;height:16px;padding:0;margin:0;background:none;border-radius:0;color:#25d366;stroke-width:2.4}
.ticks li .bico--meta svg{color:#5aa9ff}
@media (max-width:899px){.plan-price strong{font-size:2.4rem}.plan-price{flex-wrap:nowrap}}

/* ---------- 4.2: things a plan does not include ---------- */
.plan-miss{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.14)}
.plan-miss-t{display:block;margin-bottom:10px;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:#8fa6b8}
.plan-miss ul{display:flex;flex-wrap:wrap;gap:8px}
.plan-miss li{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#93a8b9;font-size:.8rem;line-height:1.4}
[dir=rtl] .plan-miss li{padding:5px 6px 5px 11px}
.plan-miss li>span:last-child{color:#a9bccb}
.noic{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);color:#8fa6b8}
.noic>svg{width:15px;height:15px;opacity:.9}
.noic>i{position:absolute;inset-inline-end:-4px;bottom:-3px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#ef4d5a;color:#fff;box-shadow:0 0 0 2px #10304d}
.noic>i svg{width:8px;height:8px;stroke-width:3.6}

/* ---------- 4.2: one more link in the menu ---------- */
@media (min-width:1024px){.nav>a,.nav-btn{white-space:nowrap;flex:none}}
@media (min-width:1024px){.nav svg,.hdr-actions svg{flex:none}.hdr-actions{flex:none}}
@media (min-width:1024px){.nav>a,.nav-btn{padding:0 10px;font-size:.9rem}.hdr{gap:10px}}
@media (min-width:1024px) and (max-width:1199px){.nav>a,.nav-btn{padding:0 8px;font-size:.86rem}.hdr .brand-name{display:none}}

/* ---------- 4.2: full-page screenshots (cards scroll on hover, modal scrolls) ---------- */
.tscreen img,.tphone img{transition:object-position 1.6s var(--ease)}
.tcard-media:hover .tscreen img{transform:none}
.tcard-media:hover .tscreen img:not(.is-mob),.tcard-media:focus-visible .tscreen img:not(.is-mob),.tcard-media:hover .tphone img,.tcard-media:focus-visible .tphone img{object-position:50% 100%;transition:object-position 10s linear}
.modal-box{grid-template-rows:auto auto minmax(0,1fr) auto;max-height:92vh;max-height:92dvh;overflow:hidden;padding:18px}
.modal-box.no-mob{grid-template-rows:auto minmax(0,1fr) auto}
.modal figure{display:flex;flex-direction:column;min-height:0;background:#fff}
.modal figure[hidden]{display:none}
.m-bar{display:flex;gap:6px;flex:none;padding:10px 12px;background:#eef1f4;border-bottom:1px solid var(--line)}
.m-bar i{width:9px;height:9px;border-radius:50%;background:#cfd6dd}
.m-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(11,37,64,.3) transparent;outline:0}
.m-scroll::-webkit-scrollbar{width:8px}
.m-scroll::-webkit-scrollbar-thumb{border-radius:8px;background:rgba(11,37,64,.28)}
.m-scroll img{display:block;width:100%;height:auto}
.modal .m-mob{justify-self:center;width:min(300px,100%);border:7px solid #10161d;border-radius:30px;background:#10161d}
.modal .m-mob .m-scroll{border-radius:22px;background:#fff;scrollbar-width:none}
.modal .m-mob .m-scroll::-webkit-scrollbar{display:none}
.m-tabs{grid-column:1/-1;display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--bg-2);justify-self:start}
.m-tabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--navy);font-family:var(--ff-h);font-weight:700;font-size:.84rem}
.m-tabs button.on{background:var(--navy);color:#fff}
.modal-box.no-mob .m-tabs{display:none}
.m-hint{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;color:var(--muted);font-size:.82rem}
.m-hint svg{animation:mhint 1.6s ease-in-out infinite}
@keyframes mhint{50%{transform:translateY(4px)}}
@media (max-width:799px){
  .modal{padding:10px}
  .modal-box{height:92vh;height:92dvh}
  .modal-box[data-v=desk] .m-mob,.modal-box[data-v=mob] .m-desk{display:none}
}
@media (min-width:800px){
  .m-tabs{display:none}
  .modal-box{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:92vh;padding:22px}
  .modal .m-mob{width:100%;max-width:300px}
}

/* ---------- 4.3 ---------- */
/* Arabic: Kufi needs more line height and no negative tracking */
.lang-ar h1,.lang-ar h2,.lang-ar h3,.lang-ar h4{line-height:1.55;letter-spacing:0}
.lang-ar body,.lang-ar{letter-spacing:0}
.lang-ar .btn{line-height:1.2}
/* design thumbnails inside the "choose a design" list */
.cs-th{flex:none;width:66px;height:48px;border-radius:8px;object-fit:cover;object-position:top;border:1px solid var(--line);background:var(--bg-2)}
.cs-th[hidden]{display:none}
.cs-th--none{display:block;background:repeating-linear-gradient(135deg,var(--bg-2) 0 6px,#fff 6px 12px)}
.cs--img .cs-btn{justify-content:flex-start}
.cs--img .cs-btn .cs-val{flex:1}
.cs--img .cs-opt{justify-content:flex-start;gap:12px;padding:8px 10px}
.cs--img .cs-opt .cs-t{flex:1;min-width:0}
.cs--img .cs-list{max-height:340px}
/* design cards: the picture is only a preview; a click opens the real site (if it has a link) */
.tcard-media--static{cursor:default}
.lang-ar .hero h1{font-size:clamp(1.85rem,6.4vw,3.5rem);line-height:1.5}
.lang-ar .phero h1{font-size:clamp(1.7rem,5.4vw,2.9rem)}
.lang-ar .sec-head h2{font-size:clamp(1.5rem,4.6vw,2.45rem)}
.lang-ar .plan-price strong,.lang-ar .stat b{font-family:"DM Sans",system-ui,sans-serif}

/* ---------- 4.4: text animation + polish ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .02em .3em;margin:-.14em -.02em -.3em}
.w>span{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .7s var(--ease),opacity .4s ease;transition-delay:calc(var(--wi,0) * 40ms)}
.tin .w>span{transform:none;opacity:1}
.js .tx.in-1,.js .tx.in-2{opacity:1;transform:none}
.tx .hl{background-size:0% .32em;transition:background-size 1s .55s var(--ease)}
.tx.tin .hl{background-size:100% .32em}
.dk .tx .hl{background-size:0% .3em}
.dk .tx.tin .hl{background-size:100% .3em}
/* paragraphs: soft blur-in */
/* reading progress */
.sprog{position:fixed;z-index:120;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--teal-2),var(--blue));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
[dir=rtl] .sprog{transform-origin:100% 50%}
/* buttons: light sweep */
.btn-primary,.btn-dark{overflow:hidden}
.btn-primary::before,.btn-dark::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-primary:hover::before,.btn-dark:hover::before{transform:translateX(120%)}
/* eyebrow + chips drift in */
/* cards: border glow on hover */
.card,.tcard,.acc-i{position:relative}
@media (hover:hover){
  .tcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(34,195,189,0);transition:box-shadow .4s}
  .tcard:hover::after{box-shadow:0 0 0 2px rgba(34,195,189,.45)}
}
/* WhatsApp bubble label */
.wa-label{transform-origin:100% 50%;animation:walabel .5s var(--spring) both}
@keyframes walabel{from{opacity:0;transform:translateX(10px) scale(.9)}}
@media (max-width:759px){
  .wa-label{display:block;max-width:0;padding-inline:0;opacity:0;overflow:hidden;white-space:nowrap;animation:none;transition:max-width .5s var(--ease),padding .4s,opacity .3s}
  .wa.say .wa-label{max-width:200px;padding-inline:14px;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .w>span{transform:none!important;opacity:1!important;transition:none}
  .sprog{display:none}
}

/* ---------- 4.5: light mode for phones and touch screens (smooth scrolling first) ---------- */
@media (hover:none),(max-width:899px){
  /* no live blur: it is the most expensive thing a phone can draw while scrolling */
  .hdr,.eyebrow,.fcard,.mega,.modal{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr{background:rgba(252,251,247,.97)}
  .blob{display:none}
  /* decoration stays still */
  .dot,.art-orb::before,.art-orb::after,.art-orb img,.art-ring,.art::before,.fcard,.fbar i,.mv-screen,.founder-ring{animation:none!important}
  /* short, simple reveals that start before the block is on screen */
  .js .rv{transform:translateY(14px)}
  .js .rv.in{transition:opacity .35s ease,transform .4s ease;transition-delay:0s}
  .js .in-1,.js .in-2,.js .in-3,.js .in-4{transform:translateY(12px)}
  .is-ready .in-1,.is-ready .in-2,.is-ready .in-3,.is-ready .in-4{transition:opacity .35s ease,transform .4s ease;transition-delay:0s}
  .hl{transition-duration:.5s;transition-delay:.1s}
  .tcard,.card,.plan{transition:none}
  .tscreen img,.tphone img{transition:none}
  .btn-primary::before,.btn-dark::before{display:none}
  .sprog{display:none}
  .js .plan.rv{opacity:1;transform:none}
  .tcard-cta{display:none}
}
.tscreen picture,.tphone picture{display:block;width:100%;height:100%}