/* ==========================================================================
   Virtual Lifeguard — site styles.

   Palette is taken from the app's own dark UI and the pipeline explainer, so
   the site, the animation and the screenshots read as one product. No external
   fonts or CSS: the whole site is HTML + this file + one small script, which
   keeps it fast and means nothing is fetched from a third party.
   ========================================================================== */

:root {
  --bg: #070d18;
  --bg-2: #0a1120;
  --card: #111d33;
  --card-2: #16213a;
  --line: #223250;
  --line-2: #2a3a5c;

  --ink: #eef3fc;
  --dim: #9db0d0;
  --faint: #6b7d9f;

  --cyan: #31cfe0;
  --blue: #4f8ef7;
  --green: #3ed894;
  --amber: #f5b73f;
  --red: #f2604c;

  --radius: 16px;
  --radius-lg: 22px;
  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 40px);

  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #6fe0ee; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* Skip link — first thing a keyboard or screen-reader user meets. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cyan); color: #04121a; padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------- layout primitives ---------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

section { padding-block: clamp(56px, 8vw, 96px); }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--blue); font-weight: 800; margin: 0 0 12px;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; }
h2 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; }
h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; }

.lede { font-size: clamp(17px, 2vw, 21px); color: var(--dim); max-width: 68ch; }
.muted { color: var(--dim); }
p { margin: 0 0 1em; max-width: 72ch; }

.caption {
  font-size: 14px; color: var(--faint); font-style: italic;
  margin: 12px 0 0; max-width: none;
}

/* ---------- header ---------------------------------------------------- */

header.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 13, 24, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--ink); text-decoration: none;
  letter-spacing: -.02em; white-space: nowrap;
}
.brand svg { width: 24px; height: 24px; flex: none; }

nav.links { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.links a {
  color: var(--dim); text-decoration: none; font-size: 15px; font-weight: 600;
}
nav.links a:hover { color: var(--ink); }

.nav-toggle {
  margin-left: auto; display: none; background: var(--card-2);
  border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  nav.links {
    position: fixed; inset: 62px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  nav.links a { padding: 15px var(--pad); border-top: 1px solid var(--line); font-size: 16px; }
  nav.links.open { max-height: 80vh; overflow: auto; }
}

/* ---------- buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cyan); color: #04121a; }
.btn-primary:hover { background: #55dded; color: #04121a; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--card-2); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- hero ------------------------------------------------------ */

.hero {
  position: relative; padding-block: clamp(52px, 9vw, 104px);
  background:
    radial-gradient(900px 560px at 15% -10%, #16294a 0%, transparent 70%),
    radial-gradient(760px 520px at 88% 6%, #0d3040 0%, transparent 72%);
  border-bottom: 1px solid var(--line);
}

.hero h1 {
  font-size: clamp(38px, 8vw, 76px); font-weight: 800; margin-bottom: 18px;
}
.hero .tagline {
  font-size: clamp(19px, 2.9vw, 30px); font-weight: 700; color: var(--cyan);
  letter-spacing: -.02em; line-height: 1.25; margin: 0 0 18px; max-width: 30ch;
}

.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

/* small capability chips under the hero copy */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: 13.5px; font-weight: 600; color: var(--dim);
  background: rgba(17, 29, 51, .8); border: 1px solid var(--line-2);
  padding: 7px 14px; border-radius: 999px;
}
.chips li b { color: var(--ink); font-weight: 700; }

/* ---------- figures --------------------------------------------------- */

figure { margin: 0; }

.shot {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
  background: var(--card);
}

/* ---------- cards / grids -------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

/* stat tiles: one big number, one label — no chartjunk */
.stat { text-align: left; }
.stat .num {
  font-size: clamp(32px, 5vw, 46px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--cyan); display: block; margin-bottom: 10px;
}
.stat .num.warn { color: var(--amber); }
.stat .lbl { color: var(--dim); font-size: 15px; }

/* callout — used for the privacy note and the assistive-technology limit */
.callout {
  border-left: 4px solid var(--amber); background: rgba(245, 183, 63, .07);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 24px 26px;
}
.callout.blue { border-left-color: var(--blue); background: rgba(79, 142, 247, .07); }
.callout h3 { color: var(--amber); }
.callout.blue h3 { color: var(--blue); }
.callout p:last-child { margin-bottom: 0; }

/* ---------- screenshot gallery --------------------------------------- */

.shots { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }
.shots .wide { grid-column: 1 / -1; }
.shots figcaption { font-size: 14px; color: var(--faint); margin-top: 10px; }

.phone { max-width: 300px; margin-inline: auto; }

/* ---------- footer --------------------------------------------------- */

footer.foot {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding-block: 52px; font-size: 14.5px; color: var(--faint);
}
footer.foot .wrap { display: grid; gap: 26px; }
footer.foot a { color: var(--dim); }
footer.foot a:hover { color: var(--cyan); }
.refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.refs li { color: var(--faint); }
.refs a { word-break: break-word; }

/* ---------- scroll reveal (progressive; no-JS shows everything) ------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}