/* Homepage — a product story: what LedCommerce is → how it works → what you give → what we
   calculate → how to buy → product families → solutions → 3D → engineering trust → start. */

/* =========================================================== HERO */
.lc-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 1rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background:
    radial-gradient(60% 55% at 75% 35%, rgba(255, 107, 26, 0.1), transparent 70%),
    linear-gradient(180deg, var(--lc-graphite-950), var(--lc-graphite-990));
}

@media (min-width: 1024px) {
  .lc-hero { min-height: min(calc(100svh - var(--lc-header-h)), 920px); display: grid; align-content: center; }
}

.lc-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 68% 45%, #000 15%, transparent 72%);
  pointer-events: none;
}

.lc-hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .lc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

.lc-hero__copy { display: grid; gap: var(--lc-space-6); align-content: start; }

.lc-hero__title { font-size: clamp(2.35rem, 1.05rem + 3.5vw, 3.85rem); }
.lc-hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lc-hero__line > span { display: block; }

.lc-hero__title em {
  font-style: normal;
  background: linear-gradient(var(--lc-signal-500), var(--lc-signal-500)) 0 92% / 100% 0.09em no-repeat;
  padding-bottom: 0.02em;
}

.lc-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-2) var(--lc-space-5);
  margin: 0;
  padding: var(--lc-space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--lc-border);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  letter-spacing: 0.04em;
  color: var(--lc-text-muted);
}

.lc-hero__facts li { display: inline-flex; align-items: center; gap: var(--lc-space-2); }
.lc-hero__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--lc-accent); }

.lc-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-2);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  color: var(--lc-text-subtle);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.lc-hero__scroll .lc-icon { transform: rotate(90deg); transition: transform var(--lc-dur) var(--lc-ease); }
.lc-hero__scroll:hover { color: var(--lc-text); text-decoration: none; }
.lc-hero__scroll:hover .lc-icon { transform: rotate(90deg) translateX(3px); }

/* Entrance: headline lines rise from a mask, then supporting copy. Pure CSS, plays once. */
@keyframes lc-line-in { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes lc-underline { from { background-size: 0 0.09em; } to { background-size: 100% 0.09em; } }

@media (prefers-reduced-motion: no-preference) {
  .lc-hero__line > span { animation: lc-line-in 1s var(--lc-ease-out) both; animation-delay: calc(80ms + var(--i) * 90ms); }
  .lc-hero__in { animation: lc-rise 0.8s var(--lc-ease-out) both; animation-delay: calc(160ms + var(--i) * 90ms); }
  .lc-hero__title em { animation: lc-underline 0.9s var(--lc-ease-out) 1.1s both; }
}

/* ---------- Hero visual: the assembling LED wall ---------- */
.lc-assembly {
  position: relative;
  margin: 0;
  padding: 2.25rem 0 6rem 2.25rem;
}

.lc-assembly__wall {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 4px;
  background: #050506;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 140px -30px rgba(255, 107, 26, 0.22);
  isolation: isolate;
}

.lc-assembly__cab {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1px;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.08) calc(50% - 0.5px), rgba(255, 255, 255, 0.08) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.08) calc(50% - 0.5px), rgba(255, 255, 255, 0.08) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.lc-assembly__cab--focus::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--lc-signal-400);
  border-radius: 2px;
  box-shadow: 0 0 22px rgba(255, 107, 26, 0.45);
}

.lc-assembly__light {
  position: absolute;
  inset: 3px;
  z-index: 1;
  overflow: hidden;
  border-radius: 2px;
}

.lc-assembly__content {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(55% 75% at 22% 68%, rgba(255, 112, 36, 0.95), transparent 62%),
    radial-gradient(50% 70% at 72% 32%, rgba(112, 148, 214, 0.9), transparent 64%),
    radial-gradient(38% 55% at 90% 88%, rgba(255, 196, 140, 0.6), transparent 70%),
    linear-gradient(135deg, #1b1e23, #0c0e11);
}

.lc-assembly__light::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.07) 0.5px, transparent 0.9px, rgba(5, 5, 6, 0.5) 1.3px);
  background-size: 5px 5px;
}

.lc-assembly__dim {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lc-text-subtle);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lc-assembly__dim--x { top: 0.6rem; left: 2.25rem; right: 0; height: 1rem; border-inline: 1px solid var(--lc-border-strong); transform-origin: left; }
.lc-assembly__dim--x::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--lc-border-strong); }
.lc-assembly__dim--y { top: 2.25rem; left: 0.4rem; width: 1rem; bottom: 6rem; border-block: 1px solid var(--lc-border-strong); transform-origin: top; }
.lc-assembly__dim--y::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--lc-border-strong); }
.lc-assembly__dim span { position: relative; padding: 0 0.5rem; background: var(--lc-graphite-950); white-space: nowrap; }
.lc-assembly__dim--y span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.5rem 0; }

.lc-assembly__tag {
  position: absolute;
  top: 1.65rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--lc-signal-500);
  border-radius: var(--lc-radius-xs);
  background: var(--lc-graphite-950);
  color: var(--lc-text);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
}

.lc-assembly__inside {
  position: absolute;
  top: 34%;
  right: -0.5rem;
  z-index: 3;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-sm);
  background: color-mix(in srgb, var(--lc-graphite-950) 88%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--lc-text-xs);
  color: var(--lc-text);
  box-shadow: var(--lc-shadow-lg);
}

.lc-assembly__inside span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lc-assembly__inside .lc-icon { color: var(--lc-signal-400); }
.lc-assembly__inside-title { font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-text-subtle); }

.lc-assembly__rack {
  position: absolute;
  left: 12%;
  bottom: 3.1rem;
  display: grid;
  justify-items: start;
}

.lc-assembly__cable {
  position: absolute;
  left: 1.1rem;
  bottom: 100%;
  width: 1px;
  height: 3.15rem;
  background: linear-gradient(var(--lc-signal-400), var(--lc-border-strong));
  transform-origin: top;
}

.lc-assembly__unit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-xs);
  background: var(--lc-graphite-900);
  font-size: var(--lc-text-xs);
}

.lc-assembly__unit .lc-icon { color: var(--lc-signal-400); }

.lc-assembly__bom {
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 40%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-assembly__bom li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xs);
  background: var(--lc-graphite-900);
  font-size: var(--lc-text-xs);
  color: var(--lc-text);
}

.lc-assembly__bom li .lc-icon { color: var(--lc-ok-text); }
.lc-assembly__bom li.is-total { border-color: var(--lc-signal-500); }
.lc-assembly__bom li.is-total .lc-icon { color: var(--lc-signal-400); }

.lc-assembly__caption {
  position: absolute;
  left: 2.25rem;
  bottom: 0.45rem;
  color: var(--lc-text-subtle);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .lc-assembly { padding: 1.75rem 0 0 1.75rem; }
  .lc-assembly__dim--x { left: 1.75rem; }
  .lc-assembly__dim--y { top: 1.75rem; bottom: auto; height: calc((100vw - 2 * var(--lc-gutter) - 1.75rem) * 9 / 16); }
  .lc-assembly__inside, .lc-assembly__rack, .lc-assembly__caption { display: none; }
  .lc-assembly__tag { top: 1.2rem; }
  .lc-assembly__bom { position: static; justify-content: flex-start; margin-top: var(--lc-space-4); }
}

/* Sequence: cabinets arrive → wall lights up left to right → dimensions, cabling, contents →
   technical list. Runs once on load; the content drift loops slowly and pauses off-screen. */
@keyframes lc-cab-in { from { opacity: 0; transform: translate3d(0, -12px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lc-light-on { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  .lc-assembly__cab { animation: lc-cab-in 0.55s var(--lc-ease-out) both; animation-delay: calc(250ms + (var(--r) * 5 + var(--c)) * 55ms); }
  .lc-assembly__light { animation: lc-light-on 1.3s var(--lc-ease-in-out) 1.2s both; }
  .lc-assembly__content { animation: lc-drift 18s ease-in-out 2.5s infinite alternate; }
  .lc-assembly__dim--x { animation: lc-grow-x 0.8s var(--lc-ease-out) 1.6s both; }
  .lc-assembly__dim--y { animation: lc-grow-y 0.8s var(--lc-ease-out) 1.7s both; }
  .lc-assembly__cab--focus::after { animation: lc-fade 0.5s var(--lc-ease-out) 2.2s both; }
  .lc-assembly__tag { animation: lc-rise 0.5s var(--lc-ease-out) 2.3s both; }
  .lc-assembly__inside { animation: lc-rise 0.6s var(--lc-ease-out) 2.5s both; }
  .lc-assembly__cable { animation: lc-grow-y 0.6s var(--lc-ease-out) 2.1s both; }
  .lc-assembly__unit { animation: lc-rise 0.5s var(--lc-ease-out) 2.4s both; }
  .lc-assembly__bom li { animation: lc-rise 0.45s var(--lc-ease-out) both; animation-delay: calc(2.8s + var(--i) * 110ms); }
  .lc-assembly__caption { animation: lc-fade 0.6s ease 3.4s both; }
}

/* =========================================================== 2. WHAT IS LEDCOMMERCE */
.lc-intro__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .lc-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.lc-intro__statement { display: grid; gap: var(--lc-space-6); }
.lc-intro__statement .lc-h2 { max-width: 22ch; }

.lc-compare {
  display: grid;
  gap: var(--lc-space-3);
}

@media (min-width: 640px) {
  .lc-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lc-compare__col {
  padding: var(--lc-space-6);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: transparent;
}

.lc-compare__col--lc {
  background: var(--lc-graphite-950);
  border-color: var(--lc-graphite-950);
  color: #f2f3f4;
  box-shadow: var(--lc-shadow-lg);
}

.lc-compare__label {
  margin: 0 0 var(--lc-space-4);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-2xs);
  letter-spacing: var(--lc-tracking-caps);
  text-transform: uppercase;
  color: var(--lc-text-subtle);
}

.lc-compare__col--lc .lc-compare__label { color: var(--lc-signal-400); }

.lc-compare ul { display: grid; gap: var(--lc-space-3); margin: 0; padding: 0; list-style: none; font-size: var(--lc-text-sm); }
.lc-compare__col:not(.lc-compare__col--lc) li { color: var(--lc-text-muted); padding-left: 1.1rem; position: relative; }
.lc-compare__col:not(.lc-compare__col--lc) li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.55rem; height: 1px; background: var(--lc-text-subtle); }
.lc-compare__col--lc li { display: flex; gap: var(--lc-space-2); align-items: flex-start; }
.lc-compare__col--lc li .lc-icon { color: var(--lc-signal-400); margin-top: 0.15rem; }

/* =========================================================== 3. SCROLL STORY */
.lc-story__layout {
  display: grid;
  gap: var(--lc-space-10);
}

@media (min-width: 1024px) {
  .lc-story__layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(3rem, 2rem + 3vw, 5.5rem); align-items: start; }
}

.lc-story__stage { display: none; }

@media (min-width: 1024px) {
  .lc-story__stage {
    display: grid;
    gap: var(--lc-space-4);
    position: sticky;
    top: calc(var(--lc-header-h) + 2.5rem);
    height: min(72vh, 640px);
    grid-template-rows: minmax(0, 1fr) auto;
  }
}

.lc-story__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(70% 70% at 50% 40%, var(--lc-graphite-850), var(--lc-graphite-990));
}

.lc-story__meter {
  position: relative;
  height: 2px;
  background: var(--lc-border);
  border-radius: 2px;
  overflow: hidden;
}

.lc-story__meter span {
  position: absolute;
  inset: 0;
  background: var(--lc-signal-500);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.lc-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition: opacity 0.55s var(--lc-ease-out), transform 0.7s var(--lc-ease-out), visibility 0s linear 0.55s;
}

:is([data-active="1"] [data-scene="1"], [data-active="2"] [data-scene="2"], [data-active="3"] [data-scene="3"],
    [data-active="4"] [data-scene="4"], [data-active="5"] [data-scene="5"], [data-active="6"] [data-scene="6"]) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.55s var(--lc-ease-out) 0.1s, transform 0.7s var(--lc-ease-out) 0.1s, visibility 0s;
}

/* Inner parts appear one by one each time their scene becomes active. */
.lc-scene :is(.lc-scene__rows > div, .lc-scene__bom li, .lc-scene__calc li, .lc-scene__lines li, .lc-scene__track li, .lc-scene__bp-grid span, .lc-iso span) {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.45s var(--lc-ease-out), transform 0.45s var(--lc-ease-out);
}

:is([data-active="1"] [data-scene="1"], [data-active="2"] [data-scene="2"], [data-active="3"] [data-scene="3"],
    [data-active="4"] [data-scene="4"], [data-active="5"] [data-scene="5"], [data-active="6"] [data-scene="6"])
  :is(.lc-scene__rows > div, .lc-scene__bom li, .lc-scene__calc li, .lc-scene__lines li, .lc-scene__track li, .lc-scene__bp-grid span, .lc-iso span) {
  opacity: 1;
  transform: none;
  transition-delay: calc(250ms + var(--i, 0) * 90ms);
}

.lc-scene__card {
  width: min(100%, 25rem);
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-md);
  background: var(--lc-graphite-900);
  box-shadow: var(--lc-shadow-lg);
  overflow: hidden;
}

.lc-scene__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lc-space-3);
  padding: var(--lc-space-4) var(--lc-space-5);
  border-bottom: 1px solid var(--lc-border);
  background: var(--lc-graphite-850);
  font-size: var(--lc-text-sm);
}

.lc-scene__rows { margin: 0; padding: var(--lc-space-2) var(--lc-space-5) var(--lc-space-4); }
.lc-scene__rows div { display: flex; justify-content: space-between; gap: var(--lc-space-4); padding: var(--lc-space-3) 0; border-bottom: 1px dashed var(--lc-border); font-size: var(--lc-text-sm); }
.lc-scene__rows div:last-child { border-bottom: 0; }
.lc-scene__rows dt { color: var(--lc-text-muted); }
.lc-scene__rows dd { margin: 0; font-family: var(--lc-font-mono); }

.lc-scene__blueprint { position: relative; width: min(100%, 28rem); }

.lc-scene__bp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  aspect-ratio: 16 / 9;
}

.lc-scene__bp-grid span { border: 1px dashed rgba(255, 132, 66, 0.55); border-radius: 2px; background: rgba(255, 107, 26, 0.05); }

.lc-scene__lens {
  position: absolute;
  right: -1rem;
  top: -1.25rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px solid var(--lc-signal-400);
  background: var(--lc-graphite-990);
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(255, 107, 26, 0.08);
}

.lc-scene__lens .lc-pixels { position: absolute; inset: 0; --lc-pixel-gap: 11px; animation: lc-pulse-dot 2.4s ease-in-out infinite; }

.lc-scene__calc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lc-space-2) var(--lc-space-4);
  margin: var(--lc-space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--lc-text-xs);
  color: var(--lc-text-muted);
}

.lc-scene__calc li { display: grid; gap: 0.35rem; }
.lc-scene__calc li span { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--lc-graphite-800), var(--lc-signal-600), var(--lc-graphite-800)); background-size: 200% 100%; animation: lc-shimmer 1.8s linear infinite; }
.lc-scene__note { position: absolute; left: 0; bottom: -2.25rem; }

.lc-scene__bom, .lc-scene__lines { margin: 0; padding: var(--lc-space-2) var(--lc-space-5) var(--lc-space-4); list-style: none; }
.lc-scene__bom li, .lc-scene__lines li { display: flex; align-items: center; gap: var(--lc-space-3); padding: 0.6rem 0; border-bottom: 1px dashed var(--lc-border); font-size: var(--lc-text-sm); }
.lc-scene__bom li:last-child, .lc-scene__lines li:last-child { border-bottom: 0; }
.lc-scene__bom li > .lc-icon { color: var(--lc-text-muted); }
.lc-scene__bom li span, .lc-scene__lines li span { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lc-ok-text); }
.lc-scene__lines li span { color: var(--lc-text-subtle); }
.lc-scene__total { display: flex; justify-content: space-between; align-items: center; padding: var(--lc-space-4) var(--lc-space-5); border-top: 1px solid var(--lc-border); background: var(--lc-graphite-850); font-size: var(--lc-text-sm); }
.lc-scene__total span { color: var(--lc-text-muted); }
.lc-scene__total strong { color: var(--lc-signal-400); }

.lc-scene__iso { position: relative; width: min(100%, 26rem); perspective: 1200px; }
.lc-scene__iso .lc-scene__note { bottom: -2.5rem; }

.lc-scene__track { position: relative; width: min(100%, 28rem); padding-top: 3.5rem; }
.lc-scene__rail { position: absolute; left: 6%; right: 6%; top: 4.6rem; height: 2px; background: var(--lc-border-strong); }
.lc-scene__truck { position: absolute; top: 2.2rem; left: 6%; color: var(--lc-signal-400); transform: translateX(-50%); transition: left 2.2s var(--lc-ease-in-out) 0.5s; }
[data-active="6"] [data-scene="6"] .lc-scene__truck { left: 94%; }
.lc-scene__track ol { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.lc-scene__track li { display: grid; justify-items: center; gap: var(--lc-space-3); font-size: var(--lc-text-sm); width: 33%; }
.lc-scene__track li:first-child { justify-items: start; }
.lc-scene__track li:last-child { justify-items: end; }
.lc-scene__track li span { width: 0.85rem; height: 0.85rem; border-radius: 2px; background: var(--lc-graphite-990); border: 2px solid var(--lc-signal-500); }

/* Isometric cabinet wall (shared by scene 4 and the 3D section) */
.lc-iso {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  aspect-ratio: 16 / 9;
  transform: rotateY(-32deg) rotateX(8deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.6));
}

.lc-iso::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -18%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 107, 26, 0.18), transparent);
  transform: rotateX(80deg);
}

.lc-iso { position: relative; }

.lc-iso span {
  border: 1px solid rgba(255, 140, 80, 0.6);
  background: linear-gradient(135deg, rgba(255, 107, 26, 0.14), rgba(255, 107, 26, 0.02));
  border-radius: 1px;
}

/* Steps */
.lc-story__steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-story__steps::before,
.lc-story__steps::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 1px;
  background: var(--lc-border-strong);
}

.lc-story__steps::after {
  background: var(--lc-signal-500);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.lc-story__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--lc-space-5);
  padding-block: var(--lc-space-6);
}

@media (min-width: 1024px) {
  .lc-story__step { min-height: 58vh; align-items: center; padding-block: 0; }
  .lc-story__step:first-child { min-height: 40vh; align-items: start; padding-top: 4vh; }
  .lc-story__step:last-child { min-height: 34vh; align-items: start; }
}

.lc-story__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--lc-radius-sm);
  border: 1px solid var(--lc-border-strong);
  background: var(--lc-graphite-950);
  color: var(--lc-text-muted);
  transition: border-color var(--lc-dur-slow) var(--lc-ease), color var(--lc-dur-slow) var(--lc-ease), box-shadow var(--lc-dur-slow) var(--lc-ease);
}

.lc-story__step:is(.is-active, .is-past) .lc-story__node { border-color: var(--lc-signal-500); color: var(--lc-signal-400); }
.lc-story__step.is-active .lc-story__node { box-shadow: 0 0 0 5px rgba(255, 107, 26, 0.12); }

.lc-story__body { display: grid; gap: var(--lc-space-2); transition: opacity var(--lc-dur-slow) var(--lc-ease); }

@media (min-width: 1024px) {
  .motion-ok .lc-story__step:not(.is-active) .lc-story__body { opacity: 0.38; }
}

.lc-story__index { display: flex; align-items: center; gap: var(--lc-space-3); font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-subtle); letter-spacing: 0.08em; }
.lc-story__who { padding: 0.1rem 0.45rem; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-xs); text-transform: uppercase; font-size: var(--lc-text-2xs); }
.lc-story__who.is-you { border-color: var(--lc-signal-500); color: var(--lc-signal-400); }
.lc-story__title { font-size: var(--lc-text-2xl); letter-spacing: var(--lc-tracking-tight); }
.lc-story__text { margin: 0; color: var(--lc-text-muted); max-width: 30rem; }

/* =========================================================== 4. INPUTS */
.lc-inputs__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .lc-inputs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lc-inputs__intro { position: sticky; top: calc(var(--lc-header-h) + 2rem); }
}

.lc-inputs__intro { display: grid; gap: var(--lc-space-6); align-content: start; }

.lc-inputs__map {
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface-raised);
  overflow: hidden;
}

.lc-inputs__map-title { margin: 0; padding: var(--lc-space-4) var(--lc-space-5); border-bottom: 1px solid var(--lc-border); font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); letter-spacing: var(--lc-tracking-caps); text-transform: uppercase; color: var(--lc-text-subtle); }
.lc-inputs__map ul { margin: 0; padding: 0; list-style: none; }

.lc-inputs__map li {
  display: grid;
  grid-template-columns: 7.5rem auto minmax(0, 1fr);
  gap: var(--lc-space-3);
  align-items: center;
  padding: var(--lc-space-3) var(--lc-space-5);
  border-bottom: 1px solid var(--lc-border);
  font-size: var(--lc-text-sm);
  transition: background-color var(--lc-dur) var(--lc-ease);
}

.lc-inputs__map li:last-child { border-bottom: 0; }
.lc-inputs__map li > span:first-child { font-weight: var(--lc-weight-semibold); }
.lc-inputs__map li > span:last-child { color: var(--lc-text-muted); }
.lc-inputs__map li .lc-icon { color: var(--lc-text-subtle); transition: color var(--lc-dur) var(--lc-ease), transform var(--lc-dur) var(--lc-ease); }
.lc-inputs__map li.is-answered { background: color-mix(in srgb, var(--lc-accent) 7%, transparent); }
.lc-inputs__map li.is-answered .lc-icon { color: var(--lc-accent-text); transform: translateX(3px); }
.lc-inputs__map li.is-answered > span:last-child { color: var(--lc-text); }

@media (max-width: 479px) {
  .lc-inputs__map li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .lc-inputs__map li .lc-icon { display: none; }
}

.lc-quiz {
  display: grid;
  gap: var(--lc-space-8);
  padding: clamp(1.25rem, 0.75rem + 2.4vw, 2.5rem);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-surface-raised);
  box-shadow: var(--lc-shadow-md);
}

.lc-quiz__q legend {
  display: flex;
  align-items: baseline;
  gap: var(--lc-space-3);
  margin-bottom: var(--lc-space-4);
  font-size: var(--lc-text-lg);
  font-weight: var(--lc-weight-semibold);
}

.lc-quiz__dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lc-space-4); max-width: 26rem; }
.lc-quiz__submit { display: grid; gap: var(--lc-space-3); justify-items: start; padding-top: var(--lc-space-6); border-top: 1px solid var(--lc-border); }

/* =========================================================== 5. ENGINE DIAGRAM */
.lc-engine {
  display: grid;
  gap: var(--lc-space-8);
  align-items: center;
  justify-items: center;
}

@media (min-width: 1024px) {
  .lc-engine { grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.5fr); gap: 0; justify-items: stretch; }
}

.lc-engine__inputs,
.lc-engine__outputs { display: grid; gap: var(--lc-space-3); margin: 0; padding: 0; list-style: none; width: 100%; }

.lc-engine__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-engine__outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .lc-engine__inputs { grid-template-columns: 1fr; padding-right: 4rem; }
  .lc-engine__outputs { padding-left: 4rem; }
}

.lc-engine__inputs li,
.lc-engine__outputs li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lc-space-2);
  min-height: 2.75rem;
  padding: 0 var(--lc-space-4);
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-sm);
  background: var(--lc-graphite-900);
  font-size: var(--lc-text-sm);
}

.lc-engine__inputs li { border-style: dashed; color: var(--lc-text-muted); }
.lc-engine__outputs li .lc-icon { color: var(--lc-signal-400); }
.lc-engine__outputs li.is-total { border-color: var(--lc-signal-500); background: color-mix(in srgb, var(--lc-signal-500) 10%, var(--lc-graphite-900)); }

@media (min-width: 1024px) {
  .lc-engine__inputs li::after,
  .lc-engine__outputs li::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 4rem;
    background: linear-gradient(90deg, var(--lc-border-strong), var(--lc-signal-500));
    transform-origin: left;
  }

  .lc-engine__inputs li::after { left: 100%; }
  .lc-engine__outputs li::before { right: 100%; background: linear-gradient(90deg, var(--lc-signal-500), var(--lc-border-strong)); }
  .lc-engine__outputs li:nth-child(even)::before { display: none; }
}

.lc-engine__core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--lc-space-3);
  width: 15rem;
  padding: var(--lc-space-8) var(--lc-space-6);
  border: 1px solid var(--lc-signal-500);
  border-radius: var(--lc-radius-lg);
  background: radial-gradient(90% 90% at 50% 20%, rgba(255, 107, 26, 0.16), transparent 70%), var(--lc-graphite-900);
  text-align: center;
  box-shadow: 0 0 0 8px rgba(255, 107, 26, 0.05), 0 30px 60px -30px rgba(255, 107, 26, 0.45);
}

.lc-engine__core strong { font-size: var(--lc-text-lg); }
.lc-engine__core-sub { font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); color: var(--lc-text-subtle); letter-spacing: 0.06em; text-transform: uppercase; }

.lc-engine__chip { display: grid; grid-template-columns: repeat(4, 10px); gap: 5px; padding: 10px; border: 1px solid var(--lc-border-strong); border-radius: var(--lc-radius-xs); }
.lc-engine__chip span { width: 10px; height: 10px; border-radius: 2px; background: var(--lc-signal-500); opacity: 0.35; }

@media (prefers-reduced-motion: no-preference) {
  .lc-engine__chip span { animation: lc-pulse-dot 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
}

/* Activation sequence (only when motion is allowed). */
.motion-ok .lc-engine :is(.lc-engine__inputs li, .lc-engine__outputs li, .lc-engine__core) {
  transition: opacity 0.6s var(--lc-ease-out), transform 0.6s var(--lc-ease-out), border-color 0.6s var(--lc-ease-out);
}
.motion-ok .lc-engine:not(.is-in) :is(.lc-engine__inputs li, .lc-engine__outputs li) { opacity: 0; transform: translate3d(0, 8px, 0); }
.motion-ok .lc-engine:not(.is-in) .lc-engine__core { opacity: 0.25; transform: scale(0.96); }
.motion-ok .lc-engine__inputs li { transition-delay: calc(var(--i) * 90ms); }
.motion-ok .lc-engine__core { transition-delay: 450ms; }
.motion-ok .lc-engine__outputs li { transition-delay: calc(800ms + var(--i) * 70ms); }

@media (min-width: 1024px) {
  .motion-ok .lc-engine .lc-engine__inputs li::after { transition: transform 0.6s var(--lc-ease-out) calc(250ms + var(--i) * 90ms); }
  .motion-ok .lc-engine .lc-engine__outputs li::before { transition: transform 0.6s var(--lc-ease-out) calc(700ms + var(--i) * 70ms); }
  .motion-ok .lc-engine:not(.is-in) .lc-engine__inputs li::after,
  .motion-ok .lc-engine:not(.is-in) .lc-engine__outputs li::before { transform: scaleX(0); }
}

/* =========================================================== 7. PRODUCT FAMILIES */
.lc-families {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .lc-families { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.lc-explode {
  position: relative;
  width: min(100%, 30rem);
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 1600px;
}

.lc-explode__scene {
  position: absolute;
  inset: 0;
  transform: rotateX(58deg) rotateZ(-42deg) translateZ(-60px);
  transform-style: preserve-3d;
}

.lc-explode__layer {
  --k: 0;
  position: absolute;
  inset: 22%;
  transform: translateZ(calc(var(--k) * 10px));
  border-radius: 3px;
  transition: transform 1.2s var(--lc-ease-out), box-shadow var(--lc-dur) var(--lc-ease), border-color var(--lc-dur) var(--lc-ease), background-color var(--lc-dur) var(--lc-ease);
}

.lc-explode.is-in .lc-explode__layer { transform: translateZ(calc(var(--k) * 62px)); }

.lc-explode__layer--guc { --k: 0; display: grid; place-items: center; inset: 34% 30%; border: 1px solid var(--lc-graphite-400); background: var(--lc-paper-200); color: var(--lc-graphite-700); }
.lc-explode__layer--kart { --k: 1; display: grid; place-items: center; border: 1px dashed var(--lc-graphite-400); background: rgba(12, 13, 15, 0.03); }
.lc-explode__board { width: 34%; height: 24%; border: 1px solid var(--lc-graphite-600); border-radius: 2px; background: linear-gradient(135deg, var(--lc-graphite-700), var(--lc-graphite-900)); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.06); }
.lc-explode__layer--kabin { --k: 2; border: 6px solid var(--lc-graphite-800); background: rgba(12, 13, 15, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.lc-explode__layer--modul { --k: 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; background: var(--lc-graphite-950); box-shadow: 0 30px 40px -20px rgba(12, 13, 15, 0.5); }
.lc-explode__layer--modul span { border-radius: 1px; background-color: #121418; background-image: radial-gradient(circle at center, var(--lc-signal-400) 0.9px, transparent 1.4px); background-size: 7px 7px; }

.lc-explode__side {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-xs);
  background: var(--lc-surface-raised);
  font-size: var(--lc-text-xs);
  color: var(--lc-text);
  transition: border-color var(--lc-dur) var(--lc-ease), box-shadow var(--lc-dur) var(--lc-ease);
}

.lc-explode__side--kontrol { left: 2%; bottom: 10%; }
.lc-explode__side--aksesuar { right: 2%; bottom: 4%; }
.lc-explode__caption { position: absolute; left: 0; top: 0; font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-text-subtle); }

/* Highlight the layer that belongs to the hovered / focused family. */
.lc-families:has(.lc-family[data-layer="modul"]:is(:hover, :focus-visible)) .lc-explode [data-layer="modul"],
.lc-families:has(.lc-family[data-layer="kabin"]:is(:hover, :focus-visible)) .lc-explode [data-layer="kabin"],
.lc-families:has(.lc-family[data-layer="kart"]:is(:hover, :focus-visible)) .lc-explode [data-layer="kart"],
.lc-families:has(.lc-family[data-layer="guc"]:is(:hover, :focus-visible)) .lc-explode [data-layer="guc"],
.lc-families:has(.lc-family[data-layer="kontrol"]:is(:hover, :focus-visible)) .lc-explode [data-layer="kontrol"],
.lc-families:has(.lc-family[data-layer="aksesuar"]:is(:hover, :focus-visible)) .lc-explode [data-layer="aksesuar"],
.lc-families:has(.lc-family[data-layer="komple"]:is(:hover, :focus-visible)) .lc-explode [data-layer] {
  border-color: var(--lc-signal-500);
  box-shadow: 0 0 0 2px var(--lc-signal-500), 0 0 30px rgba(255, 107, 26, 0.35);
}

.lc-families__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lc-border); }

.lc-family {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "index name arrow" "index text arrow";
  column-gap: var(--lc-space-4);
  row-gap: 0.15rem;
  align-items: center;
  padding: var(--lc-space-4) var(--lc-space-3);
  border-bottom: 1px solid var(--lc-border);
  color: var(--lc-text);
  text-decoration: none;
  transition: background-color var(--lc-dur) var(--lc-ease), padding var(--lc-dur) var(--lc-ease);
}

.lc-family:hover { background: var(--lc-surface-raised); color: var(--lc-text); text-decoration: none; }
.lc-family__index { grid-area: index; font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }
.lc-family__name { grid-area: name; font-size: var(--lc-text-lg); font-weight: var(--lc-weight-semibold); letter-spacing: -0.01em; }
.lc-family__text { grid-area: text; font-size: var(--lc-text-sm); color: var(--lc-text-muted); }
.lc-family__arrow { grid-area: arrow; color: var(--lc-text-subtle); transition: transform var(--lc-dur) var(--lc-ease), color var(--lc-dur) var(--lc-ease); }
.lc-family:hover .lc-family__arrow, .lc-family:focus-visible .lc-family__arrow { transform: translateX(4px); color: var(--lc-accent-text); }
.lc-family:hover .lc-family__index { color: var(--lc-accent-text); }

/* =========================================================== 8. SOLUTIONS RAIL */
.lc-rail-section { padding-bottom: var(--lc-section-y-compact); }
.lc-rail__head-side { display: grid; gap: var(--lc-space-5); }
.lc-rail__controls { display: flex; gap: var(--lc-space-2); }
.lc-rail__controls .lc-btn:disabled { opacity: 0.35; cursor: default; }

.lc-rail {
  --lc-rail-pad: max(var(--lc-gutter), calc((100vw - var(--lc-container)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 23rem);
  gap: var(--lc-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lc-rail-pad);
  padding: var(--lc-space-2) var(--lc-rail-pad) var(--lc-space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--lc-graphite-600) transparent;
}

.lc-rail:focus-visible { box-shadow: inset var(--lc-focus-ring); }

/* =========================================================== 1b. TECHNICAL ENGINEERING EXPERIENCE: VIDEOS AND PHOTOS */
/* Same rail as the solutions, but each tile keeps its video's own shape at one shared height. */
.lc-reels {
  --lc-rail-pad: max(var(--lc-gutter), calc((100vw - var(--lc-container)) / 2));
  display: flex;
  gap: var(--lc-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lc-rail-pad);
  padding: var(--lc-space-2) var(--lc-rail-pad) var(--lc-space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--lc-graphite-600) transparent;
}

.lc-reels:focus-visible { box-shadow: inset var(--lc-focus-ring); }

.lc-reel {
  flex: 0 0 auto;
  height: clamp(20rem, 64vh, 30rem);
  max-width: 84vw;
  aspect-ratio: var(--lc-reel-ratio, 9 / 16);
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-graphite-900);
  overflow: hidden;
}

.lc-reel__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The section shows the founder's own past work: a quiet note says these were not LED-COM projects. */
.lc-experience-note {
  margin: 0;
  max-width: 40rem;
  padding-left: var(--lc-space-4);
  border-left: 2px solid var(--lc-accent);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
  line-height: 1.55;
}

/* Without published pictures: the four work areas in place of the rail. */
.lc-experience-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--lc-space-4);
  margin: 0;
  padding: var(--lc-space-2) 0 var(--lc-space-6);
  list-style: none;
}

.lc-experience-area {
  display: grid;
  gap: var(--lc-space-3);
  align-content: start;
  padding: var(--lc-space-6);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-graphite-900);
}

.lc-experience-area__icon { color: var(--lc-accent-text); }
.lc-experience-area__title { margin: 0; font-size: var(--lc-text-lg); letter-spacing: var(--lc-tracking-tight); }
.lc-experience-area__text { margin: 0; color: var(--lc-text-muted); font-size: var(--lc-text-sm); }

.lc-solution-tile {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-graphite-900);
  overflow: hidden;
  transition: border-color var(--lc-dur) var(--lc-ease), transform var(--lc-dur) var(--lc-ease);
}

.lc-solution-tile:hover { border-color: var(--lc-border-strong); transform: translateY(-3px); }

.lc-solution-tile__body { display: grid; gap: var(--lc-space-3); align-content: start; padding: var(--lc-space-6); }
.lc-solution-tile__body .lc-badge { justify-self: start; }
.lc-solution-tile__title { font-size: var(--lc-text-xl); letter-spacing: var(--lc-tracking-tight); }
.lc-solution-tile__text { margin: 0; color: var(--lc-text-muted); font-size: var(--lc-text-sm); }
.lc-solution-tile__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lc-space-3); margin-top: var(--lc-space-2); padding-top: var(--lc-space-4); border-top: 1px solid var(--lc-border); }

/* =========================================================== 9. FUTURE 3D */
.lc-future3d { background: radial-gradient(60% 60% at 75% 50%, rgba(255, 107, 26, 0.08), transparent 70%), var(--lc-graphite-990); }

.lc-split {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .lc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.lc-future3d__visual { position: relative; padding: 2rem; perspective: 1400px; }
.lc-future3d__iso { width: min(100%, 32rem); margin-inline: auto; }
.lc-iso--large { gap: 6px; }

.motion-ok .lc-future3d__visual .lc-iso span {
  transition: opacity 0.6s var(--lc-ease-out), transform 0.9s var(--lc-ease-out);
  transition-delay: calc(var(--i) * 60ms);
}

.motion-ok .lc-future3d__visual:not(.is-in) .lc-iso span { opacity: 0; transform: translateZ(48px); }

.lc-future3d__label { position: absolute; font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lc-text-subtle); }
.lc-future3d__label--w { left: 30%; bottom: 4%; }
.lc-future3d__label--h { right: 2%; top: 46%; writing-mode: vertical-rl; }

/* =========================================================== 10. PRINCIPLES */
.lc-principles {
  display: grid;
  gap: var(--lc-space-8) var(--lc-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-principle { display: grid; gap: var(--lc-space-3); align-content: start; padding-top: var(--lc-space-5); border-top: 1px solid var(--lc-border-strong); }
.lc-principle__index { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }
.lc-principle .lc-icon { color: var(--lc-accent-text); }
.lc-principle h3 { font-size: var(--lc-text-lg); }
.lc-principle p { margin: 0; color: var(--lc-text-muted); font-size: var(--lc-text-sm); }

/* =========================================================== 11. FINAL CTA */
.lc-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 3rem + 8vw, 10rem);
  background: var(--lc-graphite-950);
  color: var(--lc-text);
  text-align: center;
}

.lc-final__pixels {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 132, 66, 0.55) 1px, transparent 1.6px);
  background-size: 16px 16px;
  mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  mask-size: 300% 100%;
  -webkit-mask-size: 300% 100%;
  mask-position: 50% 0;
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .lc-final__pixels { animation: lc-pixel-sweep 9s linear infinite; }
}

.lc-final__inner { position: relative; display: grid; justify-items: center; gap: var(--lc-space-6); }
.lc-final__title { max-width: 22ch; }
.lc-final .lc-lead { margin-inline: auto; }
.lc-final .lc-btn-row { justify-content: center; }

/* =========================================================== COMMERCE-FIRST HOME (store theme) */
/* The hero says what can be bought and what LedCommerce builds; category tiles and real catalog products follow
   at once. The assembly illustration, the story, the engine and the layer view keep their own rules above
   unchanged; on the light page the hero illustration sits on a dark plate. */
.lc-home-hero {
  background:
    radial-gradient(55% 60% at 85% 20%, color-mix(in srgb, var(--lc-signal-500) 7%, transparent), transparent 70%),
    linear-gradient(180deg, var(--lc-surface) 0%, var(--lc-store-canvas) 100%);
  padding-block: clamp(1.75rem, 1rem + 3vw, 3.75rem) clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  border-bottom: 1px solid var(--lc-store-line);
}

@media (min-width: 1024px) {
  .lc-home-hero { min-height: 0; }
  .lc-home-hero .lc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
}

.lc-home-hero .lc-hero__copy { gap: var(--lc-space-5); }
.lc-home-hero .lc-hero__title { font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); letter-spacing: -0.035em; }
.lc-home-hero .lc-lead { max-width: 34rem; }
.lc-home-hero .lc-hero__question { font-size: var(--lc-text-md); }

.lc-home-hero .lc-start-card {
  border-color: var(--lc-store-line);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-card);
}

.lc-home-hero .lc-start-card:hover { border-color: var(--lc-text); background: var(--lc-surface); box-shadow: var(--lc-shadow-card-hover); }
.lc-home-hero .lc-start-card .lc-card__icon { background: var(--lc-store-media); border-color: transparent; }
.lc-home-hero .lc-start-card:first-child .lc-card__icon { background: var(--lc-text); color: var(--lc-surface); }
.lc-home-hero .lc-start-card:last-child .lc-card__icon { background: var(--lc-accent); color: var(--lc-on-accent); }

.lc-home-hero__direct { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) var(--lc-space-6); margin: var(--lc-space-1) 0 0; font-size: var(--lc-text-sm); }

.lc-home-hero .lc-hero__facts {
  gap: var(--lc-space-2) var(--lc-space-4);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-text-xs);
  letter-spacing: 0;
  padding-top: var(--lc-space-4);
  border-top-color: var(--lc-store-line);
}

.lc-home-hero .lc-hero__facts li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-ok-text); }

/* The unchanged illustration on its own dark plate (a spread shadow, so its inner layout does not move). */
.lc-home-hero .lc-assembly {
  --lc-plate: clamp(0.875rem, 0.5rem + 1.2vw, 1.5rem);
  background: var(--lc-graphite-950);
  border-radius: calc(var(--lc-radius-xl) - 6px);
  box-shadow: 0 0 0 var(--lc-plate) var(--lc-graphite-950), 0 40px 80px -40px rgba(14, 16, 19, 0.6);
  color: var(--lc-text);
  margin: var(--lc-plate);
}

@media (max-width: 1023px) {
  .lc-home-hero .lc-hero__stage { margin-top: var(--lc-space-2); }
}

/* ---------- Products from the catalog ---------- */
.lc-home-products__group {
  margin: 0 0 var(--lc-space-4);
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-text-subtle);
}

.lc-home-products__group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lc-space-2) var(--lc-space-6);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lc-home-products__grid {
  display: grid;
  gap: var(--lc-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}

/* Phones: one row that scrolls sideways, so the products do not push every other section down. */
@media (max-width: 767px) {
  .lc-home-products__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 19rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lc-gutter);
    margin-inline: calc(-1 * var(--lc-gutter));
    padding: var(--lc-space-1) var(--lc-gutter) var(--lc-space-4);
    scrollbar-width: none;
  }

  .lc-home-products__grid::-webkit-scrollbar { display: none; }
  .lc-home-products__grid > * { scroll-snap-align: start; }
  .lc-theme-store .lc-home-products__grid .lc-product-card:hover { transform: none; }
}

/* ---------- Sections that moved below the shop ---------- */
.lc-theme-store .lc-intro .lc-compare__col:not(.lc-compare__col--lc) { background: var(--lc-surface); border-color: var(--lc-store-line); }
.lc-theme-store .lc-families__list { border-top-color: var(--lc-store-line); }
.lc-theme-store .lc-quiz { background: var(--lc-surface); }

/* Tablets: the illustration keeps a laptop-like size instead of filling the screen width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .lc-home-hero .lc-assembly { max-width: 34rem; margin-inline: auto; }
}

/* ---------- Products from the catalog: small cards (owner, 2026-10-18) ----------
   Four to a row on wide screens, so both groups (playbox, LED modules) fit about one screen height. */
.lc-home-products .lc-store-head { margin-bottom: var(--lc-space-2); }
.lc-home-products .lc-home-products__group-row { margin-top: var(--lc-space-6); margin-bottom: var(--lc-space-3); }
.lc-home-products .lc-home-products__group-row .lc-home-products__group { margin: 0; }
.lc-home-products .lc-home-products__grid { gap: var(--lc-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 1024px) {
  .lc-home-products .lc-home-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* One picture height for both card kinds (the control card sets its own ratio inline). */
.lc-theme-store .lc-home-products .lc-product-card .lc-media-frame { aspect-ratio: auto; height: 8.5rem; }
@media (max-width: 767px) {
  .lc-home-products .lc-home-products__grid { grid-template-columns: none; grid-auto-columns: min(62%, 14rem); }
}
.lc-theme-store .lc-home-products .lc-product-card__body { gap: var(--lc-space-1); padding: var(--lc-space-3) var(--lc-space-4) var(--lc-space-4); }
.lc-theme-store .lc-home-products .lc-product-card__title { font-size: var(--lc-text-sm); min-height: 0; }
.lc-home-products .lc-product-card__kind,
.lc-home-products .lc-cs-card__category,
.lc-home-products .lc-cs-ports-toggle,
.lc-home-products .lc-cs-card__unverified,
.lc-home-products .lc-product-card__specs li:nth-child(n + 3) { display: none; }
.lc-home-products .lc-spec-chip { font-size: 0.6875rem; padding: 0.2rem 0.45rem; }
.lc-theme-store .lc-home-products .lc-product-card__footer { gap: var(--lc-space-2); padding-top: var(--lc-space-2); }
.lc-theme-store .lc-home-products .lc-product-card .lc-price__quote { font-size: var(--lc-text-xs); }
.lc-theme-store .lc-home-products .lc-add-to-cart--compact .lc-btn { min-height: 2.25rem; font-size: var(--lc-text-xs); }

/* ---------- We calculate your screen (owner, 2026-10-18) ---------- */
.lc-home-calc__panel {
  position: relative;
  display: grid;
  gap: var(--lc-space-6);
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  border: 1px solid var(--lc-store-line, var(--lc-border));
  border-radius: var(--lc-radius-xl);
  background: var(--lc-store-canvas, var(--lc-surface-sunken));
  overflow: hidden;
}

/* An accent edge marks the block as the site's offer. */
.lc-home-calc__panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--lc-accent); }
.lc-home-calc__head { display: grid; gap: var(--lc-space-2); max-width: 46rem; }
.lc-home-calc__head .lc-h2, .lc-home-calc__head .lc-lead { margin: 0; }
.lc-home-calc__grid { display: grid; gap: var(--lc-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.lc-home-calc__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lc-space-3);
  min-width: 0;
  padding: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  border: 1px solid var(--lc-store-line, var(--lc-border));
  border-radius: var(--lc-radius-lg);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-card);
}

.lc-home-calc__card .lc-h3, .lc-home-calc__card p { margin: 0; }
.lc-home-calc__card > p:not(.lc-hint) { color: var(--lc-text-muted); }
.lc-home-calc__card > .lc-btn { margin-top: auto; }
.lc-home-calc__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--lc-radius-md); background: var(--lc-accent); color: var(--lc-on-accent); }
.lc-home-calc__card + .lc-home-calc__card .lc-home-calc__icon { background: var(--lc-text); color: var(--lc-surface); }
.lc-home-calc__dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lc-space-3); width: 100%; }
.lc-home-calc__dims .lc-field { min-width: 0; }