:root {
  --ink: #edf4ee;
  --muted: #a6b6ae;
  --forest: #14221e;
  --forest-deep: #0b1115;
  --green: #b0db96;
  --lime: #c7e6b5;
  --cream: #0e1519;
  --line: #26343a;
  --white: #edf4ee;
  color-scheme: dark;
  background: #0e1519;
}

body { background: #0e1519; }
.site-header {
  background: #0a1013;
  border-bottom: 1px solid #28383a;
  box-shadow: 0 8px 28px #0002;
}
.brand-mark i { background: #b0db96; }
.header-inner nav a { color: #b4c4bc; }
.header-discord { border-color: #486057; }

.hero {
  background:
    radial-gradient(circle at 75% 43%, #315b493e 0, transparent 34%),
    linear-gradient(125deg, #0a1014 4%, #10201f 62%, #0b1417 100%);
}
.hero-grid {
  opacity: .18;
  background-image:
    linear-gradient(#739b8422 1px, transparent 1px),
    linear-gradient(90deg, #739b8422 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero:after { opacity: .09; }
.hero h1 { text-wrap: balance; }
.hero-copy>p { color: #c2d0c8; }
.eyebrow { color: #b0db96; }
.signal { box-shadow: 0 0 0 5px #b0db9620; }
.button-primary, .copy-button {
  color: #101b17;
  background: #b0db96;
  box-shadow: 0 8px 20px #0002;
}
.button-primary:hover, .copy-button:hover { background: #c9ebaf; }
.button-ghost { background: #ffffff05; border-color: #60736a; }
.button-ghost:hover { background: #ffffff12; }
.hero-facts span { background: #ffffff06; border-color: #41564e; color: #c4d3ca; }
.hero-panel {
  background: linear-gradient(155deg, #1b302a, #13221f 62%, #101b1b);
  border-color: #4b6859;
  box-shadow: 0 30px 70px #0008, inset 0 1px #ffffff16;
}
.hero-panel p { color: #c0d0c5; }
.panel-bottom { border-color: #496051; color: #b9c9bb; }

.intro-strip {
  background: #14201f;
  border-top: 1px solid #2d433e;
  border-bottom: 1px solid #2d433e;
}
.strip-inner span { color: #9fc98b; }
.strip-inner strong { color: #edf4ee; }
.strip-inner span+span { border-color: #344b43; }

.guide {
  background:
    radial-gradient(circle at 87% 16%, #1e372b55 0, transparent 34%),
    #0e1519;
}
.section h2, .step-body h3 { color: #f2f6f2; }
.section-heading>p, .step-body>p, .help p { color: #adbbb4; }
.kicker, .mini-label { color: #a7d38f; }
.steps { border-color: #2b3a3c; }
.step { border-color: #2b3a3c; transition: background .2s, padding .2s; }
.step:hover { background: #ffffff04; padding-left: 14px; padding-right: 14px; }
.step-num { color: #9fce86; }
.step-body strong { color: #f0f5ef; }
.step-links a {
  color: #c7e9b7;
  border-color: #4b6755;
  background: #1b2a26;
}
.step-links a:hover { background: #263b2e; }
.step-body .small-note { color: #a2b4a9; }
.small-note a { color: #bde5a9; }
.launcher-grid>div {
  background: #172126;
  border-color: #314044;
  box-shadow: inset 0 1px #ffffff07;
}
.launcher-grid ol { color: #b9c8bf; }

.connect {
  background:
    radial-gradient(circle at 10% 50%, #35533b38, transparent 34%),
    #14231f;
  border-top: 1px solid #344b3f;
  border-bottom: 1px solid #344b3f;
}
.connect p { color: #b7c9b9; }
.connect-card {
  background: #0f1a1b;
  border-color: #416153;
  box-shadow: 0 20px 50px #0004, inset 0 1px #ffffff10;
}
.connect-card>span { color: #b2ccac; }
.connect-card strong { color: #f4f8f2; }

.help { background: #0c1317; }
.checklist li { border-color: #2b3b3e; color: #d5dfd8; }
.checklist li:before { color: #aed695; }
.button-dark { background: #b0db96; color: #101b17; }
.button-dark:hover { background: #c9ebaf; }
.site-footer { background: #080d10; border-top: 1px solid #263339; }
.footer-inner { color: #a8b9ae; }
.toast { background: #b0db96; color: #102018; font-weight: 750; }
.skip-link { background: #b0db96; color: #102018; }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 680px) {
  .step:hover { padding-left: 0; padding-right: 0; }
  .hero-panel { box-shadow: 0 20px 45px #0007; }
}

/* BlockZone identity */
:root { --green: #a7e952; --lime: #cbf78d; }
.brand { gap: 10px; letter-spacing: -.045em; }
.brand-logo { display: block; width: 46px; height: 46px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px #b0ed6940; }
.brand>span:last-child span, .footer-brand span { color: var(--green); }
.hero { background: radial-gradient(circle at 73% 35%, #23382e 0, transparent 42%), linear-gradient(125deg, #080d11 4%, #101b1b 65%, #090f13 100%); }
.hero-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; padding: 72px 0 86px; }
.hero-copy { position: relative; z-index: 2; }
.hero-showcase { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.hero-logo { display: block; width: min(100%, 570px); height: auto; align-self: center; margin: -18px auto -35px; border-radius: 25px; filter: drop-shadow(0 24px 38px #0008); mask-image: radial-gradient(ellipse 72% 72% at 50% 49%, #000 70%, transparent 100%); }
.hero-showcase .hero-panel { position: relative; z-index: 1; width: min(100%, 510px); margin: 0 auto; transform: none; padding: 24px 28px 22px; border-radius: 14px; background: linear-gradient(135deg, #1b3028f2, #101c1cf5); backdrop-filter: blur(12px); }
.hero-showcase .server-address { margin: 24px 0 9px; font-size: clamp(23px, 2.5vw, 34px); letter-spacing: -.045em; overflow-wrap: anywhere; }
.hero-showcase .hero-panel p { max-width: none; margin: 0; }
.hero-showcase .copy-button { width: 100%; margin: 20px 0; }
.hero-showcase .panel-bottom { padding-top: 15px; }
.intro-strip { background: #142118; }
.step-links a:hover { border-color: var(--green); }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand img { object-fit: cover; border-radius: 8px; margin-right: 4px; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 25px; }
  .hero-showcase { width: min(100%, 600px); margin: 0 auto; }
  .hero-logo { width: min(100%, 490px); }
}
@media (max-width: 680px) {
  .brand { font-size: 17px; }
  .brand-logo { width: 38px; height: 38px; border-radius: 8px; }
  .hero-inner { padding-top: 50px; }
  .hero-logo { margin-top: 0; margin-bottom: -25px; }
  .hero-showcase .hero-panel { padding: 21px; }
  .hero-showcase .server-address { font-size: clamp(22px, 6vw, 30px); }
}