/* Reference-inspired home page. Scoped to preserve the other public pages. */
.landing-page {
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r-lg: 14px;
  --accent: #149bff;
}
.landing-page .nav-in {
  height: 74px;
  max-width: 1200px;
}
.landing-page .brand {
  font-size: 1.65rem;
  font-weight: 700;
}
.landing-page .brand img {
  width: 34px;
  height: 34px;
}
.landing-page .nav-links {
  gap: 22px;
}
.landing-page .nav-links a {
  font-size: 0.78rem;
  color: #e6edf7;
}
.landing-page .btn {
  border-radius: 7px;
}
.landing-page .btn-primary {
  background: linear-gradient(110deg, #009dff, #0065ff);
  box-shadow: 0 5px 20px #007aff20;
}
.landing-page .btn-primary:hover {
  box-shadow: 0 8px 28px #007aff50;
}
.landing-page .btn-on-dark {
  border-color: #48bbfa;
  min-width: 160px;
}
.landing-page .hero {
  padding: 76px 0 66px;
  background: #071324;
}
.landing-page .hero::before {
  background: radial-gradient(ellipse at 82% 42%, #003d8d8c, transparent 56%);
  animation: none;
}
.landing-page .hero::after {
  display: none;
}
.landing-page .hero-grid {
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  min-height: 450px;
}
.landing-page .hero h1 {
  font-size: clamp(2.6rem, 4.7vw, 4rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.06;
}
.landing-page .hero h1 .b {
  background: linear-gradient(110deg, #16aaff, #0876ff);
  background-clip: text;
}
.landing-page .hero .lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #d6e7fa;
  max-width: 470px;
}
.landing-page .eyebrow {
  letter-spacing: 0.23em;
  font-size: 0.7rem;
}
.landing-page .pills {
  gap: 12px;
  margin-top: 26px;
}
.landing-page .pill {
  gap: 6px;
  font-size: 0.68rem;
  color: #e2edf9;
  font-weight: 600;
}
.landing-page .pill i {
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.landing-page .hero-actions {
  margin-top: 36px;
}
.landing-page .hero-actions .btn {
  padding: 15px 25px;
}
.landing-page .hero-note {
  color: #adc8e4;
}
.landing-page .session-scene {
  height: 450px;
  padding: 50px 58px 0 35px;
  isolation: isolate;
}
.landing-page .session-scene::before {
  display: none;
}
.landing-page .session-scene .shot {
  animation: landing-float 7s ease-in-out infinite;
  transform: none;
  border: 1px solid #7ea5c875;
  border-radius: 12px;
  background: linear-gradient(130deg, #112138f5, #081522f5);
  box-shadow:
    0 28px 65px #0008,
    0 0 0 4px #7297b515;
  backdrop-filter: blur(15px);
}
.landing-page .session-scene .shot-bar {
  padding: 16px;
  background: #12243b99;
}
.landing-page .session-scene .shot-row,
.landing-page .session-scene .shot-sec,
.landing-page .session-scene .shot-tools {
  padding: 13px 16px;
}
.landing-page .session-scene .shot-tools span {
  height: 40px;
}
.landing-page .session-scene .shot-stats {
  margin: 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #a3c8ef0a;
}
.landing-page .session-scene .shot-foot {
  padding: 13px 16px;
  background: transparent;
  border: 0;
  color: #47d575;
}
.landing-page .session-scene .shot-bar img {
  width: 23px;
  height: 23px;
}
.landing-page .session-label {
  position: relative;
  justify-content: center;
  margin: 20px 0;
  color: #a8c4e0;
  font-size: 0.62rem;
}
.landing-page .scene-note {
  position: absolute;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: #bed4f5;
  transform: rotate(-10deg);
  z-index: 2;
}
.landing-page .note-top {
  right: -12px;
  top: -3px;
}
.landing-page .note-top svg {
  width: 65px;
  height: 65px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}
.landing-page .note-bottom {
  bottom: -15px;
  right: 0;
}
.blue-bloom {
  position: absolute;
  inset: -5% -15% -10% -12%;
  z-index: -1;
  filter: drop-shadow(0 0 20px #004eff45);
  animation: bloom-turn 18s ease-in-out infinite alternate;
}
.blue-bloom i {
  position: absolute;
  left: 9%;
  top: 8%;
  width: 85%;
  height: 85%;
  border-radius: 48% 52% 65% 35% / 45% 30% 70% 55%;
  background: linear-gradient(
    125deg,
    #00236b 12%,
    #007bff 28%,
    #0739ba 37%,
    #0085ff 39%,
    #072b86 46%,
    #020e35 67%,
    #034ce2 88%
  );
  border: 1px solid #217aff88;
  box-shadow:
    inset 4px 4px 9px #2491ff65,
    inset -8px -12px 18px #000a;
  transform: rotate(-45deg);
}
.blue-bloom i:nth-child(2) {
  transform: rotate(-23deg) scale(0.96);
}
.blue-bloom i:nth-child(3) {
  transform: rotate(4deg) scale(0.91);
}
.blue-bloom i:nth-child(4) {
  transform: rotate(32deg) scale(0.87);
}
.blue-bloom i:nth-child(5) {
  transform: rotate(60deg) scale(0.83);
}
.blue-bloom i:nth-child(6) {
  transform: rotate(88deg) scale(0.78);
}
.blue-bloom i:nth-child(7) {
  transform: rotate(116deg) scale(0.72);
}
.blue-bloom i:nth-child(8) {
  transform: rotate(144deg) scale(0.66);
}
.blue-bloom i:nth-child(9) {
  transform: rotate(170deg) scale(0.59);
}
.landing-page .band {
  padding: 58px 0;
}
.landing-page .sec-head {
  max-width: 850px;
  margin-bottom: 34px;
}
.landing-page .sec-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -0.04em;
}
.landing-page .sec-head p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.6;
}
.landing-page .cards {
  gap: 18px;
}
.landing-page .card {
  padding: 24px 28px;
  border-color: #dceaff;
  background: linear-gradient(145deg, var(--surface), var(--band));
  box-shadow: 0 4px 15px #408fe904;
}
.landing-page .chip {
  border-radius: 50%;
  width: 58px;
  height: 58px;
  margin-bottom: 13px;
}
.landing-page .chip svg {
  width: 28px;
  height: 28px;
}
.landing-page .card h3 {
  font-size: 1.05rem;
  font-weight: 750;
  margin-bottom: 6px;
}
.landing-page .card p {
  line-height: 1.45;
  font-size: 0.94rem;
}
.landing-page .landing-steps {
  padding: 45px 0 50px;
  background: linear-gradient(
    120deg,
    var(--band-alt),
    var(--band-alt),
    var(--band)
  );
}
.landing-page .step .n {
  height: 52px;
  width: 52px;
  background: linear-gradient(135deg, #009dff, #0058f4);
  box-shadow: 0 0 0 3px #fff7;
  font-size: 1.3rem;
}
.landing-page .step {
  gap: 25px;
}
.landing-page .step .si svg {
  width: 24px;
  height: 24px;
}
.landing-page .step-arrow {
  font-size: 30px;
  align-self: start;
  margin-top: 9px;
  opacity: 1;
  animation: arrow-travel 3s ease-in-out infinite;
}
.landing-page .step h3 {
  font-weight: 750;
}
.landing-page .use-grid {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.landing-page .landing-uses .sec-head {
  margin-bottom: 24px;
}
.landing-page .use-list {
  gap: 20px;
  margin-top: 22px;
}
.landing-page .use .chip {
  border-radius: 12px;
  width: 48px;
  height: 48px;
  margin: 0;
}
.landing-page .use .chip svg {
  width: 24px;
  height: 24px;
}
.landing-page .use h3 {
  font-weight: 700;
}
.device-scene {
  padding: 55px 30px 0 0;
  position: relative;
}
.device-note {
  position: absolute;
  right: 0;
  top: -15px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-style: italic;
  transform: rotate(-10deg);
  color: var(--muted);
  line-height: 1.4;
}
.landing-page .devices {
  min-height: 0;
}
.landing-page .laptop {
  padding: 11px;
  border: 2px solid #4c5665;
  border-radius: 16px 16px 2px 2px;
  background: #070b12;
}
.landing-page .laptop-screen {
  height: 260px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 14px;
  isolation: isolate;
  background: radial-gradient(
    ellipse at 70% 35%,
    #167fff,
    #082f86 45%,
    #02152a 80%
  );
}
.desktop-wallpaper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.desktop-wallpaper i {
  position: absolute;
  inset: 5% 20%;
  border: 18px solid #0879ef;
  border-radius: 48% 25% 50% 32%;
  transform: rotate(40deg);
  box-shadow:
    inset 10px 10px 18px #01c0ff,
    12px 12px 20px #0009;
}
.desktop-wallpaper i:nth-child(2) {
  transform: rotate(80deg) scale(0.83);
}
.desktop-wallpaper i:nth-child(3) {
  transform: rotate(120deg) scale(0.65);
}
.landing-page .laptop-screen .shot {
  width: 220px;
  zoom: 0.65;
  transform: none;
  border-radius: 7px;
  flex-shrink: 0;
}
.landing-page .laptop-base {
  height: 11px;
  background: linear-gradient(#dce5ec, #7a8798);
  position: relative;
  margin: 0 -20px;
}
.landing-page .laptop-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 4px;
  background: #647389;
  border-radius: 0 0 10px 10px;
}
.landing-page .phone {
  width: 140px;
  right: -27px;
  bottom: -30px;
  border: 3px solid #536072;
  overflow: hidden;
  padding: 18px 5px 6px;
  background: #071220;
  border-radius: 23px;
  animation: landing-float 8s ease-in-out infinite reverse;
}
.phone-notch {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 10px;
  border-radius: 0 0 8px 8px;
  background: #02070e;
}
.landing-page .phone .shot {
  width: 190px;
  zoom: 0.65;
  border: 0;
  border-radius: 12px;
}
.landing-page .oslist {
  margin-top: 51px;
  font-size: 0.73rem;
  gap: 16px;
}
.guest-section {
  background: #0b1c32;
  color: white;
  padding: 38px 0;
  border-bottom: 1px solid #ffffff12;
}
.guest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.guest-section h2 {
  font-size: 1.9rem;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 12px 0;
}
.guest-section p {
  font-size: 0.9rem;
  color: #b6cbe3;
  max-width: 420px;
}
.guest-section .connect {
  margin: 0;
  max-width: none;
  width: 100%;
  scroll-margin-top: 100px;
}
.guest-section .connect-note,
.guest-section .lbl {
  color: #b6cbe3;
}
.landing-page .cta {
  padding: 43px 0;
  background: radial-gradient(ellipse at 50% 100%, #143055, #0c192a 75%);
}
.landing-page .cta h2 {
  font-weight: 750;
  font-size: 2.1rem;
}
.landing-page .foot {
  padding-top: 40px;
}
.landing-page .foot-about {
  font-size: 0.8rem;
}
.landing-page .foot-bottom {
  margin-top: 30px;
}
.landing-page .shot-row .live {
  animation: live-pulse 3s ease-in-out infinite;
}
.motion-toggle {
  position: absolute;
  bottom: 13px;
  right: 24px;
  z-index: 3;
  border: 1px solid #526986;
  background: #09172bd9;
  color: #bfd2e8;
  border-radius: 20px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.65rem;
  cursor: pointer;
}
.landing-page.motion-paused *,
.landing-page.motion-paused *::before {
  animation-play-state: paused !important;
}
@keyframes landing-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes bloom-turn {
  from {
    transform: rotate(-9deg) scale(0.96);
  }
  to {
    transform: rotate(9deg) scale(1.06);
  }
}
@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px #22c55e22;
  }
  50% {
    box-shadow: 0 0 0 7px #22c55e05;
  }
}
@keyframes arrow-travel {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(7px);
  }
}
:root[data-theme="dark"] .landing-page .card {
  border-color: var(--hairline);
}
@media (min-width: 981px) {
  .landing-page .hero-grid > div:first-child {
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 1100px) {
  .landing-page .hero-grid {
    gap: 15px;
  }
  .landing-page .session-scene {
    padding-left: 20px;
    padding-right: 45px;
  }
  .landing-page .note-top {
    right: 0;
    font-size: 16px;
  }
  .landing-page .pills {
    gap: 10px;
  }
  .landing-page .nav-links {
    gap: 18px;
  }
  .landing-page .use-grid {
    gap: 35px;
  }
}
@media (max-width: 980px) {
  .landing-page .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .landing-page .hero h1 {
    font-size: 2.65rem;
  }
  .landing-page .hero .lede {
    font-size: 1rem;
  }
  .landing-page .session-scene {
    height: 420px;
    padding: 45px 20px 0 10px;
  }
  .landing-page .note-top {
    top: -15px;
  }
  .landing-page .note-bottom {
    bottom: -25px;
  }
  .landing-page .pills {
    max-width: 330px;
  }
  .landing-page .hero-actions .btn {
    padding: 12px 16px;
    font-size: 0.83rem;
  }
  .landing-page .btn-on-dark {
    min-width: 135px;
  }
  .landing-page .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .landing-page .card {
    padding: 22px;
  }
  .landing-page .step {
    gap: 14px;
  }
  .landing-page .step .n {
    width: 42px;
    height: 42px;
  }
  .guest-grid {
    gap: 35px;
  }
  .landing-page .laptop-screen {
    height: 220px;
  }
}
@media (max-width: 760px) {
  .landing-page .nav-links {
    gap: 12px;
  }
  .landing-page .hero {
    padding: 48px 0 46px;
  }
  .landing-page .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .landing-page .hero h1 {
    font-size: clamp(2.6rem, 8vw, 3.9rem);
  }
  .landing-page .hero .lede {
    max-width: 520px;
  }
  .landing-page .pills {
    max-width: none;
  }
  .landing-page .hero-actions {
    margin-top: 26px;
  }
  .landing-page .session-scene {
    max-width: 470px;
    height: 450px;
    padding: 45px 60px 0 35px;
  }
  .landing-page .note-top {
    right: 0;
    top: 5px;
  }
  .landing-page .note-bottom {
    right: 5px;
    bottom: 0;
  }
  .landing-page .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-page .use-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .landing-page .device-scene {
    max-width: 520px;
    width: 100%;
    margin: auto;
    padding-top: 65px;
  }
  .landing-page .laptop-screen {
    height: 260px;
  }
  .landing-page .guest-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .landing-page .steps {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .landing-page .step-arrow {
    display: none;
  }
  .landing-page .step {
    gap: 22px;
  }
  .landing-page .step .si {
    float: left;
    margin-right: 10px;
  }
  .landing-page .step p {
    clear: both;
  }
  .landing-page .step .n {
    width: 45px;
    height: 45px;
  }
  .desktop-break {
    display: none;
  }
}
@media (max-width: 480px) {
  .landing-page .wrap,
  .landing-page .nav-in {
    padding-left: 22px;
    padding-right: 22px;
  }
  .landing-page .nav-in {
    height: 68px;
  }
  .landing-page .cards {
    grid-template-columns: 1fr;
  }
  .landing-page .card {
    padding: 24px;
  }
  .landing-page .hero h1 {
    font-size: 2.6rem;
  }
  .landing-page .pill {
    font-size: 0.63rem;
  }
  .landing-page .pills {
    gap: 12px;
  }
  .landing-page .pill i {
    width: 27px;
    height: 27px;
  }
  .landing-page .session-scene {
    height: 430px;
    padding: 50px 25px 0 0;
  }
  .landing-page .note-top {
    top: 0;
    font-size: 14px;
  }
  .landing-page .note-top svg {
    display: none;
  }
  .landing-page .note-bottom {
    font-size: 15px;
    bottom: -5px;
  }
  .blue-bloom {
    inset: 0 -15%;
  }
  .landing-page .band {
    padding: 45px 0;
  }
  .landing-page .laptop-screen {
    height: 200px;
  }
  .landing-page .laptop-screen .shot {
    zoom: 0.52;
    transform: none;
  }
  .landing-page .phone {
    width: 115px;
    right: -24px;
  }
  .landing-page .phone .shot {
    zoom: 0.52;
  }
  .landing-page .oslist {
    font-size: 0.62rem;
    gap: 10px;
  }
  .landing-page .cta h2 {
    font-size: 1.7rem;
  }
  .landing-page .hero-actions .btn {
    padding: 14px 17px;
  }
  .landing-page .foot-grid {
    gap: 28px;
  }
  .guest-section .cid {
    padding: 12px 9px;
    font-size: 0.85rem;
  }
  .guest-section .go {
    padding: 12px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .motion-toggle {
    display: none;
  }
  .landing-page .card:hover,
  .landing-page .btn:hover {
    transform: none;
  }
}
/* Light theme extends through the whole landing page, including the hero and footer. */
:root:not([data-theme="dark"]) .landing-page {
  --muted: #425a75;
  --faint: #5e7690;
}
:root:not([data-theme="dark"]) .landing-page .nav {
  background: #ffffffed;
  border-color: #dce7f5;
}
:root:not([data-theme="dark"]) .landing-page .brand {
  color: #10213b;
}
:root:not([data-theme="dark"]) .landing-page .nav-links a {
  color: #334967;
}
:root:not([data-theme="dark"]) .landing-page .nav-links a:hover {
  color: #0069df;
}
:root:not([data-theme="dark"]) .landing-page .theme-btn {
  border-color: #d8e5f5;
  color: #155fac;
  background: #edf6ff;
}
:root:not([data-theme="dark"]) .landing-page .nav-burger {
  color: #163a63;
}
:root:not([data-theme="dark"]) .landing-page .nav-links.open {
  background: #f8fbff;
  border-color: #d8e5f5;
}
:root:not([data-theme="dark"]) .landing-page .hero {
  background: linear-gradient(120deg, #fff 12%, #eff7ff 60%, #deeeff);
  color: #10213b;
}
:root:not([data-theme="dark"]) .landing-page .hero::before {
  background: radial-gradient(ellipse at 82% 45%, #8cbcff55, transparent 58%);
}
:root:not([data-theme="dark"]) .landing-page .eyebrow {
  color: #006ace;
}
:root:not([data-theme="dark"]) .landing-page .hero .lede {
  color: #3d5675;
}
:root:not([data-theme="dark"]) .landing-page .pill {
  color: #2a4568;
}
:root:not([data-theme="dark"]) .landing-page .pill-green i {
  color: #158344;
}
:root:not([data-theme="dark"]) .landing-page .pill-blue i {
  color: #0665c7;
}
:root:not([data-theme="dark"]) .landing-page .pill-cyan i {
  color: #006d9b;
}
:root:not([data-theme="dark"]) .landing-page .pill-amber i {
  color: #986400;
}
:root:not([data-theme="dark"]) .landing-page .btn-on-dark {
  color: #154575;
  border-color: #8ab7e3;
  background: #ffffff80;
}
:root:not([data-theme="dark"]) .landing-page .btn-on-dark:hover {
  background: #fff;
}
:root:not([data-theme="dark"]) .landing-page .hero-note,
:root:not([data-theme="dark"]) .landing-page .scene-note,
:root:not([data-theme="dark"]) .landing-page .session-label {
  color: #426185;
}
:root:not([data-theme="dark"]) .landing-page .motion-toggle {
  color: #355778;
  background: #ffffffdb;
  border-color: #b7d2ed;
}
:root:not([data-theme="dark"]) .landing-page .guest-section {
  background: #edf6ff;
  color: #10213b;
  border-color: #dce9f7;
}
:root:not([data-theme="dark"]) .landing-page .guest-section p,
:root:not([data-theme="dark"]) .landing-page .connect-note,
:root:not([data-theme="dark"]) .landing-page .connect-top .lbl {
  color: #486482;
}
:root:not([data-theme="dark"]) .landing-page .connect {
  background: #ffffffc9;
  border-color: #cbdef2;
  box-shadow: 0 8px 30px #315b8710;
}
:root:not([data-theme="dark"]) .landing-page .cid {
  color: #173757;
  background: #f7fbff;
  border-color: #c4d7ed;
}
:root:not([data-theme="dark"]) .landing-page .cid::placeholder {
  color: #617a95;
}
:root:not([data-theme="dark"]) .landing-page .guest-badge {
  color: #006398;
  background: #e3f5ff;
  border-color: #afd9f3;
}
:root:not([data-theme="dark"]) .landing-page .connect-err {
  color: #a3222c;
  background: #fff0f1;
  border-color: #f5c1c8;
}
:root:not([data-theme="dark"]) .landing-page .cta {
  background: radial-gradient(ellipse at 50% 100%, #d4e9ff, #f6faff 75%);
  color: #10213b;
}
:root:not([data-theme="dark"]) .landing-page .cta p {
  color: #486482;
}
:root:not([data-theme="dark"]) .landing-page .foot {
  background: #fff;
  color: #486482;
  border-top: 1px solid #dce9f7;
}
:root:not([data-theme="dark"]) .landing-page .foot h4 {
  color: #10213b;
}
:root:not([data-theme="dark"]) .landing-page .foot-about,
:root:not([data-theme="dark"]) .landing-page .foot ul a,
:root:not([data-theme="dark"]) .landing-page .foot-bottom {
  color: #526982;
}
:root:not([data-theme="dark"]) .landing-page .foot ul a:hover {
  color: #0065cf;
}
:root:not([data-theme="dark"]) .landing-page .foot-bottom {
  border-color: #dce9f7;
}
:root:not([data-theme="dark"]) .landing-page .sub input {
  color: #183653;
  background: #f7fbff;
  border-color: #c8dbee;
}
:root[data-theme="dark"] .landing-page .chip {
  filter: none;
  background: #123253;
  color: #6bb6ff;
}
:root[data-theme="dark"] .landing-page .chip-green,
:root[data-theme="dark"] .landing-page .chip-teal {
  background: #103c39;
  color: #54dfb1;
}
:root[data-theme="dark"] .landing-page .chip-violet {
  background: #30254b;
  color: #bc9bff;
}

/* Real screenshots (2026-09-30): the laptop in "Use cases" shows a controlled desktop, and
   "On the remote PC" shows the agent, the Allow prompt and the connection history. */
.landing-page .laptop-screen:has(.laptop-shot) {
  height: auto;
  padding: 0;
  display: block;
  background: #02070e;
}
.landing-page .laptop-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 899;
  object-fit: cover;
}
.landing-page .landing-shots .sec-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.landing-page .shot-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.landing-page .shot-card {
  margin: 0;
  border: 1px solid #dceaff;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--surface), var(--band));
  overflow: hidden;
}
.landing-page .shot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 18px;
  background: radial-gradient(ellipse at 50% 30%, #123a73, #071426 75%);
}
.landing-page .shot-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px #0008;
}
.landing-page .shot-card figcaption {
  padding: 18px 22px 22px;
}
.landing-page .shot-card h3 {
  font-size: 1.05rem;
  font-weight: 750;
  margin-bottom: 6px;
}
.landing-page .shot-card p {
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 980px) {
  .landing-page .shot-gallery {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}
:root[data-theme="dark"] .landing-page .shot-card {
  border-color: var(--hairline);
}