/* =========================================================
   ZAD ALWAKEEL FOR GENERAL TRADING — main stylesheet
   Designed & developed by IWT — www.iraq-webhosting.com
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #0A090C;
  --ink-2:      #121016;
  --ink-3:      #191620;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.18);
  --paper:      #F4F1EB;
  --muted:      #98939F;
  --gold:       #C89B3F;
  --gold-2:     #E8CB84;
  --gold-dim:   rgba(200,155,63,.14);

  --ff-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ff-en: "Manrope", "Segoe UI", Arial, sans-serif;
  --ff: var(--ff-ar);

  --wrap: 1200px;
  --pad: 24px;
  --r: 14px;
  --r-lg: 22px;
  --t: .35s cubic-bezier(.2,.7,.3,1);
  --header-h: 88px;
}

html[lang="en"]{ --ff: var(--ff-en); }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff);
  font-size:16px;
  line-height:1.85;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.28; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:4px; }

/* Warp-grid ambience: the vertical threads of a loom */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 96px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
}

/* ---------- 3. Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }
.section{ padding-block:96px; position:relative; z-index:1; }
.section--tight{ padding-block:68px; }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:999;
  background:var(--gold); color:#14110B; padding:10px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ inset-inline-start:0; }

/* ---------- 4. Eyebrow (signature weave mark) ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:34px; height:9px; flex:none;
  background:
    linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px) 0 0/8px 3px repeat-x,
    linear-gradient(90deg,transparent 0 4px,var(--gold) 4px 8px) 0 6px/8px 3px repeat-x;
  opacity:.9;
}
.eyebrow span{ color:var(--muted); font-weight:500; letter-spacing:.1em; }

.sec-head{ max-width:720px; margin-bottom:52px; }
.sec-head h2{ font-size:clamp(26px,3.6vw,40px); }
.sec-head p{ color:var(--muted); margin-top:16px; font-size:17px; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-weight:700; font-size:15px;
  border:1px solid transparent; transition:var(--t); white-space:nowrap;
}
.btn i{ font-style:normal; transition:transform var(--t); }
html[dir="rtl"] .btn i{ transform:scaleX(-1); }
.btn:hover i{ transform:translateX(4px); }
html[dir="rtl"] .btn:hover i{ transform:scaleX(-1) translateX(4px); }
.btn--gold{ background:var(--gold); color:#14110B; }
.btn--gold:hover{ background:var(--gold-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-2); background:var(--gold-dim); }
.btn--wa{ background:#1FA855; color:#fff; }
.btn--wa:hover{ background:#25c162; }

/* ---------- 6. Header ---------- */
.header{
  position:fixed; inset-inline:0; top:0; z-index:120; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(10,9,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:var(--t);
}
.header.is-stuck{ border-bottom-color:var(--line); background:rgba(10,9,12,.94); }
.header .wrap{ display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ height:56px; width:auto; }
.brand b{ font-size:23px; font-weight:700; line-height:1.15; letter-spacing:0; display:block; }
.brand small{ display:block; font-size:12.5px; font-weight:600; color:var(--gold); letter-spacing:.06em; margin-top:2px; }
.brand-txt{ display:block; }

.nav{ display:flex; gap:6px; margin-inline:auto; }
.nav a{
  padding:9px 15px; border-radius:100px; font-size:15px; font-weight:500;
  color:var(--muted); transition:var(--t);
}
.nav a:hover{ color:var(--paper); background:rgba(255,255,255,.05); }
.nav a.is-active{ color:var(--gold-2); background:var(--gold-dim); font-weight:700; }

.head-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-2); border-radius:100px; padding:8px 16px;
  font-size:13.5px; font-weight:700; letter-spacing:.03em; transition:var(--t);
}
.lang-btn:hover{ border-color:var(--gold); color:var(--gold-2); }
.head-actions .btn{ padding:11px 20px; font-size:14px; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px; }
.burger span{ display:block; width:18px; height:2px; margin:4px auto; background:var(--paper); transition:var(--t); border-radius:2px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0; z-index:110;
  background:var(--ink); padding:34px var(--pad) 40px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-14px); opacity:0; visibility:hidden; transition:var(--t);
  overflow-y:auto;
}
body.menu-open .mobile-menu{ transform:none; opacity:1; visibility:visible; }
.mobile-menu a.m-link{
  font-size:21px; font-weight:700; padding:16px 4px;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
}
.mobile-menu a.m-link.is-active{ color:var(--gold-2); }
.mobile-menu a.m-link::after{ content:"›"; color:var(--gold); font-size:22px; }
html[dir="rtl"] .mobile-menu a.m-link::after{ content:"‹"; }
.mobile-menu .m-foot{ margin-top:24px; display:grid; gap:10px; }

/* ---------- 7. Hero ---------- */
.hero{ padding-top:calc(var(--header-h) + 74px); padding-bottom:0; position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset-inline-end:-14%; top:-18%; width:640px; height:640px; z-index:0;
  background:radial-gradient(circle,rgba(200,155,63,.16),transparent 66%); filter:blur(20px); pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{
  font-size:clamp(34px,5.6vw,66px); font-weight:700; line-height:1.16; letter-spacing:-.02em;
}
.hero h1 em{ font-style:normal; color:var(--gold-2); }
.hero .lede{ color:var(--muted); font-size:clamp(16px,1.6vw,19px); margin-top:24px; max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:36px; color:var(--muted); font-size:14px; }
.hero-meta b{ color:var(--paper); font-weight:700; }

/* Est. seal */
.seal{
  position:relative; aspect-ratio:1; max-width:400px; margin-inline:auto; width:100%;
  display:grid; place-items:center; border:1px solid var(--line); border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(200,155,63,.10),transparent 62%);
}
.seal::before,.seal::after{
  content:""; position:absolute; border-radius:50%; border:1px solid var(--line);
}
.seal::before{ inset:26px; }
.seal::after{ inset:52px; border-color:var(--gold-dim); }
.seal img{ width:52%; position:relative; z-index:2; }
.seal .seal-yr{
  position:absolute; bottom:6%; z-index:2; font-size:12px; letter-spacing:.28em; font-weight:700;
  color:var(--gold); background:var(--ink); padding:4px 14px; border-radius:100px; border:1px solid var(--line);
}

/* ---------- 8. Marquee (signature) ---------- */
.marquee{ margin-top:78px; border-block:1px solid var(--line); padding-block:20px; overflow:hidden; position:relative; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:130px; z-index:3; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(to right,var(--ink) 12%,transparent); }
.marquee::after{ right:0; background:linear-gradient(to left,var(--ink) 12%,transparent); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track img{
  width:132px; height:132px; object-fit:cover; border-radius:12px; flex:none;
  border:1px solid var(--line); filter:grayscale(.35); transition:var(--t);
}
.marquee-track img:hover{ filter:none; border-color:var(--gold); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .marquee-track{ animation-name:slide-rtl; }
@keyframes slide-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
.marquee-note{ text-align:center; color:var(--muted); font-size:12.5px; letter-spacing:.14em; margin-top:16px; text-transform:uppercase; }

/* ---------- 9. Cards & grids ---------- */
.grid{ display:grid; gap:20px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; transition:var(--t); position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.card h3{ font-size:19px; margin-bottom:10px; }
.card h3 span{ display:block; font-family:var(--ff-en); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; margin-top:5px; }
.card p{ color:var(--muted); font-size:15px; }
.card .num{
  font-family:var(--ff-en); font-size:12px; font-weight:800; letter-spacing:.14em;
  color:var(--gold); display:block; margin-bottom:16px;
}
.card .ic{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--gold-dim); border:1px solid rgba(200,155,63,.42); color:var(--gold-2);
}
.card .ic svg{ width:23px; height:23px; }

/* Product tiles */
.prod{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--ink-2);
  transition:var(--t); display:block;
}
.prod:hover{ border-color:var(--gold); transform:translateY(-4px); }
.prod-img{ aspect-ratio:1; overflow:hidden; background:#fff; }
.prod-img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.prod:hover .prod-img img{ transform:scale(1.06); }
.prod-body{ padding:16px 18px 20px; }
.prod-body h3{ font-size:16px; font-weight:700; }
.prod-body span{ display:block; font-family:var(--ff-en); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }
.filters button{
  padding:9px 20px; border-radius:100px; border:1px solid var(--line);
  font-size:14px; font-weight:500; color:var(--muted); transition:var(--t);
}
.filters button:hover{ color:var(--paper); border-color:var(--line-2); }
.filters button.is-on{ background:var(--gold); border-color:var(--gold); color:#14110B; font-weight:700; }

/* ---------- 10. Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--ink); padding:34px 24px; text-align:center; }
.stat b{ display:block; font-family:var(--ff-en); font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--gold-2); line-height:1; letter-spacing:-.02em; }
.stat span{ display:block; color:var(--muted); font-size:14px; margin-top:12px; }

/* ---------- 11. Split (about) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-media{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); position:relative; }
.split-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ticks{ display:grid; gap:14px; margin-top:26px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15.5px; }
.ticks li::before{
  content:""; flex:none; width:21px; height:21px; margin-top:6px; border-radius:50%;
  background-color:var(--gold-dim); border:1px solid var(--gold);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8CB84' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
  background-size:12px 12px; background-position:center; background-repeat:no-repeat;
}

/* Timeline */
.tl{ display:grid; gap:0; border-inline-start:1px solid var(--line); padding-inline-start:32px; }
.tl li{ position:relative; padding-bottom:36px; }
.tl li:last-child{ padding-bottom:0; }
.tl li::before{
  content:""; position:absolute; inset-inline-start:-40px; top:9px; width:15px; height:15px;
  border-radius:50%; background:var(--ink); border:2px solid var(--gold);
}
.tl b{ font-family:var(--ff-en); color:var(--gold-2); font-size:14px; letter-spacing:.1em; font-weight:800; display:block; }
.tl h3{ font-size:19px; margin:6px 0 8px; }
.tl p{ color:var(--muted); font-size:15px; }

/* ---------- 12. CTA band ---------- */
.cta{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:64px 44px; text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,rgba(200,155,63,.13),transparent 62%),var(--ink-2);
}
.cta h2{ font-size:clamp(24px,3.4vw,38px); max-width:22ch; margin-inline:auto; }
.cta p{ color:var(--muted); margin-top:16px; font-size:17px; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }

/* ---------- 13. Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.info-list{ display:grid; gap:14px; }
.info-item{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; background:var(--ink-2);
  transition:var(--t);
}
.info-item:hover{ border-color:var(--line-2); }
.info-item .ic{ width:42px; height:42px; margin:0; flex:none; }
.info-item h3{ font-size:15px; margin-bottom:6px; }
.info-item a,.info-item p{ color:var(--muted); font-size:15px; display:block; word-break:break-word; }
.info-item a:hover{ color:var(--gold-2); }
.phones{ display:grid; gap:2px; }
.phones a{ direction:ltr; text-align:start; font-family:var(--ff-en); letter-spacing:.02em; }

.form{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border-radius:11px; background:var(--ink);
  border:1px solid var(--line); color:var(--paper); font-family:inherit; font-size:15px; transition:var(--t);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); outline:none; }
.field input::placeholder,.field textarea::placeholder{ color:#5E5A66; }
.form .btn{ width:100%; }
.form-note{ color:var(--muted); font-size:13px; margin-top:14px; text-align:center; }

.map{ margin-top:44px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.map iframe{ width:100%; height:400px; border:0; display:block; filter:grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ---------- 14. Page head ---------- */
.page-head{ padding-top:calc(var(--header-h) + 74px); padding-bottom:56px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-head::after{
  content:""; position:absolute; inset-inline-end:6%; top:-40%; width:460px; height:460px;
  background:radial-gradient(circle,rgba(200,155,63,.13),transparent 66%); pointer-events:none;
}
.page-head h1{ font-size:clamp(30px,4.6vw,52px); }
.page-head p{ color:var(--muted); font-size:17.5px; margin-top:18px; max-width:64ch; }
.crumbs{ display:flex; gap:9px; align-items:center; color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.crumbs a:hover{ color:var(--gold-2); }
.crumbs span{ color:var(--gold); }

/* ---------- 15. Footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-top:70px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:48px; padding-bottom:52px; }
.footer .brand img{ height:64px; }
.footer .f-about{ color:var(--muted); font-size:15px; margin-top:20px; max-width:44ch; }
.footer h4{ font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer li{ margin-bottom:11px; }
.footer li a,.footer li span{ color:var(--muted); font-size:15px; transition:var(--t); }
.footer li a:hover{ color:var(--gold-2); }
.f-bottom{
  border-top:1px solid var(--line); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center;
  color:var(--muted); font-size:13.5px;
}
.f-bottom a{ color:var(--gold-2); font-weight:700; }
.f-bottom a:hover{ text-decoration:underline; }

/* ---------- 16. Floating WhatsApp ---------- */
.wa-float{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:130;
  width:56px; height:56px; border-radius:50%; background:#1FA855; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(31,168,85,.34);
  transition:var(--t);
}
.wa-float:hover{ transform:scale(1.08); background:#25c162; }
.wa-float svg{ width:29px; height:29px; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #1FA855;
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.65); opacity:0; } }

/* ---------- 17. Reveal ---------- */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- 18. Responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; margin-inline-start:auto; }
  .head-actions .btn--gold{ display:none; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .seal{ max-width:300px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-grid > :first-child{ grid-column:1/-1; }
}
@media (max-width:900px){
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .section{ padding-block:70px; }
}
@media (max-width:600px){
  :root{ --pad:16px; --header-h:82px; }
  .brand img{ height:48px; }
  .brand b{ font-size:21px; }
  .brand small{ font-size:11px; }
  .brand{ gap:9px; }
  .head-actions{ gap:7px; }
  .lang-btn{ padding:7px 12px; font-size:12.5px; }
  .burger{ width:42px; height:42px; }
  .g-2,.g-3{ grid-template-columns:1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .prod-body{ padding:12px 13px 15px; }
  .prod-body h3{ font-size:14px; }
  .cta{ padding:44px 22px; }
  .card{ padding:24px 22px; }
  .hero{ padding-top:calc(var(--header-h) + 48px); }
  .page-head{ padding-top:calc(var(--header-h) + 48px); padding-bottom:42px; }
  .marquee-track img{ width:104px; height:104px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .map iframe{ height:300px; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .f-bottom{ justify-content:center; text-align:center; }
}

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

/* ---------- 20. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-content:center; justify-items:center; gap:26px;
  background:var(--ink);
  transition:opacity .55s ease,visibility .55s ease;
}
.preloader::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(200,155,63,.16),transparent 58%);
  pointer-events:none;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
body.is-loading{ overflow:hidden; }

.pre-mark{
  position:relative; width:170px; height:170px;
  display:grid; place-items:center;
  animation:pre-in .8s cubic-bezier(.2,.7,.3,1) both;
}
.pre-mark img{ width:104px; position:relative; z-index:2; }
.pre-mark::before,.pre-mark::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(200,155,63,.35);
}
.pre-mark::before{ animation:pre-ring 2s ease-out infinite; }
.pre-mark::after{ animation:pre-ring 2s ease-out .7s infinite; }

@keyframes pre-in{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
@keyframes pre-ring{ 0%{ transform:scale(.82); opacity:.75; } 100%{ transform:scale(1.28); opacity:0; } }

.pre-bar{
  width:190px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.10); position:relative;
}
.pre-bar span{
  position:absolute; inset-block:0; inset-inline-start:-45%; width:45%;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  animation:pre-sweep 1.15s ease-in-out infinite;
}
@keyframes pre-sweep{ to{ inset-inline-start:100%; } }

.pre-txt{
  font-size:11.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:600px){
  .pre-mark{ width:130px; height:130px; }
  .pre-mark img{ width:80px; }
  .pre-bar{ width:150px; }
}

@media (prefers-reduced-motion:reduce){
  .pre-mark,.pre-mark::before,.pre-mark::after,.pre-bar span{ animation:none; }
  .pre-bar span{ inset-inline-start:0; width:100%; background:var(--gold); }
}

/* Arabic is a connected script — wide tracking breaks the joins */
html[dir="rtl"] .pre-txt{ letter-spacing:.08em; font-size:12.5px; }