/* ═══════════════════════════════════════════════════════════════════════
   INTELLICARE — the product's own site
   intellicare.diggysolutions.com

   ── The idea ────────────────────────────────────────────────────────────
   The page is a district hospital's morning, and the product is the hero
   rather than an illustration next to it. Every claim is followed by the
   screen that proves it, rendered in CSS from the real thing: the queue at
   half past nine, the ward board, the alert nobody has acknowledged, the
   month as the ledger reports it.

   Software marketing that shows no software has the same hole as a
   hospital website with no photographs. This site had that hole. The
   screens below are faithful renditions rather than captures, which is
   deliberate: they stay sharp at any width, reflow on a phone, and cannot
   go stale the way a PNG of one particular Tuesday does.

   ── Why it looks like this ──────────────────────────────────────────────
   Deep oxidised blue rather than clinical teal, because this is the
   PRODUCT's identity and the moment it borrows hospital colours it becomes
   a second hospital website. Sinkor owns board green and signal yellow;
   this owns midnight and brass.

   The light UI panels sit on the dark ground on purpose. It is how the
   product actually looks, and the contrast does the work that a stock
   photograph would otherwise be asked to do.

   ── Type ────────────────────────────────────────────────────────────────
   Fraunces for display, Figtree for everything else, both self hosted
   (SIL OFL, see fonts/). The previous build fetched them from Google on
   every page load; this site is read on the same connections the hospital
   site is.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ground: oxidised blue, three depths so panels can sit ON something */
  --deep:     #05121A;
  --deep-2:   #081A24;
  --deep-3:   #0D2531;
  --edge:     #17394A;

  /* the product's own surfaces, reproduced */
  --paper:    #FFFFFF;
  --paper-2:  #F4F7F8;
  --paper-3:  #E9EFF1;
  --rule:     #DCE5E8;

  /* brass carries the figures; red is only ever what the product calls red */
  --brass:    #E3B168;
  --brass-2:  #F2CE95;
  --alarm:    #E2574C;
  --alarm-bg: #FDECEA;
  --good:     #2E9E7B;

  --ink:      #0A1418;
  --ink-2:    #35505C;
  --mist:     #B7CCD6;
  --mist-2:   #7C9AA8;

  --shell: 1200px;
  --pad: 28px;

  --lift: 0 1px 2px rgba(2,10,14,.28), 0 18px 44px rgba(2,10,14,.42);
  --lift-2: 0 1px 2px rgba(2,10,14,.3), 0 34px 80px rgba(2,10,14,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--deep);
  color: var(--mist);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; background: var(--brass); color: var(--ink); padding: 10px 16px; font-weight: 700; z-index: 99; }
.skip:focus { left: 12px; top: 12px; }

/* ── masthead ────────────────────────────────────────────────────────── */
.mast { position: sticky; top: 0; z-index: 40; background: rgba(5,18,26,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); }
.mast .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 14px; padding-bottom: 12px; }
.mark { display: flex; align-items: baseline; gap: 2px; text-decoration: none; font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.mark span { color: var(--brass); }
.nav { display: flex; gap: 20px; font-size: 14.5px; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--mist-2); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.nav a:hover { color: #fff; }
@media (min-width: 900px) { .nav { width: auto; margin: 0; padding: 0; overflow: visible; } }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 14px 26px; border-radius: 3px; transition: .16s; border: 2px solid transparent; }
.btn.solid { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn.solid:hover { background: var(--brass-2); border-color: var(--brass-2); }
.btn.ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.btn.dark { background: var(--ink); color: var(--brass); border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── section rhythm ──────────────────────────────────────────────────── */
section { padding: 84px 0; position: relative; }
.light { background: var(--paper-2); color: var(--ink); }
.light .eyebrow { color: var(--ink-2); }
.eyebrow { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 800; color: var(--brass); }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; text-wrap: balance; }
h2 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 52px); color: #fff; }
.light h2 { color: var(--ink); }
h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.022em; }
.lead { margin: 0 0 26px; font-size: 18.5px; line-height: 1.62; color: var(--mist); max-width: 58ch; }
.light .lead { color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════
   THE HERO. The product is the hero, not an illustration beside it.
   ═══════════════════════════════════════════════════════════════════════ */
.hero { padding: 76px 0 0; overflow: hidden; position: relative; }
/* A single soft light behind the screen, so it sits IN something rather
   than floating on a flat field. One light, not a gradient wash. */
.hero::before {
  content: ""; position: absolute; left: 50%; top: 8%; width: 1100px; height: 640px;
  transform: translateX(-30%);
  background: radial-gradient(ellipse at center, rgba(60,140,175,.30), rgba(5,18,26,0) 68%);
  pointer-events: none;
}
.hero .shell { position: relative; }
.hero h1 { margin: 0 0 20px; font-size: clamp(40px, 6.6vw, 82px); color: #fff; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero .lead { font-size: 19.5px; max-width: 52ch; }
.hero-note { margin: 18px 0 0; font-size: 14px; color: var(--mist-2); }
.hero-stage { margin-top: 54px; position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   THE SCREENS. Rendered in CSS from the real product.
   ═══════════════════════════════════════════════════════════════════════ */
.screen {
  background: var(--paper); color: var(--ink); border-radius: 6px; overflow: hidden;
  box-shadow: var(--lift-2); border: 1px solid rgba(255,255,255,.1);
}
.screen.flat { box-shadow: var(--lift); }
.screen-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #0F2A38; color: var(--mist); font-size: 12px; }
.screen-bar .name { font-family: "Fraunces", Georgia, serif; font-size: 14px; color: #fff; font-weight: 600; }
.screen-bar .name span { color: var(--brass); }
.screen-bar .where { color: var(--mist-2); }
.screen-bar .who { margin-left: auto; color: var(--mist-2); }
.screen-body { padding: 16px; }

/* the queue, three lanes */
.lanes { display: grid; gap: 12px; }
@media (min-width: 720px) { .lanes { grid-template-columns: repeat(3, 1fr); } }
.lane { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 12px; min-width: 0; }
.lane h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; display: flex; justify-content: space-between; align-items: center; }
.lane h4 b { background: var(--ink); color: #fff; font-size: 11px; border-radius: 99px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.tickets { display: grid; gap: 8px; }
.ticket { background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 9px 10px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.ticket .no { font-size: 11.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ticket .nm { font-size: 14.5px; font-weight: 650; grid-column: 1; }
.ticket .cx { grid-column: 1; font-size: 12.5px; color: var(--ink-2); }
.ticket .wt { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ticket .wt b { display: block; font-size: 13px; color: var(--ink); }
.ticket.urgent { border-left: 4px solid var(--alarm); }
.ticket.priority { border-left: 4px solid var(--brass); }
.tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; }
.tag.urgent { background: var(--alarm); color: #fff; }
.tag.priority { background: var(--brass); color: var(--ink); }

/* the notices panel */
.notices { background: var(--alarm-bg); border: 1px solid #F5C9C4; border-radius: 4px; padding: 14px; }
.notices h4 { margin: 0 0 10px; font-size: 14.5px; font-weight: 750; color: #8E2A22; display: flex; justify-content: space-between; }
.notice { border-top: 1px solid #F3D2CE; padding: 9px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.notice:first-of-type { border-top: 0; }
.notice b { font-size: 14px; font-weight: 650; }
.notice span { display: block; font-size: 12.5px; color: var(--ink-2); }
.notice .od { font-size: 11px; font-weight: 800; color: var(--alarm); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

/* the ward board */
.beds { display: grid; gap: 8px; }
@media (min-width: 560px) { .beds { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .beds { grid-template-columns: repeat(4, 1fr); } }
.bed { border: 1px solid var(--rule); border-radius: 3px; padding: 10px; background: var(--paper); min-height: 92px; }
.bed .code { font-size: 11px; font-weight: 800; color: var(--ink-2); letter-spacing: .05em; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.bed .st { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 2px; }
.bed.occupied .st { background: #E4EFF4; color: #1D4E63; }
.bed.free .st { background: #E4F3EC; color: #1E6B52; }
.bed.clean .st { background: #FBF0DC; color: #7A5717; }
.bed .nm { margin-top: 7px; font-size: 14px; font-weight: 650; }
.bed .dt { font-size: 12px; color: var(--ink-2); }
.bed .go { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #8E2A22; }

/* the ledger rows */
.ledger { border-top: 2px solid var(--ink); }
.light .ledger .lr { border-bottom: 1px solid var(--rule); }
.ledger .lr { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 13px 0; }
.ledger .lr b { font-size: 16.5px; font-weight: 650; }
.ledger .lr span { display: block; font-size: 13.5px; color: var(--ink-2); }
.ledger .lr .n { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 17px; white-space: nowrap; }
.ledger .lr .n.pos { color: #1E6B52; }
.ledger .lr .n.neg { color: var(--alarm); }

/* the offline device */
.device { background: #0F2A38; border: 1px solid var(--edge); border-radius: 6px; padding: 16px; color: var(--mist); box-shadow: var(--lift); }
.device .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.device .row:last-child { border-bottom: 0; }
.device .row b { color: #fff; font-size: 14.5px; font-weight: 650; }
.device .row span { font-size: 12.5px; color: var(--mist-2); display: block; }
.device .pill { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.device .pill.off { background: rgba(227,177,104,.16); color: var(--brass); }
.device .pill.ok { background: rgba(46,158,123,.16); color: #6BD3AE; }
.device .pill.no { background: rgba(226,87,76,.16); color: #F0938B; }

/* ── layout helpers ──────────────────────────────────────────────────── */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
@media (min-width: 940px) { .split.rev > *:first-child { order: 2; } }

.figs { display: grid; gap: 26px; margin-top: 34px; }
@media (min-width: 700px) { .figs { grid-template-columns: repeat(3, 1fr); } }
.fig b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 46px; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.035em; }
.fig span { display: block; margin-top: 8px; font-size: 15px; color: var(--mist-2); line-height: 1.5; }
.light .fig b { color: var(--ink); }
.light .fig span { color: var(--ink-2); }

/* the audience fork */
.fork { display: grid; gap: 3px; background: var(--edge); border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
@media (min-width: 860px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork > a { display: block; text-decoration: none; background: var(--deep-2); padding: 34px 30px; transition: .18s; }
.fork > a:hover { background: var(--deep-3); }
.fork h3 { color: #fff; margin-bottom: 10px; }
.fork p { margin: 0 0 16px; color: var(--mist-2); font-size: 15.5px; line-height: 1.6; max-width: 42ch; }
.fork ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.fork li { display: flex; gap: 10px; font-size: 14.5px; color: var(--mist); line-height: 1.5; }
.fork li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; background: var(--brass); }
.fork .more { font-weight: 750; font-size: 15px; color: var(--brass); }

.cards { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 780px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--deep-2); border: 1px solid var(--edge); border-radius: 5px; padding: 24px; }
.light .card { background: var(--paper); border-color: var(--rule); }
.card h3 { color: #fff; font-size: 19px; }
.light .card h3 { color: var(--ink); }
.card p { margin: 0; font-size: 15px; color: var(--mist-2); line-height: 1.58; }
.light .card p { color: var(--ink-2); }

.nots { display: grid; gap: 0; border-top: 1px solid var(--edge); margin-top: 26px; }
.not { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--edge); align-items: baseline; }
.not .x { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--alarm); }
.not b { display: block; color: #fff; font-size: 17px; font-weight: 650; margin-bottom: 3px; }
.not span { font-size: 15px; color: var(--mist-2); line-height: 1.55; }

/* ── closing call ────────────────────────────────────────────────────── */
.close { background: var(--deep-3); border-top: 1px solid var(--edge); }
.close h2 { max-width: 18ch; }

footer { background: var(--deep); border-top: 1px solid var(--edge); padding: 46px 0 34px; font-size: 14.5px; }
footer .fgrid { display: grid; gap: 28px; }
@media (min-width: 760px) { footer .fgrid { grid-template-columns: 1.5fr 1fr 1fr; } }
footer h4 { margin: 0 0 12px; color: #fff; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; font-family: "Figtree", sans-serif; }
footer a { display: block; color: var(--mist-2); text-decoration: none; padding: 4px 0; }
footer a:hover { color: #fff; }
footer p { margin: 0 0 8px; color: var(--mist-2); }
footer .base { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--edge); color: var(--mist-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

.scroll-x { overflow-x: auto; }