/* [2026-10-29] موقع فقار سيستمز — طبقة الصفحة فوق «بحر». رموز فقط وخصائص منطقية (RTL). بلا style مضمَّن (CSP). */
:root{--container:1120px;--header-h:68px}
html{scroll-behavior:smooth;scroll-padding-block-start:calc(var(--header-h) + var(--s-4))}
body{min-block-size:100dvh;overflow-x:clip}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-inline-size:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
.container{max-inline-size:var(--container);margin-inline:auto;padding-inline:var(--s-5)}
.skip{position:absolute;inset-inline-start:var(--s-4);inset-block-start:-64px;background:var(--primary);color:var(--on-primary);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);z-index:200}
.skip:focus{inset-block-start:var(--s-3)}
.muted{color:var(--text-2)}
.ico{display:inline-grid;place-items:center;flex:none;line-height:0}
.ico svg{inline-size:1.15em;block-size:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.site-header{position:sticky;inset-block-start:0;z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block-end:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;gap:var(--s-4);block-size:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--s-3);font-weight:800;font-size:var(--fs-lg);min-inline-size:0}
.brand small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--text-3);margin-block-start:2px;letter-spacing:.06em}
.logo{inline-size:42px;block-size:42px;flex:none}
.logo .bg{fill:var(--primary)}
.logo .fg{fill:var(--on-primary)}
.logo .dot{fill:var(--coral)}
.nav{display:none;gap:var(--s-1);margin-inline:auto}
.nav a{padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);color:var(--text-2);font-weight:600;font-size:var(--fs-sm)}
.nav a:hover{background:var(--primary-soft);color:var(--primary-text)}
.header-cta{margin-inline-start:auto}
.menu-btn{margin-inline-start:var(--s-2)}
.site-header .btn,.drawer .btn{min-block-size:44px;min-inline-size:44px}
.btn-sm,.btn-icon{min-block-size:44px}
@media (min-width:900px){.nav{display:flex}.menu-btn{display:none}.header-cta{margin-inline-start:0}}
.drawer{position:fixed;inset:0;z-index:90}
.drawer[hidden]{display:none}
.drawer-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--deep) 55%,transparent)}
.drawer-panel{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(320px,88vw);background:var(--surface);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.drawer-panel a{padding:var(--s-4);border-radius:var(--r-md);font-weight:600}
.drawer-panel a:hover{background:var(--primary-soft)}

.hero{padding-block:clamp(48px,8vw,104px) clamp(48px,7vw,96px)}
.hero-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;max-block-size:560px;background:var(--surface-3);inline-size:100%;margin-inline:auto}
@media (max-width:899px){.hero-photo{aspect-ratio:4/3;max-block-size:340px}}
.hero-photo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.hero-photo figcaption{position:absolute;inset-block-end:var(--s-3);inset-inline-start:var(--s-3);background:color-mix(in srgb,var(--deep) 72%,transparent);color:var(--bg);font-size:var(--fs-xs);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill)}
.app{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.app-icon{inline-size:72px;block-size:72px;border-radius:var(--r-md)}
.after{margin-block-start:clamp(24px,4vw,40px)}
.hero h1{font-size:clamp(30px,4.6vw,54px);line-height:1.25;font-weight:800}
.hero h1 em{font-style:normal;color:var(--primary)}
.lead{font-size:clamp(16px,1.8vw,20px);color:var(--text-2);max-inline-size:640px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-text);font-weight:700;font-size:var(--fs-sm)}
.eyebrow .ico svg{inline-size:1em;block-size:1em}

.section{padding-block:clamp(48px,7vw,88px)}
.section.alt{background:var(--surface-2)}
.section-head{max-inline-size:720px;margin-block-end:clamp(24px,4vw,44px)}
.section-head h2{font-size:clamp(24px,3.2vw,var(--fs-3xl))}
.section-head p{color:var(--text-2);margin-block-start:var(--s-3);font-size:var(--fs-lg)}
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.icon-badge{inline-size:48px;block-size:48px;border-radius:var(--r-md);display:inline-grid;place-items:center;background:var(--primary-soft);color:var(--primary-text);font-size:24px;margin-block-end:var(--s-3)}
.card h3{margin-block-end:var(--s-2)}
.product{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.product-head{display:flex;align-items:center;gap:var(--s-4)}
.product-head .icon-badge{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:var(--s-2)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:clamp(24px,4vw,44px)}

.site-footer{background:var(--deep);color:var(--bg);padding-block:var(--s-9) var(--s-7)}
.foot{display:grid;gap:var(--s-6)}
@media (min-width:760px){.foot{grid-template-columns:1.4fr 1fr}}
.foot h4{color:var(--bg);margin-block-end:var(--s-3);font-size:var(--fs-md)}
.foot a{display:block;color:color-mix(in srgb,var(--bg) 82%,transparent);padding-block:var(--s-1)}
.foot a:hover{color:var(--bg)}
.foot a.brand{display:flex;color:var(--bg);padding-block:0}
.foot .brand small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.foot p{color:color-mix(in srgb,var(--bg) 72%,transparent);font-size:var(--fs-sm);max-inline-size:340px;margin-block-start:var(--s-3)}
.copy{margin-block-start:var(--s-7);padding-block-start:var(--s-5);border-block-start:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:var(--fs-sm);color:color-mix(in srgb,var(--bg) 70%,transparent)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media (max-width:480px){.brand small{display:none}.logo{inline-size:36px;block-size:36px}}

/* ====== صفحات داخلية ====== */
.page-head{padding-block:clamp(40px,6vw,80px) clamp(8px,2vw,24px)}
.page-head h1{font-size:clamp(28px,4vw,44px);margin-block:var(--s-4) var(--s-3);line-height:1.3}
.prose-wrap{max-inline-size:820px}
.prose h2{margin-block:var(--s-7) var(--s-3);font-size:var(--fs-2xl)}
.prose h2:first-child{margin-block-start:0}
.prose h3{margin-block:var(--s-5) var(--s-2);font-size:var(--fs-lg)}
.prose p,.prose li{color:var(--text-2);font-size:var(--fs-md);line-height:1.9}
.prose p{margin-block-end:var(--s-3)}
.prose strong{color:var(--text)}
.list{padding-inline-start:var(--s-6);display:grid;gap:var(--s-2);margin-block-end:var(--s-3);list-style:disc}
.steps{padding-inline-start:var(--s-6);display:grid;gap:var(--s-3);list-style:decimal;margin-block-end:var(--s-3)}
.link{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.values{margin-block:var(--s-4)}
.faq-h{font-size:var(--fs-2xl);margin-block:var(--s-7) var(--s-4)}
.faq-h:first-child{margin-block-start:0}
.faq{display:grid;gap:var(--s-3)}
.faq details{background:var(--surface);border-radius:var(--r-md);padding-inline:var(--s-5);box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;font-weight:700;padding-block:var(--s-3);list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);min-block-size:48px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--primary);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--text-2);padding-block-end:var(--s-4);line-height:1.9}

/* ====== السعر ====== */
.price-card{display:grid;gap:var(--s-7);background:var(--surface);border-radius:var(--r-xl);padding:clamp(24px,5vw,56px);box-shadow:var(--sh-1);align-items:center}
@media (min-width:900px){.price-card{grid-template-columns:1.3fr .7fr}}
.price-main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.price-main h2{font-size:clamp(26px,3.6vw,var(--fs-3xl))}
.price-tag{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.price-num{font-size:clamp(52px,9vw,88px);font-weight:800;color:var(--primary);line-height:1}
.price-unit{font-size:var(--fs-lg);font-weight:700;color:var(--text);line-height:1.5}
.price-unit small{font-weight:500;color:var(--text-2);font-size:var(--fs-sm)}
.checks{display:grid;gap:var(--s-4)}
.checks li{display:flex;gap:var(--s-3);align-items:flex-start;font-weight:600}
.checks .ico{color:var(--primary);font-size:22px}

/* ===== [2026-10-29] الهاتف والآيباد أولًا: أحجام وخطوط أصغر، بطاقتان متجاورتان، معلومات أكثر في الشاشة ===== */
@media (max-width:760px){
  :root{--fs-xs:11.5px;--fs-sm:12.5px;--fs-md:14px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:20px;--fs-3xl:23px;--header-h:56px}
  .container{padding-inline:var(--s-4)}
  .section{padding-block:var(--s-7)}
  .section-head{margin-block-end:var(--s-5)}
  .section-head h2{font-size:var(--fs-2xl)}
  .section-head p{font-size:var(--fs-md)}
  .hero{padding-block:var(--s-5) var(--s-6)}
  .hero-grid{gap:var(--s-5)}
  .hero h1{font-size:25px;line-height:1.35}
  .hero-text{gap:var(--s-4)}
  .lead{font-size:var(--fs-md)}
  .hero-actions{gap:var(--s-2)}
  .hero-actions .btn-lg{flex:1 1 auto;justify-content:center;padding-inline:var(--s-4)}
  .hero-photo{aspect-ratio:16/9;max-block-size:200px}
  .card{padding:var(--s-4)}
  .g2,.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .g3>:last-child:nth-child(odd){grid-column:1/-1}
  .app-icon{inline-size:56px;block-size:56px}
  .icon-badge{inline-size:40px;block-size:40px;font-size:20px;margin-block-end:var(--s-2)}
  .card h3{font-size:var(--fs-md)}
  .card p{font-size:var(--fs-sm)}
  .btn-lg{padding-block:var(--s-3);font-size:var(--fs-md)}
  .price-card{padding:var(--s-5);gap:var(--s-5)}
  .price-num{font-size:48px}
  .checks{gap:var(--s-3)}
  .checks li{font-size:var(--fs-sm)}
  .cta{padding:var(--s-5)}
  .prose h2{font-size:var(--fs-xl);margin-block:var(--s-5) var(--s-2)}
  .prose p,.prose li{font-size:var(--fs-md);line-height:1.8}
  .faq-h{font-size:var(--fs-xl);margin-block:var(--s-5) var(--s-3)}
  .faq summary{font-size:var(--fs-md);min-block-size:44px}
  .page-head{padding-block:var(--s-6) var(--s-2)}
  .page-head h1{font-size:24px}
  .site-footer{padding-block:var(--s-7) var(--s-5)}
}
@media (min-width:761px) and (max-width:1100px){
  :root{--fs-md:14.5px}
  .section{padding-block:var(--s-8)}
  .hero-photo{max-block-size:320px}
}
@media (max-width:760px){
  .foot{grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:start}
  .foot h4{font-size:var(--fs-sm);margin-block-end:var(--s-1)}
  .foot a{font-size:var(--fs-sm);padding-block:2px}
  .foot p{font-size:var(--fs-xs)}
  .copy{margin-block-start:var(--s-4);padding-block-start:var(--s-3);font-size:var(--fs-xs)}
}
@media (max-width:760px){.price-main h2{font-size:var(--fs-2xl)}.price-main .lead{font-size:var(--fs-md)}}