/* ==========================================================================
   Modul Development — homepage
   --------------------------------------------------------------------------
   Design language is inherited from the rest of the ecosystem so the three
   properties read as one company:

     · Base palette, radii and elevation come from the Wireloop dashboard
       (--bg #0d1017, --radius 10px, and its blurple/violet accents), so
       clicking through from here to wireloop.getmodul.app feels continuous.
     · The cyan is lifted from the Modul Development "MD" logo itself, and is
       used as the parent-brand accent — it's the one colour that belongs to
       the company rather than to a single product.
     · Each tile then borrows the accent of the thing it links to: blurple for
       Discord, violet for the store, cyan for Wireloop. Read left to right the
       four tiles sweep across one gradient rather than looking like four
       unrelated brand colours.

   No web fonts and no third-party origins — the system UI stack renders
   instantly, which removes both the render-blocking request and any layout
   shift from a font swap.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg: #0d1017;
  --bg-elev: #151a23;
  --bg-elev-2: #1c222d;
  --border: #262d3a;
  --border-light: #333c4d;

  /* Type ramp. Every level clears WCAG AA (4.5:1) against --bg *and* against
     the slightly lighter tile backgrounds, measured rather than eyeballed:
       --text       #e6e9ef  ~16.3:1
       --text-dim   #98a2b3   ~7.4:1
       --text-faint #7b8698   ~5.2:1
     --text-faint was #626c7d, which looked right but measured 3.6:1 and failed
     on the Creator tile and the footer legal line. "Disabled" is communicated
     by the dashed border, the desaturation filter and the Coming soon badge —
     it should never be communicated by text nobody can read. */
  --text: #e6e9ef;
  --text-dim: #98a2b3;
  --text-faint: #7b8698;

  /* Brand + product accents */
  --cyan: #22d3ee;
  --cyan-soft: #67e8f9;
  --blurple: #5865f2;
  --blurple-lift: #7c8cff; /* the readable-on-dark blurple, for text */
  --violet: #8b5cf6;
  --violet-lift: #a78bfa;

  /* Per-tile accent, overridden by each .tile-* below. */
  --accent: var(--cyan);
  --accent-lift: var(--cyan-soft);

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, .5);

  --shell: 1120px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font: 'Segoe UI Variable Display', -apple-system, BlinkMacSystemFont,
          'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;

  color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Anchors land clear of the sticky header. */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* One consistent, high-contrast focus ring everywhere. :focus-visible keeps it
   off mouse users but guarantees it for keyboard users. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--cyan);
  color: #04222b;
  font-weight: 650;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ══ Backdrop ═══════════════════════════════════════════════════════════════
   Fixed behind everything: a masked grid for texture plus two slow colour
   washes for depth. Purely decorative, so it never intercepts pointer events
   and is switched off entirely under reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.backdrop-grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgba(88, 101, 242, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 101, 242, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  /* Fades the grid out before it reaches the fold, so it reads as texture
     rather than as graph paper. */
  -webkit-mask-image: radial-gradient(ellipse 900px 620px at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 900px 620px at 50% 0%, #000 35%, transparent 78%);
}

.backdrop-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  will-change: transform;
}
.backdrop-glow-a {
  top: -340px; left: 50%;
  width: 900px; height: 620px;
  margin-left: -450px;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, .20), transparent 68%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.backdrop-glow-b {
  top: -180px; left: 50%;
  width: 760px; height: 520px;
  margin-left: -120px;
  background: radial-gradient(ellipse at center, rgba(88, 101, 242, .22), transparent 70%);
  animation: drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(-40px, 0, 0) scale(1); }
  to   { transform: translate3d(50px, 30px, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(30px, 10px, 0) scale(1.05); }
  to   { transform: translate3d(-50px, -20px, 0) scale(.95); }
}

/* ══ Header ════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 16, 23, .72);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* Border only appears once you've scrolled, so the header sits flush with the
   hero at rest. Toggled from js/main.js. */
.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: rgba(13, 16, 23, .88);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--border), 0 0 18px rgba(34, 211, 238, .18);
}
.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-name-dim { color: var(--text-dim); font-weight: 500; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav-link {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.site-nav-link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

/* ══ Buttons ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--blurple), #6f5bf0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(88, 101, 242, .32);
}
.btn-primary:hover { box-shadow: 0 12px 30px rgba(88, 101, 242, .46); }

.btn-sm { font-size: 14px; padding: 8px 15px; }
.btn-lg { font-size: 16px; padding: 14px 28px; }

/* ══ Hero ══════════════════════════════════════════════════════════════════ */
.hero {
  text-align: center;
  /* Generous enough that the outer orbit ring, which reaches ~90px above the
     badge, clears the sticky header instead of tucking under it. */
  padding-top: clamp(64px, 10vw, 132px);
  padding-bottom: clamp(44px, 6vw, 68px);
}

/* The logo is the anchor of the composition, so it's sized to hold its own
   against a 56px headline rather than sitting on it like a favicon. The two
   rings are drawn on the wrapper (not the image) so they can extend past the
   badge without being clipped by its border-radius. */
.hero-logo {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.hero-logo img {
  position: relative;
  z-index: 1;
  width: clamp(92px, 11vw, 132px);
  height: auto;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px var(--border-light),
    0 0 90px rgba(34, 211, 238, .34),
    var(--shadow-lift);
}

/* Inner hairline ring, and an outer dashed ring that rotates very slowly —
   enough movement to feel alive, slow enough that you only notice it if you
   look. Both are decorative and vanish under reduced motion / forced colours. */
.hero-logo::before,
.hero-logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.hero-logo::before {
  width: clamp(160px, 19vw, 224px);
  aspect-ratio: 1;
  margin: calc(clamp(160px, 19vw, 224px) / -2) 0 0 calc(clamp(160px, 19vw, 224px) / -2);
  border: 1px solid rgba(34, 211, 238, .16);
  background: radial-gradient(circle, rgba(34, 211, 238, .09), transparent 68%);
}
.hero-logo::after {
  width: clamp(220px, 27vw, 312px);
  aspect-ratio: 1;
  margin: calc(clamp(220px, 27vw, 312px) / -2) 0 0 calc(clamp(220px, 27vw, 312px) / -2);
  border: 1px dashed rgba(124, 140, 255, .17);
  animation: orbit 64s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }

.hero-title {
  font-size: clamp(2rem, 1.15rem + 3.7vw, 3.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.028em;
  /* Wide enough to break into two full lines on desktop. At 20ch it fell to
     three narrow lines and left most of the row empty. */
  max-width: 26ch;
  margin: 0 auto 24px;
  text-wrap: balance;
}
.text-gradient {
  background: linear-gradient(105deg, var(--cyan-soft), var(--cyan) 38%, var(--blurple-lift) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-sub {
  /* Sized and widened to sit under an 837px headline without looking like a
     caption. Wide enough to hold the sentence on one line at desktop — at 54ch
     and 64ch it broke across "cloud-powered / Discord solutions", splitting the
     compound. `balance` rather than `pretty` so that when it does wrap on
     narrower screens the two lines come out even. */
  font-size: clamp(1rem, .95rem + .45vw, 1.28rem);
  color: var(--text-dim);
  max-width: 76ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ══ Product tiles ═════════════════════════════════════════════════════════ */
.products { padding-bottom: clamp(32px, 5vw, 56px); }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 232px;
  padding: 26px;
  background: linear-gradient(168deg, var(--bg-elev) 0%, #12161e 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s var(--ease), border-color .28s var(--ease),
              box-shadow .28s var(--ease);
}

/* Layer 1 — a soft accent wash in the top-left, always faintly present so each
   tile is colour-coded even at rest, and brightened on hover. */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(560px circle at 0% 0%,
              color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
  opacity: .55;
  transition: opacity .28s var(--ease);
}

/* Layer 2 — a cursor-tracking spotlight. --mx/--my are written by
   js/main.js on pointer move; with no JS they simply stay at the default
   centre-top and the tile still looks finished. */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.tile-community { --accent: var(--blurple); --accent-lift: var(--blurple-lift); }
.tile-store     { --accent: var(--violet); --accent-lift: var(--violet-lift); }
.tile-wireloop  { --accent: var(--cyan);   --accent-lift: var(--cyan-soft); }
.tile-creator   { --accent: #5b6577;       --accent-lift: #7b8697; }

a.tile:hover,
a.tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:
    var(--shadow-lift),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 12px 44px color-mix(in srgb, var(--accent) 22%, transparent);
}
a.tile:hover::before, a.tile:focus-visible::before { opacity: 1; }
a.tile:hover::after,  a.tile:focus-visible::after  { opacity: 1; }
a.tile:active { transform: translateY(-1px); }

.tile-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  margin-bottom: 20px;
  color: var(--accent-lift);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .28s var(--ease), background .28s var(--ease),
              box-shadow .28s var(--ease);
}
.tile-icon svg { width: 23px; height: 23px; }
a.tile:hover .tile-icon {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tile-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 8px;
}

.tile-desc {
  color: var(--text-dim);
  font-size: 14.8px;
  line-height: 1.62;
  max-width: 42ch;
  /* Pushes the CTA to the bottom so all four tiles align regardless of how
     long the description runs. */
  margin-bottom: 22px;
}

.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-lift);
}
.tile-arrow {
  width: 15px; height: 15px;
  transition: transform .28s var(--ease);
}
a.tile:hover .tile-arrow { transform: translateX(4px); }

.tile-cta-muted { color: var(--text-faint); font-weight: 550; }

/* Creator: unmistakably not available. Lower contrast, no lift, no pointer,
   and a desaturating filter so the accent colour drains out of it. */
.tile.is-disabled {
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--border);
  background: linear-gradient(168deg, #11141b 0%, #0f1219 100%);
  filter: saturate(.5);
}
.tile.is-disabled::before { opacity: .3; }
.tile.is-disabled .tile-title { color: var(--text-dim); }
.tile.is-disabled .tile-desc { color: var(--text-faint); }
.tile.is-disabled .tile-icon { color: var(--text-faint); }

.badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-soon {
  color: #ffd479;
  background: rgba(240, 178, 50, .13);
  border: 1px solid rgba(240, 178, 50, .3);
}

/* ══ Trust strip ═══════════════════════════════════════════════════════════ */
.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 26px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, .018);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.trust-mark {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, .6);
}

/* ══ Content sections ══════════════════════════════════════════════════════ */
.section { padding-top: clamp(56px, 8vw, 92px); }

.section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.022em;
  margin-bottom: 14px;
}

.section-lead {
  color: var(--text-dim);
  font-size: 16.5px;
  max-width: 62ch;
  margin-bottom: 38px;
  text-wrap: pretty;
}

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.col {
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.col:hover { border-color: var(--border-light); transform: translateY(-2px); }
.col-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.col p { color: var(--text-dim); font-size: 14.8px; line-height: 1.65; }

/* Inline links inside body copy stay obviously clickable. */
.col a, .faq-item a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(34, 211, 238, .4);
  transition: text-decoration-color .18s;
}
.col a:hover, .faq-item a:hover { text-decoration-color: var(--cyan); }

/* ══ FAQ ═══════════════════════════════════════════════════════════════════ */
.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background .18s, color .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(255, 255, 255, .03); }
.faq-item summary:focus-visible { outline-offset: -3px; }

/* Chevron drawn in CSS rather than shipping another icon. */
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease), border-color .22s;
}
.faq-item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--cyan);
}
.faq-item[open] summary { color: var(--text); }

.faq-item p {
  padding: 0 22px 20px;
  color: var(--text-dim);
  font-size: 14.8px;
  max-width: 76ch;
}

/* ══ Closing CTA ═══════════════════════════════════════════════════════════ */
.cta-panel {
  position: relative;
  text-align: center;
  padding: clamp(36px, 6vw, 56px) 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(680px circle at 50% 0%, rgba(88, 101, 242, .16), transparent 62%),
    linear-gradient(180deg, var(--bg-elev), #11151d);
  overflow: hidden;
}
/* A hairline of brand colour along the top edge. */
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blurple), transparent);
  opacity: .55;
}
.cta-title {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -.022em;
  margin-bottom: 10px;
}
.cta-sub {
  color: var(--text-dim);
  font-size: 15.5px;
  max-width: 48ch;
  margin: 0 auto 26px;
  text-wrap: pretty;
}

/* ══ 404 ═══════════════════════════════════════════════════════════════════ */
.error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ══ Footer ════════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: clamp(64px, 9vw, 104px);
  border-top: 1px solid var(--border);
  padding: 32px 0 40px;
  background: rgba(10, 12, 18, .6);
}
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 650;
}
.footer-brand .brand-mark { width: 30px; height: 30px; border-radius: 8px; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.footer-nav a {
  color: var(--text-dim);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.footer-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.footer-legal {
  flex-basis: 100%;
  color: var(--text-faint);
  font-size: 12.5px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ══ Reveal-on-scroll ══════════════════════════════════════════════════════
   .reveal only becomes "hidden" once JS has confirmed it will be able to
   reveal it again — the `js-reveal` class on <html> is set by main.js. Without
   JS (or if the script fails) nothing is ever hidden, so the page is fully
   readable either way. This is the safe direction for progressive enhancement.
   ═══════════════════════════════════════════════════════════════════════════ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Tiles and columns cascade rather than all arriving at once. */
.js-reveal .tiles > li:nth-child(2) { transition-delay: 70ms; }
.js-reveal .tiles > li:nth-child(3) { transition-delay: 140ms; }
.js-reveal .tiles > li:nth-child(4) { transition-delay: 210ms; }
.js-reveal .cols > .col:nth-child(2) { transition-delay: 80ms; }
.js-reveal .cols > .col:nth-child(3) { transition-delay: 160ms; }
/* Hero elements stagger on load for the same reason. */
.js-reveal .hero .reveal:nth-child(2) { transition-delay: 60ms; }
.js-reveal .hero .reveal:nth-child(3) { transition-delay: 120ms; }
.js-reveal .hero .reveal:nth-child(4) { transition-delay: 180ms; }

/* ══ Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 16px; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .shell { padding-inline: 18px; }
  .tiles { grid-template-columns: 1fr; gap: 14px; }
  .tile { min-height: 0; padding: 22px; }
  .brand-name-dim { display: none; }
  .site-nav-link { display: none; }   /* keep only the Discord CTA on phones */
  .site-header-inner { min-height: 62px; }
  /* Still has to clear the outer orbit ring, which bottoms out at 220px wide
     and so reaches ~64px above the badge even at the smallest sizes. */
  .hero { padding-top: 74px; }
  .site-footer-inner { justify-content: flex-start; }
}

@media (max-width: 460px) {
  .trust { grid-template-columns: 1fr; padding: 18px 20px; }
  .btn-lg { width: 100%; }
}

/* Coarse pointers can't hover, so drop the spotlight work entirely. */
@media (hover: none) {
  .tile::after { display: none; }
}

/* ══ Reduced motion ════════════════════════════════════════════════════════
   Honour the OS setting: no drifting glows, no reveal travel, no smooth
   scrolling. Everything still renders — it just arrives instantly.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .backdrop-glow { animation: none; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .btn:hover, a.tile:hover, .col:hover { transform: none; }
}

/* Windows high-contrast / forced-colours: restore real borders so the tiles
   don't collapse into an undifferentiated block. */
@media (forced-colors: active) {
  .tile, .col, .faq, .trust, .cta-panel { border: 1px solid CanvasText; }
  .tile::before, .tile::after, .backdrop { display: none; }
  .text-gradient { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* ══ Print ═════════════════════════════════════════════════════════════════ */
@media print {
  .backdrop, .site-header, .cta-panel { display: none; }
  body { background: #fff; color: #000; }
  .tile, .col { border: 1px solid #ccc; break-inside: avoid; }
  /* Print the destination of every link, since the colour cue is gone. */
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 11px; }
}