/* ValkFire — shared site styles.
 *
 * The palette is sampled from the logo artwork rather than guessed: the base
 * is the near-black the logo sits on, and the reds are the ones already in
 * the flame. Dark only — a fire-service product that flips to a white page
 * looks like a different company, and every screen in the app is dark too.
 */
:root{
  --bg:#0b0d0c;
  --bg-2:#111413;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --ink:#eceff1;
  --mute:#9aa1a8;
  --red:#d7263d;
  --ember:#ff7a24;
  --wrap:min(1080px,92vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:17px/1.65 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:#ff9147}
a:hover{color:var(--ember)}

/* The fixed backdrop.
   Three layers, painted once and never redrawn:

   1. A scrim. The artwork underneath is bright enough in places to eat body
      text, so the top two thirds are pulled almost to black and only the
      bottom is allowed to burn. This is what keeps the page readable rather
      than atmospheric-but-unusable.
   2. The artwork itself — the ValkFire plate with its wordmark cropped out,
      because the page renders its own. Anchored to the BOTTOM: the fire sits
      at the foot of the viewport and the canvas embers rise away from it,
      which is the whole point of the picture.
   3. The old CSS glow, still underneath, so the page has a colour even
      before the image has loaded and on any viewport the image cannot fill.

   background-attachment is deliberately NOT fixed — it thrashes on iOS and
   on long pages. The element is position:fixed instead, which gets the same
   look for free. */
.backdrop{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,
      #0b0d0c 0%, rgba(11,13,12,.97) 28%, rgba(11,13,12,.86) 52%,
      rgba(11,13,12,.62) 74%, rgba(11,13,12,.34) 100%),
    url('/assets/bg.jpg') center bottom / cover no-repeat,
    radial-gradient(900px 620px at 50% 8%, rgba(190,20,10,.28), transparent 62%),
    radial-gradient(700px 500px at 82% 78%, rgba(120,14,12,.20), transparent 65%),
    radial-gradient(600px 460px at 10% 92%, rgba(90,12,10,.18), transparent 65%),
    linear-gradient(180deg,#0e0f0e 0%, #0b0d0c 45%, #080706 100%);
  background-color:#0b0d0c;
}

#embers{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* A vignette over the embers so text never fights a bright dot. */
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%)}

.wrap{width:var(--wrap);margin:0 auto}

header{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,9,8,.82), rgba(8,9,8,.45));
  backdrop-filter:blur(6px)}
.bar{display:flex;align-items:center;gap:13px;padding:12px 0}
/* The header mark is now the artwork's own horizontal lockup rather than the
   roundel plus live text, so the nav's job is to stay out of its way. */
.mark{display:block;text-decoration:none;line-height:0}
.mark img{height:40px;width:auto;display:block}
@media (max-width:560px){ .mark img{height:32px} }
nav{margin-left:auto;display:flex;gap:22px;font-size:15px}
nav a{color:var(--mute);text-decoration:none}
nav a:hover{color:var(--ink)}

section{padding:56px 0;border-bottom:1px solid var(--line)}
h1{font-size:clamp(30px,5.2vw,48px);line-height:1.12;margin:0 0 16px;letter-spacing:-.6px}
h2{font-size:25px;margin:0 0 6px;letter-spacing:-.2px}
.sub{color:var(--mute);margin:0 0 26px}
.lede{font-size:clamp(17px,2.2vw,20px);color:#c3c9ce;max-width:60ch;margin:0}

.status{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;
  font-weight:800;letter-spacing:.7px;background:rgba(215,38,61,.15);
  color:#ff6b7d;border:1px solid rgba(215,38,61,.5)}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  backdrop-filter:blur(3px)}
.card h3{margin:0 0 8px;font-size:17px}
.card p{margin:0;color:var(--mute);font-size:15.5px}

.btn{display:inline-block;padding:13px 24px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#e8412f,#c31f1a);color:#fff;font:inherit;font-weight:700;
  font-size:16px;text-decoration:none}
.btn:hover{filter:brightness(1.08);color:#fff}
.btn[disabled]{opacity:.55;cursor:default;filter:none}

footer{padding:36px 0 56px;color:var(--mute);font-size:15px}
footer a{color:var(--mute)}
.foot-row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.foot-row .sp{margin-left:auto}

@media(max-width:640px){
  nav{display:none}
  section{padding:40px 0}
}

/* Motion opt-in. The system's reduced-motion preference sets the default;
   this lets a visitor override it either way. Deliberately quiet — it is a
   footer utility, not a call to action. */
.embers-toggle{
  appearance:none;background:none;border:0;padding:0;
  font:inherit;font-size:.86rem;color:var(--mute);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.embers-toggle:hover{color:var(--ink)}
.embers-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}