:root {
  --mx: .5;
  --my: .5;
  --scroll: 0;
  --scroll-px: 0px;
  --energy: .35;
  --burn: 0;
  --ink: #220d04;
  --ember: #f04f14;
  --orange: #ff8b18;
  --gold: #ffc93d;
  --whitehot: #fff8d2;
  --glass: rgba(255, 236, 168, .22);
  --edge: rgba(255, 249, 214, .72);
  --max: 1080px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #ffb12b;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button, input, select, textarea { max-width: 100%; }

.energy-field {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background:
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255, calc(.74 + var(--energy) * .26)), transparent 10rem),
    radial-gradient(circle at 58% 40%, #fff4a4 0 6rem, rgba(255,139,24,.56) 6.4rem 23rem, transparent 28rem),
    linear-gradient(145deg, #fff2a8 0%, #ffb52e 32%, #f45b17 66%, #ffd968 100%);
}

.energy-core {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 34%, #fff 0 8%, #fff3a4 9% 26%, #ff8b18 27% 52%, rgba(227,55,10,.72) 53% 67%, transparent 72%);
  box-shadow:
    0 0 38px rgba(255,255,220,.7),
    0 0 88px rgba(255,124,18,.72),
    inset 0 0 38px rgba(255,255,255,.42);
  mix-blend-mode: screen;
  filter: saturate(calc(1.12 + var(--energy) * .35)) brightness(calc(1 + var(--energy) * .16));
}

.central-core {
  left: 50%;
  top: 44%;
  width: min(34rem, 68vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate3d(calc((var(--mx) - .5) * 50px), calc((var(--my) - .5) * 42px + var(--scroll) * -22px), 0) scale(calc(1 + var(--energy) * .035));
  opacity: .95;
}

.central-core::before,
.central-core::after {
  content: "";
  position: absolute;
  inset: -9%;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  transform: rotate(-12deg) scaleX(1.38);
  box-shadow: 0 0 48px rgba(255,233,120,.44);
  animation: orbitSpin 12s linear infinite;
}

.central-core::after {
  inset: 6%;
  transform: rotate(15deg) scaleX(1.55);
  animation-duration: 8s;
  animation-direction: reverse;
}

.core-texture {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.72), transparent 38%),
    url("./brandforge/molten-fire.png") center / cover;
  filter: saturate(1.6) contrast(1.1);
  mix-blend-mode: multiply;
  animation: coreTexture 9s ease-in-out infinite alternate;
}

.core-a { left: 8%; top: 18%; width: 13rem; aspect-ratio: 1; transform: translate3d(calc((var(--mx) - .5) * 72px + var(--scroll) * 30px), calc((var(--my) - .5) * 48px + var(--scroll) * -36px), 0); animation: driftA 7.8s ease-in-out infinite alternate; }
.core-b { right: 7%; top: 16%; width: 10rem; aspect-ratio: 1; transform: translate3d(calc((var(--mx) - .5) * -66px + var(--scroll) * -24px), calc((var(--my) - .5) * 44px + var(--scroll) * 42px), 0); animation: driftB 7s ease-in-out infinite alternate; }
.core-c { left: 17%; bottom: 12%; width: 8rem; aspect-ratio: 1; transform: translate3d(calc((var(--mx) - .5) * 44px + var(--scroll) * -30px), calc((var(--my) - .5) * -48px + var(--scroll) * 28px), 0); animation: driftC 8.4s ease-in-out infinite alternate; }
.core-d { right: 18%; bottom: 16%; width: 12rem; aspect-ratio: 1; transform: translate3d(calc((var(--mx) - .5) * -52px + var(--scroll) * 38px), calc((var(--my) - .5) * -42px + var(--scroll) * -26px), 0); animation: driftD 7.4s ease-in-out infinite alternate; }

.gravity-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82rem, 135vw);
  aspect-ratio: 1 / .34;
  border: 1px solid rgba(255,255,255,.56);
  border-bottom-color: rgba(255,90,15,.38);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(-8deg + var(--scroll) * 18deg)) translateY(calc(var(--scroll) * -20px));
  box-shadow: 0 0 44px rgba(255,236,135,.42);
  opacity: .64;
  animation: orbitFloat 8s ease-in-out infinite alternate;
}

.line-b {
  top: 59%;
  width: min(62rem, 118vw);
  transform: translate(-50%, -50%) rotate(calc(13deg - var(--scroll) * 16deg)) translateY(calc(var(--scroll) * 24px));
  animation-direction: alternate-reverse;
}

.lava-plane {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: -13vh;
  height: 38vh;
  background:
    linear-gradient(rgba(88,24,4,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,24,4,.16) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0, rgba(255,255,255,.78), rgba(255,196,45,.52) 18%, rgba(255,76,12,.3) 38%, transparent 64%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  transform: perspective(380px) rotateX(62deg);
}

.spark-bursts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-sparks span {
  position: absolute;
  left: var(--x);
  bottom: -3rem;
  width: .2rem;
  height: var(--h, 1.8rem);
  border-radius: 99px;
  background: linear-gradient(180deg, #fff, #ffd85a 42%, #ff5b12 72%, transparent);
  box-shadow: 0 0 14px rgba(255,236,150,.85), 0 0 28px rgba(255,95,13,.48);
  opacity: 0;
  transform: translateY(0) rotate(var(--r, 10deg));
  animation: ambientSpark var(--d, 7s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.ambient-sparks span:nth-child(1) { --x: 8%; --d: 7s; --delay: -2s; }
.ambient-sparks span:nth-child(2) { --x: 16%; --d: 9s; --delay: -6s; --h: 1.2rem; }
.ambient-sparks span:nth-child(3) { --x: 24%; --d: 8s; --delay: -4s; }
.ambient-sparks span:nth-child(4) { --x: 32%; --d: 10s; --delay: -7s; --h: 2.3rem; }
.ambient-sparks span:nth-child(5) { --x: 42%; --d: 7s; --delay: -1s; }
.ambient-sparks span:nth-child(6) { --x: 50%; --d: 11s; --delay: -8s; --h: 1.4rem; }
.ambient-sparks span:nth-child(7) { --x: 58%; --d: 8s; --delay: -3s; }
.ambient-sparks span:nth-child(8) { --x: 66%; --d: 9s; --delay: -5s; --h: 2rem; }
.ambient-sparks span:nth-child(9) { --x: 74%; --d: 7s; --delay: -4s; }
.ambient-sparks span:nth-child(10) { --x: 82%; --d: 10s; --delay: -9s; --h: 1.3rem; }
.ambient-sparks span:nth-child(11) { --x: 90%; --d: 8s; --delay: -2s; }
.ambient-sparks span:nth-child(12) { --x: 96%; --d: 12s; --delay: -10s; --h: 2.4rem; }

.burst {
  position: absolute;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: #fff7b6;
  box-shadow: 0 0 18px #fff, 0 0 32px #ff7c12;
  animation: burst .62s ease-out forwards;
}

.radial-nav {
  position: fixed;
  left: clamp(.8rem, 2vw, 1.5rem);
  top: clamp(.8rem, 2vw, 1.4rem);
  z-index: 20;
  width: 15rem;
  height: 15rem;
  pointer-events: none;
}

.radial-logo,
.orbit-link,
.orbit-ring {
  position: absolute;
  pointer-events: auto;
}

.radial-logo {
  left: 0;
  top: 0;
  display: grid;
  width: 6.4rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform .28s ease, box-shadow .28s ease;
}

.radial-nav:hover .radial-logo {
  transform: scale(1.04);
}

.radial-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.55);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.72));
}

.orbit-ring {
  left: -1.2rem;
  top: -1.2rem;
  width: 11.7rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 50%;
  transform: rotate(-18deg) scaleX(1.08);
  box-shadow: 0 0 36px rgba(255,220,100,.35);
  animation: ringDrift 9s linear infinite;
  pointer-events: none;
}

.ring-two {
  left: -2.1rem;
  top: -2.3rem;
  width: 14rem;
  opacity: .55;
  animation-duration: 13s;
  animation-direction: reverse;
}

.orbit-link {
  display: grid;
  min-width: 8.85rem;
  min-height: 3.2rem;
  place-items: center;
  border: 1px solid rgba(255,248,212,.62);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,210,69,.24), rgba(255,88,12,.12));
  color: #2a1004;
  box-shadow: 0 12px 34px rgba(94,26,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(1.3);
  font-size: 1.12rem;
  font-weight: 950;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.orbit-link::before {
  content: "";
  position: absolute;
  width: 5.6rem;
  height: 1px;
  right: 88%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), rgba(255,121,17,.62));
  transform-origin: right;
  opacity: .62;
}

.orbit-link:hover {
  transform: translate3d(-4px, -3px, 0) scale(1.04);
  background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,203,48,.48), rgba(255,83,12,.28));
  box-shadow: 0 18px 48px rgba(103,29,0,.28), 0 0 34px rgba(255,124,17,.45), inset 0 1px 0 rgba(255,255,255,.82);
}

.orbit-brand { left: 7.2rem; top: .8rem; }
.orbit-reel { left: 6.1rem; top: 5rem; }
.orbit-contact { left: 2.1rem; top: 9.2rem; }

.scrolly-stage {
  position: relative;
  min-height: 820vh;
  padding-top: 1rem;
}

.sticky-viewport {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100svh;
  place-items: center;
  perspective: 1600px;
  padding: clamp(5.5rem, 8vh, 6.5rem) var(--space-md) var(--space-lg);
}

.liquid-panel {
  position: absolute;
  width: min(760px, calc(100vw - 32px));
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  padding: clamp(var(--space-md), 2.4vw, 24px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,236,147,.22) 36%, rgba(255,91,13,.14), rgba(47,15,5,.12)) padding-box,
    linear-gradient(115deg, rgba(255,255,255,.9), rgba(255,203,53,.88), rgba(255,82,12,.62), rgba(255,255,255,.72)) border-box;
  box-shadow: 0 28px 110px rgba(96,27,0,.32), 0 0 70px rgba(255,132,19,.32), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(24px) saturate(1.4);
  opacity: 0;
  transform: translate3d(42vw, 0, -260px) rotateY(-22deg) scale(.9);
  transform-origin: center;
  pointer-events: none;
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1), filter .72s ease;
}

.liquid-panel::before,
.liquid-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.liquid-panel > *,
.status-strip span,
.liquid-chips span,
.input-triad div,
.flow-console div,
.micro-console div,
.dashboard-console div,
.proof-console section,
.type-tiles label,
.drop-zone,
.form-state {
  min-width: 0;
  transition: filter 1.2s ease, opacity 1.2s ease, color 1.2s ease, text-shadow 1.2s ease, background 1.2s ease, box-shadow 1.2s ease;
}

body.burn-active .liquid-panel {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,calc(.46 - var(--burn) * .05)), transparent 16rem),
    linear-gradient(145deg, rgba(255,235,160,calc(.42 - var(--burn) * .035)), rgba(126,45,8,calc(.2 + var(--burn) * .08)) 42%, rgba(35,12,5,calc(.12 + var(--burn) * .11))) padding-box,
    linear-gradient(115deg, rgba(255,235,155,.86), rgba(255,118,18,.72), rgba(58,19,7,calc(.28 + var(--burn) * .1)), rgba(255,255,255,.5)) border-box;
  box-shadow:
    0 28px 110px rgba(66,18,0,calc(.28 + var(--burn) * .07)),
    0 0 calc(70px - var(--burn) * 5px) rgba(255,102,13,calc(.32 - var(--burn) * .03)),
    inset 0 0 calc(20px + var(--burn) * 12px) rgba(43,13,4,calc(.05 + var(--burn) * .12));
  filter: saturate(calc(1 - var(--burn) * .08)) contrast(calc(1 + var(--burn) * .11)) brightness(calc(1 - var(--burn) * .075));
}

body.burn-active .liquid-panel::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,calc(.32 - var(--burn) * .035)), transparent 9rem),
    radial-gradient(circle at 70% 80%, rgba(40,11,3,calc(.04 + var(--burn) * .13)), transparent 18rem),
    repeating-linear-gradient(18deg, rgba(43,13,4,calc(.02 + var(--burn) * .032)) 0 2px, transparent 2px 8px),
    repeating-radial-gradient(circle at 30% 20%, rgba(36,10,3,calc(.02 + var(--burn) * .026)) 0 2px, transparent 2px 9px);
  mix-blend-mode: multiply;
  animation: burnCreep 5s ease-in-out infinite alternate;
}

body.burn-active .liquid-panel::after {
  box-shadow:
    inset 0 0 calc(34px + var(--burn) * 18px) rgba(22,6,2,calc(.08 + var(--burn) * .12)),
    inset 0 calc(-18px - var(--burn) * 8px) calc(60px + var(--burn) * 14px) rgba(80,20,5,calc(.12 + var(--burn) * .1));
}

body.burn-active .liquid-panel > *,
body.burn-active .status-strip span,
body.burn-active .liquid-chips span,
body.burn-active .input-triad div,
body.burn-active .flow-console div,
body.burn-active .micro-console div,
body.burn-active .dashboard-console div,
body.burn-active .proof-console section,
body.burn-active .type-tiles label,
body.burn-active .drop-zone,
body.burn-active .form-state {
  color: rgb(
    calc(34 - var(--burn) * 2)
    calc(13 - var(--burn) * 1)
    4
  );
  text-shadow:
    0 0 calc(var(--burn) * 1.5px) rgba(34,10,3,calc(var(--burn) * .14)),
    0 calc(var(--burn) * .35px) calc(var(--burn) * .8px) rgba(0,0,0,calc(var(--burn) * .12));
  filter: blur(calc(var(--burn) * .28px)) contrast(calc(1 + var(--burn) * .18)) brightness(calc(1 - var(--burn) * .085));
  opacity: calc(1 - var(--burn) * .075);
}

body.burn-active .status-strip span,
body.burn-active .liquid-chips span,
body.burn-active .input-triad div,
body.burn-active .flow-console div,
body.burn-active .micro-console div,
body.burn-active .dashboard-console div,
body.burn-active .proof-console section,
body.burn-active .type-tiles label,
body.burn-active .drop-zone,
body.burn-active .form-state {
  background:
    linear-gradient(145deg, rgba(255,220,120,calc(.28 - var(--burn) * .025)), rgba(98,31,7,calc(.16 + var(--burn) * .08)), rgba(26,8,3,calc(.08 + var(--burn) * .11)));
  box-shadow:
    0 12px 34px rgba(48,13,0,calc(.12 + var(--burn) * .08)),
    inset 0 0 calc(16px + var(--burn) * 8px) rgba(26,8,3,calc(.04 + var(--burn) * .1));
}

body.burn-level-6 .liquid-panel > *,
body.burn-level-6 .status-strip span,
body.burn-level-6 .liquid-chips span,
body.burn-level-6 .input-triad div,
body.burn-level-6 .flow-console div,
body.burn-level-6 .micro-console div,
body.burn-level-6 .dashboard-console div,
body.burn-level-6 .proof-console section,
body.burn-level-6 .type-tiles label,
body.burn-level-6 .drop-zone,
body.burn-level-6 .form-state {
  filter: blur(2.4px) contrast(2.2) brightness(.42);
  opacity: .42;
}

.liquid-panel::before {
  background:
    linear-gradient(110deg, transparent 0 22%, rgba(255,255,255,.42) 36%, transparent 54%),
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.5), transparent 14rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  animation: glassSheen 7s ease-in-out infinite;
}

.liquid-panel::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 44px rgba(255,255,255,.18), inset 0 -34px 80px rgba(255,90,13,.15);
}

.liquid-panel.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  pointer-events: auto;
}

.liquid-panel.is-past {
  opacity: .18;
  filter: blur(1.2px) saturate(.85);
  transform: translate3d(-44vw, 1rem, -420px) rotateY(38deg) scale(.78);
}

.liquid-panel:hover,
.liquid-panel:focus-within {
  box-shadow: 0 34px 120px rgba(97,27,0,.38), 0 0 86px rgba(255,132,19,.44), inset 0 1px 0 rgba(255,255,255,.9);
}

.scroll-triggers {
  position: relative;
  z-index: -1;
  display: grid;
}

.scroll-triggers span {
  height: 100vh;
}

.panel-arrows {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: clamp(2.2rem, 7vh, 4.5rem);
  z-index: 18;
  display: flex;
  width: min(82vw, 62rem);
  justify-content: space-between;
  pointer-events: none;
  transform: translateX(-50%);
}

.panel-arrow {
  display: grid;
  width: 4.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,248,212,.68);
  border-radius: 50%;
  color: #2a1004;
  background:
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,210,69,.24), rgba(255,88,12,.12));
  box-shadow:
    0 12px 34px rgba(94,26,0,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(1.3);
  cursor: pointer;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 0 .28rem;
  text-align: center;
  pointer-events: auto;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}

.panel-arrow::before {
  content: "";
  position: absolute;
  inset: -18%;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(255,220,100,.28);
  opacity: .64;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.panel-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 12%, rgba(255,255,255,.42) 36%, transparent 58%);
  mix-blend-mode: screen;
  opacity: .58;
  transform: translateX(-36%) rotate(-14deg);
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}

.panel-arrow:hover,
.panel-arrow:focus-visible {
  transform: translate3d(-4px, -3px, 0) scale(1.08);
  background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,203,48,.48), rgba(255,83,12,.28));
  box-shadow:
    0 18px 48px rgba(103,29,0,.28),
    0 0 34px rgba(255,124,17,.45),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.panel-arrow:hover::before,
.panel-arrow:focus-visible::before {
  opacity: 1;
  transform: scale(1.12);
}

.panel-arrow:hover::after,
.panel-arrow:focus-visible::after {
  opacity: .82;
  transform: translateX(30%) rotate(-14deg);
}

.panel-arrow.is-disabled {
  opacity: .32;
  pointer-events: none;
}

.panel-kicker {
  margin: 0 0 .7rem;
  color: #802206;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 12ch;
  margin-bottom: var(--space-sm);
  color: #1f0b03;
  font-size: clamp(2.55rem, 4.8vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 0 34px rgba(255,249,200,.7);
  overflow-wrap: break-word;
}

h2 {
  margin-bottom: var(--space-sm);
  color: #210c04;
  font-size: clamp(1.85rem, 4.3vw, 3rem);
  line-height: .95;
  letter-spacing: 0;
  overflow-wrap: normal;
}

h3 {
  margin-bottom: .3rem;
  color: #220d04;
  font-size: 1.25rem;
}

p {
  max-width: 60ch;
  color: rgba(31,11,3,.82);
  font-size: 1rem;
  line-height: 1.54;
  font-weight: 500;
  overflow-wrap: break-word;
}

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

.btn,
.molten-button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,250,214,.78);
  border-radius: 15px;
  padding: 12px 18px;
  color: #2a1004;
  font-weight: 950;
  line-height: 1.15;
  isolation: isolate;
  box-shadow: 0 16px 42px rgba(95,26,0,.22), inset 0 1px 0 rgba(255,255,255,.82);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.molten-button::before {
  content: "";
  position: absolute;
  inset: -80% -25%;
  z-index: -1;
  background:
    radial-gradient(circle at 28% 50%, #fff 0 5%, transparent 14%),
    linear-gradient(105deg, transparent 18%, rgba(255,255,255,.9) 36%, transparent 56%);
  transform: translateX(-78%) rotate(12deg);
  animation: buttonSheen 3.3s ease-in-out infinite;
}

.molten-button.primary {
  background: linear-gradient(135deg, #fff9cf, #ffcd3c 32%, #ff7b16 63%, #d9380b 82%, #fff1a2);
}

.molten-button.secondary {
  color: #fff7d5;
  background: linear-gradient(135deg, rgba(38,15,7,.93), rgba(111,37,11,.84), rgba(255,122,21,.58));
}

.molten-button:hover,
.molten-button:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.16);
  box-shadow: 0 24px 66px rgba(115,32,0,.32), 0 0 36px rgba(255,124,17,.42), inset 0 1px 0 rgba(255,255,255,.9);
}

.status-strip,
.liquid-chips,
.input-triad,
.flow-console,
.micro-console,
.dashboard-console,
.proof-console,
.feature-grid,
.example-options {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.status-strip,
.liquid-chips,
.input-triad,
.flow-console,
.micro-console,
.dashboard-console,
.feature-grid,
.example-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-strip span,
.liquid-chips span,
.input-triad div,
.flow-console div,
.micro-console div,
.dashboard-console div,
.proof-console section,
.feature-grid div,
.example-options button,
.form-state {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,248,212,.62);
  border-radius: .9rem;
  padding: var(--space-sm);
  color: #2a1004;
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,205,62,.22), rgba(255,86,12,.12));
  box-shadow: 0 14px 38px rgba(83,23,0,.15), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.25);
  font-weight: 500;
  transition: transform .22s ease, box-shadow .22s ease;
}

.status-strip span:hover,
.liquid-chips span:hover,
.input-triad div:hover,
.flow-console div:hover,
.micro-console div:hover,
.dashboard-console div:hover,
.proof-console section:hover,
.feature-grid div:hover,
.example-options button:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 68px rgba(102,29,0,.27), 0 0 28px rgba(255,124,17,.34), inset 0 1px 0 rgba(255,255,255,.84);
}

.input-triad strong {
  display: block;
  font-size: 1.14rem;
  font-weight: 950;
}

.input-triad small,
.flow-console span,
.dashboard-console span,
.feature-grid span,
.faq-list span {
  display: block;
  margin-top: var(--space-xs);
  color: rgba(31,11,3,.65);
  font-weight: 500;
  line-height: 1.42;
}

.feature-block {
  margin-top: var(--space-lg);
}

.feature-block h3 {
  margin-bottom: var(--space-xs);
}

.steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps-grid div,
.feature-grid div,
.dashboard-console div,
.micro-console div,
.example-options button {
  min-height: 100%;
}

.dashboard-console strong,
.flow-console strong,
.feature-grid strong,
.faq-list strong {
  font-weight: 950;
}

.example-options button {
  appearance: none;
  min-height: 58px;
  cursor: default;
  text-align: left;
  font: inherit;
  font-weight: 950;
}

#campanii .cta-row {
  margin-top: var(--space-lg);
}

.proof-console {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof-console a {
  color: #842206;
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: .22rem;
}

.metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(88,28,6,.2);
}

.metric strong {
  font-size: 2rem;
}

.form-panel {
  width: min(760px, calc(100vw - 32px));
  display: block;
  padding: 16px 24px;
}

.form-panel h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.55rem);
  margin-bottom: var(--space-xs);
}

.form-panel p {
  font-size: .88rem;
  line-height: 1.34;
  margin-bottom: 14px;
}

.forge-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: 100%;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 10px;
  font-weight: 950;
}

.type-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.type-tiles legend {
  grid-column: 1 / -1;
}

.type-tiles label {
  position: relative;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255,248,212,.64);
  border-radius: .9rem;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,205,62,.2), rgba(255,86,12,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 32px rgba(82,23,0,.14);
  cursor: pointer;
}

.type-tiles input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.type-tiles span {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 10px 12px;
  font-weight: 950;
  text-align: center;
}

.type-tiles label:has(input:checked) {
  background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,207,58,.52), rgba(255,91,13,.3));
  box-shadow: 0 0 34px rgba(255,121,17,.38), inset 0 0 28px rgba(255,255,255,.4);
}

.dynamic-fields {
  display: grid;
  gap: 14px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  transition: opacity .24s ease, transform .24s ease;
}

.dynamic-fields.switching {
  opacity: 0;
  transform: translateY(12px) scale(.985);
}

.field {
  animation: fieldIn .34s ease both;
}

.field-full,
.full-span {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: var(--space-xs);
  color: rgba(31,11,3,.76);
  font-size: .78rem;
  font-weight: 950;
  overflow-wrap: break-word;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,248,212,.56);
  border-radius: .85rem;
  padding: var(--space-sm);
  color: #210c04;
  background: rgba(255,247,209,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  outline: none;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(255,101,14,.78);
  box-shadow: 0 0 0 4px rgba(255,121,17,.18), inset 0 1px 0 rgba(255,255,255,.82);
}

.field textarea {
  min-height: 86px;
  max-height: 120px;
}

.drop-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-field {
  position: relative;
}

.drop-zone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: center;
  height: 104px;
  min-height: 104px;
  border: 1px solid rgba(255,248,212,.64);
  border-radius: .9rem;
  padding: var(--space-sm);
  background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,205,62,.2), rgba(255,86,12,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 32px rgba(82,23,0,.13);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.drop-zone:hover,
.drop-field.selected .drop-zone {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255,125,16,.28), inset 0 1px 0 rgba(255,255,255,.84);
}

.drop-icon {
  display: grid;
  width: 2.3rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: .7rem;
  color: #fff8d5;
  background: radial-gradient(circle, #fff7bd, #ff8a16 42%, #421607);
  box-shadow: 0 0 22px rgba(255,124,17,.45);
  font-weight: 950;
}

.drop-zone strong {
  display: block;
  font-size: .95rem;
  overflow-wrap: break-word;
}

.drop-zone small {
  color: rgba(31,11,3,.64);
  overflow-wrap: break-word;
}

.form-state {
  margin: 0;
  padding: var(--space-sm);
  font-size: .86rem;
  line-height: 1.35;
}

.form-panel .molten-button {
  min-height: 46px;
  padding: 12px 18px;
}

.form-submit {
  width: 100%;
  margin-top: 0;
  border: 1px solid rgba(255,250,214,.78);
  cursor: pointer;
}

.order-page {
  min-height: 100svh;
}

.order-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(13rem, 22vh, 17rem) 0 var(--space-xl);
}

.order-page .liquid-panel {
  position: relative;
  width: 100%;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overflow-wrap: break-word;
}

.order-intro {
  margin: 0 auto var(--space-lg);
}

.order-intro h1 {
  max-width: 13ch;
}

.eyebrow {
  margin-bottom: var(--space-xs);
  color: #802206;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.order-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.order-highlights div,
.order-notes .flow-console div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,248,212,.62);
  border-radius: .9rem;
  padding: var(--space-sm);
  color: #2a1004;
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,205,62,.22), rgba(255,86,12,.12));
  box-shadow: 0 14px 38px rgba(83,23,0,.15), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.25);
}

.order-highlights strong,
.order-notes strong {
  display: block;
  font-weight: 950;
}

.order-highlights span,
.order-notes span {
  display: block;
  margin-top: var(--space-xs);
  color: rgba(31,11,3,.68);
  font-weight: 500;
  line-height: 1.42;
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: var(--space-lg);
  align-items: start;
}

.order-form-panel {
  max-width: none;
}

.order-notes {
  padding: 24px;
}

.order-notes h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.order-notes .flow-console {
  grid-template-columns: 1fr;
}

.order-notes .cta-row {
  margin-top: var(--space-lg);
}

@media (min-width: 840px) {
  .form-panel .dynamic-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-panel .field-full {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  body {
    overflow-x: hidden;
  }

  .radial-nav {
    width: 11.2rem;
    height: 11.2rem;
  }

  .radial-logo {
    width: 4.6rem;
    aspect-ratio: 1;
  }

  .radial-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.55);
  }

  .orbit-ring {
    width: 8.8rem;
  }

  .ring-two {
    width: 10.2rem;
  }

  .orbit-link {
    min-width: 6.75rem;
    min-height: 2.75rem;
    font-size: .94rem;
  }

  .orbit-link::before {
    width: 3rem;
  }

  .orbit-brand { left: 4.9rem; top: .4rem; }
  .orbit-reel { left: 4.4rem; top: 3.8rem; }
  .orbit-contact { left: 1.1rem; top: 7.2rem; }

  .scrolly-stage {
    min-height: auto;
    padding: 12.2rem 0 2rem;
  }

  .sticky-viewport {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    width: 100%;
    min-height: auto;
    padding: var(--space-md) var(--space-sm) var(--space-xl);
    overflow: visible;
  }

  .liquid-panel {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 48px);
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    justify-self: center;
  }

  .liquid-panel.is-past {
    opacity: 1;
    filter: none;
    transform: none;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(2rem, 9.2vw, 2.35rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 9vw, 3rem);
  }

  p {
    max-width: 60ch;
    font-size: .88rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .cta-row {
    gap: 16px;
  }

  .cta-row .btn,
  .cta-row .molten-button {
    width: 100%;
  }

  .status-strip,
  .liquid-chips,
  .input-triad,
  .flow-console,
  .micro-console,
  .dashboard-console,
  .proof-console,
  .feature-grid,
  .example-options,
  .dynamic-fields,
  .type-tiles {
    grid-template-columns: 1fr;
  }

  .type-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-panel {
    width: 100%;
    max-width: calc(100vw - 48px);
  }

  .order-shell {
    width: min(100%, calc(100vw - 48px));
    max-width: 342px;
    padding: 13.4rem 0 var(--space-xl);
  }

  .order-intro,
  .order-form-panel,
  .order-notes {
    max-width: 100%;
  }

  .order-layout,
  .order-highlights {
    grid-template-columns: 1fr;
  }

  .order-page .form-panel {
    max-width: 100%;
  }

  .scroll-triggers {
    display: none;
  }

  .panel-arrows {
    display: none;
  }
}

@media (max-width: 480px) {
  .liquid-panel,
  .form-panel {
    max-width: 342px;
  }

  .order-page .liquid-panel,
  .order-page .form-panel {
    max-width: 100%;
  }
}

body.lite-motion .core-texture,
body.lite-motion .central-core::before,
body.lite-motion .central-core::after,
body.lite-motion .orbit-ring,
body.lite-motion .liquid-panel::before,
body.lite-motion .molten-button::before {
  animation: none !important;
}

body.lite-motion .ambient-sparks,
body.lite-motion .spark-bursts,
body.lite-motion .core-a,
body.lite-motion .core-b,
body.lite-motion .core-c,
body.lite-motion .core-d,
body.lite-motion .gravity-line {
  display: none;
}

body.lite-motion .central-core,
body.lite-motion .core-texture {
  transform: none !important;
}

body.lite-motion .energy-core,
body.lite-motion .liquid-panel::before,
body.lite-motion .radial-logo img {
  filter: none !important;
}

body.lite-motion .core-texture {
  mix-blend-mode: normal;
}

body.lite-motion .central-core {
  width: min(26rem, 62vw);
}

body.lite-motion .orbit-ring,
body.lite-motion .orbit-link,
body.lite-motion .liquid-panel {
  backdrop-filter: none !important;
}

body.lite-motion.burn-active .liquid-panel,
body.lite-motion.burn-active .liquid-panel::before,
body.lite-motion.burn-active .liquid-panel::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@keyframes coreTexture {
  from { transform: rotate(-4deg) scale(1); }
  to { transform: rotate(5deg) scale(1.08); }
}

@keyframes orbitSpin {
  to { rotate: 360deg; }
}

@keyframes driftA { from { margin-left: 0; margin-top: 0; } to { margin-left: 4rem; margin-top: 2rem; } }
@keyframes driftB { from { margin-right: 0; margin-top: 0; } to { margin-right: 3rem; margin-top: 4rem; } }
@keyframes driftC { from { margin-left: 0; margin-bottom: 0; } to { margin-left: 5rem; margin-bottom: 2rem; } }
@keyframes driftD { from { margin-right: 0; margin-bottom: 0; } to { margin-right: 4rem; margin-bottom: 3rem; } }

@keyframes orbitFloat {
  from { transform: translate(-50%, -50%) rotate(-8deg) translateY(0); }
  to { transform: translate(-50%, -50%) rotate(-3deg) translateY(-1.4rem); }
}

@keyframes ringDrift {
  to { rotate: 360deg; }
}

@keyframes glassSheen {
  0%, 100% { transform: translateX(-14%) skewX(-8deg); opacity: .62; }
  50% { transform: translateX(14%) skewX(-8deg); opacity: .92; }
}

@keyframes buttonSheen {
  0%, 42% { transform: translateX(-78%) rotate(12deg); }
  76%, 100% { transform: translateX(88%) rotate(12deg); }
}

@keyframes fieldIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes burst {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
}

@keyframes ambientSpark {
  0% { opacity: 0; transform: translate3d(0, 4rem, 0) rotate(var(--r, 10deg)) scale(.8); }
  12% { opacity: calc(.45 + var(--energy) * .55); }
  100% { opacity: 0; transform: translate3d(calc((var(--mx) - .5) * 4rem), calc(-110vh - var(--scroll) * 8rem), 0) rotate(34deg) scale(1.04); }
}

@keyframes burnCreep {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: calc(.45 + var(--burn) * .06); }
  to { transform: translate3d(2%, 1%, 0) scale(1.05); opacity: calc(.58 + var(--burn) * .07); }
}

/* ============================================================================
   FORJA — tema noua, intunecata, "forjă în vulcan" pentru pagina principala
   (index.html). Coexista cu tema veche, deschisa la culoare, folosita inca de
   ReelForge/index.html: clasele de mai jos sunt fie noi (nu se ciocnesc cu
   nimic), fie domeniul lor de aplicare e limitat la .glass-panel / .radial-nav
   / .forge-backdrop, ca sa nu strice pagina veche cat timp nu e migrata si ea.
   ============================================================================ */

:root {
  --obsidian-0: #0a0503;
  --obsidian-1: #150a05;
  --obsidian-2: #1f1108;
  --obsidian-3: #2c170b;
  --hot: #fff3d6;
  --hot-dim: rgba(255, 243, 214, .74);
  --hot-faint: rgba(255, 243, 214, .5);
  --glass-fill: linear-gradient(145deg, rgba(255, 205, 100, .1), rgba(255, 130, 30, .05) 55%, rgba(10, 5, 3, .18));
  --glass-edge: linear-gradient(120deg, rgba(255, 235, 180, .5), rgba(255, 140, 30, .28) 45%, rgba(255, 235, 180, .12));
  --glass-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(240, 79, 20, .16), inset 0 1px 0 rgba(255, 232, 175, .16);
}

html.no-js body { background: var(--obsidian-1); }

body:has(.forge-backdrop) {
  background: var(--obsidian-1);
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  border-radius: .6rem;
  padding: .8rem 1.2rem;
  color: var(--obsidian-0);
  background: var(--gold);
  font-weight: 800;
  transition: top .2s ease;
}

.skip-link:focus-visible {
  top: 1rem;
}

/* --- Fundal fix: scena "forjă în vulcan" (WebGL + fallback CSS) ------------ */

.forge-backdrop {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60rem 40rem at 50% 8%, rgba(255, 148, 40, .16), transparent 60%),
    radial-gradient(ellipse 70rem 50rem at 50% 105%, rgba(240, 79, 20, .35), transparent 55%),
    linear-gradient(180deg, var(--obsidian-0) 0%, var(--obsidian-1) 46%, var(--obsidian-2) 78%, var(--obsidian-3) 100%);
}

.scene-css {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scene-css::before {
  content: "";
  position: absolute;
  inset: -6% -6% -20%;
  background-image:
    repeating-linear-gradient(120deg, rgba(0, 0, 0, .5) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(35deg, rgba(0, 0, 0, .4) 0 2px, transparent 2px 130px),
    url("./brandforge/molten-fire.png");
  background-size: auto, auto, cover;
  background-position: center;
  filter: saturate(1.3) brightness(.6) contrast(1.15);
  mix-blend-mode: color-dodge;
  opacity: .34;
}

.scene-css::after {
  content: "";
  position: absolute;
  inset: auto 0 -8vh;
  height: calc(46vh + var(--burn, 0) * 1.8vh);
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 210, 110, .9), rgba(240, 79, 20, .58) 42%, transparent 78%);
  filter: blur(2px);
  opacity: calc(.88 + var(--burn, 0) * .02);
  animation: lavaGlow 6s ease-in-out infinite alternate;
}

.smoke-plume {
  position: absolute;
  inset: auto 0 8vh;
  height: 60vh;
  pointer-events: none;
}

.smoke-plume span {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--w, 22rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 20, 16, .5), transparent 70%);
  filter: blur(14px);
  opacity: 0;
  animation: smokeDrift var(--d, 16s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.smoke-plume span:nth-child(1) { --x: 8%; --w: 20rem; --d: 15s; --delay: -3s; }
.smoke-plume span:nth-child(2) { --x: 38%; --w: 26rem; --d: 19s; --delay: -9s; }
.smoke-plume span:nth-child(3) { --x: 64%; --w: 18rem; --d: 14s; --delay: -6s; }
.smoke-plume span:nth-child(4) { --x: 84%; --w: 24rem; --d: 20s; --delay: -12s; }

.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.embers span {
  position: absolute;
  left: var(--x);
  bottom: -4rem;
  width: .22rem;
  height: var(--h, 1.6rem);
  border-radius: 99px;
  background: linear-gradient(180deg, var(--whitehot), var(--gold) 45%, var(--ember) 78%, transparent);
  box-shadow: 0 0 12px rgba(255, 201, 61, .8), 0 0 26px rgba(240, 79, 20, .5);
  opacity: 0;
  animation: emberRise var(--d, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.embers span:nth-child(1) { --x: 6%; --d: 9s; --delay: -2s; }
.embers span:nth-child(2) { --x: 14%; --d: 11s; --delay: -6s; --h: 1.1rem; }
.embers span:nth-child(3) { --x: 23%; --d: 8s; --delay: -3.5s; }
.embers span:nth-child(4) { --x: 31%; --d: 12s; --delay: -8s; --h: 2.1rem; }
.embers span:nth-child(5) { --x: 41%; --d: 9s; --delay: -1s; }
.embers span:nth-child(6) { --x: 50%; --d: 13s; --delay: -9s; --h: 1.3rem; }
.embers span:nth-child(7) { --x: 59%; --d: 8.5s; --delay: -4s; }
.embers span:nth-child(8) { --x: 67%; --d: 11s; --delay: -6.5s; --h: 1.9rem; }
.embers span:nth-child(9) { --x: 76%; --d: 9.5s; --delay: -3s; }
.embers span:nth-child(10) { --x: 84%; --d: 12s; --delay: -10s; --h: 1.2rem; }
.embers span:nth-child(11) { --x: 91%; --d: 8s; --delay: -2.5s; }
.embers span:nth-child(12) { --x: 97%; --d: 13.5s; --delay: -11s; --h: 2.2rem; }

.scene-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90rem 60rem at 50% 40%, transparent 40%, rgba(10, 5, 3, .5) 100%),
    linear-gradient(180deg, rgba(10, 5, 3, .32) 0%, transparent 22% 68%, rgba(10, 5, 3, .55) 100%);
}

.forge-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.forge-canvas.is-ready {
  opacity: 1;
}

.forge-backdrop.scene-webgl .scene-css {
  opacity: 0;
  transition: opacity .8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .scene-css::after,
  .embers span,
  .smoke-plume span {
    animation: none !important;
  }

  .scene-css::after {
    opacity: .7;
  }

  .embers span {
    opacity: .55;
    bottom: 6%;
  }

  .smoke-plume span {
    opacity: .18;
  }
}

/* --- Navigare radiala (identica ca mecanica, reskin intunecat) ------------- */

.radial-logo {
  background: radial-gradient(circle, rgba(21, 10, 5, .82), rgba(21, 10, 5, .58) 70%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px) saturate(1.2);
}

.orbit-ring {
  border-color: rgba(255, 201, 61, .4);
  box-shadow: 0 0 30px rgba(240, 79, 20, .3);
}

.ring-two {
  border-color: rgba(255, 201, 61, .24);
}

.orbit-link {
  border-color: rgba(255, 219, 140, .28);
  color: var(--hot);
  background:
    linear-gradient(135deg, rgba(255, 205, 100, .16), rgba(240, 79, 20, .12) 60%, rgba(10, 5, 3, .5));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 232, 175, .14);
}

.orbit-link::before {
  background: linear-gradient(90deg, transparent, rgba(255, 219, 140, .6), rgba(240, 79, 20, .4));
}

.orbit-link:hover {
  background:
    linear-gradient(135deg, rgba(255, 219, 140, .32), rgba(240, 79, 20, .22) 60%, rgba(10, 5, 3, .6));
  box-shadow: 0 20px 52px rgba(0, 0, 0, .55), 0 0 34px rgba(240, 79, 20, .4), inset 0 1px 0 rgba(255, 232, 175, .2);
}

.panel-arrow {
  border-color: rgba(255, 219, 140, .28);
  color: var(--hot);
  background: linear-gradient(135deg, rgba(255, 205, 100, .16), rgba(240, 79, 20, .12) 60%, rgba(10, 5, 3, .5));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 232, 175, .14);
}

.panel-arrow::before {
  border-color: rgba(255, 219, 140, .3);
  box-shadow: 0 0 26px rgba(240, 79, 20, .3);
}

.panel-arrow::after {
  background: linear-gradient(110deg, transparent 12%, rgba(255, 232, 175, .3) 36%, transparent 58%);
}

.panel-arrow:hover,
.panel-arrow:focus-visible {
  background: linear-gradient(135deg, rgba(255, 219, 140, .32), rgba(240, 79, 20, .22) 60%, rgba(10, 5, 3, .6));
  box-shadow: 0 20px 52px rgba(0, 0, 0, .55), 0 0 34px rgba(240, 79, 20, .4), inset 0 1px 0 rgba(255, 232, 175, .2);
}

.fab-cta {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 19;
}

.btn-compact {
  min-height: 42px;
  padding: 10px 16px;
  font-size: .88rem;
}

@media (min-width: 881px) {
  .fab-cta { display: none; }
}

/* --- Punctele de progres (mod deck) ----------------------------------------- */

.panel-dots {
  position: fixed;
  right: clamp(.9rem, 2.4vw, 1.8rem);
  top: 50%;
  z-index: 18;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transform: translateY(-50%);
}

.panel-dots button {
  width: .55rem;
  height: .55rem;
  padding: 0;
  border: 1px solid rgba(255, 219, 140, .5);
  border-radius: 50%;
  background: rgba(255, 219, 140, .12);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.panel-dots button.is-active {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 201, 61, .8);
  transform: scale(1.35);
}

.panel-dots button:hover {
  transform: scale(1.2);
}

@media (max-width: 880px) {
  .panel-dots { display: none; }
}

/* --- Deck-ul de scrollytelling: .glass-panel -------------------------------- */

.scrolly-stage { min-height: 960vh; }

.glass-panel {
  position: absolute;
  width: min(720px, calc(100vw - 32px));
  max-width: 100%;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 1.4rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--glass-fill) padding-box, var(--glass-edge) border-box;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(1.3);
  opacity: 0;
  transform: translate3d(38vw, 0, -260px) rotateY(-20deg) scale(.92);
  transform-origin: center;
  pointer-events: none;
  transition: opacity .72s ease, transform .72s cubic-bezier(.2, .8, .2, 1);
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 20%, rgba(255, 232, 175, .1) 38%, transparent 56%);
  mix-blend-mode: screen;
  animation: glassSheenDark 8s ease-in-out infinite;
}

.glass-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border: 1px solid rgba(255, 232, 175, .12);
  border-radius: inherit;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .4), inset 0 -30px 70px rgba(240, 79, 20, .12);
}

.glass-panel.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  pointer-events: auto;
}

.glass-panel.is-past {
  opacity: .14;
  filter: blur(1.4px) saturate(.8);
  transform: translate3d(-42vw, 1rem, -420px) rotateY(36deg) scale(.8);
}

.glass-panel h1,
.glass-panel h2,
.glass-panel h3 {
  color: var(--hot);
  text-shadow: 0 0 30px rgba(255, 201, 61, .3);
}

.glass-panel p {
  color: var(--hot-dim);
}

.kicker {
  margin: 0 0 .7rem;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.molten-text {
  background: linear-gradient(100deg, var(--gold), var(--whitehot) 30%, var(--ember) 65%, var(--gold));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: moltenShift 6s ease-in-out infinite;
}

.lede {
  max-width: 46ch;
  font-size: 1.08rem;
}

.hero-panel .cta-row {
  margin-top: var(--space-md);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.hero-meta li {
  border: 1px solid rgba(255, 219, 140, .22);
  border-radius: 99px;
  padding: .4rem .9rem;
  color: var(--hot-faint);
  background: rgba(255, 219, 140, .06);
  font-size: .78rem;
  font-weight: 700;
}

.panel-head {
  margin-bottom: var(--space-md);
}

.panel-head p {
  max-width: 52ch;
}

/* --- Butoane: btn-molten / btn-glass ---------------------------------------- */

.btn-molten,
.btn-glass {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 15px;
  padding: 12px 22px;
  font-weight: 800;
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn-molten {
  border: 1px solid rgba(255, 250, 214, .5);
  color: var(--obsidian-0);
  background: linear-gradient(135deg, var(--whitehot), var(--gold) 38%, var(--orange) 66%, var(--ember) 88%);
  box-shadow: 0 16px 40px rgba(240, 79, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.btn-molten::before {
  content: "";
  position: absolute;
  inset: -80% -25%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .85) 36%, transparent 56%);
  transform: translateX(-78%) rotate(12deg);
  animation: buttonSheen 3.4s ease-in-out infinite;
}

.btn-glass {
  border: 1px solid rgba(255, 219, 140, .32);
  color: var(--hot);
  background: linear-gradient(135deg, rgba(255, 219, 140, .14), rgba(240, 79, 20, .1));
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .18), 0 10px 30px rgba(0, 0, 0, .35);
}

.btn-molten:hover,
.btn-glass:hover,
.btn-molten:focus-visible,
.btn-glass:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.14);
}

.btn-glass:hover,
.btn-glass:focus-visible {
  border-color: rgba(255, 219, 140, .55);
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .28), 0 14px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(240, 79, 20, .28);
}

/* --- Cartele de sticla: glass-chip / step-chip ------------------------------ */

.glass-chip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 219, 140, .2);
  border-radius: 1rem;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(150deg, rgba(255, 219, 140, .1), rgba(240, 79, 20, .06) 60%, rgba(10, 5, 3, .3));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 232, 175, .12);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.glass-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 219, 140, .4);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .5), 0 0 28px rgba(240, 79, 20, .25), inset 0 1px 0 rgba(255, 232, 175, .18);
}

.glass-chip strong {
  display: block;
  color: var(--hot);
  font-weight: 800;
}

.glass-chip span {
  display: block;
  margin-top: .35rem;
  color: var(--hot-faint);
  font-size: .92rem;
  line-height: 1.44;
}

.step-chip {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.step-node {
  display: grid;
  flex: none;
  width: 2.6rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--obsidian-0);
  background: radial-gradient(circle at 34% 32%, var(--whitehot), var(--gold) 44%, var(--ember) 88%);
  box-shadow: 0 0 22px rgba(240, 79, 20, .5);
  font-weight: 800;
  font-size: .82rem;
}

.steps-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-grid,
.services-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-cta {
  margin-top: var(--space-lg);
}

/* --- Showcase social (platforme + profiluri) --------------------------------- */

.showcase-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.showcase-platform {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.showcase-platform-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: var(--hot);
  font-size: .96rem;
  font-weight: 800;
}

.showcase-icon {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(255, 219, 140, .18), rgba(240, 79, 20, .12));
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .16);
}

.showcase-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* Accent per platforma, ca fiecare coloana sa fie usor de recunoscut vizual. */
.showcase-platform-facebook .showcase-icon {
  color: var(--whitehot);
  background: linear-gradient(150deg, #1877f2, #0d5dc4);
}

.showcase-platform-instagram .showcase-icon {
  color: var(--whitehot);
  background: linear-gradient(150deg, #f6a339, #dd2a7b 55%, #7c3aed);
}

.showcase-platform-tiktok .showcase-icon {
  color: var(--whitehot);
  background: linear-gradient(150deg, #25f4ee, #221f20 55%, #fe2c55);
}

.showcase-platform-youtube .showcase-icon {
  color: var(--whitehot);
  background: linear-gradient(150deg, #ff4b4b, #c4302b);
}

.showcase-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.showcase-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 219, 140, .2);
  border-radius: 1.1rem;
  background: linear-gradient(150deg, rgba(255, 219, 140, .1), rgba(240, 79, 20, .06) 60%, rgba(10, 5, 3, .34));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 232, 175, .12);
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.showcase-card:hover,
.showcase-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 219, 140, .4);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .5), 0 0 28px rgba(240, 79, 20, .25), inset 0 1px 0 rgba(255, 232, 175, .18);
}

.showcase-card:focus-visible {
  outline: 2px solid rgba(255, 201, 61, .8);
  outline-offset: 3px;
}

.showcase-frame {
  position: relative;
  display: grid;
  place-items: center;
  height: 5.4rem;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 219, 140, .16), rgba(240, 79, 20, .16) 55%, rgba(10, 5, 3, .6));
}

.showcase-frame::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 232, 175, .16) 42%, transparent 64%);
  animation: glassSheenDark 7s ease-in-out infinite;
}

.showcase-frame::after {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px dashed rgba(255, 232, 175, .28);
  border-radius: .7rem;
}

.showcase-play {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 232, 175, .35);
  border-radius: 50%;
  color: var(--hot);
  background: rgba(10, 5, 3, .4);
  font-size: .8rem;
}

.showcase-card-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.showcase-handle {
  margin: 0 0 .2rem;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.showcase-card-body h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  color: var(--hot);
  font-weight: 800;
  font-size: 1rem;
}

.showcase-arrow {
  color: var(--gold);
  font-weight: 700;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}

.showcase-card:hover .showcase-arrow,
.showcase-card:focus-visible .showcase-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

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

.faq-list {
  display: grid;
  gap: var(--space-sm);
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(255, 219, 140, .2);
  border-radius: 1rem;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(150deg, rgba(255, 219, 140, .08), rgba(10, 5, 3, .3));
}

.faq-item summary {
  position: relative;
  padding-right: 2rem;
  color: var(--hot);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -.1rem;
  color: var(--gold);
  font-size: 1.3rem;
  transition: transform .22s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: .6rem;
  color: var(--hot-faint);
}

/* --- Contact / footer --------------------------------------------------------- */

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.contact-links a {
  color: var(--hot-dim);
  font-weight: 700;
  text-underline-offset: .2rem;
}

.contact-links a:hover {
  color: var(--gold);
}

.legal {
  margin-top: var(--space-lg);
  color: var(--hot-faint);
  font-size: .8rem;
}

/* --- Reveal-uri (declansate de .is-active pe panou) --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.glass-panel.is-active .reveal {
  opacity: 1;
  transform: translateY(0);
}

.glass-panel.is-active .reveal:nth-child(1) { --reveal-delay: .04s; }
.glass-panel.is-active .reveal:nth-child(2) { --reveal-delay: .1s; }
.glass-panel.is-active .reveal:nth-child(3) { --reveal-delay: .16s; }
.glass-panel.is-active .reveal:nth-child(4) { --reveal-delay: .22s; }
.glass-panel.is-active .panel-head .reveal:nth-child(1) { --reveal-delay: .02s; }
.glass-panel.is-active .panel-head .reveal:nth-child(2) { --reveal-delay: .08s; }
.glass-panel.is-active .panel-head .reveal:nth-child(3) { --reveal-delay: .14s; }
.glass-panel.is-active .features-grid .reveal:nth-child(1),
.glass-panel.is-active .services-grid .reveal:nth-child(1),
.glass-panel.is-active .steps-grid .reveal:nth-child(1) { --reveal-delay: .06s; }
.glass-panel.is-active .features-grid .reveal:nth-child(2),
.glass-panel.is-active .services-grid .reveal:nth-child(2),
.glass-panel.is-active .steps-grid .reveal:nth-child(2) { --reveal-delay: .12s; }
.glass-panel.is-active .features-grid .reveal:nth-child(3),
.glass-panel.is-active .services-grid .reveal:nth-child(3),
.glass-panel.is-active .steps-grid .reveal:nth-child(3) { --reveal-delay: .18s; }
.glass-panel.is-active .features-grid .reveal:nth-child(4),
.glass-panel.is-active .services-grid .reveal:nth-child(4),
.glass-panel.is-active .steps-grid .reveal:nth-child(4) { --reveal-delay: .24s; }
.glass-panel.is-active .features-grid .reveal:nth-child(5),
.glass-panel.is-active .steps-grid .reveal:nth-child(5) { --reveal-delay: .3s; }
.glass-panel.is-active .features-grid .reveal:nth-child(6) { --reveal-delay: .36s; }
.glass-panel.is-active .showcase-grid .reveal:nth-child(1) { --reveal-delay: .06s; }
.glass-panel.is-active .showcase-grid .reveal:nth-child(2) { --reveal-delay: .12s; }
.glass-panel.is-active .showcase-grid .reveal:nth-child(3) { --reveal-delay: .18s; }
.glass-panel.is-active .showcase-grid .reveal:nth-child(4) { --reveal-delay: .24s; }

/* --- Patina arsa (dwell): cu cat vizitatorul sta mai mult pe pagina, cu
   atat panourile de sticla capata o urma de ars, in pas cu lava care urca
   in fundal (--burn 0-6, actualizat din updateDwellBurn in script.js). Se
   opreste la un nivel moderat, ca sa ramana lizibil oricat de mult stai. -- */

body.burn-active .glass-panel,
body.burn-active .glass-chip,
body.burn-active .showcase-card,
body.burn-active .faq-item {
  filter:
    saturate(calc(1 - var(--burn) * .045))
    contrast(calc(1 + var(--burn) * .045))
    brightness(calc(1 - var(--burn) * .035));
}

body.burn-active .glass-panel::after {
  background:
    radial-gradient(circle at 16% 88%, rgba(0, 0, 0, calc(var(--burn) * .1)), transparent 58%),
    radial-gradient(circle at 84% 10%, rgba(0, 0, 0, calc(var(--burn) * .08)), transparent 52%);
  box-shadow:
    inset 0 0 calc(50px + var(--burn) * 12px) rgba(0, 0, 0, calc(.4 + var(--burn) * .06)),
    inset 0 -30px 70px rgba(240, 79, 20, calc(.12 + var(--burn) * .015));
  animation: burnCreep 6s ease-in-out infinite alternate;
}

body.burn-active .glass-panel h1,
body.burn-active .glass-panel h2,
body.burn-active .glass-panel h3 {
  text-shadow: 0 0 calc(30px + var(--burn) * 4px) rgba(255, 201, 61, calc(.3 + var(--burn) * .025));
}

body.burn-active .glass-panel p,
body.burn-active .glass-chip span {
  opacity: calc(1 - var(--burn) * .02);
}

body.burn-level-6 .glass-panel,
body.burn-level-6 .glass-chip,
body.burn-level-6 .showcase-card,
body.burn-level-6 .faq-item {
  filter: saturate(.76) contrast(1.24) brightness(.8);
}

/* --- No-JS: deck static, complet lizibil fara scriptare ----------------------- */

.no-js .glass-panel {
  position: relative;
  margin: 0 auto var(--space-lg);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.no-js .sticky-viewport {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  min-height: auto;
}

.no-js .scrolly-stage,
.no-js .scroll-triggers {
  min-height: auto;
}

.no-js .scroll-triggers,
.no-js .panel-dots,
.no-js .panel-arrows,
.no-js .fab-cta {
  display: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* --- Responsive: 760px si sub -------------------------------------------------- */

@media (max-width: 880px) {
  .scrolly-stage { min-height: auto; padding: 12rem 0 2rem; }

  .sticky-viewport {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    min-height: auto;
    padding: var(--space-md) var(--space-sm) var(--space-xl);
  }

  .glass-panel {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 48px);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    justify-self: center;
  }

  .glass-panel.is-past {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* .scroll-triggers e ascuns pe mobil, deci IntersectionObserver-ul care
     adauga .is-active nu mai ruleaza pentru panourile 1-6 — continutul
     .reveal trebuie sa fie mereu vizibil aici, nu conditionat de is-active. */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .steps-grid,
  .features-grid,
  .services-grid,
  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .steps-grid,
  .features-grid,
  .services-grid,
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .glass-panel { max-width: calc(100vw - 32px); }
}

/* ============================================================================
   ReelForge (pagina de comanda) — acelasi sistem vizual intunecat, dar fara
   mecanica de deck: aici .glass-panel e un panou static, nu un slide.
   ============================================================================ */

.order-page .glass-panel {
  position: relative;
  width: 100%;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overflow-wrap: break-word;
}

.form-upsell {
  margin-top: var(--space-sm);
  color: var(--hot-faint);
  font-size: .84rem;
}

.form-upsell a {
  color: var(--gold);
  font-weight: 700;
}

.type-tiles label {
  border-color: rgba(255, 219, 140, .22);
  background: linear-gradient(145deg, rgba(255, 219, 140, .1), rgba(240, 79, 20, .06));
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .12), 0 12px 32px rgba(0, 0, 0, .35);
}

.type-tiles span {
  color: var(--hot-dim);
}

.type-tiles label:has(input:checked) {
  background: linear-gradient(135deg, rgba(255, 219, 140, .28), rgba(240, 79, 20, .18));
  box-shadow: 0 0 30px rgba(240, 79, 20, .35), inset 0 0 24px rgba(255, 232, 175, .12);
}

.type-tiles label:has(input:checked) span {
  color: var(--hot);
}

.field label {
  color: var(--hot-faint);
}

.field input,
.field select,
.field textarea {
  border-color: rgba(255, 219, 140, .2);
  color: var(--hot);
  background: rgba(255, 219, 140, .06);
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .1);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(240, 79, 20, .6);
  box-shadow: 0 0 0 4px rgba(240, 79, 20, .18), inset 0 1px 0 rgba(255, 232, 175, .14);
}

.field select option {
  color: #000;
}

.drop-zone {
  border-color: rgba(255, 219, 140, .22);
  background: linear-gradient(145deg, rgba(255, 219, 140, .1), rgba(240, 79, 20, .06));
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .12), 0 12px 32px rgba(0, 0, 0, .3);
}

.drop-zone:hover,
.drop-field.selected .drop-zone {
  box-shadow: 0 0 28px rgba(240, 79, 20, .3), inset 0 1px 0 rgba(255, 232, 175, .16);
}

.drop-zone strong {
  color: var(--hot);
}

.drop-zone small {
  color: var(--hot-faint);
}

.form-state {
  color: var(--hot-dim);
  background: linear-gradient(145deg, rgba(255, 219, 140, .1), rgba(240, 79, 20, .06));
  border-color: rgba(255, 219, 140, .2);
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, .1);
}

.form-note {
  margin: .7rem 0 0;
  color: var(--hot-faint);
  font-size: .78rem;
  font-style: italic;
}

/* --- Modal "indisponibil": ReelForge -------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(10, 5, 3, .68);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: modalFade .28s ease;
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--space-md));
  overflow-y: auto;
  border: 1px solid transparent;
  border-radius: 1.4rem;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--glass-fill) padding-box, var(--glass-edge) border-box;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(1.3);
  animation: modalRise .32s cubic-bezier(.2, .8, .2, 1);
}

.modal-card h2 {
  margin: 0 0 .7rem;
  color: var(--hot);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  text-shadow: 0 0 30px rgba(255, 201, 61, .3);
}

.modal-card p {
  margin: 0 0 .6rem;
  color: var(--hot-dim);
}

.modal-secondary {
  color: var(--hot-faint);
  font-size: .9rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: var(--space-md);
}

.modal-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 219, 140, .28);
  border-radius: 50%;
  color: var(--hot-dim);
  background: rgba(255, 219, 140, .1);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
  color: var(--hot);
  transform: rotate(90deg);
  box-shadow: 0 0 20px rgba(240, 79, 20, .3);
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalRise {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .modal-actions { flex-direction: column; align-items: stretch; }
  .modal-actions .btn-molten,
  .modal-actions .btn-glass { width: 100%; }
}

/* --- Badge "In curand" pentru CTA-urile ReelForge (dezactivat temporar) ----- */

.btn-pending {
  flex-direction: column;
  gap: .15rem;
}

.cta-badge {
  display: block;
  color: inherit;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .72;
}

@keyframes lavaGlow {
  from { opacity: .82; transform: translateY(0) scaleY(1); }
  to { opacity: 1; transform: translateY(-1.2vh) scaleY(1.06); }
}

@keyframes smokeDrift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.8); }
  15% { opacity: .5; }
  80% { opacity: .28; }
  100% { opacity: 0; transform: translate3d(2rem, -32rem, 0) scale(1.3); }
}

@keyframes emberRise {
  0% { opacity: 0; transform: translate3d(0, 4rem, 0) scale(.75); }
  10% { opacity: .9; }
  90% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(calc((var(--mx, .5) - .5) * 5rem), calc(-108vh - var(--scroll, 0) * 10rem), 0) scale(1); }
}

@keyframes glassSheenDark {
  0%, 100% { transform: translateX(-16%) skewX(-8deg); opacity: .5; }
  50% { transform: translateX(16%) skewX(-8deg); opacity: .85; }
}

@keyframes moltenShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}