/* ==========================================================================
   The Monitoring App — marketing site
   Dark, Takhitech family, blue accent to match the app itself.
   ========================================================================== */

:root{
  --bg:        #08090b;
  --bg-2:      #0b0d10;
  --panel:     #10141a;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.13);

  --text:      #e8ecf1;
  --text-2:    #aab4c0;
  --muted:     #7d8896;
  --faint:     #5b6470;

  --accent:      #35e0d0;
  --accent-dim:  rgba(53,224,208,.14);
  --accent-line: rgba(53,224,208,.38);

  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --maxw: 1200px;
  --nav-h: 64px;

  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
/* Inline icons default to text size. Without this an icon whose specific rule
   has not loaded renders at the SVG default of 300x150, which looks like the
   page has exploded. */
svg:not([width]){ width:1em; height:1em; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(53,224,208,.3); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.024em; line-height:1.16; }
h1{ font-size:clamp(32px,4.4vw,52px); letter-spacing:-.032em; }
h2{ font-size:clamp(24px,2.8vw,34px); }
h3{ font-size:16.5px; letter-spacing:-.01em; }
p{ margin:0; }

.lede{ font-size:clamp(15.5px,1.4vw,17.5px); color:var(--text-2); line-height:1.68; margin-top:18px; }
.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:650; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s;
}
.nav.is-stuck{ background:rgba(8,9,11,.78); backdrop-filter:blur(14px) saturate(160%); border-bottom-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:650; font-size:15.5px; letter-spacing:-.02em; flex:none; }
.brand small{ display:block; font-size:8.5px; letter-spacing:.19em; color:var(--faint); font-weight:600; margin-top:-3px; }

/* ---- brand lockup ---------------------------------------------------------
   The lockup artwork carries the mark AND the name, so the name is no longer a
   separate text node. The byline sits under it, aligned to the wordmark rather
   than to the hexagon, which is why it is indented by the mark's width. */
.brand{ flex-direction:column; align-items:flex-start; gap:1px; }
.brand-lockup{ height:26px; width:auto; flex:none; object-fit:contain; max-width:none; display:block; }
.brand .byline{
  display:block; font-size:8.5px; letter-spacing:.19em; color:var(--faint);
  font-weight:600; padding-left:34px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (max-width:520px){
  .brand-lockup{ height:22px; }
  .brand .byline{ padding-left:29px; font-size:8px; }
}

.nav-links{ display:flex; gap:2px; }
.nav-links a{ padding:8px 11px; border-radius:8px; font-size:14px; color:var(--text-2); white-space:nowrap; transition:.15s; }
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line-2); place-items:center; }
.burger{ width:18px; height:18px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--r);
  font-size:14.5px; font-weight:550; transition:.16s; white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn--primary{ background:var(--accent); color:#04211f; font-weight:650; }
.btn--primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn--ghost{ background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--sm{ height:34px; padding:0 13px; font-size:13px; border-radius:8px; }

/* ---------- phone frame ---------- */
/* The screenshots already include a device frame, so this is just a sizing
   wrapper — no bezel of our own, or it double-frames. */
.phone{ position:relative; width:100%; max-width:286px; flex:none;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.72)); }
.phone img{ width:100%; height:auto; display:block; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:calc(var(--nav-h) + 72px) 0 72px; overflow:hidden; }
.grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 0%, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 0%, #000 10%, transparent 70%);
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero-copy .lede{ max-width:52ch; }
.hero-list{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hero-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-2); }
.hero-list svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px; }

.hero-phones{ display:flex; justify-content:center; align-items:flex-start; }
.phone--front{ transform:rotate(-3deg); z-index:1; max-width:268px; }
.phone--back{ transform:rotate(6deg) translateY(44px) scale(.94); opacity:.9; max-width:268px; margin-left:-64px; }

/* ---------- strip ---------- */
.strip{ border-block:1px solid var(--line); background:var(--bg-2); }
.strip-row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 26px; padding:20px 0;
}
.strip-row span{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); }
.strip-row svg{ width:16px; height:16px; color:var(--accent); }

/* ---------- sections ---------- */
.section{ padding:88px 0; position:relative; }
/* Three surface levels rather than one, so sections actually separate.
   --bg #08090b is the page; these sit above it. */
.section--alt{
  background:linear-gradient(180deg,#10151c,#0c1015);
  border-block:1px solid var(--line-2);
}
.section--band{
  background:linear-gradient(180deg,#151b23,#0f141a);
  border-block:1px solid rgba(255,255,255,.16);
}
.section--band .cell{ background:#1a212a; }
.section--band .fact{ background:#1a212a; }
.section--band .grid, .section--band .factlist{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.17); }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head .lede{ max-width:62ch; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split--rev .split-copy{ order:2; }
.split-copy p + p{ margin-top:14px; }
.split-copy p{ color:var(--text-2); font-size:15.5px; line-height:1.68; }
.split-shot{ display:flex; justify-content:center; }
.split-shot--pair{ gap:18px; }
.split-shot--pair .phone{ max-width:238px; }
.phone--offset{ margin-top:52px; }

.ticks{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.ticks li{ display:flex; gap:11px; font-size:14.5px; color:var(--text-2); line-height:1.55; }
.ticks svg{ width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
.ticks b{ color:var(--text); font-weight:600; }

/* ---------- white label ---------- */
.brand-row{ display:grid; grid-template-columns:auto auto 1fr; gap:34px; align-items:center; }
.brand-row .phone{ max-width:248px; }
.brand-copy .ticks{ margin-top:0; }

/* ---------- grid of small features ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.cell{ background:var(--bg); padding:24px; }
.section--alt .cell{ background:var(--bg-2); }
.cell-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; margin-bottom:14px;
  background:var(--accent-dim); border:1px solid var(--accent-line); color:var(--accent); }
.cell-ico svg{ width:17px; height:17px; }
.cell h3{ margin-bottom:7px; }
.cell p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.shot .phone{ max-width:100%; }
.section--alt .fact{ background:var(--bg-2); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding:56px 0 32px; background:var(--bg); }
.footer-in{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; }
.footer-note{ font-size:13.5px; color:var(--faint); line-height:1.6; margin-top:14px; max-width:44ch; }
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.footer h5{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 13px; font-weight:650; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer a{ font-size:13.5px; color:var(--faint); }
.footer a:hover{ color:var(--text-2); }
.footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); }
.footer-bottom .spacer{ flex:1; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .gallery{ grid-template-columns:repeat(4,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .brand-row{ grid-template-columns:auto auto; }
  .brand-copy{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .nav.is-open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:var(--nav-h); left:16px; right:16px;
    background:rgba(11,13,16,.98); border:1px solid var(--line-2); border-radius:var(--r); padding:10px;
    backdrop-filter:blur(14px);
  }
  .hero-grid, .split, .split--rev .split-copy, .footer-in{ grid-template-columns:1fr; order:0; }
  .hero-phones{ min-height:0; margin-top:12px; }
  .hero-phones .phone{ position:static; transform:none; opacity:1; }
  .phone--back{ display:none; }
  .section{ padding:64px 0; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .split-shot--pair .phone{ max-width:190px; }
  .phone--offset{ margin-top:28px; }
}
@media (max-width:640px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:1fr; }
  .brand-row{ grid-template-columns:1fr; justify-items:center; }
  .factlist{ grid-template-columns:1fr; }
  .footer-links{ grid-template-columns:1fr 1fr; }
  .strip-row{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* two phones side by side, used under a section head */
.pair-row{ display:flex; justify-content:center; gap:34px; margin-bottom:44px; flex-wrap:wrap; }
.pair-row .phone{ max-width:250px; }
@media (max-width:640px){ .pair-row{ gap:20px; } .pair-row .phone{ max-width:44%; } }

/* Keyboard focus. The browser default is close to invisible on this
   background, which made the sites unusable without a mouse. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}
a:focus-visible, button:focus-visible{ outline-offset:4px; }

/* Platform availability, not download buttons. The app is white-labelled and
   published under the customer's developer account, so there is no public
   listing to link to. Apple's and Google's official badges are trademarked
   artwork with strict usage rules; these use Phosphor's platform glyphs. */
.stores{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 4px; }
.store{
  display:inline-flex; align-items:center; gap:9px;
  height:38px; padding:0 14px; border-radius:8px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  font-size:13px; color:var(--text-2); white-space:nowrap;
}
.store svg{ width:17px; height:17px; color:var(--text); flex:none; }
.store b{ color:var(--text); font-weight:600; }

/* Footer call to action */
.footer-cta{ margin-top:18px; }

/* Images carry width/height so the browser reserves their space before they
   load. Without it, lazy images below the fold expanded as you reached the
   bottom, so the page grew under the scroll and the footer kept moving away. */
.phone img{ width:100%; height:auto; }