/* =============================================================================
   ROSEGARDENMC — styles.css
   Shared stylesheet used by every page on the site.

   TABLE OF CONTENTS
   1. Design tokens (CSS variables)
   2. Global reset & base styles
   3. Fixed background layers (image + particles + scrim)
   4. Event banner
   5. Site header & navigation
   6. Shared layout helpers
   7. Buttons
   8. Reveal animation (scroll fade-in)
   9. Keyframe animations
   10. Page-specific sections
       10a. Home — Hero
       10b. Home — Status dock
       10c. World — Feature grid
       10d. Infrastructure — Trust panel & metrics
       10e. Network — Control center & server cards
       10f. Rules
       10g. Staff
       10h. Changelog
       10i. FAQ
       10j. Join — Steps
       10k. Media — Gallery
       10l. Final CTA
   11. Footer
   12. Responsive breakpoints
   13. Reduced-motion override
============================================================================= */


/* =============================================================================
   CUSTOM FONTS — Rostex
   Self-hosted font used exclusively for the word "Vulantri" wherever it appears.
   Font files live in the /fonts/ folder alongside this stylesheet.

   Licence: 1001Fonts Free For Personal Use (FFP) — recreational/non-commercial use only.

   .rostex utility class applies the font — add it to any element wrapping "Vulantri".
   Two variants registered:
     - Rostex-Regular  (font-style: normal)
     - Rostex-Oblique  (font-style: oblique) — slightly slanted, good for emphasis
============================================================================= */
@font-face {
  font-family: "Rostex";
  src: url("fonts/Rostex-Regular.otf") format("opentype"),
       url("fonts/Rostex-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Shows fallback font immediately, swaps in Rostex once loaded */
}

@font-face {
  font-family: "Rostex";
  src: url("fonts/Rostex-Oblique.otf") format("opentype"),
       url("fonts/Rostex-Oblique.ttf") format("truetype");
  font-weight: normal;
  font-style: oblique;
  font-display: swap;
}

/* Apply this class to any <span> or element wrapping the word "Vulantri" */
.rostex {
  font-family: "Rostex", Cinzel, serif;
  font-style: normal;
  letter-spacing: 0.04em;
}


/* =============================================================================
   1. DESIGN TOKENS
   These CSS variables are your design system. Change a value here and it
   updates everywhere on the site. Safe to adjust colours, but keep the
   variable names the same so nothing breaks.
============================================================================= */
:root {
  /* Backgrounds — darkest to lightest */
  --obsidian: #07070a;   /* Page base background */
  --night:    #0d0b14;   /* Slightly lighter panel bg */
  --panel:    #14111f;   /* Card/panel background */

  /* Brand purples */
  --violet:   #7c3aed;   /* Deep violet — used for glows and gradients */
  --amethyst: #a855f7;   /* Mid purple */
  --lilac:    #c084fc;   /* Light purple — used for labels, accents */

  /* Accent colours */
  --rose:     #fb7185;   /* Pink-red — used for highlights and warnings */
  --gold:     #f6d48f;   /* Warm gold — eyebrow labels, dates, owner badge */

  /* Text */
  --text:     #f7f1ff;   /* Primary text — slightly warm white */
  --muted:    #b9accd;   /* Secondary / dimmed text */

  /* Utility */
  --line:     rgba(192, 132, 252, 0.22);          /* Border colour (purple tint) */
  --glass:    rgba(13, 11, 20, 0.62);             /* Glassmorphism panel fill */
  --shadow:   0 24px 80px rgba(0, 0, 0, 0.46);   /* Consistent drop shadow */
}


/* =============================================================================
   2. GLOBAL RESET & BASE STYLES
   Minimal reset so browser defaults don't interfere. Safe to add to but
   avoid removing rules — things like box-sizing and overflow-x: hidden
   are load-bearing.
============================================================================= */
* {
  box-sizing: border-box; /* Padding/border included in element width — much easier to work with */
}

html {
  scroll-behavior: smooth; /* Smooth scrolling when clicking anchor links like #section */
}

body {
  margin: 0;
  background: var(--obsidian); /* Fallback bg if the image doesn't load */
  color: var(--text);
  font-family: Inter, system-ui, sans-serif; /* Inter loads from Google Fonts in the <head> */
  overflow-x: hidden; /* Prevents horizontal scrollbar from animations/wide elements */
}

/* Subtle grid overlay on the whole page — gives a tech/map feel.
   Uses mask-image to fade it in/out so it's not visible at page edges. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 72%, transparent);
}

a {
  color: inherit;        /* Links inherit text colour instead of going blue */
  text-decoration: none; /* Remove underlines by default */
}

img {
  display: block;      /* Removes inline gap under images */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Image fills container without stretching */
}

/* Base heading styles. Cinzel is the serif display font loaded from Google Fonts. */
h1, h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  line-height: 0.98;
}

h1, h2, h3, p {
  margin-top: 0; /* Remove default top margin so spacing is controlled manually */
}

h1 {
  margin-bottom: 22px;
  /* clamp(min, preferred, max) — font scales with viewport width between min and max */
  font-size: clamp(4.5rem, 9vw, 9rem);
  text-shadow: 0 0 48px rgba(168, 85, 247, 0.36);
}

h2 {
  max-width: 880px;
  margin-bottom: 0;
  font-size: clamp(2.35rem, 5vw, 5.15rem);
}

h3 {
  font-size: 1.12rem;
  line-height: 1.2;
}


/* =============================================================================
   3. FIXED BACKGROUND LAYERS
   The background is made of three layers stacked on top of each other,
   all position: fixed so they stay put while the page scrolls over them.

   Layer order (back to front):
     [A] .hero-image   — the actual photograph + slow drift animation
     [B] .hero-vignette — colour overlay to darken edges and add violet tint
     [C] .page-scrim   — ambient radial glow blobs (purple + rose)
     [D] canvas#atmosphere — floating particle effect (drawn by script.js)

   To change the background photo: find the url(...) inside .hero-image
   and replace it with your own image URL or local file path.
============================================================================= */

/* [A] Background photograph */
.hero-image {
  position: absolute;
  inset: 0;
  /* Two gradient overlays are stacked ON TOP of the image url() here.
     They darken the sides so text stays readable. Adjust the opacity
     values (0.88, 0.38, 0.82) to make the image more or less visible. */
  background:
    linear-gradient(90deg, rgba(7, 7, 10, 0.88) 0%, rgba(7, 7, 10, 0.38) 45%, rgba(7, 7, 10, 0.82) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2200&q=88") center / cover;
    /* ↑ BACKGROUND IMAGE — replace this URL with your own image.
       For a local file use: url("images/your-background.jpg")
       Recommended: a wide dark landscape, 2000px+ wide, dark tones */
  transform: scale(1.05); /* Slightly oversized so the drift animation doesn't show edges */
  animation: slowDrift 24s ease-in-out infinite alternate; /* Slow pan — defined in section 9 */
}

/* [B] Colour vignette — darkens edges and adds purple/rose colour cast */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(124, 58, 237, 0.26) 0%, transparent 24%, transparent 72%, rgba(251, 113, 133, 0.12) 100%),
    radial-gradient(circle at 50% 42%, transparent 0 24%, rgba(7, 7, 10, 0.38) 52%, rgba(7, 7, 10, 0.82) 100%),
    linear-gradient(180deg, transparent 0%, rgba(7, 7, 10, 0.55) 100%);
  /* Increase the rgba alpha values to darken, decrease to show more of the photo */
}

/* Container for [A] and [B] — fixed to cover the whole viewport */
.hero-media {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none; /* Clicks pass through to page content */
}

/* [C] Ambient glow blobs that sit above the photo — adds depth without
   competing with the image. These are just radial gradients, not images. */
.page-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.18), transparent 34rem),
    radial-gradient(circle at 84% 20%, rgba(251, 113, 133, 0.09), transparent 30rem);
}

/* [D] Canvas element — the floating particles are drawn here by script.js.
   Sits above the photo layers but below all page content. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.75; /* Reduce to make particles less visible, 0 to hide entirely */
}


/* =============================================================================
   4. EVENT BANNER
   A thin strip at the top of the page for seasonal events/announcements.

   TO ENABLE:  Add class "has-banner" to <body>
   TO DISABLE: Remove class "has-banner" from <body>
   The banner is also dismissible by the visitor via the × button.

   Edit the banner text and link inside the <aside class="event-banner">
   element in each HTML file's <body>.
============================================================================= */
.event-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30; /* Above everything — header is z-index 20 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 56px 11px 20px; /* Extra right padding leaves room for the × button */
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.88), rgba(251, 113, 133, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  transition: transform 320ms ease, opacity 320ms ease;
}

/* The "View Event →" link inside the banner */
.event-banner a.event-link {
  color: var(--gold);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The × dismiss button in the top-right corner of the banner */
.event-banner-dismiss {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background 180ms ease;
}

.event-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* When banner is active, push the header down so they don't overlap */
body.has-banner .site-header {
  top: calc(18px + 44px); /* 18px = normal header offset + 44px = banner height */
}

/* Also push hero content down on the home page */
body.has-banner .hero {
  padding-top: 224px;
}

/* When visitor clicks ×, script.js adds "banner-dismissed" to <body>.
   This slides the banner out and resets the header position. */
body.banner-dismissed .event-banner {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

body.banner-dismissed .site-header {
  top: 18px !important;
}


/* =============================================================================
   5. SITE HEADER & NAVIGATION
   The floating pill-shaped nav bar at the top. Fixed position so it stays
   visible while scrolling. Uses CSS Grid to place logo | nav | action button.
============================================================================= */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 20;
  /* Grid with 3 columns: logo takes left, nav is centred, button takes right */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1180px, calc(100% - 32px)); /* Max 1180px wide, shrinks on small screens */
  min-height: 64px;
  padding: 0 16px 0 18px;
  transform: translateX(-50%); /* Combined with left: 50% this centres the element */
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 7, 10, 0.62);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px); /* Frosted glass effect — blurs whatever is behind the header */
}

/* Logo — uses flexbox to align the brand-mark icon and text side by side */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Cinzel, serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The small circular logo mark next to the brand name.
   It's a pure CSS shape — no image file needed.
   Edit the colours via conic-gradient to match your branding. */
.brand-mark {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(246, 212, 143, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, var(--rose) 0 22%, transparent 24%),
    conic-gradient(from 45deg, var(--violet), var(--rose), var(--gold), var(--violet));
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.55);
}

/* Navigation links — horizontally centred in the header */
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(247, 241, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Smooth hover transition on nav links and the header action button */
.main-nav a,
.header-action {
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.main-nav a:hover {
  color: white;
}

/* The "Begin" / CTA button on the right side of the header */
.header-action {
  justify-self: end; /* Pushes to the right column of the grid */
  padding: 10px 15px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(192, 132, 252, 0.08);
}

/* Highlight the nav link for the current page.
   Add class "active" to the correct <a> in each page's HTML. */
.main-nav a.active {
  color: var(--lilac);
}


/* =============================================================================
   6. SHARED LAYOUT HELPERS
   Reusable utility classes applied to many sections.
============================================================================= */

/* Centres content and caps the max width — applied to every section */
.section-shell {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* The eyebrow label above headings (e.g. "AN IMMERSIVE WORLD") */
.eyebrow {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Section heading block — eyebrow + h2 together */
.section-heading {
  display: grid;
  gap: 12px;
  margin-bottom: 48px;
}

/* Variant: centres the heading (used on network status and FAQ) */
.section-heading.centered {
  justify-items: center;
  text-align: center;
}

/* Standard vertical padding for all content sections */
.world,
.infrastructure,
.network,
.rules,
.staff,
.changelog,
.faq,
.join,
.media {
  padding: 130px 0;
}


/* =============================================================================
   7. BUTTONS
   Three variants: primary (bright gradient), secondary (tinted), ghost (subtle).
   All share base .button styles. Hover lifts them slightly with translateY.
============================================================================= */
.button {
  min-height: 52px;
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  font-size: 0.92rem;
  font-weight: 800;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px); /* Subtle lift on hover */
}

/* Primary — bright lilac-to-rose gradient, dark text for contrast */
.button-primary {
  color: #120816;
  background: linear-gradient(135deg, #f4d9ff, var(--lilac) 42%, #fb7185);
  box-shadow: 0 18px 46px rgba(168, 85, 247, 0.34);
}

/* Secondary — semi-transparent violet */
.button-secondary {
  background: rgba(124, 58, 237, 0.24);
  border-color: rgba(192, 132, 252, 0.34);
}

/* Ghost — nearly invisible, light text */
.button-ghost {
  color: rgba(247, 241, 255, 0.76);
  background: rgba(255, 255, 255, 0.04);
}

/* Group of buttons side by side — wraps on narrow screens */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}


/* =============================================================================
   8. REVEAL ANIMATION
   Elements with [data-reveal] start invisible and slightly below their final
   position. When they scroll into view, script.js adds .is-visible and the
   CSS transition kicks in.

   To disable reveals on a specific element: remove the data-reveal attribute.
   To adjust timing: change the transition duration (currently 800ms).
============================================================================= */
[data-reveal] {
  transform: translateY(22px);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 800ms ease;
}

[data-reveal].is-visible {
  transform: translateY(0);
  opacity: 1;
}


/* =============================================================================
   9. KEYFRAME ANIMATIONS
   Referenced by name in other rules with animation: name duration ... .
============================================================================= */

/* Slow pan used on the background image — alternates between two positions */
@keyframes slowDrift {
  from { transform: scale(1.05) translate3d(-1%, -1%, 0); }
  to   { transform: scale(1.1)  translate3d(1%, 1%, 0); }
}

/* Soft pulse for status indicator dots (online/offline signals) */
@keyframes pulse {
  50% {
    transform: scale(1.45);
    opacity: 0.58;
  }
}

/* Continuous rotation — used for the orbit rings in the network section */
@keyframes rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* =============================================================================
   10a. HOME — HERO SECTION
   The full-viewport landing section. Only appears on index.html.
   .hero-media contains the background layers (see section 3).
============================================================================= */
.hero {
  display: grid;
  min-height: 100vh;
  padding: 180px 0 72px;
  align-items: end; /* Content sits at the bottom of the viewport */
}

/* The text block (tagline, h1, copy, buttons) */
.hero-content {
  max-width: 780px;
  padding-bottom: 112px; /* Space above the status dock */
}

.hero-copy {
  max-width: 570px;
  margin-bottom: 34px;
  color: rgba(247, 241, 255, 0.78);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
}


/* =============================================================================
   10b. HOME — STATUS DOCK
   The four-tile panel showing live server stats.
   Positioned at the bottom-right of the hero section.
   Data is static placeholder — connect to an API if you want live data.
============================================================================= */
.status-dock {
  position: absolute;
  right: 0;
  bottom: 72px;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  width: min(720px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(13, 11, 20, 0.82), rgba(20, 17, 31, 0.56));
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.status-tile {
  min-height: 104px;
  padding: 22px;
  border-right: 1px solid rgba(192, 132, 252, 0.16);
}

.status-tile:last-child {
  border-right: 0;
}

/* Shared label style for status tiles, definition terms, and feature tags */
.status-tile span,
dt,
.feature-overlay span {
  color: rgba(185, 172, 205, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-tile strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 1.38rem;
}

/* Green dot — used for "Online" status.
   .pulse-dot animates; .signal is static (used in server cards) */
.pulse-dot,
.signal {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7cffc2;
  box-shadow: 0 0 18px #7cffc2;
}

.pulse-dot {
  animation: pulse 1.8s ease-in-out infinite;
}

/* Shown when the server is offline — rose red, no animation */
.offline-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 18px rgba(251, 113, 133, 0.8);
}


/* =============================================================================
   10c. WORLD — FEATURE GRID
   A CSS Grid layout of image cards. Uses named span sizes:
   .feature-large = big card (spans 4 of 6 columns, 2 rows)
   .feature-wide  = wide card (spans 4 of 6 columns)
   Default cards   = 2 columns each
============================================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.feature-card {
  position: relative;
  min-height: 360px;
  overflow: hidden; /* Keeps image inside the rounded corners */
  grid-column: span 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.feature-large {
  min-height: 560px;
  grid-column: span 4;
  grid-row: span 2;
}

.feature-wide {
  grid-column: span 4;
}

/* Gradient overlay on each card — darkens the bottom so text is legible */
.feature-card::after,
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 40%, rgba(7, 7, 10, 0.86) 100%),
    radial-gradient(circle at 50% 10%, rgba(168, 85, 247, 0.22), transparent 42%);
  pointer-events: none;
}

/* Image zoom-in on hover — slow and subtle per the animation guidelines */
.feature-card img,
.gallery-item img {
  transition: transform 900ms ease, filter 900ms ease;
}

.feature-card:hover img,
.gallery-item:hover img {
  transform: scale(1.055);
  filter: saturate(1.1) contrast(1.05);
}

/* Text overlay at the bottom of each feature card */
.feature-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 28px;
}

.feature-large .feature-overlay {
  padding: 42px; /* More padding for the bigger card */
}

.feature-overlay h3 {
  max-width: 500px;
  margin: 10px 0 8px;
  font-family: Cinzel, serif;
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  font-weight: 600;
}

.feature-overlay p {
  max-width: 520px;
  margin-bottom: 0;
  color: rgba(247, 241, 255, 0.72);
  line-height: 1.7;
}


/* =============================================================================
   10d. INFRASTRUCTURE — TRUST PANEL & METRICS
   Two-column panel with a heading on the left and body text on the right,
   followed by three numbered metric cards.
============================================================================= */
.trust-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 56px;
  align-items: end;
  padding: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 12%, rgba(124, 58, 237, 0.28), transparent 32rem),
    linear-gradient(135deg, rgba(20, 17, 31, 0.92), rgba(7, 7, 10, 0.82));
  box-shadow: var(--shadow);
}

.trust-panel p:last-child {
  margin-bottom: 0;
  color: rgba(247, 241, 255, 0.7);
  font-size: 1.04rem;
  line-height: 1.8;
}

/* Three numbered cards below the trust panel */
.trust-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.trust-metrics article {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.trust-metrics span {
  color: var(--lilac);
  font-family: Cinzel, serif;
}

.trust-metrics p {
  margin-bottom: 0;
  color: rgba(247, 241, 255, 0.65);
  line-height: 1.65;
}


/* =============================================================================
   10e. NETWORK — CONTROL CENTER & SERVER CARDS
   Split layout: orbit animation on the left, server stat cards on the right.
   The orbit is purely decorative CSS animation — no image needed.
============================================================================= */
.control-center {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 30px;
  min-height: 560px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(192, 132, 252, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 132, 252, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 36% 42%, rgba(124, 58, 237, 0.28), transparent 26rem),
    rgba(8, 7, 12, 0.84);
  background-size: 46px 46px, 46px 46px, auto, auto;
  box-shadow: var(--shadow);
}

/* Decorative animated orbit — concentric ellipses that rotate independently */
.core-orbit {
  position: relative;
  min-height: 500px;
  border: 1px solid rgba(192, 132, 252, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 113, 133, 0.18), transparent 7rem),
    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.28), transparent 16rem);
}

/* The ::before, ::after, and span children are the orbit rings.
   They're positioned at the centre using inset: 50% + translate(-50%, -50%) */
.core-orbit::before,
.core-orbit::after,
.core-orbit span {
  content: "";
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(192, 132, 252, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Inner glow core */
.core-orbit::before {
  width: 118px;
  height: 118px;
  background: radial-gradient(circle, rgba(246, 212, 143, 0.36), rgba(168, 85, 247, 0.16) 48%, transparent 70%);
  box-shadow: 0 0 80px rgba(168, 85, 247, 0.45);
}

/* Rotating rings — each at a different size, speed, and direction */
.core-orbit::after          { width: 280px; height: 280px; animation: rotate 15s linear infinite; }
.core-orbit span:nth-child(1) { width: 390px; height: 210px; animation: rotate 22s linear infinite reverse; }
.core-orbit span:nth-child(2) { width: 220px; height: 390px; animation: rotate 28s linear infinite; }
.core-orbit span:nth-child(3) { width: 460px; height: 460px; opacity: 0.42; }

/* Stack of server stat cards */
.server-stack {
  display: grid;
  gap: 16px;
  align-content: center;
}

.server-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.82), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(14px);
}

.server-card > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.server-card h3 {
  margin: 0;
  font-family: Cinzel, serif;
}

/* Signal dot colours — green = online, gold = idle/maintenance */
.signal.online { background: #7cffc2; box-shadow: 0 0 18px #7cffc2; }
.signal.idle   { background: var(--gold); box-shadow: 0 0 18px rgba(246, 212, 143, 0.9); }

/* Definition list grid for server stats (Players / TPS / Uptime) */
dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}

dt, dd { margin: 0; }

dd {
  margin-top: 8px;
  color: white;
  font-weight: 800;
}


/* =============================================================================
   10f. RULES
   A grid of rule cards. .rule-highlight marks the most important rule
   (zero-tolerance) with a rose-tinted border and background.
============================================================================= */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rule-card {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.78), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px);
}

.rule-card-icon {
  font-size: 1.6rem;
  margin-bottom: 14px;
  line-height: 1;
}

.rule-card h3 {
  margin-bottom: 10px;
  font-family: Cinzel, serif;
  font-size: 1rem;
}

.rule-card p {
  margin: 0;
  color: rgba(247, 241, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.72;
}

/* Rose-tinted variant for the zero-tolerance / most important rule */
.rule-card.rule-highlight {
  border-color: rgba(251, 113, 133, 0.28);
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.1), rgba(20, 17, 31, 0.78));
}

/* Wide card — spans 2 of 3 columns. Pairs with a standard card to fill the row. */
.rule-card.rule-card-full {
  grid-column: span 2;
}

/* List styling inside rule cards — tighter spacing than browser default */
.rule-card ul {
  margin: 0 0 8px;
  padding-left: 18px;
  color: rgba(247, 241, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.72;
}

.rule-card ul li + li {
  margin-top: 6px; /* Small gap between list items — remove if you want them tighter */
}

/* Command tags (.join-tag) inside rule cards get a small top margin */
.rule-card .join-tag {
  margin-top: 12px;
  margin-right: 6px;
}

/* Agreement notice — sits below the rules grid as a closing statement */
.rule-notice {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
  padding: 28px 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.72), rgba(7, 7, 10, 0.5));
  backdrop-filter: blur(12px);
}

.rule-notice-icon {
  font-size: 1.8rem;
  flex-shrink: 0; /* Prevents the emoji from shrinking if the text is long */
  padding-top: 2px;
}

.rule-notice strong {
  display: block;
  margin-bottom: 8px;
  font-family: Cinzel, serif;
  font-size: 1rem;
}

.rule-notice p {
  margin: 0;
  color: rgba(247, 241, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.75;
}


/* =============================================================================
   10g. STAFF
   Four-column grid of staff profile cards.
   Avatars load from mc-heads.net using the player's Minecraft username.
   To update: change the username in the img src URL.
   Role badge colours are set by the .role-* classes below.
============================================================================= */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.staff-card {
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(20, 17, 31, 0.86), rgba(7, 7, 10, 0.6));
  backdrop-filter: blur(14px);
  text-align: center;
  transition: border-color 260ms ease, transform 260ms ease;
}

.staff-card:hover {
  border-color: rgba(192, 132, 252, 0.32);
  transform: translateY(-3px);
}

/* Minecraft head avatar — square with rounded corners.
   image-rendering: pixelated keeps the blocky look at small sizes. */
.staff-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 12px;
  border: 2px solid rgba(192, 132, 252, 0.28);
  overflow: hidden;
  background: rgba(124, 58, 237, 0.2); /* Fallback if avatar fails to load */
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated; /* Keeps pixel art crisp — don't remove */
}

.staff-card h3 {
  margin-bottom: 4px;
  font-family: Cinzel, serif;
  font-size: 1rem;
}

/* Role badge — a small pill below the staff name.
   Colour is set by the .role-* class on the same element. */
.staff-role {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Role colour variants — add more if you have more roles */
.role-owner   { background: rgba(246,212,143,0.18); color: var(--gold);  border: 1px solid rgba(246,212,143,0.28); }
.role-admin   { background: rgba(251,113,133,0.16); color: var(--rose);  border: 1px solid rgba(251,113,133,0.26); }
.role-mod     { background: rgba(124,58,237,0.2);   color: var(--lilac); border: 1px solid rgba(192,132,252,0.28); }
.role-builder { background: rgba(125,211,252,0.14); color: #7dd3fc;      border: 1px solid rgba(125,211,252,0.24); }

.staff-bio {
  margin-bottom: 14px;
  color: rgba(247, 241, 255, 0.6);
  font-size: 0.84rem;
  line-height: 1.65;
}

.staff-discord {
  color: rgba(185, 172, 205, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}


/* =============================================================================
   10h. CHANGELOG
   Timeline-style list of updates. Each entry has a date column on the left
   and the update details on the right.
   Tag colours: green = Added, amber = Fixed, blue = Changed, rose = Removed
============================================================================= */
.changelog-list {
  display: grid;
  gap: 14px;
}

.changelog-entry {
  display: grid;
  grid-template-columns: 160px 1fr; /* Fixed date column + flexible content */
  gap: 28px;
  align-items: start;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.78), rgba(7, 7, 10, 0.5));
  backdrop-filter: blur(12px);
}

.changelog-meta { padding-top: 3px; }

.changelog-date {
  font-family: Cinzel, serif;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Version number pill (e.g. v2.4.1) */
.changelog-version {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(192, 132, 252, 0.26);
  color: var(--lilac);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: monospace;
}

.changelog-body h3 {
  margin-bottom: 10px;
  font-family: Cinzel, serif;
  font-size: 1rem;
}

.changelog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

/* Base tag style — colour set by .tag-* variant */
.changelog-tag {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tag-add          { background: rgba(134,239,172,0.14); color: #86efac; border: 1px solid rgba(134,239,172,0.22); }
.tag-fix          { background: rgba(253,186,116,0.14); color: #fdb974; border: 1px solid rgba(253,186,116,0.22); }
.tag-change       { background: rgba(125,211,252,0.14); color: #7dd3fc; border: 1px solid rgba(125,211,252,0.22); }
.tag-remove       { background: rgba(251,113,133,0.14); color: var(--rose); border: 1px solid rgba(251,113,133,0.22); }
.tag-dev          { background: rgba(148,163,184,0.14); color: #94a3b8; border: 1px solid rgba(148,163,184,0.22); }
.tag-performance  { background: rgba(163,230,53,0.14);  color: #a3e635; border: 1px solid rgba(163,230,53,0.22);  }
.tag-security     { background: rgba(220,38,38,0.14);   color: #ef4444; border: 1px solid rgba(220,38,38,0.22);   }
.tag-balance      { background: rgba(250,204,21,0.14);  color: #facc15; border: 1px solid rgba(250,204,21,0.22);  }
.tag-event        { background: rgba(244,114,182,0.14); color: #f472b6; border: 1px solid rgba(244,114,182,0.22); }
.tag-preview      { background: rgba(167,139,250,0.14); color: #a78bfa; border: 1px solid rgba(167,139,250,0.22); }
.tag-announcement { background: rgba(255,255,255,0.08); color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
.tag-infra        { background: rgba(71,130,180,0.14);  color: #6b9fc4; border: 1px solid rgba(71,130,180,0.22);  }
.tag-plugin       { background: rgba(20,184,166,0.14);  color: #14b8a6; border: 1px solid rgba(20,184,166,0.22);  }
.tag-experimental { background: rgba(249,115,22,0.14);  color: #f97316; border: 1px solid rgba(249,115,22,0.22);  }

.changelog-body p {
  margin: 0;
  color: rgba(247, 241, 255, 0.64);
  font-size: 0.92rem;
  line-height: 1.72;
}


/* =============================================================================
   10i. FAQ — ACCORDION
   Each .faq-item contains a <button> (question) and a collapsible answer.
   The open/close animation uses CSS grid-template-rows: 0fr → 1fr trick,
   which doesn't require JavaScript to calculate heights.
   JS in script.js toggles the .is-open class.
============================================================================= */
.faq-list {
  max-width: 860px;
  margin-inline: auto; /* Centres the list within the section */
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.82), rgba(7, 7, 10, 0.52));
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 220ms ease;
}

/* Highlight border when open */
.faq-item.is-open {
  border-color: rgba(192, 132, 252, 0.28);
}

/* The clickable question button — full width, flex layout */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

.faq-question:hover { color: var(--lilac); }

/* The ▾ chevron icon — rotates 180° when open */
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lilac);
  font-size: 0.7rem;
  transition: transform 260ms ease, background 180ms ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  background: rgba(124, 58, 237, 0.22);
}

/* The collapsible answer panel.
   grid-template-rows: 0fr collapses to zero height without needing JS height calc. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr; /* Collapsed by default */
  transition: grid-template-rows 300ms ease;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr; /* Expanded when .is-open is added by JS */
}

/* overflow: hidden on the inner element is required for the 0fr trick to work */
.faq-answer-inner { overflow: hidden; }

.faq-answer p {
  margin: 0;
  padding: 0 24px 22px;
  color: rgba(247, 241, 255, 0.65);
  font-size: 0.94rem;
  line-height: 1.78;
}


/* =============================================================================
   10j. JOIN — HOW TO JOIN STEPS
   Four numbered steps in a row with connecting lines between them.
   The connector line is created with ::after pseudo-element — it disappears
   on mobile where steps stack vertically.
============================================================================= */
.join-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.join-step {
  position: relative; /* Needed for the ::after connector line positioning */
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 17, 31, 0.82), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(14px);
}

/* Circular step number badge (I, II, III, IV) */
.join-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid rgba(192, 132, 252, 0.36);
  border-radius: 50%;
  color: var(--lilac);
  font-family: Cinzel, serif;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(124, 58, 237, 0.14);
}

.join-step h3 {
  margin-bottom: 10px;
  font-family: Cinzel, serif;
}

.join-step p {
  margin-bottom: 0;
  color: rgba(247, 241, 255, 0.65);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Code/address tag at the bottom of each step */
.join-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid rgba(192, 132, 252, 0.28);
  color: var(--lilac);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: monospace; /* Monospace font for addresses and commands */
}

/* Horizontal connector line between steps — positioned to align with the number badges */
.join-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 53px;   /* Vertically centred on the step number badge */
  right: -9px; /* Sits in the gap between cards */
  width: 16px;
  height: 1px;
  background: rgba(192, 132, 252, 0.36);
  z-index: 1;
}


/* =============================================================================
   10k. MEDIA — GALLERY
   CSS Grid photo gallery. Item sizes are controlled by .tall and .wide classes.
   .tall  = spans 2 rows  (portrait format)
   .wide  = spans 2 columns (landscape format)
============================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px; /* Default row height — increase for taller images */
  gap: 18px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.gallery-item.tall { grid-row: span 2; }    /* Makes item twice as tall */
.gallery-item.wide { grid-column: span 2; } /* Makes item twice as wide */


/* =============================================================================
   10l. FINAL CTA
   Full-width call-to-action section at the bottom of index.html.
   Uses a second background image (a forest) with heavy darkening overlays.
============================================================================= */
.final-cta {
  min-height: 680px;
  display: grid;
  align-items: center;
}

/* Background image for the CTA section — separate from the hero background.
   To change: replace the url() with another image. */
.cta-backdrop {
  position: absolute;
  inset: 70px calc(50% - 50vw) 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 7, 10, 0.96), rgba(7, 7, 10, 0.54), rgba(7, 7, 10, 0.96)),
    linear-gradient(180deg, rgba(7, 7, 10, 0.1), rgba(7, 7, 10, 1)),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2200&q=88") center / cover;
}

.cta-content {
  max-width: 760px;
}

.cta-content p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(247, 241, 255, 0.72);
  font-size: 1.08rem;
  line-height: 1.8;
}


/* =============================================================================
   HOSTING PANEL
   Appears on index.html between the hero and the final CTA.
   Designed to read as a trust/infrastructure signal for visitors,
   and to give Vulantri visibility as the hosting provider.

   .hosting-panel      — outer wrapper, full-bleed dark card
   .hosting-intro      — left column: Vulantri name + intro copy
   .hosting-specs      — right column: spec grid
   .spec-item          — individual spec tile (icon + label + value)
   .hosting-badge      — "Powered by Vulantri" pill at the bottom
============================================================================= */
.hosting {
  padding: 100px 0;
}

.hosting-panel {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13, 11, 20, 0.92), rgba(20, 17, 31, 0.82));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

/* Left column — Vulantri intro */
.hosting-intro {
  padding: 52px 48px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background:
    radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.18), transparent 22rem);
}

.hosting-intro-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hosting-intro h3 {
  font-family: Cinzel, serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

/* "Vulantri" inside the heading gets Rostex font + gold colour */
.hosting-intro h3 .rostex {
  color: var(--gold);
  font-size: 1.1em;
}

.hosting-intro p {
  margin: 0;
  color: rgba(247, 241, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.78;
}

/* Pill badge at the bottom of the left column */
.hosting-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(246, 212, 143, 0.28);
  border-radius: 40px;
  background: rgba(246, 212, 143, 0.08);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
}

/* The small dot before "Powered by" */
.hosting-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  flex-shrink: 0;
}

/* Right column — spec grid */
.hosting-specs {
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px; /* Gap shows as a line between tiles via the panel background colour */
  background: var(--line); /* The gap colour — lines between tiles */
  align-content: start;
}

/* Individual spec tile */
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: linear-gradient(135deg, rgba(13, 11, 20, 0.94), rgba(20, 17, 31, 0.78));
}

.spec-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.spec-label {
  color: rgba(185, 172, 205, 0.65);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spec-value {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Muted secondary detail under the main spec value */
.spec-detail {
  color: rgba(185, 172, 205, 0.55);
  font-size: 0.78rem;
  font-weight: 400;
  margin-top: 2px;
}

/* Responsive — stack columns on tablet */
@media (max-width: 980px) {
  .hosting-panel {
    grid-template-columns: 1fr;
  }

  .hosting-intro {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .hosting-specs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .hosting-intro,
  .hosting-specs {
    padding: 32px 24px;
  }

  .hosting-specs {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   11. FOOTER
   Simple two-column footer: brand name on left, server address on right.
   The border-top uses the same --line colour as other dividers.
============================================================================= */
/* Simple footer — brand name left, server address centre, host credit right.
   .rostex class on the Vulantri span triggers the custom font. */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(247, 241, 255, 0.52);
  font-size: 0.84rem;
}

/* "Hosted by Vulantri" credit — sits on the right */
.footer-host {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The Vulantri name itself — Rostex font, slightly brighter than the surrounding text */
.footer-host .rostex {
  color: rgba(247, 241, 255, 0.78);
  font-size: 1rem;
}


/* =============================================================================
   12. RESPONSIVE BREAKPOINTS
   Mobile-first adjustments. The site uses two breakpoints:
   980px — tablet/small laptop: hide nav, stack some grids
   640px — mobile: single column, full-width buttons, smaller type
============================================================================= */
@media (max-width: 980px) {
  /* Hide the nav links — consider adding a hamburger menu if needed */
  .main-nav { display: none; }

  /* Header becomes two columns (logo + button) instead of three */
  .site-header { grid-template-columns: 1fr auto; }

  .hero { padding-top: 150px; }
  .hero-content { padding-bottom: 280px; }

  /* Stack single-column panels */
  .status-dock,
  .trust-panel,
  .control-center { grid-template-columns: 1fr; }

  .status-dock { left: 0; }

  /* All feature cards go full width */
  .feature-card,
  .feature-large,
  .feature-wide { grid-column: 1 / -1; }

  /* Two-column grids */
  .trust-metrics,
  .gallery,
  .join-steps,
  .rules-grid,
  .staff-grid { grid-template-columns: 1fr 1fr; }

  /* Changelog date column disappears — stacks above content */
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Hide step connectors when steps are in two columns */
  .join-step:not(:last-child)::after { display: none; }

  .core-orbit { min-height: 360px; }
}

@media (max-width: 640px) {
  .section-shell { width: min(100% - 28px, 1180px); }

  .site-header {
    top: 10px;
    width: calc(100% - 20px);
  }

  .brand { font-size: 0.82rem; }
  .header-action { padding: 9px 12px; }

  .hero { min-height: 980px; }
  .hero-content { padding-bottom: 420px; }

  /* Fluid type scales down further on small screens */
  h1 { font-size: clamp(3.2rem, 16vw, 4.7rem); }
  h2 { font-size: clamp(2rem, 11vw, 3.3rem); }

  /* Full-width buttons on mobile */
  .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Everything single column */
  .status-dock,
  .trust-metrics,
  .gallery,
  .join-steps,
  .rules-grid,
  .staff-grid,
  dl { grid-template-columns: 1fr; }

  /* Status tiles switch from right borders to bottom borders when stacked */
  .status-tile {
    border-right: 0;
    border-bottom: 1px solid rgba(192, 132, 252, 0.16);
  }
  .status-tile:last-child { border-bottom: 0; }

  .world,
  .infrastructure,
  .network,
  .rules,
  .staff,
  .changelog,
  .faq,
  .join,
  .media,
  .final-cta { padding: 88px 0; }

  .feature-card,
  .feature-large { min-height: 430px; }

  .trust-panel,
  .control-center { padding: 22px; }

  /* Gallery items all become standard height on mobile */
  .gallery-item,
  .gallery-item.tall,
  .gallery-item.wide {
    min-height: 280px;
    grid-column: auto;
    grid-row: auto;
  }

  .site-footer {
    display: grid;
    gap: 10px;
  }
}


/* =============================================================================
   13. REDUCED MOTION
   Respects the user's OS-level "reduce motion" preference.
   All animations and transitions are disabled. Do not remove this block —
   it's important for accessibility.
============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}