/* موقع يحيى الدريبي — تصميم بأسلوب صفحات المنتجات: أقسام كاملة العرض بالأبيض والرمادي الفاتح والأسود،
   عناوين كبيرة، ومساحات واسعة. الخط: ثمانية. كل الاتجاهات منطقية لتعمل بالعربية والإنجليزية. */

@font-face{font-family:"thmanyah sans";src:url(/assets/fonts/thmanyahsans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"thmanyah sans";src:url(/assets/fonts/thmanyahsans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"thmanyah sans";src:url(/assets/fonts/thmanyahsans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  --bg:#ffffff;
  --alt:#f5f5f7;
  --contrast:#000000;
  --contrast-ink:#f5f5f7;
  --contrast-ink-2:#86868b;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --link:#0066cc;
  --link-dark:#2997ff;
  --stamp:#e30000;
  --stamp-bg:rgba(255,255,255,.92);
  --nav-bg:rgba(250,250,252,.8);
  --lnav-bg:rgba(255,255,255,.72);
  --shadow:rgba(0,0,0,.18);
  --r-tile:28px;
  --r-card:18px;
  --max:1024px;
  --wide:1260px;
  --sans:"thmanyah sans",system-ui,-apple-system,sans-serif;
}
/* النمط الليلي: حسب الجهاز ما لم يختر الزائر غيره، أو باختياره */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000;--alt:#1d1d1f;--contrast:#1d1d1f;--contrast-ink:#f5f5f7;--contrast-ink-2:#a1a1a6;
    --card:#1d1d1f;--ink:#f5f5f7;--ink-2:#a1a1a6;--ink-3:#86868b;--line:#424245;
    --link:#2997ff;--stamp:#ff453a;--stamp-bg:rgba(0,0,0,.85);
    --nav-bg:rgba(22,22,23,.8);--lnav-bg:rgba(22,22,23,.72);--shadow:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;--alt:#1d1d1f;--contrast:#1d1d1f;--contrast-ink:#f5f5f7;--contrast-ink-2:#a1a1a6;
  --card:#1d1d1f;--ink:#f5f5f7;--ink-2:#a1a1a6;--ink-3:#86868b;--line:#424245;
  --link:#2997ff;--stamp:#ff453a;--stamp-bg:rgba(0,0,0,.85);
  --nav-bg:rgba(22,22,23,.8);--lnav-bg:rgba(22,22,23,.72);--shadow:rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:8px 18px;border-radius:999px;font-weight:700}
.skip:focus{top:8px;text-decoration:none}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}
.wrap{width:min(var(--max),100% - 44px);margin-inline:auto}
.wide{width:min(var(--wide),100% - 24px);margin-inline:auto}

/* ——— الشريط العلوي الثابت */
.gnav{position:sticky;top:0;z-index:50;height:48px;background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.gnav-in{height:100%;display:flex;align-items:center;gap:28px}
.gnav .logo{color:var(--ink);display:flex;align-items:center;height:100%}
.gnav .logo svg{height:17px;width:auto}
.gnav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex:1}
.gnav ul a,.gnav .lang{color:var(--ink);opacity:.8;font-size:13px}
.gnav ul a:hover,.gnav .lang:hover{opacity:1;text-decoration:none}
.gnav .lang{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.gnav .lang svg{width:14px;height:14px}

/* شريط الأداة تحت الشريط العلوي */
.lnav{position:sticky;top:48px;z-index:40;height:52px;background:var(--lnav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.lnav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lnav .ltitle{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.lnav .ltitle:hover{text-decoration:none}
.lnav-r{display:flex;align-items:center;gap:18px}
.lnav .back{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.lnav .back svg{width:13px;height:13px}
.lnav .soon-tag{font-size:12px;color:var(--ink-2);border:1px solid var(--line);padding:3px 11px;border-radius:999px}

/* ——— الأزرار: كبسولات */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:11px 22px;
  border-radius:999px;font:inherit;font-size:17px;line-height:1.2;cursor:pointer;border:1px solid transparent;
  text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{text-decoration:none}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-ghost{color:var(--blue);border-color:var(--blue);background:transparent}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-sm{min-height:32px;padding:6px 15px;font-size:14px}
.btn-sm svg{width:14px;height:14px}
.dark .btn-ghost{color:var(--link-dark);border-color:var(--link-dark)}
.dark .btn-ghost:hover{background:var(--link-dark);color:#000}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.more-link{font-size:19px;display:inline-flex;align-items:center;gap:4px}
.more-link svg{width:14px;height:14px}
.dark a.more-link{color:var(--link-dark)}

/* ——— الأقسام */
.sec{padding:96px 0;text-align:center}
.sec.gray{background:var(--alt)}
.sec.dark,.dark{background:var(--contrast);color:var(--contrast-ink)}
.dark .muted,.dark .sub{color:var(--contrast-ink-2)}
.eyebrow{font-size:21px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.headline{font-size:clamp(40px,7vw,80px);line-height:1.05;font-weight:700;letter-spacing:-.015em}
.h2{font-size:clamp(32px,5vw,56px);line-height:1.08;font-weight:700;letter-spacing:-.01em}
.sub{font-size:clamp(19px,2.4vw,28px);line-height:1.3;color:var(--ink);margin-top:10px}
.muted{color:var(--ink-2)}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.55;max-width:760px;margin:22px auto 0}

/* ——— البطل في الرئيسية: الشعار والاسم */
.hero-id{padding:88px 0 80px;text-align:center}
.hero-id .mark{color:var(--ink);width:min(150px,40vw);margin:0 auto 26px}
.hero-id .mark svg{width:100%;height:auto}
.name-ar,.name-en{margin:0}
.callig{display:block;width:min(260px,62vw);aspect-ratio:1323/715;margin:0 auto;background:var(--ink);
  -webkit-mask:url(/assets/name-ar.svg) center/contain no-repeat;mask:url(/assets/name-ar.svg) center/contain no-repeat}
.name-en{font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:-.01em}

/* ——— بلاطات الأدوات المتاحة: قسم كامل العرض لكل أداة */
.feature{padding:64px 0 0;text-align:center;overflow:hidden;border-bottom:12px solid var(--bg)}
.feature .tname{font-size:clamp(40px,6vw,56px);line-height:1.07;font-weight:700;letter-spacing:-.01em}
.feature .sub{margin-top:6px}
.feature .ctas{margin-top:20px}
.feature .art{margin:44px auto 0;width:min(340px,70vw);aspect-ratio:1/1;position:relative}
.feature .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));transform:translateY(12%)}
.feature.dark .art img{filter:drop-shadow(0 30px 50px rgba(255,255,255,.08))}

/* ——— الشبكة: بقية الأدوات */
.grid-sec{padding:12px 0 12px;background:var(--bg)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gtile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;
  min-height:500px;padding:52px 28px 0;background:var(--alt);border-radius:0;color:var(--ink);overflow:hidden}
.gtile:hover{text-decoration:none}
.gtile.dark{background:var(--contrast);color:var(--contrast-ink)}
.gtile .tname{font-size:clamp(32px,4vw,40px);font-weight:700;line-height:1.1}
.gtile .sub{font-size:clamp(17px,1.8vw,21px);margin-top:6px}
.gtile.dark .sub{color:var(--contrast-ink)}
.gtile .glink{margin-top:16px;font-size:17px;color:var(--link);display:inline-flex;align-items:center;gap:4px}
.gtile.dark .glink{color:var(--link-dark)}
.gtile .glink svg{width:13px;height:13px}
.gtile:hover .glink span{text-decoration:underline}
.gtile .art{margin-top:auto;width:min(230px,60%);aspect-ratio:1/1;position:relative;transform:translateY(14%)}
.gtile .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.16))}
.grid-head{padding:72px 0 28px;text-align:center}

/* ختم «قريباً» بالأحمر على زاوية الأداة المقفلة */
.stamp{position:absolute;top:18%;inset-inline-end:-6%;z-index:2;padding:6px 14px;
  font-size:clamp(14px,1.8vw,18px);font-weight:700;line-height:1;color:var(--stamp);background:var(--stamp-bg);
  border:2px solid var(--stamp);border-radius:8px;transform:rotate(-12deg);
  box-shadow:inset 0 0 0 2px var(--stamp-bg),inset 0 0 0 3.5px color-mix(in srgb,var(--stamp) 45%,transparent)}
[dir="rtl"] .stamp{transform:rotate(12deg)}
[lang="en"] .stamp{letter-spacing:.14em;font-size:clamp(12px,1.5vw,15px)}

/* ——— المشاركة */
.share-site .h2{max-width:820px;margin-inline:auto}
.share-site .ctas{margin-top:30px}
.share-site .suggest-link{margin-top:22px;font-size:17px}
.share-site .suggest-link a{display:inline-flex;align-items:center;gap:6px}
.share-site .suggest-link svg{width:16px;height:16px}
.share-status{font-size:14px;color:var(--ink-2);min-height:1em}

/* ——— المبادئ */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;max-width:860px;margin:56px auto 0;text-align:start}
.principle svg{width:44px;height:44px;color:var(--contrast-ink);margin-bottom:18px}
.principle h3{font-size:28px;line-height:1.2;font-weight:700}
.principle p{margin-top:10px;font-size:19px;color:var(--contrast-ink-2)}

/* ——— صفحة الأداة */
.p-hero{padding:72px 0 88px;text-align:center}
.p-hero .icon{width:min(168px,40vw);margin:0 auto 26px}
.p-hero .icon img{width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))}
.p-hero .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.chip{font-size:13px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.chip.on{color:#30a14e;border-color:color-mix(in srgb,#30a14e 45%,transparent)}
.p-hero .ctas{margin-top:30px}
.note{font-size:14px;color:var(--ink-2);margin-top:14px}
.pending{font-size:19px;color:var(--ink-2);margin-top:26px}
.share-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:28px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;text-align:start}
.card{background:var(--card);border-radius:var(--r-tile);padding:34px 30px;font-size:21px;line-height:1.4;font-weight:700}
.card .num{display:block;font-size:15px;font-weight:500;color:var(--ink-2);margin-bottom:12px}
.list-cards{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;text-align:start}
.list-cards li{background:var(--card);border-radius:var(--r-card);padding:22px 24px;font-size:17px}

.about-sec .lead{color:var(--contrast-ink);font-size:clamp(21px,2.6vw,32px);line-height:1.45;font-weight:500;max-width:880px}

.steps{list-style:none;counter-reset:s;padding:0;margin:48px auto 0;max-width:760px;text-align:start;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;background:var(--alt);border-radius:var(--r-card);padding:20px 24px 20px 24px;padding-inline-start:74px;font-size:18px}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:22px;top:18px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:16px}

.extra{max-width:760px;margin:0 auto;text-align:start}
.extra p{font-size:19px;margin-top:18px}
.extra .h2{text-align:center}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px;text-align:start}
.fact{background:var(--card);border-radius:var(--r-tile);padding:30px}
.fact h3{font-size:21px;font-weight:700;margin-bottom:12px}
.fact p{font-size:17px;color:var(--ink-2)}
.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:17px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0}

/* ——— التذييل */
footer{background:var(--alt);color:var(--ink-2);font-size:12px;padding:28px 0 36px;border-top:12px solid var(--bg)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.credit{display:flex;align-items:center;gap:10px;color:var(--ink)}
.credit svg{height:26px;width:auto;color:var(--ink)}
.foot-links{display:flex;gap:18px}
.foot-links a{color:var(--ink-2)}
.visits{color:var(--ink-2)}
.foot-note{padding-bottom:12px}

/* ——— الظهور الناعم */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ——— الجوال */
@media (max-width:833px){
  .grid{grid-template-columns:1fr}
  .gtile{min-height:440px}
  .cards{grid-template-columns:1fr}
  .list-cards{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:40px}
}
@media (max-width:600px){
  .gnav ul{display:none}
  .sec{padding:72px 0}
  .feature{padding-top:52px}
  .lnav .back span{display:none}
  .btn{font-size:16px;padding:10px 20px}
  .foot-in{flex-direction:column;align-items:flex-start}
}
.grid li:last-child:nth-child(odd){grid-column:1/-1}

/* ——— زر المظهر */
.theme-btn{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);opacity:.8;cursor:pointer;margin-inline-start:auto}
.theme-btn:hover{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.theme-btn svg{width:16px;height:16px;display:none}
.theme-btn[data-mode="auto"] .i-auto,.theme-btn[data-mode="light"] .i-light,.theme-btn[data-mode="dark"] .i-dark{display:block}
.theme-btn:not([data-mode]) .i-auto{display:block}
.gnav .lang{margin-inline-start:0}

/* ——— مشاهد التمرير (قيمة --p من 0 إلى 1 يحسبها site.js؛ بدون جافاسكربت تبقى 1) */
[data-scroll]{--p:1}
[data-scroll="hero"]{--p:0}

/* البطل: الشعار يقترب ويتلاشى مع التمرير */
.hero-scene{height:140vh;position:relative}
.hero-sticky{position:sticky;top:48px;height:calc(100vh - 48px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden}
.hero-scene .mark{color:var(--ink);width:min(170px,42vw);transform:scale(calc(1 + var(--p) * 2.2));opacity:calc(1 - var(--p) * 1.6);will-change:transform,opacity}
.hero-scene .mark svg{width:100%;height:auto}
.hero-name{opacity:calc(1 - var(--p) * 2.2);transform:translateY(calc(var(--p) * -60px))}
.scroll-cue{position:absolute;bottom:28px;color:var(--ink-2);width:28px;height:28px;opacity:calc(1 - var(--p) * 4);animation:cue 2.2s ease-in-out infinite}
.scroll-cue svg{width:100%;height:100%}
@keyframes cue{50%{transform:translateY(6px)}}
.hero-scene[data-p0] .mark{transform:none;opacity:1}

/* بلاطة الأداة: النص يظهر والأيقونة تصعد وتكبر */
.feature .ftext{opacity:calc(.15 + var(--p) * .85);transform:translateY(calc((1 - var(--p)) * 40px))}
.feature .art{transform:translateY(calc((1 - var(--p)) * 120px)) scale(calc(.78 + var(--p) * .22));transform-origin:50% 100%}
.feature .art img{transform:translateY(12%)}

/* جملة كبيرة تضيء كلمة كلمة */
.statement-scene{height:220vh;background:var(--bg)}
.statement-sticky{position:sticky;top:48px;height:calc(100vh - 48px);display:grid;place-items:center;padding:0 22px}
.statement{font-size:clamp(40px,8vw,96px);line-height:1.12;font-weight:700;letter-spacing:-.02em;text-align:center;max-width:1100px}
.statement span{opacity:clamp(.14, calc(var(--p) * var(--n) * 1.15 - var(--i)), 1);transition:opacity .15s linear}

/* صفحة الأداة: الأيقونة تكبر وتبتعد عند التمرير */
.p-hero .icon{transform:scale(calc(1 + (1 - var(--p)) * .25));opacity:calc(.4 + var(--p) * .6)}

/* بلاطات الشبكة: تفاعل عند المرور */
.gtile .art{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gtile:hover .art{transform:translateY(8%) scale(1.06)}
.feature .btn,.gtile{transition:transform .3s ease}

@media (prefers-reduced-motion:reduce){
  [data-scroll]{--p:1 !important}
  .hero-scene{height:auto}.hero-sticky{position:static;height:auto;padding:88px 0 80px}
  .hero-scene .mark,.hero-name{transform:none!important;opacity:1!important}
  .scroll-cue{display:none}
  .statement-scene{height:auto}.statement-sticky{position:static;height:auto;padding:96px 22px}
  .statement span{opacity:1}
}
@media (max-width:600px){.hero-scene{height:150vh}.statement-scene{height:180vh}}

/* ——— صفحة الأداة بأسلوب صفحة الشراء: عنوان، ثم معرض ثابت بجانب خطوات الاختيار */
.buy-head{padding:44px 0 8px;text-align:start}
.eyebrow-new{color:#bf4800;font-size:15px;font-weight:500}
:root[data-theme="dark"] .eyebrow-new{color:#ff9f0a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow-new{color:#ff9f0a}}
.buy-title{font-size:clamp(36px,5vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.buy-tag{font-size:19px;color:var(--ink-2);margin-top:6px}
.buy-price{font-size:17px;font-weight:700;margin-top:10px}
.buy{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start;padding:28px 0 96px}
.buy-media{position:sticky;top:116px;min-width:0}
.gallery{position:relative;background:var(--alt);border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/3.4}
.slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:grid;place-items:center;padding:48px}
.slide-icon img{width:min(300px,55%);height:auto;filter:drop-shadow(0 30px 40px var(--shadow))}
.slide-text{align-content:center;text-align:center;gap:16px}
.slide-text .num{font-size:15px;color:var(--ink-2);font-weight:500}
.slide-text p{font-size:clamp(26px,3vw,40px);line-height:1.2;font-weight:700;max-width:520px}
.gnav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);display:grid;place-items:center;opacity:.85}
.gnav-btn:hover{opacity:1}
.gnav-btn svg{width:18px;height:18px}
.gnav-btn.prev{inset-inline-start:16px}.gnav-btn.next{inset-inline-end:16px}
.gnav-btn[disabled]{opacity:0;pointer-events:none}
.dots{position:absolute;bottom:18px;inset-inline:0;display:flex;justify-content:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:color-mix(in srgb,var(--ink) 30%,transparent);cursor:pointer}
.dot.on{background:var(--ink)}
.buy-steps{display:grid;gap:52px}
.step-h{font-size:24px;line-height:1.25;font-weight:700;margin-bottom:18px}
.step-h span{color:var(--ink-2)}
.step-p{font-size:17px;line-height:1.7}
.opts{display:grid;gap:14px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;padding:20px 22px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:hover{border-color:var(--ink-3)}
.opt:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.opt-in{display:grid;gap:2px}
.opt-l{font-size:17px;font-weight:700}
.opt-s{font-size:14px;color:var(--ink-2)}
.opt-p{font-size:14px;color:var(--ink-2);white-space:nowrap}
.opt.is-off{cursor:default;opacity:.7}
.xlinks{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:15px}
.xlinks a{display:inline-flex;align-items:center;gap:6px}
.xlinks svg{width:15px;height:15px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{position:relative;padding-inline-start:30px;font-size:17px}
.checks li::before{content:"";position:absolute;inset-inline-start:2px;top:.45em;width:16px;height:16px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.box{background:var(--alt);border-radius:var(--r-card);padding:20px 22px;font-size:16px;color:var(--ink-2);margin:0}
.box.kv{color:var(--ink)}
.buy-steps .steps{margin:0;max-width:none}
.buy-steps .steps li{background:var(--alt)}
.btn-lg{min-height:52px;padding:14px 30px;font-size:18px}
.btn-off{background:var(--alt);color:var(--ink-2);cursor:default}

.summary{background:var(--alt);padding:64px 0;border-top:1px solid var(--line)}
.summary-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.summary-cta{display:grid;justify-items:end;gap:12px}
.summary .share-row{justify-content:flex-end;margin-top:6px}

.compare-sec{text-align:center}
.compare{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:24px;margin-top:48px}
.ccol{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 18px;border-radius:var(--r-tile);background:var(--card)}
.ccol.is-cur{box-shadow:0 0 0 2px var(--blue)}
.ccol img{width:84px;height:84px;margin-bottom:6px}
.ccol h3{font-size:24px;font-weight:700}
.ctag{font-size:15px;color:var(--ink-2);min-height:3em}
.cstate{font-size:13px;color:#bf4800;font-weight:500}
.cchips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.cfeats{list-style:none;padding:18px 0 0;margin:8px 0 0;border-top:1px solid var(--line);display:grid;gap:14px;font-size:14px;color:var(--ink-2);width:100%}

@media (max-width:900px){
  .buy{grid-template-columns:minmax(0,1fr);gap:36px}
  .buy-media{position:relative;top:0}
  .compare{grid-template-columns:repeat(var(--cols),minmax(220px,1fr));overflow-x:auto;padding-bottom:8px}
  .summary-cta{justify-items:start}.summary .share-row{justify-content:flex-start}
}

/* ——— أبيض ورمادي فقط، كما في موقع آبل */
.feature{background:var(--bg)}
.feature.alt,.gtile{background:var(--alt);color:var(--ink)}
.gtile.alt{background:var(--bg)}
.feature .sub,.gtile .sub{color:var(--ink)}

/* ——— روابط المنصات */
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.social a,.foot-links a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.social a{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;color:var(--ink)}
.social a:hover{text-decoration:none;border-color:var(--ink-3)}
.social svg,.foot-links svg{width:16px;height:16px}
.foot-links svg{width:14px;height:14px}
.follow-h{margin-top:36px;font-size:17px;font-weight:700}

/* الواجهة: شعار واسم أكبر، ومسافة أقصر حتى أول أداة */
.hero-scene{height:auto}
.hero-sticky{position:relative;top:auto;height:auto;padding:64px 0 8px;gap:22px}
.hero-scene .mark{width:min(230px,52vw);transform:none;opacity:1}
.hero-name{transform:none;opacity:1}
.callig{width:min(380px,80vw)}
.name-en{font-size:clamp(44px,7vw,72px)}
.scroll-cue{display:none}
#tools > .feature:first-of-type{padding-top:40px}
/* الأداة كلها قابلة للضغط: الاسم والصورة */
.feature .tname a{color:inherit;text-decoration:none}
.feature .tname a:hover{text-decoration:underline}
.art-link{display:block;cursor:pointer}
.art-link:hover .art img{transform:translateY(8%) scale(1.04);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* البريد */
.mail-link svg{width:18px;height:18px}
#tools > .feature:first-of-type .ftext{opacity:1;transform:none}

/* زر «راسلني» في الشريط العلوي وصندوق البريد */
.mail-btn{display:inline-flex;align-items:center;gap:6px;color:var(--ink);opacity:.85;font-size:13px}
.mail-btn:hover{opacity:1;text-decoration:none}
.mail-btn svg{width:15px;height:15px}
.mail-box{margin:34px auto 0;padding:26px 22px;max-width:420px;border-radius:22px;background:var(--alt)}
.mail-h{font-size:19px;font-weight:700;margin:0 0 14px}
.mail-box .btn svg{width:18px;height:18px}
.mail-addr{margin:12px 0 0;font-size:16px;color:var(--ink-2)}
/* أداء أسلس: لا ظلال مرشّحة على الصور المتحركة، والطبقات تُرسم على كرت الشاشة */
.feature .art img,.gtile .art img{filter:none}
.feature .art,.gtile .art{will-change:transform}
.feature .art::after,.gtile .art::after{content:"";position:absolute;inset:auto 14% -6% 14%;height:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);z-index:-1;transform:translateY(12%)}
.feature .art,.gtile .art{isolation:isolate}
.feature .ftext{will-change:opacity,transform}
.statement-scene{height:170vh}
.statement span{transition:none}
@media (max-width:600px){.statement-scene{height:150vh}}

/* ——— حركة بلا حساب مع التمرير: الأقسام تظهر بانتقال واحد عند دخولها الشاشة */
.feature .ftext{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);will-change:auto}
.feature .art{transform:translateY(90px) scale(.82);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);will-change:auto}
.feature.in .ftext{opacity:1;transform:none}
.feature.in .art{transform:none}
#tools > .feature:first-of-type .ftext{opacity:1;transform:none}
.statement-scene{height:auto;padding:120px 0}
.statement-sticky{position:static;height:auto}
.statement span{opacity:.14;transition:opacity .6s ease;transition-delay:calc(var(--i) * 140ms)}
.statement-scene.in .statement span{opacity:1}
@media (max-width:600px){.statement-scene{height:auto;padding:90px 0}}
.gnav{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (prefers-reduced-motion:reduce){.feature .ftext,.feature .art,.statement span{opacity:1!important;transform:none!important;transition:none!important}}

/* القسم كله يفتح صفحة الأداة، والأزرار تبقى تعمل */
.feature{position:relative;cursor:pointer}
.feature-link{position:absolute;inset:0;z-index:1}
.feature .ftext{position:relative;z-index:2;pointer-events:none}
.feature .ftext a,.feature .ftext button{pointer-events:auto}
.feature .art-link{position:relative;z-index:2}
/* حجم متوسط للشعار والاسم */
.hero-scene .mark{width:min(200px,46vw)}
.callig{width:min(320px,70vw)}
.name-en{font-size:clamp(40px,6vw,60px)}

/* ——— إرجاع تأثير الواجهة والعبارة كلمة كلمة (مربوطان بالتمرير، بخصائص خفيفة فقط) */
[data-scrub]{--p:0}
.hero-scene{height:132vh}
.hero-sticky{position:sticky;top:48px;height:calc(100vh - 48px);padding:0;justify-content:center;gap:22px}
.hero-scene .mark{width:min(185px,44vw);transform:scale(calc(1 + var(--p) * 2.2));opacity:calc(1 - var(--p) * 1.6);will-change:transform,opacity}
.hero-name{opacity:calc(1 - var(--p) * 2.2);transform:translateY(calc(var(--p) * -60px));will-change:transform,opacity}
.callig{width:min(290px,66vw)}
.scroll-cue{display:block}
#tools > .feature:first-of-type{padding-top:56px}
.statement-scene{height:200vh;padding:0}
.statement-sticky{position:sticky;top:48px;height:calc(100vh - 48px)}
.statement span{opacity:clamp(.14, calc(var(--p) * var(--n) * 1.15 - var(--i)), 1);transition:none}
@media (max-width:600px){.statement-scene{height:170vh;padding:0}}
@media (prefers-reduced-motion:reduce){
  .hero-scene,.statement-scene{height:auto}
  .hero-sticky,.statement-sticky{position:static;height:auto;padding:80px 0}
  .hero-scene .mark,.hero-name{transform:none!important;opacity:1!important}
  .statement span{opacity:1!important}
}

/* أخف على سفاري: الاسم SVG مضمّن بلون النص (لا قناع)، والشريط العلوي بلا ضبابية */
svg.callig{display:block;height:auto;aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;color:var(--ink);margin:0 auto}
svg.callig path{fill:currentColor}
:root{--nav-bg:rgba(250,250,252,.97);--lnav-bg:rgba(255,255,255,.97)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nav-bg:rgba(22,22,23,.97);--lnav-bg:rgba(22,22,23,.97)}}
:root[data-theme="dark"]{--nav-bg:rgba(22,22,23,.97);--lnav-bg:rgba(22,22,23,.97)}
.gnav,.lnav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}