/* Aerobove website. Plain CSS, no external fonts or scripts (privacy: nothing is fetched from
   anyone else, so visitors' addresses go nowhere but our own server). Colours match the app. */
:root {
  --bg: #000;
  --panel: #0a0a0a;
  --line: #262626;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --faint: #737373;
  --accent: #34d399;
  --accent-deep: #1f7a5a;
  --max: 1080px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
a:hover { color: #6ee7b7; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* header */
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: .3px; }
.brand img { width: 28px; height: 28px; }
.brand .accent { color: var(--accent); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

/* hero */
.hero { padding: 72px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -1px; }
.hero h1 .accent { color: var(--accent); }
.tagline { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: var(--accent); margin: 0 0 18px; }
.lead { font-size: 19px; color: #d4d4d4; margin: 0 0 28px; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); color: var(--text); background: var(--panel); }
.btn.primary { background: var(--accent); color: #000; border-color: var(--accent); }
.btn.primary:hover { background: #6ee7b7; color: #000; }
.btn small { display: block; font-weight: 500; font-size: 12px; opacity: .75; }
.soon { font-size: 14px; color: var(--faint); margin-top: 14px; }

/* the scanning ring, as in the app (components/IdleLoadingScreen.tsx): a thin white ring, faint
   all round and bright along the top, turning every 1.4 s; inside it the app's own scanning
   messages fly in from below, hold for 4 s and fly out above. CSS only (no scripts on this site). */
.scan { position: relative; width: min(320px, 74vw); aspect-ratio: 1; margin: 0 auto; }
.scan-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: #fff; animation: spin 1.4s linear infinite; }
.scan-msgs { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.scan-msgs span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 18%;
  color: #d4d4d4; font-size: clamp(16px, 2vw, 19px); opacity: 0; animation: scanmsg 39.2s linear infinite both; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 8 messages, 4.9 s each (0.45 s in, 4 s hold, 0.45 s out): one eighth of the 39.2 s cycle */
@keyframes scanmsg {
  0% { opacity: 0; transform: translateY(36px); }
  1.15% { opacity: 1; transform: translateY(0); }
  11.35% { opacity: 1; transform: translateY(0); }
  12.5% { opacity: 0; transform: translateY(-36px); }
  100% { opacity: 0; transform: translateY(-36px); }
}

/* planes crossing the whole home page behind the content, nose first (the plane symbol faces
   right, so each lane is turned to its direction of travel and the plane slides along it) */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lane { position: absolute; width: 0; height: 0; }
.lane img { position: absolute; width: 30px; height: 30px; max-width: none; margin: -15px; opacity: .55; animation: cross linear infinite both; }
.lane img.grabbed { opacity: .9; filter: drop-shadow(0 0 8px rgba(52,211,153,.7)); }
@keyframes cross { from { transform: translateX(-110vmax); } to { transform: translateX(110vmax); } }
@media (prefers-reduced-motion: reduce) {
  .scan-ring, .lane img { animation: none; }
  .lane img { display: none; }
  .scan-msgs span { animation: none; }
  .scan-msgs span:first-child { opacity: 1; }
}

/* sections */
section { padding: 56px 0; border-top: 1px solid #141414; }
h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 12px; letter-spacing: -.5px; }
h3 { font-size: 20px; margin: 0 0 6px; }
.sub { color: var(--muted); margin: 0 0 32px; max-width: 720px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.step-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent); color: #000; font-weight: 800; margin-bottom: 12px; }
.icon { font-size: 26px; margin-bottom: 8px; }

/* rarity table */
.tiers { width: 100%; border-collapse: collapse; font-size: 16px; }
.tiers th, .tiers td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tiers th { color: var(--muted); font-weight: 600; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #000; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* screenshots */
/* Desktop: three big screenshots side by side. Phones: a row you swipe through. Each links to
   the full-size image. */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-inline: calc(50% - min(620px, 50vw - 32px)); }
.shots figure { margin: 0; }
.shots a { display: block; border-radius: 26px; transition: transform .15s ease; }
.shots a:hover, .shots a:focus-visible { transform: translateY(-3px); }
.shots a:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: 4px; }
.shots img { display: block; width: 100%; border-radius: 26px; border: 1px solid var(--line); cursor: zoom-in; }
.shots figcaption { text-align: center; color: var(--muted); font-weight: 600; margin-top: 12px; }
@media (max-width: 820px) {
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
  .shots figure, .shots .phone { flex: 0 0 72%; max-width: 300px; scroll-snap-align: center; }
}
.phone { aspect-ratio: 9 / 19; border-radius: 28px; border: 2px dashed #2a2a2a; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--faint); padding: 20px; font-size: 15px; }

/* download */
.download { text-align: center; }
.download .buttons { justify-content: center; }

/* content pages */
.page { padding: 48px 0 64px; }
.page h1 { font-size: clamp(32px, 4.5vw, 46px); margin: 0 0 8px; letter-spacing: -.5px; }
.page .dated { color: var(--faint); margin: 0 0 28px; font-size: 15px; }
.page h2 { font-size: 24px; margin: 34px 0 10px; }
.page p, .page li { color: #d4d4d4; }
.page ul { padding-left: 22px; }
.page li { margin: 6px 0; }
.summary { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 14px; padding: 18px 22px; margin: 0 0 24px; }
.summary ul { margin: 0; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; margin: 14px 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.note { color: var(--faint); font-size: 15px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 44px; color: var(--faint); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

@media (max-width: 820px) {
  .hero { padding: 40px 0; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero .buttons { justify-content: center; }
  .grid3 { grid-template-columns: 1fr; }
  .nav { gap: 14px; font-size: 14px; }
  /* Phones: the name's capitals stand as tall as the icon */
  .brand { font-size: 36px; gap: 10px; letter-spacing: 0; }
  .brand img { width: 26px; height: 26px; }
}