:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #f0f3f4; background: #10191e; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #99e6ce; text-underline-offset: .25em; }
a:hover { color: #fff; }
a:focus-visible { outline: 3px solid #99e6ce; outline-offset: 6px; }
header, main, footer { max-width: 1120px; margin: auto; padding: 28px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid #34454c; }
.brand { font-size: 1.3rem; font-weight: 750; letter-spacing: .05em; text-decoration: none; color: #fff; }
nav { display: flex; flex-wrap: wrap; gap: 20px; }
.eyebrow { color: #99e6ce; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.08; letter-spacing: -.04em; margin: 25px 0; }
h2 { font-size: 1.8rem; line-height: 1.3; }
p, li { line-height: 1.8; color: #c5d2d8; }
.intro { padding-block: 48px; }
.languages, .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.languages > *, .cards > * { min-width: 0; }
.cards { margin-block: 32px; }
.card, .notice { padding: 28px; border: 1px solid #34454c; border-radius: 18px; background: #17252c; }
.card h2 { margin-top: 0; }
.button { display: inline-block; padding: 14px 22px; background: #99e6ce; color: #10241e; border-radius: 8px; font-weight: 700; text-decoration: none; margin-block: 12px; }
.button:hover { background: #c3f6e6; color: #10241e; }
.notice { margin-block: 30px; }
[dir="rtl"] { letter-spacing: normal; }
footer { border-top: 1px solid #34454c; font-size: .9rem; margin-top: 48px; }
@media (max-width: 700px) { .languages, .cards { grid-template-columns: 1fr; gap: 20px; } header { align-items: flex-start; flex-direction: column; } .intro { padding-block: 24px; } }