/* ===========================================================
   دليل النجوم والمواسم — صفحة التعريف
   الألوان مأخوذة حرفيًا من هوية التطبيق (Shared/Assets.xcassets)
   =========================================================== */

:root{
  --ink:#F4EFE2;        /* الأرضية */
  --ink2:#EFE7D3;
  --card:#FBF6EA;
  --card2:#F1E7D0;
  --brass:#9C7A2E;      /* النحاسي */
  --brass-hi:#B8912F;
  --sand:#6B5A34;       /* النصّ الثانوي */
  --star:#2A2214;       /* النصّ الرئيس */
  --line:rgba(156,122,46,.28);
  --winter:#1E6E9E; --spring:#4C7C1C; --summer:#B07A05; --autumn:#9C4714;

  --wrap:1120px;
  --r:18px;
  --shadow:0 18px 48px rgba(42,34,20,.13);
  --font:"SF Arabic","Geeza Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "Noto Sans Arabic",system-ui,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  font-family:var(--font);
  color:var(--star);
  background:
    radial-gradient(1100px 620px at 85% -12%, rgba(184,145,47,.16), transparent 62%),
    linear-gradient(180deg,var(--ink) 0%, var(--ink2) 100%);
  background-attachment:fixed;
  line-height:1.75;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3;margin:0}
:focus-visible{outline:2.5px solid var(--brass-hi);outline-offset:3px;border-radius:6px}

.wrap{width:min(var(--wrap),100% - 2.4rem);margin-inline:auto}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--brass);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 10px}
.skip:focus{inset-inline-start:1rem}

/* ---------- الشريط العلوي ---------- */
.bar{position:sticky;top:0;z-index:20;
  background:rgba(244,239,226,.82);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.6rem;min-height:58px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--star);
  font-weight:800;font-size:1.02rem}
.brand:hover{text-decoration:none}
.brand img{border-radius:9px}
.lang{font:inherit;font-weight:800;font-size:.82rem;letter-spacing:.06em;
  color:var(--brass);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:.35rem .85rem;cursor:pointer;
  transition:background .18s,color .18s}
.lang:hover{background:var(--brass);color:#fff;border-color:var(--brass)}

/* ---------- الواجهة ---------- */
.hero{padding-block:clamp(2.2rem,6vw,4.6rem) clamp(2rem,5vw,3.6rem)}
.hero-in{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){.hero-in{grid-template-columns:1.06fr .94fr}}

.eyebrow{margin:0 0 .55rem;color:var(--brass);font-weight:800;
  font-size:.83rem;letter-spacing:.1em}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem);font-weight:800;letter-spacing:-.01em}
.lede{margin:1rem 0 0;font-size:clamp(1.02rem,2.3vw,1.2rem);
  color:var(--sand);max-width:34em}

.hero-facts{list-style:none;display:flex;gap:clamp(1.4rem,4vw,2.6rem);
  margin:2rem 0 0;padding:0}
.hero-facts li{display:flex;flex-direction:column;gap:.1rem}
.hero-facts b{font-size:1.7rem;font-weight:800;color:var(--brass-hi);line-height:1}
.hero-facts span{font-size:.83rem;color:var(--sand)}

/* ---------- زرّ المتجر ---------- */
.cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.badge{display:inline-block;transition:transform .18s,opacity .18s}
.badge:hover{transform:translateY(-2px);opacity:.9;text-decoration:none}
.badge img{height:54px;width:auto}
.soon{display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,var(--brass-hi),var(--brass));
  color:#fff;font-weight:800;font-size:1rem;
  padding:.85rem 1.6rem;border-radius:14px;box-shadow:var(--shadow)}
.soon svg{width:19px;height:19px;fill:currentColor;flex:none}
.soon-note{font-size:.85rem;color:var(--sand)}

/* ---------- إطار الجهاز ---------- */
.phone{margin:0;position:relative}
.phone img{border-radius:30px;box-shadow:var(--shadow);
  border:1px solid var(--line);background:var(--card)}
.hero-shot .phone{max-width:330px;margin-inline:auto}
.phone.sm{max-width:290px;margin-inline:auto}
.phone figcaption{margin-top:1rem;text-align:center;font-size:.9rem;
  color:var(--sand);font-weight:600}

/* ---------- الأقسام ---------- */
.sec{padding-block:clamp(2.8rem,7vw,4.8rem)}
.sec.alt{background:rgba(251,246,234,.55);
  border-block:1px solid var(--line)}
.sec h2{font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:800;margin-bottom:.5rem}
.sec-lede{margin:0 0 2rem;color:var(--sand);max-width:46em}

/* المزايا */
.grid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1.8rem}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:linear-gradient(160deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
  transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{font-size:1.06rem;font-weight:800;margin-bottom:.5rem}
.card p{margin:0;font-size:.94rem;color:var(--sand)}
.ico{width:42px;height:42px;border-radius:12px;margin-bottom:.95rem;
  display:grid;place-items:center;background:rgba(184,145,47,.14)}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--brass);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* اللقطات */
.shots{display:grid;gap:2.2rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:760px){.shots{grid-template-columns:repeat(3,1fr);gap:1.4rem}}

/* المنهجية */
.steps{list-style:none;counter-reset:s;margin:0 0 2.4rem;padding:0;
  display:grid;gap:1.2rem}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;position:relative;padding-top:.4rem}
.steps li::before{content:counter(s,arabic-indic);
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:.7rem;
  background:var(--brass-hi);color:var(--ink);border-radius:50%;
  font-weight:800;font-size:.95rem}
.steps h3{font-size:1.02rem;font-weight:800;margin-bottom:.35rem}
.steps p{margin:0;font-size:.93rem;color:var(--sand)}

.srcs{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.srcs a{display:grid;gap:.15rem;padding:1rem 1.15rem;border-radius:14px;
  background:var(--card);border:1px solid var(--line);color:inherit;
  transition:transform .18s,border-color .18s}
.srcs a:hover{text-decoration:none;transform:translateX(-3px);
  border-color:var(--brass)}
html[dir=ltr] .srcs a:hover{transform:translateX(3px)}
.srcs b{font-size:.99rem;font-weight:800}
.srcs span{font-size:.88rem;color:var(--sand)}
.srcs em{font-style:normal;font-size:.78rem;color:var(--brass);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  direction:ltr;unicode-bidi:isolate;margin-top:.25rem}
.note{margin:1.6rem 0 0;font-size:.9rem;color:var(--sand);max-width:46em}

.cta-band{text-align:center;border-top:1px solid var(--line)}
.cta-band .cta{justify-content:center;margin-top:1.4rem}

/* ---------- التذييل ---------- */
.foot{border-top:1px solid var(--line);padding-block:1.8rem;
  background:rgba(251,246,234,.5)}
.foot-in{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;
  align-items:center;justify-content:space-between}
.copy{margin:0;font-size:.86rem;color:var(--sand)}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.88rem}

/* ---------- صفحات النصّ ---------- */
.doc{padding-block:clamp(2.2rem,6vw,3.6rem)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(1.7rem,4.4vw,2.3rem);margin-bottom:.4rem}
.doc .updated{color:var(--sand);font-size:.88rem;margin:0 0 2.2rem}
.doc h2{font-size:1.16rem;font-weight:800;margin:2.2rem 0 .6rem}
.doc p,.doc li{color:var(--sand);font-size:.99rem}
.doc p{margin:0 0 .9rem}
.doc ul{margin:0 0 1rem;padding-inline-start:1.3rem}
.doc li{margin-bottom:.45rem}
.doc .back{display:inline-block;margin-top:2.6rem;font-weight:700}