/* Sunset theme: colours sampled from the hero image (plum night, magenta, coral, sunset orange). */
:root {
  --bg: #0e0711;
  --panel: #1a0d1d;
  --panel2: #241227;
  --line: #3b1c3e;
  --ink: #fdf0ee;
  --mute: #c7a4b9;
  --gold: #ff9bb0;
  --gold2: #ff6f9a;
  --pink: #ff4f8b;
  --purple: #8b3fd6;
  --red: #ff3b5c;
  --gold-grad: linear-gradient(180deg, #ffc49a 0%, #ff7f8f 45%, #e8458f 100%);
  --sunset: linear-gradient(120deg, #ff8a6a 0%, #ff4f8b 50%, #8b3fd6 100%);
  --glow-pink: rgba(255, 79, 139, .22);
  --glow-purple: rgba(139, 63, 214, .16);
}

body { background: var(--bg); }

/* gradient accent words in headings */
.h2 .gold { background: linear-gradient(90deg, #ff9a7a, #ff5c93 50%, #d94bd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: #ff7aa8; }

/* nav + footer */
.nav { background: rgba(14, 7, 17, .82); border-bottom-color: var(--line); }
.foot { background: #0a050c; }
.icon-btn { background: var(--panel); border-color: var(--line); }

/* sections get a soft sunset glow so they feel like the photo */
#why { background: radial-gradient(ellipse 60% 50% at 85% 0%, var(--glow-pink), transparent 70%); }
#live { background: radial-gradient(ellipse 55% 45% at 10% 10%, var(--glow-purple), transparent 70%); }
#tokenomics { background: radial-gradient(ellipse 60% 50% at 90% 20%, rgba(255, 162, 79, .12), transparent 70%); }
#missions { background: radial-gradient(ellipse 60% 50% at 15% 0%, var(--glow-pink), transparent 70%); }
.sec-gta {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(14,7,17,0) 18%, rgba(14,7,17,0) 80%, var(--bg) 100%),
    linear-gradient(90deg, rgba(14,7,17,.9) 0%, rgba(14,7,17,.72) 42%, rgba(14,7,17,.25) 75%, rgba(14,7,17,.15) 100%),
    url(/assets/city.webp) center 60% / cover no-repeat;
}
@media (max-width: 1000px) {
  .sec-gta { background:
    linear-gradient(180deg, var(--bg) 0%, rgba(14,7,17,.55) 15%, rgba(14,7,17,.78) 55%, rgba(14,7,17,.6) 80%, var(--bg) 100%),
    url(/assets/city.webp) 30% center / cover no-repeat; }
}
#buy { background: radial-gradient(ellipse 55% 45% at 90% 10%, var(--glow-purple), transparent 70%); }
#faq { background: radial-gradient(ellipse 50% 40% at 10% 0%, rgba(255, 162, 79, .1), transparent 70%); }

/* cards */
.card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border-color: var(--line); }
.rank-steps li { background: #140a17; border-color: var(--line); }
.rank-steps li::before { background: #3a1d3c; }
.ms .badge { background: #2e1630; }
.ms .num { color: #3e2140; }
.ms[data-status="next"] { border-color: rgba(255, 162, 79, .5); }
.cd div { background: rgba(20, 8, 22, .6); border-color: var(--line); }
details { background: var(--panel); border-color: var(--line); }
.locked { background: radial-gradient(circle at 50% 40%, rgba(236, 79, 124, .16), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px); }
.locked-icon { box-shadow: 0 0 0 6px rgba(242, 86, 111, .18); }
.ratio { background: rgba(255, 59, 92, .6); }
.toast { background: #1a0d1d; border-color: var(--pink); }

/* hero shading tinted plum instead of neutral black */
.hero-shade { background: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(14,7,17,.55), rgba(14,7,17,.1) 80%), linear-gradient(180deg, rgba(14,7,17,0) 50%, rgba(14,7,17,.55) 68%, rgba(14,7,17,.75) 85%, var(--bg) 100%), linear-gradient(180deg, rgba(14,7,17,.35) 0%, rgba(14,7,17,0) 20%); }
@media (max-width: 600px) {
  .hero-shade { background: linear-gradient(180deg, rgba(14,7,17,.3) 0%, rgba(14,7,17,.35) 40%, rgba(14,7,17,.78) 62%, rgba(14,7,17,.85) 85%, var(--bg) 100%); }
  .nav-links { background: rgba(14, 7, 17, .97); }
}

/* keep the GTA "Mission Passed!" lettering gold */
.hero-kicker, .mp-title, .mission-inline, .ms-stamp b { color: #ffb84d; }

/* buttons: pill shape, sunset-pink gradient, glass secondary */
.btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-weight: 700; padding: 13px 26px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(135deg, #ff8a5c 0%, #ff4f8b 50%, #c23ad6 100%); color: #fff; box-shadow: 0 8px 28px rgba(255, 79, 139, .38), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-gold:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 12px 36px rgba(255, 79, 139, .5), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--ink); border: 1px solid rgba(255, 122, 168, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255, 79, 139, .14); border-color: rgba(255, 122, 168, .7); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn[aria-disabled="true"] { opacity: .8; }
.btn[aria-disabled="true"]:hover { transform: none; }
.nav-buy { margin-right: 4px; }
.step .n, .locked-icon { color: #fff; }

/* "Respect +" uses the same GTA font as the RESPECT+ logo and headings */
.why-tag, .brand-inline { font-family: Pricedown, Impact, "Arial Narrow", sans-serif; font-variant-ligatures: none; font-feature-settings: "liga" 0; text-transform: uppercase; letter-spacing: .03em; }
.why-tag { font-size: 30px; }
.tag-buy { color: #fff; }
.why-tag span, .brand-inline span { color: var(--pink); }
.brand-inline { color: #fff; font-size: 1.15em; line-height: 1; }

/* glass cards */
.card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .085) 0%, rgba(255, 120, 180, .05) 45%, rgba(139, 63, 214, .06) 100%);
  border: 1px solid rgba(255, 170, 210, .16);
  box-shadow: 0 10px 40px rgba(8, 2, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.card:hover { border-color: rgba(255, 170, 210, .3); }
.ms-main { background: linear-gradient(135deg, rgba(255, 138, 106, .85), rgba(255, 79, 139, .82) 50%, rgba(139, 63, 214, .85)); border: 1px solid rgba(255, 255, 255, .25); }
.rank-steps li { background: rgba(255, 255, 255, .04); border-color: rgba(255, 170, 210, .14); }
details { background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,120,180,.04)); border-color: rgba(255, 170, 210, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* soft colour orbs behind sections so the glass has something to blur */
#why, #live, #tokenomics, #missions, #buy, #faq { isolation: isolate; overflow: hidden; }
#why::before, #tokenomics::before, #missions::before, #buy::before {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .35; pointer-events: none;
}
#why::before { background: #ff4f8b; left: -160px; top: 35%; }
#tokenomics::before { background: #8b3fd6; right: -180px; top: 20%; }
#missions::before { background: #ff7a59; left: -200px; top: 45%; opacity: .25; }
#buy::before { background: #c23ad6; right: -160px; top: 30%; opacity: .28; }

/* radar: pink / purple to match the sunset theme (buy blips stay green, sells red) */
.radar { background: radial-gradient(circle, #3a1342 0%, #1c0a24 72%); border: 6px solid #0a050c; box-shadow: 0 0 0 2px rgba(255, 122, 168, .45), 0 0 40px rgba(255, 79, 139, .35), 0 20px 60px rgba(0, 0, 0, .6); }
.radar::after { background: repeating-radial-gradient(circle, transparent 0 22%, rgba(255, 150, 200, .12) 22% 22.5%); }
.radar-sweep { background: conic-gradient(from 0deg, rgba(255, 79, 139, .5), rgba(139, 63, 214, .18) 12%, transparent 24%); }
.radar-road { background: rgba(255, 190, 220, .22); }
.radar-me { border-bottom-color: #fff; filter: drop-shadow(0 0 6px rgba(255, 79, 139, .9)); }
.radar-label { background: rgba(14, 7, 17, .75); border: 1px solid rgba(255, 122, 168, .3); }

/* countdown numbers in white */
.cd b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 18px rgba(255, 79, 139, .45); }