/* Preserve the website banner and navigation while removing app-window chrome. */
.site-header {
  height: 76px;
  position: sticky;
  inset: auto;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 12, .78);
  backdrop-filter: blur(18px);
}

.hero {
  min-height: calc(100vh - 106px);
  padding-top: 70px;
}

.about-hero {
  min-height: calc(100vh - 106px);
  padding-top: 90px;
}

.app-window > img {
  border-radius: inherit;
}

.download-button {
  color: #03171f !important;
  text-decoration: none;
  -webkit-text-fill-color: #03171f !important;
}
.download-button small {
  color: #174653 !important;
  -webkit-text-fill-color: #174653 !important;
}
.download-button strong,
.download-button b,
.download-button .apple-mark,
.download-button .windows-mark {
  color: #03171f !important;
  -webkit-text-fill-color: #03171f !important;
}
.platform-actions { flex-wrap: wrap; }
.secondary-download {
  border-color: rgba(172,140,255,.38);
  background: linear-gradient(100deg,rgba(172,140,255,.94),rgba(102,190,255,.94));
  color: #130d30 !important;
  -webkit-text-fill-color: #130d30 !important;
}
.secondary-download small {
  color: #352b63 !important;
  -webkit-text-fill-color: #352b63 !important;
}
.secondary-download strong,
.secondary-download b,
.secondary-download .windows-mark {
  color: #130d30 !important;
  -webkit-text-fill-color: #130d30 !important;
}
.apple-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(3,32,42,.14); font-size: 1rem; }
.closing-downloads { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 35px; }
.closing-downloads .download-button { margin-top: 0; }

@media (max-width: 760px) {
  .platform-actions .download-button, .platform-actions .watch-button { width: 100%; }
}

/* Purpose-built device silhouettes replace the generic roadmap cards. */
.ecosystem-preview {
  position: relative;
  min-height: 390px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 28px 10px;
  padding: 48px 24px 82px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 46% 38%, rgba(88, 221, 255, .13), transparent 34%),
    radial-gradient(circle at 72% 42%, rgba(172, 140, 255, .13), transparent 30%),
    linear-gradient(145deg, rgba(13, 26, 34, .82), rgba(5, 10, 15, .96));
}

.mac-device,
.ipad-device,
.iphone-device { grid-column: span 1; }

.ecosystem-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(88, 221, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 221, 255, .025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  pointer-events: none;
}

.device-showcase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.device-showcase p {
  margin: 22px 0 0;
  text-align: center;
}

.device-showcase strong,
.device-showcase small {
  display: block;
}

.device-showcase strong {
  font-size: .92rem;
}

.device-showcase small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .72rem;
}

.desktop-frame,
.laptop-frame,
.tablet-frame,
.phone-frame {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(181, 235, 250, .42);
  background: #070c11;
  box-shadow: 0 26px 55px rgba(0, 0, 0, .43);
}

.laptop-frame {
  width: 176px;
  height: 110px;
  padding: 7px;
  border-radius: 11px 11px 7px 7px;
}

.laptop-base {
  width: 198px;
  height: 7px;
  border-radius: 1px 1px 8px 8px;
  background: linear-gradient(180deg, rgba(202, 226, 233, .48), rgba(95, 119, 129, .28));
  clip-path: polygon(7% 0, 93% 0, 100% 45%, 96% 100%, 4% 100%, 0 45%);
}

.watch-device {
  transform: none;
}

.watch-frame {
  position: relative;
  z-index: 0;
  width: 30px;
  height: 35px;
  padding: 4px;
  border: 1px solid rgba(181, 235, 250, .42);
  border-radius: 13px;
  background: #070c11;
  box-shadow: 0 26px 55px rgba(0, 0, 0, .43);
}

.watch-frame::before,
.watch-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8px;
  width: 14px;
  height: 13px;
  border: 1px solid rgba(181, 235, 250, .2);
  background: #0b1218;
}

.watch-frame::before {
  bottom: calc(100% - 5px);
  border-radius: 12px 12px 4px 4px;
}

.watch-frame::after {
  top: calc(100% - 5px);
  border-radius: 4px 4px 12px 12px;
}

.watch-frame .device-screen {
  padding: 6px 4px;
  border-radius: 9px;
}

.watch-frame .screen-mark {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  font-size: .4rem;
}

.watch-crown {
  position: absolute;
  top: 11px;
  left: calc(100% + 1px);
  width: 3px;
  height: 9px;
  border-radius: 0 4px 4px 0;
  background: rgba(181, 235, 250, .32);
}

.desktop-frame {
  width: 176px;
  height: 105px;
  border-radius: 12px;
}

.desktop-stand {
  width: 70px;
  height: 22px;
  margin-top: 2px;
  border-bottom: 6px solid rgba(181, 235, 250, .28);
  clip-path: polygon(38% 0, 62% 0, 72% 75%, 100% 75%, 100% 100%, 0 100%, 0 75%, 28% 75%);
}

.tablet-frame {
  width: 105px;
  height: 140px;
  padding: 8px;
  border-radius: 17px;
}

.phone-frame {
  width: 42px;
  height: 91px;
  padding: 4px;
  border-radius: 14px;
}

.phone-island {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 50%;
  width: 19px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #020507;
}

.device-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px 13px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(150deg, #0e2631, #101321 72%);
}

.tablet-frame .device-screen {
  border-radius: 10px;
}

.phone-frame .device-screen {
  padding: 13px 5px;
  border-radius: 10px;
}

.screen-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border: 1px solid rgba(88, 221, 255, .36);
  border-radius: 10px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 800;
}

.phone-frame .screen-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: .44rem;
}

.device-screen i {
  width: 100%;
  height: 5px;
  display: block;
  margin-top: 7px;
  border-radius: 8px;
  background: rgba(221, 245, 252, .17);
}

.device-screen i:nth-of-type(2) {
  width: 76%;
  background: rgba(172, 140, 255, .22);
}

.device-screen i:nth-of-type(3) {
  width: 54%;
}

.windows-device {
  transform: none;
}

.mac-device {
  transform: none;
}

.mac-device .laptop-frame {
  border-color: rgba(98, 246, 178, .58);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 36px rgba(98, 246, 178, .1);
}

.windows-device .desktop-frame {
  border-color: rgba(88, 221, 255, .58);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 36px rgba(88, 221, 255, .1);
}

.ipad-device {
  transform: translateX(12px);
}

.iphone-device {
  transform: none;
}

.continuity-line {
  position: absolute;
  z-index: 1;
  left: 36px;
  right: 36px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
}

.continuity-line span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line2), transparent);
}

.continuity-line em {
  font-size: .68rem;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .ecosystem-preview {
    min-height: 390px;
  }

  .desktop-frame {
    width: 170px;
    height: 107px;
  }

  .laptop-frame {
    width: 158px;
    height: 101px;
  }

  .laptop-base {
    width: 178px;
  }

  .tablet-frame {
    width: 98px;
    height: 134px;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 66px;
    padding-inline: 18px;
    background: rgba(5, 8, 12, .78);
  }

  .hero {
    padding-top: 70px;
  }

  .about-hero {
    min-height: auto;
    padding-top: 100px;
  }

  .ecosystem-preview {
    min-height: 385px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 24px 8px;
    padding: 46px 12px 76px;
    border-radius: 22px;
  }

  .mac-device,
  .windows-device,
  .ipad-device,
  .iphone-device,
  .watch-device {
    transform: none;
  }

  .ipad-device {
    transform: translateX(5px);
  }

  .mac-device,
  .windows-device {
    grid-column: span 1;
  }

  .ipad-device,
  .iphone-device,
  .watch-device {
    grid-column: span 1;
  }

  .laptop-frame {
    width: 104px;
    height: 66px;
    padding: 4px;
    border-radius: 7px 7px 4px 4px;
  }

  .laptop-base {
    width: 116px;
    height: 5px;
  }

  .desktop-frame {
    width: 112px;
    height: 67px;
    padding: 5px;
    border-radius: 8px;
  }

  .desktop-stand {
    width: 46px;
    height: 15px;
    border-bottom-width: 5px;
  }

  .tablet-frame {
    width: 66px;
    height: 88px;
    padding: 5px;
    border-radius: 12px;
  }

  .phone-frame {
    width: 30px;
    height: 65px;
    padding: 3px;
    border-radius: 10px;
  }

  .watch-frame {
    width: 22px;
    height: 26px;
    padding: 3px;
    border-radius: 9px;
  }

  .watch-frame::before,
  .watch-frame::after {
    left: 6px;
    width: 10px;
    height: 9px;
  }

  .watch-frame .device-screen {
    padding: 4px 2px;
    border-radius: 6px;
  }

  .watch-frame .screen-mark {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    font-size: .3rem;
  }

  .watch-crown {
    top: 8px;
    width: 2px;
    height: 6px;
  }

  .phone-island {
    top: 3px;
    width: 12px;
    height: 3px;
  }

  .device-screen {
    padding: 10px 7px;
  }

  .screen-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: .5rem;
  }

  .phone-frame .device-screen {
    padding: 8px 3px;
  }

  .phone-frame .screen-mark {
    width: 11px;
    height: 11px;
    font-size: .34rem;
  }

  .device-screen i {
    height: 3px;
    margin-top: 5px;
  }

  .device-showcase p {
    margin-top: 15px;
  }

  .device-showcase strong {
    font-size: .78rem;
  }

  .device-showcase small {
    font-size: .63rem;
  }

  .continuity-line {
    left: 15px;
    right: 15px;
    bottom: 22px;
    gap: 8px;
  }

  .continuity-line em {
    font-size: .54rem;
    letter-spacing: .06em;
  }
}

/* The legacy core remains useful as Ludens' animated presence indicator. */
.presence {
  padding-top: 70px;
}

.presence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}

.presence-card {
  position: relative;
  min-height: 410px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 22%, rgba(88, 221, 255, .1), transparent 34%),
    linear-gradient(145deg, rgba(13, 26, 34, .9), rgba(6, 12, 17, .98));
}

.presence-card:nth-child(2) {
  background:
    radial-gradient(circle at 50% 22%, rgba(172, 140, 255, .12), transparent 35%),
    linear-gradient(145deg, rgba(13, 26, 34, .9), rgba(6, 12, 17, .98));
}

.presence-visual {
  position: relative;
  width: 156px;
  height: 156px;
  display: grid;
  place-items: center;
  margin: 8px auto 50px;
}

.presence-visual img {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  filter: drop-shadow(0 0 18px rgba(88, 221, 255, .22));
}

.presence-ring {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(88, 221, 255, .2);
  border-radius: 50%;
}

.presence-card h3 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 550;
}

.presence-card > p:last-child {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.state-loading .presence-visual img {
  animation: ludens-load 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.state-loading .presence-ring {
  border-top-color: var(--cyan);
  border-right-color: var(--violet);
  animation: ludens-ring 2.2s linear infinite;
}

.state-listening .presence-visual img {
  animation: ludens-listen 1.55s ease-in-out infinite;
}

.state-listening .presence-ring {
  animation: ludens-listen-ring 1.55s ease-out infinite;
}

.state-listening .presence-visual::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(172, 140, 255, .34);
  border-radius: 50%;
  animation: ludens-listen-ring 1.55s ease-out .34s infinite;
}

.state-thinking .presence-visual img {
  animation: ludens-think 3.2s ease-in-out infinite;
}

.state-thinking .presence-ring {
  border-style: dashed;
  border-color: rgba(172, 140, 255, .4);
  animation: ludens-ring 6s linear infinite reverse;
}

.thinking-dots {
  position: absolute;
  z-index: 3;
  right: 1px;
  bottom: 12px;
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(172, 140, 255, .28);
  border-radius: 999px;
  background: rgba(8, 14, 20, .9);
}

.thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
  animation: ludens-dot 1.2s ease-in-out infinite;
}

.thinking-dots i:nth-child(2) { animation-delay: .16s; }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes ludens-load {
  0%, 100% { transform: rotate(-3deg) scale(.96); filter: drop-shadow(0 0 14px rgba(88, 221, 255, .18)); }
  50% { transform: rotate(3deg) scale(1.03); filter: drop-shadow(0 0 28px rgba(172, 140, 255, .35)); }
}

@keyframes ludens-ring {
  to { transform: rotate(360deg); }
}

@keyframes ludens-listen {
  0%, 100% { transform: scale(.95); filter: drop-shadow(0 0 10px rgba(88, 221, 255, .18)); }
  42% { transform: scale(1.08); filter: drop-shadow(0 0 30px rgba(88, 221, 255, .42)); }
}

@keyframes ludens-listen-ring {
  0% { transform: scale(.62); opacity: .75; }
  100% { transform: scale(1.08); opacity: 0; }
}

@keyframes ludens-think {
  0%, 100% { transform: translateY(4px) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes ludens-dot {
  0%, 70%, 100% { transform: translateY(0); opacity: .35; }
  35% { transform: translateY(-4px); opacity: 1; }
}

@media (max-width: 900px) {
  .presence-grid {
    grid-template-columns: 1fr;
  }

  .presence-card {
    min-height: 330px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presence-visual img,
  .presence-ring,
  .presence-visual::after,
  .thinking-dots i {
    animation: none !important;
  }
}