@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #0d0e19;
  --surface: #191a29;
  --surface-2: #202032;
  --text: #fcf9ff;
  --muted: #aaa7be;
  --violet: #bba4ff;
  --pink: #ff9bca;
  --peach: #ffd1b6;
  --line: rgba(226, 214, 245, .12);
  --width: 1270px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 22px 70px rgba(5, 4, 18, .22);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; scrollbar-color: #5a466e #11101c; }
body {
  margin: 0; min-width: 320px; background: var(--bg); color: var(--text);
  font: 400 15px/1.6 'DM Sans', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(ellipse 60% 650px at 80% 4%, rgba(135, 81, 182, .08), transparent),
                    radial-gradient(ellipse 50% 620px at 4% 45%, rgba(247, 132, 164, .045), transparent);
}
::selection { background: #da79ae; color: #160e1d; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }

/* A small, quiet header. */
.site-header {
  position: sticky; top: 0; z-index: 50; height: 82px;
  background: rgba(12, 11, 22, .67); border-bottom: 1px solid rgba(255, 255, 255, .065);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: height .35s var(--ease), background .35s, box-shadow .35s, border-color .35s;
}
.site-header.is-scrolled { height: 74px; background: rgba(14, 13, 25, .93); border-color: var(--line); box-shadow: 0 10px 35px #0505123d; }
.header-inner { max-width: 1440px; padding: 0 48px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 100%; }
.brand { display: inline-flex; gap: 13px; align-items: center; min-width: 0; }
.brand-initial {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px;
  font: 800 22px/1 'Manrope', sans-serif; color: #1b102a;
  background: linear-gradient(135deg, var(--peach) 0%, #ffc1cf 39%, #bca3ff 100%);
  box-shadow: 0 5px 18px #dc8dca20;
}
.brand-text { font: 800 17px/1.1 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.8px; }
.brand-text small { display: block; margin-top: 7px; font: 700 9px/1.1 'DM Sans', sans-serif; letter-spacing: 1.15px; color: #aba3bc; }
.header-actions { display: flex; align-items: center; margin-left: auto; }
.header-cta, .outline-cta, .filter, .vote-btn, .close-modal { -webkit-tap-highlight-color: transparent; }
.header-cta {
  display: inline-flex; gap: 20px; align-items: center; justify-content: center;
  padding: 12px 19px; border: 1px solid #b6a3c65b; border-radius: 999px;
  color: #fdf8ff; background: rgba(255, 255, 255, .075); font-size: 12px; font-weight: 800;
  transition: transform .36s var(--ease), background .36s, border-color .36s, box-shadow .36s;
}
.header-cta:hover { transform: translateY(-2px); background: #ffffff19; border-color: #e8c5eab2; box-shadow: 0 8px 22px #05051055; }
.header-cta span { font-size: 17px; line-height: 1; }

/* Hero is an elevated rounded panel with layered city light. */
.hero {
  width: min(1380px, calc(100% - 42px)); min-height: 630px; position: relative; isolation: isolate;
  margin: 22px auto 0; border-radius: 36px; overflow: hidden;
  background: #231728; border: 1px solid rgba(255, 198, 222, .17);
  box-shadow: 0 38px 110px #08061675;
}
.hero-art {
  position: absolute; inset: -18px; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(22, 13, 34, .98) 0%, rgba(22, 13, 34, .96) 22%, rgba(28, 13, 40, .81) 45%, rgba(31, 13, 44, .50) 100%),
    linear-gradient(180deg, #2c142526, #2412232a 55%, #1a102dc7 100%),
    url('https://raw.githubusercontent.com/ClaudeAIOfficial/rocsup/main/banner.png');
  background-size: cover; background-position: center, center, center 42%;
  filter: saturate(.95) contrast(1.03);
  transform: translate3d(0, var(--hero-offset, 0px), 0) scale(1.06);
  will-change: transform;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 78% 34%, #ffadad2e, transparent 36%),
              radial-gradient(circle at 91% 80%, #ba7ed454, transparent 37%),
              linear-gradient(0deg, #1a102d73, transparent 33%);
}
.hero::after { content: ''; position: absolute; width: 420px; height: 420px; right: 3%; top: 7%; border-radius: 50%; border: 1px solid #ffd0df1b; box-shadow: 0 0 0 58px #ffd0df07, 0 0 0 118px #ffc2dc05; pointer-events: none; z-index: -1; }
.hero-content { margin: 0; padding: 104px clamp(30px, 6.9vw, 105px) 136px; width: 100%; max-width: 900px; position: relative; z-index: 2; }
.hero-eyebrow, .section-kicker, .modal-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #eed0e5; }
.hero-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f4a4cf; box-shadow: 0 0 0 5px #fa98c61a; flex: 0 0 auto; }
.eyebrow-sep { color: #bba4bd; }
.eyebrow-line { width: 22px; height: 1px; background: #dfb3ca77; }
.hero h1 { font: 800 clamp(56px, 6.4vw, 100px)/1.08 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.068em; margin: 34px 0 24px; max-width: 960px; }
.hero h1 span { background: linear-gradient(102deg, #f8b2ce 0%, #ffc5bc 55%, #e6c4ff 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-desc { max-width: 585px; margin: 0; color: #e5d8e7; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 34px; }
.btn-primary {
  min-height: 53px; display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  padding: 13px 25px; border: 1px solid #ffd1d4a8; border-radius: 999px; white-space: nowrap;
  color: #211428; background: linear-gradient(110deg, #f7b4d1, #ffccb4); font-size: 13px; font-weight: 800;
  box-shadow: 0 10px 34px #e880ad22;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .3s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 17px 38px #f294c33b; filter: brightness(1.065); }
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-primary span { line-height: 1; font-size: 18px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 16px; padding: 12px 0; color: #fff1f8; font-size: 13px; font-weight: 800; transition: color .3s, gap .3s var(--ease); }
.btn-ghost:hover { color: #ffcade; gap: 22px; }
.btn-ghost span { font-size: 18px; }
.hero-issue {
  position: absolute; right: clamp(34px, 5.3vw, 80px); bottom: 123px; z-index: 2;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 21px 24px; min-width: 214px; min-height: 0;
  background: rgba(32, 21, 42, .48); border: 1px solid rgba(252, 214, 240, .24); border-radius: 20px;
  box-shadow: 0 18px 45px #09051126; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.hero-issue-brand { color: #fff1fb; font-size: 12px; font-weight: 800; letter-spacing: .25px; }
.hero-issue span:last-child { color: #d7bbd2; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.hero-bottom { position: absolute; left: clamp(30px, 6.9vw, 105px); right: clamp(30px, 6.9vw, 105px); bottom: 27px; display: flex; gap: 24px; justify-content: space-between; z-index: 2; padding-top: 17px; border-top: 1px solid #fff4ff38; color: #e3cadc; font-size: 10px; font-weight: 800; letter-spacing: .85px; }
.hero-bottom span span { margin-left: 8px; }

.vice-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 11px; margin: 20px auto 0;
  width: min(1380px, calc(100% - 42px)); padding: 14px 20px; min-height: 48px;
  background: rgba(255, 255, 255, .035); border: 1px solid #ffffff13; border-radius: 15px;
  font-size: 11px; letter-spacing: 3.5px; font-weight: 800; color: #d9b5d7;
}
.vice-ribbon span { opacity: .88; }

/* Metrics float as quiet glass cards. */
.info-strip { width: min(var(--width), calc(100% - 70px)); margin: 25px auto 0; border: 0; background: transparent; }
.info-strip-inner { display: grid; grid-template-columns: .9fr .9fr 1.3fr; gap: 16px; min-height: 0; margin: 0; }
.info-stat { display: flex; align-items: center; gap: 18px; min-height: 126px; padding: 26px 30px; background: #ffffff07; border: 1px solid var(--line); border-radius: 23px; }
.info-stat .stat-value { color: #fbf4ff; font: 800 47px/1 'Manrope', sans-serif; letter-spacing: -2.5px; }
.stat-label { color: #aba5bb; font-size: 10px; line-height: 1.7; letter-spacing: .9px; font-weight: 800; }
.info-strip .stat-divider { display: none; }
.stat-long { justify-content: center; }
.stat-long strong { display: block; color: #faf1ff; font-size: 13px; margin-bottom: 4px; }
.stat-long .stat-label { display: block; }
.status-indicator { width: 13px; height: 13px; flex: none; border-radius: 50%; background: #bd9cff; box-shadow: 0 0 0 6px #aa84ff19; }

/* Section headings and a unified filter toolbar. */
.section-pad { padding: 108px 0 114px; }
.leaderboard-section { max-width: var(--width); margin: 0 auto; width: calc(100% - 70px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 38px; }
.section-kicker { color: #dcacd9; font-size: 10px; letter-spacing: 1.25px; }
.section-kicker span { color: #82728d; }
.section-head h2, .callout-intro h2 { font: 800 clamp(40px, 4.3vw, 58px)/1.15 'Manrope', sans-serif; letter-spacing: -.06em; margin: 14px 0 15px; }
.section-head h2 span, .callout-intro h2 span { background: linear-gradient(100deg, #dda6e4, #ffbaae); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.section-head p { max-width: 670px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.outline-cta { flex: none; padding: 13px 20px; border: 1px solid #b9a1cb54; border-radius: 999px; color: #f5e8fa; background: #ffffff0a; font-size: 12px; font-weight: 800; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.outline-cta:hover { transform: translateY(-3px); background: #ffffff17; border-color: #dfafe2; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); border-radius: 24px; margin-bottom: 25px; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.filter { border: 1px solid transparent; border-radius: 999px; background: transparent; padding: 11px 16px; white-space: nowrap; color: #a7a0b8; font-size: 12px; font-weight: 800; transition: background .25s, color .25s, transform .32s var(--ease), border-color .25s; }
.filter:hover { background: #ffffff13; color: #fcf7ff; }
.filter.active { border-color: #e1badc3b; color: #281a33; background: linear-gradient(105deg, #ffd0dc, #e3c5fc); box-shadow: 0 6px 18px #b983ce1b; }
.filter-tools { display: flex; align-items: center; gap: 10px; }
.search-wrapper { display: inline-flex; gap: 10px; align-items: center; min-height: 45px; padding: 0 14px; border: 1px solid #ffffff20; background: #141522; border-radius: 14px; color: #c3b5d1; transition: border-color .3s, box-shadow .3s; }
.search-wrapper:focus-within { border-color: #dbb2f5; box-shadow: 0 0 0 4px #ba91ed19; }
.search-wrapper input { width: 164px; min-width: 0; outline: 0; background: transparent; border: 0; color: #faf8ff; font-size: 12px; }
.search-wrapper input::placeholder { color: #77738c; }
.filter-tools select { min-height: 45px; max-width: 150px; border: 1px solid #ffffff20; background: #141522; border-radius: 14px; color: #eae6f4; padding: 0 13px; font-size: 12px; font-weight: 800; }

/* Elevated, rounded proposal cards. */
.currency-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 19px; min-height: 120px; }
.currency-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 70px 1fr; grid-template-areas: 'logo rank' 'title title' 'pitch pitch' 'vote vote'; grid-template-rows: 71px auto 1fr auto; gap: 12px 14px; padding: 27px; min-height: 347px; background: linear-gradient(156deg, #242237 0%, #1a1a29 60%, #191927 100%); border: 1px solid rgba(255, 255, 255, .085); border-radius: 26px; box-shadow: 0 10px 27px #04031114; transition: border-color .35s, box-shadow .5s var(--ease), transform .5s var(--ease), background .3s; }
.currency-card::before { content: ''; position: absolute; z-index: 0; width: 230px; height: 230px; right: -85px; top: -120px; border-radius: 50%; background: radial-gradient(circle, #e7a1d71a 2%, transparent 72%); pointer-events: none; }
.currency-card::after { display: none; }
.currency-card > * { position: relative; z-index: 1; }
.currency-card:hover { transform: translateY(-6px); border-color: #dfb4ef64; box-shadow: 0 22px 53px #05041050, 0 0 30px #ae82d50d; }
.rank { grid-area: rank; justify-self: end; align-self: start; padding: 8px 12px; color: #e6cfe7; background: #ffffff0c; border: 1px solid #ffffff0a; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.rank::before { content: '#'; font-size: 12px; color: #ae9aaf; margin-right: 2px; }
.currency-logo { grid-area: logo; display: grid; place-items: center; width: 65px; height: 65px; border: 1px solid #ffffff55; border-radius: 19px; box-shadow: 0 11px 30px #0403122f; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.currency-logo.text-small { font-size: 18px; }
.currency-title { grid-area: title; align-self: end; margin-top: 9px; }
.currency-title h3 { font: 800 26px/1.23 'Manrope', sans-serif; letter-spacing: -.85px; margin: 0 0 9px; overflow-wrap: anywhere; }
.ticker-symbol { color: #f2b9dd; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.category-pill { display: inline-flex; align-items: center; margin-left: 10px; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #bbafd0; background: #ffffff12; vertical-align: middle; }
.currency-pitch { grid-area: pitch; align-self: start; margin: 0; color: #b1acc3; font-size: 13px; line-height: 1.72; overflow-wrap: anywhere; max-width: 38em; }
.vote-block { grid-area: vote; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; margin-top: 13px; border-top: 1px solid #ffffff13; }
.vote-count { display: flex; align-items: baseline; gap: 8px; font: 800 26px/1 'Manrope', sans-serif; letter-spacing: -1px; }
.vote-count small { font: 800 10px/1 'DM Sans', sans-serif; letter-spacing: .8px; color: #928aa5; }
.vote-btn { border: 1px solid #e9c0ef5b; border-radius: 999px; color: #2b1d33; background: linear-gradient(105deg, #f7c3d7, #dfc6ff); padding: 12px 18px; white-space: nowrap; font-size: 12px; font-weight: 800; transition: transform .35s var(--ease), box-shadow .35s, opacity .3s, background .3s; }
.vote-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 25px #cf97d735; }
.vote-btn:active:not(:disabled) { transform: scale(.98); }
.vote-btn.voted { color: #c6bed2; border-color: #ffffff16; background: #ffffff0d; box-shadow: none; }
.empty-state { grid-column: 1 / -1; padding: 70px 30px; border: 1px dashed #ffffff3a; border-radius: 24px; text-align: center; background: #ffffff04; }
.empty-state strong { display: block; font-size: 23px; font-weight: 800; margin-bottom: 8px; }
.empty-state span { color: #a5a1b5; font-size: 13px; }
.list-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px 2px 0; color: #8f8aa6; font-size: 11px; font-weight: 800; letter-spacing: .35px; }
.text-link { padding: 7px 0; border: 0; background: transparent; color: #efd1e9; font-size: 12px; font-weight: 800; transition: color .25s; }
.text-link:hover { color: #ffafcb; }
.text-link span { margin-left: 8px; }

/* End-of-page guidance, shaped like the rest of the product. */
.callout-section { width: min(1380px, calc(100% - 42px)); margin: 0 auto 92px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid #ffffff18; border-radius: 35px; background: linear-gradient(135deg, #281d39 0%, #292037 40%, #1b1b2d 100%); box-shadow: var(--shadow); }
.callout-section::before { content: ''; position: absolute; pointer-events: none; width: 440px; height: 440px; right: -130px; bottom: -190px; border: 1px solid #ffb7e31d; border-radius: 50%; box-shadow: 0 0 0 65px #d9a2ff0b, 0 0 0 132px #d9a2ff06; z-index: -1; }
.callout-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px, 7vw, 95px); margin: 0 auto; padding: clamp(48px, 6.5vw, 93px); max-width: 1380px; }
.callout-intro h2 { margin-top: 19px; font-size: clamp(42px, 4.9vw, 67px); }
.callout-intro p { color: #c1b9d0; font-size: 14px; line-height: 1.78; max-width: 475px; margin: 0 0 28px; }
.steps { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.step { display: grid; grid-template-columns: 45px 1fr 18px; gap: 16px; align-items: start; padding: 23px 25px; border-radius: 21px; border: 1px solid #ffffff12; background: rgba(255, 255, 255, .052); transition: transform .45s var(--ease), background .3s, border-color .3s; }
.step:hover { transform: translateX(5px); background: #ffffff12; border-color: #ffffff2c; }
.step-number { color: #f0b2ce; font: 800 20px/1.3 'Manrope', sans-serif; }
.step strong { color: #fff7ff; font-size: 15px; font-weight: 800; }
.step p { color: #c0b6c9; font-size: 12px; line-height: 1.6; margin: 5px 0 0; }
.step-arrow { color: #e4bfdb; font-size: 18px; }

/* Footer and nomination modal. */
.footer { background: #0a0b14; border-top: 1px solid #ffffff12; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 38px; max-width: var(--width); margin: 0 auto; width: calc(100% - 70px); padding: 51px 0 32px; }
.footer-brand { display: flex; align-items: center; font: 800 17px/1.2 'Manrope', sans-serif; letter-spacing: -.3px; }
.footer-brand small { display: block; color: #9691aa; margin-top: 8px; font: 800 9px/1.1 'DM Sans', sans-serif; letter-spacing: 1px; }
.footer-links { display: flex; gap: 25px; align-items: center; color: #bdb4c8; font-size: 12px; font-weight: 700; }
.footer-links a:hover, .footer-bottom a:hover { color: #ffc7e6; }
.footer-bottom { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid #ffffff14; }
.footer-bottom p { margin: 0; max-width: 810px; color: #8a849d; font-size: 11px; line-height: 1.75; }
.footer-bottom a { white-space: nowrap; color: #d8c2db; font-size: 11px; font-weight: 800; }
.submit-modal { width: calc(100% - 32px); max-width: 675px; max-height: min(90vh, 920px); overflow: auto; padding: 37px; border-radius: 30px; border: 1px solid #e0b7e259; color: #fff7ff; background: linear-gradient(145deg, #272038, #161624); box-shadow: 0 36px 110px #03020bc9; }
.submit-modal[open] { animation: modal-pop .38s var(--ease) both; }
.submit-modal::backdrop { background: #090711c9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@keyframes modal-pop { from { opacity: .4; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.modal-brand { display: block; margin: 0 0 11px; color: #f4accf; letter-spacing: 1.2px; }
.modal-head h2 { font: 800 clamp(30px, 4.7vw, 41px)/1.15 'Manrope', sans-serif; letter-spacing: -1.9px; margin: 12px 0 0; }
.modal-head h2 span { color: #f9b1d2; }
.close-modal { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; color: #fff; background: #ffffff12; font-size: 25px; line-height: 1; transition: background .25s, transform .3s var(--ease); }
.close-modal:hover { background: #ffffff27; transform: rotate(90deg); }
.modal-desc { font-size: 13px; color: #beb7c8; line-height: 1.7; margin: 17px 0 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; position: relative; font-size: 12px; font-weight: 800; color: #efe9f6; }
.field > span { color: #ffb2d4; }
.field small { font-size: 10px; font-weight: 600; color: #a69bae; }
.field.wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; color: #fff6fe; background: #121320; border: 1px solid #ffffff24; border-radius: 13px; outline: 0; font-size: 13px; font-weight: 400; transition: border-color .27s, box-shadow .27s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #e1a9de; box-shadow: 0 0 0 4px #d4a3e018; }
.field input::placeholder, .field textarea::placeholder { color: #746f86; }
.field textarea { resize: vertical; min-height: 115px; padding-bottom: 28px; }
.char-count { position: absolute; right: 12px; bottom: 12px; padding: 2px 5px; border-radius: 5px; color: #a19bad !important; background: #121320; font-size: 10px; }
.char-count span { color: inherit; }
.form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 25px; }
#form-error { color: #ffabc0; font-size: 12px; line-height: 1.5; }
.fine-print { color: #978da8; font-size: 11px; line-height: 1.7; margin: 18px 0 0; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 70; max-width: min(420px, calc(100% - 40px)); padding: 16px 22px; border-radius: 16px; color: #241429; background: #f6c0d5; box-shadow: 0 15px 55px #05040c7a; font-size: 13px; font-weight: 800; opacity: 0; transform: translateY(13px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
.toast.show { opacity: 1; transform: translateY(0); }

/* Scroll reveals; JavaScript enables these only when it can observe them. */
.motion-ready .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .86s var(--ease), transform .9s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .currency-card.reveal { transition: opacity .7s var(--ease), transform .72s var(--ease), border-color .35s, box-shadow .5s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
@media (min-width: 900px) { .motion-ready .hero-content .reveal { transition-duration: .95s; } }

@media (max-width: 1150px) {
  .hero { min-height: 600px; }
  .hero-content { max-width: 750px; }
  .hero-issue { display: none; }
  .currency-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-row { flex-wrap: wrap; }
  .filter-tools { margin-left: auto; }
  .callout-inner { gap: 35px; }
}
@media (max-width: 800px) {
  .site-header { height: 75px; }
  .site-header.is-scrolled { height: 69px; }
  .header-inner { padding: 0 23px; }
  .hero { width: calc(100% - 24px); margin-top: 13px; min-height: 560px; border-radius: 28px; }
  .hero-content { padding: 85px 34px 115px; }
  .hero-art { background-position: center, center, 66% center; }
  .hero h1 { font-size: clamp(50px, 10vw, 76px); }
  .hero-desc { max-width: 480px; font-size: 14px; }
  .hero-bottom { left: 34px; right: 34px; font-size: 9px; }
  .vice-ribbon { width: calc(100% - 24px); margin-top: 12px; }
  .info-strip { width: calc(100% - 34px); margin-top: 16px; }
  .info-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .info-stat { min-height: 108px; padding: 20px; }
  .stat-long { grid-column: 1 / -1; min-height: 90px; justify-content: start; }
  .section-pad { padding: 82px 0 90px; }
  .leaderboard-section { width: calc(100% - 34px); }
  .section-head { align-items: start; }
  .section-head .outline-cta { display: none; }
  .section-head h2 { font-size: 44px; }
  .filter-row { padding: 11px; }
  .filter-tools { width: 100%; margin-left: 0; }
  .search-wrapper { flex: 1; }
  .search-wrapper input { width: 100%; }
  .callout-section { width: calc(100% - 24px); margin-bottom: 58px; border-radius: 28px; }
  .callout-inner { grid-template-columns: 1fr; padding: 55px 34px; }
  .steps { margin-top: 8px; }
  .footer-inner { width: calc(100% - 42px); }
}
@media (max-width: 580px) {
  .header-inner { gap: 11px; padding: 0 16px; }
  .brand-initial { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; font-size: 19px; }
  .brand { gap: 10px; }
  .brand-text { font-size: 14px; letter-spacing: -.6px; }
  .brand-text small { font-size: 7px; letter-spacing: .6px; margin-top: 5px; }
  .header-cta { padding: 10px 12px; gap: 7px; font-size: 11px; }
  .header-cta span { font-size: 15px; }
  .hero { min-height: 555px; border-radius: 23px; }
  .hero-content { padding: 73px 23px 114px; }
  .hero-art { background-position: center, center, 67% center; }
  .hero::after { display: none; }
  .hero h1 { margin: 30px 0 20px; font-size: clamp(43px, 10.5vw, 58px); letter-spacing: -.066em; }
  .hero-eyebrow { font-size: 9px; gap: 7px; letter-spacing: .85px; }
  .hero-desc { font-size: 13px; line-height: 1.8; }
  .hero-actions { gap: 16px; margin-top: 29px; }
  .btn-primary { padding: 12px 18px; min-height: 48px; font-size: 12px; gap: 12px; }
  .btn-ghost { font-size: 12px; }
  .hero-bottom { left: 23px; right: 23px; bottom: 23px; font-size: 8px; letter-spacing: .2px; }
  .hero-bottom span:last-child { display: none; }
  .vice-ribbon { border-radius: 12px; gap: 7px; font-size: 9px; letter-spacing: 2px; min-height: 44px; }
  .info-stat .stat-value { font-size: 35px; }
  .stat-label { font-size: 9px; }
  .stat-long { display: flex; }
  .section-pad { padding: 71px 0 81px; }
  .section-head h2 { font-size: 39px; }
  .section-head p { font-size: 13px; }
  .filter-row { border-radius: 19px; }
  .filters { gap: 3px; justify-content: center; }
  .filter { padding: 10px 13px; font-size: 11px; }
  .filter-tools select { width: 128px; padding: 0 8px; font-size: 11px; }
  .currency-list { grid-template-columns: 1fr; gap: 14px; }
  .currency-card { min-height: 320px; padding: 23px; border-radius: 22px; }
  .currency-title h3 { font-size: 23px; }
  .list-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .callout-inner { padding: 51px 24px; }
  .callout-intro h2 { font-size: 43px; }
  .step { padding: 20px; gap: 10px; grid-template-columns: 38px 1fr 17px; border-radius: 17px; }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; padding-top: 40px; }
  .footer-links { gap: 18px; }
  .footer-bottom { grid-column: 1; flex-direction: column; align-items: start; }
  .submit-modal { padding: 25px 21px; border-radius: 24px; }
  .form-grid { grid-template-columns: 1fr; gap: 17px; }
  .field.wide { grid-column: auto; }
  .form-bottom { flex-direction: column; align-items: stretch; }
  .form-bottom .btn-primary { width: 100%; }
}
@media (max-width: 370px) {
  .brand-text small { font-size: 6.2px; }
  .header-cta { font-size: 10px; padding: 10px; }
  .hero h1 { font-size: 40px; }
  .filter { padding: 9px 10px; }
  .hero-eyebrow { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art { transform: none !important; will-change: auto; }
  .motion-ready .reveal, .motion-ready .currency-card.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Featured roleplay currency, without category tabs. */
.currency-list{grid-template-columns:minmax(0,1fr);max-width:760px;width:100%;margin:0 auto;gap:0}
.currency-card{min-height:315px}
.section-head{margin-bottom:32px}
.list-bottom{max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.currency-list{max-width:100%}.currency-card{min-height:290px}}

/* Featured GTA Coin concept with fictional up/down tally */
.currency-card.featured-coin-card{display:grid;grid-template-columns:minmax(200px,.88fr) minmax(0,1.12fr);grid-template-areas:none;grid-template-rows:auto;gap:29px;align-items:center;padding:25px;min-height:370px;max-width:760px;background:linear-gradient(135deg,#242138,#191929);border-radius:27px}
.featured-coin-art{display:grid;place-items:center;overflow:hidden;min-width:0;aspect-ratio:1;border-radius:22px;background:#e9e9ea;border:1px solid #ffffff21;box-shadow:0 18px 30px #04040b45}
.featured-coin-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.featured-coin-card:hover .featured-coin-image{transform:scale(1.04)}
.featured-coin-details{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.featured-kicker{font-size:9px;letter-spacing:1.2px;color:#d3a8dd;font-weight:850;margin-bottom:12px}
.featured-coin-title{font:800 clamp(27px,3vw,39px)/1.16 'Manrope',sans-serif;letter-spacing:-1.5px;color:#faf5fc;margin:0 0 8px}
.featured-ticker{font-size:13px;font-weight:850;color:#f5b5d8;margin-bottom:13px}
.featured-proposer{font-size:12px;color:#b9b1ca;line-height:1.5;margin-bottom:12px}
.featured-proposer strong{color:#f8e9fc}.featured-proposer span{color:#8e849e}
.featured-description{font-size:13px;line-height:1.7;color:#c4bacc;margin:0 0 17px}
.featured-tally-note{font-size:11px;line-height:1.5;color:#d4b1ca;margin:0 0 13px}
.featured-votes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.featured-vote-button{display:grid;grid-template-columns:21px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 7px;align-items:center;text-align:left;min-width:0;padding:12px 10px;border:1px solid #ffffff2d;border-radius:16px;background:#ffffff0e;color:#fcf6fe;transition:transform .24s ease,border-color .2s ease,background .2s ease}
.featured-vote-button:not(:disabled):hover{transform:translateY(-2px);background:#ffffff17;border-color:#eac7f185}
.featured-vote-button.upvote{background:#aa85e31a;border-color:#b49bec55}
.featured-vote-button.downvote{background:#c47baf15;border-color:#e4a6c44d}
.featured-vote-button.selected{outline:1px solid #d8c5e9}
.featured-vote-button:disabled{cursor:default;opacity:.9}
.featured-vote-button .vote-icon{grid-column:1;grid-row:1/3;font-size:21px;line-height:1;color:#eac4e3;text-align:center}
.featured-vote-button .reaction-total{grid-column:2;grid-row:1;font:800 19px/1.2 'Manrope',sans-serif;letter-spacing:-.65px;font-variant-numeric:tabular-nums}
.featured-vote-button small{grid-column:2;grid-row:2;font:800 8px/1.2 'DM Sans',sans-serif;letter-spacing:1px;color:#bcb0cc}
@media(max-width:760px){.currency-card.featured-coin-card{grid-template-columns:1fr;gap:23px;padding:20px}.featured-coin-art{width:min(100%,355px);margin:0 auto}.featured-coin-details{width:100%}.featured-coin-title{font-size:35px}}

/* November 2026 header refresh: white R-star on a violet tile. */
.brand-initial {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(160deg, #494472 0%, #595185 100%);
  box-shadow: none;
  overflow: hidden;
}
.brand-initial img {
  display: block;
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.brand-initial:hover { filter: brightness(1.09); }
/* Remove the hard divider and scrolled shadow for a seamless header. */
.site-header,
.site-header.is-scrolled {
  border: 0;
  border-bottom: 0;
  box-shadow: none;
}
@media (max-width: 560px) {
  .brand-initial { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; }
  .brand-initial img { width: 28px; height: 28px; }
}

/* Transparent R-star / Voting PNG logo in the header. */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.site-header .brand-logo-full {
  display: block;
  height: 52px;
  width: auto;
  max-width: min(235px, 50vw);
  object-fit: contain;
}
.site-header,
.site-header.is-scrolled {
  border-bottom: 0;
  box-shadow: none;
}
@media (max-width: 760px) {
  .site-header .brand-logo-full { height: 45px; max-width: 50vw; }
}
@media (max-width: 450px) {
  .site-header .brand-logo-full { height: 39px; max-width: 49vw; }
}

/* Form contact address, compact step layout after arrow cleanup. */
.steps .step{grid-template-columns:45px minmax(0,1fr)}
.field .email-help{display:block;color:#bdb4cc;font-size:11px;font-weight:500;line-height:1.6;letter-spacing:normal;margin-top:2px}
.field input[type="email"]{width:100%}


/* Unity RP-inspired theme: black, red and white. */
:root{--bg:#09090b;--surface:#161619;--surface-2:#202024;--text:#fff;--muted:#aaa;--violet:#f20d35;--pink:#fa264a;--peach:#fd6378;--line:#ffffff1a}
body{background:#09090b;background-image:radial-gradient(ellipse 60% 500px at 90% 0%,#ab0a2b1b,transparent)}
.site-header,.site-header.is-scrolled{background:#09090be9;border:0;box-shadow:none}
.site-header .unity-brand{display:inline-flex;align-items:center;gap:12px}
.unity-emblem{width:43px;height:43px;flex:none;color:#f20d35}
.unity-name{font:800 29px/1 'Manrope',sans-serif;letter-spacing:-1.5px;white-space:nowrap}
.unity-name span{color:#f20d35;font-size:.7em;letter-spacing:-.3px;margin-left:3px}
.unity-divider{height:32px;width:1px;background:#ffffff55;margin:0 4px}
.unity-voting{font:800 20px/1.08 'Manrope',sans-serif;white-space:nowrap}
.unity-voting small{display:block;font:800 8px/1.15 'DM Sans',sans-serif;letter-spacing:1.2px;color:#aaa;text-transform:uppercase;margin-top:5px}
.hero{background:#100e11;border-color:#f20d352e;box-shadow:0 30px 100px #0008}
.hero-art{background-image:linear-gradient(90deg,#09090cfc 0%,#120b0ff9 30%,#1d0b12ca 60%,#300b1795 100%),linear-gradient(180deg,#13070a34,#09090acc),url('https://raw.githubusercontent.com/ClaudeAIOfficial/rocsup/main/banner.png');filter:saturate(.35) contrast(1.13)}
.hero::before{background:radial-gradient(circle at 80% 33%,#dc103d55,transparent 43%),radial-gradient(circle at 86% 83%,#410b1f7a,transparent 40%)}
.hero::after{border-color:#f20d3520;box-shadow:0 0 0 60px #f20d3507,0 0 0 122px #f20d3504}
.hero-eyebrow,.section-kicker,.modal-brand{color:#ffacb9}.hero-live{background:#f20d35;box-shadow:0 0 0 5px #f20d3520}
.hero h1 span{background:linear-gradient(110deg,#f20d35,#ff6f88);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{color:#e3d8dc}
.btn-primary{background:linear-gradient(115deg,#f20d35,#d30731);border-color:#fe365e;color:#fff;box-shadow:0 10px 30px #f20d3531}
.btn-primary:hover:not(:disabled){box-shadow:0 16px 42px #f20d354b}
.btn-ghost:hover{color:#ff657b}
.hero-issue{background:#250b16bb;border-color:#f20d3557}
.hero-bottom{border-color:#ffffff31}
.vice-ribbon{background:linear-gradient(100deg,#7a0c26,#f20d35 45%,#b3072c 75%,#65091e);color:#fff;border-color:#ff39562d;letter-spacing:1.8px;gap:16px}
.info-stat{background:#161619;border-color:#ffffff15}.info-stat .stat-value{color:#fff}
.status-indicator{background:#f20d35;box-shadow:0 0 0 6px #f20d351c}
.section-head h2 span,.callout-intro h2 span{color:#ff4060}
.outline-cta{background:#f20d3518;color:#fff;border-color:#f20d357a}.outline-cta:hover{background:#f20d352c;border-color:#fa4967}
.currency-card,.currency-card.featured-coin-card{background:linear-gradient(145deg,#1d1b1e,#101013);border-color:#ffffff18}
.currency-card::before{background:linear-gradient(90deg,#f20d35,#8e0622)}
.currency-card:hover,.currency-card.featured-coin-card:hover{border-color:#ff4c6b7f;box-shadow:0 20px 50px #0008}
.featured-kicker,.featured-ticker{color:#ff496b}.featured-proposer,.featured-description,.featured-tally-note{color:#bcb0b6}
.featured-vote-button.upvote{background:#f20d3520;border-color:#f20d3565}
.featured-vote-button.downvote{background:#ffffff09;border-color:#ffffff2a}
.featured-vote-button .vote-icon{color:#ff506d}
.featured-vote-button.selected{outline-color:#ff506d}
.callout-section{background:linear-gradient(135deg,#261018,#1e1015 55%,#111114);border-color:#f20d3526}
.callout-section::before{border-color:#f20d3523;box-shadow:0 0 0 65px #f20d350a}
.step{background:#ffffff08;border-color:#ffffff16}.step-number{color:#ff5270}
.footer{background:#09090b;border-color:#ffffff16}.footer-brand strong{color:#f20d35}.footer-links a:hover,.footer-bottom a:hover{color:#ff4969}
.submit-modal{background:linear-gradient(145deg,#1c191b,#100f11);border-color:#f20d354f}.modal-head h2 span{color:#ff4b68}
.field input,.field select,.field textarea{background:#151417;border-color:#ffffff27}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#f20d35;box-shadow:0 0 0 4px #f20d3521}
.close-modal{background:#231a1e}.close-modal:hover{background:#42202b}
.toast{background:#f20d35;color:#fff}
@media(max-width:700px){.site-header .unity-brand{gap:8px}.unity-emblem{width:34px;height:34px}.unity-name{font-size:22px}.unity-divider{height:26px;margin:0 2px}.unity-voting{font-size:17px}.unity-voting small{font-size:6.5px;letter-spacing:.5px}.vice-ribbon{gap:8px;font-size:10px;letter-spacing:1px}}
@media(max-width:390px){.unity-name{font-size:19px}.unity-emblem{width:29px;height:29px}.unity-voting{font-size:14px}.unity-voting small{font-size:5.8px}.site-header .unity-brand{gap:6px}}