:root{
  --black:#050608;
  --charcoal:#0a0c10;
  --iron:#13161c;
  --iron-2:#1a1e26;
  --steel-dark:#232830;
  --steel:#3a4250;
  --steel-light:#5a6577;
  --bone:#e8e4d8;
  --bone-dim:#b0aca0;
  --bone-mute:#7a7669;
  --blue:#4a6580;
  --blue-bright:#7aa3c9;
  --blue-glow:rgba(122,163,201,.35);
  --rust:#5a1e14;
  --ember:#4a1410;
  --ember-bright:#9a1d1d;
  --ember-glow:rgba(195,35,35,.65);
  --ember-glow-soft:rgba(150,28,28,.4);
  --ember-hot:rgba(230,65,50,.4);
  --grid:rgba(255,255,255,.025);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',sans-serif;
  background:var(--black);
  color:var(--bone);
  overflow-x:hidden;
  font-weight:300;
  letter-spacing:.01em;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* === GRAIN OVERLAY === */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.4;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1000;
}

/* === SCAN LINE === */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 3px);
  pointer-events:none;
  z-index:999;
}

/* === TYPOGRAPHY === */
.display{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.95;
}
.mono{
  font-family:'JetBrains Mono',monospace;
  font-weight:400;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:11px;
}

/* === TOP STATUS BAR === */
.statusbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:28px;
  background:var(--iron);
  border-bottom:1px solid var(--steel-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  z-index:100;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--bone-mute);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.statusbar .dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ember-bright);
  margin-right:8px;
  box-shadow:0 0 6px var(--ember-bright),0 0 14px var(--ember-glow);
  animation:pulse 2s infinite;
}
.statusbar .right{display:flex;gap:32px;align-items:center}
.statusbar .left{display:flex;gap:24px;align-items:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* === NAV === */
nav{
  position:fixed;
  top:28px;
  left:0;
  right:0;
  height:64px;
  background:rgba(10,12,16,.85);
  backdrop-filter:blur(20px) saturate(120%);
  border-bottom:1px solid rgba(58,66,80,.4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  z-index:99;
}
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:.18em;
  color:var(--bone);
}
.logo svg{
  filter:drop-shadow(0 0 6px var(--blue-glow));
}
.nav-links{
  display:flex;
  gap:40px;
  list-style:none;
}
.nav-links a{
  color:var(--bone-dim);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  transition:color .2s;
  position:relative;
  padding:6px 0;
}
.nav-links a:hover{color:var(--bone)}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--ember);
  transition:width .3s;
}
.nav-links a:hover::after{width:100%}
.nav-cta{
  background:transparent;
  border:1px solid var(--steel);
  color:var(--bone);
  padding:10px 22px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s;
  position:relative;
  display:inline-block;
  text-decoration:none;
}
.nav-cta:hover{
  border-color:var(--ember);
  color:var(--ember-bright);
  box-shadow:0 0 20px var(--ember-glow);
}

/* === HERO === */
.hero{
  min-height:100vh;
  padding:140px 40px 80px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:var(--black);
}
.hero-img{
  position:absolute;
  inset:0;
  background-position:center center;
  background-image:url('images/hero-warrior.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  filter:grayscale(.12) contrast(1.1) brightness(.92);
  z-index:0;
}
.hero-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* left fade — lighter so warrior emerges more */
    linear-gradient(90deg, rgba(5,6,8,.92) 0%, rgba(5,6,8,.82) 25%, rgba(5,6,8,.5) 50%, rgba(5,6,8,.2) 75%, rgba(5,6,8,.1) 100%),
    /* top fade so nav blends in */
    linear-gradient(180deg, var(--black) 0%, transparent 18%, transparent 75%, var(--black) 100%),
    /* dried blood glow at bottom */
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(122,40,24,.18), transparent 70%),
    /* cold blue mood at top right where AI HUDs are */
    radial-gradient(ellipse 40% 40% at 80% 25%, rgba(74,101,128,.12), transparent 70%);
}
/* glow / bloom layer — punches through the cloak */
.hero-glow{
  position:absolute;
  inset:0;
  background-image:url('images/hero-glow.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  filter:brightness(1.35) saturate(1.2);
  z-index:1;
  pointer-events:none;
  /* slow pulse to feel alive */
  animation:glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{filter:brightness(1.35) saturate(1.2)}
  50%{filter:brightness(1.55) saturate(1.3)}
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
  pointer-events:none;
  z-index:2;
}
.hero-content{position:relative}

/* dying coals — drifting blood-rust motes */
.ember-particle{
  position:absolute;
  bottom:-10px;
  width:1.5px;
  height:1.5px;
  background:var(--ember-bright);
  border-radius:50%;
  box-shadow:0 0 3px var(--ember-bright),0 0 6px var(--ember-glow);
  animation:rise linear infinite;
  pointer-events:none;
  opacity:0;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  15%{opacity:.5}
  85%{opacity:.25}
  100%{transform:translateY(-100vh) translateX(var(--drift,30px));opacity:0}
}

.hero-content{
  position:relative;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  z-index:3;
}
.hero-tag{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
  color:var(--ember-bright);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(195,35,35,.65);
}
.hero-tag::before{
  content:"";
  width:32px;
  height:1px;
  background:var(--ember-bright);
  box-shadow:0 0 8px var(--ember-glow),0 0 16px rgba(195,35,35,.32);
}
.hero h1{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(56px,11vw,180px);
  line-height:.85;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--bone);
  margin-bottom:40px;
  text-shadow:0 0 60px rgba(232,228,216,.05);
}
.hero h1 .accent{
  color:var(--ember-bright);
  font-style:italic;
  font-weight:600;
}
.hero h1 .strike{
  position:relative;
  display:inline-block;
  color:var(--bone-dim);
}
.hero h1 .strike::after{
  content:"";
  position:absolute;
  left:-5%;
  top:50%;
  width:110%;
  height:2px;
  background:var(--ember);
  transform:rotate(-3deg);
  box-shadow:0 0 12px var(--ember-glow);
}
.hero-sub{
  max-width:680px;
  font-size:18px;
  line-height:1.6;
  color:var(--bone-dim);
  margin-bottom:48px;
  font-weight:300;
}
.hero-sub b{color:var(--bone);font-weight:500}
.hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:80px;
}
.btn-primary{
  background:var(--ember);
  color:var(--bone);
  border:none;
  padding:18px 38px;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition:all .25s;
  display:inline-block;
  text-decoration:none;
  box-shadow:
    0 0 20px var(--ember-glow),
    0 0 50px rgba(195,35,35,.25),
    inset 0 0 0 1px rgba(255,200,170,.16);
  animation:cta-pulse 4.5s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 20px var(--ember-glow),0 0 50px rgba(195,35,35,.25),inset 0 0 0 1px rgba(255,200,170,.16)}
  50%{box-shadow:0 0 28px rgba(195,35,35,.72),0 0 70px rgba(195,35,35,.35),inset 0 0 0 1px rgba(255,200,170,.16)}
}
.btn-primary:hover{
  background:var(--ember-bright);
  box-shadow:
    0 0 30px rgba(195,35,35,.78),
    0 0 90px rgba(195,35,35,.38),
    inset 0 0 20px rgba(0,0,0,.25);
  transform:translateY(-1px);
  animation:none;
}
.btn-secondary{
  background:transparent;
  color:var(--bone);
  border:1px solid var(--steel);
  padding:18px 38px;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  cursor:pointer;
  transition:all .25s;
}
.btn-secondary:hover{
  border-color:var(--bone);
  background:rgba(255,255,255,.03);
}

/* hero stat strip */
.hero-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--steel-dark);
  padding-top:32px;
  position:relative;
}
.hero-strip::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:60px;
  height:1px;
  background:var(--ember-bright);
  box-shadow:0 0 8px var(--ember-glow),0 0 20px rgba(195,35,35,.32);
}
.stat{
  padding:0 24px;
  border-left:1px solid var(--steel-dark);
}
.stat:first-child{border-left:none;padding-left:0}
.stat-num{
  font-family:'Oswald',sans-serif;
  font-size:42px;
  font-weight:600;
  color:var(--bone);
  letter-spacing:.02em;
  margin-bottom:4px;
}
.stat-num .unit{
  font-size:18px;
  color:var(--ember);
  margin-left:4px;
}
.stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--bone-mute);
  text-transform:uppercase;
  letter-spacing:.18em;
}

/* corner brackets */
.bracket{
  position:absolute;
  width:24px;
  height:24px;
  border:1px solid var(--ember);
  pointer-events:none;
}
.bracket.tl{top:88px;left:24px;border-right:none;border-bottom:none}
.bracket.tr{top:88px;right:24px;border-left:none;border-bottom:none}
.bracket.bl{bottom:24px;left:24px;border-right:none;border-top:none}
.bracket.br{bottom:24px;right:24px;border-left:none;border-top:none}

/* === SECTION BASE === */
section{position:relative}
.section-pad{padding:140px 40px}
.section-inner{max-width:1400px;margin:0 auto}
.section-tag{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  color:var(--ember-bright);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(195,35,35,.58);
}
.section-tag::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--ember-bright);
  box-shadow:0 0 6px var(--ember-glow),0 0 14px rgba(195,35,35,.32);
}
.section-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--bone);
  margin-bottom:32px;
  max-width:900px;
}
.section-lede{
  font-size:18px;
  line-height:1.6;
  color:var(--bone-dim);
  max-width:680px;
  margin-bottom:64px;
}

/* === ENGINES SECTION === */
.engines{
  background:var(--charcoal);
  border-top:1px solid var(--steel-dark);
  border-bottom:1px solid var(--steel-dark);
}
.engines-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  margin-top:80px;
  position:relative;
  align-items:stretch;
}
.engine-card{
  background:var(--iron);
  border:1px solid var(--steel-dark);
  padding:48px;
  position:relative;
  transition:all .3s;
  overflow:hidden;
}
.engine-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.6;
}
.engine-card.serkr::before{
  filter:drop-shadow(0 0 8px rgba(195,35,35,.65));
  opacity:.9;
}
.engine-card.dogg::before{
  filter:drop-shadow(0 0 8px rgba(122,163,201,.5));
}
.engine-card.dogg{--accent:var(--blue-bright)}
.engine-card.serkr{--accent:var(--ember-bright)}
.engine-card:hover{
  border-color:var(--accent);
  background:var(--iron-2);
}
.engine-card:hover::before{opacity:1}


/* engine card image backgrounds */
.engine-card .card-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.engine-card .card-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(.25) contrast(1.05) brightness(.55);
  opacity:.7;
}
.engine-card .card-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.35) 0%, rgba(10,12,16,.6) 45%, rgba(10,12,16,.93) 78%, rgba(10,12,16,.98) 100%),
    radial-gradient(ellipse at 50% 20%, rgba(10,12,16,0) 0%, rgba(10,12,16,.5) 75%);
}
.engine-card.dogg .card-bg::before{
  background-image:url('images/bg-lawdogg.webp');
}
.engine-card.serkr .card-bg::before{
  background-image:url('images/bg-berserkr-card.webp');
  filter:grayscale(.15) contrast(1.05) brightness(.6);
}
/* lift engine card content above bg */
.engine-card > *:not(.card-bg){
  position:relative;
  z-index:1;
}
/* hover: slightly lift bg opacity */
.engine-card:hover .card-bg::before{
  opacity:.85;
  transition:opacity .3s;
}
/* keep engine-card itself transparent so card-bg shows */
.engine-card{background:rgba(13,15,20,.65)}
.engine-card:hover{background:rgba(13,15,20,.55)}

.engine-mark{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:40px;
}
.engine-glyph{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--steel);
  position:relative;
}
.engine-glyph::before,.engine-glyph::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.engine-glyph::before{top:-1px;left:-1px}
.engine-glyph::after{bottom:-1px;right:-1px}
.engine-glyph svg{filter:drop-shadow(0 0 8px var(--accent))}

.engine-id{
  text-align:right;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--bone-mute);
  letter-spacing:.2em;
  line-height:1.8;
}
.engine-id .status{
  color:var(--accent);
}
.engine-name{
  font-family:'Oswald',sans-serif;
  font-size:64px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bone);
  line-height:1;
  margin-bottom:8px;
}
.engine-role{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--accent);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:32px;
}
.engine-tagline{
  font-family:'Oswald',sans-serif;
  font-size:22px;
  font-weight:400;
  color:var(--bone);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.2;
  margin-bottom:32px;
  padding-bottom:32px;
  border-bottom:1px solid var(--steel-dark);
}
.engine-desc{
  color:var(--bone-dim);
  font-size:15px;
  line-height:1.7;
  margin-bottom:32px;
}
.engine-features{
  list-style:none;
  margin-bottom:40px;
}
.engine-features li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(58,66,80,.3);
  font-size:14px;
  color:var(--bone);
}
.engine-features li::before{
  content:"";
  width:8px;
  height:8px;
  border:1px solid var(--accent);
  margin-top:6px;
  flex-shrink:0;
  transform:rotate(45deg);
}
.engine-link{
  color:var(--accent);
  text-decoration:none;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:12px;
  transition:gap .2s;
}
.engine-link:hover{gap:18px}
.engine-link::after{content:"→"}

/* connector between engines */
.engine-connector{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 32px;
  position:relative;
}
.connector-line{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,var(--blue-bright),var(--ember-bright));
  opacity:.6;
}
.connector-node{
  width:48px;
  height:48px;
  border:1px solid var(--steel);
  background:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.15em;
  color:var(--bone-dim);
  text-transform:uppercase;
}
.connector-node::before{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid var(--ember);
  opacity:.3;
  animation:pulse-ring 3s infinite;
}
@keyframes pulse-ring{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.08)}
}

/* === DOCTRINE / HOW IT WORKS === */
.doctrine{background:var(--black)}
.doctrine-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--steel-dark);
  margin-top:80px;
}
.step{
  background:var(--charcoal);
  padding:48px 32px;
  position:relative;
  min-height:340px;
  display:flex;
  flex-direction:column;
  transition:background .3s;
}
.step:hover{background:var(--iron)}
.step-num{
  font-family:'Oswald',sans-serif;
  font-size:120px;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--steel);
  line-height:1;
  position:absolute;
  top:24px;
  right:24px;
  opacity:.6;
  pointer-events:none;
}
.step:hover .step-num{-webkit-text-stroke-color:var(--ember);opacity:.8}
.step-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--ember);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:24px;
}
.step-title{
  font-family:'Oswald',sans-serif;
  font-size:28px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.05;
  color:var(--bone);
  margin-bottom:20px;
  margin-top:auto;
}
.step-body{
  font-size:14px;
  line-height:1.65;
  color:var(--bone-dim);
}

/* === MODES (BENTO) === */
.modes{background:var(--charcoal);border-top:1px solid var(--steel-dark)}
.modes-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:200px;
  gap:1px;
  background:var(--steel-dark);
  margin-top:80px;
}
.mode{
  background:var(--iron);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:all .3s;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:default;
}
.mode:hover{background:var(--iron-2)}
.mode.large{grid-column:span 3;grid-row:span 2}
.mode.wide{grid-column:span 3}
.mode.tall{grid-column:span 2;grid-row:span 2}
.mode.std{grid-column:span 2}
.mode-name{
  font-family:'Oswald',sans-serif;
  font-size:28px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--bone);
  line-height:1;
  margin-bottom:8px;
}
.mode.large .mode-name{font-size:48px}
.mode-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--ember);
  letter-spacing:.25em;
  text-transform:uppercase;
}
.mode-desc{
  font-size:14px;
  line-height:1.55;
  color:var(--bone-dim);
  max-width:380px;
  margin-top:24px;
}
.mode.large .mode-desc{font-size:16px}
.mode-rune{
  position:absolute;
  top:32px;
  right:32px;
  color:var(--steel-light);
  opacity:.5;
  transition:all .3s;
}
.mode:hover .mode-rune{
  color:var(--blue-bright);
  opacity:1;
  filter:drop-shadow(0 0 8px var(--blue-glow));
}

/* === WAR ROOM ACTION: Release Hell Hounds === */
.war-action{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
  padding:14px 16px 14px 18px;
  background:linear-gradient(90deg,rgba(74,20,16,.45) 0%,rgba(13,15,20,.55) 100%);
  border:1px solid rgba(154,29,29,.4);
  border-left:2px solid var(--ember-bright);
  position:relative;
  cursor:pointer;
  transition:all .3s ease;
  overflow:hidden;
}
.war-action::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 0% 50%,rgba(195,35,35,.18) 0%,transparent 60%);
  opacity:.55;
  pointer-events:none;
  transition:opacity .3s ease;
}
.war-action:hover{
  background:linear-gradient(90deg,rgba(154,29,29,.32) 0%,rgba(13,15,20,.7) 100%);
  border-color:rgba(195,35,35,.7);
  box-shadow:0 0 22px var(--ember-glow-soft),inset 0 0 0 1px rgba(195,35,35,.2);
}
.war-action:hover::before{
  opacity:1;
}
.war-action-icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ember-bright);
  filter:drop-shadow(0 0 5px var(--ember-glow));
  position:relative;
  z-index:1;
}
.war-action-text{
  flex:1;
  min-width:0;
  position:relative;
  z-index:1;
}
.war-action-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.18em;
  color:var(--ember-bright);
  opacity:.78;
  text-transform:uppercase;
  margin-bottom:3px;
}
.war-action-label{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:.05em;
  color:var(--bone);
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(195,35,35,.45);
  line-height:1;
  margin-bottom:5px;
}
.war-action-sub{
  font-size:11px;
  color:var(--bone-mute);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em;
}
.war-action-arrow{
  flex:0 0 auto;
  color:var(--ember-bright);
  font-size:20px;
  font-weight:400;
  opacity:.65;
  transition:transform .3s ease,opacity .3s ease;
  position:relative;
  z-index:1;
  margin-left:6px;
  filter:drop-shadow(0 0 4px var(--ember-glow));
}
.war-action:hover .war-action-arrow{
  opacity:1;
  transform:translateX(4px);
}
.war-action:hover .war-action-icon{
  filter:drop-shadow(0 0 8px var(--ember-glow));
}

/* === DOCTRINE STATEMENT === */
.doctrine-statement{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(122,40,24,.08),transparent 70%),
    var(--black);
  text-align:center;
  padding:180px 40px;
  position:relative;
  border-top:1px solid var(--steel-dark);
  border-bottom:1px solid var(--steel-dark);
}
.doctrine-runes{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:48px;
  color:var(--steel);
}
.doctrine-statement h2{
  font-family:'Oswald',sans-serif;
  font-weight:500;
  font-size:clamp(36px,5vw,68px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--bone);
  max-width:1100px;
  margin:0 auto;
}
.doctrine-statement h2 .strike{color:var(--bone-mute);text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:2px}
.doctrine-statement h2 em{
  color:var(--ember-bright);
  font-style:italic;
  font-weight:600;
  text-shadow:0 0 24px rgba(195,35,35,.65),0 0 60px rgba(195,35,35,.32);
}

/* === MANIFESTO === */
.manifesto{
  background:var(--charcoal);
  padding:160px 40px;
  position:relative;
}
.manifesto-inner{
  max-width:900px;
  margin:0 auto;
}
.manifesto-tag{
  text-align:center;
  margin-bottom:64px;
}
.manifesto p{
  font-family:'Oswald',sans-serif;
  font-weight:300;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--bone);
  margin-bottom:32px;
  text-align:center;
}
.manifesto p.lead{
  color:var(--bone-dim);
  font-weight:300;
}
.manifesto p.accent{
  color:var(--ember-bright);
  font-weight:500;
}
.manifesto p.final{
  font-size:clamp(36px,5vw,64px);
  font-weight:600;
  margin-top:64px;
  color:var(--bone);
}
.manifesto-sep{
  width:60px;
  height:1px;
  background:var(--ember);
  margin:48px auto;
  box-shadow:0 0 8px var(--ember-glow);
}

/* === CTA FINAL === */
.cta-final{
  background:var(--black);
  padding:140px 40px;
  text-align:center;
  border-top:1px solid var(--steel-dark);
  position:relative;
  overflow:hidden;
}
.cta-final::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:80px;
  background:linear-gradient(to bottom,var(--ember-bright),transparent);
  box-shadow:0 0 24px var(--ember-glow),0 0 60px rgba(195,35,35,.32);
  z-index:2;
}
.cta-final h2{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(48px,7vw,120px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--bone);
  margin-bottom:32px;
}
.cta-final p{
  font-size:18px;
  color:var(--bone-dim);
  max-width:520px;
  margin:0 auto 48px;
}
.cta-final .btn-primary{font-size:16px;padding:22px 48px}

/* === FOOTER === */
footer{
  background:var(--iron);
  padding:80px 40px 40px;
  border-top:1px solid var(--steel-dark);
}
.footer-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:64px;
  margin-bottom:64px;
}
.foot-brand{
  font-family:'Oswald',sans-serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--bone);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:14px;
}
.foot-tag{
  color:var(--bone-dim);
  font-size:14px;
  line-height:1.6;
  max-width:380px;
  margin-bottom:32px;
}
.foot-runes{
  display:flex;
  gap:16px;
  color:var(--steel-light);
}
.foot-col h4{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--ember);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:12px}
.foot-col a{
  color:var(--bone-dim);
  text-decoration:none;
  font-size:14px;
  transition:color .2s;
}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{
  max-width:1400px;
  margin:0 auto;
  padding-top:32px;
  border-top:1px solid var(--steel-dark);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--bone-mute);
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* === SECTION BACKGROUND SYSTEM === */
.section-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.section-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(.25) contrast(1.05) brightness(.85);
}
.section-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* top + bottom fade to black so section blends with neighbors */
    linear-gradient(180deg, var(--black) 0%, rgba(5,6,8,.6) 12%, rgba(5,6,8,.45) 50%, rgba(5,6,8,.7) 88%, var(--black) 100%),
    /* edge vignette so center reads but edges fade */
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 30%, rgba(5,6,8,.6) 100%);
}
/* per-section background images (base64 WebP) */
.section-bg.bg-modes::before{background-image:url('images/bg-modes.webp');}
.section-bg.bg-doctrine::before{background-image:url('images/bg-doctrine.webp');filter:grayscale(.4) contrast(1.1) brightness(.6);}
.section-bg.bg-statement::before{background-image:url('images/bg-statement.webp');filter:grayscale(.15) contrast(1.1) brightness(.7);}
.section-bg.bg-manifesto::before{background-image:url('images/bg-manifesto.webp');filter:grayscale(.3) contrast(1.05) brightness(.5);}
.section-bg.bg-ctafinal::before{background-image:url('images/bg-ctafinal.webp');filter:grayscale(.2) contrast(1.05) brightness(.7);}
/* darker overlays for high-text-density sections */
.section-bg.dark-overlay::after{
  background:
    linear-gradient(180deg, var(--black) 0%, rgba(5,6,8,.75) 10%, rgba(5,6,8,.65) 50%, rgba(5,6,8,.8) 90%, var(--black) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,6,8,.3) 0%, rgba(5,6,8,.8) 100%);
}
/* ensure section-inner sits above the bg */
.engines .section-inner,
.doctrine .section-inner,
.modes .section-inner,
.manifesto-inner,
.doctrine-statement > *:not(.section-bg),
.cta-final > *:not(.section-bg){
  position:relative;
  z-index:2;
}
/* glass-card treatment for cards over imagery */
.modes .mode,
.doctrine .step{
  background:rgba(13,15,20,.78);
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
}
.modes .mode:hover,
.doctrine .step:hover{
  background:rgba(22,26,34,.85);
}

/* === RESPONSIVE === */
@media (max-width:1024px){
  .engines-grid{grid-template-columns:1fr;gap:24px}
  .engine-connector{padding:24px 0;flex-direction:row;width:100%}
  .connector-line{top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--blue-bright),var(--ember-bright))}
  .doctrine-grid{grid-template-columns:1fr 1fr}
  .modes-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .mode.large,.mode.wide,.mode.tall,.mode.std{grid-column:span 1;grid-row:span 1}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .hero-strip{grid-template-columns:1fr 1fr;gap:32px}
  .stat:nth-child(3){border-left:none;padding-left:0}
  .nav-links{display:none}
}
@media (max-width:640px){
  .statusbar .left span:nth-child(2),.statusbar .right span:nth-child(1){display:none}
  nav{padding:0 20px}
  .section-pad{padding:80px 20px}
  .hero{padding:120px 20px 60px}
  .doctrine-grid,.modes-grid,.footer-grid{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:1fr 1fr}
  .engine-card{padding:32px 24px}
}