:root { color-scheme: light dark; --ink:#132033; --muted:#5b687a; --bg:#f6fbff; --panel:#ffffff; --line:#d8e4ef; --mint:#22b886; --blue:#2576d5; }
@media (prefers-color-scheme: dark) { :root { --ink:#edf7ff; --muted:#adc0d0; --bg:#07131f; --panel:#0d1d2e; --line:#22405b; --mint:#5df0b5; --blue:#72b7ff; } }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.shell { width:min(1040px, calc(100% - 32px)); margin:0 auto; }
header { padding:28px 0 20px; }
.brand { display:flex; justify-content:space-between; gap:18px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; }
.brand-copy { min-width:0; }
.brand-title { font-size:clamp(1.75rem,4vw,3.5rem); line-height:1.05; margin:0; letter-spacing:0; }
.tagline { margin:.7rem 0 0; color:var(--muted); max-width:64ch; }
.app-icon { flex:0 0 auto; width:88px; height:88px; border-radius:20px; box-shadow:0 14px 36px rgba(15,39,64,.18); }
nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
nav a,.language a,.mail { border:1px solid var(--line); border-radius:8px; padding:7px 11px; background:var(--panel); color:var(--ink); }
nav a[aria-current="page"],.language a[aria-current="true"] { border-color:var(--mint); color:var(--mint); }
.hero,.card,section { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(15,39,64,.08); }
.hero { padding:clamp(24px,5vw,48px); margin:22px 0; }
.hero h2 { font-size:clamp(1.7rem,3vw,2.55rem); margin:0 0 10px; letter-spacing:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0 28px; }
.card { padding:18px; }
.card h3,section h3 { margin:0 0 8px; font-size:1.05rem; }
main section { padding:22px; margin:16px 0; }
ul { padding-inline-start:1.3rem; margin:8px 0 0; }
.meta { color:var(--muted); font-size:.95rem; }
.language { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
footer { color:var(--muted); border-top:1px solid var(--line); padding:22px 0 34px; margin-top:34px; font-size:.95rem; }
[dir="rtl"] .brand { direction:rtl; } [dir="rtl"] ul { padding-right:1.3rem; padding-left:0; }
@media (max-width:560px) { .brand { align-items:flex-start; } .app-icon { width:68px; height:68px; border-radius:16px; } }