* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --l-bg: #F6F4F0;
  --l-bg-deep: #ECE8E1;
  --l-ink: #262220;
  --l-muted: #74695f;
  --l-flacky: #D6477E;
  --l-garments: #3B5BDB;
  --ff-display: 'Fredoka', system-ui, sans-serif;
  --ff-body: 'Poppins', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --l-bg: #1C1A18;
    --l-bg-deep: #262320;
    --l-ink: #F3EFEA;
    --l-muted: #B6AB9F;
  }
}

html, body {
  height: 100%;
  font-family: var(--ff-body);
  color: var(--l-ink);
  background: linear-gradient(180deg, var(--l-bg) 0%, var(--l-bg-deep) 100%);
}

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 32px 20px;
  text-align: center;
}

.landing__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.landing__logo-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--l-flacky), var(--l-garments));
  letter-spacing: 0.5px;
}

.landing__logo-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.landing__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}

.landing__choice {
  width: 220px;
  padding: 34px 20px;
  border-radius: 24px;
  background: #fff;
  text-decoration: none;
  color: var(--l-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 28px rgba(30, 22, 15, 0.08);
  border: 2px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (prefers-color-scheme: dark) {
  .landing__choice { background: #2A2724; box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
}

.landing__choice:hover,
.landing__choice:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(30, 22, 15, 0.14);
}

.landing__choice--flacky:hover,
.landing__choice--flacky:focus-visible { border-color: var(--l-flacky); }
.landing__choice--garments:hover,
.landing__choice--garments:focus-visible { border-color: var(--l-garments); }

.landing__choice-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 24px;
}

.landing__choice--flacky .landing__choice-name { color: var(--l-flacky); }
.landing__choice--garments .landing__choice-name { color: var(--l-garments); }

.landing__choice-sub {
  font-size: 14px;
  color: var(--l-muted);
}

@media (max-width: 480px) {
  .landing { gap: 40px; }
  .landing__choice { width: 100%; max-width: 280px; }
}