* { box-sizing: border-box; }
:root { --home-bg: linear-gradient(135deg, #f5f7f3, #e8f0e9); --home-text: #1b2b21; --home-muted: #667268; --home-description: #77847a; --home-border: #b8c8ba; --home-accent: #2d7b4d; --home-accent-hover: #23643e; }
[data-theme="dark"] { --home-bg: linear-gradient(135deg, #101b16, #1a2b22); --home-text: #edf4ed; --home-muted: #b6c4b8; --home-description: #a2b2a5; --home-border: #52665a; --home-accent: #6fca8c; --home-accent-hover: #8bd7a2; }
html, body { height: 100%; }
body { background: var(--home-bg); color: var(--home-text); font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; transition: background .25s ease, color .25s ease; }
.home-page { align-items: center; display: flex; justify-content: center; min-height: 100%; padding: 2rem; text-align: center; }
.home-card { align-items: center; display: flex; flex-direction: column; max-width: 760px; }
.home-logo { height: 128px; margin-bottom: 1.5rem; object-fit: contain; width: auto; }
.home-card h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin: 0 0 .65rem; }
.home-card p { color: var(--home-muted); font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0 0 2rem; }
.home-card .home-description { color: var(--home-description); font-size: 1rem; line-height: 1.6; margin: -.8rem auto 2rem; max-width: 560px; }
.home-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.home-enter, .home-external { border-radius: 999px; font-weight: 600; padding: .85rem 1.4rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.home-enter { background: var(--home-accent); color: #102218; }
.home-enter:hover { background: var(--home-accent-hover); transform: translateY(-2px); }
.home-external { border: 1px solid var(--home-border); color: var(--home-accent); }
.home-external:hover { background: rgba(255, 255, 255, .65); transform: translateY(-2px); }
.home-enter span, .home-external span { margin-left: .5rem; }
.theme-toggle { background: transparent; border: 1px solid var(--home-border); border-radius: 50%; color: var(--home-text); cursor: pointer; font-size: 1.1rem; height: 40px; position: fixed; right: 1.5rem; top: 1.5rem; width: 40px; }
.theme-toggle:focus-visible, a:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 3px; }
@media (max-width: 500px) { .home-logo { height: 104px; } .home-actions { flex-direction: column; } }