/* ==========================================================================
   Aurora: dark, technical, operational
   --------------------------------------------------------------------------
   A dark canvas throughout, with light surfaces used as instruments rather
   than as pages. It looks like the room the service is actually run from,
   which is a real argument for a technical buyer.

   It is also the riskiest of the directions. Dark interfaces fail in two ways,
   text that is too dim and accents that vibrate on a dark ground, so the body
   text here clears 12:1 against the canvas and the accent is the brand's own
   bright teal, which is already tuned for dark panels in the base design.

   This is the huisstijl at night, not a second palette: the canvas is the
   brand navy taken down to near-black, and the accent is --teal-bright, the
   same value the base stylesheet uses on its navy panels. Typefaces are
   unchanged.

   The moves that make it Aurora:

     * A near-black navy canvas, so it reads as night rather than as switched
       off.
     * Panels are lifted with a hairline and a faint inner glow, the way a
       console separates instruments.
     * The accent only ever appears at small sizes.
     * Numbers and figures glow slightly; nothing else does.
   ========================================================================== */

:root {
  /* The brand navy, darkened for use as a canvas rather than as a panel. */
  --navy: #0c0c40;
  --navy-mid: #1a1a5e;
  --navy-deep: #06062a;
  /* --teal-bright is the base design's own on-navy accent; promoting it to
     the working teal is what keeps this on brand instead of merely dark. */
  --teal: #45d7c8;
  --teal-deep: #86e7de;
  --teal-bright: #9df0f0;
  --teal-tint: #123a44;

  --ink: #f2f4ff;
  --body: #bcc2e0;
  --muted: #9098bd;
  --bg: #06062a;
  --surface: #0a0a38;
  --surface-2: #12124d;
  --line: #23235e;
  --line-2: #2f2f72;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.6);

  --grad: linear-gradient(100deg, #1aa3a3 0%, #2f2f8f 100%);
  --surface-grad: linear-gradient(160deg, #0a0a38 0%, #06062a 100%);
}

body {
  background: var(--bg);
  color: var(--body);
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Every white surface in the base design becomes a console panel. */
.card,
.tier,
.measure,
.step,
.deadline,
.cert,
.value,
.loc,
.post,
.mcard,
.form-card,
.table-scroll,
.faq details,
.trust-strip,
.compare__card,
.next-step,
.ck-opt,
.entity-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border-color: var(--line);
  color: var(--body);
}

.card h3,
.tier h3,
.measure h3,
.step h3,
.cert h3,
.post h3,
.mcard__body h3,
.form-card h2,
.form-card h3,
.loc h3,
.deadline b,
.value b,
.ck-opt {
  color: var(--ink);
}

.card--lift:hover,
.tier:hover,
.measure:hover,
.cert:hover,
.value:hover,
.post:hover,
.mcard:hover {
  border-color: rgba(69, 215, 200, 0.45);
  box-shadow: 0 0 0 1px rgba(69, 215, 200, 0.12), var(--shadow);
}

/* The navy panels have to separate from a navy page, so they go lighter
   rather than darker, the inverse of the base design. */
.navy-panel,
.compare__card--dark,
.figure-card,
.person,
.wizard__aside,
.step--last,
.card--navy {
  background: linear-gradient(160deg, #1a1a5e 0%, #0e0e42 100%);
  border: 1px solid var(--line);
}

.site-header {
  background: rgba(6, 6, 42, 0.86);
  border-bottom-color: var(--line);
}

.site-header.is-scrolled {
  border-bottom-color: rgba(69, 215, 200, 0.28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.nav__link {
  color: var(--ink);
}

.nav__link:hover {
  background: rgba(69, 215, 200, 0.1);
  color: var(--teal);
}

.nav__logo img,
.mnav__head img {
  filter: brightness(0) invert(1);
}

.lang__btn {
  color: var(--ink);
  border-color: var(--line-2);
}

.lang__menu,
.mega__inner,
.mobile-nav {
  background: #0a0a38;
  border-color: var(--line);
}

.mega__feature {
  background: rgba(255, 255, 255, 0.03);
}

.mega__item:hover,
.lang__menu a:hover {
  background: rgba(69, 215, 200, 0.08);
}

.section--soft {
  background: var(--surface);
}

/* Figures are the one thing allowed to glow.
 *
 * The `.on-navy` selectors have to be matched, not merely restated: in the
 * base design a clock card is white inside a navy band, so `.on-navy .deadline b`
 * sets navy text on it. Here that card is a dark translucent panel, and navy
 * on near-black measured 1.07:1, which is invisible. axe does not catch it
 * because the panel's background is a gradient over a transparent surface. */
.figure-card b,
.deadline b,
.stat-float b,
.trust b,
.on-navy .deadline b,
.on-navy .stat-float b {
  color: var(--teal);
  text-shadow: 0 0 26px rgba(69, 215, 200, 0.35);
}

/* Same cause: the deadline label and the card's body text. */
.on-navy .deadline,
.on-navy .deadline p {
  color: var(--body);
}

.on-navy .deadline__when {
  color: var(--teal-deep);
}

.hero__card {
  background: var(--navy-deep);
}

.hero__bg img {
  opacity: 0.55;
}

.hero__bg::after {
  background: linear-gradient(
    100deg,
    rgba(6, 6, 42, 0.96) 0%,
    rgba(6, 6, 42, 0.8) 44%,
    rgba(6, 6, 42, 0.4) 74%,
    rgba(14, 14, 66, 0.2) 100%
  );
}

.hero__rings {
  border-color: rgba(69, 215, 200, 0.22);
  background: radial-gradient(circle, rgba(69, 215, 200, 0.09), transparent 58%);
}

.pagehero {
  background: var(--surface-grad);
  border-bottom-color: var(--line);
}

.pagehero h1 {
  color: var(--ink);
}

.btn--primary {
  color: #04231f;
  box-shadow: 0 8px 30px rgba(69, 215, 200, 0.25);
}

.btn--solid {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--solid:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn--ghost {
  color: var(--ink);
  border-color: var(--line-2);
}

.btn--white {
  background: var(--ink);
  color: var(--bg);
}

/* The incident colour is the brand's own deepened orange, which is tuned to
   carry white text at 5.01:1. This theme used to lighten it and flip the text
   dark; on the brand value that inverted pair fails, so the button keeps the
   base design's white text and simply sits on the dark canvas. */
.btn--alert,
.sos-float {
  color: #fff;
}

.btn--alert svg,
.sos-float svg {
  color: #fff;
}

.sos-float .dot {
  background: #fff;
}

.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-2);
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: rgba(255, 255, 255, 0.07);
}

table.data thead th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

table.data tbody tr:hover {
  background: rgba(69, 215, 200, 0.05);
}

table.data th[scope="row"] {
  color: var(--ink);
}

.logo-grid img {
  filter: grayscale(1) brightness(2.4);
  opacity: 0.4;
}

.logo-grid img:hover {
  filter: grayscale(0) brightness(1.6);
}

.card__ico,
.trust__ico,
.value__ico,
.mega__ico,
.loc__pin {
  background: rgba(69, 215, 200, 0.12);
  color: var(--teal);
}

.mcard__ico,
.ck-result__ico {
  background: #12124d;
  color: var(--teal);
}

/* The floating figure card is white in the base design. On a dark canvas it
   has to become a panel like everything else, or it is light text on white. */
.stat-float {
  background: #12124d;
  border-color: var(--line);
}

.stat-float b {
  color: var(--ink);
  text-shadow: none;
}

.stat-float span {
  color: var(--muted);
}

.card__tag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--body);
}

.card__tag--teal,
.tier__flag,
.badge {
  background: rgba(69, 215, 200, 0.14);
  color: var(--teal);
}

.site-footer {
  background: #050810;
  border-top: 1px solid var(--line);
}

.consent {
  background: #0a0a38;
  border-color: var(--line-2);
}

.prose code {
  background: rgba(255, 255, 255, 0.07);
}