/* ===========================================================================
 * Nightingale OS — Marketing site
 * Editorial, mature, restrained. Warm paper ground, aubergine ink, coral
 * accent, jewel tones per bundle. Layered on the design-system tokens.
 * ======================================================================== */

@import url('./styles.css');

:root {
  --paper:        oklch(96.5% 0.012 80);   /* warm cream ground */
  --paper-2:      oklch(94.2% 0.014 78);   /* slightly deeper panel */
  --ink:          oklch(26% 0.05 312);     /* aubergine-leaning near-black */
  --ink-soft:     oklch(42% 0.04 312);
  --ink-faint:    oklch(56% 0.03 300);
  --line:         oklch(86% 0.018 70);     /* hairline on paper */
  --coral:        var(--brand-coral);
  --coral-deep:   var(--brand-coral-deep);
  --aubergine:    var(--brand-aubergine);
  --site-max:     1180px;
  --gutter:       clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Layout ----------------------------------------------------------- */
.wrap { max-width: var(--site-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 120px); }
.section-sm { padding-block: clamp(40px, 6vw, 72px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Type ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-deep);
  font-weight: 500;
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--coral); display: inline-block; }
.eyebrow.center { justify-content: center; }

.display {
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  color: var(--ink);
}
.display-2 { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; margin: 0; font-size: clamp(2rem, 4.2vw, 3.3rem); }
h2.title { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3.sub { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; font-size: 1.25rem; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 36ch; }
.measure { max-width: 62ch; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
strong, b { font-weight: 700; color: var(--ink); }
.mono { font-family: var(--font-mono); }

/* ---- Nav -------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-brand); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { height: 30px; width: 30px; border-radius: 7px; display: block; flex-shrink: 0; }
.brand .n { color: var(--coral); }
.brand .os { color: var(--aubergine); }
.brand .oh { position: relative; display: inline-block; }
.brand .star { position: absolute; left: 50%; top: 49%; width: 0.4em; height: 0.4em; transform: translate(-50%, -50%); background: #e6c23a; clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); filter: drop-shadow(0 0 3px #e6c23a88); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 0.93rem; font-weight: 600; color: var(--ink-soft); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  padding: 11px 20px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s var(--ease-standard), background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 6px 18px oklch(70.7% 0.187 34 / 0.28); }
.btn-coral:hover { background: var(--coral-deep); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-sm { padding: 8px 15px; font-size: 0.86rem; }
.arrow-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.95rem; color: var(--coral-deep); }
.arrow-link .ar { transition: transform .15s; }
.arrow-link:hover .ar { transform: translateX(4px); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.card-pad-lg { padding: 36px; }
.grid { display: grid; gap: 22px; }
.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: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Browser frame for screenshots ------------------------------------ */
.frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -28px oklch(30% 0.06 312 / 0.45), 0 8px 22px -12px rgba(0,0,0,0.18); }
.frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: #cdb8c4; display: block; }
.frame-bar .u { margin-left: 14px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px; }
.frame img { width: 100%; display: block; }

/* ---- Dark band -------------------------------------------------------- */
.band-dark { background: var(--aubergine); color: oklch(92% 0.02 300); position: relative; }
.band-dark .display, .band-dark h2.title, .band-dark h3.sub { color: #fff; }
.band-dark .brand .os { color: var(--brand-aqua); }
.band-dark .lede, .band-dark .muted { color: oklch(82% 0.03 300); }
.band-dark .eyebrow { color: var(--brand-aqua); }
.band-dark .eyebrow::before { background: var(--brand-aqua); }
.band-dark .rule { background: oklch(100% 0 0 / 0.12); }
.band-dark .card { background: oklch(34% 0.05 312); border-color: oklch(100% 0 0 / 0.1); color: oklch(90% 0.02 300); }

/* ---- Pills / tags ----------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: #fff; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- Stat ------------------------------------------------------------- */
.stat-n { font-family: var(--font-brand); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.stat-l { font-size: 0.92rem; color: var(--ink-soft); margin-top: 8px; }

/* ---- Footer ----------------------------------------------------------- */
.footer { background: var(--aubergine); color: oklch(82% 0.03 300); padding-block: 64px 40px; }
.footer .brand .os { color: var(--brand-aqua); }
.footer a { color: oklch(82% 0.03 300); font-size: 0.92rem; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-aqua); margin: 0 0 16px; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid oklch(100% 0 0 / 0.12); font-size: 0.82rem; color: oklch(70% 0.03 300); }

/* ---- Reveal ----------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* ---- Misc helpers ----------------------------------------------------- */
.stack-lg > * + * { margin-top: 22px; }
.flow > * + * { margin-top: 1em; }
.center { text-align: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.num { font-family: var(--font-brand); font-weight: 600; font-size: 0.95rem; color: var(--coral-deep); }
.accent-bar { width: 38px; height: 3px; border-radius: 2px; background: var(--coral); margin-bottom: 20px; }


/* ===========================================================================
 * Color / style refresh (2026) — thread the full brand accent palette,
 * echo the pitch-deck: warm sunset + aqua ground wash, rotating accent dots,
 * and a light aqua section band to match the deck's aqua slide.
 * ======================================================================== */
body {
  background:
    radial-gradient(120% 52% at 88% -8%, oklch(90% 0.075 42 / 0.55), transparent 56%),
    radial-gradient(88% 48% at -5% 0%, oklch(92% 0.05 200 / 0.42), transparent 54%),
    var(--paper);
  background-attachment: fixed;
}
/* rotating accent-dot colors in tag rows (inline dot colors still win) */
.tag-row .pill:nth-of-type(5n+2) .dot { background: var(--brand-sapphire); }
.tag-row .pill:nth-of-type(5n+3) .dot { background: var(--brand-citron); }
.tag-row .pill:nth-of-type(5n+4) .dot { background: var(--patient-accent); }
.tag-row .pill:nth-of-type(5n+5) .dot { background: var(--brand-rosewood); }
/* light aqua section band — mirrors the deck's aqua "Model" slide */
.band-aqua { background: linear-gradient(165deg, #dbf2eb 0%, #b4e5d9 100%); position: relative; }
.band-aqua .eyebrow { color: var(--brand-coral-deep); }
.band-aqua .card { background: #fff; border-color: rgba(58,36,71,0.08); box-shadow: 0 18px 40px -28px rgba(46,74,68,0.55); }
/* warm the screenshot frame shadow toward the brand sunset */
.frame { box-shadow: 0 34px 66px -30px oklch(60% 0.12 32 / 0.42), 0 8px 22px -12px rgba(58,36,71,0.2); }