:root{
  --orange:#F18A1F;
  --orange-deep:#E07410;
  --ember:#FF4500;
  --black:#0A0A0A;
  --char:#181412;
  --char-2:#221B17;
  --cream:#FFF6E8;
  --paper:#F7EFE1;
  --line:rgba(255,246,232,0.12);
  --line-strong:rgba(255,246,232,0.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--cream);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ===== Typography ===== */
.display{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.01em;line-height:.95;font-weight:400}
.oswald{font-family:'Oswald',sans-serif;letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.eyebrow{
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:600;
}

/* ===== Layout ===== */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
section{padding:120px 0;position:relative}
.divider-flame{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--orange) 30%,var(--orange) 70%,transparent);
  opacity:.6;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  font-size:14px;
  padding:16px 28px;
  border-radius:2px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#0A0A0A}
.btn-primary:hover{background:#FFA63D;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--cream)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn .arrow{transition:transform .15s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ===== Brand ===== */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;flex:0 0 38px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text .name{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px}
.brand-text .sub{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:9px;color:var(--orange);margin-top:3px}

/* ===== Section utilities ===== */
.section-dark{background:var(--black)}
.section-char{background:var(--char)}
.section-cream{background:var(--paper);color:#1A130D}
.section-cream .eyebrow{color:var(--orange-deep)}
.section-cream .display{color:#1A130D}
.section-head{max-width:780px;margin-bottom:64px}
.section-head h2{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:clamp(40px,5.5vw,68px);
  line-height:1;
  margin-top:14px;
}
.section-head h2 .accent{color:var(--orange)}
.section-head p{
  margin-top:18px;
  font-size:18px;
  line-height:1.6;
  color:rgba(255,246,232,.78);
  max-width:680px;
}
.section-cream .section-head p{color:#3D2C20}

/* ===== Ember floaters ===== */
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ember-dot{position:absolute;width:3px;height:3px;background:var(--orange);border-radius:50%;opacity:0;animation:rise 6s linear infinite;box-shadow:0 0 8px rgba(255,140,40,.9), 0 0 18px rgba(255,80,0,.5)}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:.4}
  100%{transform:translateY(-120vh) translateX(40px);opacity:0}
}