:root {
  --yellow: #b8e0c8;
  --ink: #17171a;
  --muted: #85858b;
  --surface: #fffdf8;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  background: #17171a;
  color: #fff;
}
.landing {
  position: relative;
  min-height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.landing-glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  top: -300px; right: -220px;
  background: radial-gradient(circle, rgba(184,224,200,.24), transparent 68%);
  pointer-events: none;
}
.landing-brand { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center;
  font-size: 27px; font-weight: 900;
}
.brand-name { font-size: 22px; font-weight: 900; letter-spacing: 4px; }
.eyebrow { color: var(--yellow); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.landing-copy { position: relative; margin-bottom: 28px; }
.landing-copy h1 { margin: 7px 0 12px; font-size: clamp(38px, 8vw, 58px); line-height: .95; letter-spacing: -2px; }
.landing-copy p { margin: 0; color: #a9a9b1; font-size: 15px; line-height: 1.5; max-width: 430px; }
.landing-cards { position: relative; display: flex; flex-direction: column; gap: 12px; }
.entry-card {
  display: flex; align-items: center; gap: 15px;
  min-height: 108px;
  border-radius: 26px;
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease;
}
.entry-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.app-card { background: var(--yellow); }
.dispatcher-card { background: #fff; }
.entry-icon {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.app-card .entry-icon { background: var(--ink); color: var(--yellow); }
.dispatcher-card .entry-icon { background: var(--ink); color: #fff; }
.entry-icon svg { width: 28px; height: 28px; fill: currentColor; }
.entry-icon.panel svg { fill: none; stroke: currentColor; }
.entry-copy { flex: 1; }
.entry-copy b { display: block; font-size: 25px; letter-spacing: -.7px; }
.entry-copy small { display: block; margin-top: 5px; color: #5e5e65; font-size: 13px; }
.entry-arrow {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16);
  display: grid; place-items: center;
  font-size: 19px;
}
.landing-foot { position: relative; margin-top: 28px; color: #696971; font-size: 11px; }
.landing-foot span { color: #8d8d95; }
@media (max-width: 480px) {
  .landing { padding: 24px 18px; justify-content: flex-start; padding-top: 54px; }
  .landing-brand { margin-bottom: 60px; }
  .entry-card { min-height: 100px; padding: 16px; }
  .entry-copy b { font-size: 22px; }
}