/* Clinic+ OS — موقع البيع. المنظومة في DESIGN.md: لونان، وزنان، 7 أحجام، زاوية 20/999، منحنى واحد. */
@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(fonts/tajawal-ar-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(fonts/tajawal-la-400.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:Tajawal;font-weight:700;font-display:swap;src:url(fonts/tajawal-ar-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(fonts/tajawal-la-700.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{
  --canvas:#EEF4F4;--card:#FFFFFF;
  --ink:#0F2E33;--ink2:#3D5158;--muted:#5D7B82;--line:#CFDEDE;--line-soft:#E7EFEF;
  --mint:#25A88D;--mint-deep:#158872;--mint-a:#3DDAB4;--mint-b:#23B4B9;--mint-50:#EFFAF7;--mint-100:#D6F3EB;
  --grad:linear-gradient(135deg,#3DDAB4 0%,#23B4B9 100%);
  --r:20px;--pill:999px;
  --ease:cubic-bezier(.23,1,.32,1);--t1:200ms;--t2:400ms;
  --s1:14px;--s2:16px;--s3:18px;--s4:22px;--s5:28px;--s6:32px;--s7:clamp(1.9rem,3.4vw,2.8rem);--s8:clamp(2.4rem,4.6vw,3.6rem);
  --shadow:0 1px 2px rgba(15,46,51,.04),0 8px 24px -12px rgba(15,46,51,.12);
  --lift:0 2px 4px rgba(15,46,51,.05),0 18px 40px -18px rgba(15,46,51,.22);
  --glow:0 10px 30px -10px rgba(37,168,141,.55);
}
*{box-sizing:border-box}
button,summary{font-family:inherit;font-size:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink2);font-family:Tajawal,"Segoe UI",system-ui,sans-serif;font-size:var(--s2);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:var(--s7);line-height:1.12}
h2{font-size:var(--s6)}
/* توسيط النصّ — طلب المالك 2026-09-06 */
main{text-align:center}
.sec-head,.lede,.note,.faq-list,.legal,.feat-copy,.mc,.trial-card,.dl-card{margin-inline:auto}
.tbl,.tbl th,.tbl td,.mc,.mnav{text-align:start}
.check li,.ol li{text-align:start}
.check,.ol{width:fit-content;margin-inline:auto}
.hero-cta,.facts,.pills,.price,.mail,.more,.tour{justify-content:center}
.trial-card{justify-items:center}
.price-card{text-align:center}
h3{font-size:var(--s4)}
p{margin:0}
a{color:var(--mint-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
bdi,[dir=ltr]{unicode-bidi:isolate}
.wrap{width:min(1180px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.skip{position:absolute;inset-inline-start:8px;top:-48px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--pill);z-index:99}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--mint-deep);outline-offset:3px}

/* ---- أزرار: ستّ حالات ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--pill);font:inherit;font-weight:700;font-size:var(--s2);line-height:1;cursor:pointer;border:1px solid transparent;text-decoration:none!important;transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease),background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.btn-l{min-height:52px;padding:14px 28px;font-size:var(--s3)}
.btn-p{background:var(--grad);color:var(--ink);box-shadow:var(--glow)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(37,168,141,.65)}
.btn-p:active{transform:translateY(0);box-shadow:0 4px 12px -6px rgba(37,168,141,.6)}
.btn-g{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:var(--mint);transform:translateY(-1px)}
.btn-g:active{transform:none;background:var(--mint-50)}
.btn.is-disabled,.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--ink);border-inline-end-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- الرأس ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(238,244,244,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;justify-content:center;gap:28px;min-height:68px}
.top nav{margin:0}
.lang{font-weight:700;font-size:var(--s1);color:var(--ink2);padding:10px 12px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);min-height:44px;display:inline-flex;align-items:center}
.lang:hover{border-color:var(--mint);text-decoration:none}
[dir=ltr] .hero-copy .lede{margin-inline:0}
.top nav ul{display:flex;gap:4px}
.top nav a{display:inline-block;padding:10px 14px;min-height:44px;border-radius:var(--pill);color:var(--ink2);font-weight:700;font-size:var(--s1);transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.top nav a:hover{background:var(--mint-50);color:var(--ink);text-decoration:none}
.top nav a[aria-current]{background:var(--mint-100);color:var(--ink)}
.logo img{width:140px;height:32px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:var(--pill);cursor:pointer;place-items:center;margin-inline-start:auto}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;content:"";transition:transform var(--t1) var(--ease)}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{border-top:1px solid var(--line-soft);background:var(--card)}
.mnav ul{display:grid;padding:8px clamp(16px,4vw,48px) 16px}
.mnav a{display:block;padding:12px 8px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-soft)}

/* ---- الأقسام ---- */
section{padding-block:clamp(56px,8vw,112px)}
.sec-head{max-width:64ch;margin-block-end:clamp(28px,4vw,48px)}
.eyebrow{color:var(--mint-deep);font-weight:700;font-size:var(--s1);letter-spacing:0;margin-block-end:12px}
.lede{font-size:var(--s3);color:var(--ink2);margin-block-start:14px;max-width:60ch}
.fine{font-size:var(--s1);color:var(--muted)}
.card{background:var(--card);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
.card h3{margin-block-end:10px}
.two{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.h-sec{margin-block-end:24px}

/* ---- الكشف عند الدخول: كلمات ثمّ أقسام ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-block-end:.16em;margin-block-end:-.16em}
.wi{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease)}
.js .in .wi{transform:none}
.no-js .wi{transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--t2) var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---- البطل ---- */
.hero{position:relative;padding-block:clamp(40px,6vw,88px) clamp(40px,6vw,80px);overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(24px,4vw,56px);align-items:center;position:relative;z-index:1}
.hero-copy{text-align:start}
.hero-copy .lede{margin-inline:0}
.hero .hero-cta,.hero .facts{justify-content:flex-start}
.hero .facts li{text-align:start}
.hero-copy .lede{margin-block-start:20px}
.hero-shot{width:100%}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-block-start:32px;padding-block-start:20px;border-top:1px solid var(--line)}
.facts li{display:grid;gap:2px;text-align:center}
.facts b{color:var(--ink);font-size:var(--s3)}
.facts span{font-size:var(--s1);color:var(--muted)}
.orb{position:absolute;inset-inline-end:-12vw;top:-10vw;width:52vw;height:52vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(61,218,180,.28),rgba(35,180,185,.08) 60%,transparent 72%);pointer-events:none}
.shot{display:block;width:100%;padding:0;border:0;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);cursor:zoom-in;transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.shot:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(15,46,51,.06),0 28px 56px -20px rgba(15,46,51,.28)}
.shot:active{transform:translateY(-1px)}
.shot img{width:100%}
.shot-hero{transform:none}

/* ---- المسار ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps li{position:relative;background:var(--card);border-radius:var(--r);padding:24px 20px 20px;box-shadow:var(--shadow);display:grid;gap:4px;align-content:start}
.steps i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:var(--ink);font-style:normal;font-weight:700;font-size:var(--s1);margin-block-end:10px}
.steps b{color:var(--ink);font-size:var(--s4)}
.steps span{font-size:var(--s1);color:var(--muted)}
.steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:-12px;top:39px;width:12px;height:2px;background:var(--line)}

/* ---- خريطة الشاشة ---- */
.map-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.4fr);gap:24px;align-items:start}
.map-cards{display:grid;gap:10px}
.mc{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:start;font:inherit;color:inherit;background:var(--card);border:1px solid transparent;border-radius:var(--r);padding:14px 16px;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--t1) var(--ease),border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.mc i{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint-100);color:var(--mint-deep);font-style:normal;font-weight:700;font-size:var(--s1);transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.mc b{color:var(--ink);font-size:var(--s2)}
.mc p{font-size:var(--s1);color:var(--muted);line-height:1.55}
.mc:hover,.mc.on{border-color:var(--mint);box-shadow:var(--lift);transform:translateY(-2px)}
.mc.on i{background:var(--grad);color:var(--ink)}
.map-shot{position:sticky;top:88px;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);background:var(--card)}
.hot{position:absolute;border:2px solid transparent;border-radius:12px;pointer-events:none;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.hot.on{border-color:var(--mint-deep);box-shadow:0 0 0 4px rgba(37,168,141,.18),0 0 0 9999px rgba(238,244,244,.55)}
.hot i{position:absolute;inset-inline-end:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--grad);color:var(--ink);font-style:normal;font-weight:700;font-size:var(--s1);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
.hot.on i{opacity:1;transform:none}
.tour{margin-block-start:20px}

/* ---- الشاشات ---- */
.grid-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 24px}
.grid-shots h3{margin-block:14px 4px;font-size:var(--s3)}
.grid-shots p{font-size:var(--s1);color:var(--muted)}
.more{margin-block-start:32px}

/* ---- القواعد ---- */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.rules-grid li{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);border-inline-start:3px solid var(--mint)}
.rules-grid h3{font-size:var(--s3);margin-block-end:8px}
.rules-grid p{font-size:var(--s1);color:var(--ink2)}

/* ---- الخصوصيّة ---- */
.priv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.tbl{width:100%;border-collapse:collapse;font-size:var(--s1);margin-block:12px}
.tbl th,.tbl td{text-align:start;padding:10px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl th{color:var(--ink);font-weight:700;white-space:nowrap}
.tbl thead th{color:var(--muted);font-weight:400}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}

/* ---- التخصّصات ---- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills li{background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:8px 18px;font-weight:700;color:var(--ink)}
.note{margin-block-start:16px;max-width:64ch;color:var(--muted);font-size:var(--s1)}
.seed{margin-block-start:36px}
.seed ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-block-start:14px}
.seed li,.nums li{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:grid;gap:2px}
.seed b,.nums b{font-size:var(--s5);color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.seed span,.nums span{font-size:var(--s1);color:var(--muted)}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}

/* ---- السعر ---- */
.price-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
.price-card{background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,40px);box-shadow:var(--lift);border-top:4px solid transparent;border-image:var(--grad) 1;border-radius:var(--r)}
.price{display:flex;align-items:baseline;gap:10px;font-size:var(--s8);font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.price .cur{font-size:var(--s5);color:var(--mint-deep);margin-inline-end:2px}
.price .unit{font-size:var(--s2);color:var(--muted);font-weight:400}
.once{margin-block:8px 20px;color:var(--ink2);font-weight:700}
.check{display:grid;gap:10px;margin-block:8px}
.check li{padding-inline-start:28px;position:relative}
.check li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--grad);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.check.plain li::before{background:var(--muted)}
.price-cta{margin-block:24px 8px}
.trial-card{background:var(--mint-50);border-radius:var(--r);padding:clamp(24px,3vw,32px);display:grid;gap:12px;justify-items:start}
.trial-card h3{font-size:var(--s4)}

/* ---- أسئلة ---- */
.faq-list{max-width:76ch;display:grid;gap:8px}
details{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 20px}
summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint-100);color:var(--mint-deep);display:grid;place-items:center;font-size:var(--s3);transition:transform var(--t1) var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-block:0 18px;color:var(--ink2)}

/* ---- التحميل ---- */
.dl-card{text-align:center;display:grid;justify-items:center;gap:10px;padding:clamp(32px,5vw,64px)}
.dl-cta{margin-block:12px}
.dl-card .fine{max-width:56ch}
.gap-mark{display:inline-block;background:#FFE7E7;color:#8A1F1F;border:1px dashed #C44;border-radius:6px;padding:2px 8px;font-size:var(--s1);font-weight:700}
.gap-draft{background:#FFF4DA;color:#7A4B00;border-color:#C98A00}

/* ---- صفحات داخليّة ---- */
.page-head{padding-block:clamp(40px,6vw,80px) clamp(16px,3vw,32px)}
.page-head .sec-head{margin-block-end:16px}
.feat-list{display:grid;gap:clamp(40px,6vw,80px)}
.feat{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(20px,4vw,48px);align-items:center}
.feat.alt .feat-copy{order:2}
.feat h2{font-size:var(--s4);margin-block-end:10px}
.ol{counter-reset:o;display:grid;gap:12px;margin-block-start:8px}
.ol li{counter-increment:o;padding-inline-start:36px;position:relative}
.ol li::before{content:counter(o);position:absolute;inset-inline-start:0;top:.1em;width:26px;height:26px;border-radius:50%;background:var(--mint-100);color:var(--mint-deep);font-weight:700;font-size:var(--s1);display:grid;place-items:center}
.legal{max-width:76ch;display:grid;gap:12px}
.legal h2{font-size:var(--s4);margin-block-start:20px}
.mail{margin-block-start:20px}

/* ---- الذيل ---- */
.foot{padding-block:clamp(40px,5vw,64px) 28px;border-top:1px solid var(--line-soft);background:var(--card)}
.foot-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}
.foot-brand p{margin-block-start:12px;color:var(--muted);font-size:var(--s1)}
.foot h3{font-size:var(--s1);color:var(--muted);font-weight:700;margin-block-end:10px}
.foot li{margin-block:6px}
.foot a{color:var(--ink2);display:inline-block;padding:6px 0;min-height:44px;line-height:32px}
.credit{margin-block-start:36px;padding-block-start:20px;border-top:1px solid var(--line-soft)}

/* ---- الصورة المكبَّرة ---- */
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);width:96vw}
.lb::backdrop{background:rgba(15,46,51,.82);backdrop-filter:blur(6px)}
.lb img{width:100%;border-radius:var(--r);box-shadow:var(--lift)}
.lb-cap{color:#fff;text-align:center;margin-block-start:12px;font-size:var(--s1)}
.lb-x{position:absolute;inset-inline-end:8px;top:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;cursor:pointer;z-index:1}

/* ---- استجابة ---- */
@media (max-width:1000px){
  .top nav,.top>.wrap>.btn,.top>.wrap>.lang{display:none}
  .top .wrap{justify-content:space-between}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr}
  .shot-hero,.shot-hero:hover{transform:none}
  .steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .steps li:not(:last-child)::after{display:none}
  .map-grid{grid-template-columns:1fr}
  .map-shot{position:static;order:-1}
  .hot.on{box-shadow:0 0 0 4px rgba(37,168,141,.18)}
  .price-grid,.feat,.feat.alt{grid-template-columns:1fr}
  .feat.alt .feat-copy{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .facts{gap:8px 20px}
  .steps{grid-template-columns:1fr 1fr}
}
@media (hover:none){.shot:hover,.mc:hover,.btn:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wi,.rv,.shot,.mc,.btn,.hot,.hot i{transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}