*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #080808;
  --surface: rgba(255,255,255,.045);
  --surface-hover: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.07);
  --border-hover: rgba(255,255,255,.13);
  --text: rgba(255,255,255,.85);
  --text-strong: rgba(255,255,255,.92);
  --text-dim: rgba(255,255,255,.38);
  --text-faint: rgba(255,255,255,.16);
  --spring: cubic-bezier(.16,1,.3,1);
  --accent: #5eead4;
}

[data-app="shots"] { --accent: #6ee7f7; }
[data-app="lumen"] { --accent: #5b9dff; }

:root {
  --accent-bg: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-bg-hover: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-bright: color-mix(in srgb, var(--accent) 75%, white);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 55%, var(--accent-glow) 0%, transparent 70%);
  animation: ambientIn 1.2s var(--spring) both;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 40px 24px;
  animation: riseIn .65s var(--spring) .05s both;
}

.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.logo-img {
  width: 160px;
  height: 160px;
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055),
    0 4px 16px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.4);
}

.logo-img img { width: 100%; height: 100%; display: block; object-fit: cover; }

.title {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.subtitle {
  font-size: 30px;
  color: var(--text-dim);
  font-weight: 400;
  max-width: 680px;
  text-align: center;
  line-height: 1.5;
}

.download-btn {
  padding: 20px 44px;
  border: none;
  border-radius: 16px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 26px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s var(--spring);
  user-select: none;
}

.download-btn:hover {
  background: var(--accent-bg-hover);
  color: var(--accent-bright);
}

.download-btn:active { transform: scale(.97); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  animation: slideDown .5s var(--spring) both;
}

.bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,.85) 0%, rgba(8,8,8,.4) 70%, transparent 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  z-index: -1;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.9);
  user-select: none;
  text-decoration: none;
}

.logo-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.logo-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }

.logo-wordmark {
  opacity: .55;
  text-decoration: none;
  color: inherit;
  transition: opacity .18s ease;
}

.logo-wordmark:hover { opacity: .85; }

.actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .15s var(--spring);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.btn:hover {
  background: var(--surface-hover);
  color: rgba(255,255,255,.78);
}

.btn:active { transform: scale(.96); }

.btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: opacity .18s ease;
}

.btn--active {
  color: var(--accent);
  background: var(--accent-bg);
}

.sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.backlink {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-faint);
  text-decoration: none;
  transition: color .18s ease;
  animation: riseIn .65s var(--spring) .35s both;
}

.backlink:hover { color: var(--text-dim); }

@media (max-width: 640px) {
  body { overflow: auto; }
  .content { gap: 40px; }
  .logo-block { gap: 24px; }
  .logo-img { width: 108px; height: 108px; border-radius: 26px; }
  .title { font-size: 38px; }
  .subtitle { font-size: 17px; }
  .download-btn { padding: 15px 34px; font-size: 19px; border-radius: 13px; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ambientIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}