@import url('fonts.css');

/* Incinerador 3.0 — Anton for anything that shouts, Manrope for anything that
   explains. One orange, one near-black, and hairlines of that orange at low
   alpha holding the whole thing together. */

:root {
  --bg: #0B0908;
  --surface: #120E0B;
  --accent: #FF7A1A;
  --accent-hi: #FFA35C;
  --text: #EDE7E0;
  --muted: #B8AFA5;
  --dim: #8A8178;
  --line: rgba(255, 122, 26, 0.18);
  --line-soft: rgba(255, 122, 26, 0.12);
  --radius: 16px;
  --radius-lg: 20px;
  --gutter: 5vw;
  --wrap: 1280px;
  --nav-h: 68px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is not optional here: every image carries width/height attributes
   (they reserve layout space and stop the page jumping as photos load), and
   without this the attribute height wins over the scaled width and the photo
   renders stretched. */
img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

::selection { background: var(--accent); color: var(--bg); }

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

h1, h2, h3 {
  font-family: Anton, Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Layout ----------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 9vw, 90px); }

.section--tight { padding-block: clamp(36px, 5vw, 56px); }

.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Two consecutive surface bands would otherwise show a double hairline. */
.section--surface + .section--surface { border-top: 0; }

.section__head {
  text-align: center;
  margin-bottom: clamp(36px, 6vw, 56px);
}

.section__head h2,
.h-section { font-size: clamp(30px, 3.4vw, 46px); }

.h-section--left { margin-bottom: 36px; }

.h-split { font-size: clamp(28px, 3vw, 42px); margin-bottom: 20px; }

.kicker {
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.lede {
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  margin: 0;
  max-width: 54ch;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 17px;
  line-height: 1.2;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--accent-hi); color: var(--bg); }
.btn:active { transform: translateY(1px); }

.btn--sm { padding: 10px 22px; font-size: 14px; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--lg {
  padding: 18px 44px;
  font-size: 19px;
  box-shadow: 0 12px 40px rgba(255, 122, 26, 0.35);
}

.note { color: var(--dim); font-size: 14px; }

/* Nav -------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 9, 8, 0.88);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { color: inherit; }

/* Fixed square box with contain inside it: the badge keeps its outer ring and
   its @esneider91 tab whatever the source file's proportions are. */
.brand__badge { width: 44px; height: 44px; flex: none; }
.brand__badge img { width: 100%; height: 100%; object-fit: contain; }

.brand__name {
  font-family: Anton, Impact, sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--accent); }

/* Hero ------------------------------------------------------------------- */

/* The section runs the full width of the window so the fire can too; the
   content is centred inside .hero__inner. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Fill what is left of the screen under the sticky nav. svh, not vh: on a
     phone 100vh measures the viewport with the URL bar retracted, so the hero
     would overflow the screen on load and the first thing you'd see is a
     scrollbar's worth of nothing. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  /* The glow behind the portrait is inset by -40px, which on a 360px screen
     reaches past the 5vw gutter. Clip it here rather than leaning on
     body{overflow-x:hidden}, which would make the sticky nav's behaviour
     depend on an overflow rule several levels up. */
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(40px, 7vw, 80px);
}

/* Fire fills the hero edge to edge. Two scrims sit over it: one vertical, so the
   top meets the nav in near-black and the embers stay strongest at the floor,
   and one horizontal, because the headline sits on the left and that is exactly
   where the brightest part of the texture lands. */
.hero__fire {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__fire img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.hero__fire::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 9, 8, 0.9) 0%, rgba(11, 9, 8, 0.42) 32%, rgba(11, 9, 8, 0.18) 70%, rgba(11, 9, 8, 0.5) 100%),
    linear-gradient(90deg, rgba(11, 9, 8, 0.74) 0%, rgba(11, 9, 8, 0.38) 50%, rgba(11, 9, 8, 0.1) 100%);
}

.hero__copy { display: flex; flex-direction: column; gap: 24px; }

/* Over the flames the muted greys lose their contrast, so the hero lifts the
   secondary button's outline and its fine print a step. */
.hero__copy .note { margin-top: -8px; color: var(--muted); }
.hero__actions .btn--ghost {
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.55);
  background: rgba(11, 9, 8, 0.55);
  backdrop-filter: blur(2px);
}
.hero__actions .btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: rgba(11, 9, 8, 0.75);
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.02;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__media { position: relative; }
.hero__media::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 60% 40%, rgba(255, 122, 26, 0.22), transparent 65%);
  pointer-events: none;
}
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: var(--shadow);
}

/* Stats ------------------------------------------------------------------ */

/* 2x2 on phones — four full-width rows read as a list instead of a spec panel.
   Hairlines sit between cells so the block reads as one unit. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 4px;
}

.stat {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.stat__n {
  display: block;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(28px, 6vw, 34px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--dim);
}

/* Cards ------------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }

/* Four cards under auto-fit land as 3 + 1 on a wide screen and the orphan reads
   like a mistake. Two columns keeps them as a balanced 2x2. */
@media (min-width: 900px) {
  .grid--pairs { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The gap property already spaces these; leaving the paragraphs' default margin
   on top of it opens a hole between every heading and its body copy. */
.card p, .feature p, .step p, .proof p { margin: 0; }

.card__t {
  color: var(--accent);
  font-family: Anton, Impact, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.card__d { color: var(--muted); font-size: 15px; line-height: 1.55; }

.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 122, 26, 0.05), transparent);
}

.feature__n {
  font-family: Anton, Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
  color: rgba(255, 122, 26, 0.45);
}

.feature__t { font-weight: 800; font-size: 19px; }

.statement {
  margin: clamp(28px, 5vw, 40px) 0 0;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  max-width: 60ch;
}
.statement strong { color: var(--accent); font-weight: 800; }

/* Photo strip ------------------------------------------------------------ */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 9vw, 90px);
}

.strip img {
  width: 100%;
  height: clamp(280px, 38vw, 380px);
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius);
}

/* Split (manifesto, steps) ----------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.split--top { align-items: start; }

.split__media {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.prose { display: flex; flex-direction: column; gap: 16px; }
.prose h2 { font-size: clamp(28px, 3vw, 42px); }
.prose p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.prose .closing {
  color: var(--text);
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 8px;
}
.prose .closing em { font-style: normal; color: var(--accent); }

/* Video ------------------------------------------------------------------ */

.video-block {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* The reel is a vertical phone recording — a 16/9 frame would letterbox it into
   two black slabs, so the player keeps the source shape and is width-capped. */
.video-block video {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 122, 26, 0.25);
  box-shadow: var(--shadow);
  background: #000;
}

/* Before / after --------------------------------------------------------- */

.ba {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.ba__side { position: relative; min-width: 0; }

.ba__side img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.ba__tag {
  position: absolute;
  top: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

.ba__tag--before { left: 10px; background: rgba(11, 9, 8, 0.85); color: var(--muted); }
.ba__tag--after { right: 10px; background: var(--accent); color: var(--bg); }

.ba__caption { padding: 14px 18px; color: var(--dim); font-size: 14px; }

/* Mid-page CTA ----------------------------------------------------------- */

.band-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-top: clamp(36px, 6vw, 56px);
}

/* Steps ------------------------------------------------------------------ */

.steps { display: flex; flex-direction: column; }

.step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }

.step__n {
  font-family: Anton, Impact, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--accent);
  min-width: 44px;
}

.step__t { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.step__d { color: var(--muted); font-size: 15px; line-height: 1.55; }

.proof { display: flex; flex-direction: column; gap: 16px; }
.proof figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.proof figcaption { color: var(--dim); font-size: 14px; text-align: center; }

/* Both shots are portrait, and stacked at full height the column runs far past
   the four steps beside it. A common 4:5 crop keeps the two columns in step. */
.proof img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }

/* FAQ -------------------------------------------------------------------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq h2 { font-size: clamp(30px, 3.4vw, 46px); text-align: center; margin-bottom: 40px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  padding: 20px 24px;
}

.faq summary {
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  flex: none;
}
.faq details[open] summary::after { content: '–'; }

.faq p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 14px 0 0; }

/* Final CTA -------------------------------------------------------------- */

.cta {
  position: relative;
  padding: clamp(48px, 9vw, 110px) var(--gutter);
  text-align: center;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border-top: 1px solid var(--line);
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 122, 26, 0.18), transparent 60%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.cta h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; }
.cta h2 em { font-style: normal; color: var(--accent); }
.cta .lede { text-align: center; max-width: 52ch; }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  /* Extra room at the bottom so the fixed WhatsApp button never sits on top of
     the credit line. */
  padding: 32px var(--gutter) 96px;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
}

.site-footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}
.site-footer__links a { color: var(--muted); font-weight: 600; }
.site-footer__links a:hover { color: var(--accent); }

.legal {
  max-width: var(--wrap);
  margin: 24px auto 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.legal--disclaimer { max-width: 760px; margin-inline: 0; }

.credit a { color: var(--muted); }

/* WhatsApp float --------------------------------------------------------- */

.wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: background 0.18s ease;
}
.wa-float:hover { background: #2FE476; }
.wa-float svg { width: 30px; height: 30px; }

/* Error page ------------------------------------------------------------- */

.err {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 60px var(--gutter);
}
.err h1 { font-size: clamp(56px, 14vw, 120px); line-height: 1; color: var(--accent); }
.err h2 { font-size: clamp(22px, 3.4vw, 32px); }

/* Breakpoints ------------------------------------------------------------ */

@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 20px 22px; }
  .stat__n { font-size: 34px; }
}

/* Below the hero's two-column breakpoint the portrait sits under the copy, and
   at its native 1:1 it pushes the buttons off a phone screen. A 4:3 crop keeps
   the whole hero inside the first screenful. */
@media (max-width: 899px) {
  .hero__inner { gap: 20px; }
  .hero__copy { gap: 18px; }
  /* One column, so the copy no longer sits only on the left and the sideways
     scrim would just dim the right edge for nothing. */
  .hero__fire::after {
    background: linear-gradient(180deg, rgba(11, 9, 8, 0.94) 0%, rgba(11, 9, 8, 0.68) 30%, rgba(11, 9, 8, 0.5) 70%, rgba(11, 9, 8, 0.72) 100%);
  }
  .hero__media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 16%; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 420px) {
  .nav { padding-inline: 16px; }
  .brand__badge { width: 38px; height: 38px; }
  .brand__name { font-size: 17px; }
  .btn { padding: 14px 24px; font-size: 15px; }
  .btn--sm { padding: 9px 16px; font-size: 13px; }
  .card, .feature { padding: 22px; }
  .faq details { padding: 16px 18px; }
  .step { gap: 14px; }
  .step__n { min-width: 34px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}