:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f1e9;
  color: #171711;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0, #fff 0, transparent 40%), #f4f1e9; }
main { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0; }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.eyebrow { margin: 0; letter-spacing: .18em; font-size: .75rem; font-weight: 800; }
h1 { margin: 14px 0; max-width: 760px; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .98; }
.intro { max-width: 40rem; color: #68645b; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 48px; }
.service-card { min-height: 168px; display: flex; flex-direction: column; padding: 22px; border: 1px solid #d7d1c4; border-radius: 18px; color: inherit; background: rgba(255,255,255,.68); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.service-card:hover { transform: translateY(-2px); border-color: #8e897e; }
.service-card strong { font-size: 1.2rem; }
.service-card span { margin-top: 10px; color: #68645b; line-height: 1.5; }
.service-card small { margin-top: auto; color: #8a857a; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 0; }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid #d7d1c4; border-radius: 22px; background: rgba(255,255,255,.8); box-shadow: 0 24px 60px rgba(52,45,32,.1); }
.login-card h1 { font-size: 2.4rem; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: #514d45; font-size: .9rem; font-weight: 650; }
input { width: 100%; border: 1px solid #c9c3b7; border-radius: 10px; padding: 12px 13px; background: #fff; color: #171711; font: inherit; }
input:focus { outline: 2px solid #171711; outline-offset: 2px; }
button { border: 0; border-radius: 10px; padding: 12px 16px; background: #171711; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
button.secondary { background: transparent; color: #171711; border: 1px solid #bdb7aa; }
.logout { display: block; }
.error { padding: 10px 12px; border-radius: 9px; background: #fbe3df; color: #8f271a; }

@media (max-width: 640px) {
  main { padding: 44px 0; }
  header { display: block; }
  .logout { margin-top: 24px; }
}