/* One carousel: real desktop and phone screens together. No autoplay. Plain scroll-snap, so it
   works without JavaScript; the buttons and dots are an addition. The phone slides up when its slide
   arrives; with Reduce motion (html[data-motion="still"]) nothing animates. */
.lc { position: relative; max-width: 980px; margin: 1.6rem auto 0; }
.lc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; outline-offset: 4px; -webkit-overflow-scrolling: touch; }
.lc-track::-webkit-scrollbar { display: none; }
.lc-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 0 0 4.2rem; }
.lc-desk { position: relative; width: 84%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0, 212, 255, .3); background: #0a0d14; box-shadow: 0 18px 54px rgba(0, 0, 0, .55), 0 0 40px rgba(0, 212, 255, .12); aspect-ratio: 1920 / 1050; display: flex; align-items: center; justify-content: center; }
.lc-desk img { width: 100%; height: 100%; object-fit: contain; display: block; background: #05070b; }
.lc-phone { position: absolute; right: 2%; bottom: 3.2rem; width: 21%; border-radius: 24px; padding: 6px; background: #05060a; border: 1px solid rgba(255, 0, 255, .4); box-shadow: 0 22px 60px rgba(0, 0, 0, .7), 0 0 36px rgba(255, 0, 255, .18); transform: translateY(26px); opacity: .0; transition: transform .7s cubic-bezier(.2, .8, .2, 1) .15s, opacity .5s ease .15s; }
.lc-slide.is-active .lc-phone { transform: none; opacity: 1; }
.lc-phone img { width: 100%; height: auto; display: block; border-radius: 20px; }
.lc-tag { position: absolute; left: 8px; top: 8px; z-index: 2; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #ffb020; background: rgba(10, 4, 32, .88); border: 1px solid rgba(255, 176, 32, .6); border-radius: 99px; padding: .3rem .55rem; }
.lc-gap { width: 100%; height: 100%; border: 2px dashed rgba(255, 176, 32, .7); border-radius: inherit; color: #ffb020; font: 500 .78rem/1.5 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: rgba(255, 176, 32, .06); min-height: 160px; }
.lc-phone .lc-gap { aspect-ratio: 9 / 19; border-radius: 20px; font-size: .62rem; padding: .5rem; }
.lc-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: .92rem; color: var(--light-gray, #c8d0e0); }
.lc-cap b { display: block; font: 700 .72rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ai-cyan, #00d4ff); margin-bottom: .15rem; }
.lc-cap div:last-child b { color: var(--ai-magenta, #ff00ff); }
.lc-ctl { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .6rem; }
.lc-btn { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 212, 255, .45); background: rgba(10, 4, 32, .7); color: #fff; cursor: pointer; font-size: 1rem; }
.lc-btn:hover, .lc-btn:focus-visible { border-color: #ff00ff; outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.lc-dots { display: flex; gap: .2rem; }
.lc-dot { appearance: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.lc-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: background .2s, transform .2s; }
.lc-dot[aria-current="true"]::before { background: #00d4ff; transform: scale(1.3); }
html[data-motion="still"] .lc-phone, html[data-motion="still"] .lc-dot::before { transition: none !important; transform: none !important; opacity: 1 !important; }
html[data-motion="still"] .lc-slide .lc-phone { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .lc-phone { transition: none; transform: none; opacity: 1; } }
@media (max-width: 575.98px) {
  .nw-grid { grid-template-columns: 1fr; }
  .lc-desk { width: 100%; }
  .lc-phone { width: 36%; right: 3%; bottom: 7.2rem; }
  .lc-slide { padding-bottom: 6.6rem; }
  .lc-cap { grid-template-columns: 1fr; gap: .4rem; font-size: .85rem; }
}
/* what's new cards and the small helpers the new page uses */
.nw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 1.2rem; text-align: left; }
.nw-card { display: block; color: var(--light-gray, #c8d0e0); border: 1px solid rgba(0, 212, 255, .28); border-radius: 14px; padding: 1.05rem 1.15rem; background: rgba(10, 4, 32, .62); }
.nw-card i { color: var(--ai-cyan, #00d4ff); font-size: 1.1rem; }
.nw-card h3 { font-family: 'Orbitron', 'Orbitron Fallback', sans-serif; font-size: .9rem; letter-spacing: .5px; color: #fff; margin: .55rem 0 .4rem; }
.nw-card p { margin: 0; font-size: .9rem; line-height: 1.5; }
.hero-orb-frame.hero-app-frame { max-width: 560px; padding: 0; background: none; }
.hero-app-frame .win-shot { box-shadow: 0 0 0 1px rgba(0, 212, 255, .35), 0 24px 70px rgba(0, 0, 0, .6), 0 0 60px rgba(0, 212, 255, .25); position: relative; }
.hero-app-frame > img.hero-app-orb { position: absolute; width: 20%; right: -3%; bottom: -17%; filter: drop-shadow(0 0 22px rgba(0, 200, 255, .6)); border-radius: 16px; border: 1px solid rgba(0, 212, 255, .45); }
.hero-plain { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.35rem; color: #fff; margin: 0 0 .6rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.standin-tag { position: absolute; left: 8px; top: 8px; z-index: 2; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #ffb020; background: rgba(10, 4, 32, .88); border: 1px solid rgba(255, 176, 32, .6); border-radius: 99px; padding: .3rem .55rem; }
@media (max-width: 991.98px) { .hero-orb-frame.hero-app-frame { margin-top: 1.5rem; } }
.lm-shot { position: relative; max-width: 1291px; margin: 0 auto; }
.lm-shot img { width: 100%; height: auto; display: block; }
/* plain link to the YouTube recording of each sample run; no embed, so nothing contacts YouTube until it is clicked */
.lm-video { text-align: center; margin: .9rem 0 0; font-size: .95rem; }
.lm-video a { color: var(--ai-cyan, #00d4ff); text-decoration: underline; text-underline-offset: 3px; }
.lm-video a:hover, .lm-video a:focus-visible { color: #fff; }