/* ═══════════════ POSTFORGE — "The Content Forge" ═══════════════
   Obsidian industrial surfaces · molten ember gradients · sparks.
   Space Grotesk (structure) + Instrument Serif italic (molten accents). */

* { box-sizing: border-box; margin: 0; padding: 0; }

@property --flame-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --obsidian: #0a0908;
  --coal: #141110;
  --iron: #221d1a;
  --ash: #8a817c;
  --bone: #f2efec;
  --ember: #ff6b35;
  --molten: #ff9e42;
  --white-hot: #ffd9a0;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-molten: 'Instrument Serif', Georgia, serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: default;
}
::selection { background: var(--ember); color: var(--obsidian); }

em { font-family: var(--font-molten); font-style: italic; font-weight: 400; }
h1 em, h2 em {
  background: linear-gradient(120deg, var(--ember), var(--molten) 50%, var(--white-hot));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
code {
  background: var(--iron); padding: 2px 8px; border-radius: 6px;
  color: var(--molten); font-size: .9em;
}

/* ── Ember canvas + cursor glow + heat bar ─────────────────────── */
#embers {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.cursor-glow {
  position: fixed; width: 340px; height: 340px; border-radius: 50%;
  pointer-events: none; z-index: 1; opacity: .5;
  background: radial-gradient(circle, rgba(255,107,53,.14), transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity .4s;
}
.heat-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--heat, 0));
  background: linear-gradient(90deg, #6b1f00, var(--ember), var(--white-hot));
  z-index: 100;
  box-shadow: 0 0 12px rgba(255,107,53,.7);
}

/* ── Nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 18px clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--obsidian) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,158,66,.08);
}
.brand {
  font-weight: 700; letter-spacing: .08em; font-size: 19px;
  color: var(--bone); text-decoration: none;
}
.brand em, footer em { color: var(--ember); }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a {
  color: var(--ash); text-decoration: none; font-size: 14px;
  transition: color .25s;
}
.nav nav a:hover { color: var(--white-hot); }

/* ── Buttons: molten conic ring via @property animation ────────── */
.btn-forge {
  --flame-angle: 0deg;
  position: relative; display: inline-block;
  padding: 13px 26px; border: none; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--obsidian); text-decoration: none; cursor: pointer;
  background:
    linear-gradient(var(--coal), var(--coal)) padding-box,
    conic-gradient(from var(--flame-angle), var(--ember), var(--white-hot), var(--molten), var(--ember)) border-box;
  background: linear-gradient(120deg, var(--ember), var(--molten));
  box-shadow: 0 0 24px rgba(255,107,53,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: box-shadow .3s, transform .15s;
  will-change: transform;
}
.btn-forge:hover { box-shadow: 0 0 44px rgba(255,107,53,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-forge.big { padding: 18px 38px; font-size: 17px; }

/* ── Hero ──────────────────────────────────────────────────────── */
main { position: relative; z-index: 2; }
.hero {
  min-height: calc(100vh - 70px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 20px 80px; gap: 26px;
}
.kicker {
  letter-spacing: .32em; font-size: 12px; color: var(--ember); font-weight: 500;
}
h1 {
  font-size: clamp(52px, 9.5vw, 128px); line-height: .98; font-weight: 700;
  letter-spacing: -.02em;
}
.lede { max-width: 620px; color: var(--ash); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-sub { color: var(--ash); font-size: 13px; }
.cta-sub strong { color: var(--white-hot); }

/* split-text chars */
.split .char {
  display: inline-block;
  transform: translateY(1.1em) rotate(6deg); opacity: 0;
  transition: transform .7s cubic-bezier(.2,.9,.25,1), opacity .5s;
  transition-delay: calc(var(--ci) * 28ms);
}
.split.forged .char { transform: none; opacity: 1; }

/* forge strip */
.forge-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 26px; padding: 18px 26px; border-radius: 16px;
  background: color-mix(in srgb, var(--coal) 75%, transparent);
  border: 1px solid rgba(255,158,66,.14);
}
.ingot { color: var(--white-hot); font-size: 15px; }
.arrow { color: var(--ember); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(1.06); } }
.cast { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  background: var(--iron); border: 1px solid rgba(255,158,66,.2);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--bone);
}

/* ── Marquee ───────────────────────────────────────────────────── */
.marquee {
  overflow: hidden; border-block: 1px solid rgba(255,158,66,.12);
  padding: 14px 0; background: var(--coal);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 30s linear infinite;
  color: var(--ash); letter-spacing: .22em; font-size: 13px; white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 80px); max-width: 1200px; margin: 0 auto; }
h2 { font-size: clamp(34px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -.015em; margin-bottom: 48px; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.25,1); }
.reveal.lit { opacity: 1; transform: none; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.step, .feature, .plan {
  background: linear-gradient(160deg, var(--coal), var(--iron));
  border: 1px solid rgba(255,158,66,.12); border-radius: 20px; padding: 30px;
  transform-style: preserve-3d; will-change: transform;
}
.step-num {
  font-family: var(--font-molten); font-size: 44px; color: var(--ember);
  margin-bottom: 14px;
}
.step h3, .feature h3 { margin-bottom: 10px; font-size: 19px; }
.step p, .feature p { color: var(--ash); line-height: 1.6; font-size: 15px; }

/* features */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.feature { padding: 24px; }

/* compare */
.compare-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid rgba(255,158,66,.14); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--coal); }
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid rgba(255,158,66,.08); font-size: 15px; }
.compare thead th { color: var(--ash); font-weight: 500; letter-spacing: .06em; font-size: 13px; }
.compare td:first-child { color: var(--ash); }
.compare .pf { color: var(--white-hot); font-weight: 700; background: rgba(255,107,53,.06); }
.fine { color: var(--ash); font-size: 12px; margin-top: 14px; }

/* pricing */
.toggle { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; color: var(--ash); font-size: 15px; }
.toggle .save { color: var(--ember); font-size: 13px; margin-left: 6px; }
#bill-toggle {
  width: 56px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,158,66,.3);
  background: var(--iron); cursor: pointer; position: relative;
}
#bill-toggle span {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(120deg, var(--ember), var(--molten));
  transition: left .25s cubic-bezier(.3,1.4,.5,1);
}
#bill-toggle[aria-checked="true"] span { left: 29px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; }
.plan h3 { font-size: 22px; }
.plan ul { list-style: none; display: grid; gap: 10px; color: var(--ash); font-size: 15px; }
.plan ul li::before { content: '⟡ '; color: var(--ember); }
.price { display: flex; align-items: baseline; gap: 2px; }
.price .cur { color: var(--ash); font-size: 22px; }
.price .amt { font-size: 58px; font-weight: 700; letter-spacing: -.03em; }
.price .per { color: var(--ash); }
.plan .btn-forge { text-align: center; margin-top: 8px; }

.plan.featured { border-color: transparent; }
/* Cover layer: sits between the flame ring (z -2) and content, so the ring
   only peeks out 2px around the edges. (The card's own background paints
   below negative-z children inside its stacking context.) */
.plan.featured::before {
  content: ''; position: absolute; inset: 0; border-radius: 20px; z-index: -1;
  background: linear-gradient(160deg, var(--coal), var(--iron));
}
.flame-ring {
  position: absolute; inset: -2px; border-radius: 22px; z-index: -2;
  background: conic-gradient(from var(--flame-angle), var(--ember), var(--white-hot), var(--molten), #6b1f00, var(--ember));
  animation: flame-spin 5s linear infinite;
  filter: blur(.5px);
}
@keyframes flame-spin { to { --flame-angle: 360deg; } }
.plan .tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--ember), var(--molten));
  color: var(--obsidian); font-weight: 700; font-size: 11px; letter-spacing: .18em;
  padding: 5px 14px; border-radius: 999px;
}

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details {
  background: var(--coal); border: 1px solid rgba(255,158,66,.12);
  border-radius: 14px; padding: 20px 24px;
}
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; }
.faq summary::after { content: '+'; float: right; color: var(--ember); font-size: 20px; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ash); margin-top: 12px; line-height: 1.6; font-size: 15px; }

/* final */
.final { text-align: center; }
.final .lede { margin: 0 auto 32px; }

/* footer */
footer {
  border-top: 1px solid rgba(255,158,66,.1);
  padding: 40px clamp(20px, 6vw, 80px);
  display: flex; flex-direction: column; gap: 14px; color: var(--ash); font-size: 14px;
}
footer nav { display: flex; gap: 20px; }
footer a { color: var(--ash); text-decoration: none; }
footer a:hover { color: var(--white-hot); }

/* ── Modal / popup ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,4,3,.8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  position: relative; max-width: 440px; width: 100%;
  background: linear-gradient(160deg, var(--coal), var(--iron));
  border: 1px solid rgba(255,158,66,.25); border-radius: 22px;
  padding: 38px 32px; text-align: center;
  box-shadow: 0 0 80px rgba(255,107,53,.25);
  animation: modal-in .35s cubic-bezier(.2,1.2,.3,1);
}
@keyframes modal-in { from { transform: translateY(26px) scale(.96); opacity: 0; } }
.modal-flame { font-size: 40px; margin-bottom: 10px; }
.modal h3 { font-size: 24px; margin-bottom: 12px; }
.modal p { color: var(--ash); font-size: 15px; line-height: 1.6; }
.modal-x {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--ash); font-size: 16px; cursor: pointer;
}
.capture { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.capture input {
  flex: 1; min-width: 180px; background: var(--obsidian);
  border: 1px solid rgba(255,158,66,.25); border-radius: 999px;
  padding: 13px 20px; color: var(--bone); font-family: inherit; font-size: 15px;
}
.capture input:focus { outline: none; border-color: var(--ember); }

/* checkout page bits */
.co-wrap { max-width: 1000px; margin: 0 auto; padding: 60px 20px; }
.co-head { text-align: center; margin-bottom: 44px; }
.trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--ash); font-size: 13px; margin-top: 40px; }

@media (max-width: 720px) {
  .nav nav { display: none; }
  .forge-strip { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .split .char { transition: none; transform: none; opacity: 1; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .marquee-track, .flame-ring, .arrow { animation: none; }
}