/* ============================================================================
   FORGE — landing page specific styles. Layered on top of styles.css
   ============================================================================ */

.lp {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.lp-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Sticky top nav ───────────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(15,10,5,0.92) 0%, rgba(15,10,5,0.75) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 164, 68, 0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.lp-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 24px;
}
.lp-nav .brand {
  display: flex; align-items: center; gap: 12px;
}
.lp-nav .brand .mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 65%, #4a1c0a 0%, #0f0805 70%);
  border: 1px solid #5a3010;
  box-shadow: inset 0 0 12px rgba(255, 106, 31, 0.55), 0 0 10px rgba(255,106,31,0.20);
}
.lp-nav .brand .name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #f6e4c8;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 138, 61, 0.25);
}
.lp-nav .links {
  margin-left: auto;
  display: flex; align-items: center; gap: 24px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lp-nav .links a {
  color: var(--bone-3);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border 160ms ease;
}
.lp-nav .links a:hover { color: var(--brass-1); border-bottom-color: var(--brass-1); }
.lp-nav .cta-mini {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 16px;
  color: #fff5e8;
  background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%);
  border: 1px solid #6a2a08;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.5), 0 0 8px var(--ember-glow);
}
.lp-nav .cta-mini:hover {
  background: linear-gradient(180deg, #ffba5e 0%, #ff8a3d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.6), 0 0 16px var(--ember-1);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lp-hero {
  padding: 90px 0 100px;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
.lp-hero::before {
  /* ember bloom under the hero */
  content: "";
  position: absolute; left: 50%; bottom: -40px;
  width: 80%; height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 106, 31, 0.18), transparent 60%);
  pointer-events: none;
}
.lp-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-2);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.lp-eyebrow::before, .lp-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-2));
}
.lp-eyebrow::after { background: linear-gradient(90deg, var(--brass-2), transparent); }

.lp-title {
  font-family: var(--f-display);
  font-size: 92px;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.04em;
  color: #f6e4c8;
  margin: 0 0 28px;
  text-shadow:
    0 1px 0 #000,
    0 2px 0 #000,
    0 0 24px rgba(255, 138, 61, 0.25);
}
.lp-title em {
  font-style: normal;
  background: linear-gradient(180deg, #ffba5e 0%, #ff6a1f 70%, #8a3010 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.lp-subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--bone-2);
  margin: 0 0 38px;
  max-width: 540px;
  letter-spacing: 0.005em;
}
.lp-subtitle strong {
  color: var(--brass-1);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lp-cta-row {
  display: flex; align-items: center; gap: 18px;
  margin-top: 8px;
}
.lp-cta-primary {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 16px 28px;
  color: #fff5e8;
  background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%);
  border: 1px solid #2a1a08;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -2px 0 rgba(0,0,0,0.30),
    0 4px 14px rgba(0,0,0,0.5),
    0 0 16px var(--ember-glow);
  position: relative;
  transition: transform 120ms ease, box-shadow 200ms ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
}
.lp-cta-primary::before, .lp-cta-primary::after {
  content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  background: #ffba5e;
  box-shadow: 0 0 6px #ffba5e;
}
.lp-cta-primary::before { left: -3px; }
.lp-cta-primary::after  { right: -3px; }
.lp-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -2px 0 rgba(0,0,0,0.30),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 28px var(--ember-1);
}
.lp-cta-secondary {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 22px;
  color: var(--bone-2);
  background: transparent;
  border: 1px solid var(--steel-2);
  text-decoration: none;
}
.lp-cta-secondary:hover { color: var(--bone-1); border-color: var(--brass-2); }

/* ── Hero right: floating anvil + mini graph demo ────────────────────── */
.lp-hero-art {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.lp-hero-art::before {
  /* glowing forge ring behind the demo */
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 106, 31, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.lp-hero-art::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 164, 68, 0.18);
  animation: gentle-rotate 60s linear infinite;
}
.demo-svg {
  position: relative;
  width: 460px; height: 460px;
  display: block;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
section.lp-section { padding: 80px 0; position: relative; scroll-margin-top: 80px; }
.lp-section + .lp-section { border-top: 1px solid rgba(212, 164, 68, 0.08); }
.lp-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.lp-section-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-1);
  margin-bottom: 14px;
}
.lp-section-title {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #f6e4c8;
  margin: 0 0 14px;
  text-shadow: 0 1px 0 #000;
}
.lp-section-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bone-3);
  max-width: 620px;
  margin: 0 auto;
}

/* What it does — three carved tablets */
.lp-tablets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-tablet {
  position: relative;
  padding: 38px 28px 32px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0 0.12  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    linear-gradient(180deg, rgba(40,30,18,0.45) 0%, rgba(15,12,8,0.85) 100%);
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(70, 50, 28, 0.7);
  border-top: 2px solid var(--brass-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.5);
}
.lp-tablet::before, .lp-tablet::after {
  /* brass corner ornaments top-left + top-right */
  content: "";
  position: absolute; top: -1px;
  width: 8px; height: 8px;
  border: 2px solid var(--brass-2);
}
.lp-tablet::before { left: -1px; border-right: none; border-bottom: none; }
.lp-tablet::after  { right: -1px; border-left: none; border-bottom: none; }
.lp-tablet-icon {
  width: 56px; height: 56px;
  margin-bottom: 22px;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 164, 68, 0.30);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 138, 61, 0.18) 0%, rgba(0,0,0,0) 70%),
    #0a0805;
  color: var(--brass-1);
  position: relative;
}
.lp-tablet-icon::before, .lp-tablet-icon::after {
  /* corner ornaments */
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border: 1px solid var(--brass-2);
}
.lp-tablet-icon::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.lp-tablet-icon::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.lp-tablet-num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 600;
  color: rgba(212, 164, 68, 0.20);
  letter-spacing: 0.02em;
  line-height: 1;
}
.lp-tablet h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  color: #fff5e8;
}
.lp-tablet p {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone-2);
  margin: 0;
}
.lp-tablet p em {
  color: var(--brass-1);
  font-style: italic;
}

/* How to use — alternating numbered rows */
.lp-steps { display: flex; flex-direction: column; gap: 60px; }
.lp-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lp-step:nth-child(even) .lp-step-text { order: 2; }
.lp-step:nth-child(even) .lp-step-art  { order: 1; }
.lp-step-num {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-1);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--brass-2);
}
.lp-step h3 {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  color: #fff5e8;
  line-height: 1.05;
}
.lp-step p {
  font-family: var(--f-serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--bone-2);
  margin: 0 0 14px;
  max-width: 460px;
}
.lp-step .quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--bone-3);
  border-left: 2px solid var(--brass-2);
  padding-left: 14px;
  margin: 18px 0 0;
  max-width: 460px;
}
.lp-step-art {
  position: relative;
  min-height: 320px;
  display: grid; place-items: center;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    linear-gradient(180deg, rgba(20,14,10,0.6) 0%, rgba(8,6,4,0.85) 100%);
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(60, 42, 22, 0.6);
  padding: 32px;
}

/* Tier system explainer */
.lp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lp-tier {
  padding: 30px 26px;
  background: linear-gradient(180deg, rgba(20,14,10,0.5) 0%, rgba(8,6,4,0.8) 100%);
  border: 1px solid rgba(60, 42, 22, 0.7);
  border-left: 3px solid var(--lp-tier-color, var(--brass-2));
  position: relative;
}
.lp-tier-1 { --lp-tier-color: var(--brass-1); }
.lp-tier-2 { --lp-tier-color: var(--brass-2); }
.lp-tier-3 { --lp-tier-color: var(--brass-3); }

.lp-tier-coin {
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-bottom: 18px;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.6);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--coal-0);
  letter-spacing: 0.02em;
}
.lp-tier-1 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #ffd09a, #ff8a3d 50%, #6a2a08); box-shadow: 0 0 14px var(--tier1-glow), inset 0 1px 0 rgba(255,255,255,0.25); }
.lp-tier-2 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #b8d4f0, #5b9bd8 50%, #1c3a5a); box-shadow: 0 0 8px var(--tier2-glow), inset 0 1px 0 rgba(255,255,255,0.22); }
.lp-tier-3 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #cac4b6, #9a9285 50%, #3a3528); box-shadow: 0 0 4px var(--tier3-glow), inset 0 1px 0 rgba(255,255,255,0.18); }

.lp-tier-label {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lp-tier-color);
  margin-bottom: 6px;
}
.lp-tier h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 14px;
  color: #fff5e8;
  letter-spacing: 0.01em;
}
.lp-tier p {
  font-family: var(--f-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bone-2);
  margin: 0 0 14px;
}
.lp-tier .example {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--bone-4);
  padding: 8px 10px;
  background: var(--coal-0);
  border-left: 2px solid var(--lp-tier-color);
}

/* Scraper / live data section */
.lp-scraper {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.lp-scraper p { font-family: var(--f-serif); font-size: 16px; line-height: 1.6; color: var(--bone-2); max-width: 520px; }
.lp-scraper p em { font-style: italic; color: var(--brass-2); }
.lp-pipeline {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px;
  background: var(--coal-0);
  border: 1px solid rgba(60, 42, 22, 0.6);
  font-family: var(--f-mono);
  font-size: 11.5px;
  position: relative;
}
.lp-pipeline::before {
  content: "scraper.log";
  position: absolute; top: -10px; left: 16px;
  background: var(--coal-0);
  padding: 0 8px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brass-2);
}
.lp-pipeline-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(60,42,22,0.4);
  color: var(--bone-2);
}
.lp-pipeline-step:last-child { border-bottom: none; }
.lp-pipeline-step .arrow { color: var(--ember-2); }
.lp-pipeline-step .src { color: var(--brass-2); }
.lp-pipeline-step .tier {
  font-family: var(--f-display);
  font-size: 9px;
  padding: 1px 5px;
  letter-spacing: 0.12em;
  color: var(--coal-0);
  text-transform: uppercase;
  font-weight: 600;
}
.lp-pipeline-step .tier.t1 { background: var(--brass-1); }
.lp-pipeline-step .tier.t2 { background: var(--brass-2); color: #fff; }
.lp-pipeline-step .tier.t3 { background: var(--brass-3); }

/* Final CTA strip */
.lp-finale {
  padding: 120px 0;
  text-align: center;
  position: relative;
}
.lp-finale::before {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 200px;
  background: radial-gradient(ellipse, rgba(255, 106, 31, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.lp-finale-title {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  color: #f6e4c8;
  position: relative;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 138, 61, 0.30);
}
.lp-finale-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--bone-3);
  margin: 0 0 38px;
  position: relative;
}
.lp-finale .lp-cta-primary { font-size: 14px; padding: 18px 36px; }

.lp-foot {
  border-top: 1px solid rgba(212, 164, 68, 0.10);
  padding: 28px 0 40px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--bone-4);
}
.lp-foot a { color: var(--bone-3); text-decoration: none; border-bottom: 1px dotted var(--bone-4); }

/* ── Hero mini demo: 5 nodes, cyclic state animation ─────────────────── */
.demo-svg .lp-node { cursor: default; }
.demo-svg .lp-aura          { fill: none; stroke: none; opacity: 0; }
.demo-svg .lp-frame-outer   { fill: none; stroke: #2a2017; stroke-width: 2.2; }
.demo-svg .lp-plate         { fill: var(--coal-2); stroke: rgba(0,0,0,0.5); stroke-width: 1.5; }
.demo-svg .lp-gem           { fill: var(--type-color, #5fb3d4); opacity: 0.18; }
.demo-svg .lp-frame         { fill: none; stroke: #6b5026; stroke-width: 1.2; }
.demo-svg .lp-stud          { fill: #8a6a32; stroke: #2a2017; stroke-width: 0.6; }
.demo-svg .lp-icon          { transition: stroke 240ms ease, opacity 240ms ease; opacity: 0.9; }
.demo-svg .lp-ribbon        { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); stroke-width: 0.7; }
.demo-svg .lp-name          {
  fill: var(--bone-1);
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.demo-svg .lp-lock          { opacity: 0; transition: opacity 320ms ease; }
.demo-svg .lp-chip          { opacity: 0; transition: opacity 320ms ease; }

/* type-color slots per node */
.demo-svg .lp-center  { --type-color: var(--t-technique); }
.demo-svg .lp-outer-1 { --type-color: var(--t-technique); }
.demo-svg .lp-outer-2 { --type-color: var(--t-quantization); }
.demo-svg .lp-outer-3 { --type-color: var(--t-technique); }
.demo-svg .lp-outer-4 { --type-color: var(--t-architecture); }
.demo-svg .lp-outer-5 { --type-color: var(--t-technique); }

/* edges: base curves */
.demo-svg .lp-edge { fill: none; stroke-linecap: round; }
.demo-svg .lp-edge-breaks       { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; }
.demo-svg .lp-edge-requires,
.demo-svg .lp-edge-requires-2   { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; }
.demo-svg .lp-edge-compatible,
.demo-svg .lp-edge-compatible-2 { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; }

/* center → selected (red-hot) */
.demo-svg .lp-center .lp-plate    { animation: lp-plate-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-frame    { animation: lp-frame-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-frame-outer { animation: lp-frame-outer-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-aura     { animation: lp-aura-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-stud     { animation: lp-stud-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-gem      { animation: lp-gem-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-icon     { animation: lp-icon-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-name     { animation: lp-name-select 8s ease-in-out infinite; }
.demo-svg .lp-center .lp-ribbon   { animation: lp-ribbon-select 8s ease-in-out infinite; }

@keyframes lp-plate-select {
  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; }
  18%, 86% { fill: url(#lp-molten); filter: url(#lp-ember); }
}
@keyframes lp-frame-select {
  0%, 12%, 92%, 100% { stroke: #6b5026; stroke-width: 1.2; }
  18%, 86% { stroke: #d4a049; stroke-width: 1.5; }
}
@keyframes lp-frame-outer-select {
  0%, 12%, 92%, 100% { stroke: #2a2017; }
  18%, 86% { stroke: #3a1a08; }
}
@keyframes lp-aura-select {
  0%, 12%, 92%, 100% { opacity: 0; stroke: var(--ember-1); stroke-width: 1.5; fill: none; }
  18% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; }
  50% { opacity: 0.4; stroke: var(--ember-1); stroke-width: 4; fill: none; }
  86% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; }
}
@keyframes lp-stud-select {
  0%, 12%, 92%, 100% { fill: #8a6a32; stroke: #2a2017; }
  18%, 86% { fill: #d4a049; stroke: #3a1a08; }
}
@keyframes lp-gem-select {
  0%, 12%, 92%, 100% { fill: var(--type-color); opacity: 0.18; }
  18%, 86% { fill: var(--ember-1); opacity: 0.55; }
}
@keyframes lp-icon-select {
  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
  18%, 86% { stroke: #fff5e8; opacity: 1; }
}
@keyframes lp-name-select {
  0%, 12%, 92%, 100% { fill: var(--bone-1); }
  18%, 86% { fill: #fff5e8; }
}
@keyframes lp-ribbon-select {
  0%, 12%, 92%, 100% { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); }
  18%, 86% { fill: rgba(40,15,5,0.92); stroke: #d4a049; }
}

/* outer-1: BLOCKED */
.demo-svg .lp-outer-1 .lp-plate { animation: lp-plate-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-frame { animation: lp-frame-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-icon  { animation: lp-icon-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-aura  { animation: lp-aura-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-stud  { animation: lp-stud-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-gem   { animation: lp-gem-fade 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-name  { animation: lp-name-block 8s ease-in-out infinite; }
.demo-svg .lp-outer-1 .lp-lock  { animation: lp-lock-show 8s ease-in-out infinite; }

@keyframes lp-plate-block {
  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; }
  18%, 86% { fill: var(--coal-1); filter: grayscale(100%) brightness(0.55); opacity: 0.55; }
}
@keyframes lp-frame-block {
  0%, 12%, 92%, 100% { stroke: #6b5026; }
  18%, 86% { stroke: var(--rust-2); }
}
@keyframes lp-icon-block {
  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
  18%, 86% { stroke: var(--rust); opacity: 0.45; }
}
@keyframes lp-aura-block {
  0%, 12%, 92%, 100% { opacity: 0; }
  18%, 86% { opacity: 0.85; stroke: var(--rust); stroke-width: 1.2; fill: none; }
}
@keyframes lp-stud-block {
  0%, 12%, 92%, 100% { fill: #8a6a32; }
  18%, 86% { fill: var(--rust-2); }
}
@keyframes lp-gem-fade {
  0%, 12%, 92%, 100% { opacity: 0.18; }
  18%, 86% { opacity: 0; }
}
@keyframes lp-name-block {
  0%, 12%, 92%, 100% { fill: var(--bone-1); }
  18%, 86% { fill: var(--rust); opacity: 0.7; }
}
@keyframes lp-lock-show {
  0%, 14%, 92%, 100% { opacity: 0; }
  20%, 86% { opacity: 1; }
}

/* outer-2: CONDITIONAL ("needs · add") */
.demo-svg .lp-outer-2 .lp-plate { animation: lp-plate-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-frame { animation: lp-frame-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-icon  { animation: lp-icon-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-aura  { animation: lp-aura-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-stud  { animation: lp-stud-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-gem   { animation: lp-gem-fade 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-name  { animation: lp-name-cond 8s ease-in-out infinite; }
.demo-svg .lp-outer-2 .lp-chip  { animation: lp-chip-show 8s ease-in-out infinite; }

@keyframes lp-plate-cond {
  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; }
  18%, 86% { fill: var(--coal-1); filter: grayscale(85%) brightness(0.7); opacity: 0.55; }
}
@keyframes lp-frame-cond {
  0%, 12%, 92%, 100% { stroke: #6b5026; }
  18%, 86% { stroke: #3a2f1c; }
}
@keyframes lp-icon-cond {
  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
  18%, 86% { stroke: var(--bone-4); opacity: 0.5; }
}
@keyframes lp-aura-cond {
  0%, 12%, 92%, 100% { opacity: 0; }
  18%, 86% { opacity: 0.7; stroke: var(--amber); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
}
@keyframes lp-stud-cond {
  0%, 12%, 92%, 100% { fill: #8a6a32; }
  18%, 86% { fill: #3a2f1c; }
}
@keyframes lp-name-cond {
  0%, 12%, 92%, 100% { fill: var(--bone-1); }
  18%, 86% { fill: var(--bone-3); }
}
@keyframes lp-chip-show {
  0%, 14%, 92%, 100% { opacity: 0; }
  22%, 86% { opacity: 1; }
}

/* Edges: glow during the selected window */
.demo-svg .lp-edge-breaks      { animation: lp-edge-breaks-anim   8s ease-in-out infinite; }
.demo-svg .lp-edge-requires    { animation: lp-edge-requires-anim 8s ease-in-out infinite; }
.demo-svg .lp-edge-requires-2  { animation: lp-edge-requires-anim 8s ease-in-out infinite; }
.demo-svg .lp-edge-compatible,
.demo-svg .lp-edge-compatible-2 { animation: lp-edge-compat-anim   8s ease-in-out infinite; }

@keyframes lp-edge-breaks-anim {
  0%, 12%, 92%, 100% { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; filter: none; }
  18%, 86% { stroke: var(--rust); stroke-width: 2.4; filter: drop-shadow(0 0 7px rgba(200,64,60,1)); }
}
@keyframes lp-edge-requires-anim {
  0%, 12%, 92%, 100% { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; filter: none; }
  18%, 86% { stroke: var(--ember-2); stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--ember-glow)); }
}
@keyframes lp-edge-compat-anim {
  0%, 12%, 92%, 100% { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; }
  18%, 86% { stroke: rgba(255,191,90,0.65); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(255,138,61,0.4)); }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .lp-shell { padding: 0 22px; }
  .lp-hero { grid-template-columns: 1fr; gap: 30px; padding: 60px 0 70px; }
  .lp-hero-art { min-height: 320px; }
  .lp-title { font-size: 60px; }
  .lp-section-title { font-size: 32px; }
  .lp-tablets { grid-template-columns: 1fr; }
  .lp-step { grid-template-columns: 1fr; gap: 20px; }
  .lp-step:nth-child(even) .lp-step-text { order: 1; }
  .lp-step:nth-child(even) .lp-step-art  { order: 2; }
  .lp-tiers { grid-template-columns: 1fr; }
  .lp-scraper { grid-template-columns: 1fr; }
  .lp-finale-title { font-size: 42px; }
}