/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none}
input{font-family:inherit;outline:none;border:none}

/* ═══════════════════════════════════════════════
   DARK THEME (default)
═══════════════════════════════════════════════ */
:root,[data-theme="dark"]{
  --bg:          #091712;
  --bg-nav:      rgba(9,23,18,.92);
  --bg-card:     rgba(255,255,255,.032);
  --bg-card-h:   rgba(15,155,110,.08);
  --bg-strip:    rgba(13,32,24,.65);

  --green:       #0faa84;
  --green-hi:    #13c99d;
  --green-dk:    #097d62;
  --green-glow:  rgba(15,170,132,.24);

  --gold:        #c89a30;
  --gold-hi:     #e8bc52;

  --t1:  #dff2eb;
  --t2:  #6ea89c;
  --t3:  #2e6055;

  --b1:  rgba(15,170,132,.13);
  --b2:  rgba(15,170,132,.32);
  --bn:  rgba(255,255,255,.07);

  --topbar-bg:   linear-gradient(90deg,#097d62,#0faa84,#097d62);
  --topbar-tx:   #041009;
  --hr-color:    rgba(15,170,132,.12);

  /* BG radials */
  --rad1: rgba(10,130,100,.28);
  --rad2: rgba(10,130,100,.16);
}

/* ═══════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════ */
[data-theme="light"]{
  --bg:          #f2faf6;
  --bg-nav:      rgba(242,250,246,.94);
  --bg-card:     rgba(255,255,255,.85);
  --bg-card-h:   rgba(15,155,110,.07);
  --bg-strip:    rgba(220,245,235,.7);

  --green:       #0a8f6a;
  --green-hi:    #0db889;
  --green-dk:    #077a59;
  --green-glow:  rgba(13,184,137,.18);

  --gold:        #b07820;
  --gold-hi:     #d4962e;

  --t1:  #0d2820;
  --t2:  #2d7060;
  --t3:  #6aaa98;

  --b1:  rgba(10,143,106,.18);
  --b2:  rgba(10,143,106,.4);
  --bn:  rgba(10,143,106,.12);

  --topbar-bg:   linear-gradient(90deg,#077a59,#0db889,#077a59);
  --topbar-tx:   #041009;
  --hr-color:    rgba(10,143,106,.15);

  --rad1: rgba(10,143,106,.12);
  --rad2: rgba(10,143,106,.08);
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
html[data-lang="ar"]  body { font-family:'Noto Kufi Arabic',sans-serif }
html[data-lang="en"]  body { font-family:'Inter',sans-serif; font-size:14px }

body{
  background:var(--bg);
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
  font-size:15px;
  line-height:1.65;
  transition:background .35s ease, color .35s ease;
}

/* Arabic vs English visibility */
.ar { display:block }
.en { display:none  }
html[data-lang="en"] .ar { display:none  }
html[data-lang="en"] .en { display:block }
html[data-lang="en"] .ar-inline { display:none }
html[data-lang="en"] .en-inline { display:inline }
.en-inline { display:none }
.ar-inline { display:inline }

/* RTL/LTR switch */
html[data-lang="en"] { direction:ltr }
html[data-lang="ar"] { direction:rtl }

.ms{
  font-family:'Material Symbols Rounded';
  font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24;
  line-height:1;vertical-align:middle;display:inline-block;user-select:none;
}

/* ═══════════════════════════════════════════════
   BACKGROUND
═══════════════════════════════════════════════ */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;transition:.35s}
.bg-layer::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 65% 50% at 90% -8%, var(--rad1) 0%,transparent 58%),
    radial-gradient(ellipse 45% 40% at -5% 92%, var(--rad2) 0%,transparent 52%);
  transition:.35s;
}
.bg-layer::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(15,170,132,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,170,132,.03) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 100% 65% at 50% 0,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 100% 65% at 50% 0,black,transparent);
}
[data-theme="light"] .bg-layer::after{
  background-image:
    linear-gradient(rgba(10,143,106,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,143,106,.04) 1px,transparent 1px);
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar{
  position:relative;z-index:100;
  background:var(--topbar-bg);background-size:200%;
  animation:topAnim 6s linear infinite;
  padding:9px 20px;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--topbar-tx);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.topbar .ms{font-size:14px}
@keyframes topAnim{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ═══════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:90;height:66px;
  background:var(--bg-nav);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid var(--b1);
  padding:0 48px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:background .35s;
}
.n-logo{display:flex;align-items:center;gap:12px}
.n-logo-box{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#09674f,#0faa84);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 16px var(--green-glow);flex-shrink:0}
.n-logo-box img{width:100%;height:100%;object-fit:contain;border-radius:11px}
.n-ar{font-size:15.5px;font-weight:800;background:linear-gradient(130deg,var(--t1) 30%,var(--green-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.n-en{font-size:9.5px;color:var(--t3);font-family:'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.n-links{display:flex;align-items:center;gap:32px;list-style:none}
.n-links a{font-size:13.5px;font-weight:500;color:var(--t2);transition:color .18s;white-space:nowrap}
.n-links a:hover{color:var(--green-hi)}

/* Nav controls */
.n-controls{display:flex;align-items:center;gap:8px}

/* Language toggle */
.lang-toggle{
  display:flex;align-items:center;
  background:var(--bg-card);border:1px solid var(--bn);
  border-radius:10px;overflow:hidden;height:36px;
}
.lang-btn{
  padding:0 12px;height:100%;font-size:12px;font-weight:700;
  color:var(--t2);transition:all .2s;letter-spacing:.3px;
  font-family:'Inter',sans-serif;
}
.lang-btn.active{
  background:linear-gradient(135deg,var(--green-dk),var(--green));
  color:#fff;
}

/* Theme toggle */
.theme-toggle{
  width:36px;height:36px;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--bn);
  display:grid;place-items:center;
  color:var(--t2);font-size:18px;
  transition:all .2s var(--ease);
}
.theme-toggle:hover{background:var(--bg-card-h);border-color:var(--b1);color:var(--green-hi)}

/* CTA */
.n-cta{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--green-dk),var(--green));color:#041009;font-size:13px;font-weight:700;padding:9px 20px;border-radius:10px;box-shadow:0 4px 14px var(--green-glow);transition:all .22s;white-space:nowrap}
.n-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--green-glow)}
.n-cta .ms{font-size:15px}
.n-mob{display:none;width:36px;height:36px;border-radius:9px;background:var(--bg-card);border:1px solid var(--bn);place-items:center;color:var(--t1);font-size:20px}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto;
  padding:84px 48px 68px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;
}
.hero-lhs{display:flex;flex-direction:column;gap:22px}

.hero-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(15,170,132,.09);border:1px solid rgba(15,170,132,.22);
  border-radius:100px;padding:6px 16px;
  font-size:12px;font-weight:600;color:var(--green-hi);width:fit-content;
  animation:fadeUp .5s ease both;
}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--green-hi);animation:blink 1.4s ease-in-out infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.18;transform:scale(.45)}}

.hero-h{font-size:clamp(2rem,3.8vw,3.3rem);font-weight:900;line-height:1.22;animation:fadeUp .55s ease .07s both}
.hero-h .sub{display:block;font-size:clamp(.88rem,1.5vw,1.05rem);font-weight:400;color:var(--t2);margin-bottom:10px}
.hero-h .main{display:block;background:linear-gradient(130deg,var(--t1) 10%,#a8e8d5 45%,var(--gold-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-desc{font-size:clamp(.88rem,1.5vw,.98rem);font-weight:400;color:var(--t2);line-height:1.95;max-width:490px;animation:fadeUp .55s ease .15s both}
.hero-desc strong{color:var(--green-hi);font-weight:700}

/* Chips */
.cchips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;animation:fadeUp .55s ease .22s both}
.cchip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--bn);border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--t2)}
.cchip .ms{font-size:13px;color:var(--green)}
.flag-sm{display:inline-block;width:22px;height:15px;border-radius:3px;overflow:hidden;vertical-align:middle;box-shadow:0 1px 5px rgba(0,0,0,.4);flex-shrink:0}

/* Buttons */
.hero-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:fadeUp .55s ease .28s both}
.btn-p{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--green-dk),var(--green));color:#041009;font-size:13.5px;font-weight:800;padding:13px 26px;border-radius:16px;box-shadow:0 5px 18px var(--green-glow);transition:all .22s ease}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 9px 26px var(--green-glow)}
.btn-p .ms{font-size:17px}
.btn-s{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--bn);color:var(--t1);font-size:13.5px;font-weight:600;padding:13px 22px;border-radius:16px;transition:all .22s ease}
.btn-s:hover{background:var(--bg-card-h);border-color:var(--b1)}
.btn-s .ms{font-size:17px}

/* RHS */
.hero-rhs{display:flex;flex-direction:column;gap:14px;animation:fadeUp .6s ease .1s both}

/* Countdown — no layout shift */
.cd-card{
  background:var(--bg-card);border:1px solid var(--b1);
  border-radius:28px;padding:26px 22px;backdrop-filter:blur(14px);
  display:flex;flex-direction:column;gap:14px;align-items:center;
  position:relative;overflow:hidden;
  transition:background .35s,border-color .35s;
}
.cd-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,170,132,.05),transparent);pointer-events:none}
.cd-eye{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:6px}
.cd-eye .ms{font-size:13px}
.cd-row{display:flex;align-items:center;gap:8px;height:88px}
.cd-unit{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(15,170,132,.08);border:1px solid var(--b1);
  border-radius:16px;width:74px;height:80px;flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.cd-unit:hover{background:rgba(15,170,132,.16);border-color:var(--b2)}
.cd-n{
  font-family:'Inter',sans-serif;font-size:1.9rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--t1),var(--green-hi));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  width:56px;text-align:center;display:block;
}
.cd-l{font-size:9.5px;color:var(--t3);font-weight:600;letter-spacing:.4px}
.cd-col{font-size:1.6rem;font-weight:900;color:var(--green);opacity:.35;width:14px;text-align:center;flex-shrink:0;animation:colonPulse 1s ease-in-out infinite}
@keyframes colonPulse{0%,100%{opacity:.35}50%{opacity:.7}}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-mini{background:var(--bg-card);border:1px solid var(--bn);border-radius:22px;padding:15px;display:flex;flex-direction:column;gap:6px;transition:.2s ease}
.stat-mini:hover{background:var(--bg-card-h);border-color:var(--b1)}
.stat-ico{width:30px;height:30px;border-radius:8px;background:rgba(15,170,132,.1);display:grid;place-items:center;font-size:16px;color:var(--green)}
.stat-v{font-family:'Inter',sans-serif;font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,var(--t1),var(--green-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stat-l{font-size:11px;color:var(--t3);font-weight:500}

/* ═══════════════════════════════════════════════
   METRICS
═══════════════════════════════════════════════ */
.metrics{position:relative;z-index:1;background:var(--bg-strip);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);backdrop-filter:blur(10px);padding:32px 48px;transition:background .35s}
.metrics-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.metric{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px 12px;border-left:1px solid var(--b1)}
html[data-lang="en"] .metric{border-left:none;border-right:1px solid var(--b1)}
.metric:first-child{border-left:none}
html[data-lang="en"] .metric:first-child{border-right:none}
.metric-ico{width:44px;height:44px;border-radius:12px;background:rgba(15,170,132,.1);border:1px solid var(--b1);display:grid;place-items:center;font-size:21px;color:var(--green);margin-bottom:4px}
.metric-v{font-family:'Inter',sans-serif;font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,var(--t1),var(--green-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.metric-l{font-size:12px;color:var(--t2);font-weight:500}

/* ═══════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════ */
.section{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:68px 48px}
.sec-hd{display:flex;flex-direction:column;gap:10px;margin-bottom:38px}
.sec-hd.c{align-items:center;text-align:center}
.sec-eye{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-family:'Inter',sans-serif}
.sec-eye .ms{font-size:13px}
.sec-ttl{font-size:clamp(1.55rem,2.7vw,2.15rem);font-weight:800;line-height:1.3}
.sec-ttl em{font-style:normal;background:linear-gradient(135deg,var(--green-hi),#7aeed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-sub{font-size:14px;color:var(--t2);line-height:1.85;max-width:500px}
.hr{position:relative;z-index:1;height:1px;background:linear-gradient(90deg,transparent,var(--hr-color) 30%,var(--hr-color) 70%,transparent);margin:0 48px}

/* ═══════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.svc-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:22px;padding:26px 18px 20px;display:flex;flex-direction:column;gap:13px;transition:all .28s ease;position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green-hi),transparent);opacity:0;transition:.28s}
.svc-card:hover{background:var(--bg-card-h);border-color:var(--b2);transform:translateY(-5px);box-shadow:0 14px 34px var(--green-glow)}
.svc-card:hover::after{opacity:1}
.svc-ico{width:48px;height:48px;border-radius:13px;background:rgba(15,170,132,.09);border:1px solid var(--b1);display:grid;place-items:center;font-size:23px;color:var(--green);transition:.22s}
.svc-card:hover .svc-ico{background:rgba(15,170,132,.18);border-color:var(--b2)}
.svc-name{font-size:14px;font-weight:700;color:var(--t1)}
.svc-desc{font-size:12.5px;color:var(--t3);line-height:1.78}

/* ═══════════════════════════════════════════════
   PARTNERSHIP
═══════════════════════════════════════════════ */
.pship{background:var(--bg-card);border:1px solid var(--b1);border-radius:28px;overflow:hidden}
.pship-grid{display:grid;grid-template-columns:1fr 1fr}
.pship-cell{padding:42px 34px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.pship-cell+.pship-cell{border-right:1px solid var(--b1)}
html[data-lang="en"] .pship-cell+.pship-cell{border-right:none;border-left:1px solid var(--b1)}
.pship-cell::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,170,132,.04),transparent);pointer-events:none}
.pship-eye{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;font-family:'Inter',sans-serif}
.pship-eye .ms{font-size:15px;color:var(--gold)}
.pship-ttl{font-size:1.2rem;font-weight:800;line-height:1.4}
.pship-ttl strong{background:linear-gradient(135deg,var(--green-hi),#7aeed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900}
.pship-body{font-size:13.5px;color:var(--t2);line-height:1.9}
.pship-body strong{color:var(--green-hi);font-weight:700}
.fchips{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fchip{display:flex;align-items:center;gap:7px;background:var(--bg-card);border:1px solid var(--bn);border-radius:100px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--t2)}
.bignum{font-family:'Inter',sans-serif;font-size:3rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--green-hi),var(--gold-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bignum-l{font-size:13px;color:var(--t2);font-weight:500;margin-top:4px}

/* ═══════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.feat-card{background:var(--bg-card);border:1px solid var(--bn);border-radius:22px;padding:22px 18px;display:flex;flex-direction:column;gap:12px;transition:.22s ease}
.feat-card:hover{background:var(--bg-card-h);border-color:var(--b1);transform:translateY(-3px)}
.feat-ico{width:40px;height:40px;border-radius:11px;background:rgba(15,170,132,.09);border:1px solid var(--b1);display:grid;place-items:center;font-size:20px;color:var(--green)}
.feat-ttl{font-size:14px;font-weight:700;color:var(--t1)}
.feat-desc{font-size:12.5px;color:var(--t3);line-height:1.78}

/* ═══════════════════════════════════════════════
   APP SECTION
═══════════════════════════════════════════════ */
.app-sec{position:relative;z-index:1;background:var(--bg-strip);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);padding:68px 48px;transition:background .35s}
.app-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.app-lhs{display:flex;flex-direction:column;gap:20px}
.app-eye{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;font-family:'Inter',sans-serif}
.app-eye .ms{font-size:13px}
.app-ttl{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:800;line-height:1.35}
.app-ttl em{font-style:normal;color:var(--green-hi)}
.app-desc{font-size:13.5px;color:var(--t2);line-height:1.9;max-width:400px}
.app-note{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px}
.app-note .ms{font-size:14px;color:var(--green)}

.badges{display:flex;flex-direction:column;gap:10px;max-width:280px}
.badge{display:flex;align-items:center;gap:13px;background:var(--bg-card);border:1px solid var(--bn);border-radius:16px;padding:12px 17px;transition:all .22s ease;color:inherit}
.badge:hover{background:var(--bg-card-h);border-color:var(--b2);transform:translateX(-4px);box-shadow:0 7px 20px var(--green-glow)}
html[data-lang="en"] .badge:hover{transform:translateX(4px)}
.badge-ico{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center}
.badge-txt{display:flex;flex-direction:column;gap:1px}
.badge-sub{font-size:9.5px;color:var(--t3);font-family:'Inter',sans-serif;letter-spacing:.3px;font-weight:500}
.badge-name{font-size:14.5px;font-weight:700;color:var(--t1)}

.app-rhs{display:flex;flex-direction:column;gap:13px}
.app-cs{background:var(--bg-card);border:1px solid var(--b1);border-radius:28px;padding:30px 26px;display:flex;flex-direction:column;gap:15px;position:relative;overflow:hidden}
.app-cs::before{content:'';position:absolute;top:-65px;right:-65px;width:190px;height:190px;background:radial-gradient(circle,rgba(15,170,132,.12),transparent 65%);border-radius:50%;pointer-events:none}
.app-cs-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(15,170,132,.1);border:1px solid var(--b1);border-radius:100px;padding:5px 12px;font-size:11px;font-weight:700;color:var(--green-hi);width:fit-content}
.app-cs-badge .ms{font-size:12px}
.app-cs-ttl{font-size:1.05rem;font-weight:800;line-height:1.45}
.app-cs-ttl span{color:var(--green-hi);font-weight:900}
.app-cs-body{font-size:12.5px;color:var(--t3);line-height:1.82}
.plat-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.plat{display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--bn);border-radius:100px;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--t2)}
.plat svg{width:12px;height:12px;flex-shrink:0}

/* ═══════════════════════════════════════════════
   NOTIFY
═══════════════════════════════════════════════ */
.notify-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:68px 48px}
.notify-card{background:var(--bg-card);border:1px solid var(--b1);border-radius:28px;padding:54px 48px;text-align:center;position:relative;overflow:hidden;transition:background .35s}
.notify-card::before{content:'';position:absolute;top:-85px;right:-85px;width:260px;height:260px;background:radial-gradient(circle,rgba(200,154,48,.08),transparent 65%);border-radius:50%;pointer-events:none}
.notify-card::after{content:'';position:absolute;bottom:-65px;left:-65px;width:230px;height:230px;background:radial-gradient(circle,rgba(15,170,132,.08),transparent 65%);border-radius:50%;pointer-events:none}
.notify-eye{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;font-family:'Inter',sans-serif;margin-bottom:14px}
.notify-eye .ms{font-size:13px}
.notify-h{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:900;margin-bottom:9px;position:relative;z-index:1}
.notify-sub{font-size:13.5px;color:var(--t2);margin-bottom:26px;position:relative;z-index:1}
.notify-form{display:flex;gap:10px;justify-content:center;max-width:490px;margin:0 auto;position:relative;z-index:1;flex-wrap:wrap}
.notify-input{flex:1;min-width:195px;background:rgba(255,255,255,.07);border:1.5px solid rgba(15,170,132,.2);border-radius:16px;padding:13px 17px;color:var(--t1);font-size:13.5px;transition:.22s}
[data-theme="light"] .notify-input{background:rgba(255,255,255,.6)}
.notify-input::placeholder{color:var(--t3)}
.notify-input:focus{border-color:var(--green-hi);background:rgba(15,170,132,.08);box-shadow:0 0 0 3px rgba(15,170,132,.1)}
.notify-btn{background:linear-gradient(135deg,var(--green-dk),var(--green));color:#041009;font-size:13.5px;font-weight:800;padding:13px 24px;border-radius:16px;display:flex;align-items:center;gap:7px;box-shadow:0 5px 16px var(--green-glow);transition:all .22s ease;white-space:nowrap}
.notify-btn:hover{transform:translateY(-2px);box-shadow:0 9px 24px var(--green-glow)}
.notify-btn .ms{font-size:17px}
.notify-ok{display:none;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--green-hi);margin-top:20px;position:relative;z-index:1}
.notify-ok .ms{font-size:20px}
.notify-note{font-size:11.5px;color:var(--t3);margin-top:13px;display:flex;align-items:center;justify-content:center;gap:5px;position:relative;z-index:1}
.notify-note .ms{font-size:13px;color:var(--green)}

/* ═══════════════════════════════════════════════
   COMPLY
═══════════════════════════════════════════════ */
.comply{position:relative;z-index:1;background:var(--bg-strip);border-top:1px solid var(--b1);padding:20px 48px;transition:background .35s}
.comply-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.ci{display:flex;align-items:center;gap:7px;padding:8px 20px;border-left:1px solid var(--hr-color);font-size:12px;color:var(--t3);font-weight:600}
html[data-lang="en"] .ci{border-left:none;border-right:1px solid var(--hr-color)}
.ci:first-child{border-left:none}
html[data-lang="en"] .ci:first-child{border-right:none}
.ci .ms{font-size:15px;color:var(--green)}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer{position:relative;z-index:1;background:var(--bg-strip);border-top:1px solid var(--b1);padding:54px 48px 30px;transition:background .35s}
.ft-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.ft-brand{display:flex;flex-direction:column;gap:17px}
.ft-logo{display:flex;align-items:center;gap:11px}
.ft-logo-box{width:37px;height:37px;border-radius:10px;background:linear-gradient(145deg,#09674f,#0faa84);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 14px var(--green-glow);flex-shrink:0}
.ft-logo-box img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.ft-brand-name{font-size:16px;font-weight:800;background:linear-gradient(135deg,var(--t1),var(--green-hi));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ft-brand-en-lbl{font-size:9px;color:var(--t3);font-family:'Inter',sans-serif;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.ft-tag{font-size:13px;color:var(--t2);line-height:1.75;max-width:260px}
.ft-social{display:flex;gap:8px}
.soc{width:34px;height:34px;border-radius:9px;background:var(--bg-card);border:1px solid var(--bn);display:grid;place-items:center;color:var(--t2);font-size:16px;transition:.2s ease;text-decoration:none}
.soc:hover{background:var(--bg-card-h);border-color:var(--b1);color:var(--green-hi);transform:translateY(-2px)}
.ft-col{display:flex;flex-direction:column;gap:11px}
.ft-col-h{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:2px}
.ft-col a{font-size:12.5px;color:var(--t3);transition:color .16s}
.ft-col a:hover{color:var(--green-hi)}
.ft-bottom{max-width:1080px;margin:30px auto 0;padding-top:18px;border-top:1px solid var(--hr-color);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:11.5px;color:var(--t3)}
.ft-links{display:flex;gap:22px}
.ft-links a{font-size:11.5px;color:var(--t3);transition:color .16s}
.ft-links a:hover{color:var(--green-hi)}

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════
   TABLET
═══════════════════════════════════════════════ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding:56px 24px 44px}
  .hero-lhs{align-items:center}
  .hero-desc,.app-desc{text-align:center}
  .hero-btns,.cchips{justify-content:center}
  .metrics-in{grid-template-columns:repeat(2,1fr)}
  .metric{border:none;border-bottom:1px solid var(--b1)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .pship-grid{grid-template-columns:1fr}
  .pship-cell+.pship-cell{border-right:none;border-left:none;border-top:1px solid var(--b1)}
  .app-in{grid-template-columns:1fr;text-align:center}
  .app-lhs{align-items:center}
  .badges{margin:0 auto}
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px}
  .navbar,.metrics,.app-sec,.section,.notify-wrap,.comply,.footer{padding-left:24px;padding-right:24px}
  .hr{margin:0 24px}
  .n-links{display:none}
  .n-mob{display:grid}
}

/* ═══════════════════════════════════════════════
   MOBILE — Premium App Experience
═══════════════════════════════════════════════ */
@media(max-width:600px){

  /* ── Root overrides ── */
  body { font-size:14px; padding-bottom:80px }

  /* ── Topbar ── */
  .topbar { font-size:11px; padding:7px 12px; gap:5px }
  .topbar .ms { font-size:12px }

  /* ── Navbar ── */
  .navbar {
    height:58px; padding:0 16px;
    border-bottom:1px solid var(--b1);
  }
  .n-logo-box { width:36px; height:36px; border-radius:10px }
  .n-ar,.n-en { font-size:14px }
  .n-controls { gap:6px }
  .lang-toggle { height:32px }
  .lang-btn { padding:0 9px; font-size:11px }
  .theme-toggle { width:32px; height:32px; font-size:16px }
  .n-cta { display:none }
  .n-mob { display:grid }

  /* ── Hero ── */
  .hero {
    padding:32px 20px 36px;
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
  .hero-lhs { align-items:center; gap:18px }
  .hero-pill { font-size:11.5px; padding:5px 14px }
  .hero-h { font-size:clamp(1.85rem,8vw,2.4rem) }
  .hero-h .sub { font-size:.88rem; margin-bottom:8px }
  .hero-h .main { font-size:clamp(1.85rem,8vw,2.4rem) }
  .hero-desc { font-size:.88rem; max-width:100%; text-align:center }
  .cchips { gap:8px }
  .cchip { font-size:11px; padding:5px 11px; gap:6px }

  /* Hero buttons — full width stacked */
  .hero-btns {
    flex-direction:column; width:100%; gap:10px;
  }
  .btn-p, .btn-s {
    width:100%; justify-content:center;
    padding:15px 20px; font-size:14px; border-radius:14px;
  }

  /* ── Countdown card — compact horizontal ── */
  .hero-rhs { gap:12px }
  .cd-card {
    padding:20px 16px; border-radius:22px;
    width:100%;
  }
  .cd-eye { font-size:10px }
  .cd-row { gap:5px; height:72px }
  .cd-unit { width:58px; height:64px; border-radius:12px }
  .cd-n { font-size:1.5rem; width:44px }
  .cd-l { font-size:9px }
  .cd-col { font-size:1.4rem; width:10px }

  /* Stat grid 2×2 */
  .stat-grid { gap:8px }
  .stat-mini { padding:13px; border-radius:16px }
  .stat-v { font-size:1.2rem }
  .stat-l { font-size:10.5px }

  /* ── Metrics strip — 2×2 ── */
  .metrics { padding:20px 16px }
  .metrics-in { grid-template-columns:1fr 1fr; gap:0 }
  .metric { padding:14px 10px; border:none; border-bottom:1px solid var(--b1) }
  .metric:nth-child(odd) { border-left:1px solid var(--b1) }
  html[data-lang="en"] .metric:nth-child(odd) { border-left:none; border-right:1px solid var(--b1) }
  .metric-ico { width:38px; height:38px; font-size:18px; border-radius:10px }
  .metric-v { font-size:1.45rem }
  .metric-l { font-size:11px }

  /* ── Sections ── */
  .section { padding:44px 16px }
  .hr { margin:0 16px }
  .sec-ttl { font-size:1.45rem }
  .sec-sub { font-size:13px }

  /* ── Services — horizontal scroll ── */
  .svc-grid {
    display:flex !important;
    overflow-x:auto;
    gap:12px;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    grid-template-columns:unset !important;
    /* extend past padding */
    margin:0 -16px;
    padding-left:16px;
    padding-right:16px;
  }
  .svc-grid::-webkit-scrollbar { display:none }
  .svc-card {
    min-width:200px; max-width:200px;
    scroll-snap-align:start;
    flex-shrink:0;
    padding:22px 16px 18px;
    border-radius:20px;
  }

  /* Scroll hint indicator */
  .svc-scroll-hint {
    display:flex !important;
    align-items:center; justify-content:center;
    gap:6px; margin-top:6px;
    font-size:11px; color:var(--t3);
  }
  .scroll-dots { display:flex; gap:4px }
  .scroll-dot {
    width:5px; height:5px; border-radius:50%;
    background:var(--b1); transition:.3s;
  }
  .scroll-dot.active { background:var(--green); width:14px; border-radius:3px }

  /* ── Features — single column ── */
  .feat-grid { grid-template-columns:1fr; gap:10px }
  .feat-card { padding:18px; flex-direction:row; gap:14px; align-items:flex-start }
  .feat-ico { flex-shrink:0; width:38px; height:38px; font-size:19px }
  .feat-ttl { font-size:13.5px }
  .feat-desc { font-size:12px }

  /* ── Partnership ── */
  .pship { border-radius:22px }
  .pship-cell { padding:28px 20px }
  .pship-ttl { font-size:1.05rem }
  .pship-body { font-size:13px }
  .bignum { font-size:2.4rem }

  /* ── App section ── */
  .app-sec { padding:44px 16px }
  .app-in { gap:32px }
  .app-ttl { font-size:1.45rem }
  .app-desc { font-size:13px; max-width:100% }
  .badges { max-width:100% }
  .badge { padding:14px 16px }
  .badge-name { font-size:14px }
  .app-cs { padding:24px 18px; border-radius:22px }

  /* ── Notify ── */
  .notify-wrap { padding:44px 16px }
  .notify-card { padding:32px 18px; border-radius:22px }
  .notify-h { font-size:1.3rem }
  .notify-sub { font-size:13px }
  .notify-form { flex-direction:column; gap:10px }
  .notify-input { width:100%; min-width:unset; padding:14px 16px }
  .notify-btn { width:100%; justify-content:center; padding:14px 20px }

  /* ── Comply ── */
  .comply { padding:16px }
  .comply-in { gap:0; flex-wrap:wrap }
  .ci {
    padding:8px 12px; font-size:11px;
    border-left:none !important; border-right:none !important;
    flex:1 1 45%;
    justify-content:center;
  }

  /* ── Footer ── */
  .footer { padding:36px 16px 24px }
  .ft-grid { grid-template-columns:1fr; gap:28px }
  .ft-bottom { flex-direction:column; align-items:center; text-align:center; gap:12px }
  .ft-links { flex-wrap:wrap; justify-content:center; gap:16px }

  /* ── Modal ── */
  .modal-overlay { padding:0; align-items:flex-end }
  .modal-box {
    border-radius:26px 26px 0 0 !important;
    max-height:90vh;
    overflow-y:auto;
    animation:modalSlideUp .3s ease !important;
    margin:0;
  }
  @keyframes modalSlideUp {
    from { transform:translateY(100%) }
    to   { transform:translateY(0) }
  }
  .modal-hd {
    position:sticky; top:0; z-index:2;
    padding:20px 18px 16px;
  }
  /* Drag handle bar */
  .modal-box::before {
    content:'';
    display:block;
    width:40px; height:4px;
    background:var(--bn);
    border-radius:2px;
    margin:14px auto 0;
  }
  .modal-body { padding:16px 18px 32px; gap:20px }
  .modal-title { font-size:1rem }
  .legal-grid,.rights-grid { grid-template-columns:1fr }
  .legal-list li { font-size:12.5px }
  .pship-eye,.sec-eye,.legal-tag { font-size:10px }

  /* ── Bottom Navigation Bar ── */
  .mob-nav {
    display:flex !important;
  }
}

/* ── Bottom Nav Bar (mobile only) ── */
.mob-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:200;
  background:var(--bg-nav);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid var(--b1);
  padding:0 6px env(safe-area-inset-bottom,8px);
  height:66px;
  align-items:center;
  justify-content:space-around;
  transition:background .35s;
}
.mob-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  flex:1; padding:8px 4px;
  color:var(--t3); text-decoration:none;
  transition:color .18s; border:none; background:none;
  cursor:pointer; font-family:inherit;
}
.mob-nav-item.active,
.mob-nav-item:active { color:var(--green-hi) }
.mob-nav-item .ms { font-size:22px; transition:transform .2s }
.mob-nav-item:active .ms { transform:scale(.88) }
.mob-nav-item span:not(.ms) { font-size:9.5px; font-weight:700; letter-spacing:.3px }
/* Notify CTA in bottom nav */
.mob-nav-cta {
  background:linear-gradient(135deg,var(--green-dk),var(--green));
  border-radius:14px;
  padding:9px 10px !important;
  color:#041009 !important;
  margin:0 4px;
}
.mob-nav-cta .ms { font-size:20px !important }


/* ═══════════════════════════════════════
   MODAL STYLES
═══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex}

.modal-box{
  background:var(--bg);
  border:1px solid var(--b1);
  border-radius:28px;
  width:100%;max-width:780px;
  margin:auto;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:modalIn .3s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.modal-hd{
  display:flex;align-items:flex-start;gap:16px;
  padding:28px 28px 20px;
  border-bottom:1px solid var(--b1);
  background:var(--bg-strip);
  position:sticky;top:0;z-index:1;
}
.modal-icon{
  width:46px;height:46px;border-radius:14px;
  background:rgba(15,170,132,.12);border:1px solid var(--b1);
  display:grid;place-items:center;font-size:24px;color:var(--green);flex-shrink:0;
}
.modal-title{font-size:1.15rem;font-weight:800;color:var(--t1);line-height:1.3}
.modal-sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.modal-close{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid var(--bn);
  display:grid;place-items:center;color:var(--t2);font-size:20px;
  transition:.2s;cursor:pointer;
  margin-inline-start:auto;
  position:relative;z-index:10;
}
.modal-close:hover{background:rgba(220,60,60,.15);border-color:rgba(220,60,60,.3);color:#f87878}

.modal-body{padding:24px 28px 32px;display:flex;flex-direction:column;gap:24px}

.legal-section{display:flex;flex-direction:column;gap:14px}
.legal-tag{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);font-family:'Inter',sans-serif;
  padding-bottom:10px;border-bottom:1px solid var(--b1);
}
.legal-tag .ms{font-size:15px}
.legal-section p{font-size:13.5px;color:var(--t2);line-height:1.85}

.legal-list{
  display:flex;flex-direction:column;gap:10px;
  padding-right:0;list-style:none;
}
.legal-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--t2);line-height:1.8;
}
.legal-list.plain li{padding-right:12px;border-right:2px solid var(--b1)}
html[data-lang="en"] .legal-list.plain li{padding-right:0;padding-left:12px;border-right:none;border-left:2px solid var(--b1)}
.legal-list.plain li::before{display:none}

.tag-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(15,170,132,.1);border:1px solid var(--b1);
  border-radius:6px;padding:2px 8px;
  font-size:10px;font-weight:800;color:var(--green-hi);
  white-space:nowrap;flex-shrink:0;font-family:'Inter',sans-serif;
  letter-spacing:.5px;
}
.tag-badge.tag-sa{background:rgba(0,108,53,.15);border-color:rgba(0,108,53,.3);color:#4eca80}
.tag-badge.tag-sy{background:rgba(0,122,61,.15);border-color:rgba(0,122,61,.3);color:#4ee890}

.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.legal-card{
  background:rgba(15,170,132,.05);border:1px solid var(--b1);
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;
}
.lcard-title{font-size:13px;font-weight:700;color:var(--t1)}
.lcard-body{font-size:12px;color:var(--t3);line-height:1.75}

.rights-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.right-item{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.025);border:1px solid var(--bn);
  border-radius:14px;padding:14px;
}
.right-item>.ms{font-size:20px;color:var(--green);flex-shrink:0;margin-top:2px}
.right-item b{display:block;font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:4px}
.right-item p{font-size:12px;color:var(--t3);line-height:1.7}

.legal-contact{
  display:flex;align-items:center;gap:8px;
  background:rgba(15,170,132,.07);border:1px solid var(--b1);
  border-radius:12px;padding:12px 16px;
  font-size:13px;color:var(--t2);margin-top:4px;
}
.legal-contact .ms{font-size:17px;color:var(--green)}
.legal-contact a{color:var(--green-hi);font-weight:700;transition:color .18s}
.legal-contact a:hover{color:var(--gold-hi)}

@media(max-width:600px){
  .legal-grid,.rights-grid{grid-template-columns:1fr}
  .modal-hd{padding:20px 18px 16px}
  .modal-body{padding:18px 18px 24px}
  .modal-box{border-radius:20px}
}