/* DiscoHub site + dashboard. Self-contained, theme-aware.
   Design language borrowed from the Osiris DevWorks family (osiris-devworks.com,
   battlestations): a deep tinted-dark ground, Orbitron/Michroma display type,
   refined panels with a hairline accent border that lifts on hover, accent-glow
   micro-interactions. DiscoHub owns the violet -> blue accent (its logo /
   Discord's color), the way battlestations owns cyan and the brand owns gold. */

:root {
  /* The two platforms the logo's dancers wear */
  --github: #0d1117;        /* GitHub black-and-white (the suit) */
  --discord: #6a4cf0;       /* Discord blurple, violet-shifted (the dress) */

  /* Accent scale (the DiscoHub violet -> blue) */
  --violet: #7c5cff;
  --violet-bright: #a488ff;
  --blue: #4f7bff;
  --grad: linear-gradient(135deg, #7c5cff 0%, #4f7bff 100%);
  /* the disco wordmark gradient: hot pink -> violet -> blue (from the reference) */
  --grad-disco: linear-gradient(120deg, #ff4fc4 0%, #a24cff 48%, #3d8bff 100%);

  /* Dark ground + surfaces */
  --bg: #090812;            /* near-black, violet-tinted (the logo's star ground) */
  --bg-2: #100d1c;          /* scrollbar track / deepest wells */
  --panel: #16132a;         /* card / panel surface */
  --panel-2: #1e1a36;       /* nested / hover surface */
  --line: #2a2547;          /* hairline border */
  --line-bright: #3d3568;   /* border on hover */

  --text: #eae8f6;
  --muted: #a39dc4;
  --faint: #756f96;

  --font-disco: "Monoton", "Orbitron", system-ui, sans-serif;  /* the DiscoHub wordmark */
  --font-display: "Orbitron", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Michroma", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1120px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f6fc;
    --bg-2: #edeaf6;
    --panel: #ffffff;
    --panel-2: #f3f1fb;
    --line: #e3dff2;
    --line-bright: #cdc4ee;
    --text: #1a1626;
    --muted: #5f5980;
    --faint: #8b85a6;
  }
}
:root[data-theme="dark"] {
  --bg: #090812; --bg-2: #100d1c; --panel: #16132a; --panel-2: #1e1a36;
  --line: #2a2547; --line-bright: #3d3568;
  --text: #eae8f6; --muted: #a39dc4; --faint: #756f96;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f6fc; --bg-2: #edeaf6; --panel: #ffffff; --panel-2: #f3f1fb;
  --line: #e3dff2; --line-bright: #cdc4ee;
  --text: #1a1626; --muted: #5f5980; --faint: #8b85a6;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* faint violet wash from the top, echoing the logo's disco-ball light */
  background-image:
    radial-gradient(48rem 26rem at 50% -8%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

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

code {
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 0.08rem 0.38rem;
  border-radius: 6px;
  font-size: 0.86em;
  color: var(--violet-bright);
}

/* custom accent scrollbar (matches the family) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--line-bright);
  border-radius: 10px;
  border: 3px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ── Header / nav ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-disco);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--violet-bright);
}
.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  /* the logo art already carries its own ring; just add a soft disco glow */
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--violet) 45%, transparent));
}
.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--violet-bright); background: var(--panel); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--violet) 34%, transparent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px color-mix(in srgb, var(--violet) 48%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border-color: var(--line-bright); color: var(--text); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet-bright); transform: translateY(-1px); }

/* ── Logo treatments (experimental) ── */
/* A: watermark fixed behind all content. It's a body-level sibling at z-index:0;
   the real content (header/main/footer) is lifted to z-index:1 so it sits on
   top. Avoids the negative-z-index-behind-the-body-background trap. */
/* The watermark is fixed (it follows you as you scroll). A scroll listener
   clips it to only show BELOW the hero divider's screen position, so it emerges
   from behind that line and is progressively revealed from the bottom up as you
   scroll -- the hero (wordmark + headline + lede) up top stays clean. */
.site-header, main, .site-footer { position: relative; z-index: 1; }
.logo-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(74vmin, 680px);
  height: min(74vmin, 680px);
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  clip-path: inset(100% 0 0 0); /* hidden until JS reveals from the divider down */
}
/* Violet halo AROUND the mark (a transparent circle casting an outward glow),
   so the centre -- where the couple, the star of the show, dances -- stays
   clear instead of being washed out. */
.logo-watermark::before {
  content: "";
  grid-area: 1 / 1;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  box-shadow: 0 0 65px 6px color-mix(in srgb, var(--violet) 32%, transparent);
}
/* logo-watermark.png has alpha = the logo's brightness, so the dark
   dancefloor/suit are transparent and only the lit parts (couple, disco ball,
   violet ring) show. */
.logo-watermark img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  opacity: 0.2;
}

/* ── Hero (type-led, no giant logo) ── */
.hero { padding: 5.5rem 1.5rem 2.25rem; }
/* Full-width rule echoing the header border, just below the hero note. It
   anchors the transition into the content where the watermark fades in. */
.hero-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}
.hero-inner { max-width: 52rem; margin: 0 auto; text-align: center; }
/* the DiscoHub wordmark, in the disco face, as the brand moment */
.hero-wordmark {
  font-family: var(--font-disco);
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 1.5rem;
  background: var(--grad-disco);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* a soft disco-ball glow under the wordmark */
  filter: drop-shadow(0 6px 34px color-mix(in srgb, #a24cff 50%, transparent));
}
.eyebrow {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--violet-bright);
  margin: 0 0 1.25rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.hero h1 .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede { font-size: 1.12rem; color: var(--muted); margin: 0 auto 2rem; max-width: 40rem; }
.hero-cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.hero-note { color: var(--faint); font-size: 0.85rem; margin-top: 1.5rem; }

/* ── Sections ── */
.section-inner { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem; }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.section-sub { color: var(--muted); margin: 0; }

/* ── Feature cards ── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 6 cards -> 2 rows of 3 */
  gap: 1rem;
}
@media (max-width: 860px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.card-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  color: var(--violet-bright);
  margin-bottom: 0.9rem;
}
.card h3 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; margin: 0 0 0.5rem; letter-spacing: 0.01em; }
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ── Pricing ── */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  max-width: 54rem;
  margin: 0 auto;
}
.tier {
  position: relative;
  overflow: hidden; /* clip the corner ribbon to the card */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  text-align: center;
}
.tier-featured {
  border-color: color-mix(in srgb, var(--violet) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 40%, transparent),
              0 16px 40px rgba(0, 0, 0, 0.35);
}
.pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  color: var(--muted);
}
/* diagonal "Coming soon" ribbon across the top-right corner. Fixed-width band
   with centered text so it sits evenly across the corner after clipping. */
.tier-badge {
  position: absolute;
  width: 150px;
  top: 26px;
  right: -38px;
  transform: rotate(45deg);
  text-align: center;
  background: var(--grad);
  color: #fff;
  padding: 0.32rem 0;
  font-family: var(--font-display);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.4);
}
.tier h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.6rem; letter-spacing: 0.03em; }
.price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: 0 0 1.1rem; }
.price span { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 0; color: var(--muted); text-align: left; }
.tier li { padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; display: flex; gap: 0.5rem; }
.tier li:first-of-type { border-top: none; }
.tier li::before { content: "\25B8"; color: var(--violet); }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--faint);
  font-size: 0.86rem;
}
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--violet-bright); }
.footer-links { display: flex; gap: 1.5rem; }

/* ── Dashboard ── */
.dash { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem; }
/* Welcome text on the left, logo pushed all the way right (above the full-width
   panels below). */
.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.dash-logo {
  width: 170px;
  height: 170px;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--violet) 45%, transparent));
}
.dash h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.dash-sub { color: var(--muted); margin: 0; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-bottom: 1.25rem;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin: 0 0 1.1rem;
}
.tier-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--grad);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.server { margin-bottom: 1.5rem; }
.server:last-child { margin-bottom: 0; }
.server-name { font-family: var(--font-display); font-size: 0.98rem; margin: 0 0 0.6rem; }
.link-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  background: var(--panel-2);
}
.link-row:last-child { margin-bottom: 0; }
.repo-name { font-family: ui-monospace, monospace; font-size: 0.9rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 0.85rem; }
.empty { color: var(--faint); font-style: italic; font-size: 0.92rem; }

/* ── Prose (privacy policy) ── */
.prose { max-width: 46rem; }
.prose h1 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.prose h2 { font-family: var(--font-display); font-size: 1rem; color: var(--violet-bright); margin: 2.2rem 0 0.6rem; letter-spacing: 0.02em; }
.prose p { color: var(--muted); margin: 0 0 1rem; }
.prose a { color: var(--violet-bright); }
.prose a:hover { text-decoration: underline; }

/* ── Message page ── */
.message { max-width: 34rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.message h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .card:hover, .btn:hover { transform: none; }
}