/* Leaderboard in the Skin Scan site design: the page keeps its own components
   (style.css) and only swaps the palette, fonts, menu and footer. */
:root {
  --paper: #0C0D10; --paper-2: #14151A; --card: #14151A; --sand: #1B1C22;
  --ink: #F2F0EC; --ink-2: #D2D0D8; --muted: #A9A7B0; --dim: #7E7C86;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --accent: #CBC6F6; --acc-text: #CBC6F6; --acc-tint: rgba(203,198,246,.08); --acc-line: rgba(203,198,246,.32);
  --serif: 'Urbanist', 'Segoe UI', system-ui, sans-serif; --display: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --fg: #F2F0EC; --fg-2: #A9A7B0; --fg-3: #7E7C86; --lilac: #CBC6F6; --lilac-ink: #1D1A33; --glass-line: rgba(255,255,255,.16); --bg: #0C0D10; --bg-2: #14151A;
  color-scheme: dark;
}
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1320px; padding-inline: clamp(20px, 3vw, 40px); }
@media (min-width: 1640px) { .wrap { max-width: 1480px; } }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 500; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--muted); }
.hero::before { background: radial-gradient(60% 70% at 50% -10%, rgba(203,198,246,.12) 0%, transparent 60%); }
.eyebrow { color: var(--lilac); }
.btn-solid { background: var(--lilac); color: var(--lilac-ink); }
.btn-ghost { color: var(--ink); border-color: var(--line-2); }
.band { background: #15141D; border: 1px solid var(--line-2); }
.band h2, .band h2 em { color: var(--ink); }
.band .btn-solid { background: var(--lilac); color: var(--lilac-ink); }
/* new menu */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #0C0D10 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 12px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 14px var(--sans); letter-spacing: .22em; text-decoration: none; color: var(--ink); }
.logo svg { width: 26px; height: 26px; color: var(--lilac); }
.links { display: flex; gap: clamp(18px, 2vw, 30px); font: 15px var(--sans); }
.links a { position: relative; padding-block: 6px; color: var(--muted); text-decoration: none; transition: color .2s; }
.links a:hover { color: var(--ink); }
.nav-r { display: flex; align-items: center; gap: 10px; }
.lang { font: 600 14px 'Vazirmatn', Tahoma, sans-serif; color: var(--muted); text-decoration: none; padding: 10px; }
.pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font: 600 15px var(--sans); text-decoration: none; white-space: nowrap; }
.pill-solid { background: var(--lilac); color: var(--lilac-ink); padding: 11px 20px; }
.m-lang { display: none; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
/* new footer */
.foot { border-top: 1px solid var(--line); padding-block: 40px 48px; color: var(--muted); font: 14px var(--sans); }
.foot-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-in > div { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.foot h4 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.foot p { margin: 0; }
.flinks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.flinks a, .addr a { text-decoration: none; color: inherit; }
.flinks a:hover, .addr a:hover { color: var(--ink); }
.addr { color: var(--dim); line-height: 1.7; }
@media (max-width: 960px) {
  .links { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; gap: 0; padding: 8px 20px 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .links.open { display: flex; }
  .links a { padding: 14px 0; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .links .m-lang { display: block; color: var(--lilac); border: 0; }
  .menu-btn { display: inline-flex; }
  .nav-r .pill-solid { padding: 9px 14px; font-size: 13.5px; }
}
@media (max-width: 400px) { .nav-r .lang { display: none; } }
.band .btn-ghost { color: var(--ink); border-color: var(--line-2); background: transparent; }
.band .btn-ghost:hover { border-color: var(--ink); }

/* glass header, identical to the rest of the site */
.nav { --fg: #111014; --fg-2: #57535C; --line: rgba(17,16,20,.1);
  position: sticky; top: 12px; margin: 12px auto 0; width: min(1200px, calc(100% - 24px)); border-radius: 20px; border: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78)); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px -18px rgba(0,0,0,.5); color: #111014; font-family: Inter, system-ui, sans-serif; }
.nav .nav-in { max-width: none; min-height: 59px; padding-block: 10px; padding-inline: 18px 10px; gap: 16px; }
.nav .logo { color: #111014; font-family: "Inter Tight", Inter, sans-serif; letter-spacing: .3em; font-size: 13px; }
.nav .logo svg { color: #111014; }
.nav .links { gap: 28px; font-size: 13.5px; color: #57535C; }
.nav .links a:hover { color: #111014; }
.nav .links a::after { background: #111014; }
.nav .nav-r { gap: 14px; }
.nav .lang { font: 500 14px Vazirmatn, Tahoma, sans-serif; color: #57535C; text-decoration: none; }
.nav .pill-solid { background: #111014; color: #fff; border-radius: 13px; font: 500 14px Inter, sans-serif; padding: 10px 18px; }
.nav .nb-s { display: none; }
.nav .menu-btn { width: 40px; height: 40px; border-color: rgba(17,16,20,.1); background: rgba(255,255,255,.6); }
.nav .menu-btn span { background: #111014; }
@media (max-width: 960px) { .nav .links { background: rgba(255,255,255,.97); border-radius: 0 0 18px 18px; } .nav .links a { color: #111014; } }
@media (max-width: 640px) { .nav .nb-l { display: none; } .nav .nb-s { display: inline; } }

.nav .nav-in { height: 58px; min-height: 0; padding-block: 0; }
.nav { background: rgba(255,255,255,.95); }
.nav .links a { color: #57535C; opacity: 1; font-family: Inter, system-ui, sans-serif; }
.nav .links a:hover, .nav .links a.on { color: #111014; }
@media (max-width: 960px) { .nav .links.open { top: calc(100% + 8px); border-radius: 18px; background: #fff; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); } }
@media (max-width: 960px) { .nav .links.open { gap: 0 !important; padding: 6px 18px; } .nav .links.open a { padding: 14px 0 !important; line-height: 1.5 !important; display: block; font-size: 16px; color: #111014; } .nav .links.open a::after { display: none; } }
.nav .links.open .m-lang { color: #7B6FD6; font-weight: 500; }