/* Shared styles for the Columba Labs website (static pages, no scripts, no cookies).
   Colours are defined once here and swapped for dark mode below. System fonts only, so the site
   makes no requests to font services (keeps the privacy policy's "no third parties" promise). */
:root {
  --ink: #0f1b2d; --muted: #52607a; --bg: #ffffff; --soft: #f1f5f9; --line: #e2e8f0;
  --brand: #0f766e; --brand-2: #1e3a8a; --accent: #0d9488; --hl: #14b8a6;
  --bubble-in: #ffffff; --bubble-out: #ccfbf1; --chat-bg: #eef2f7;
  --hero-from: #ecfdf5; --hero-to: #eff6ff; --card: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf6; --muted: #a3b0c4; --bg: #0b1220; --soft: #111a2e; --line: #1f2a40;
    --brand: #2dd4bf; --brand-2: #93c5fd; --accent: #5eead4; --hl: #5eead4;
    --bubble-in: #1e293b; --bubble-out: #134e4a; --chat-bg: #0f172a;
    --hero-from: #0b1f24; --hero-to: #0e1a33; --card: #111a2e;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

/* Header: shared by every page. */
header, main, footer { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header { display: flex; justify-content: space-between; align-items: center; padding-top: 20px;
         padding-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.2rem;
         color: var(--ink); text-decoration: none; }
nav a { margin-left: 18px; color: var(--muted); text-decoration: none; font-weight: 500; }
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--accent); }

/* Hero (home page). */
.hero { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 1080px; margin: 0 auto; padding: 56px 20px 64px; display: grid;
              grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 16px 0; }
.hl { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text;
      background-clip: text; color: transparent; }
.pill { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem;
        font-weight: 600; color: var(--brand); background: var(--card); border: 1px solid var(--line); }
.lead { font-size: 1.15rem; color: var(--muted); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-block; padding: 13px 22px; border-radius: 10px; font-weight: 650; text-decoration: none;
       background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
       box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }

/* Illustrative phone with a generic chat, in our own colours (not WhatsApp's look, to respect
   Meta's brand rules). */
.phone { background: var(--chat-bg); border-radius: 28px; border: 10px solid #111827; overflow: hidden;
         box-shadow: 0 24px 60px rgba(15, 27, 45, 0.25); max-width: 360px; justify-self: center; width: 100%; }
.phone-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.phone-top small { display: block; font-size: 0.75rem; opacity: 0.85; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.22); display: grid; place-items: center;
          font-size: 0.8rem; font-weight: 700; }
.chat { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; line-height: 1.45; }
.msg { margin: 0; padding: 8px 11px; border-radius: 10px; max-width: 85%; box-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.msg.in { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.msg.out { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 2px; }

/* Sections and cards. */
.section { padding: 64px 0 8px; }
.section-title { font-size: 1.9rem; text-align: center; margin: 0 0 32px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
           transition: transform 0.15s ease, box-shadow 0.15s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 27, 45, 0.08); }
.feature h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.feature svg { width: 44px; height: 44px; padding: 9px; border-radius: 12px; fill: none; stroke: var(--brand);
               stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--soft); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { position: relative; padding: 22px; border-radius: 16px; background: var(--soft); }
.steps h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--muted); }
.num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700;
       background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Dark privacy band. */
.band { margin-top: 72px; background: linear-gradient(135deg, #0b3b3a, #172554); color: #e6edf6; }
.band-inner { max-width: 1080px; margin: 0 auto; padding: 56px 20px; }
.band h2 { font-size: 1.9rem; margin: 0 0 24px; }
.band p { margin: 0; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; }
.band strong { color: #fff; display: block; margin-bottom: 4px; }
.band a { color: #5eead4; }

.cta-final { text-align: center; max-width: 720px; margin: 0 auto; padding: 64px 20px 8px; }
.cta-final h2 { font-size: 1.9rem; margin: 0 0 8px; }

/* Text pages (privacy policy, terms, 404). */
main.page { max-width: 780px; }
main.page h1 { font-size: 2.2rem; margin: 32px 0 12px; }
main.page h2 { margin-top: 36px; font-size: 1.3rem; }
.card { background: var(--soft); border-radius: 12px; padding: 16px 20px; margin: 16px 0; }
.card h2:first-child { margin-top: 4px; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); }

footer { margin-top: 72px; padding-top: 20px; padding-bottom: 36px; color: var(--muted); font-size: 0.9rem;
         border-top: 1px solid var(--line); }
footer p { margin: 0 0 8px; }

/* Phones and small tablets: stack everything in one column. */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 36px; gap: 36px; }
  .grid, .grid.two, .steps { grid-template-columns: 1fr; }
  nav a { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .feature, html { transition: none; scroll-behavior: auto; } }