/* Helix AI Cloud - the corporate layer.
 *
 * site.css carries the product-shaped rules and consumes tokens.css, which
 * is the byte-identical shared palette (drift-tested against the console
 * and the desktop app). This file sits on top and turns that palette into
 * the DIVISION's presentation: the deepest-blue glass, the mesh pools, the
 * grain, the display type scale and the diagrammatic SVG art system.
 *
 * The grammar is deliberately the one used by the parent company's site
 * (Helix Cloud Solutions, hcs.co.ke): darkest-blue glass morphism, thin
 * hairline strokes, deep-blue traces, small pulsing accent nodes. What
 * differs is the accent. HCS reserves bright yellow for filled controls;
 * Helix AI Cloud uses AQUA, because the division's two platforms both
 * already speak in cyan and a second yellow would read as the same brand
 * rather than a division of it.
 *
 * The accent discipline carries over exactly, and it is the rule most
 * easily broken: --brand-accent is for FILLS, MARKS and STROKES. It is not
 * a text colour. Text that needs to look accented uses --accent-ink from
 * site.css, which is mixed toward --text and measured against the 4.5:1
 * bar in both themes.
 */

:root {
  /* Division brand ramp, seeded from the product's cyan and deepened
     toward the HCS navy so the two sites are visibly related. */
  --brand-50: #ecfdff;
  --brand-100: #cff8fe;
  --brand-200: #a5f0fc;
  --brand-300: #67e2f9;
  --brand-400: #22cdee;
  --brand-500: #06b0d4;
  --brand-600: #088cab;
  --brand-700: #0e708b;
  --brand-800: #155b71;
  --brand-900: #164c60;
  --brand-950: #083344;

  /* The filled-control accent. Always paired with --on-brand text. */
  --brand-accent: #22cdee;
  --brand-accent-hover: #67e2f9;
  --on-brand: #04121a;

  /* Hairline grammar for the SVG art. Four values, so re-toning every
     diagram on the site is a four-line edit rather than a hunt.
     These are heavier than the parent site's equivalents on purpose: the
     same weights over this darker surface rendered as a faint wisp. */
  --art-line: rgba(158, 190, 255, 0.38);
  --art-trace: #5b7cf0;
  --art-node: var(--brand-accent);
  --art-plate: rgba(158, 190, 255, 0.055);

  /* Fluid display scale. Marketing headings need a much wider range than
     the product's --text-* steps, which are tuned for dense dashboards. */
  --display-xl: clamp(2.5rem, 1.1rem + 5vw, 5rem);
  --display-lg: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
  --display-md: clamp(1.6rem, 1.05rem + 1.8vw, 2.5rem);
  --display-sm: clamp(1.25rem, 1rem + 0.85vw, 1.6rem);

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Mesh pools - deep blues only. A bright bloom here is the single
     fastest way to make darkest-blue glass read as a backlit gradient. */
  --mesh-a: rgba(20, 42, 138, 0.3);
  --mesh-b: rgba(10, 24, 92, 0.22);
  --mesh-c: rgba(4, 16, 62, 0.32);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --art-line: rgba(15, 23, 42, 0.26);
    --art-trace: #2845bd;
    --art-plate: rgba(15, 23, 42, 0.045);
    /* Deepened from #0891b2: white on that measures 3.70:1, under the
       4.5:1 bar for the 12.5px labels these fills carry. */
    --brand-accent: #0e7490;
    --brand-accent-hover: #0891b2;
    --on-brand: #ffffff;
    --shadow-soft: 0 8px 32px rgba(6, 30, 115, 0.1);
    --mesh-a: rgba(40, 69, 189, 0.12);
    --mesh-b: rgba(76, 29, 149, 0.06);
    --mesh-c: rgba(34, 205, 238, 0.08);
  }
}

:root[data-theme="light"] {
  --art-line: rgba(15, 23, 42, 0.26);
  --art-trace: #2845bd;
  --art-plate: rgba(15, 23, 42, 0.045);
  /* Deepened from #0891b2: white on that measures 3.70:1, under the
     4.5:1 bar for the 12.5px labels these fills carry. */
  --brand-accent: #0e7490;
  --brand-accent-hover: #0891b2;
  --on-brand: #ffffff;
  --shadow-soft: 0 8px 32px rgba(6, 30, 115, 0.1);
  --mesh-a: rgba(40, 69, 189, 0.12);
  --mesh-b: rgba(76, 29, 149, 0.06);
  --mesh-c: rgba(34, 205, 238, 0.08);
}

/* ------------------------------------------------------------- surfaces */

/* The glass aura: deep translucent blue pools plus a soft diagonal sheen.
   This is what makes a flat navy page read as glass with depth behind it,
   and it is the single most characteristic surface on the family of
   sites. Applied to heroes and to the section bands that need weight. */
.aura {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(58% 72% at 82% 8%, var(--mesh-a), transparent 66%),
    radial-gradient(46% 64% at 8% 92%, var(--mesh-b), transparent 62%),
    radial-gradient(70% 90% at 50% 120%, var(--mesh-c), transparent 78%),
    linear-gradient(
      115deg,
      transparent 34%,
      rgba(255, 255, 255, 0.012) 46%,
      rgba(255, 255, 255, 0.005) 54%,
      transparent 66%
    );
}

/* Film grain. Imperceptible on its own; it exists because large areas of
   near-black blue band badly on 8-bit panels and the noise breaks it up. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Keeps hero copy above the aura and the grain. */
.aura > * {
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------- typography */

.display-xl {
  font-size: var(--display-xl);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.display-lg {
  font-size: var(--display-lg);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.display-md {
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 680;
  text-wrap: balance;
}

/* --------------------------------------------------------- filled brand */

/* The one place --brand-accent is allowed to carry text, and only because
   --on-brand is chosen against it: dark ink on aqua in the dark theme,
   white on deep cyan in light. Measured, not assumed. */
.btn-brand {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--on-brand);
  font-weight: 700;
}

.btn-brand:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: var(--on-brand);
}

.badge-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--on-brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- the art */

/* Every diagram on the site is one grammar: thin hairline structure, a
   deep-blue trace carrying the "signal", and small aqua nodes that pulse.
   Decorative and aria-hidden throughout - the art never carries meaning
   that is not also in the text beside it, which is the only way a
   decorative SVG is honest on a page that promises evidence. */
.art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.art-line {
  stroke: var(--art-line);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-trace {
  stroke: var(--art-trace);
  stroke-width: 2;
  fill: none;
  opacity: 0.9;
  stroke-linecap: round;
}

.art-plate {
  fill: var(--art-plate);
  stroke: var(--art-line);
  stroke-width: 1;
}

.art-node {
  fill: var(--art-node);
}

.art-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* The pulse is the only animation on the site. It is slow, it is small,
   and prefers-reduced-motion removes it entirely rather than shortening
   it - a 0ms pulse would still be a repaint every 2.6 seconds. */
@keyframes art-pulse {
  0%,
  100% {
    opacity: 0.45;
    r: 3;
  }
  50% {
    opacity: 1;
    r: 4.5;
  }
}

.art-pulse {
  animation: art-pulse 2.6s var(--ease-expo) infinite;
}

.art-pulse-late {
  animation-delay: 1.3s;
}

@media (prefers-reduced-motion: reduce) {
  .art-pulse,
  .art-pulse-late {
    animation: none;
    opacity: 0.9;
  }
}

/* Hero art sits behind the copy on wide screens and is dropped entirely on
   narrow ones - a decorative diagram is not worth 40 KB of layout on a
   phone, and it has nothing to say that the text does not. */
.hero-art {
  pointer-events: none;
}

@media (max-width: 999px) {
  .hero-art {
    display: none;
  }
}

/* ------------------------------------------------------- platform cards */

.platform-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

.platform-card .art {
  max-height: 200px;
}

.platform-card h3 {
  font-size: var(--display-sm);
  letter-spacing: -0.01em;
}

.platform-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* --------------------------------------------------------- logo lockups */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.brand-lockup:hover {
  text-decoration: none;
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.brand-division {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ------------------------------------------------------- product subnav */

/* The second-level bar on the Internet Monitor pages. It exists because
   the corporate nav must stay short - a division site whose top nav lists
   every page of every platform is a sitemap, not a navigation. */
.subnav {
  border-bottom: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--bg-soft) 60%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  position: sticky;
  top: 57px;
  z-index: 30;
}

.subnav-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-height: 46px;
}

@media (max-width: 480px) {
  .subnav-inner {
    padding: var(--space-2) var(--space-4);
  }
}

.subnav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.subnav nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.subnav nav a {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.subnav nav a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  text-decoration: none;
}

body[data-page="monitor"] .subnav a[data-sub="monitor"],
body[data-page="monitor-features"] .subnav a[data-sub="monitor-features"],
body[data-page="monitor-isps"] .subnav a[data-sub="monitor-isps"],
body[data-page="monitor-pricing"] .subnav a[data-sub="monitor-pricing"],
body[data-page="monitor-docs"] .subnav a[data-sub="monitor-docs"],
body[data-page="download"] .subnav a[data-sub="download"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand-accent);
}

/* ------------------------------------------------------------- sundries */

.split {
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split-art-first > :first-child {
    order: 2;
  }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}