:root { --forest: #24432F; --sand: #EFE4CE; --paper: #F7F4EE; --ink: #1E2B24; --muted: #6E7A72; --line: #E7E2D8; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--forest); color: var(--ink); font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
.hero { text-align: center; padding: 28px 24px 26px; color: var(--paper); }
.hero svg { width: 132px; height: 132px; display: block; margin: 0 auto 10px; }
.hero .brand { font-family: Fraunces, Georgia, serif; font-size: 34px; line-height: 1.2; margin: 0; color: var(--paper); }
html[lang="ar"] .hero .brand { font-family: Amiri, serif; font-size: 42px; }
.sheet { flex: 1; background: var(--paper); border-radius: 28px 28px 0 0; padding: 34px 24px 48px; }
.sheet .inner { max-width: 440px; margin: 0 auto; text-align: center; }
h1 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.25; margin: 6px 0 12px; }
html[lang="ar"] h1 { font-family: Amiri, serif; font-size: 34px; font-weight: 400; }
p { margin: 0 0 14px; color: #39463e; }
.hint { color: var(--muted); font-size: 14px; }
.button { display: inline-block; background: var(--forest); color: var(--paper); text-decoration: none; padding: 14px 32px; border-radius: 14px; font-weight: 500; margin: 8px 0 16px; }
.lang { position: absolute; top: 16px; inset-inline-end: 16px; border: 1px solid rgba(247, 244, 238, 0.35); color: var(--paper); background: transparent; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.mark-ok { width: 56px; height: 56px; border-radius: 50%; background: #DDE8D9; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mark-ok svg { width: 28px; height: 28px; }
.seed { transform-box: fill-box; transform-origin: center; animation: pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.turn { transform-origin: 50px 50px; animation: turn 80s linear infinite; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seed, .turn { animation: none; } }