/* CueForge marketing site — palette shared with swift/App/Theme.swift */
:root {
  --bg: #05070b;
  --bg-deep: #020305;
  --surface: #0b111b;
  --surface-raised: #101827;
  --surface-soft: #141e2f;
  --surface-selected: #1b2940;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent: #22d3ee;
  --accent-bright: #67e8f9;
  --accent-deep: #06b6d4;
  --accent-glow: rgba(34, 211, 238, 0.16);
  --violet: #9f7aea;
  --success: #10b981;
  --warning: #fbbf24;
  --danger: #fb7185;
  --text: #f6f8fb;
  --text-secondary: #a7b0c0;
  --text-muted: #6f7c91;
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -12%, rgba(34, 211, 238, 0.07), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

section {
  position: relative;
  padding: 112px 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 7, 11, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 11px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.2);
}

.brand-for {
  margin-left: -5px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  justify-self: end;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.nav-cta:hover {
  border-color: rgba(34, 211, 238, 0.5);
  background: var(--accent-glow);
}

/* Shared typography and buttons */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.07);
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.09), 0 0 14px var(--accent);
}

.gradient-text {
  background: linear-gradient(115deg, var(--accent-bright) 5%, var(--accent) 48%, #7c9cff 98%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: #031015;
  box-shadow: 0 16px 42px rgba(34, 211, 238, 0.17);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #a5f3fc, var(--accent));
}

.btn-secondary {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: rgba(34, 211, 238, 0.42);
  background: rgba(34, 211, 238, 0.06);
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-kicker {
  margin-bottom: 13px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-intro h2,
.server-copy h2,
.launch-box h2 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 730;
  letter-spacing: -0.04em;
  line-height: 1.07;
}

.section-intro > p {
  max-width: 650px;
  margin: 20px auto 0;
  color: var(--text-secondary);
  font-size: 18px;
}

/* Hero */

.hero {
  min-height: calc(100vh - 72px);
  overflow: hidden;
  padding: 84px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.8fr);
  align-items: center;
  gap: 88px;
  min-width: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-copy h1 {
  max-width: 710px;
  margin: 26px 0 24px;
  font-size: clamp(48px, 6.4vw, 76px);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.99;
}

.hero-sub {
  max-width: 620px;
  margin-bottom: 34px;
  color: var(--text-secondary);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.6;
}

.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  color: var(--text-muted);
  font-size: 13px;
}

.trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.trust-line span::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.hero-glow-one {
  top: 5%;
  right: -8%;
  width: 590px;
  height: 590px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 66%);
}

.hero-glow-two {
  bottom: -32%;
  left: 26%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(124, 156, 255, 0.08), transparent 68%);
}

.hero-art {
  position: relative;
  z-index: 2;
}

/* Device and queue mock */

.device {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 48px;
  background: linear-gradient(145deg, #2a303a, #10131a 28%, #090b0f 75%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 46px 90px rgba(0, 0, 0, 0.55),
    0 20px 70px rgba(34, 211, 238, 0.13);
}

.device::before {
  display: none;
}

.device-hero {
  max-width: 390px;
  transform: rotate(1.4deg);
}

.device-screen {
  position: relative;
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: 38px;
  background: #030711;
}

.sequence-frame,
.sequence-video {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background: #030711;
}

.sequence-video::-webkit-media-controls {
  display: none !important;
}

.looping-animation {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #030711;
  contain: layout paint;
}

.demo-gesture-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.demo-gesture-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(20px, 9%, 38px);
  aspect-ratio: 1;
  border: 2px solid rgba(210, 252, 255, 0.96);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 12%, rgba(92, 236, 255, 0.7) 14% 35%, rgba(34, 211, 238, 0.2) 56%, transparent 72%);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(34, 211, 238, 0.95),
    0 0 34px rgba(56, 189, 248, 0.72);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  will-change: left, top, opacity, transform;
}

.demo-gesture-dot::after {
  content: "";
  position: absolute;
  inset: -42%;
  border: 1px solid rgba(165, 243, 252, 0.55);
  border-radius: inherit;
  opacity: 0.7;
}

.demo-gesture-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.72));
  will-change: opacity;
}

.demo-gesture-trail path {
  fill: none;
  stroke: rgba(103, 232, 249, 0.62);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.device-screen .looping-animation,
.feature-demo-device .looping-animation {
  display: block;
}

.queue-screen {
  min-height: 758px;
}

.ios-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 8px 22px 0;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.signal {
  font-size: 8px;
  letter-spacing: 1px;
}

.wifi {
  font-size: 19px;
  font-weight: 800;
  transform: rotate(180deg);
}

.battery {
  width: 20px;
  height: 10px;
  border: 1.5px solid #f8fafc;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.battery::after {
  display: block;
  width: 14px;
  height: 6px;
  margin: 1px;
  border-radius: 1px;
  background: #f8fafc;
  content: "";
}

.mock-topbar {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 68px;
  padding: 7px 15px 11px;
  border-bottom: 1px solid #1b2740;
  text-align: center;
}

.mock-topbar > div {
  display: flex;
  flex-direction: column;
}

.mock-topbar strong {
  font-size: 18px;
  line-height: 1.1;
}

.mock-topbar > div span {
  margin-top: 3px;
  color: #7585a2;
  font-size: 11px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #dbe5f4;
}

.menu-icon {
  flex-direction: column;
  gap: 5px;
}

.menu-icon span {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #cbd5e1;
}

.dots-icon {
  letter-spacing: 2px;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 548px;
  padding: 14px 13px 12px;
  overflow: hidden;
}

.queue-card {
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #263650;
  border-radius: 14px;
  background: #10192b;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.queue-card-head {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  min-height: 55px;
  padding: 7px 12px;
  text-align: center;
}

.queue-card-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.queue-card-head strong {
  overflow: hidden;
  color: #dfe7f5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-card-head div span {
  color: #71819d;
  font-size: 10px;
}

.chevron,
.queue-more {
  color: #8fa0bb;
  font-size: 14px;
}

.queue-image {
  position: relative;
  overflow: hidden;
  height: 132px;
  border-top: 1px solid #263650;
  background-position: center 48%;
  background-size: cover;
}

.queue-image-complete {
  background-image:
    radial-gradient(circle at 68% 35%, rgba(34, 211, 238, 0.08), transparent 25%),
    url("assets/screenshots/queue-greenhouse.jpg");
}

.queue-image-generating {
  background-image:
    linear-gradient(110deg, rgba(5, 9, 18, 0.34), rgba(34, 211, 238, 0.08)),
    url("assets/screenshots/queue-greenhouse.jpg");
}

.queue-image-generating {
  filter: saturate(0.75) contrast(1.08);
}

.status-pill {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 8px;
  color: white;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.status-done {
  background: #059669;
}

.status-running {
  background: #0284c7;
}

.spinner-dot {
  width: 7px;
  height: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-top-color: white;
  border-radius: 50%;
}

.image-meta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.66);
  color: white;
  font-size: 8px;
  font-weight: 700;
}

.latent-scan {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.18), transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px);
}

.progress-track {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
}

.progress-track span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

.queue-pending {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  min-height: 76px;
  padding: 11px;
}

.pending-thumb {
  display: grid;
  width: 44px;
  height: 50px;
  place-items: center;
  border: 1px solid #2a3953;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.07), transparent),
    #0b1322;
}

.pending-thumb svg {
  width: 22px;
  fill: none;
  stroke: #62728d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pending-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-left: 8px;
}

.pending-copy strong {
  overflow: hidden;
  color: #dfe7f5;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-copy span {
  color: #7e8da8;
  font-size: 9px;
}

.pending-badge {
  padding: 4px 7px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 7px;
  background: rgba(251, 191, 36, 0.08);
  color: var(--warning);
  font-size: 9px;
  font-weight: 800;
}

.mock-bottom-bar {
  display: grid;
  grid-template-columns: 90px 1fr 45px;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 8px 10px;
  border-top: 1px solid #20304a;
  background: #071020;
}

.run-count {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 42px;
  border: 1px solid #273650;
  border-radius: 10px;
  color: #94a3b8;
}

.run-count strong {
  color: white;
}

.mock-bottom-bar button {
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #041016;
  font-weight: 800;
}

.queue-stack-icon {
  display: grid;
  height: 42px;
  place-items: center;
  border: 1px solid #273650;
  border-radius: 10px;
  color: #d6e0ee;
}

.native-server-bar {
  display: grid;
  grid-template-columns: 35px 8px 1fr 26px 32px;
  align-items: center;
  min-height: 48px;
  padding: 0 15px 7px;
  border-top: 4px solid #05070b;
  background: #0b1422;
  color: #b7c3d5;
  font-size: 12px;
}

.native-server-bar > span:first-child,
.native-server-bar > span:last-child {
  font-size: 22px;
}

.native-server-bar strong {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 500;
}

.server-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
}

.bell {
  color: #6b7a91;
}

/* Server showcase */

.server-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 23% 50%, rgba(34, 211, 238, 0.07), transparent 26%),
    var(--bg);
}

.panels-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(circle at 77% 46%, rgba(124, 156, 255, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(13, 19, 31, 0.72), rgba(5, 7, 11, 0.96));
}

.panels-grid {
  grid-template-columns: 1fr 0.92fr;
}

.panels-art .device-server {
  transform: rotate(2deg);
}

.server-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  align-items: center;
  gap: 112px;
}

.server-art {
  position: relative;
  min-height: 690px;
  display: grid;
  place-items: center;
}

.device-server {
  z-index: 2;
  max-width: 300px;
  padding: 9px;
  border-radius: 42px;
  transform: rotate(-2.2deg);
}

.device-server::before {
  width: 75px;
  height: 23px;
  top: 14px;
}

.device-server .device-screen {
  border-radius: 33px;
}

.device-server img {
  display: block;
  width: 100%;
  height: auto;
}

.server-orbit {
  position: absolute;
  border: 1px solid rgba(34, 211, 238, 0.11);
  border-radius: 50%;
}

.orbit-one {
  width: 480px;
  height: 480px;
}

.orbit-two {
  width: 610px;
  height: 610px;
  border-color: rgba(124, 156, 255, 0.07);
}

.floating-server {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 185px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(16, 24, 39, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.floating-server-one {
  top: 23%;
  right: -2%;
}

.floating-server-two {
  bottom: 22%;
  left: -3%;
}

.floating-server > div {
  display: flex;
  flex-direction: column;
}

.floating-server strong {
  font-size: 12px;
}

.floating-server small {
  color: var(--text-muted);
  font-size: 9px;
}

.live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.cloud-dot {
  background: var(--success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

.server-copy h2 {
  max-width: 570px;
  margin-bottom: 22px;
}

.server-copy > p {
  max-width: 570px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 34px;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.check-list li > span {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  margin-top: 2px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.check-list li div {
  display: flex;
  flex-direction: column;
}

.check-list strong {
  font-size: 15px;
}

.check-list small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Feature bento */

.features-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #070a10;
}

.feature-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.bento-card {
  position: relative;
  min-height: 360px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 35%),
    var(--surface);
}

.bento-wide {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  align-items: center;
  grid-column: 1 / -1;
  gap: 52px;
}

.feature-label {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bento-card h3 {
  margin-bottom: 13px;
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.bento-card p {
  max-width: 520px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.notification-card {
  background:
    radial-gradient(circle at 78% 45%, rgba(34, 211, 238, 0.11), transparent 30%),
    var(--surface);
}

.notification-stack {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
}

.notification {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 42px 1fr;
  width: min(100%, 400px);
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(32, 41, 55, 0.92);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.notification img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.notification div {
  position: relative;
}

.notification span {
  position: absolute;
  top: 0;
  right: 0;
  color: #94a3b8;
  font-size: 10px;
}

.notification strong {
  display: block;
  font-size: 13px;
}

.notification p {
  margin-top: 2px;
  color: #d2dae7;
  font-size: 12px;
  line-height: 1.35;
}

.notification-shadow {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  min-height: 72px;
  opacity: 0.28;
  transform: scale(0.93);
}

.share-card,
.activity-card {
  display: flex;
  min-height: 590px;
  flex-direction: column;
}

/* The phone shape belongs to the screen, not to the bezel — same split as
   .device / .device-screen. Putting aspect-ratio on this padded box made the
   *border* phone-shaped while its content box was 12px shorter and narrower,
   so the letterboxed video sat about 14px clear of the bottom of the frame and
   the outline never matched the recording it was wrapping. Height now follows
   the screen, and the radii stay concentric: 26 outer − 6 padding = 20 inner. */
.feature-demo-device {
  width: 194px;
  margin: 28px auto 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background: #11151d;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(34, 211, 238, 0.08);
}

.feature-demo-device .looping-animation {
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: 20px;
}

.feature-demo-device img,
.feature-demo-device video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: #000;
}

.activity-card {
  background:
    radial-gradient(circle at 50% 90%, rgba(124, 156, 255, 0.11), transparent 42%),
    var(--surface);
}

/* Crops the top of the simulator recording. `simctl recordVideo` captures a
   square-cornered framebuffer with no display mask, so the iPhone corner is
   drawn entirely here: an iPhone 16 Pro screen corner is 62pt across a 402pt
   screen, i.e. 15.42% of the width. The aspect ratio is locked, so elliptical
   percentages keep that corner circular at every width. The crop runs past the
   first icon row: a tighter one pinched the expanded Dynamic Island against
   the corners until its rounded ends read as clipped. */
.activity-demo-device {
  width: min(100%, 430px);
  aspect-ratio: 720 / 360;
  margin: auto auto 5px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16.3% / 32.9%;
  background: #030711;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(34, 211, 238, 0.08);
}

.activity-demo-device .looping-animation {
  height: 100%;
  overflow: hidden;
  border-radius: 15.42% / 31.1%;
  /* The Live Activity is black on a near-black bezel; without this keyline the
     island's rounded ends dissolve into the frame at the corners. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.activity-demo-device video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.privacy-card {
  grid-template-columns: 0.72fr 1.28fr;
  background:
    radial-gradient(circle at 23% 50%, rgba(34, 211, 238, 0.12), transparent 23%),
    var(--surface);
}

.privacy-symbol {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
}

.privacy-symbol::before,
.privacy-symbol::after {
  position: absolute;
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 50%;
  content: "";
}

.privacy-symbol::before {
  width: 220px;
  height: 220px;
}

.privacy-symbol::after {
  width: 160px;
  height: 160px;
}

.privacy-lock {
  position: relative;
  z-index: 2;
  display: block;
  width: 72px;
  height: 114px;
  color: var(--accent);
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.28));
  /* Optical centring: the body carries all the visual weight, so a
     bounding-box-centred lock reads as sitting low inside the rings. */
  transform: translateY(-4px);
}

/* Steps */

.steps-section {
  padding: 100px 0;
}

.compact-intro {
  margin-bottom: 54px;
}

.steps {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: start;
}

.steps article {
  text-align: center;
}

.steps article > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 13px;
  background: rgba(34, 211, 238, 0.07);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.steps h3 {
  margin-bottom: 9px;
  font-size: 18px;
}

.steps p {
  max-width: 250px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.step-line {
  height: 1px;
  margin-top: 21px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.28), transparent);
}

/* Launch CTA */

/* FAQ */

.faq-section {
  padding: 40px 0 100px;
}

.faq-list {
  display: grid;
  max-width: 820px;
  margin: 0 auto;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 160ms ease, background 160ms ease;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  gap: 18px;
  color: var(--text);
  font-size: 16px;
  font-weight: 620;
  list-style: none;
}

/* Safari still paints the default marker without this. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Chevron drawn in CSS so the markup stays one element per question. */
.faq-item summary::after {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  content: "";
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  transform: translateY(1px) rotate(225deg);
}

.faq-answer {
  padding: 0 24px 22px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.68;
}

.faq-answer p + ul {
  margin-top: 12px;
}

.faq-answer ul {
  padding-left: 20px;
  list-style: disc;
}

.faq-answer li {
  margin-bottom: 7px;
}

.faq-answer strong {
  color: #dce4ef;
  font-weight: 620;
}

.faq-answer a {
  color: var(--accent);
  text-decoration-color: rgba(34, 211, 238, 0.4);
  text-underline-offset: 3px;
}

.faq-answer a:hover {
  text-decoration-color: var(--accent);
}

.launch-cta {
  padding-top: 60px;
}

.launch-box {
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 74px 28px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 58%, rgba(34, 211, 238, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(124, 156, 255, 0.035), rgba(34, 211, 238, 0.025)),
    #080d15;
  text-align: center;
}

.launch-icon {
  width: 82px;
  height: 82px;
  margin-bottom: 24px;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(34, 211, 238, 0.16));
}

.launch-box h2 {
  max-width: 690px;
  margin: 24px auto 17px;
}

.launch-box > p {
  max-width: 540px;
  margin-bottom: 30px;
  color: var(--text-secondary);
  font-size: 17px;
}

.launch-box > small {
  margin-top: 15px;
  color: var(--text-muted);
  font-size: 11px;
}

.launch-box > small a {
  color: var(--text-secondary);
}

/* Inline capture on the landing page, so joining the list costs no extra
   navigation. Same markup and JS as the dedicated signup page. */
.launch-form {
  width: 100%;
  max-width: 470px;
}

.launch-form .form-status:empty {
  min-height: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.launch-rings {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 700px;
  height: 700px;
  border: 1px solid rgba(34, 211, 238, 0.055);
  border-radius: 50%;
  transform: translate(-50%, -43%);
}

.launch-rings::before,
.launch-rings::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(34, 211, 238, 0.07);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.launch-rings::before {
  width: 490px;
  height: 490px;
}

.launch-rings::after {
  width: 290px;
  height: 290px;
}

.launch-box > *:not(.launch-rings) {
  position: relative;
  z-index: 2;
}

/* Footer */

footer {
  padding: 70px 0 28px;
}

.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 42px;
}

.footer-brand p {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
}

/* Signup page */

.signup-page {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 72px 0 92px;
}

.signup-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 88px;
}

.signup-copy h1 {
  max-width: 620px;
  margin: 24px 0 20px;
  font-size: clamp(45px, 6vw, 70px);
  letter-spacing: -0.055em;
  line-height: 1;
}

.signup-copy > p {
  max-width: 560px;
  color: var(--text-secondary);
  font-size: 18px;
}

.signup-notes {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 30px;
  list-style: none;
}

.signup-notes li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.signup-notes span {
  color: var(--accent);
}

.signup-card {
  position: relative;
  padding: 40px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, 0.11), transparent 30%),
    var(--surface);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.42);
}

.signup-card h2 {
  margin-bottom: 8px;
  font-size: 25px;
  letter-spacing: -0.025em;
}

.signup-card > p {
  margin-bottom: 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

.signup-form label {
  display: block;
  margin-bottom: 9px;
  color: #dce4ef;
  font-size: 12px;
  font-weight: 650;
}

.input-wrap {
  display: flex;
  gap: 10px;
}

.input-wrap input {
  min-width: 0;
  flex: 1;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  outline: none;
  /* Same radius as .btn so the field and the button read as one control. */
  border-radius: 14px;
  background: #070c14;
  color: var(--text);
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input-wrap input::placeholder {
  color: #59667a;
}

.input-wrap input:focus {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.09);
}

.input-wrap .btn {
  min-width: 150px;
  border: 0;
  cursor: pointer;
}

.form-fineprint {
  margin-top: 13px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.form-fineprint a {
  color: var(--text-secondary);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and screen readers skip it via the wrapper's aria-hidden. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 22px;
  margin-top: 16px;
  color: var(--accent-bright);
  font-size: 12px;
}

.form-status[data-state="pending"] {
  color: var(--text-secondary);
}

.form-status[data-state="success"] {
  color: var(--success);
  font-size: 14px;
  font-weight: 600;
}

.form-status[data-state="error"] {
  color: var(--danger);
}

.input-wrap .btn:disabled {
  cursor: progress;
  opacity: 0.65;
}

.signup-preview {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.signup-preview img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.signup-preview div {
  display: flex;
  flex-direction: column;
}

.signup-preview strong {
  font-size: 12px;
}

.signup-preview span {
  color: var(--text-muted);
  font-size: 10px;
}

/* Legal page */

.legal-page {
  padding-top: 82px;
}

.legal-wrap {
  max-width: 760px;
}

.legal-heading {
  margin-bottom: 48px;
  text-align: left;
}

.legal-heading h1 {
  margin: 12px 0 9px;
  font-size: clamp(42px, 6vw, 62px);
  letter-spacing: -0.05em;
}

.legal-heading p {
  color: var(--text-muted);
  font-size: 13px;
}

.legal-content > p,
.legal-content li {
  color: var(--text-secondary);
  font-size: 15px;
}

.legal-content > p {
  margin-bottom: 18px;
}

.legal-content h2 {
  margin: 40px 0 12px;
  font-size: 20px;
}

.legal-content ul {
  margin: 0 0 18px 20px;
}

.legal-content li {
  margin-bottom: 7px;
}

.legal-content a {
  color: var(--accent);
}

/* Responsive */

@media (max-width: 980px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr 350px;
    gap: 42px;
  }

  .hero-copy h1 {
    font-size: clamp(46px, 7vw, 66px);
  }

  .server-grid {
    gap: 60px;
  }

  .floating-server-one {
    right: -7%;
  }

  .floating-server-two {
    left: -7%;
  }

  .signup-layout {
    gap: 50px;
  }
}

@media (max-width: 800px) {
  section {
    padding: 86px 0;
  }

  .hero {
    padding-top: 68px;
  }

  .hero-grid,
  .server-grid,
  .signup-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid {
    gap: 72px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-sub {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-copy .cta-row,
  .trust-line {
    justify-content: center;
  }

  .device-hero {
    max-width: 370px;
  }

  /* The tilts read as a deliberate flourish beside a column of copy. Once the
     layout stacks and the phones are centred on their own, they just look
     crooked — so stand them upright. `.panels-art .device-server` is repeated
     here to match the specificity of the rule it overrides. */
  .device-hero,
  .panels-art .device-server,
  .device-server {
    transform: none;
  }

  .server-grid {
    gap: 50px;
  }

  .server-art {
    min-height: 650px;
    order: 2;
  }

  .server-copy {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
  }

  .server-copy h2,
  .server-copy > p {
    margin-right: auto;
    margin-left: auto;
  }

  .check-list {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }

  .bento-wide,
  .privacy-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .notification-card .bento-copy {
    text-align: center;
  }

  .notification-card .bento-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .privacy-symbol {
    min-height: 210px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .step-line {
    width: 1px;
    height: 38px;
    margin: 0 auto;
    background: linear-gradient(transparent, rgba(34, 211, 238, 0.3), transparent);
  }

  .signup-layout {
    gap: 44px;
  }

  .signup-copy {
    text-align: center;
  }

  .signup-copy .eyebrow {
    margin: 0 auto;
  }

  .signup-copy > p {
    margin: 0 auto;
  }

  .signup-notes {
    align-items: center;
  }
}

@media (max-width: 620px) {
  .container {
    padding-inline: 16px;
  }

  .site-header .brand-for {
    display: none;
  }

  .nav {
    height: 64px;
  }

  .nav-cta {
    padding: 9px 13px;
    font-size: 12px;
  }

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

  .hero-copy h1 {
    font-size: clamp(43px, 13vw, 58px);
  }

  .hero-sub {
    font-size: 17px;
  }

  .cta-row {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .trust-line {
    gap: 10px 18px;
  }

  .device-hero {
    max-width: 350px;
  }

  .section-intro {
    margin-bottom: 44px;
  }

  .section-intro h2,
  .server-copy h2,
  .launch-box h2 {
    font-size: 36px;
  }

  .section-intro > p,
  .server-copy > p {
    font-size: 16px;
  }

  .server-art {
    min-height: 580px;
  }

  .device-server {
    max-width: 270px;
  }

  .orbit-one {
    width: 390px;
    height: 390px;
  }

  .orbit-two {
    width: 500px;
    height: 500px;
  }

  .floating-server {
    min-width: 160px;
  }

  .floating-server-one {
    top: 24%;
    right: -4%;
  }

  .floating-server-two {
    bottom: 19%;
    left: -3%;
  }

  .feature-bento {
    grid-template-columns: 1fr;
  }

  .bento-wide {
    grid-column: auto;
  }

  .bento-card {
    min-height: 330px;
    padding: 27px;
  }

  .notification-card {
    display: flex;
    flex-direction: column;
  }

  .notification-stack {
    flex: 1;
    margin-top: 30px;
  }

  .launch-box {
    min-height: 540px;
    border-radius: 24px;
  }

  .footer-grid,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .input-wrap {
    flex-direction: column;
  }

  /* Stacking flips the main axis, so the base `flex: 1` starts applying to
     height with a 0 basis and collapses the field to about a line of text.
     Pin it back to its real height and let it fill the width instead. */
  .input-wrap input {
    width: 100%;
    height: 54px;
    flex: none;
  }

  .input-wrap .btn {
    width: 100%;
    /* Match the field exactly rather than the base 52px min-height. */
    min-height: 54px;
  }

  .signup-card {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}