:root{
  --bg:#fdfdfd;
  --card:#f6f6f7;
  --muted:#6f7680;
  --accent:#bfa94c;
  --accent-silver:#c0c0c0;
  --shadow:0 22px 60px rgba(0,0,0,.08);
  --shadow2:0 14px 36px rgba(0,0,0,.10);
  --radius:1.2rem;
  --radius-sm:.6rem;
  --fast:150ms ease-out;
  --med:260ms ease-out;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color:#1f2933;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

/* page */
.page{ max-width:1280px; margin:0 auto; padding:34px 32px 64px; }

/* Typography */
.title{ margin:0; letter-spacing:.08em; color:var(--accent); font-weight:900; }
.title--xl{
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  background: linear-gradient(90deg,var(--accent-silver),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.kicker{
  margin:0 0 8px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color: rgba(111,118,128,.9);
}

/* Scrollbar */
.scrollbar{ position:fixed; inset:0 0 auto; height:3px; z-index:1000; pointer-events:none; }
.scrollbar__fill{
  height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-silver));
  box-shadow:0 0 15px rgba(191,169,76,.30);
}

/* Hero */
.hero{ padding:12px 0 18px; text-align:center; }
.hero__title{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero__sub{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hero__actions{ margin-top:12px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  padding:.38rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  color: var(--accent);
  font-size:.82rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.pill--soft{
  color:#374151;
  background: linear-gradient(145deg, rgba(191,169,76,.10), rgba(192,192,192,.10));
  border-color: rgba(191,169,76,.22);
}

/* Sections */
.section{ padding:46px 0 0; }
.section__head{ max-width:820px; margin:0 auto 18px; text-align:center; }

/* Card */
.card{
  max-width:980px;
  margin:0 auto;
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.05);
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.70));
  box-shadow: var(--shadow2);
  padding: 28px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 0 0, rgba(191,169,76,.12), transparent 60%),
    radial-gradient(circle at 100% 120%, rgba(192,192,192,.10), transparent 55%);
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

/* Prose */
.prose p{ margin:0; color:#4b5563; line-height:1.95; }
.prose p + p{ margin-top:18px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color:#0b0b0b;
  background: linear-gradient(145deg, var(--accent), var(--accent-silver));
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:800;
  transition: transform var(--fast), box-shadow var(--fast), filter var(--fast);
}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 22px 40px rgba(0,0,0,.14);
}
.btn--ghost{
  background: transparent;
  color: var(--accent);
  border:1px solid rgba(191,169,76,.28);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(191,169,76,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.10);
}
.btn--mini{ padding:7px 12px; font-size:.7rem; letter-spacing:.12em; }

/* Footer */
.footer{
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  color:#6b7280;
  font-size:.85rem;
}
.footer__links{ display:flex; gap:8px; flex-wrap:wrap; }

/* Reveal */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 520ms ease-out, transform 520ms ease-out; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* Toolbar */
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.toolbar__left{ display:flex; gap:14px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:240px; }
.field__label{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6b7280;
}
.field__input{
  height:42px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  color:#111827;
  padding:0 12px;
  outline:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.field__input:focus{
  border-color: rgba(191,169,76,.55);
  box-shadow: 0 0 0 4px rgba(191,169,76,.14);
}

/* Chips */
.chips{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  color:#4b5563;
  letter-spacing:.06em;
  font-size:.78rem;
}

/* Grid */
.grid{ max-width:980px; margin:18px auto 0; display:grid; gap:16px; }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .grid--3{ grid-template-columns: 1fr; } }

/* Review Card */
.tcard{
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.86);
  padding:18px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.06);
}
.tcard::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 0 0, rgba(191,169,76,.10), transparent 60%);
  pointer-events:none;
}
.tcard > *{ position:relative; z-index:1; }

.tcard__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.tcard__meta{ display:flex; flex-direction:column; gap:4px; }
.tcard__name{
  color: var(--accent);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
  font-weight:900;
  font-size:.95rem;
}
.tcard__sub{
  margin:0;
  color:#6b7280;
  font-size:.88rem;
  line-height:1.5;
}

.tcard__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.tag{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(191,169,76,.20);
  background: rgba(191,169,76,.08);
  color:#374151;
  font-size:.72rem;
  letter-spacing:.06em;
  white-space:nowrap;
}

.stars{
  font-size:.95rem;
  letter-spacing:.16em;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(191,169,76,.10);
  user-select:none;
  white-space:nowrap;
}

.tcard__quote{
  margin-top:12px;
  color:#4b5563;
  line-height:1.85;
}
.tcard__quote p{ margin:0; }
.tcard__quote p + p{ margin-top:12px; }

.tcard__foot{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:#6b7280;
  font-size:.78rem;
}
.tcard__hint{
  color: rgba(191,169,76,.95);
  letter-spacing:.06em;
}

/* Clickable whole card */
.tcard--clickable{
  cursor:pointer;
  transition: transform var(--med), border-color var(--med), filter var(--med), box-shadow var(--med);
}
.tcard--clickable:hover{
  transform: translateY(-4px);
  border-color: rgba(191,169,76,.35);
  filter: brightness(1.02);
  box-shadow: 0 22px 50px rgba(0,0,0,.10);
}
.tcard__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius: var(--radius);
  text-decoration:none;
}

/* Empty */
.empty{ margin-top:16px; }
.empty__inner{ max-width:820px; margin:0 auto; text-align:center; }
.empty__badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(191,169,76,.20);
  background: rgba(191,169,76,.08);
  color:#374151;
  letter-spacing:.06em;
  margin-bottom:12px;
}
.empty__actions{ margin-top:14px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 900px){
  .page{ padding: 28px 18px 54px; }
}