/* ==========================================================================
   AutoSell — information site
   Dark, gold-on-night, Minecraft-adjacent without being a pixel-art pastiche.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Pulled from the AutoSell mark. */
  --gold: #ffd100;
  --gold-soft: #ffe066;
  --gold-deep: #d9a800;

  /* DonutSMP blue, for the buy side and secondary accents. */
  --blue: #1e7bff;
  --blue-deep: #0b4fc4;

  --green: #6fcf3f;
  --red: #ff5a5a;

  --bg: #05070d;
  --panel: rgba(13, 18, 30, 0.72);
  --panel-solid: #0d121e;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 209, 0, 0.28);

  --ink: #f2f5fa;
  --ink-dim: #a8b2c4;
  --ink-faint: #6d788c;

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 10px 40px rgba(255, 209, 0, 0.16);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel: 'Press Start 2P', var(--font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ── background stack ───────────────────────────────────────────────── */
/* The canvas is blurred and scaled past the viewport edge so the blur has
   something to sample and never shows a soft border. */
#bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  /* Just enough blur to push the scene behind the text without turning it to
     soup — the world should still be readable as a world. */
  filter: blur(1.5px) saturate(1.32) brightness(0.86);
  transform: scale(1.03);
  will-change: transform;
}

/* Scrim: without this the vibrant sky eats every piece of body text. Lighter
   at the top so the world reads clearly behind the hero, heavier further down
   where the real content sits. */
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(125% 80% at 50% 0%, rgba(5, 7, 13, 0.18) 0%, rgba(5, 7, 13, 0.62) 52%, rgba(5, 7, 13, 0.90) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.34) 0%, rgba(5, 7, 13, 0.82) 100%);
}

/* Fine grain, so the large flat blurred areas do not band on cheap panels. */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

body.bg-static { background: linear-gradient(180deg, #0a1220 0%, #05070d 60%); }

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; position: relative; }

.section-head { text-align: center; margin-bottom: 52px; }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 209, 0, 0.06);
  margin-bottom: 18px;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }

h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }

.lede {
  color: var(--ink-dim);
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── nav ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 7, 13, 0.55);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.scrolled {
  background: rgba(5, 7, 13, 0.86);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
}

/* The mark is keyed transparent by scripts/make-logo-transparent.js, so it sits
   on any background directly — no blend-mode workaround needed. */
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 8px rgba(255, 209, 0, 0.34));
}
.brand span {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.brand b { color: var(--gold); font-weight: 800; }

.nav-links { display: flex; gap: 4px; align-items: center; }

.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

/* Current page, so you always know where you are in a multi-page site. */
.nav-links a.active {
  color: var(--gold);
  background: rgba(255, 209, 0, 0.09);
}
.nav-links a.nav-cta.active { color: #16140a; background: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.18s ease;
}
.icon-btn:hover { color: var(--gold); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .off-slash { display: none; }
.icon-btn.muted { color: var(--ink-faint); }
.icon-btn.muted .off-slash { display: block; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn svg { width: 18px; height: 18px; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #16140a;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  box-shadow: 0 14px 46px rgba(255, 209, 0, 0.30);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--line-strong); }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero {
  padding: 92px 0 84px;
  text-align: center;
  position: relative;
}

/* Hero lockup: the mark and the wordmark read as one unit rather than a logo
   with a headline underneath it. */
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
  margin-bottom: 14px;
}

.hero-mark {
  width: clamp(66px, 10vw, 104px);
  height: clamp(66px, 10vw, 104px);
  flex: none;
  filter: drop-shadow(0 0 30px rgba(255, 209, 0, 0.40));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark { animation: none; }
}

.hero h1 {
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 0;
  text-align: left;
  line-height: 1;
}
.hero h1 .g {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "Now and forever" — deliberately quiet, sitting under the wordmark. */
.hero-sub {
  color: var(--ink-faint);
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 34px;
}

.hero p.hero-blurb {
  color: var(--ink-dim);
  font-size: clamp(15px, 1.9vw, 18px);
  max-width: 560px;
  margin: 0 auto 32px;
}

@media (max-width: 560px) {
  .hero-lockup { gap: 12px; }
}

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.trust-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 42px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

/* ── page header (interior pages) ───────────────────────────────────── */
.page-head {
  padding: 72px 0 8px;
  text-align: center;
}
.page-head h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}
.page-head p {
  color: var(--ink-dim);
  font-size: 16.5px;
  max-width: 560px;
  margin: 0 auto;
}

/* ── notice banner ──────────────────────────────────────────────────── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(30, 123, 255, 0.09);
  border: 1px solid rgba(30, 123, 255, 0.28);
  color: var(--ink-dim);
  font-size: 14.5px;
}
.notice svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2px; }
.notice b { color: var(--ink); }

/* ── cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

/* ── steps ──────────────────────────────────────────────────────────── */
.flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.flow { padding: 30px; }
.flow-title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.flow-title h3 { margin: 0; }
.flow-badge {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 13px;
  background: rgba(255, 209, 0, 0.13);
  color: var(--gold);
}
.flow.buy .flow-badge { background: rgba(30, 123, 255, 0.15); color: #66a9ff; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  position: relative;
  counter-increment: s;
  padding: 0 0 22px 44px;
  color: var(--ink-dim);
  font-size: 14.5px;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 209, 0, 0.1);
  border: 1px solid var(--line-strong);
}
.flow.buy .steps li::before {
  color: #66a9ff;
  background: rgba(30, 123, 255, 0.12);
  border-color: rgba(30, 123, 255, 0.3);
}
/* Connector line between step bullets. */
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px; top: 30px;
  width: 1px; height: calc(100% - 30px);
  background: var(--line);
}
.steps li b { color: var(--ink); font-weight: 700; }
.steps li:last-child { padding-bottom: 0; }

/* ── features ───────────────────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat {
  padding: 26px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.feat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.feat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 209, 0, 0.1);
  color: var(--gold);
  margin-bottom: 16px;
}
.feat-icon svg { width: 21px; height: 21px; }
.feat h3 { font-size: 16px; margin-bottom: 7px; }
.feat p { margin: 0; color: var(--ink-dim); font-size: 14px; line-height: 1.6; }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  text-align: center;
}
.stat { padding: 30px 20px; }
.stat-val {
  font-size: 32px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat-key {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 7px;
}

/* ── faq ────────────────────────────────────────────────────────────── */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }

.qa {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.qa[open] { border-color: var(--line-strong); }

.qa summary {
  padding: 19px 22px;
  cursor: pointer;
  font-weight: 650;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  transition: color 0.18s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold); }
.qa summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 0.22s ease;
}
.qa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.qa-body {
  padding: 0 22px 20px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.7;
}
.qa-body p { margin: 0 0 10px; }
.qa-body p:last-child { margin-bottom: 0; }
.qa-body b { color: var(--ink); }

/* ── cta band ───────────────────────────────────────────────────────── */
.cta-band {
  text-align: center;
  padding: 56px 32px;
  border-radius: 22px;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255, 209, 0, 0.13), transparent 62%),
    var(--panel);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: var(--ink-dim); max-width: 520px; margin: 0 auto 28px; }

.cta-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
}
.cta-logos img { width: 52px; height: 52px; }
.cta-logos .as { mix-blend-mode: screen; }
.cta-logos .x { color: var(--ink-faint); font-size: 19px; font-weight: 300; }

/* ── footer ─────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 34px;
  margin-top: 40px;
}
.foot-top {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.foot-links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.foot-links a { color: var(--ink-dim); font-size: 14px; transition: color 0.18s ease; }
.foot-links a:hover { color: var(--gold); }

.disclaimer {
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 760px;
}

/* ── scroll reveal ──────────────────────────────────────────────────── */
/* Rise, settle, and come into focus. Only opacity, transform and filter are
   animated, so the whole thing stays on the compositor.
   --reveal-delay is set per element by app.js to stagger items within a grid. */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── hero entrance ──────────────────────────────────────────────────── */
/* The hero is above the fold on every load, so it animates on a timeline
   rather than waiting for a scroll that may never come. */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(16px) scale(0.86) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}

.hero-lockup .hero-mark {
  animation: markIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
             float 6s ease-in-out 1.1s infinite;
}
.hero-lockup h1 { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.hero-sub { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both; }
.hero-blurb { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both; }
.hero-cta { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.trust-row { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both; }
.page-head h1 { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.page-head p { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-lockup .hero-mark,
  .hero-lockup h1,
  .hero-sub,
  .hero-blurb,
  .hero-cta,
  .trust-row,
  .page-head h1,
  .page-head p { animation: none; opacity: 1; transform: none; }
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  section { padding: 68px 0; }
  .flow-grid { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { padding: 56px 0 60px; }
}

@media (max-width: 560px) {
  .feat-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .foot-links { margin-left: 0; gap: 14px; }
  .cta-band { padding: 40px 22px; }
}