/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.7;color:#334155;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Typography ===== */
h1,h2,h3,h4{color:#0f172a;line-height:1.3;font-weight:700}
h1{font-size:clamp(1.75rem,5vw,2.5rem);margin-bottom:1rem}
h2{font-size:clamp(1.4rem,4vw,1.9rem);margin:2.5rem 0 1rem}
h3{font-size:clamp(1.15rem,3vw,1.4rem);margin:1.5rem 0 .75rem}
p{margin-bottom:1rem}
ul,ol{margin-bottom:1rem;padding-left:1.5rem}
li{margin-bottom:.5rem}
strong{color:#0f172a}

/* ===== Layout ===== */
.container{max-width:820px;margin:0 auto;padding:0 1.25rem}
.container-wide{max-width:1200px;margin:0 auto;padding:0 1.25rem}
section{padding:1.5rem 0}

/* ===== Header ===== */
.site-header{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.site-header .container-wide{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;padding-bottom:.75rem}
.logo{font-size:1.1rem;font-weight:700;color:#0f172a;text-decoration:none;display:flex;align-items:center;gap:.4rem}
.logo:hover{text-decoration:none;color:#2563eb}
.nav{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.nav a{color:#475569;font-size:.9rem;font-weight:500}
.nav a:hover{color:#2563eb;text-decoration:none}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,#eff6ff 0%,#f0fdf4 50%,#fff 100%);padding:3rem 0 2rem;text-align:center}
.hero h1{max-width:720px;margin:0 auto 1rem}
.hero .lead{max-width:620px;margin:0 auto;font-size:1.1rem;color:#475569}
.hero-img{max-width:800px;margin:2rem auto 0;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08);width:100%}

/* ===== Quick Answer ===== */
.quick-answer{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem 1.75rem;margin:2rem 0}
.quick-answer h2{margin-top:0;font-size:1.3rem}
.quick-answer ul{margin-bottom:0}
.quick-answer li{margin-bottom:.6rem}

/* ===== CTA Block ===== */
.cta-block{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;padding:2rem 1.75rem;border-radius:12px;text-align:center;margin:2rem 0}
.cta-block h3{color:#fff;margin-top:0}
.cta-block p{color:rgba(255,255,255,.9);margin-bottom:1rem}
.cta-button{display:inline-block;background:#fff;color:#2563eb;padding:.8rem 2rem;border-radius:8px;font-weight:700;text-decoration:none;margin:.5rem .25rem;transition:transform .2s,box-shadow .2s;font-size:1rem}
.cta-button:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.cta-button.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.cta-button.secondary:hover{background:rgba(255,255,255,.1)}

.cta-block.light{background:#eff6ff;color:#1e293b;border:2px solid #2563eb}
.cta-block.light h3,.cta-block.light p{color:#1e293b}
.cta-block.light .cta-button{background:#2563eb;color:#fff}
.cta-block.light .cta-button.secondary{background:transparent;color:#2563eb;border-color:#2563eb}

/* ===== Service Card ===== */
.service-card{border:1px solid #e2e8f0;border-radius:12px;padding:2rem 1.75rem;margin:1.5rem 0;background:#fff;transition:box-shadow .2s}
.service-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.service-card.featured{border-color:#2563eb;border-width:2px;box-shadow:0 4px 16px rgba(37,99,235,.1)}
.badge{display:inline-block;background:#fbbf24;color:#78350f;padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:700;margin-bottom:.75rem}
.badge.silver{background:#e2e8f0;color:#475569}
.badge.bronze{background:#fed7aa;color:#9a3412}
.service-card h3{margin-top:0}
.service-card .service-link{font-weight:700;font-size:1.05rem}
.service-desc{color:#475569;margin-bottom:1rem}
.service-pros{margin-bottom:1rem}
.service-pros li{color:#334155}

/* ===== Table ===== */
.table-wrapper{overflow-x:auto;margin:1.5rem 0;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:600px}
th{background:#1e293b;color:#fff;padding:.75rem 1rem;text-align:left;font-weight:600}
td{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0}
tr:nth-child(even) td{background:#f8fafc}

/* ===== Tips ===== */
.tip{background:#f0fdf4;border-left:4px solid #059669;padding:1rem 1.5rem;margin:1rem 0;border-radius:0 8px 8px 0}
.tip strong{color:#065f46}

/* ===== Checklist ===== */
.checklist{list-style:none;padding-left:0}
.checklist li{padding-left:1.75rem;position:relative;margin-bottom:.6rem}
.checklist li::before{content:"✓";position:absolute;left:0;color:#059669;font-weight:700}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid #e2e8f0;padding:1.25rem 0}
.faq-item h3{font-size:1.1rem;margin:0 0 .5rem;color:#1e293b}
.faq-item p{margin-bottom:0;color:#475569}

/* ===== Stats ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1.5rem 0}
.stat-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem 1rem;text-align:center}
.stat-card .stat-label{font-size:.85rem;color:#64748b;margin-top:.25rem}

/* ===== Callout ===== */
.callout{background:#fff7ed;border-left:4px solid #f97316;padding:1rem 1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0}
.callout strong{color:#9a3412}

/* ===== Brainstorm ===== */
.brainstorm{background:#fefce8;border:1px solid #fde68a;border-radius:12px;padding:1.5rem 1.75rem;margin:1.5rem 0}
.brainstorm h3{margin-top:0;color:#854d0e}
.brainstorm ul{margin-bottom:0}
.brainstorm li{color:#713f12}

/* ===== Comparison note ===== */
.comp-note{font-size:.85rem;color:#64748b;font-style:italic;margin-top:.5rem}

/* ===== Footer ===== */
.site-footer{background:#0f172a;color:#94a3b8;padding:3rem 0 2rem;margin-top:3rem}
.site-footer a{color:#cbd5e1}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;margin-bottom:2rem}
.footer-grid h4{color:#fff;font-size:1rem;margin-bottom:.75rem}
.footer-grid ul{list-style:none;padding:0}
.footer-grid li{margin-bottom:.4rem}
.footer-bottom{border-top:1px solid #1e293b;padding-top:1.5rem;text-align:center;font-size:.85rem}

/* ===== Lang pages hero ===== */
.lang-hero{background:linear-gradient(135deg,#eff6ff 0%,#f0fdf4 100%);padding:2.5rem 0;text-align:center}

/* ===== Responsive ===== */
@media(max-width:640px){
  .nav{gap:.75rem;font-size:.85rem}
  .hero{padding:2rem 0 1.5rem}
  table{font-size:.85rem}
  th,td{padding:.5rem .75rem}
  .cta-block{padding:1.5rem 1.25rem}
  .service-card{padding:1.5rem 1.25rem}
}

/* ===== RTL ===== */
[dir="rtl"]{text-align:right}
[dir="rtl"] ul,[dir="rtl"] ol{padding-left:0;padding-right:1.5rem}
[dir="rtl"] .checklist li{padding-left:0;padding-right:1.75rem}
[dir="rtl"] .checklist li::before{left:auto;right:0}
[dir="rtl"] .tip,[dir="rtl"] .callout{border-left:none;border-right:4px solid #059669;border-radius:8px 0 0 8px}
[dir="rtl"] .callout{border-right-color:#f97316}
[dir="rtl"] .brainstorm{border:1px solid #fde68a}