.landing {
  min-height: 100vh;
  overflow-x: hidden;
  background: #0d1018;
}

.landing::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 64, 88, .2), transparent 34%),
    radial-gradient(circle at 90% 88%, rgba(53, 224, 205, .14), transparent 36%),
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1.4px);
  background-size: auto, auto, 30px 30px;
}

.landing-shell {
  display: grid;
  width: min(1120px, calc(100% - 36px));
  min-height: 100vh;
  align-content: center;
  gap: 16px;
  margin: 0 auto;
  padding: 30px 0;
}

.welcome-hero {
  position: relative;
  display: grid;
  min-height: 390px;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: clamp(28px,4vw,58px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  padding: clamp(30px,4.4vw,58px);
  background: linear-gradient(125deg,rgba(23,27,37,.98),rgba(79,61,119,.96) 52%,rgba(168,62,81,.94));
  box-shadow: 0 28px 90px rgba(0,0,0,.56);
}

.welcome-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 76% 26%,rgba(255,255,255,.13),transparent 28%),
    linear-gradient(110deg,transparent 35%,rgba(255,255,255,.035));
}

.welcome-copy,
.sort-visual {
  position: relative;
  z-index: 1;
}

.welcome-kicker {
  margin: 0 0 12px;
  color: var(--pink-bright);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.welcome-copy h1 {
  margin: 0;
  font-size: clamp(2.65rem,5vw,5rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.welcome-copy h1 span { color: #ff6b7d; }

.welcome-copy > p:last-child {
  max-width: 430px;
  margin: 20px 0 0;
  color: #d2d4d7;
  font-size: clamp(.88rem,1.15vw,1.02rem);
  line-height: 1.6;
}

.sort-visual {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  padding: clamp(15px,1.8vw,22px);
  background: linear-gradient(145deg,rgba(13,16,24,.72),rgba(74,61,112,.68));
  box-shadow: 0 22px 55px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.sort-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f4f5f6;
  font-size: clamp(.5rem,.72vw,.68rem);
  font-weight: 900;
  letter-spacing: .1em;
}

.sort-visual-head span { display: inline-flex; align-items: center; gap: 7px; }
.sort-visual-head i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--pink-bright); box-shadow: 0 0 12px rgba(255,64,88,.7); }
.sort-visual-head b { border-radius: 999px; padding: 6px 9px; color: #c7cacf; background: rgba(255,255,255,.07); font-size: .58rem; }

.sort-stage {
  display: grid;
  gap: 10px;
  margin-top: clamp(24px,3vw,36px);
}

.sort-scale-labels {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.55);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.sort-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: center;
  gap: clamp(7px,1vw,12px);
  padding: 13px 0;
}

.sort-track::before {
  position: absolute;
  top: 50%;
  right: 1%;
  left: 1%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.85),rgba(255,255,255,.25));
}

.sort-card,
.sort-gap {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: clamp(66px,7.5vw,88px);
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 12px;
  background: linear-gradient(155deg,rgba(255,64,88,.72),rgba(92,45,78,.96));
  box-shadow: 0 10px 26px rgba(0,0,0,.36);
}

.sort-card small { color: rgba(255,255,255,.6); font-size: .48rem; font-weight: 900; letter-spacing: .08em; }
.sort-card strong { font-size: clamp(1rem,1.8vw,1.45rem); }
.sort-card-two { background: linear-gradient(155deg,rgba(123,108,255,.88),rgba(63,49,116,.97)); }
.sort-card-three { background: linear-gradient(155deg,rgba(255,72,103,.75),rgba(168,62,81,.96)); }

.sort-gap {
  border: 2px dashed rgba(255,200,87,.78);
  color: var(--yellow);
  background: rgba(255,200,87,.08);
  box-shadow: 0 0 25px rgba(255,200,87,.13);
  font-size: 1.4rem;
  font-weight: 950;
}

.sort-candidate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  color: #c7cacf;
  font-size: .64rem;
  font-weight: 800;
}

.sort-candidate span {
  display: grid;
  width: 39px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ff6b7d;
  border-radius: 10px;
  color: white;
  background: rgba(255,64,88,.16);
  box-shadow: 0 0 20px rgba(255,64,88,.3);
  font-size: .85rem;
  font-weight: 950;
}

.sort-candidate p { margin: 0; }

.access-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.access-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 24px;
  background: rgba(35,42,54,.9);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
}

.access-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg,var(--pink),transparent 76%);
}

.join-card::before { background: linear-gradient(90deg,var(--purple),var(--cyan),transparent 88%); }

.access-card header { display: flex; align-items: center; gap: 13px; }
.access-card h2 { margin: 0 0 3px; font-size: 1.2rem; letter-spacing: -.025em; }
.access-card header p { margin: 0; color: var(--muted); font-size: .76rem; }

.access-icon {
  display: grid;
  width: 40px;
  flex: 0 0 40px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: white;
  background: linear-gradient(145deg,rgba(255,72,103,.88),rgba(168,62,81,.84));
  font-size: 1rem;
  font-weight: 900;
}

.join-card .access-icon { background: linear-gradient(145deg,rgba(123,108,255,.92),rgba(53,224,205,.78)); }

.access-card form { display: grid; align-items: end; gap: 9px; }
.create-form { grid-template-columns: minmax(0,1fr) auto; }
.join-form { grid-template-columns: .7fr 1fr auto; }
.access-card input { min-height: 46px; }
.access-card .button { min-height: 46px; white-space: nowrap; }
.landing .status-message { min-height: 18px; margin: -2px 0 0; }

@media (max-width: 900px) {
  .landing-shell { align-content: start; }
  .welcome-hero { min-height: 0; grid-template-columns: 1fr; }
  .welcome-copy { max-width: 620px; }
  .sort-visual { width: 100%; }
  .access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .landing-shell { width: min(100% - 22px,1120px); padding: 11px 0 20px; }
  .welcome-hero { gap: 24px; border-radius: 22px; padding: 26px 18px 20px; }
  .welcome-kicker { font-size: .58rem; }
  .welcome-copy h1 { font-size: clamp(2.45rem,13vw,3.5rem); }
  .sort-visual { border-radius: 17px; }
  .sort-visual-head b { display: none; }
  .sort-track { gap: 5px; }
  .sort-card, .sort-gap { min-height: 58px; border-radius: 9px; }
  .sort-candidate p { display: none; }
  .access-card { gap: 17px; border-radius: 18px; padding: 20px 17px; }
  .create-form, .join-form { grid-template-columns: 1fr; }
  .access-card .button { width: 100%; }
}