/* Mentora Bilingual Site - clean, responsive, RTL-aware */
:root{
  --bg:#0f172a; --text:#0b1020; --muted:#475569;
  --brand:#0ea5e9; --brand-2:#0284c7;
  --surface:#ffffff; --alt:#f8fafc; --ring: rgba(2,132,199,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[dir="rtl"] body{font-family: "Noto Naskh Arabic", Tahoma, Arial, sans-serif}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text); background:var(--surface); line-height:1.6;
}
.container{max-width:1120px; margin-inline:auto; padding:0 20px}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
.tiny{font-size:.82rem; color:var(--muted)}
.center{text-align:center}

.site-header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e5e7eb}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800}
.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.lang-toggle{border:1px solid #cbd5e1; padding:6px 10px; border-radius:10px; font-weight:700; cursor:pointer; background:#fff}

.hero{background: radial-gradient(1200px 500px at 10% 10%, #cffafe 0%, transparent 60%), radial-gradient(800px 300px at 90% 0%, #e2e8f0 0%, transparent 60%); padding:72px 0 48px}
.hero h1{font-size:clamp(2rem, 3.2vw, 3rem)}
.hero .lead{font-size:1.125rem; color:var(--muted)}

.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid #cbd5e1; border-radius:10px; padding:10px 14px; font-weight:700}
.btn--primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn--ghost{background:#fff}
.btn--sm{padding:8px 12px}

.section{padding:56px 0}
.section--alt{background:var(--alt)}
.cards{display:grid; gap:18px; grid-template-columns: repeat(4,1fr)}
@media (max-width:1100px){.cards{grid-template-columns: repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px}
.features{margin:.5rem 0 0; padding-left:18px}
.features li{margin:.3rem 0}

.pricing{display:grid; gap:18px; grid-template-columns: repeat(3,1fr); margin-top:18px}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}
.price-card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px}
.price-card.featured{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.price{font-size:1.25rem; font-weight:800}

.grid-2{display:grid; gap:28px; grid-template-columns: 1.05fr .95fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.stats{display:grid; grid-template-columns: repeat(3,1fr); gap:10px}
.stat{background:#f1f5f9; border:1px solid #e2e8f0; padding:16px; border-radius:12px; text-align:center}
.stat .num{display:block; font-size:1.5rem; font-weight:800}

.site-footer{border-top:1px solid #e5e7eb; padding:26px 0; background:#fff}
.footer-grid{display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:start}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr}}

/* RTL helpers */
html[dir="rtl"] .nav{flex-direction: row-reverse}
html[dir="rtl"] .features{padding-right:18px; padding-left:0}