@font-face {
  font-family: Sora;
  src: url('../fonts/Sora.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at 9% 2%, rgba(131,200,46,.23), transparent 34%),
              radial-gradient(circle at 92% 15%, rgba(22,137,207,.19), transparent 31%),
              linear-gradient(145deg, #fbfaf6, #eef7f6 55%, #f5faf1);
  background-attachment: fixed;
}

.brand-logo { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.brand-icon { display: none; }
.brand strong { letter-spacing: -.04em; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.76);
  border-bottom: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 10px 32px rgba(24,61,69,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.card {
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 20px 50px rgba(24,61,69,.09), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, .6fr);
  align-items: center;
  min-height: 290px;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2.1rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(125deg, rgba(255,255,255,.82), rgba(230,248,252,.67) 62%, rgba(230,247,214,.68));
}
.overview-hero::before {
  content: '';
  position: absolute;
  inset: auto -7rem -12rem auto;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background: rgba(131,200,46,.13);
}
.overview-copy { position: relative; z-index: 1; }
.overview-copy h1 { max-width: 12ch; letter-spacing: -.055em; }
.overview-copy p:not(.eyebrow) { max-width: 39rem; color: var(--muted); margin: .8rem 0 1.5rem; }
.overview-copy .button { gap: .8rem; }
.overview-art { display: grid; place-items: center; min-height: 200px; position: relative; }
.overview-art img { width: min(85%, 220px); filter: drop-shadow(0 22px 28px rgba(24,61,69,.12)); z-index: 1; }
.overview-orbit { position: absolute; width: 235px; height: 235px; border: 1px solid rgba(22,137,207,.26); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 0 0 42px rgba(22,137,207,.05); }
.overview-heading { margin-bottom: 1rem; }
.overview-heading h2 { margin: .2rem 0 0; font-size: 1.55rem; }
.button {
  background: linear-gradient(115deg, #83c82e, #a5dc61);
  box-shadow: 0 10px 22px rgba(86,150,27,.18), inset 0 1px 0 rgba(255,255,255,.52);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 25px rgba(86,150,27,.22); }
.button:active { transform: translateY(0); }
.button-secondary { background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(24,61,69,.07); }
input, select, textarea {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(167,196,186,.72);
  box-shadow: inset 0 1px 2px rgba(24,61,69,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stat { transition: transform .25s ease; }
.stat:hover { transform: translateY(-4px); }
.invite-code { background: rgba(224,244,247,.72); border: 1px solid rgba(255,255,255,.9); }
.record-card { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(167,196,186,.45); padding: 1.1rem 0; }
.record-card small { display: block; color: var(--muted); }
.record-card p { margin: .4rem 0; }
.record-actions { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
@supports not (backdrop-filter: blur(1px)) {
  .topbar, .card, input, select, textarea { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .stat { transition: none; }
  .button:hover, .stat:hover { transform: none; }
}
@media (max-width: 700px) {
  .overview-hero { grid-template-columns: 1fr; }
  .overview-art { display: none; }
  .topbar { gap: .8rem; }
  .topbar nav { order: 3; width: 100%; justify-content: space-between; gap: .5rem; }
  .topbar nav a { font-size: .88rem; }
}