/* Nafetha shared styles for inner pages (preview tool + sector pages) */
:root {
  --teal: #0E4D4A; --teal-deep: #0A3836; --teal-2: #145F5B; --mint: #D5E6E4; --mint-soft: #EEF5F4;
  --gold: #E2B04A; --gold-ink: #8A6416; --paper: #FFFFFF; --ink: #1B1B1F; --muted: #55555C; --line: #E1E7E6; --wa: #1F8A4C;
  --display: 'El Messiri', 'IBM Plex Sans Arabic', serif;
  --body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.7; overflow-x: hidden }
a { color: inherit }
img, svg { max-width: 100% }
button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit }
input, select, textarea { min-width: 0; max-width: 100% }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.3; margin: 0; text-wrap: balance }
p { margin: 0 }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px }
.ltr { direction: ltr; unicode-bidi: isolate }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 600; font-size: 17px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap }
.btn-gold { background: var(--gold); color: var(--teal-deep) } .btn-gold:hover { background: #EBBE5E }
.btn-line { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.55) } .btn-line:hover { border-color: #FFFFFF }
.btn-teal { background: var(--teal); color: #FFFFFF } .btn-teal:hover { background: var(--teal-deep) }
.btn-wa { background: var(--wa); color: #FFFFFF }
.btn-ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--teal) }

.top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line) }
@supports (backdrop-filter: blur(8px)) { .top { background: rgba(255,255,255,.85); backdrop-filter: blur(10px) } }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teal) }
.brand b { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1 }
.top nav { display: flex; gap: 24px; font-size: 15.5px }
.top nav a { text-decoration: none; color: #3A3A40 } .top nav a:hover { color: var(--teal) }
.top .actions { display: flex; align-items: center; gap: 10px }
.lang { background: transparent; color: var(--teal); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 42px; font-weight: 600; cursor: pointer }
.top .btn { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 999px }
@media (max-width: 860px) { .top nav { display: none } }
@media (max-width: 420px) { .top .btn { display: none } }

section.blk { padding-block: 88px }
@media (max-width: 700px) { section.blk { padding-block: 60px } }
.head { max-width: 680px; margin-bottom: 40px }
.head h2 { font-size: clamp(28px, 4.2vw, 42px); color: var(--teal-deep) }
.head p { color: var(--muted); font-size: 18px; margin-top: 12px }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--gold-ink); background: #FBF2DE; border-radius: 999px; padding: 4px 14px; margin-bottom: 14px }

.faq details { border-top: 1px solid var(--line) }
.faq details:last-child { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; align-items: center }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--teal); line-height: 1; transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { color: var(--muted); padding-bottom: 20px; max-width: 40em }

footer { background: var(--teal-deep); color: #A9C4C1 }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px 96px; font-size: 14.5px }
footer a { color: #FFFFFF; text-decoration: none }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px }
.wafloat { position: fixed; inset-inline-start: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; background: var(--wa); color: #FFFFFF; text-decoration: none; font-weight: 600; border-radius: 999px; padding: 0 20px 0 16px; min-height: 52px; box-shadow: 0 10px 24px rgba(0,0,0,.2) }
@media (max-width: 520px) { .wafloat span { display: none } .wafloat { padding: 0; width: 56px; justify-content: center } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
  html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
  html.js .rv.in { opacity: 1; transform: none }
}