/* ============================================================
   XB CAR — base.css
   Design tokens, reset, typography, buttons, animations.
   Demo build by Devmenta.
   ============================================================ */

/* ---- THEME TOKENS ---------------------------------------- */
:root,
:root[data-theme="dark"]{
  --bg:#111417;
  --bg-alt:#0C0F11;
  --surface:#1B1F24;
  --surface-2:#232830;
  --surface-3:#2A3038;
  --text:#E8ECEF;
  --text-dim:#B9C1C8;
  --muted:#8A939B;
  --line:rgba(232,236,239,.09);
  --line-strong:rgba(232,236,239,.20);
  --green:#7ED321;
  --green-ink:#7ED321;        /* green used as TEXT — must pass contrast */
  --green-hover:#8FE22F;
  --green-soft:rgba(126,211,33,.11);
  --green-edge:rgba(126,211,33,.34);
  --on-green:#0B0E10;
  --shadow:0 18px 44px -12px rgba(0,0,0,.66);
  --shadow-sm:0 8px 22px -8px rgba(0,0,0,.5);
  --glow:0 6px 26px -6px rgba(126,211,33,.6);
  --carbon-a:rgba(255,255,255,.028);
  --carbon-b:rgba(0,0,0,.34);
  --scrim:rgba(17,20,23,.72);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F1F4F7;
  --bg-alt:#E7ECF1;
  --surface:#FFFFFF;
  --surface-2:#EAEEF2;
  --surface-3:#DCE3E9;
  --text:#111417;
  --text-dim:#39424B;
  --muted:#5C666F;
  --line:rgba(17,20,23,.11);
  --line-strong:rgba(17,20,23,.22);
  --green:#7ED321;            /* brand fill stays the logo green */
  --green-ink:#417A0C;        /* darker green for text on light surfaces */
  --green-hover:#6FBE1C;
  --green-soft:rgba(126,211,33,.16);
  --green-edge:rgba(65,122,12,.34);
  --on-green:#0B0E10;
  --shadow:0 18px 40px -14px rgba(17,20,23,.22);
  --shadow-sm:0 8px 20px -8px rgba(17,20,23,.16);
  --glow:0 6px 22px -8px rgba(126,211,33,.7);
  --carbon-a:rgba(17,20,23,.030);
  --carbon-b:rgba(17,20,23,.055);
  --scrim:rgba(255,255,255,.78);
  color-scheme:light;
}

:root{
  --radius:14px;
  --radius-lg:20px;
  --maxw:1200px;
  --gutter:20px;
  --ff-ar:'Tajawal',system-ui,-apple-system,sans-serif;
  --ff-en:'Outfit',system-ui,-apple-system,sans-serif;
  --ff:var(--ff-ar);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --hdr-h:64px;
}
html[lang="en"]{ --ff:var(--ff-en); }

/* ---- RESET ----------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 20px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img,video,svg,iframe{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ line-height:1.25; margin:0; font-weight:800; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--green-ink); outline-offset:3px; border-radius:6px; }

/* ---- LAYOUT ---------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:76px; position:relative; }
.sec-sm{ padding-block:52px; }
/* clip (not hidden) so the sideways .rv-l/.rv-r reveal transforms can't
   widen the page before they animate in — `clip` avoids making this a
   scroll container the way `hidden` would */
main{ min-height:50vh; overflow-x:clip; }

.sec-head{ margin-bottom:38px; }
.sec-head.center{ text-align:center; }
.sec-head.center .sub{ margin-inline:auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--green); flex:none; }
.sec-head.center .eyebrow::after{ content:""; width:22px; height:2px; background:var(--green); flex:none; }
h2.t{ font-size:clamp(25px,5.2vw,40px); }
.sub{ color:var(--muted); margin-top:12px; max-width:62ch; font-size:15.5px; }

/* ---- CARBON TEXTURE -------------------------------------- */
.carbon{
  background-color:var(--surface);
  background-image:
    repeating-linear-gradient(45deg,  var(--carbon-a) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, var(--carbon-b) 0 1px, transparent 1px 3px);
  background-size:5px 5px;
}
.alt-bg{ background:var(--surface); }

/* ---- ANGLED DIVIDERS ------------------------------------- */
.angle-top{ clip-path:polygon(0 2.6vw, 100% 0, 100% 100%, 0 100%); margin-top:-2.6vw; padding-top:calc(76px + 2.6vw); }
.angle-btm{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 2.6vw), 0 100%); padding-bottom:calc(76px + 2.6vw); }
html[dir="ltr"] .angle-top{ clip-path:polygon(0 0, 100% 2.6vw, 100% 100%, 0 100%); }
html[dir="ltr"] .angle-btm{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.6vw)); }

/* ---- BUTTONS --------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
  position:relative; overflow:hidden;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--green); color:var(--on-green); box-shadow:var(--glow); }
.btn-primary:hover{ background:var(--green-hover); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-ink); background:var(--green-soft); transform:translateY(-2px); }
.btn-sm{ padding:9px 17px; font-size:13px; }
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn svg{ width:16px; height:16px; flex:none; }
/* sheen sweep on hover */
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform:translateX(-160%) skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after{ animation:sheen .78s var(--ease); }
@keyframes sheen{ to{ transform:translateX(260%) skewX(-18deg); } }

/* ---- CHIPS / TAGS ---------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .22s, background .22s, color .22s, transform .18s var(--ease);
}
.chip:hover{ border-color:var(--green); color:var(--green-ink); transform:translateY(-2px); }
.chip.on{ background:var(--green); border-color:var(--green); color:var(--on-green); font-weight:700; }
.tag-demo{
  font-size:10.5px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 15px;
  border:1px solid var(--green-edge); background:var(--green-soft);
  border-radius:999px; font-size:12.5px; font-weight:700; color:var(--green-ink);
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 8px var(--green); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.28} }
.stars{ color:var(--green-ink); letter-spacing:2px; font-size:14px; }

/* ---- SOCIAL BUTTON --------------------------------------- */
.soc{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface);
  font-size:13px; font-weight:600;
  transition:border-color .22s, background .22s, transform .18s var(--ease), color .22s;
}
.soc:hover{ border-color:var(--green); color:var(--green-ink); background:var(--green-soft); transform:translateY(-2px); }
.soc svg{ width:15px; height:15px; flex:none; }
.social-row{ display:flex; gap:9px; flex-wrap:wrap; }

/* ---- SCROLL PROGRESS ------------------------------------- */
#progress{
  position:fixed; top:0; inset-inline-start:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green),var(--green-hover));
  z-index:90; transition:width .1s linear; box-shadow:0 0 12px var(--green);
}

/* ---- PAGE LOADER ----------------------------------------- */
#loader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg); transition:opacity .5s var(--ease), visibility .5s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-mark{
  width:58px; height:58px; border-radius:14px;
  background:linear-gradient(145deg,var(--green),var(--green-hover));
  color:var(--on-green); display:grid; place-items:center;
  font-family:var(--ff-en); font-weight:800; font-size:21px;
  animation:loaderPop 1.1s var(--ease) infinite alternate;
  box-shadow:0 0 34px rgba(126,211,33,.5);
}
@keyframes loaderPop{ from{ transform:scale(.86); } to{ transform:scale(1.06); } }

/* ---- REVEAL ---------------------------------------------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .68s var(--ease), transform .68s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ opacity:0; transform:translateX(-26px); transition:opacity .68s var(--ease), transform .68s var(--ease); }
.rv-l.in{ opacity:1; transform:none; }
.rv-r{ opacity:0; transform:translateX(26px); transition:opacity .68s var(--ease), transform .68s var(--ease); }
.rv-r.in{ opacity:1; transform:none; }
.rv-s{ opacity:0; transform:scale(.94); transition:opacity .6s var(--ease), transform .6s var(--ease-back); }
.rv-s.in{ opacity:1; transform:none; }
@keyframes fu{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ---- MARQUEE --------------------------------------------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--surface); padding-block:13px; position:relative; z-index:3;
}
.marquee-track{ display:flex; gap:0; width:max-content; animation:slide 34s linear infinite; }
html[dir="ltr"] .marquee-track{ animation-direction:reverse; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  display:inline-flex; align-items:center; gap:12px; padding-inline:26px;
  font-size:14px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.marquee-item i{ width:5px; height:5px; border-radius:50%; background:var(--green); flex:none; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- COUNTERS -------------------------------------------- */
.count{ font-family:var(--ff-en); font-weight:800; font-variant-numeric:tabular-nums; }

/* ---- CTA BAND -------------------------------------------- */
.cta-band{
  background:linear-gradient(135deg,var(--green),var(--green-hover));
  color:var(--on-green); text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 2px, transparent 2px 12px);
}
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band h2{ font-size:clamp(23px,4.6vw,36px); margin-bottom:10px; }
.cta-band p{ font-size:15.5px; opacity:.82; margin-bottom:24px; max-width:56ch; margin-inline:auto; }
.cta-band .btn-primary{ background:var(--on-green); color:var(--green); box-shadow:0 10px 30px -8px rgba(0,0,0,.5); }
.cta-band .btn-primary:hover{ background:#000; color:var(--green-hover); }
.cta-band .btn-ghost{ border-color:rgba(11,14,16,.4); color:var(--on-green); }
.cta-band .btn-ghost:hover{ background:rgba(11,14,16,.1); border-color:var(--on-green); color:var(--on-green); }
.cta-btns{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; }

/* ---- PAGE HERO (inner pages) ----------------------------- */
.phero{
  position:relative; padding-block:calc(var(--hdr-h) + 54px) 60px; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.phero-bg{ position:absolute; inset:0; z-index:0; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; }
.phero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--scrim), var(--bg) 96%);
}
.phero .wrap{ position:relative; z-index:2; }
.phero h1{ font-size:clamp(29px,6vw,50px); }
.phero .sub{ margin-top:12px; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--green-ink); }
.crumbs i{ opacity:.5; font-style:normal; }

/* ---- PLACEHOLDER ----------------------------------------- */
.ph{
  width:100%; aspect-ratio:9/16; display:grid; place-items:center; gap:11px;
  background:
    repeating-linear-gradient(45deg, var(--carbon-a) 0 1px, transparent 1px 3px),
    linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  color:var(--muted); text-align:center; padding:20px;
}
.ph svg{ width:58%; max-width:130px; height:auto; opacity:.32; }
.ph span{ font-size:12.5px; font-weight:600; }

/* ---- WHATSAPP FLOAT -------------------------------------- */
.wa{
  position:fixed; inset-inline-end:16px; bottom:16px; z-index:70;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 8px 26px -5px rgba(37,211,102,.62);
  transition:transform .22s var(--ease), box-shadow .22s;
}
.wa:hover{ transform:scale(1.08); box-shadow:0 12px 32px -5px rgba(37,211,102,.85); }
.wa svg{ width:27px; height:27px; }
.wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:ring 2.6s var(--ease) infinite;
}
@keyframes ring{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.65);opacity:0} }

/* ---- THEME TOGGLE (floating) ----------------------------- */
/* Deliberately on inset-inline-START, the mirror of the WhatsApp
   button's inset-inline-END — so whichever side WhatsApp lands on,
   this always sits on the opposite one, in both RTL and LTR. */
.theme-fab{
  position:fixed; inset-inline-start:16px; bottom:16px; z-index:70;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), border-color .22s, color .22s, background .22s;
}
.theme-fab:hover{
  border-color:var(--green); color:var(--green-ink);
  background:var(--green-soft); transform:scale(1.08) rotate(-12deg);
}
.theme-fab:active{ transform:scale(.95); }
.theme-fab svg{ width:21px; height:21px; }
/* moon in dark mode, sun in light mode */
.theme-fab .i-sun{ display:none; }
:root[data-theme="light"] .theme-fab .i-sun{ display:block; }
:root[data-theme="light"] .theme-fab .i-moon{ display:none; }

/* ---- BACK TO TOP ----------------------------------------- */
.totop{
  position:fixed; inset-inline-end:16px; bottom:80px; z-index:69;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  cursor:pointer; opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s, transform .2s var(--ease), border-color .2s, color .2s;
}
.totop.on{ opacity:1; visibility:visible; }
.totop:hover{ border-color:var(--green); color:var(--green-ink); transform:translateY(-3px); }
.totop svg{ width:17px; height:17px; }

/* ---- RESPONSIVE ------------------------------------------ */
@media(min-width:600px){
  .sec{ padding-block:92px; }
  .angle-top{ padding-top:calc(92px + 2.6vw); }
  .angle-btm{ padding-bottom:calc(92px + 2.6vw); }
  .phero{ padding-block:calc(var(--hdr-h) + 70px) 74px; }
}
@media(min-width:900px){
  .wa{ inset-inline-end:24px; bottom:24px; width:58px; height:58px; }
  .totop{ inset-inline-end:24px; bottom:92px; }
  .theme-fab{ inset-inline-start:24px; bottom:24px; width:52px; height:52px; }
}

/* ---- REDUCED MOTION -------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv,.rv-l,.rv-r,.rv-s{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
}