:root {
    --primary: #168f83;
    --primary-dark: #0c665e;
    --accent: #d6ad60;
    --ink: #17242b;
    --muted: #6f7d83;
    --surface: #ffffff;
    --soft: #f2f7f6;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--ink);
    background: linear-gradient(135deg, #edf8f6 0%, #f8f4ed 100%);
}
.topbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(22,143,131,.12);
    backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--primary-dark); }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow:0 8px 20px rgba(12,102,94,.22); }
.language { color:var(--muted); font-size:13px; direction:ltr; }
.shell { width:min(1080px, 92%); margin:72px auto; }
.card { background:rgba(255,255,255,.94); border:1px solid rgba(22,143,131,.12); border-radius:28px; padding:54px; box-shadow:0 24px 70px rgba(29,76,71,.12); }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:800; direction:ltr; }
h1 { margin:12px 0 8px; font-size:clamp(30px,5vw,54px); line-height:1.15; color:var(--primary-dark); }
.subtitle { color:var(--muted); font-size:18px; margin:0 0 30px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px; }
.info { padding:22px; border-radius:18px; background:var(--soft); border-right:4px solid var(--primary); }
.info h2 { font-size:18px; margin:0 0 8px; color:var(--primary-dark); }
.info p { margin:0; line-height:1.8; color:#526269; }
.status { display:inline-flex; gap:9px; align-items:center; padding:11px 16px; border-radius:999px; color:var(--primary-dark); background:#e6f5f2; font-weight:700; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(214,173,96,.15); }
footer { text-align:center; color:var(--muted); font-size:13px; padding:28px 0; }
@media (max-width:700px) { .card { padding:30px 22px; } .grid { grid-template-columns:1fr; } .shell { margin:34px auto; } h1 { font-size:34px; } }