:root{
  --bg-ivory:#faf7ef;           /* warm, international background */
  --text:#1a1a1a;
  --muted:#6d6d6d;

  /* Gentle gold (not flashy) */
  --gold-1:#f4e6be;
  --gold-2:#d2b378;
  --gold-3:#8c6f41;
  --gold:linear-gradient(90deg,var(--gold-1),var(--gold-2),var(--gold-3));
  --gold-vert:linear-gradient(180deg,var(--gold-1),var(--gold-2),var(--gold-3));

  --radius-xl:22px;
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1200px;

  /* if you already have a sticky header, set its height here */
  --sticky-offset:0px;
}

html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:400 16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 520px at 50% -240px, rgba(255,255,255,.8), transparent 60%),
    var(--bg-ivory);
}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* ===================== 1) BANNER ===================== */
.hero{
  position:relative; min-height:44vh; display:grid; place-items:end center; overflow:hidden;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.35)),
    url("static/picture/banner.jpg") center/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:-35%;
  background:radial-gradient(900px 520px at 55% 15%, rgba(244,230,190,.26), transparent 70%);
  filter:blur(46px); mix-blend-mode:screen; opacity:.95; animation:heroGlow 12s ease-in-out infinite;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(244,230,190,.16) 50%, transparent 65%);
  filter:blur(14px); mix-blend-mode:screen; opacity:.7; animation:heroSweep 10s var(--ease) infinite;
}
@keyframes heroGlow{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.08);opacity:1}}
@keyframes heroSweep{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}

.hero-title{position:relative; z-index:1; padding:56px 0 36px; text-align:center}
.hero-title h1{
  margin:0 0 12px; font:700 clamp(26px,5.2vw,50px)/1.14 "Georgia","Times New Roman",serif; letter-spacing:.02em;
  text-shadow:0 14px 34px rgba(0,0,0,.48);
}
.hero-title p{
  margin:0 auto; max-width:860px; color:#f1f1f1; text-shadow:0 8px 22px rgba(0,0,0,.5);
}

/* ===================== 2) GLASS FILTER (STICKY) ===================== */
.filters-wrap{position:sticky; top:var(--sticky-offset); z-index:9; margin-top:-26px}
.filters{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  border-radius:var(--radius-xl); padding:12px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 18px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.7) inset;
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  overflow:hidden;
}
.filters::before{
  content:""; position:absolute; inset:-15%;
  background:radial-gradient(800px 240px at 50% -10%, rgba(244,230,190,.22), transparent 70%);
  mix-blend-mode:screen; filter:blur(30px); animation:heroGlow 12s ease-in-out infinite; pointer-events:none;
}
.filters::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(244,230,190,.14) 50%, transparent 70%);
  mix-blend-mode:screen; filter:blur(10px); opacity:.7; animation:heroSweep 9s var(--ease) infinite; pointer-events:none;
}

.filters-left,.filters-mid,.filters-right{display:flex; gap:12px; align-items:center}
.pill{
  position:relative; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 14px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.pill:hover{transform:translateY(-1px); background:#fff}
.pill .icon{width:18px;height:18px;opacity:.65}
.pill input{
  border:0; outline:none; font-weight:700; letter-spacing:.02em; background:transparent; color:#1f1f1f; min-width:160px;
}
.pill input::placeholder{color:#888}
.separator{width:1px;height:28px;background:var(--gold-vert);opacity:.7;border-radius:1px}

.select{
  position:relative; background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 36px 10px 14px; font-weight:700; letter-spacing:.04em;
  color:#222; cursor:pointer; user-select:none; box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.select:hover{transform:translateY(-1px); background:#fff}
.select[data-active="true"]{color:transparent; background:var(--gold); -webkit-background-clip:text; background-clip:text}
.select .chev{position:absolute; right:12px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.7}

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(0,0,0,.06); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.12); padding:8px; display:none; z-index:20;
}
.dropdown.show{display:block}
.dropdown button{
  width:100%; border:0; background:transparent; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:10px; color:#333; font-weight:600;
}
.dropdown button:hover{color:transparent; background:var(--gold); -webkit-background-clip:text; background-clip:text}

/* ===================== 3) SECTION TITLE ===================== */
.list-title{text-align:center; margin:44px 0 18px}
.list-title h2{margin:0; font:700 clamp(22px,4.6vw,40px)/1.2 "Georgia","Times New Roman",serif; letter-spacing:.02em}

/* ===================== 4) GRAND CARD DESIGN ===================== */
/* Lux gradient shell + framed media + medallion rank */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
@media(max-width:768px){.grid{grid-template-columns:1fr}}

/* —— Card background now a layered premium gradient (no plain white) —— */
.card{
  position:relative; border-radius:var(--radius); overflow:clip;
  background:
    radial-gradient(120% 140% at 70% -20%, rgba(255,255,255,.92) 0%, rgba(249,243,228,.75) 35%, rgba(240,226,196,.45) 62%, rgba(222,199,155,.30) 80%, rgba(210,183,135,.20) 100%),
    conic-gradient(from 220deg at 50% 0%, #fff8ec, #f3e6c9, #efe1c0, #fff8ec);
  background-blend-mode:overlay,normal;
  border:1px solid rgba(139,111,70,.16);
  box-shadow:
    0 22px 48px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(255,255,255,.6) inset; /* silk sheen */
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), background-position 1.2s var(--ease);
  background-size:120% 120%, 100% 100%;
  background-position:50% 50%, 50% 50%;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 68px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.95) inset;
  background-position:48% 46%, 50% 50%; /* subtle drift for luxe feel */
}
/* inner vignette for depth */
.card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(140% 100% at 50% -20%, rgba(255,255,255,.35), transparent 45%) ,
              radial-gradient(140% 140% at 50% 120%, rgba(140,110,60,.12), transparent 55%);
  mix-blend-mode:soft-light; pointer-events:none;
}
/* sweeping gold streak */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, transparent 35%, rgba(244,230,190,.32) 50%, transparent 65%);
  mix-blend-mode:screen; filter:blur(14px); opacity:0; transform:translateX(-45%);
  transition:opacity .45s var(--ease), transform .9s var(--ease);
}
.card:hover::after{opacity:1; transform:translateX(45%)}

/* framed image with hairline gold */
.card-media{position:relative; padding:12px 12px 0 12px}
.card-img{
  aspect-ratio: 16/10; border-radius:12px; overflow:hidden; background:#ddd center/cover no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transform:translateZ(0); transition:transform .6s var(--ease), filter .6s var(--ease);
}
.card-img::after{content:""; position:absolute; inset:0; border-radius:12px; box-shadow:0 0 0 1px rgba(139,111,70,.22) inset}
.card:hover .card-img{ transform:scale(1.035); filter:saturate(1.05) }

/* floating footer with centered texts */
.card-body{position:relative; text-align:center; padding:24px 16px 26px}

/* Rank: medallion coin with conic-gold rim */
.rank-medal{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:62px; height:62px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, #fff8ec 45%, #f2dfbd 100%),
    conic-gradient(from 0deg, rgba(164,128,72,.45), rgba(255,255,255,.0) 30%, rgba(164,128,72,.45) 60%, rgba(255,255,255,.0) 90%, rgba(164,128,72,.45));
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    0 0 0 2px rgba(139,111,70,.22) inset,
    0 0 0 1px rgba(255,255,255,.95) inset;
  display:grid; place-items:center;
}
.rank-medal .num{
  font:800 22px/1 "Poppins", ui-sans-serif;
  letter-spacing:.06em; color:transparent; background:var(--gold); -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:1px rgba(139,111,70,.28);
}
.rank-medal::after{content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); width:52px; height:2px; border-radius:1px; background:var(--gold); opacity:.95}

.name{margin:32px 0 8px; font:700 20px/1.25 "Cormorant Garamond","Georgia","Times New Roman",serif; letter-spacing:.02em}
.region{color:var(--muted); font-weight:600}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.show{opacity:1; transform:translateY(0); transition:opacity .6s var(--ease), transform .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none}
  .reveal{opacity:1; transform:none}
}