/* ============================================================
   Anchor — المرساة · نظام التصميم
   خطوط مستضافة ذاتيًا من الجذر (../fonts) — صفر طلبات خارجية
   ============================================================ */
@font-face{font-family:'Reem Kufi';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/reem-kufi-ar.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Reem Kufi';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/reem-kufi-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plex-ar-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plex-ar-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plex-ar-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('../fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plex-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --abyss:#04121F;      /* أعماق */
  --deep:#072438;       /* بحر عميق */
  --navy:#0C3B5A;
  --teal:#0E7C6B;
  --mint:#3FD8B4;       /* توهّج */
  --gold:#E8B54B;       /* نحاس المرساة */
  --paper:#F6F9FB;
  --card:#0E2E45;
  --ink:#0A1A26;
  --muted:#8FB0C4;
  --line:rgba(255,255,255,.12);
  --radius:20px;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:#DCEAF2;
  font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.85;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
::selection{background:var(--mint);color:#04121F}
h1,h2,h3{font-family:'Reem Kufi',system-ui,sans-serif;font-weight:600;line-height:1.3;margin:0;color:#fff}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.1em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,30px)}
.section{padding-block:clamp(52px,7vw,92px)}

#progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--mint),var(--gold));transform:scaleX(0);transform-origin:right}

/* ---------- الترويسة ---------- */
header.top{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.4);
  background:rgba(4,18,31,.78);border-bottom:1px solid transparent;transition:border-color .3s}
header.top.stuck{border-bottom-color:var(--line)}
.top__in{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Reem Kufi',sans-serif;font-weight:600;color:#fff}
.brand .mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(150deg,var(--teal),var(--navy));border:1px solid rgba(63,216,180,.35);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.brand:hover .mark{transform:rotate(-10deg) scale(1.08)}
.brand small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.14em;
  color:var(--muted);font-weight:400}
.top__links{display:flex;gap:2px;margin-inline-start:auto;align-items:center}
.top__links a{padding:8px 13px;border-radius:999px;font-size:.9rem;color:var(--muted);transition:.2s}
.top__links a:hover{color:#fff;background:rgba(63,216,180,.14)}

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;
  border-radius:999px;font-weight:700;font-size:.98rem;border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn--gold{background:linear-gradient(135deg,var(--gold),#C8912E);color:#1B1305;
  box-shadow:0 12px 30px -12px rgba(232,181,75,.85)}
.btn--gold:hover{transform:translateY(-3px) scale(1.02)}
.btn--gold::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%) skewX(-18deg);animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,74%{transform:translateX(-160%) skewX(-18deg)}94%,100%{transform:translateX(320%) skewX(-18deg)}}
.btn--mint{background:var(--mint);color:#04231C;box-shadow:0 12px 28px -12px rgba(63,216,180,.9)}
.btn--mint:hover{transform:translateY(-3px)}
.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.05);color:#fff}
.btn--ghost:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-3px)}
.btn--sm{padding:9px 17px;font-size:.86rem}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);font-weight:500}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--mint);border-radius:2px}
.h-sec{font-size:clamp(1.6rem,3.8vw,2.6rem);margin:.5rem 0 .7rem}
.lead{color:var(--muted);max-width:62ch;margin:0;font-size:clamp(.98rem,1.4vw,1.08rem)}

/* ============================================================
   البطل
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,86px) 0;
  background:
    radial-gradient(90% 70% at 78% 8%,rgba(14,124,107,.42),transparent 60%),
    radial-gradient(70% 60% at 8% 90%,rgba(12,59,90,.55),transparent 60%),
    linear-gradient(180deg,var(--abyss),var(--deep))}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(63,216,180,.16) 1px,transparent 1px);background-size:34px 34px}
.hero__in{position:relative;z-index:3;text-align:center}
.hero__mark{width:clamp(78px,10vw,104px);height:clamp(78px,10vw,104px);margin:0 auto 18px;border-radius:28px;
  display:grid;place-items:center;font-size:clamp(38px,5vw,50px);
  background:linear-gradient(150deg,var(--teal),var(--navy));
  border:1px solid rgba(63,216,180,.4);box-shadow:0 24px 50px -18px rgba(63,216,180,.5);
  animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(4deg)}}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;
  background:rgba(232,181,75,.12);border:1px solid rgba(232,181,75,.4);color:var(--gold);
  font-size:.82rem;font-weight:700;margin-bottom:16px}
.hero__badge i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.9s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.01em;line-height:1.14}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero .tagline{font-family:'Reem Kufi',sans-serif;font-size:clamp(1.05rem,2.3vw,1.55rem);
  color:var(--gold);margin:12px 0 8px}
.hero p.sub{color:#A9C7D8;max-width:60ch;margin:0 auto 26px;font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px}
.hero__note{color:var(--muted);font-size:.85rem}

/* موجة */
.waves{position:relative;z-index:2;line-height:0;margin-top:clamp(30px,5vw,54px)}
.waves svg{width:100%;height:clamp(50px,7vw,88px)}

/* ---------- شريط الأرقام ---------- */
.proof{background:var(--deep);border-block:1px solid var(--line)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.proof__grid>div{background:var(--deep);padding:clamp(20px,3vw,30px) 14px;text-align:center;transition:background .25s}
.proof__grid>div:hover{background:#0A2B42}
.proof b{display:block;font-family:'Reem Kufi',sans-serif;font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.1;color:var(--mint)}
.proof span{display:block;margin-top:6px;color:var(--muted);font-size:.85rem}
.proof__note{text-align:center;color:var(--muted);font-size:.78rem;padding:14px 20px 0;margin:0 auto;max-width:70ch}

/* ---------- البطاقات ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:38px}
.card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),border-color .28s,background .28s}
.card:hover{transform:translateY(-6px);border-color:rgba(63,216,180,.5);background:rgba(63,216,180,.07)}
.card:hover .ic{transform:scale(1.16) rotate(-7deg)}
.card .ic{font-size:30px;line-height:1;margin-bottom:12px;display:inline-block;
  transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.card h3{font-size:1.06rem;margin-bottom:7px;color:#fff}
.card p{margin:0;color:#A9C7D8;font-size:.93rem}

/* ---------- المشكلة/الحل (تبويبات) ---------- */
.switchbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.switchbar button{padding:11px 20px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:.92rem;font-weight:600;color:#BFD7E5;transition:.25s}
.switchbar button:hover{border-color:rgba(63,216,180,.5);color:#fff;transform:translateY(-2px)}
.switchbar button[aria-current="true"]{background:var(--mint);color:#04231C;border-color:var(--mint);
  box-shadow:0 10px 24px -10px rgba(63,216,180,.8)}
.panels{margin-top:22px;position:relative}
.panel{display:none;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3.4vw,34px);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.panel.on{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
  animation:fadeUp .45s cubic-bezier(.2,.9,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel h3{font-size:1.15rem;margin-bottom:8px}
.panel p{margin:0;color:#A9C7D8;font-size:.95rem}
.panel .bad h3{color:#FF9C8F}
.panel .good h3{color:var(--mint)}
.panel .sep{grid-column:1/-1;height:1px;background:var(--line)}

/* ---------- خلف الكواليس ---------- */
.vault{background:
   radial-gradient(80% 70% at 20% 0%,rgba(232,181,75,.14),transparent 60%),
   linear-gradient(160deg,var(--deep),var(--abyss));
  border-block:1px solid var(--line);position:relative;overflow:hidden}
.vault .eyebrow{color:var(--gold)}
.vault .eyebrow::before{background:var(--gold)}
.vault__seal{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:22px 26px;border-radius:var(--radius);border:1px dashed rgba(232,181,75,.45);
  background:rgba(232,181,75,.07)}
.vault__seal .lock{font-size:34px;animation:sway 6s ease-in-out infinite}
.vault__seal p{margin:0;color:var(--gold);font-weight:700;font-family:'Reem Kufi',sans-serif;
  font-size:clamp(1rem,2vw,1.25rem)}

/* ---------- الحلقة المغلقة ---------- */
.loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:38px;position:relative}
.step{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;
  transition:transform .28s,border-color .28s}
.step:hover{transform:translateY(-6px);border-color:rgba(63,216,180,.5)}
.step .n{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  font-family:'IBM Plex Mono',monospace;background:rgba(63,216,180,.16);color:var(--mint);
  border:1px solid rgba(63,216,180,.35);margin-bottom:14px}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{margin:0;color:#A9C7D8;font-size:.92rem}
.step.gold .n{background:rgba(232,181,75,.16);color:var(--gold);border-color:rgba(232,181,75,.4)}

/* ---------- الدليل الحيّ ---------- */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:38px;align-items:start}
.demo__col{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.demo__col header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.demo__col header b{font-family:'Reem Kufi',sans-serif;color:#fff;font-size:.98rem}
.demo__col header .tagx{margin-inline-start:auto;font-size:.72rem;font-family:'IBM Plex Mono',monospace;
  padding:3px 10px;border-radius:999px;background:rgba(63,216,180,.14);color:var(--mint)}
.demo__col .body{padding:20px}
.demo__col .said{margin:0;color:#DCEAF2;font-size:1.02rem;line-height:1.9}
.demo__col img{border-radius:14px;border:1px solid var(--line)}
.demo__col .clip{position:relative;border-radius:14px;overflow:hidden;max-height:430px}
.demo__col .clip img{border-radius:0;border:0;object-fit:cover;object-position:top}
.demo__col .clip::after{content:"";position:absolute;inset-inline:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#08222F)}
.demo__col .clip span{position:absolute;inset-inline:0;bottom:12px;z-index:2;text-align:center;
  color:var(--mint);font-size:.8rem;font-family:'IBM Plex Mono',monospace}
.demo__note{color:var(--muted);font-size:.85rem;margin:14px 0 0;text-align:center}

/* ---------- شريط اللقطات ---------- */
.strip{display:flex;gap:16px;overflow-x:auto;padding:34px 4px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.strip figure{flex:none;width:min(216px,56vw);margin:0;scroll-snap-align:center;
  border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0A2233;
  box-shadow:0 20px 40px -22px #000;transition:transform .25s,border-color .25s}
.strip figure:hover{transform:translateY(-6px);border-color:rgba(63,216,180,.5)}
.strip img{width:100%;display:block}
.strip figcaption{padding:11px 14px;font-size:.82rem;color:#A9C7D8;text-align:center;border-top:1px solid var(--line)}

/* ---------- الباقات ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;margin-top:38px}
.tier{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;text-align:center;
  position:relative;transition:transform .28s,border-color .28s}
.tier:hover{transform:translateY(-6px);border-color:rgba(63,216,180,.45)}
.tier.pop{border-color:var(--gold);background:rgba(232,181,75,.08)}
.tier .badge{position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--gold);color:#1B1305;border-radius:999px;padding:3px 14px;font-size:.72rem;font-weight:800}
.tier h3{font-size:1.05rem;color:#fff}
.tier .price{font-family:'Reem Kufi',sans-serif;font-size:2.1rem;font-weight:700;color:var(--mint);margin:6px 0 2px}
.tier .price small{font-size:.8rem;color:var(--muted);font-weight:400}
.tier.pop .price{color:var(--gold)}
.tier ul{text-align:start;padding-inline-start:18px;margin:14px 0 0;color:#A9C7D8;font-size:.88rem}
.tier li{margin-bottom:5px}
.tiers__note{text-align:center;color:var(--muted);font-size:.82rem;margin-top:18px}

/* ---------- السياسات ---------- */
.policies{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:38px}
.policy{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.policy h3{font-size:1rem;color:var(--mint);margin-bottom:6px}
.policy p{margin:0;color:#A9C7D8;font-size:.9rem}

/* ---------- الدعوة ---------- */
.cta-band{background:linear-gradient(150deg,var(--teal),var(--navy));border-radius:var(--radius);
  padding:clamp(30px,4.5vw,52px);margin-block:clamp(30px,5vw,52px);text-align:center;
  position:relative;overflow:hidden;border:1px solid rgba(63,216,180,.3)}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.3px,transparent 1.3px);background-size:24px 24px}
.cta-band>*{position:relative;z-index:2}
.cta-band h2{font-size:clamp(1.4rem,3vw,2.1rem)}
.cta-band p{margin:10px auto 22px;color:#C8E6DE;max-width:52ch}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- التذييل ---------- */
footer{background:var(--abyss);color:var(--muted);padding-block:38px 32px;font-size:.88rem;
  border-top:1px solid var(--line)}
footer .cols{display:flex;flex-wrap:wrap;gap:18px 30px;justify-content:space-between;align-items:center}
footer b{color:#fff}
footer a{color:#BFD7E5}
footer a:hover{color:var(--mint)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.sig{margin-top:14px;color:var(--gold);font-size:.85rem;text-align:center;width:100%}

/* ---------- الظهور ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

/* ---------- الاستجابة ---------- */
@media (max-width:820px){
  .proof__grid{grid-template-columns:1fr 1fr}
  .panel.on{grid-template-columns:1fr}
  .top__links a:not(.btn){display:none}
}
@media (max-width:520px){
  .brand small{display:none}
  footer .cols{flex-direction:column;text-align:center}
  footer nav{justify-content:center}
  .btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}