/* Kalo coming-soon page. Colours follow the app's theme tokens (Kalo/Theme/Theme.swift):
   the brand green #22B27A / #2ED88F only fills shapes, text uses the readable accent
   #0D7A54 (5.3:1 on white), labels on green fills use #04261A. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F4F6F3;
  --surface: #FFFFFF;
  --ink: #132019;
  --muted: #4E5D55;
  --line: #D8E0DA;
  --accent: #22B27A;
  --accent-text: #0D7A54;
  --on-accent: #04261A;
  --glow: rgba(34, 178, 122, 0.18);
  --bezel: #0F1512;
  --space: clamp(20px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1310;
    --surface: #151D18;
    --ink: #E3ECE6;
    --muted: #A2B2A9;
    --line: #26322B;
    --accent: #2ED88F;
    --accent-text: #45DB9D;
    --on-accent: #03241A;
    --glow: rgba(46, 216, 143, 0.14);
    --bezel: #000000;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-underline-offset: 3px; }
a:focus-visible,
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

.top,
.hero,
.foot {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--space);
}

.top { padding-block: 24px 0; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { display: block; border-radius: 11px; }
.wordmark { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }

/* Text first on phones, side by side from 880 px. */
.hero {
  flex: 1;
  display: grid;
  gap: 48px;
  align-items: center;
  padding-block: 40px 56px;
}

@media (min-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; padding-block: 56px 72px; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

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

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.accent { display: block; color: var(--accent-text); }

.lead {
  max-width: 34rem;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
}

.facts {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.facts li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.facts svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--accent-text); }

.contact { margin-top: 32px; display: grid; gap: 10px; justify-items: start; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease-out, filter 160ms ease-out;
}
.button svg { width: 20px; height: 20px; }
.button:hover { filter: brightness(1.05); }
.button:active { transform: scale(0.98); }

.contact-note { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.languages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* The device: a soft glow behind a dark bezel, the real screenshot inside. */
.device {
  position: relative;
  margin: 0;
  justify-self: center;
}

.device::before {
  content: "";
  position: absolute;
  inset: 8% -18%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  z-index: 0;
}

.frame {
  position: relative;
  z-index: 1;
  width: 252px;
  padding: 10px;
  border-radius: 46px;
  background: var(--bezel);
  box-shadow: 0 24px 60px -24px rgba(15, 21, 18, 0.45);
  animation: rise 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (min-width: 880px) {
  .frame { width: 300px; }
}

.frame img { display: block; width: 100%; height: auto; border-radius: 36px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frame { animation: none; }
  .button { transition: none; }
}

.foot {
  padding-block: 24px 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.foot p { max-width: 62rem; margin: 0 0 10px; }
.foot p:last-child { margin-bottom: 0; }
.foot strong { color: var(--ink); font-weight: 600; }

/* 404 */
.notfound { flex: 1; display: grid; place-content: center; gap: 16px; text-align: center; padding: var(--space); }
.notfound h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.notfound p { margin: 0; color: var(--muted); }