/* صفحة الهبوط. كل القيم من متغيرات tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:16px;line-height:28px;-webkit-text-size-adjust:100%}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%}
a{color:var(--link)}
a:focus-visible,summary:focus-visible,select:focus-visible,.theme-toggle:focus-visible,.mq-table-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip-link{position:absolute;inset-inline-start:var(--space-4);top:-100px;z-index:20;padding:var(--space-3) var(--space-4);background:var(--brand);color:var(--on-brand);border-radius:var(--radius-md);font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--space-3)}

.container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-4)}
.container--narrow{max-width:720px}
@media (min-width:640px){.container{padding-inline:var(--space-5)}}

/* الشريط العلوي */
.site-nav{position:sticky;top:0;z-index:10;gap:var(--space-3);padding:var(--space-2) var(--space-4)}
.site-nav__brand{display:block;line-height:0;border-radius:var(--radius-md)}
.site-nav__links{display:none}
.site-nav .mq-logo{height:36px;width:auto}
@media (min-width:640px){
  .site-nav{padding:var(--space-3) var(--space-5);gap:var(--space-5)}
  .site-nav__links{display:flex}
}
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s ease}
.theme-toggle:hover{background:var(--surface-sunken)}
.theme-toggle__sun{display:none}
html[data-theme="dark"] .theme-toggle__sun{display:block}
html[data-theme="dark"] .theme-toggle__moon{display:none}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .theme-toggle__sun{display:block}
  html:not([data-theme="light"]) .theme-toggle__moon{display:none}
  html:not([data-theme="light"]) .mq-logo--light{display:none}
  html:not([data-theme="light"]) .mq-logo--dark{display:block}
}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}}

/* المقاطع */
.section{padding-block:var(--space-7)}
.section--sunken{background:var(--surface-sunken)}
@media (min-width:1024px){.section{padding-block:var(--space-8)}}
.section__title{margin-bottom:var(--space-5)}
.section__lead{max-width:65ch;margin-top:calc(var(--space-3) * -1);margin-bottom:var(--space-5);color:var(--ink-muted)}
.display-lg{font-size:28px;line-height:42px}
@media (min-width:640px){.display-lg{font-size:36px;line-height:52px}}

.grid{display:grid;gap:var(--space-5)}
.grid--4{grid-template-columns:1fr}
.grid--2{grid-template-columns:1fr}
@media (min-width:640px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* المقدمة */
.hero{padding-block:var(--space-7);background:var(--bg)}
.hero__inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.hero__title{font-size:36px;line-height:52px;max-width:16ch}
.hero__text{max-width:56ch;color:var(--ink-muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.hero__note{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-muted)}
.hero__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}
@media (min-width:640px){.hero__title{font-size:48px;line-height:68px}}
@media (min-width:1024px){.hero{padding-block:var(--space-8)}.hero__title{font-size:56px;line-height:80px}}

/* المشكلة */
.problem-list{display:grid;gap:var(--space-4);max-width:720px}
.problem-list li{position:relative;padding-inline-start:var(--space-5)}
.problem-list li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* الخدمات */
.icon-box{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-xl);background:var(--surface-sunken);color:var(--brand)}

/* كيف تعمل */
.how-steps{display:grid;gap:var(--space-5);counter-reset:none}
@media (min-width:768px){.how-steps{grid-template-columns:repeat(3,1fr)}}
.how-step{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.how-step__n{width:44px;height:44px;font-size:18px;background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.how-step__title{margin-top:var(--space-2)}
.how-step__text{color:var(--ink-muted)}

/* اللقطة */
.preview-table{margin-top:var(--space-4)}
.mq-summary{margin-top:0}
@media (max-width:479px){.col-service{display:none}.preview-table .mq-table th,.preview-table .mq-table td{padding-inline:var(--space-3)}}

/* الأسعار */
.price-badge{align-self:flex-start}
.price-example{margin-top:var(--space-5);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* الأسئلة */
.faq{display:grid;gap:var(--space-3)}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-size:18px;line-height:30px;font-weight:700;cursor:pointer;list-style:none;border-radius:var(--radius-md)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";flex:none;font-family:var(--font-text);font-size:24px;line-height:1;color:var(--ink-muted)}
.faq__item[open] .faq__q::after{content:"−"}
.faq__a{padding:0 var(--space-4) var(--space-4);color:var(--ink-muted);max-width:65ch}

/* النموذج */
.waitlist-form{display:grid;gap:var(--space-4);margin-top:var(--space-4)}
.waitlist-form select.mq-input{width:100%}
.waitlist-form .mq-input{width:100%}
.waitlist-form__submit{margin-top:var(--space-2);width:100%}
@media (min-width:640px){.waitlist-form__submit{width:auto;justify-self:start}}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.mq-alert{margin-top:var(--space-4)}

/* التذييل */
.site-footer{background:var(--panel);color:var(--on-panel);padding-block:var(--space-7)}
.site-footer__inner{display:flex;flex-direction:column}
.site-footer__tagline{margin-top:var(--space-3);max-width:40ch}
.site-footer__rights{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--on-panel)}
