/* Home page: three sign-in tiles. Uses the Lagoon tokens from style.css. */
body.home { min-height: 100vh; }
body.home::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 12% -10%, var(--accent-soft), transparent 70%),
    radial-gradient(700px 380px at 95% 0%, var(--coral-soft), transparent 70%);
}
.home-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 16px 56px; display: grid; gap: 34px; }

.home-hero { text-align: center; display: grid; justify-items: center; gap: 10px; padding-top: 8px; }
.home-hero .mark { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(14, 124, 118, 0.25)); }
.home-hero h1 { margin: 6px 0 0; font-size: clamp(30px, 5vw, 46px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.home-hero p { margin: 0; max-width: 56ch; font-size: 17px; color: var(--muted); }

.home-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; width: 100%; } }

.role {
  --c: var(--accent); --c-soft: var(--accent-soft); --c-text: var(--accent-strong);
  position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--panel); color: var(--text); border: 2px solid transparent; border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow); font-weight: 400;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.role:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--c); }
.role:focus-visible { border-color: var(--c); }
.role[data-role="agent"] { --c: var(--coral); --c-soft: var(--coral-soft); --c-text: var(--coral-text); }
.role[data-role="supervisor"] { --c: var(--call); --c-soft: var(--call-soft); --c-text: var(--call-text); }

.role-icon { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--c-soft); color: var(--c-text); }
.role-icon svg { width: 30px; height: 30px; }
.role h2 { margin: 14px 0 0; font-size: 24px; font-weight: 900; }
.role .tag { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.role ul { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 8px; flex: 1; }
.role li { position: relative; padding-left: 24px; font-size: 15px; color: var(--muted); }
.role li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 3px solid var(--c); border-bottom: 3px solid var(--c); transform: rotate(-45deg);
}
.role .go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--pill);
  background: var(--c); color: var(--on-strong); font-weight: 900; font-size: 16px;
}
.role[data-role="admin"] .go { color: var(--accent-text); }
.role[data-role="agent"] .go { color: #3A1405; }
.role .go svg { width: 20px; height: 20px; transition: transform .18s ease; }
.role:hover .go svg { transform: translateX(4px); }
.role .alt { margin: 12px 0 0; text-align: center; font-size: 14px; }
.role .alt a { position: relative; z-index: 1; }

.home-foot { text-align: center; color: var(--muted); font-size: 14px; display: grid; gap: 6px; }
.home-foot a { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .role, .role .go svg { transition: none; }
  .role:hover { transform: none; }
}