:root{
  --bg:#12141c;
  --bg-soft:#181b26;
  --ink:#f4f0e8;
  --ink-dim:#8a90a3;
  --coral:#ff8552;
  --gold:#e3b567;
  --teal:#5fb3a3;
  --line:rgba(244,240,232,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
.route{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:0.35;
}
nav{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  max-width:960px; margin:0 auto;
  padding:24px 24px 0;
}
.brand{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:1.1rem; color:var(--ink);
}
.sign-in{
  font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:500;
  color:var(--bg);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:999px;
  padding:9px 20px;
  text-decoration:none;
  transition:opacity 0.2s ease;
}
.sign-in:hover{ opacity:0.85; }
.sign-in:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.wrap{
  position:relative; z-index:1;
  max-width:960px; margin:0 auto;
  padding:6vh 24px 8vh;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.kicker{
  font-size:0.85rem; color:var(--gold); letter-spacing:0.01em;
  margin-bottom:18px;
}
h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(2.4rem, 6vw, 4rem);
  line-height:1.08;
  max-width:11ch;
  margin-bottom:22px;
}
h1 em{
  font-style:italic;
  color:var(--coral);
  font-weight:400;
}
.sub{
  font-size:1.05rem; color:var(--ink-dim);
  max-width:46ch; line-height:1.6;
  margin-bottom:64px;
}
.cards{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  text-align:left;
}
.card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 24px;
  text-decoration:none;
  color:var(--ink);
  display:flex; flex-direction:column; gap:14px;
  transition:border-color 0.2s ease, transform 0.2s ease;
  position:relative;
}
.card:hover{ transform:translateY(-3px); }
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.card--squad{ border-top:3px solid var(--coral); }
.card--tourmate{ border-top:3px solid var(--teal); }
.card--group{ border-top:3px solid var(--gold); }
.card--squad:hover{ border-color:var(--coral); }
.card--tourmate:hover{ border-color:var(--teal); }
.card--group:hover{ border-color:var(--gold); }

.glyph{ width:34px; height:34px; }
.card--squad .glyph{ color:var(--coral); }
.card--tourmate .glyph{ color:var(--teal); }
.card--group .glyph{ color:var(--gold); }

.card h2{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:1.3rem;
}
.card p{
  font-size:0.92rem; color:var(--ink-dim); line-height:1.55;
}
.go{
  margin-top:auto; font-size:0.85rem; font-weight:500;
  display:flex; align-items:center; gap:6px;
}
.card--squad .go{ color:var(--coral); }
.card--tourmate .go{ color:var(--teal); }
.card--group .go{ color:var(--gold); }

footer{
  margin-top:60px; font-size:0.82rem; color:var(--ink-dim);
}

@media (max-width:760px){
  .cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
}