@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600&display=swap");
/* ─────────────────────────────────────────────────────────────
   Luma case study — rendered inside the project overlay.
   Same shell, type and motion vocabulary as NOPE, Luma's own look:
   graphite, frosted glass over moving footage, one citrus gradient.
   ───────────────────────────────────────────────────────────── */
.project[data-case="luma"]{
  --lm-a1:#E8E46C;
  --lm-a2:#A9DE96;
  --lm-grad:linear-gradient(100deg,var(--lm-a1) 0%,var(--lm-a2) 100%);
  --lm-ink:#EEF2F5;
  --lm-soft:rgba(238,242,245,.64);
  --lm-faint:rgba(238,242,245,.38);
  --lm-bg:#090C10;
  --lm-glass:rgba(30,37,46,.52);
  --lm-glass-2:rgba(40,48,58,.6);
  --lm-line:rgba(238,242,245,.09);
  --lm-sf:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  /* one typeface for the page (same as NOPE); the rounded face is kept only for the Luma wordmark and the TV mockup */
  --lm-tvf:"Nunito","SF Pro Rounded",ui-rounded,-apple-system,sans-serif;
  --lm-rd:var(--lm-sf);
  --lm-ease:cubic-bezier(.22,1,.36,1);
  --lm-spring:cubic-bezier(.34,1.56,.64,1);
  background:var(--lm-bg);
  transition:--lm-a1 .6s, --lm-a2 .6s;
}
@property --lm-a1{ syntax:"<color>"; inherits:true; initial-value:#E8E46C; }
@property --lm-a2{ syntax:"<color>"; inherits:true; initial-value:#A9DE96; }

.project[data-case="luma"] .project__eyebrow{ font-family:var(--lm-rd); font-weight:800; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.project[data-case="luma"] .project__tags span{ border-color:rgba(169,222,150,.24); }
.project[data-case="luma"] .project__lead{ font-family:var(--lm-sf); letter-spacing:-.01em; }
.project[data-case="luma"] .project__results .r b{ font-family:var(--lm-rd); font-weight:900; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.project[data-case="luma"] .project__next:hover strong{ color:var(--lm-a2); }

/* ── Wordmark ── */
.lw{ display:inline-block; font-family:var(--lm-tvf,"Nunito",sans-serif); font-weight:900; letter-spacing:-.035em; line-height:1; color:var(--lm-ink,#EEF2F5); }
.lw__g{ display:inline-block; padding-right:.04em; background:var(--lm-grad,linear-gradient(100deg,#E8E46C,#A9DE96)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes lm-sheen{ from{ background-position:0% 50% } to{ background-position:100% 50% } }
@keyframes lm-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.72); opacity:.6 } }
.lm-title{ display:flex; flex-direction:column; gap:.2em; }
.lm-title .lw{ font-size:clamp(3.4rem,15vw,7.2rem); }
.lm-title__sub{ font-family:var(--lm-sf); font-weight:600; font-size:clamp(1.3rem,4.6vw,2.3rem); letter-spacing:-.03em; line-height:1.05; color:var(--lm-ink); }

/* ── Hero actions: GitHub first, then support ── */
.lm-actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.lm-btn{ display:inline-flex; align-items:center; gap:.65rem; padding:.85rem 1.25rem .85rem 1.05rem; border-radius:999px; font-family:var(--lm-rd); font-weight:800; font-size:1rem; letter-spacing:-.005em; color:var(--lm-ink); border:1px solid rgba(238,242,245,.16); background:rgba(30,37,46,.55); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:transform .4s var(--lm-spring), border-color .3s, background .3s, box-shadow .4s; white-space:nowrap; }
.lm-btn svg{ width:1.25rem; height:1.25rem; flex:0 0 auto; }
.lm-btn small{ font-family:var(--lm-sf); font-weight:500; font-size:.78rem; opacity:.6; }
.lm-btn:hover{ transform:translateY(-2px); border-color:rgba(238,242,245,.36); background:rgba(40,48,58,.65); }
.lm-btn:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:3px; }
.lm-btn--primary{ color:#0A0F0C; border-color:transparent; background:var(--lm-grad); box-shadow:0 10px 30px -10px rgba(169,222,150,.55); }
.lm-btn--primary:hover{ background:var(--lm-grad); border-color:transparent; box-shadow:0 16px 40px -12px rgba(169,222,150,.75); }
.lm-btn--kofi svg{ color:#FF5E5B; }
.lm-btn--bmc svg{ color:#FFDD00; }
.lm-free{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--lm-soft); padding:.4rem .2rem; }
.lm-free i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--lm-grad); box-shadow:0 0 0 4px rgba(169,222,150,.14); }

/* ── LG OLED mockup: hairline bezel + pedestal; scales with its width ── */
.lm-tv{ container-type:inline-size; position:relative; width:100%; }
.lm-tv__panel{ position:relative; padding:.55cqw; border-radius:1.1cqw; background:#030405;
  box-shadow:0 0 0 .22cqw #23272c, 0 0 0 .32cqw #0b0d0f, 0 4cqw 9cqw -2cqw rgba(0,0,0,.85), 0 0 14cqw -4cqw color-mix(in srgb,var(--lm-a2,#A9DE96) 35%,transparent); }
.lm-tv__screen{ position:relative; aspect-ratio:16/9; border-radius:.5cqw; overflow:hidden; background:#000; isolation:isolate; }
.lm-tv__screen > img, .lm-tv__screen > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lm-tv__screen::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:4; background:linear-gradient(118deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 32%); }
.lm-tv__stand{ position:relative; height:4.4cqw; }
.lm-tv__stand::before{ content:""; position:absolute; left:50%; top:0; width:7cqw; height:2.6cqw; margin-left:-3.5cqw; background:linear-gradient(90deg,#15181b,#3a3f45 50%,#15181b); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.lm-tv__stand::after{ content:""; position:absolute; left:50%; top:2.5cqw; width:30cqw; height:1.2cqw; margin-left:-15cqw; border-radius:50%; background:radial-gradient(closest-side,#2c3136,#111417 70%,transparent); }
.lm-tv--flat .lm-tv__stand{ display:none; }

/* screen stack: crossfading loops */
.lm-stack > *{ opacity:0; transform:scale(1.03); transition:opacity .8s var(--lm-ease), transform 1s var(--lm-ease); }
.lm-stack > .is-on{ opacity:1; transform:none; }

/* Living-room stage behind TVs (the video wallpaper mood: night blue, teal, a touch of citrus) */
.lm-stage{ position:relative; border-radius:28px; overflow:hidden; isolation:isolate; border:1px solid rgba(169,222,150,.12);
  background:
   radial-gradient(60% 55% at 78% 18%, rgba(46,98,170,.5), transparent 70%),
   radial-gradient(55% 50% at 10% 92%, rgba(28,128,128,.45), transparent 70%),
   radial-gradient(40% 40% at 92% 98%, rgba(160,190,60,.22), transparent 70%),
   #070b12; }
.lm-stage::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.06; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* glass surface */
.lm-glass{ background:var(--lm-glass); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.08); }

/* focus ring (the gradient ring Luma draws around the focused tile) */
.lm-ring{ position:relative; }
.lm-ring::after{ content:""; position:absolute; inset:-3px; border-radius:inherit; padding:2px; background:var(--lm-grad); opacity:0; transform:scale(.98);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .35s var(--lm-ease), transform .5s var(--lm-spring); pointer-events:none; }

/* ── Reveal on scroll ── */
.lm [data-lr]{ opacity:0; transform:translate3d(0,28px,0); transition:opacity .9s var(--lm-ease), transform 1.1s var(--lm-ease); transition-delay:calc(var(--i,0) * 70ms); }
.lm [data-lr].is-in{ opacity:1; transform:none; }

/* ── Sections ── */
.lm{ font-family:var(--lm-sf); color:var(--lm-ink); }
.lm-sec{ padding-block:clamp(4rem,11vw,7.5rem); position:relative; }
.lm-sec + .lm-sec{ border-top:1px solid var(--lm-line); }
.lm-kicker{ font-family:var(--lm-rd); font-weight:800; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lm-a2); }
.lm-h{ font-family:var(--lm-sf); font-weight:700; letter-spacing:-.035em; line-height:1.02; font-size:clamp(2rem,7.4vw,3.9rem); margin-top:.9rem; }
.lm-h em, .lm-g{ font-style:normal; font-family:inherit; font-weight:inherit; letter-spacing:inherit; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em; }
.lm-p{ font-size:clamp(1rem,3.2vw,1.15rem); line-height:1.55; color:var(--lm-soft); margin-top:1.3rem; max-width:42ch; }
.lm-head{ max-width:58rem; }
.lm-bleed{ margin-inline:calc(-1 * var(--pad)); }

/* ── HERO (cover) ── */
.project[data-case="luma"] .project__cover{ border-radius:20px; overflow:hidden; }
.lm-hero{ position:relative; width:100%; container:lmhero / inline-size; overflow:hidden; isolation:isolate; background:#05070b; }
.lm-hero::before{ content:""; display:block; padding-top:177.78%; }
.lm-hero__film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.03); transition:opacity 1.2s var(--lm-ease), transform 1.8s var(--lm-ease); }
.lm-hero.is-in .lm-hero__film{ opacity:1; transform:none; }
.lm-hero__play{ position:absolute; z-index:5; left:3cqw; bottom:3cqw; display:inline-flex; align-items:center; gap:1.8cqw; padding:1.8cqw 3.4cqw 1.8cqw 2cqw; border-radius:99px; cursor:pointer; font:inherit; font-family:var(--lm-rd); font-weight:700; font-size:3.2cqw; color:var(--lm-ink); transition:transform .4s var(--lm-spring), background .3s; }
.lm-hero__play:hover{ transform:scale(1.04); background:var(--lm-glass-2); }
.lm-hero__play:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:3px; }
.lm-hero__play i{ width:6cqw; height:6cqw; border-radius:50%; display:grid; place-items:center; background:var(--lm-grad); color:#0A0F0C; }
.lm-hero__play i svg{ width:45%; height:45%; }
.lm-hero__play .is-sound{ display:none; }
.lm-hero.is-sound .lm-hero__play .is-mute{ display:none; }
.lm-hero.is-sound .lm-hero__play .is-sound{ display:inline; }
.lm-hero__play b{ font-weight:inherit; }
@container lmhero (min-width:760px){
  .lm-hero::before{ padding-top:56.25%; }
  .lm-hero__play{ left:1.6cqw; bottom:1.6cqw; font-size:max(12px,.95cqw); gap:.7cqw; padding:.55cqw 1.2cqw .55cqw .6cqw; }
  .lm-hero__play i{ width:max(22px,1.9cqw); height:max(22px,1.9cqw); }
}

/* ── Kinetic statement ── */
.lm-kinetic{ font-family:var(--lm-sf); font-weight:700; letter-spacing:-.035em; line-height:1.08; font-size:clamp(2rem,7.8vw,4.6rem); }
.lm-kinetic .w{ display:inline-block; opacity:.14; transition:opacity .5s var(--lm-ease); }
.lm-kinetic .w.is-lit{ opacity:1; }
.lm-kinetic .w--g{ font-family:inherit; font-weight:inherit; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.05em; }
.lm-kinetic .w--strike{ position:relative; }
.lm-kinetic .w--strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:.09em; border-radius:99px; background:var(--lm-grad); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--lm-ease) .35s; }
.lm-kinetic .w--strike.is-lit{ color:rgba(238,242,245,.45); }
.lm-kinetic .w--strike.is-lit::after{ transform:scaleX(1); }
.lm-kinetic .w--focus{ position:relative; }
.lm-intro{ display:grid; gap:2rem; margin-top:clamp(2.5rem,6vw,4rem); }
.lm-intro p{ font-size:clamp(1.05rem,3.6vw,1.3rem); line-height:1.6; color:var(--lm-soft); }
.lm-intro b{ color:var(--lm-ink); font-weight:600; }
@media (min-width:900px){ .lm-intro{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4rem; } }

/* ── Stats ── */
.lm-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--lm-line); border:1px solid var(--lm-line); border-radius:22px; overflow:hidden; margin-top:clamp(3rem,8vw,5rem); }
.lm-stat{ background:#0B0F14; padding:clamp(1.2rem,3vw,1.8rem); display:flex; flex-direction:column; justify-content:flex-start; gap:.7rem; min-width:0; }
.lm-stat b{ font-family:var(--lm-rd); font-weight:800; font-size:clamp(2rem,6vw,2.8rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; align-self:flex-start; padding-right:.05em; }
.lm-stat span{ font-size:.9rem; color:var(--lm-soft); line-height:1.4; max-width:24ch; }
@media (min-width:900px){ .lm-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── Free & open source band ── */
.lm-oss{ position:relative; margin-top:clamp(2.5rem,6vw,4rem); border-radius:28px; padding:clamp(1.6rem,5vw,3rem); overflow:hidden; isolation:isolate; border:1px solid rgba(169,222,150,.18);
  background:radial-gradient(70% 120% at 100% 0%, rgba(169,222,150,.16), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(232,228,108,.1), transparent 60%), #0C1117; }
.lm-oss__tag{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--lm-rd); font-weight:800; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lm-a1); }
.lm-oss__tag i{ width:.55rem; height:.55rem; border-radius:50%; background:var(--lm-grad); animation:lm-pulse 2.4s ease-in-out infinite; }
.lm-oss h3{ font-family:var(--lm-sf); font-weight:700; font-size:clamp(1.7rem,5.6vw,2.8rem); letter-spacing:-.03em; line-height:1.05; margin-top:.9rem; max-width:22ch; }
.lm-oss p{ color:var(--lm-soft); font-size:clamp(1rem,3.2vw,1.15rem); line-height:1.55; margin-top:.9rem; max-width:52ch; }
.lm-oss .lm-actions{ margin-top:1.6rem; }
.lm-oss__mit{ position:absolute; right:clamp(1rem,4vw,2.4rem); bottom:-.12em; z-index:-1; font-family:var(--lm-rd); font-weight:900; font-size:clamp(5rem,22vw,12rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(169,222,150,.13); pointer-events:none; }

/* ── Tour (sticky TV, steps swap the loop) ── */
.lm-tour{ margin-top:clamp(3rem,8vw,5rem); display:grid; gap:4.5rem; }
.lm-step{ display:grid; gap:1.6rem; align-items:center; }
.lm-step__no{ font-family:var(--lm-rd); font-weight:900; font-size:.95rem; color:#0A0F0C; background:var(--lm-grad); width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; }
.lm-step h3{ font-size:clamp(1.8rem,5.6vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.02; margin-top:1rem; }
.lm-step p{ color:var(--lm-soft); font-size:clamp(1.02rem,3.4vw,1.2rem); line-height:1.55; margin-top:.8rem; max-width:40ch; }
.lm-step__text{ position:relative; }
.lm-step__ghost{ position:absolute; right:0; top:-.15em; z-index:-1; font-family:var(--lm-rd); font-weight:900; font-size:clamp(6rem,30vw,15rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(169,222,150,.13); pointer-events:none; }
.lm-facts{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; max-width:34rem; }
.lm-facts li{ display:flex; align-items:center; gap:.7rem; padding:.8rem .9rem; border-radius:16px; background:var(--lm-glass); border:1px solid var(--lm-line); font-size:.9rem; line-height:1.25; color:var(--lm-ink); }
.lm-facts b{ flex:0 0 auto; width:2rem; height:2rem; border-radius:10px; display:grid; place-items:center; background:rgba(169,222,150,.12); color:var(--lm-a2); font-family:var(--lm-rd); font-weight:900; font-size:.85rem; }
.lm-step__tv{ padding:clamp(1.6rem,6vw,2.6rem) clamp(1rem,5vw,2rem) .6rem; }
@media (min-width:900px){
  /* TV screens are landscape: text runs in a row above a full-width TV */
  .lm-tour{ gap:clamp(5rem,10vw,8rem); }
  .lm-step{ gap:2.4rem; }
  /* same rhythm as the other sections: title, copy, then the facts in one row */
  .lm-step p{ max-width:62ch; }
  .lm-step .lm-facts{ max-width:none; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:1.4rem; }
  .lm-step__ghost{ right:auto; left:-.04em; top:-.35em; }
  .lm-step__tv{ padding:clamp(2.4rem,4vw,3.6rem) 9% 1rem; }
}

/* ── Full-bleed wallpaper film ── */
.lm-wall{ position:relative; margin-top:clamp(2.5rem,6vw,4rem); border-radius:28px; overflow:hidden; isolation:isolate; aspect-ratio:16/9; background:#000; }
.lm-wall video, .lm-wall img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .lm-wall{ aspect-ratio:4/5; } .lm-wall video, .lm-wall img{ object-position:30% 50%; } }
.lm-chiplist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.lm-chiplist span{ font-size:.85rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--lm-line); color:var(--lm-soft); background:rgba(255,255,255,.02); }
.lm-duo{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(.8rem,2vw,1.2rem); }
.lm-duo figure{ border-radius:20px; overflow:hidden; border:1px solid var(--lm-line); }
.lm-duo img{ display:block; width:100%; height:auto; }
@media (min-width:700px){ .lm-duo{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── Interactive remote demo ── */
.lm-demo{ display:grid; gap:clamp(1.6rem,4vw,2.6rem); margin-top:clamp(2.5rem,6vw,4rem); align-items:center; }
.lm-demo__stage{ padding:clamp(1.4rem,5vw,3rem) clamp(1rem,5vw,3rem) clamp(1rem,3vw,1.6rem); }
.lm-ui{ position:absolute; inset:0; container-type:inline-size; font-family:var(--lm-sf); --lm-rd:var(--lm-tvf); color:#fff; overflow:hidden; }
.lm-ui__bg{ position:absolute; inset:-6%; background:
  radial-gradient(80% 60% at 70% 20%, rgba(80,120,190,.55), transparent 70%),
  radial-gradient(70% 60% at 10% 100%, rgba(30,90,110,.6), transparent 70%),
  linear-gradient(180deg,#1b2638,#0d141f); animation:lm-drift 18s ease-in-out infinite alternate; }
.lm-ui__bg::after{ content:""; position:absolute; left:0; right:0; bottom:18%; height:30%; background:linear-gradient(180deg,transparent,rgba(10,16,26,.7)); clip-path:polygon(0 60%,12% 42%,22% 55%,35% 30%,48% 52%,60% 36%,74% 58%,86% 40%,100% 54%,100% 100%,0 100%); }
.lm-ui__top{ position:absolute; left:4.5cqw; right:4.5cqw; top:3.6cqw; display:flex; align-items:flex-start; justify-content:space-between; }
.lm-ui__clock b{ display:block; font-family:var(--lm-rd); font-weight:900; font-size:4.4cqw; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.lm-ui__clock small{ display:block; font-size:1.5cqw; opacity:.8; margin-top:.5cqw; letter-spacing:.02em; text-transform:uppercase; }
.lm-ui__nav{ display:flex; gap:.4cqw; padding:.5cqw; border-radius:99px; background:rgba(12,18,28,.6); font-size:1.55cqw; }
.lm-ui__nav span{ padding:.8cqw 1.8cqw; border-radius:99px; color:rgba(255,255,255,.75); }
.lm-ui__nav span.is-on{ background:var(--lm-grad); color:#0A0F0C; font-weight:600; }
.lm-ui__icons{ display:flex; gap:1cqw; } .lm-ui__icons i{ width:4.2cqw; height:4.2cqw; border-radius:50%; background:rgba(12,18,28,.6); }
.lm-ui__hello{ position:absolute; left:4.5cqw; top:19cqw; font-family:var(--lm-rd); font-weight:900; font-size:5.6cqw; line-height:1.02; letter-spacing:-.03em; max-width:52cqw; }
.lm-ui__hello span{ background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lm-ui__hello small{ display:block; font-family:var(--lm-sf); font-weight:500; font-size:2.1cqw; letter-spacing:-.01em; margin-top:1.2cqw; opacity:.8; }
.lm-ui__w{ position:absolute; right:4.5cqw; top:17cqw; width:30cqw; height:16cqw; border-radius:2.2cqw; padding:1.8cqw; background:linear-gradient(160deg,#4a8fe8,#2f6fd6); box-shadow:0 1.4cqw 3cqw -1cqw rgba(0,0,0,.5); }
.lm-ui__w b{ font-family:var(--lm-rd); font-weight:900; font-size:5cqw; line-height:1; }
.lm-ui__w small{ display:block; font-size:1.4cqw; opacity:.85; margin-top:.4cqw; }
.lm-ui__w i{ position:absolute; right:2cqw; top:1.8cqw; width:5cqw; height:5cqw; border-radius:50%; border:.5cqw solid #fff; box-shadow:0 0 0 .9cqw rgba(255,255,255,.18); animation:lm-spin 14s linear infinite; }
.lm-ui__w i::before{ content:""; position:absolute; inset:-1.7cqw; border-radius:50%; border:.4cqw dashed rgba(255,255,255,.9); }
@keyframes lm-spin{ to{ rotate:360deg } }
.lm-ui__row-label{ position:absolute; left:4.5cqw; font-family:var(--lm-rd); font-weight:800; font-size:1.9cqw; }
.lm-ui__row-label.r1{ top:38.2cqw; } .lm-ui__row-label.r2{ top:51.6cqw; }
.lm-ui__row{ position:absolute; left:4.5cqw; display:flex; gap:1.6cqw; transition:transform .55s var(--lm-ease); }
.lm-ui__row.r1{ top:41.6cqw; } .lm-ui__row.r2{ top:55cqw; }
.lm-tile{ position:relative; flex:0 0 auto; width:13.6cqw; height:7.6cqw; border-radius:1.6cqw; background:#121417; display:grid; place-items:center; font-weight:800; font-size:2cqw; letter-spacing:-.02em; transition:transform .45s var(--lm-spring), box-shadow .45s; box-shadow:0 .8cqw 1.6cqw -.6cqw rgba(0,0,0,.6); }
.lm-tile.lm-ring::after{ inset:-.6cqw; padding:.4cqw; border-radius:2.1cqw; }
.lm-tile.is-focus{ transform:scale(1.1); z-index:2; box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.7); }
.lm-tile.is-focus::after{ opacity:1; transform:none; }
.lm-tile.is-press{ transform:scale(1.02); }
.lm-tile--g{ height:12cqw; width:9cqw; background-size:cover; background-position:center; }
.lm-ui__toast{ position:absolute; left:50%; bottom:3cqw; translate:-50% 2cqw; opacity:0; padding:1cqw 2.4cqw; border-radius:99px; font-size:1.6cqw; background:rgba(12,18,28,.8); transition:opacity .3s, translate .4s var(--lm-spring); white-space:nowrap; }
.lm-ui__toast.is-on{ opacity:1; translate:-50% 0; }
.lm-ui:focus-visible{ outline:none; }
/* remote + accent controls */
.lm-ctrls{ display:grid; gap:1.6rem; }
.lm-remote{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.lm-dpad{ position:relative; width:9.5rem; height:9.5rem; border-radius:50%; background:radial-gradient(circle at 50% 35%,#2a313a,#14181d 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -10px rgba(0,0,0,.8); flex:0 0 auto; }
.lm-dpad button{ position:absolute; appearance:none; border:0; background:transparent; color:var(--lm-soft); cursor:pointer; width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; font-size:1rem; transition:color .2s, background .2s, transform .2s var(--lm-spring); }
.lm-dpad button:hover{ color:var(--lm-ink); background:rgba(255,255,255,.06); }
.lm-dpad button:active{ transform:scale(.88); }
.lm-dpad button:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:1px; }
.lm-dpad [data-k="up"]{ left:50%; top:.25rem; margin-left:-1.5rem; } .lm-dpad [data-k="down"]{ left:50%; bottom:.25rem; margin-left:-1.5rem; }
.lm-dpad [data-k="left"]{ left:.25rem; top:50%; margin-top:-1.5rem; } .lm-dpad [data-k="right"]{ right:.25rem; top:50%; margin-top:-1.5rem; }
.lm-dpad [data-k="ok"]{ left:50%; top:50%; width:3.6rem; height:3.6rem; margin:-1.8rem 0 0 -1.8rem; background:#0d1014; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font-family:var(--lm-rd); font-weight:900; font-size:.85rem; color:var(--lm-ink); }
.lm-dpad [data-k="ok"]:hover{ background:#151a20; }
.lm-remote__hint{ font-size:.92rem; color:var(--lm-soft); line-height:1.5; max-width:22ch; }
.lm-remote__hint kbd{ font-family:var(--lm-rd); font-weight:800; font-size:.78rem; padding:.1rem .45rem; border-radius:6px; border:1px solid var(--lm-line); color:var(--lm-ink); }
.lm-accents h4{ font-family:var(--lm-rd); font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lm-faint); }
.lm-sw{ display:flex; flex-wrap:nowrap; gap:.55rem; margin-top:.9rem; }
.lm-sw button{ position:relative; appearance:none; border:0; cursor:pointer; flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 6px 16px -6px rgba(0,0,0,.7); transition:transform .4s var(--lm-spring); }
.lm-sw button:hover{ transform:scale(1.1); }
.lm-sw button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.lm-sw button::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--lm-ink); opacity:0; transform:scale(.8); transition:opacity .3s, transform .4s var(--lm-spring); }
.lm-sw button.is-on::after{ opacity:1; transform:none; }
.lm-sw__name{ margin-top:.8rem; font-size:.92rem; color:var(--lm-soft); }
.lm-sw__name b{ font-family:var(--lm-rd); font-weight:900; color:var(--lm-ink); }
@media (min-width:900px){
  /* landscape TV on its own row; remote and accents sit in a row underneath */
  .lm-demo__stage{ padding:clamp(2.4rem,4vw,3.6rem) 9% 1.2rem; }
  .lm-ctrls{ grid-template-columns:auto minmax(0,1fr); gap:3rem; align-items:center; padding:0 2%; }
  .lm-remote__hint{ max-width:30ch; }
  .lm-accents{ justify-self:end; max-width:34rem; }
}

/* ── Split (media) ── */
.lm-split{ display:grid; gap:3rem; align-items:center; margin-top:clamp(2.5rem,6vw,4rem); }
.lm-split__media{ padding:clamp(1.4rem,5vw,2.6rem) clamp(1rem,4vw,2.2rem) .6rem; }
@media (min-width:900px){
  /* text in a row above, landscape TV full width below */
  .lm-split{ gap:2.6rem; }
  /* headline on its own line, then copy and its companion (QR card / chips) side by side */
  .lm-split__text > div:last-child{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:4vw; align-items:center; margin-top:1.4rem; }
  .lm-split__text .lm-p, .lm-split__text .lm-qr, .lm-split__text .lm-chiplist{ margin-top:0; }
  .lm-split__text .lm-qr{ max-width:none; }
  .lm-split__media{ padding:clamp(2.4rem,4vw,3.6rem) 9% 1.2rem; }
  .lm-split__duo{ margin-top:0 !important; }
}
.lm-qr{ display:flex; align-items:center; gap:1rem; margin-top:1.8rem; padding:1rem 1.1rem; border-radius:20px; max-width:26rem; }
.lm-qr svg{ width:4.4rem; height:4.4rem; flex:0 0 auto; border-radius:10px; background:#fff; padding:.35rem; }
.lm-qr p{ font-size:.92rem; line-height:1.45; color:var(--lm-soft); text-wrap:pretty; }
.lm-qr b{ display:block; margin-bottom:.25rem; color:var(--lm-ink); font-family:var(--lm-rd); font-weight:800; }
.lm-qr__scan{ position:relative; overflow:hidden; border-radius:10px; flex:0 0 auto; }
.lm-qr__scan::after{ content:""; position:absolute; left:0; right:0; top:0; height:30%; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lm-a2) 55%,transparent)); animation:lm-scan 2.2s ease-in-out infinite; mix-blend-mode:multiply; }
@keyframes lm-scan{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(340%) } }

/* ── Loops rail ── */
.lm-rail{ display:flex; gap:clamp(.9rem,2.4vw,1.5rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(1.2rem,4vw,2.4rem); padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,2.4rem); margin-top:clamp(2rem,5vw,3rem); scrollbar-width:none; cursor:grab; }
.lm-rail::-webkit-scrollbar{ display:none; }
.lm-rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.lm-rail > *{ scroll-snap-align:start; flex:0 0 auto; }
.lm-rail--loops > figure{ width:clamp(17rem,78vw,30rem); }
.lm-rail figcaption{ font-family:var(--lm-rd); font-weight:800; font-size:1rem; margin-top:1rem; }
.lm-rail figcaption small{ display:block; font-family:var(--lm-sf); font-weight:400; color:var(--lm-faint); font-size:.85rem; margin-top:.25rem; }
.lm-rail:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:4px; }
.lm-railbar{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; }
.lm-railbar[hidden]{ display:none; }
.lm-progress{ flex:1; height:2px; background:var(--lm-line); border-radius:2px; overflow:hidden; }
.lm-progress i{ display:block; height:100%; width:20%; background:var(--lm-grad); transform-origin:left; transition:transform .2s linear; }
.lm-nbtn{ width:3rem; height:3rem; border-radius:50%; border:1px solid var(--lm-line); background:rgba(255,255,255,.03); color:var(--lm-ink); cursor:pointer; font-size:1.1rem; display:grid; place-items:center; transition:border-color .3s, background .3s, transform .3s var(--lm-spring); }
.lm-nbtn:hover{ border-color:var(--lm-a2); background:rgba(169,222,150,.08); }
.lm-nbtn:active{ transform:scale(.92); }
.lm-nbtn:disabled{ opacity:.3; pointer-events:none; }
.lm-nbtn:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:3px; }

/* ── Gallery ── */
.lm-filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:clamp(2rem,5vw,3rem); }
.lm-filters button{ appearance:none; cursor:pointer; font:inherit; font-size:.88rem; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--lm-line); background:rgba(255,255,255,.02); color:var(--lm-soft); transition:all .35s var(--lm-ease); }
.lm-filters button:hover{ color:var(--lm-ink); border-color:rgba(238,242,245,.24); }
.lm-filters button.is-on{ color:#0A0F0C; background:var(--lm-grad); border-color:transparent; font-weight:600; }
.lm-filters button:focus-visible{ outline:2px solid var(--lm-a2); outline-offset:2px; }
.lm-filters small{ opacity:.6; margin-left:.3rem; }
.lm-gal{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.5rem,1.6vw,1rem); margin-top:1.4rem; }
.lm-shot{ position:relative; appearance:none; border:0; padding:0; cursor:zoom-in; border-radius:14px; overflow:visible; background:transparent; aspect-ratio:16/9; transition:transform .45s var(--lm-spring), opacity .4s; }
.lm-shot img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; box-shadow:0 10px 24px -12px rgba(0,0,0,.8); }
.lm-shot.lm-ring::after{ inset:-4px; padding:2px; border-radius:17px; }
.lm-shot:hover, .lm-shot:focus-visible{ transform:scale(1.035); z-index:2; outline:none; }
.lm-shot:hover::after, .lm-shot:focus-visible::after{ opacity:1; transform:none; }
.lm-shot.is-hidden{ display:none; }
.lm-shot.is-wide{ grid-column:span 2; }
@media (min-width:900px){ .lm-gal{ grid-template-columns:repeat(4,minmax(0,1fr)); } .lm-shot.is-wide{ grid-row:span 2; aspect-ratio:auto; } }
.lm-lb{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:clamp(.8rem,4vw,3rem); background:rgba(4,6,9,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity .35s var(--lm-ease); }
.lm-lb.is-open{ opacity:1; pointer-events:auto; }
.lm-lb figure{ width:min(100%,1500px); }
.lm-lb img{ display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:12px; transform:scale(.97); transition:transform .45s var(--lm-ease); }
.lm-lb.is-open img{ transform:none; }
.lm-lb figcaption{ display:flex; justify-content:space-between; gap:1rem; margin-top:.9rem; font-family:var(--lm-rd,"Nunito"); font-weight:800; color:#EEF2F5; font-size:.95rem; }
.lm-lb figcaption span{ opacity:.55; font-weight:600; }
.lm-lb__x, .lm-lb__p, .lm-lb__n{ position:absolute; width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(238,242,245,.16); background:rgba(20,26,34,.7); color:#EEF2F5; cursor:pointer; font-size:1.1rem; display:grid; place-items:center; }
.lm-lb__x{ top:1rem; right:1rem; } .lm-lb__p{ left:1rem; top:50%; margin-top:-1.5rem; } .lm-lb__n{ right:1rem; top:50%; margin-top:-1.5rem; }
@media (max-width:640px){ .lm-lb__p, .lm-lb__n{ top:auto; bottom:1rem; margin:0; } }

/* ── Design decisions ── */
.lm-cards{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.lm-card{ position:relative; border-radius:24px; padding:clamp(1.4rem,4vw,2rem); background:var(--lm-glass); border:1px solid var(--lm-line); transition:transform .5s var(--lm-spring), background .4s; }
.lm-card.lm-ring::after{ border-radius:27px; }
.lm-card svg{ width:2.4rem; height:2.4rem; color:var(--lm-a2); }
.lm-card h3{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; margin-top:1.3rem; }
.lm-card p{ color:var(--lm-soft); line-height:1.55; margin-top:.6rem; font-size:1rem; }
@media (hover:hover){ .lm-card:hover{ transform:translateY(-6px) scale(1.01); background:var(--lm-glass-2); } .lm-card:hover::after{ opacity:1; transform:none; } }
@media (min-width:700px){ .lm-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .lm-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ── Design language ── */
.lm-ds{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.lm-dcard{ position:relative; overflow:hidden; border-radius:26px; padding:clamp(1.4rem,4vw,2.2rem); background:#0E1319; border:1px solid var(--lm-line); }
.lm-dcard h4{ font-family:var(--lm-rd); font-weight:800; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lm-faint); }
.lm-logo-card{ display:grid; place-items:center; min-height:16rem; background:radial-gradient(70% 70% at 50% 60%, rgba(46,98,170,.35), transparent 70%), #0E1319; }
.lm-logo-card .lw{ font-size:clamp(3.4rem,15vw,6.4rem); }
.lm-logo-card h4, .lm-glass-card h4{ position:absolute; top:1.4rem; left:1.6rem; }
.lm-glass-card{ min-height:16rem; display:grid; place-items:center; isolation:isolate; background:#0b1220; }
/* a real Luma wallpaper (Neon City) behind the frosted panel, as on the TV */
.lm-glass-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(9,12,16,.35),rgba(9,12,16,.15) 40%,rgba(9,12,16,.45)), url("img/projects/luma/glass-bg.webp?v=20261026a") center / cover no-repeat; }
.lm-glass-card .lm-glass{ width:min(80%,15rem); border-radius:20px; padding:1.1rem 1.2rem; }
.lm-glass-card .lm-glass b{ display:block; font-family:var(--lm-rd); font-weight:900; font-size:1.6rem; }
.lm-glass-card .lm-glass span{ font-size:.85rem; color:var(--lm-soft); }
.lm-grad-bar{ height:3.4rem; border-radius:16px; margin-top:1.2rem; background:var(--lm-grad); position:relative; overflow:hidden; }
.lm-grad-bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%); transform:translateX(-100%); animation:lm-shine 3.6s var(--lm-ease) infinite; }
@keyframes lm-shine{ 60%,100%{ transform:translateX(100%) } }
.lm-swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr)); gap:.6rem; margin-top:.8rem; }
.lm-swatch{ aspect-ratio:1; border-radius:18px; display:flex; align-items:flex-end; padding:.55rem; font-size:.64rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:rgba(0,0,0,.6); transition:transform .5s var(--lm-spring); }
.lm-swatch.is-dark{ color:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px var(--lm-line); }
@media (hover:hover){ .lm-swatch:hover{ transform:translateY(-4px) scale(1.04); } }
.lm-type{ display:grid; gap:1.4rem; margin-top:1.2rem; }
.lm-type__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; }
.lm-type__row + .lm-type__row{ padding-top:1.4rem; border-top:1px solid var(--lm-line); }
.lm-type__h{ font-family:var(--lm-tvf); font-weight:900; font-size:clamp(3.4rem,12vw,5rem); line-height:.9; letter-spacing:-.02em; }
.lm-type__t{ font-family:"Manrope",var(--lm-sf); font-weight:500; font-size:clamp(1rem,2.6vw,1.2rem); line-height:1.45; color:var(--lm-ink); max-width:24ch; }
.lm-type__row span{ flex:0 0 auto; max-width:12rem; text-align:right; color:var(--lm-soft); font-size:.85rem; line-height:1.45; }
.lm-type__row span strong{ display:block; color:var(--lm-ink); font-weight:600; font-size:.95rem; }
@media (min-width:900px){
  .lm-ds{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .lm-logo-card{ grid-column:span 4; } .lm-glass-card{ grid-column:span 2; }
  .lm-pal-card{ grid-column:span 3; } .lm-type-card{ grid-column:span 3; }
}

/* ── Under the hood ── */
.lm-stack-grid{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.lm-layer{ border-radius:22px; padding:clamp(1.2rem,3.6vw,1.8rem); background:#0E1319; border:1px solid var(--lm-line); }
.lm-layer h3{ display:flex; align-items:center; gap:.7rem; font-family:var(--lm-rd); font-weight:900; font-size:1.15rem; letter-spacing:-.01em; }
.lm-layer h3 i{ font-style:normal; font-size:.72rem; font-weight:800; width:1.9rem; height:1.9rem; border-radius:9px; display:grid; place-items:center; color:#0A0F0C; background:var(--lm-grad); }
.lm-layer p{ color:var(--lm-soft); font-size:.95rem; line-height:1.5; margin-top:.6rem; }
.lm-layer .lm-chiplist{ margin-top:.9rem; }
.lm-layer .lm-chiplist span{ font-size:.78rem; padding:.38rem .7rem; }
@media (min-width:700px){ .lm-stack-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .lm-stack-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.lm-pipe{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:clamp(1.6rem,4vw,2.4rem); font-family:var(--lm-rd); font-weight:800; font-size:.9rem; }
.lm-pipe span{ padding:.6rem 1rem; border-radius:14px; background:var(--lm-glass); border:1px solid var(--lm-line); }
.lm-pipe i{ font-style:normal; color:var(--lm-a2); }
.lm-pipe span:last-child{ color:#0A0F0C; background:var(--lm-grad); border-color:transparent; }

/* ── Builds ticker ── */
.lm-ticker{ overflow:hidden; margin-top:clamp(2.5rem,6vw,4rem); padding-block:.6rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.lm-ticker__track{ display:flex; gap:.6rem; width:max-content; animation:lm-tick 70s linear infinite; }
.lm-ticker span{ flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; padding:.45rem .8rem; border-radius:10px; border:1px solid var(--lm-line); color:var(--lm-faint); background:rgba(255,255,255,.015); }
.lm-ticker span.is-hl{ color:#0A0F0C; background:var(--lm-grad); border-color:transparent; font-weight:700; }
@keyframes lm-tick{ to{ transform:translateX(-50%) } }
.lm-ticker:hover .lm-ticker__track{ animation-play-state:paused; }
.lm-role{ display:grid; gap:2rem; margin-top:clamp(2rem,5vw,3rem); }
.lm-role p{ font-size:clamp(1.02rem,3.4vw,1.2rem); line-height:1.6; color:var(--lm-soft); }
.lm-role b{ color:var(--lm-ink); font-weight:600; }
.lm-role a{ color:var(--lm-ink); border-bottom:1px solid rgba(169,222,150,.5); }
.lm-role a:hover{ color:var(--lm-a2); }
@media (min-width:900px){ .lm-role{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4rem; } }

/* ── Principles ── */
.lm-principles{ display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2.5rem,6vw,4rem); }
.lm-pr{ border-radius:26px; padding:clamp(1.4rem,4vw,2rem); background:#0E1319; border:1px solid var(--lm-line); transition:border-color .4s, transform .5s var(--lm-spring); }
.lm-pr b{ display:block; font-family:var(--lm-rd); font-weight:800; font-size:clamp(2rem,6vw,2.8rem); line-height:1; background:var(--lm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; width:max-content; padding-right:.05em; }
.lm-pr h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.02em; margin-top:1rem; }
.lm-pr p{ color:var(--lm-soft); line-height:1.55; margin-top:.5rem; font-size:.98rem; }
@media (hover:hover){ .lm-pr:hover{ border-color:rgba(169,222,150,.3); transform:translateY(-4px); } }
@media (min-width:700px){ .lm-principles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .lm-principles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── Support (finale) ── */
.lm-support{ position:relative; overflow:hidden; isolation:isolate; border-radius:32px; padding:clamp(2rem,7vw,5rem) clamp(1.4rem,6vw,4.5rem); text-align:center; border:1px solid rgba(169,222,150,.2);
  background:radial-gradient(60% 80% at 50% 0%, rgba(169,222,150,.2), transparent 70%), radial-gradient(50% 70% at 50% 110%, rgba(232,228,108,.14), transparent 70%), #0B1016; }
.lm-support__glow{ position:absolute; inset:-30%; z-index:-1; background:conic-gradient(from 0deg, transparent, rgba(169,222,150,.18), transparent 30%, rgba(232,228,108,.14), transparent 60%); animation:lm-spin 22s linear infinite; filter:blur(30px); }
.lm-support h2{ font-family:var(--lm-sf); font-weight:700; font-size:clamp(2.1rem,8vw,4.4rem); letter-spacing:-.04em; line-height:1; margin-top:1rem; }
.lm-support p{ color:var(--lm-soft); font-size:clamp(1.02rem,3.4vw,1.25rem); line-height:1.55; margin:1.2rem auto 0; max-width:46ch; }
.lm-support .lm-actions{ justify-content:center; margin-top:2rem; }
.lm-support .lm-btn{ font-size:1.05rem; padding:1rem 1.5rem 1rem 1.2rem; }
.lm-support__note{ margin-top:1.4rem; font-size:.85rem; color:var(--lm-faint); }
.lm-support__note a{ color:var(--lm-soft); border-bottom:1px solid var(--lm-line); }

@media (prefers-reduced-motion:reduce){
  .lm [data-lr]{ opacity:1; transform:none; transition:none; }
  .lm-hero__bg, .lm-hp > .lm-float, .lw__g, .lw__dot, .lm-ticker__track, .lm-ui__bg, .lm-ui__w i, .lm-support__glow, .lm-glass-card::before, .lm-grad-bar::after, .lm-qr__scan::after, .lm-oss__tag i{ animation:none; }
  .lm-hero .lm-hp, .lm-hero__film{ opacity:1; translate:0 0; transform:none; transition:none; }
  .lm-kinetic .w{ opacity:1; }
  .lm-stack > *{ transition:none; }
}
.lm-stack > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* TVs are shown wall-mounted (no stand), so the stage frames them evenly top and bottom */
.lm-step__tv, .lm-split__media, .lm-demo__stage{ padding-block:clamp(1.4rem,5vw,2.6rem); }
@media (min-width:900px){ .lm-step__tv, .lm-split__media, .lm-demo__stage{ padding-block:clamp(2.4rem,4vw,3.6rem); } }