:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #10253f; background: #edf3f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 5%, #d7f0ea, transparent 34rem), linear-gradient(145deg, #f7faf9, #e9eff3); }
.landing-shell { display: grid; min-height: 100vh; padding: clamp(20px, 5vw, 64px); place-items: center; }
.landing-card { width: min(920px, 100%); border: 1px solid rgba(16,37,63,.12); border-radius: 28px; background: rgba(255,255,255,.94); padding: clamp(24px, 6vw, 64px); box-shadow: 0 28px 80px rgba(16,37,63,.14); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; width: 52px; height: 52px; border-radius: 15px; background: #10253f; color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .06em; place-items: center; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 2px; color: #66778b; font-size: 12px; }
.intro { margin: clamp(36px, 7vw, 72px) 0 28px; }
.eyebrow { color: #087d72; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 10px 0 10px; font-size: clamp(36px, 7vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.intro p { margin: 0; color: #5d6d80; font-size: clamp(16px, 2vw, 19px); }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.role-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 150px; border: 2px solid transparent; border-radius: 22px; padding: 22px; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.role-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16,37,63,.12); }
.role-card:focus-visible { outline: 4px solid #ffbf47; outline-offset: 3px; }
.role-card.admin { background: #eef2f7; border-color: #d9e0e9; }
.role-card.designer { background: #e5f7f3; border-color: #bee7df; }
.role-icon { display: grid; width: 48px; height: 48px; border-radius: 50%; background: #10253f; color: #fff; font-weight: 900; place-items: center; }
.designer .role-icon { background: #087d72; }
.role-card strong, .role-card small { display: block; }
.role-card strong { margin-bottom: 7px; font-size: 20px; }
.role-card small { color: #5d6d80; font-size: 14px; line-height: 1.45; }
.arrow { font-size: 26px; }
.privacy-note { margin: 24px 0 0; color: #6d7a89; font-size: 12px; text-align: center; }
@media (max-width: 680px) { .role-grid { grid-template-columns: 1fr; } .landing-card { border-radius: 22px; } .role-card { min-height: 130px; } }
@media (prefers-reduced-motion: reduce) { .role-card { transition: none; } }