/* Self-hosted (not Google Fonts CDN) — same reasoning as the site's own
   self-hosted, cookieless Umami analytics: no third-party request just to
   render text. Both files are variable fonts covering Inter's full
   weight axis (100-900) in one file each, not one file per weight —
   `font-weight: 100 900` below is the standard way to declare that range
   for a single @font-face rather than needing a separate block per
   weight actually used (400/600/700/800 elsewhere in this file).
   latin-ext adds the diacritics the Slovak copy on this page needs
   (á, č, ľ, š, ž, ...) that the plain latin subset alone doesn't cover. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #070a16;
  --bg-elevated: #0d1224;
  --card: rgba(255, 255, 255, 0.05);
  --card-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --text: #f3f5f8;
  --text-secondary: #9aa4b6;
  --text-tertiary: #6b7385;
  --accent: #5b7bf6;
  --accent-2: #4f63e0;
  --accent-warm: #ffb020;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: 1160px;
  font-size: 16px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Horizontal gutter + centering only — deliberately NOT touching top/bottom
   padding here. `.wrap` is a class selector, which beats a plain element
   selector like `section` or `footer` on specificity regardless of source
   order, so a vertical value here would silently override every section's
   own vertical rhythm (that's what caused the "too tight" spacing before). */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Background glow / radar sweep */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(91, 123, 246, 0.16), transparent 60%),
    radial-gradient(50% 40% at 85% 0%, rgba(79, 99, 224, 0.14), transparent 60%),
    radial-gradient(40% 30% at 50% 100%, rgba(255, 176, 32, 0.06), transparent 60%),
    var(--bg);
}

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

/* ---------- Nav ---------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(5, 7, 13, 0.72);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.nav-links a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

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

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 24px rgba(91, 123, 246, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(91, 123, 246, 0.4);
}

.btn-ghost {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--card-hover);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.88rem;
}

/* Buy Me a Coffee — the brand yellow so it stands out among the CTAs. */
.btn-coffee {
  background: #ffdd00;
  color: #000;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 221, 0, 0.25);
}
.btn-coffee:hover {
  box-shadow: 0 10px 30px rgba(255, 221, 0, 0.45);
}

/* ---------- Hero ---------- */
.hero {
  /* Longhand top/bottom only — NOT the `padding: 96px 0 60px` shorthand
     this used to be, which sets left/right to exactly 0 as part of the
     same declaration. `.hero` shares this element with `.wrap` (see
     index.html: `<section class="hero wrap">`) specifically for its
     horizontal gutter, but since both are single-class selectors of equal
     specificity, this rule coming later in the file made its own
     left/right: 0 win over `.wrap`'s own padding-left/right: 24px — On
     desktop that got masked by `.hero`'s content simply being narrower
     than the viewport (centered via `.wrap`'s own auto margins once past
     `--max-width`), but on any mobile viewport narrower than
     `--max-width`, that's what left the whole hero flush against both
     screen edges while every other section (never also carrying a
     shorthand `padding` of its own) kept its horizontal gutter intact.
  */
  padding-top: 96px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero h1 span {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: 1.12rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 34px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}

/* 2x2 CTA grid: App Store + Websupport badges on the first row, the two buttons
   directly beneath them, columns equal so each button lines up under its badge.
   The width is set explicitly rather than derived from content: the badges'
   INTRINSIC sizes are 250x83 and 156x52, so a content-sized grid snapped both
   columns to 250px and blew the badges up. 180px is the smallest width that
   still fits "Buy me a coffee" on one line (it is nowrap) with trimmed padding.
   Both badges are ~3:1, so they stay exactly level with each other. */
.hero-ctas-stack {
  --cta-col: 180px;
  display: grid;
  /* minmax(0, 1fr) + a max-width cap: columns are 180px when there's room and
     shrink evenly when there isn't, so the same 2x2 layout survives all the way
     down to a phone instead of switching to a different arrangement. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: calc(var(--cta-col) * 2 + 14px);
  gap: 14px;
  margin-bottom: 38px;
  align-items: center;
}

/* Trimmed from the default 22px so the longest label fits the column. */
.hero-ctas-stack .btn {
  padding-left: 14px;
  padding-right: 14px;
}

/* Fill the grid cell rather than keeping the intrinsic 52px height, so the
   badge's right edge lines up with the button underneath it. */
.hero-ctas-stack .appstore-badge img,
.hero-ctas-stack .host-badge img {
  width: 100%;
  height: auto;
}

/* On a narrow phone the columns shrink below ~173px, which is where "Buy me a
   coffee" (nowrap) would overflow its pill. Shrinking the type and padding a
   little keeps it on one line, so the 2x2 grid holds instead of reflowing. */
@media (max-width: 420px) {
  .hero-ctas-stack .btn {
    font-size: 0.86rem;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Official "Download on the App Store" badge (Apple marketing artwork). */
.appstore-badge { display: inline-flex; align-items: center; line-height: 0; }
.appstore-badge img { height: 52px; width: auto; display: block; }
.appstore-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }

.hero-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.hero-meta div {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}

.radar-sweep {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(91, 123, 246, 0.25) 12%, transparent 24%);
  animation: spin 6s linear infinite;
  filter: blur(2px);
}

.radar-rings {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(91, 123, 246, 0.14);
}

.radar-rings::before,
.radar-rings::after {
  content: "";
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px solid rgba(91, 123, 246, 0.1);
}

.radar-rings::after {
  inset: 130px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Device mockups ---------- */
.phone-frame {
  position: relative;
  width: 272px;
  height: 556px;
  border-radius: 46px;
  background: #0a0c12;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 6px #05060a;
  padding: 10px;
  z-index: 2;
}

.phone-frame .notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  border-radius: 14px;
  background: #05060a;
  z-index: 3;
}

.phone-frame .screen {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #0b0f1a;
  position: relative;
}

.phone-frame .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.phone-frame .screen .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  background:
    linear-gradient(160deg, rgba(91, 123, 246, 0.12), rgba(79, 99, 224, 0.08));
}

.floating-card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  z-index: 3;
  font-size: 0.82rem;
}

.floating-card.card-1 {
  top: 14%;
  left: -6%;
  animation: float 5s ease-in-out infinite;
}

.floating-card.card-2 {
  bottom: 10%;
  right: -8%;
  animation: float 5s ease-in-out infinite 1.2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.floating-card .fc-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.floating-card .fc-sub {
  color: var(--text-tertiary);
  font-size: 0.74rem;
}

.pill-tiny {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(91, 123, 246, 0.18);
  color: var(--accent);
  margin-top: 6px;
}

/* ---------- Section shared ---------- */
section {
  padding: 132px 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head.left {
  margin: 0 0 20px;
  text-align: left;
}

.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.015em;
  font-weight: 800;
  margin-bottom: 14px;
}

.section-head p {
  color: var(--text-secondary);
  font-size: 1.02rem;
}

/* ---------- Trust strip ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.trust-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
}

.trust-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(91, 123, 246, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.trust-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.trust-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ---------- Feature rows ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}

.feature-row:last-child {
  border-bottom: none;
}

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

.feature-row.reverse .feature-visual {
  order: 2;
}

.feature-row.reverse .feature-text {
  order: 1;
}

.feature-text .badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--card);
}

.badge.accent {
  color: var(--accent);
  border-color: rgba(91, 123, 246, 0.3);
  background: rgba(91, 123, 246, 0.1);
}

.badge.warm {
  color: var(--accent-warm);
  border-color: rgba(255, 176, 32, 0.35);
  background: rgba(255, 176, 32, 0.12);
}

.feature-text h3 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.feature-text p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 20px;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.feature-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}

.feature-visual {
  display: flex;
  justify-content: center;
}

.shot-frame {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 8px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.shot-frame img {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 8px);
}

.shot-frame .placeholder {
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--radius-lg) - 8px);
  background: linear-gradient(160deg, rgba(91, 123, 246, 0.14), rgba(79, 99, 224, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.shot-frame.wide .placeholder,
.shot-frame.wide img {
  aspect-ratio: 16 / 10;
}

/* ---------- Watch + widgets ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.panel h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 20px 0 10px;
}

.panel p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.watch-frame {
  width: 170px;
  height: 208px;
  border-radius: 46px;
  background: #0a0c12;
  border: 2px solid rgba(255, 255, 255, 0.14);
  padding: 8px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.watch-frame::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 40%;
  width: 8px;
  height: 34px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}

.watch-frame .screen {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #0b0f1a;
}

.watch-frame .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-frame .screen .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  text-align: center;
  background: linear-gradient(160deg, rgba(91, 123, 246, 0.14), rgba(79, 99, 224, 0.08));
}

.widget-shots {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.widget-shot {
  width: 150px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 6px;
}

.widget-shot .placeholder,
.widget-shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 17px;
  object-fit: cover;
}

.widget-shot.wide .placeholder,
.widget-shot.wide img {
  aspect-ratio: 2 / 1;
}

.widget-shot .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: 0.62rem;
  color: var(--text-tertiary);
  background: linear-gradient(160deg, rgba(91, 123, 246, 0.14), rgba(79, 99, 224, 0.08));
}

/* ---------- Coverage table ---------- */
.coverage-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.coverage-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.coverage-table th,
.coverage-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.coverage-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.coverage-table thead th.col-feature {
  width: 32%;
}

.coverage-table tbody tr:last-child td {
  border-bottom: none;
}

.coverage-table tbody tr {
  transition: background 0.15s ease;
}

.coverage-table tbody tr:hover {
  background: var(--card-hover);
}

.coverage-table .feat-name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}

.coverage-table .feat-name i {
  color: var(--accent);
  width: 22px;
  text-align: center;
  margin-right: 8px;
}

.cov-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cov-yes {
  color: #4ade80;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.cov-no {
  color: var(--text-tertiary);
  font-size: 1.05rem;
  flex-shrink: 0;
  opacity: 0.4;
}

.cov-src {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cov-beta {
  margin-left: 5px;
  padding: 2px 8px;
  font-size: 0.65rem;
}

.coverage-note {
  margin-top: 14px;
  padding-left: 20px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  text-align: left;
}

.cov-metericcast {
  color: var(--accent-warm);
  margin-left: 5px;
  font-size: 0.78rem;
}

.cov-star {
  color: var(--text-tertiary);
  font-size: 0.6rem;
  vertical-align: super;
  margin-left: 1px;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--text-secondary);
  margin-top: 12px;
  font-size: 0.94rem;
  max-width: 640px;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(91, 123, 246, 0.18), transparent 60%),
    radial-gradient(80% 120% at 90% 100%, rgba(79, 99, 224, 0.16), transparent 60%),
    var(--card);
  padding: 64px 48px;
  text-align: center;
}

.cta-banner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.cta-banner p {
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 30px;
}

.cta-fineprint {
  margin-top: 22px;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 96px 0 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.footer-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.86rem;
  color: var(--text-secondary);
}

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

.footer-bottom {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Hosting badge, shown beside the App Store badge in the hero. Height matches
   that badge's 52px so the two share a baseline; slightly dimmed so Apple's
   stays visually dominant, full strength on hover. */
.host-badge {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.host-badge:hover {
  opacity: 1;
}

.host-badge img {
  display: block;
  height: 52px;
  width: auto;
}

.host-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 10px;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  section {
    padding: 88px 0;
  }

  footer {
    padding-top: 72px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }

  .hero-visual {
    min-height: 460px;
    order: -1;
    /* Belt-and-suspenders alongside the repositioned `.floating-card`s
       below: `.radar-sweep`/`.radar-rings` are a fixed 480px (380px under
       560px) circle centered in here regardless of how narrow this
       container actually is, so on a typical ~350-390px-wide phone they
       extend past its edges too. Safe to clip here specifically (not
       added globally) since it's exactly this mobile layout where nothing
       is meant to intentionally peek outside `.hero-visual` anymore. */
    overflow: hidden;
  }

  /* `.floating-card`'s `left: -6%`/`right: -8%` (in the desktop rule
     above) deliberately peek the cards outside `.hero-visual` — fine on
     desktop, where there's plenty of surrounding whitespace for that, but
     on mobile `.hero-visual` runs the full viewport width, so that same
     negative offset pushed the cards partly off-screen (`body`'s own
     `overflow-x: hidden` clips the overflow instead of scrolling to it,
     but the cards themselves ended up cut off/barely visible right at the
     screen edge) and widened the page's effective content box beyond the
     viewport, which is what showed up as an unexplained empty gap next to
     the nav's hamburger icon. Pulled back to sit fully on-screen instead,
     and given a stronger, more opaque background — the original subtle
     frosted-glass look leaned on `backdrop-filter` over a comparatively
     plain part of the desktop backdrop; layered over more of the busy
     radar/phone visual on this narrower layout, the same low-contrast
     background blended into it too easily.
  */
  .floating-card {
    background: rgba(11, 15, 26, 0.92);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .floating-card.card-1 {
    left: 2%;
  }

  .floating-card.card-2 {
    right: 2%;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 44px 0;
  }

  .feature-row.reverse .feature-visual,
  .feature-row.reverse .feature-text {
    order: initial;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(5, 7, 13, 0.97);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 18px;
  }

  .nav-links a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-toggle {
    display: block;
  }

  .nav-cta {
    display: none;
  }

  .coverage-table th,
  .coverage-table td {
    padding: 13px 14px;
  }

  .coverage-table .feat-name {
    font-size: 0.86rem;
  }

  .coverage-table .cov-src {
    font-size: 0.78rem;
  }
}

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

  .cta-banner {
    padding: 44px 24px;
  }

  .phone-frame {
    width: 230px;
    height: 470px;
  }

  .radar-sweep,
  .radar-rings {
    width: 380px;
    height: 380px;
  }

  .coverage-table th,
  .coverage-table td {
    padding: 11px 10px;
  }

  .coverage-table .feat-name {
    font-size: 0.82rem;
  }

  .coverage-table .cov-src {
    font-size: 0.74rem;
  }

  .coverage-table .feat-name i {
    width: 18px;
    margin-right: 5px;
  }

  .cov-yes,
  .cov-no {
    font-size: 0.95rem;
  }
}

/* ---------- Legal pages (privacy policy, etc.) ---------- */
.legal {
  padding-top: 160px;
  padding-bottom: 100px;
}

.legal-body {
  max-width: 680px;
  margin: 0 auto;
}

.legal-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 40px 0 12px;
}

.legal-body h3:first-child {
  margin-top: 0;
}

.legal-body p {
  color: var(--text-secondary);
  margin-bottom: 14px;
}

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

.legal-body ul.feature-list {
  margin-bottom: 14px;
}