/*
  kamitune web theme tokens (derived from ios/kamitune/Theme.swift)
  - Dark-first palette
  - Spacing/radius consistent with app
*/

:root {
  /* Colors */
  --color-background: #0b1120; /* background */
  --color-surface: #0f162a; /* surface */
  --color-surface-muted: #111829; /* surfaceMuted */
  --color-text-primary: #e5e7ee; /* textPrimary */
  --color-text-secondary: #94a3b7; /* textSecondary */
  --color-primary: #22d3ee; /* primary / accent */
  --color-outline: #1f2937; /* outline */

  /* Spacing (px) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Shadows */
  --shadow-card: 0 10px 30px rgba(0,0,0,0.35);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-weight-button: 600;

  /* Layout */
  --max-w: 1120px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(34,211,238,0.08), transparent 60%),
              linear-gradient(180deg, #0b1120 0%, #0f162a 100%);
}

a { color: inherit; text-decoration: none; }
a.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 18px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #ffffff; font-weight: var(--font-weight-button);
  border: 1px solid rgba(34,211,238,0.4);
  box-shadow: 0 6px 18px rgba(34,211,238,0.18);
}
a.button:visited { color: #ffffff; }
a.button.secondary {
  background: transparent; color: var(--color-text-primary);
  border: 1px solid var(--color-outline);
}

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); }

header.site {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(15,22,42,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
header .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand svg { width: 28px; height: 28px; }
.brand-name { font-weight: 700; letter-spacing: 0.2px; }

nav a { color: var(--color-text-secondary); margin-left: 18px; }
nav a:hover { color: var(--color-text-primary); }

.hero {
  padding: 96px 0 72px;
}
.hero .headline {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.hero .lede { color: var(--color-text-secondary); font-size: clamp(16px, 2.4vw, 20px); max-width: 720px; }
.hero .cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 36px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-card);
}
.card h3 { margin: 8px 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--color-text-secondary); font-size: 14px; }

.section { padding: 56px 0; }
.section h2 { margin: 0 0 16px; font-size: 28px; }
.section p { color: var(--color-text-secondary); }

.screens {
  margin-top: 12px;
}
.screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.screen {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 12px 12px 16px;
}
.screen .frame {
  background: #000;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  aspect-ratio: 9/19.5;
}
.screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen .caption { margin-top: 10px; color: var(--color-text-secondary); font-size: 14px; }

.footer {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 28px 0; color: var(--color-text-secondary);
}
.footer .grid { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }

.prose { color: var(--color-text-secondary); line-height: 1.8; }
.prose h1 { color: var(--color-text-primary); font-size: 32px; margin: 0 0 16px; }
.prose h2 { color: var(--color-text-primary); font-size: 22px; margin-top: 28px; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose a.button { color: #ffffff; text-decoration: none; }
.prose a.button:visited { color: #ffffff; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; font-size: 14px;
  color: #0b1120; background: rgba(34,211,238,0.16);
  border: 1px solid rgba(34,211,238,0.4);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  nav a { margin-left: 12px; font-size: 14px; }
  .hero { padding: 72px 0 56px; }
}