/* ==========================================================================
   Fabled Hosting, landing page styles
   Plain CSS, no build step. Design tokens live in :root.

   Palette: "grass & stone". Deep forest-slate ground, stone surfaces, and a
   single grass-green accent reserved for actions and live status. Sand is a
   warm secondary used sparingly (warnings, illustration highlights) so the
   page never resolves into a two-colour high-contrast scheme.
   ========================================================================== */

:root {
  /* ground & surfaces */
  --bg:            #0d1512;
  --bg-2:          #101a16;
  --surface:       #16211c;
  --surface-2:     #1b2823;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.15);

  /* type colours */
  --text:          #e8efea;
  --muted:         #8fa398;
  --muted-2:       #6b7f74;

  /* accents */
  --accent:        #5fb463;   /* grass: buttons, links, active state */
  --accent-deep:   #3f8f54;
  --accent-soft:   rgba(95,180,99,.12);
  --accent-line:   rgba(95,180,99,.30);

  --sand:          #c9a97c;   /* warm secondary, used sparingly */
  --stone:         #e9e6de;   /* light band background */
  --ink:           #16241d;   /* text on light band */
  --red:           #e0736c;

  /* type */
  --font-display: 'Outfit', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* layout */
  --wrap: 1200px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --shadow:    0 18px 50px -22px rgba(0,0,0,.8);
  --shadow-lg: 0 40px 90px -34px rgba(0,0,0,.9);
  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Any class rule that sets `display` silently beats the browser's built in
   [hidden] { display: none }, because a class selector outranks it. That made
   the dashboard's empty state render underneath a real server. Anything toggled
   with the hidden attribute needs this to actually stay hidden. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 12px; }

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

/* ---------- shared bits ---------- */
.h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 700;
}
.h2 em { font-style: normal; color: var(--accent); }

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-top: 14px;
}

.section-head { max-width: 700px; margin-bottom: 54px; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  font-family: var(--font-display);
  font-weight: 600; font-size: .95rem;
  border: 1px solid transparent;
  background: var(--btn-bg);
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: #0c1a10;
  box-shadow: 0 10px 26px -14px rgba(95,180,99,.85);
}
.btn--primary:hover { background: #6cc470; box-shadow: 0 16px 34px -14px rgba(95,180,99,.9); }

.btn--outline { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,.03); }
.btn--outline:hover { border-color: var(--accent-line); background: var(--accent-soft); }

.btn--ghost { color: var(--muted); }
.btn--ghost:hover { color: var(--text); }

.btn--dark { background: var(--ink); color: #f3f6f3; box-shadow: var(--shadow); }
.btn--dark:hover { background: #21382c; }

.btn--lg { padding: 14px 26px; font-size: 1rem; border-radius: 13px; }
.btn--full { width: 100%; }

/* ==========================================================================
   NAV
   ========================================================================== */
/* Transparent over the hero artwork, solid once you start scrolling. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              backdrop-filter .25s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(13,21,18,.92);
  backdrop-filter: blur(14px);
}

.nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; }

/* flex:none matters here. The nav row is a flex container whose contents are
   wider than it on smaller screens, so the brand link shrinks like any other
   item. It used to hold text, which simply wrapped, but a logo image inherits
   the global img{max-width:100%} and gets squashed to the shrunken link's width
   instead. Keeping the link at its natural size keeps the logo undistorted. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }

/* The wordmark is a single image, so it is sized by height and left to work out
   its own width. The file carries a soft glow baked into its edges, which reads
   correctly on the dark surfaces this sits on and is why it is not trimmed
   harder. */
.brand__logo {
  display: block;
  height: 32px; width: auto;
  /* A flex item may shrink below its natural width, which squashes an image
     rather than moving it. The nav row is tight enough on narrow screens to do
     exactly that, so opt this one out of shrinking. */
  flex: none;
}
.brand--foot .brand__logo { height: 38px; }

/* Kept for the old text lockup in case anything still renders it. */
.brand__mark { display: grid; place-items: center; }
.brand__text {
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em;
}
.brand__text span { color: var(--accent); }

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  color: var(--muted); font-size: .93rem; font-weight: 500;
  padding: 8px 14px; border-radius: 9px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255,255,255,.05); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); }
.nav__toggle span {
  display: block; width: 18px; height: 2px; margin: 3.5px auto; background: var(--text); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero { position: relative; padding: 150px 0 100px; overflow: hidden; isolation: isolate; }
.hero .wrap { position: relative; }

/* ---------- hero artwork + gradient fade ----------
   The image is a flat photographic layer; every edge treatment lives in
   .hero__fade so the artwork can be swapped without re-exporting anything.
   Two stacked gradients: one horizontal (keeps the copy column legible), one
   vertical (eases the image into --bg before the pricing cards start). */
.hero__media {
  position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: clamp(560px, 78vh, 860px);
  pointer-events: none;
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%;
  /* pull the source art toward the site palette so the green accent still reads */
  filter: saturate(.78) contrast(1.04) brightness(var(--hero-brightness));
}

/* ---- the two knobs ----
   --hero-veil       1 = default. Raise toward 1.6 to shadow the art out more,
                     drop toward 0.5 to let more of it through. Scales all three
                     fade layers together.
   --hero-brightness how bright the photo is before the veil goes on top.

   The three layers below multiply, so the visible artwork at the clear point is
   roughly:  brightness x (1-h) x (1-v) x (1-cast)
   At the defaults that lands near 30%, a legible backdrop rather than a feature image.
   Push --hero-veil past ~1.5 and it goes effectively black. */
.hero {
  --hero-veil: 1;
  --hero-brightness: .62;
}
.hero__fade {
  position: absolute; inset: 0;
  background:
    /* Horizontal. Holds near-opaque out to 44%, which is where the copy column
       ends at desktop widths, then clears fast so the artwork actually reads.
       The mid stop at 44% is the one that keeps body text legible; don't drop it
       below about .8 or the sub-paragraph starts fighting the grass. */
    linear-gradient(100deg,
      var(--bg) 0%,
      rgb(13 21 18 / calc(var(--hero-veil) * .94)) 30%,
      rgb(13 21 18 / calc(var(--hero-veil) * .86)) 44%,
      rgb(13 21 18 / calc(var(--hero-veil) * .42)) 60%,
      rgb(13 21 18 / calc(var(--hero-veil) * .12)) 78%,
      rgb(13 21 18 / calc(var(--hero-veil) * .28)) 100%),
    /* Vertical. Settles under the nav, then dissolves fully into the page. */
    linear-gradient(to bottom,
      rgb(13 21 18 / calc(var(--hero-veil) * .50)) 0%,
      rgb(13 21 18 / calc(var(--hero-veil) * .10)) 26%,
      rgb(13 21 18 / calc(var(--hero-veil) * .24)) 62%,
      var(--bg) 96%),
    /* Faint forest cast to keep the artwork inside the palette. */
    linear-gradient(rgb(20 45 32 / calc(var(--hero-veil) * .18)),
                    rgb(20 45 32 / calc(var(--hero-veil) * .18)));
}

.hero__grid { display: grid; }
.hero__copy { max-width: 640px; }

.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 3.9rem);
  font-weight: 700;
  max-width: 16ch;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(13,21,18,.7);
}
.hero__sub { color: var(--muted); font-size: 1.12rem; max-width: 52ch; margin-top: 22px; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__ctas--center { justify-content: center; }

/* Four items don't fit across the 640px copy column, so this is an intentional
   2x2 block rather than a row that happens to wrap. */
.trustrow {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 34px; margin-top: 40px; max-width: 520px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.trustrow li { display: flex; flex-direction: column; gap: 2px; }
.trustrow strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.trustrow small { color: var(--muted-2); font-size: .82rem; }

/* ---------- pricing preview ---------- */
.plans { margin-top: 96px; scroll-margin-top: 90px; }
.plans__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.plans__head .lede { margin-inline: auto; }

/* Auto-fit rather than a fixed four, and centred, so the row still looks
   deliberate when there are only the two tiers the hardware can actually run.
   A fixed count leaves the cards jammed into the left with dead space beside
   them the moment a tier is removed. max-width keeps two cards from stretching
   into slabs on a wide screen. */
.plangrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 288px));
  justify-content: center;
  gap: 18px; align-items: stretch;
}

.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px 26px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow); }

.plan.is-popular {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 24px 60px -34px rgba(95,180,99,.6);
}
.plan__ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: #0c1a10; font-family: var(--font-display); font-weight: 600;
  font-size: .74rem; letter-spacing: .02em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}

.plan__name { font-size: 1.3rem; font-weight: 600; }
.plan__for { color: var(--muted-2); font-size: .86rem; margin-top: 4px; }

.plan__ram {
  margin-top: 18px; font-family: var(--font-display); font-weight: 500;
  color: var(--muted); font-size: .95rem;
}
.plan__ram span { font-size: 1.55rem; font-weight: 700; color: var(--text); margin-right: 3px; }

.plan__price {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
}
.plan__price .cur { font-size: 1.2rem; font-weight: 500; color: var(--muted); align-self: flex-start; margin-top: 6px; }
.plan__price .amt { font-size: 2.9rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.plan__price .per { font-size: .95rem; color: var(--muted-2); margin-left: 4px; }

.plan__list { margin: 20px 0 26px; display: grid; gap: 11px; flex: 1; }
.plan__list li {
  position: relative; padding-left: 26px; font-size: .9rem; color: var(--muted);
}
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 9px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) scale(.85); border-radius: 1px;
}

.plans__foot { text-align: center; color: var(--muted-2); font-size: .88rem; margin-top: 26px; }

/* ==========================================================================
   2. SECONDARY CTA BANNER
   A light stone band so it reads as a break in the page, not a second brand.
   ========================================================================== */
.banner { background: var(--stone); color: var(--ink); }
.banner__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 44px;
  padding-block: 48px;
}
.banner__title { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; max-width: 20ch; }
.banner__title strong { font-weight: 700; color: var(--accent-deep); }
.banner__sub { margin-top: 12px; max-width: 60ch; color: #4a5a51; font-size: .98rem; }
.banner__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.banner__cta small { color: #6b7a70; font-size: .82rem; }

/* ==========================================================================
   3. PANEL SHOWCASE
   ========================================================================== */
.panel { padding: 104px 0; scroll-margin-top: 72px; }
.panel__grid { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }

.featurelist { display: grid; gap: 8px; }
.feature {
  display: flex; gap: 15px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.feature:hover { background: rgba(255,255,255,.035); }
.feature.is-active { background: var(--accent-soft); border-color: var(--accent-line); }
.feature__icon {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(255,255,255,.05); color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.feature__icon svg { width: 20px; height: 20px; }
.feature.is-active .feature__icon { background: rgba(95,180,99,.16); color: var(--accent); }
.feature__text { display: flex; flex-direction: column; gap: 3px; }
.feature__text strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.feature__text small { color: var(--muted-2); font-size: .84rem; line-height: 1.45; }

/* mockup */
.mock {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock__chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mock__url {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: .76rem; color: var(--muted-2);
}
.mock__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 4px 10px; border-radius: 999px;
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.mock__body { display: grid; grid-template-columns: 150px 1fr; min-height: 380px; }
.mock__side {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
  border-right: 1px solid var(--line); background: rgba(0,0,0,.22);
}
.mock__srv {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  padding: 6px 10px; margin-bottom: 8px;
}
.mock__nav { font-size: .82rem; color: var(--muted-2); padding: 7px 10px; border-radius: 8px; }
.mock__nav.is-on { background: var(--accent-soft); color: var(--accent); }

.mock__main { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mock__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock__stats div {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px;
}
.mock__stats small { display: block; color: var(--muted-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.mock__stats b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }

.pane { display: none; flex: 1; }
.pane.is-active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.term {
  margin: 0; height: 100%; min-height: 210px;
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.85;
  color: #cbd8ce; white-space: pre-wrap; word-break: break-word; overflow: hidden;
}
.t-dim  { color: var(--muted-2); }
.t-ok   { color: var(--accent); }
.t-warn { color: var(--sand); }
.t-acc  { color: var(--muted); }
.caret::after {
  content: "▋"; color: var(--accent); margin-left: 2px; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.rows { display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
}
.row em { font-style: normal; color: var(--text); }
.row .tag {
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-family: var(--font-body); font-weight: 600;
}
.row .tag--bad { background: rgba(224,115,108,.14); color: var(--red); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cards .card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 11px; padding: 16px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
}
.cards .card small {
  font-family: var(--font-body); font-weight: 600; font-size: .68rem;
  color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px;
}

.mock__tag {
  position: absolute; bottom: 10px; right: 14px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}

/* ==========================================================================
   4. SUPPORTED SERVER TYPES
   ========================================================================== */
.types {
  padding: 56px 0; border-block: 1px solid var(--line);
  background: var(--bg-2);
  scroll-margin-top: 72px;
}
.types__label { text-align: center; color: var(--muted); font-size: .95rem; margin-bottom: 30px; }
.typerow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.typerow li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
  font-family: var(--font-display); font-weight: 500; font-size: .93rem; color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.typerow li:hover {
  color: var(--text); border-color: var(--accent-line);
  background: var(--accent-soft); transform: translateY(-3px);
}
.typeicon { color: var(--accent); display: grid; place-items: center; }
.typeicon svg { width: 20px; height: 20px; }

/* ==========================================================================
   5. WHY A NEW HOST
   Replaces the old ratings/testimonials block. No star or score components
   exist any more, and reintroducing them means reintroducing fake social proof.
   ========================================================================== */
.why { padding: 104px 0; scroll-margin-top: 72px; }
.why__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; margin-bottom: 48px;
}

.pledge {
  flex-shrink: 0; max-width: 320px;
  padding: 24px 28px; border-radius: var(--r-lg);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}
.pledge__title {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; color: var(--accent); margin-bottom: 8px;
}
.pledge__body { color: var(--muted); font-size: .92rem; line-height: 1.6; }

.whygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wcard {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.wcard:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.wcard h3 { font-size: 1.12rem; font-weight: 600; }
.wcard p { color: var(--muted); font-size: .95rem; line-height: 1.65; }
.wcard em { font-style: normal; color: var(--text); }

.why__note {
  margin-top: 26px; text-align: center;
  color: var(--muted-2); font-size: .88rem;
}

/* ==========================================================================
   6. FAQ
   ========================================================================== */
.faq { padding: 20px 0 104px; scroll-margin-top: 72px; }
.faq__inner { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.faq__head { position: sticky; top: 100px; }
.faq__head .btn { margin-top: 24px; }

.acc { display: grid; gap: 10px; }
.acc__item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255,255,255,.02);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.acc__item:hover { border-color: var(--line-strong); }
.acc__item.is-open { border-color: var(--accent-line); background: var(--accent-soft); }
.acc__item h3 { margin: 0; }

.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; text-align: left; padding: 20px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.03rem;
}
.acc__chev {
  flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__chev {
  transform: rotate(-135deg) translate(-2px,-2px); border-color: var(--accent);
}
.acc__panel { padding: 0 22px 22px; color: var(--muted); font-size: .96rem; max-width: 72ch; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final { padding: 0 0 104px; }
.final__inner {
  text-align: center; padding: 72px 32px; border-radius: 28px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(95,180,99,.13), transparent 62%),
    var(--surface);
}
.final__title { font-size: clamp(1.85rem, 3.8vw, 2.9rem); font-weight: 700; }
.final__sub { color: var(--muted); margin: 16px auto 0; max-width: 56ch; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); padding-top: 64px; }
.foot__inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; padding-bottom: 48px; }
.foot__blurb { color: var(--muted-2); font-size: .9rem; margin-top: 16px; max-width: 34ch; }

.social { display: flex; gap: 10px; margin-top: 22px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.social a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.foot__cols h3 {
  font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: 16px;
}
.foot__cols ul { display: grid; gap: 10px; }
.foot__cols a { color: var(--muted-2); font-size: .9rem; transition: color .18s var(--ease); }
.foot__cols a:hover { color: var(--accent); }

.foot__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 22px; border-top: 1px solid var(--line);
  color: var(--muted-2); font-size: .82rem;
}
.foot__legal { display: flex; gap: 18px; }
.foot__legal a:hover { color: var(--accent); }

/* ==========================================================================
   PROVISIONING DIALOG
   ========================================================================== */
.modal {
  width: min(480px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(6,10,8,.72); backdrop-filter: blur(3px); }
.modal[open] { animation: modalIn .22s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; color: var(--muted-2);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.modal__x:hover { color: var(--text); background: rgba(255,255,255,.06); }

.modal__view { padding: 34px 32px 30px; }
.modal__title { font-size: 1.4rem; font-weight: 600; padding-right: 32px; }
.modal__spec { color: var(--muted); font-size: .93rem; margin-top: 10px; }

.modal__form { display: grid; gap: 16px; margin-top: 24px; }

.field { display: grid; gap: 6px; }
.field__label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.field__input {
  width: 100%; padding: 11px 14px;
  background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font: inherit; font-size: .94rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field__input::placeholder { color: var(--muted-2); }
.field__input:focus {
  outline: none; border-color: var(--accent-line); background: rgba(0,0,0,.4);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__hint { color: var(--muted-2); font-size: .8rem; }
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field2 { grid-template-columns: 1fr; } }
select.field__input { appearance: none; cursor: pointer; }

.modal__error {
  background: rgba(224,115,108,.1); border: 1px solid rgba(224,115,108,.34);
  color: #f0a9a4; border-radius: 10px; padding: 11px 14px; font-size: .88rem;
}
.modal__fineprint { color: var(--muted-2); font-size: .8rem; text-align: center; }

.spinner {
  width: 34px; height: 34px; margin: 6px auto 20px;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#orderBusyView { text-align: center; padding-block: 46px; }

.done { display: grid; gap: 10px; margin-top: 22px; }
.done__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(0,0,0,.24); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
}
.done__label { color: var(--muted-2); font-size: .78rem; width: 100%; }
.done__value {
  font-family: var(--font-mono); font-size: .95rem; color: var(--accent);
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.done__copy {
  font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.done__link { color: var(--accent); font-weight: 600; font-size: .93rem; }
.done__link:hover { text-decoration: underline; }

.creds {
  margin-top: 14px; padding: 15px;
  background: rgba(201,169,124,.07); border: 1px solid rgba(201,169,124,.28);
  border-radius: 11px;
}
.creds__title { font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.creds__line { font-size: .85rem; color: var(--muted); margin-top: 7px; }
.creds__line code {
  font-family: var(--font-mono); color: var(--text);
  background: rgba(0,0,0,.3); padding: 2px 7px; border-radius: 5px; overflow-wrap: anywhere;
}
.creds__warn { color: var(--sand); font-size: .78rem; margin-top: 10px; }

#orderDoneView .btn { margin-top: 22px; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dash { padding: 56px 0 104px; min-height: 70vh; }
.dash .h2 { margin-bottom: 4px; }
.dash__who { color: var(--muted); font-size: .9rem; }
.dash__loading { padding: 80px 0; }
.dash__auth { max-width: 460px; }
.dash__empty { margin-top: 30px; display: grid; gap: 16px; justify-items: start; }

.srvlist { display: grid; gap: 16px; margin-top: 30px; }

.srv {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 26px 22px;
}
.srv__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.srv__name { font-size: 1.25rem; font-weight: 600; }
.srv__meta { color: var(--muted-2); font-size: .86rem; margin-top: 4px; }

.srv__state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: capitalize;
}
.srv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.srv__state[data-state="running"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.srv__state[data-state="running"] .srv__dot { background: var(--accent); animation: pulse 2s infinite; }
.srv__state[data-state="starting"], .srv__state[data-state="stopping"],
.srv__state[data-state="installing"], .srv__state[data-state="transferring"] { color: var(--sand); }
.srv__state[data-state="starting"] .srv__dot, .srv__state[data-state="stopping"] .srv__dot,
.srv__state[data-state="installing"] .srv__dot, .srv__state[data-state="transferring"] .srv__dot {
  background: var(--sand); animation: pulse 2s infinite;
}
.srv__state[data-state="offline"] .srv__dot { background: var(--red); }

.srv__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-top: 22px;
}
.srv__cell {
  background: rgba(0,0,0,.22); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 14px; min-width: 0;
}
.srv__label { display: block; color: var(--muted-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.srv__cell b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.srv__connect { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.srv__connect code {
  font-family: var(--font-mono); font-size: .92rem; color: var(--accent);
  overflow-wrap: anywhere; min-width: 0;
}

.srv__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.srv__actions .btn { padding: 9px 18px; font-size: .9rem; }
.srv__actions .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.srv__kill { color: var(--red); border-color: rgba(224,115,108,.3); }
.srv__kill:hover { border-color: rgba(224,115,108,.6); background: rgba(224,115,108,.08); }

.srv__note {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px;
  background: rgba(224,115,108,.1); border: 1px solid rgba(224,115,108,.3);
  color: #f0a9a4; font-size: .86rem;
}
/* Progress, not failure. Same slot, different meaning. */
.srv__note--info {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}

.logs { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.logs__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted-2);
}
.logs__body {
  margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto;
  background: rgba(0,0,0,.42);
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.7;
  color: #cbd8ce; white-space: pre-wrap; word-break: break-word;
}
.logs__body .l-err { color: var(--red); }
.logs__body .l-warn { color: var(--sand); }

@media (max-width: 760px) {
  .srv__grid { grid-template-columns: 1fr 1fr; }
  .srv__cell:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   PANEL: detail view, tabs, console, files, mods, startup, players
   ========================================================================== */
.dash__back {
  color: var(--muted); font-size: .9rem; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 7px;
}
.dash__back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.dash__back:hover { color: var(--accent); }

.srv--clickable:hover { border-color: var(--accent-line); }

.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.detail__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 20px; }
.detail__stats div {
  background: rgba(0,0,0,.22); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 14px; min-width: 0;
}
.detail__stats b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }

.tabs { display: flex; gap: 4px; margin: 28px 0 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  padding: 11px 18px; font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  color: var(--muted-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.tabpane { display: none; padding-top: 24px; }
.tabpane.is-active { display: block; }

/* console */
.term2 {
  height: 420px; overflow: auto; padding: 14px 16px;
  background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.65;
  color: #cbd8ce; white-space: pre-wrap; word-break: break-word;
}
.term2 .l-err { color: var(--red); }
.term2 .l-warn { color: var(--sand); }
.term2__form { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.term2__prompt { font-family: var(--font-mono); color: var(--accent); }
.term2__input {
  flex: 1; min-width: 0; padding: 11px 14px;
  background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--font-mono); font-size: .85rem;
}
.term2__input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.term2__input:disabled { opacity: .5; }
.term2__status { color: var(--muted-2); font-size: .8rem; margin-top: 10px; }

/* files */
.files__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 11px 11px 0 0;
}
.files__crumbs { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.files__list { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px; overflow: hidden; }
.file {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--line); background: rgba(0,0,0,.14);
}
.file:first-child { border-top: 0; }
.file__name { flex: 1; text-align: left; font-family: var(--font-mono); font-size: .84rem; color: var(--text); overflow-wrap: anywhere; }
.file__name:hover { color: var(--accent); }
.file__meta { color: var(--muted-2); font-size: .76rem; white-space: nowrap; }
.file__del { color: var(--red); font-size: .76rem; opacity: .7; }
.file__del:hover { opacity: 1; }
.file--up { width: 100%; text-align: left; font-family: var(--font-mono); font-size: .84rem; color: var(--muted); }

.editor { margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.editor__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; background: rgba(255,255,255,.05);
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
}
.editor__actions { display: flex; gap: 8px; }
.editor__area {
  display: block; width: 100%; min-height: 320px; padding: 14px 16px;
  background: rgba(0,0,0,.42); color: #cbd8ce; border: 0; resize: vertical;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.65;
}
.editor__area:focus { outline: none; }

/* mods */
.mods__search { display: flex; gap: 10px; flex-wrap: wrap; }
.mods__search .field__input { flex: 1; min-width: 200px; }
.mods__select { flex: 0 0 140px; }
.mods__list { display: grid; gap: 10px; margin-top: 18px; }
.mod {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 11px;
}
.mod__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mod__body b { font-family: var(--font-display); font-size: .96rem; }
.mod__body span { color: var(--muted); font-size: .84rem; }
.mod__body small { color: var(--muted-2); font-size: .74rem; }
.mod .btn { flex-shrink: 0; padding: 8px 16px; font-size: .85rem; }
.mod__icon { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,.05); }

.mods__context {
  color: var(--accent); font-size: .85rem; margin-bottom: 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 10px 14px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip {
  padding: 6px 13px; border-radius: 999px; font-size: .8rem; text-transform: capitalize;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.chips__toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--muted-2); font-size: .82rem; cursor: pointer;
}
.chips__toggle input { accent-color: var(--accent); }

.file__act { color: var(--muted); font-size: .76rem; opacity: .8; white-space: nowrap; }
.file__act:hover { color: var(--accent); opacity: 1; }

/* players */
.players__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.players__head b { font-family: var(--font-display); font-size: 1.1rem; }
.players__list { display: grid; gap: 8px; margin-top: 16px; }
.player {
  padding: 11px 14px; background: rgba(0,0,0,.2);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-mono); font-size: .85rem;
}

@media (max-width: 760px) {
  .detail__stats { grid-template-columns: 1fr 1fr; }
  .term2 { height: 320px; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__title { max-width: none; }
  .plangrid { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }
  .panel__grid { grid-template-columns: 1fr; gap: 32px; }
  .featurelist { grid-template-columns: repeat(2, 1fr); }
  .faq__inner { grid-template-columns: 1fr; gap: 34px; }
  .faq__head { position: static; }
  .whygrid { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 2px; padding: 14px 24px 20px;
    background: rgba(13,21,18,.98); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 14px; }
  .nav__actions { margin-left: auto; }
  .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: block; }

  /* The brand no longer shrinks, so on a phone the logo, the buy button and the
     menu toggle have to fit at their natural widths. Scaling the logo down is
     the honest way to make room, rather than letting it distort. */
  .brand__logo { height: 26px; }

  /* No side-by-side split on narrow screens, so the fade goes mostly vertical
     and the artwork sits behind the copy rather than beside it. */
  .hero { padding-top: 112px; --hero-brightness: .58; }
  .hero__img { object-position: 60% 38%; }
  .hero__fade {
    background:
      linear-gradient(to bottom,
        rgb(13 21 18 / calc(var(--hero-veil) * .6)) 0%,
        rgb(13 21 18 / calc(var(--hero-veil) * .3)) 16%,
        rgb(13 21 18 / calc(var(--hero-veil) * .74)) 56%,
        var(--bg) 94%),
      linear-gradient(rgb(20 45 32 / calc(var(--hero-veil) * .3)),
                      rgb(20 45 32 / calc(var(--hero-veil) * .3)));
  }

  .banner__inner { flex-direction: column; align-items: flex-start; }
  .banner__title { max-width: none; }
  .banner__cta { align-items: flex-start; width: 100%; }

  .why__head { flex-direction: column; align-items: flex-start; }
  .pledge { max-width: none; width: 100%; }

  .mock__body { grid-template-columns: 1fr; }
  .mock__side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .mock__srv, .mock__nav { margin-bottom: 0; white-space: nowrap; }
  .mock__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 18px; }
  .hero { padding: 56px 0 72px; }
  .plangrid, .featurelist, .cards { grid-template-columns: 1fr; }
  .plans { margin-top: 68px; }
  .panel, .why { padding: 72px 0; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__bar { flex-direction: column; align-items: flex-start; }
  .trustrow { gap: 18px 22px; }
  .final__inner { padding: 48px 22px; }
  .hero__ctas .btn { flex: 1; }
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}