:root {
  color-scheme: dark;
  --bg: #050506;
  --panel: rgba(18, 18, 20, 0.66);
  --panel-strong: rgba(30, 31, 34, 0.78);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #f6f7f8;
  --muted: #a8abb2;
  --green: #72f0b5;
  --cyan: #70e7ff;
  --blue: #5c9dff;
  --red: #ff6e82;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  border: 0;
}

a {
  color: inherit;
}

.download-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 6, 0.5), #050506 72%),
    url("/assets/void-chat-wallpaper.png") center top / cover fixed;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 24px clamp(18px, 4vw, 64px) 48px;
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.95), rgba(5, 5, 6, 0.62) 45%, rgba(5, 5, 6, 0.92)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 96px);
  pointer-events: none;
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.17;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,0.16) 34.2%, transparent 35.2% 100%),
    linear-gradient(68deg, transparent 0 61%, rgba(255,255,255,0.1) 61.2%, transparent 62.2% 100%);
  mix-blend-mode: screen;
}

.topbar,
.hero-grid,
.feature-band {
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.brand,
.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand {
  font-weight: 850;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(114, 240, 181, 0.18), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.06);
  color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.ghost-link {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: var(--muted);
  font-weight: 720;
  backdrop-filter: blur(16px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  gap: clamp(30px, 7vw, 92px);
  align-items: center;
  width: min(1180px, 100%);
  min-height: calc(100svh - 86px);
  margin: 0 auto;
  padding: 46px 0 0;
}

.hero-copy {
  max-width: 700px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 20px;
  padding: 0 12px;
  border: 1px solid rgba(114, 240, 181, 0.26);
  border-radius: 999px;
  background: rgba(114, 240, 181, 0.08);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(4rem, 12vw, 9.2rem);
  line-height: 0.82;
  letter-spacing: 0;
}

.lead {
  max-width: 620px;
  margin: 28px 0 0;
  color: #c7cad1;
  font-size: clamp(1rem, 2vw, 1.24rem);
  line-height: 1.62;
}

.download-actions {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) repeat(2, minmax(170px, 0.85fr));
  gap: 12px;
  margin-top: 34px;
}

.apk-button,
.store-button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.045)),
    rgba(18, 18, 20, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 18px 44px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px) saturate(150%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.apk-button:hover,
.store-button:hover {
  transform: translateY(-2px);
  border-color: rgba(114, 240, 181, 0.35);
}

.apk-button {
  background:
    linear-gradient(145deg, rgba(114, 240, 181, 0.28), rgba(92, 157, 255, 0.13)),
    rgba(20, 26, 24, 0.84);
}

.button-icon,
.store-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  font-size: 1.25rem;
  font-weight: 900;
}

.store-icon.play::before {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--green);
  content: "";
}

.store-icon.apple::before {
  content: "A";
  color: var(--cyan);
  font-weight: 950;
}

.apk-button strong,
.apk-button small,
.store-button strong,
.store-button small {
  display: block;
}

.apk-button small,
.store-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.release-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 720px;
  margin-top: 18px;
}

.release-strip span {
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(16px);
}

.release-strip strong,
.release-strip small {
  display: block;
}

.release-strip small {
  margin-top: 4px;
  color: var(--muted);
}

.phone-stage {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
}

.signal-line {
  position: absolute;
  width: min(72vw, 620px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112,231,255,0.5), transparent);
  transform: rotate(-28deg);
}

.signal-line.one {
  top: 22%;
  right: -32%;
}

.signal-line.two {
  bottom: 25%;
  right: -18%;
  background: linear-gradient(90deg, transparent, rgba(114,240,181,0.42), transparent);
}

.phone {
  position: relative;
  width: min(100%, 386px);
  aspect-ratio: 0.52;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 44px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035)),
    #090a0c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 42px 120px rgba(0,0,0,0.62);
  overflow: hidden;
}

.phone::after {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 34px;
  pointer-events: none;
  content: "";
}

.phone-status,
.phone-header,
.phone-composer {
  position: relative;
  z-index: 1;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px 14px;
  color: #f9fafb;
  font-size: 0.82rem;
  font-weight: 800;
}

.status-icons {
  color: var(--muted);
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: rgba(255,255,255,0.055);
}

.avatar {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--green);
  border: 1px solid rgba(114,240,181,0.28);
  background: url("/assets/void-ai-avatar.png") center / cover;
  font-weight: 950;
}

.phone-header strong,
.phone-header small {
  display: block;
}

.phone-header small {
  color: var(--green);
}

.phone-header b {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
}

.phone-chat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 168px);
  padding: 16px 4px;
  background:
    linear-gradient(180deg, rgba(5,5,6,0.5), rgba(5,5,6,0.78)),
    url("/assets/void-chat-wallpaper.png") center / cover;
}

.bubble {
  max-width: 78%;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,0.08);
  color: #f9fafb;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.bubble.own {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: rgba(114,240,181,0.14);
}

.bubble.media {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 78%;
}

.bubble.compact {
  max-width: 52%;
}

.wave {
  flex: 1 1 auto;
  height: 24px;
  background:
    linear-gradient(90deg, var(--green) 0 5%, transparent 5% 8%, rgba(255,255,255,0.42) 8% 13%, transparent 13% 16%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0 3px, transparent 3px 8px);
  mask-image: linear-gradient(180deg, transparent 0 18%, #000 18% 82%, transparent 82%);
}

.phone-composer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  padding: 10px 0 0;
}

.phone-composer span,
.phone-composer p {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

.phone-composer p {
  justify-content: start;
  padding-left: 16px;
}

.feature-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1180px, calc(100% - 36px));
  margin: -20px auto 48px;
}

.feature-band article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
    rgba(14,14,16,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(18px) saturate(150%);
}

.feature-band span {
  color: var(--green);
  font-weight: 900;
}

.feature-band h2 {
  margin: 36px 0 10px;
  font-size: 1.35rem;
}

.feature-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.soon-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  display: grid;
  gap: 4px;
  width: min(380px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid rgba(114,240,181,0.26);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(114,240,181,0.18), rgba(255,255,255,0.05)),
    rgba(10,10,11,0.92);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  backdrop-filter: blur(18px) saturate(160%);
  animation: toastIn 220ms ease;
}

.soon-toast[hidden] {
  display: none;
}

.soon-toast span {
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 940px) {
  .hero-grid,
  .feature-band {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 20px;
  }

  .download-actions {
    grid-template-columns: 1fr;
  }

  .release-strip {
    grid-template-columns: 1fr;
  }

  .phone-stage {
    min-height: auto;
    padding: 20px 0;
  }

  .phone {
    width: min(360px, 100%);
  }

  .feature-band {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 18px 14px 34px;
  }

  .topbar {
    align-items: stretch;
  }

  .ghost-link {
    padding: 0 12px;
    font-size: 0.86rem;
  }

  h1 {
    font-size: clamp(3.3rem, 18vw, 5.2rem);
  }

  .lead {
    margin-top: 20px;
  }

  .apk-button,
  .store-button {
    min-height: 64px;
    border-radius: 20px;
  }

  .feature-band {
    width: calc(100% - 28px);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}