@charset "UTF-8";

:root{
  /* Brand palette (primary = #aa8032) */
  --green-900:#5b4318; /* deep gold */
  --green-700:#aa8032; /* primary */
  --green-500:#c99945; /* light gold */
  --red-700:#7a5a22;   /* secondary (same family) */
  --red-500:#d7b06a;   /* secondary light (same family) */
  --ink:#0d1117;
  --muted:#5b6675;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.92);
  --border:rgba(13,17,23,.14);
  --shadow:0 18px 60px rgba(0,0,0,.12);
  --radius:22px;
  --ring:0 0 0 4px rgba(170,128,50,.18);
  --max:1040px;
  --pad:clamp(16px,3.2vw,28px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--ink);
  background:#fbfaf6;
  overflow-x:hidden;
}

/* Arabic: prioritize widely available fonts on Windows */
html[lang="ar"] body{
  font-family:"Segoe UI",Tahoma,Arial,"Noto Naskh Arabic UI","Noto Sans Arabic",sans-serif;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  inset-inline-start:12px;
  top:12px;
  transform:translateY(-160%);
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 14px;
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--shadow);
  z-index:50;
}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:var(--shadow),var(--ring)}

.bg{position:fixed;inset:0;z-index:-1}
.bg{
  perspective:1100px;
  transform-style:preserve-3d;
}

.bg__shine{
  position:absolute;inset:-30%;
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(255,255,255,.00),
      rgba(255,255,255,.10),
      rgba(170,128,50,.10),
      rgba(255,255,255,.06),
      rgba(122,90,34,.10),
      rgba(255,255,255,.00)
    );
  filter:blur(28px);
  opacity:.55;
  mix-blend-mode:soft-light;
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * 26px),
      calc((var(--my, .5) - .5) * 26px),
      -60px
    )
    rotateX(calc((var(--my, .5) - .5) * 6deg))
    rotateY(calc((var(--mx, .5) - .5) * -8deg));
  animation:shineSpin 18s linear infinite;
}
@keyframes shineSpin{
  0%{transform:
    translate3d(calc((var(--mx, .5) - .5) * 26px), calc((var(--my, .5) - .5) * 26px), -60px)
    rotateX(calc((var(--my, .5) - .5) * 6deg))
    rotateY(calc((var(--mx, .5) - .5) * -8deg))
    rotate(0deg)
  }
  100%{transform:
    translate3d(calc((var(--mx, .5) - .5) * 26px), calc((var(--my, .5) - .5) * 26px), -60px)
    rotateX(calc((var(--my, .5) - .5) * 6deg))
    rotateY(calc((var(--mx, .5) - .5) * -8deg))
    rotate(360deg)
  }
}
.bg__grid{
  position:absolute;inset:-2px;
  background:
    radial-gradient(circle at 1px 1px, rgba(170,128,50,.10) 1px, transparent 0) 0 0/18px 18px;
  opacity:.55;
  mask-image:radial-gradient(circle at 40% 10%, #000 32%, transparent 62%);
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * 12px),
      calc((var(--my, .5) - .5) * 10px),
      -120px
    )
    rotateX(calc((var(--my, .5) - .5) * 2deg))
    rotateY(calc((var(--mx, .5) - .5) * -2deg));
}
.bg__blob{
  position:absolute;
  width:min(720px,92vw);
  height:min(720px,92vw);
  border-radius:50%;
  filter:blur(16px);
  opacity:.45;
  transform:translate3d(0,0,0);
}
.bg__blob--green{
  left:-220px;top:-260px;
  background:radial-gradient(circle at 30% 30%, rgba(170,128,50,.70), rgba(170,128,50,.10) 62%, transparent 70%);
  animation:floatA 14s ease-in-out infinite;
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * 18px),
      calc((var(--my, .5) - .5) * 16px),
      -80px
    );
}
.bg__blob--red{
  right:-260px;bottom:-320px;
  background:radial-gradient(circle at 30% 30%, rgba(122,90,34,.52), rgba(122,90,34,.10) 62%, transparent 70%);
  animation:floatB 16s ease-in-out infinite;
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * -20px),
      calc((var(--my, .5) - .5) * -18px),
      -90px
    );
}
@keyframes floatA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(42px,26px) scale(1.04)}
}
@keyframes floatB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-36px,-18px) scale(1.05)}
}

@media (prefers-reduced-motion: reduce){
  .bg__blob--green,.bg__blob--red,.bg__shine,.bg__orb{animation:none}
  *{scroll-behavior:auto}
}

.bg__orb{
  position:absolute;
  width:min(460px,78vw);
  height:min(460px,78vw);
  border-radius:38%;
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.18), transparent 46%),
    radial-gradient(circle at 32% 30%, rgba(215,176,106,.30), transparent 58%),
    radial-gradient(circle at 70% 76%, rgba(122,90,34,.18), transparent 60%),
    linear-gradient(135deg, rgba(170,128,50,.10), rgba(122,90,34,.10));
  border:1px solid rgba(255,255,255,.26);
  opacity:.42;
  filter:blur(0px);
  transform-style:preserve-3d;
}
.bg__orb--1{
  left:8%;
  top:46%;
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * 22px),
      calc((var(--my, .5) - .5) * 22px),
      -40px
    )
    rotateX(calc((var(--my, .5) - .5) * -7deg))
    rotateY(calc((var(--mx, .5) - .5) * 9deg))
    rotate(8deg);
  animation:orbDrift1 20s ease-in-out infinite;
}
.bg__orb--2{
  right:6%;
  top:14%;
  width:min(520px,84vw);
  height:min(520px,84vw);
  border-radius:42%;
  opacity:.34;
  transform:
    translate3d(
      calc((var(--mx, .5) - .5) * -18px),
      calc((var(--my, .5) - .5) * 18px),
      -30px
    )
    rotateX(calc((var(--my, .5) - .5) * 6deg))
    rotateY(calc((var(--mx, .5) - .5) * -8deg))
    rotate(-10deg);
  animation:orbDrift2 22s ease-in-out infinite;
}
@keyframes orbDrift1{
  0%,100%{filter:blur(0px);transform:
    translate3d(calc((var(--mx, .5) - .5) * 22px), calc((var(--my, .5) - .5) * 22px), -40px)
    rotateX(calc((var(--my, .5) - .5) * -7deg))
    rotateY(calc((var(--mx, .5) - .5) * 9deg))
    rotate(8deg)
    scale(1)
  }
  50%{filter:blur(1px);transform:
    translate3d(calc((var(--mx, .5) - .5) * 28px), calc((var(--my, .5) - .5) * 18px), -40px)
    rotateX(calc((var(--my, .5) - .5) * -9deg))
    rotateY(calc((var(--mx, .5) - .5) * 11deg))
    rotate(16deg)
    scale(1.03)
  }
}
@keyframes orbDrift2{
  0%,100%{filter:blur(0px);transform:
    translate3d(calc((var(--mx, .5) - .5) * -18px), calc((var(--my, .5) - .5) * 18px), -30px)
    rotateX(calc((var(--my, .5) - .5) * 6deg))
    rotateY(calc((var(--mx, .5) - .5) * -8deg))
    rotate(-10deg)
    scale(1)
  }
  50%{filter:blur(1px);transform:
    translate3d(calc((var(--mx, .5) - .5) * -26px), calc((var(--my, .5) - .5) * 24px), -30px)
    rotateX(calc((var(--my, .5) - .5) * 8deg))
    rotateY(calc((var(--mx, .5) - .5) * -10deg))
    rotate(-18deg)
    scale(1.02)
  }
}

.bg__grain{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:multiply;
  background-image:url("assets/grain.svg");
  background-size:240px 240px;
  transform:translateZ(-200px);
}

/* Footer (distinct style) */
.footer{
  padding:18px var(--pad) 26px;
  color:rgba(13,17,23,.78);
  background:transparent;
  border-top:1px solid rgba(13,17,23,.10);
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  gap:14px;
}
.footerCard{
  display:grid;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(13,17,23,.12);
  border-radius:22px;
  padding:16px 16px;
  box-shadow:0 16px 46px rgba(0,0,0,.10);
}
.footerCard__title{
  margin:0;
  font-weight:1000;
  letter-spacing:-.01em;
  font-size:16px;
}
.footerCard__subtitle{
  margin:6px 0 0;
  color:rgba(13,17,23,.68);
  font-size:13px;
  line-height:1.5;
}
.footerLinks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.footerLink{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(13,17,23,.10);
  background:rgba(255,255,255,.65);
  color:rgba(13,17,23,.82);
  font-weight:900;
}
.footerLink__text{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  line-height:1.2;
}
.footerLink:hover{filter:brightness(1.02)}
.footerLink:focus{outline:none;box-shadow:var(--shadow),var(--ring)}
.footerLink__icon{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg, rgba(170,128,50,.14), rgba(122,90,34,.10));
  border:1px solid rgba(13,17,23,.08);
}
.footerLink__icon img{width:18px;height:18px;display:block}
.footer__legal{
  margin:0;
  font-size:12px;
  color:rgba(13,17,23,.62);
}
.footer__links{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.footer__link{
  color:rgba(13,17,23,.72);
  text-decoration:none;
  font-size:12px;
  transition:color .2s;
}
.footer__link:hover{
  color:var(--green-700);
  text-decoration:underline;
}
.footer__link:focus{
  outline:none;
  box-shadow:var(--ring);
  border-radius:4px;
}
.footer__separator{
  color:rgba(13,17,23,.40);
  font-size:12px;
}

@media (min-width:780px){
  .footerCard{
    grid-template-columns:1.2fr 1fr;
    padding:18px 18px;
  }
  .footerLinks{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

html[dir="rtl"] .footerCard{direction:rtl}
html[dir="rtl"] .footerLink{flex-direction:row-reverse}

.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(12px);
  background:rgba(251,250,246,.72);
  border-bottom:1px solid rgba(13,17,23,.08);
}
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__logo{
  width:64px;height:64px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(13,17,23,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  padding:6px;
  animation:logoFloat 7s ease-in-out infinite;
  object-fit:contain;
  display:block;
}

@media (min-width:720px){
  .brand__logo{width:72px;height:72px;padding:7px}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media (prefers-reduced-motion: reduce){
  .brand__logo{animation:none}
}
.brand__text{min-width:0}
.brand__kicker{
  margin:0;
  font-size:clamp(12px, 2.4vw, 13px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(13,17,23,.62);
  font-weight:800;
  animation:brandRise .55s ease-out both;
}
html[lang="ar"] .brand__kicker{
  text-transform:none;
  letter-spacing:0;
}
.brand__name{
  margin:0;
  font-size:clamp(16px, 3.2vw, 18px);
  font-weight:950;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  position:relative;
  display:inline-block;
  animation:brandRise .65s ease-out both;
  animation-delay:.06s;
}
.brand__name::after{
  content:"";
  display:block;
  height:3px;
  border-radius:999px;
  margin-top:6px;
  background:linear-gradient(
    90deg,
    rgba(170,128,50,0),
    rgba(170,128,50,.90),
    rgba(122,90,34,.82),
    rgba(170,128,50,0)
  );
  background-size:220% 100%;
  animation:brandUnderline 2.6s ease-in-out infinite;
}

@keyframes brandRise{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes brandUnderline{
  0%{background-position:0% 50%;opacity:.55}
  50%{background-position:100% 50%;opacity:1}
  100%{background-position:0% 50%;opacity:.55}
}

@media (prefers-reduced-motion: reduce){
  .brand__kicker,.brand__name{animation:none}
  .brand__name::after{animation:none}
}

.lang{
  display:flex;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(13,17,23,.10);
  border-radius:999px;
  padding:4px;
  box-shadow:0 12px 36px rgba(0,0,0,.08);
}
.lang__btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  color:rgba(13,17,23,.72);
}
.lang__btn:focus{outline:none;box-shadow:var(--ring)}
.lang__btn[aria-pressed="true"]{
  background:linear-gradient(135deg, rgba(170,128,50,.16), rgba(122,90,34,.10));
  color:var(--ink);
}

.page{
  max-width:var(--max);
  margin:0 auto;
  padding:28px var(--pad) 42px;
}

.hero{padding-top:18px}
.hero__inner{
  background:var(--surface);
  border:1px solid rgba(13,17,23,.10);
  border-radius:var(--radius);
  padding:clamp(18px,3.5vw,30px);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero__inner::before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(800px 180px at 18% 0%, rgba(170,128,50,.22), transparent 60%),
    radial-gradient(760px 200px at 86% 15%, rgba(122,90,34,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.20));
  pointer-events:none;
}
.hero__inner > *{position:relative}
.hero__title{
  margin:0 0 8px;
  font-size:clamp(28px,5.6vw,48px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.hero__subtitle{
  margin:0;
  color:rgba(13,17,23,.78);
  font-size:clamp(14px,2.6vw,18px);
  line-height:1.6;
  max-width:70ch;
}

.status{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(13,17,23,.10);
  width:fit-content;
}
.status__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 8px rgba(170,128,50,.12);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.12);opacity:.82}
}
@media (prefers-reduced-motion: reduce){
  .status__dot{animation:none}
}
.status__text{font-weight:700;color:rgba(13,17,23,.78)}

.countdown{margin-top:18px}
.card{
  background:var(--surface-strong);
  border:1px solid rgba(13,17,23,.10);
  border-radius:var(--radius);
  padding:clamp(16px,3.2vw,26px);
  box-shadow:var(--shadow);
}
.card__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.card__title{
  margin:0;
  font-size:clamp(16px,2.8vw,20px);
  letter-spacing:-.01em;
}
.card__meta{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.timer{
  margin-top:14px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.timer__unit{
  min-width:116px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(13,17,23,.10);
  border-radius:18px;
  padding:14px 16px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.timer__value{
  font-variant-numeric:tabular-nums;
  font-size:clamp(26px,5vw,38px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
}
.timer__value.is-tick{
  animation:tick .25s ease-out;
}
@keyframes tick{
  0%{transform:translateY(0);filter:saturate(1)}
  60%{transform:translateY(-2px);filter:saturate(1.25)}
  100%{transform:translateY(0);filter:saturate(1)}
}
.timer__label{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:rgba(13,17,23,.62);
}
.timer__sep{
  display:none;
  align-self:center;
  color:rgba(13,17,23,.45);
  font-weight:900;
  font-size:22px;
}

@media (min-width:720px){
  .timer{gap:14px;flex-wrap:nowrap}
  .timer__sep{display:block}
  .timer__unit{min-width:140px}
}

.progress{
  margin-top:16px;
  height:10px;
  background:rgba(13,17,23,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(13,17,23,.10);
}
.progress__bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--green-500), rgba(170,128,50,.90), rgba(122,90,34,.85));
  transition:width .5s ease;
}
@media (prefers-reduced-motion: reduce){
  .progress__bar{transition:none}
}
.card__hint{
  margin:12px 0 0;
  color:rgba(13,17,23,.70);
  font-size:13px;
  line-height:1.55;
}

.downloads{margin-top:18px}
.downloads__inner{
  background:var(--surface);
  border:1px solid rgba(13,17,23,.10);
  border-radius:var(--radius);
  padding:clamp(18px,3.5vw,30px);
  box-shadow:var(--shadow);
}
.downloads__title{
  margin:0;
  font-size:clamp(18px,3vw,22px);
}
.downloads__subtitle{
  margin:8px 0 0;
  color:rgba(13,17,23,.74);
  line-height:1.6;
  max-width:70ch;
}
.stores{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:780px){
  .stores{grid-template-columns:1fr 1fr}
}
.store{
  display:flex;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(13,17,23,.10);
  border-radius:18px;
  padding:14px;
}
.store__icon{
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(170,128,50,.12), rgba(122,90,34,.08));
  border:1px solid rgba(13,17,23,.08);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.store__body{min-width:0;flex:1 1 auto}
.store__title{margin:0;font-size:15px;font-weight:900}
.store__desc{margin:6px 0 0;color:rgba(13,17,23,.72);font-size:13px;line-height:1.45}

.contact{margin-top:18px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(13,17,23,.14);
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg, var(--green-700), var(--red-700));
  color:white;
  box-shadow:0 14px 30px rgba(170,128,50,.22);
}
.btn--primary:hover{filter:brightness(1.03)}
.btn--primary:focus{outline:none;box-shadow:var(--shadow),var(--ring)}
.btn--primary:active{transform:translateY(1px)}

/* RTL tweaks */
html[dir="rtl"] .brand__kicker{text-align:right}
html[dir="rtl"] .brand__name{text-align:right}
html[dir="rtl"] .card__header{flex-direction:row-reverse}
html[dir="rtl"] .store{flex-direction:row-reverse}
html[dir="rtl"] .store__body{text-align:right}

/* Legal Pages */
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pad);
  padding-top: 120px;
  padding-bottom: 60px;
}
.legal-page__header {
  margin-bottom: 40px;
}
.legal-page__title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
}
.legal-page__last-updated {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 32px;
}
.legal-page__content {
  line-height: 1.8;
  color: var(--ink);
}
.legal-page__content h2 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 16px;
  color: var(--green-700);
}
.legal-page__content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--ink);
}
.legal-page__content p {
  margin-bottom: 16px;
}
.legal-page__content ul,
.legal-page__content ol {
  margin-bottom: 16px;
  padding-inline-start: 24px;
}
.legal-page__content li {
  margin-bottom: 8px;
}
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--green-700) !important; /* Force primary color */
  text-decoration: none;
  font-weight: 500;
}
.legal-page__back:hover {
  text-decoration: underline;
}