/* Nittan Euro Tech — brand tokens + glass primitives
   Logo colours are fixed (taken from the artwork): navy #00468E, ink #1F1A17. */
:root {
  /* brand */
  --n-navy: #00468E;        /* logo blue, primary */
  --n-navy-600: #1B62B4;    /* hover / gradient light end */
  --n-navy-800: #062A58;    /* deep surfaces */
  --n-navy-900: #031D42;    /* darkest background */
  --n-ink: #1F1A17;         /* logo black, headings on light */
  --n-red: #E72D2E;         /* accent: one CTA per screen */
  --n-ice: #D9E6F5;         /* tinted white for text on navy */

  /* neutrals (warm, matched to the logo ink) */
  --n-white: #FFFFFF;
  --n-paper: #F5F4F2;
  --n-line: #E3E0DB;
  --n-mute: #857F79;

  /* glass */
  --glass-blur: 18px;
  --glass-dark-bg: rgba(255, 255, 255, 0.08);
  --glass-dark-border: rgba(255, 255, 255, 0.18);
  --glass-light-bg: rgba(255, 255, 255, 0.55);
  --glass-light-border: rgba(255, 255, 255, 0.75);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 20px 50px -20px rgba(3, 29, 66, 0.55);

  /* type */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 16px;
  --radius-lg: 24px;
}

/* Frosted panel on dark media (hero, header) */
.glass {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* Frosted panel on light backgrounds */
.glass--light {
  background: var(--glass-light-bg);
  border-color: var(--glass-light-border);
  box-shadow: inset 0 1px 0 #fff, 0 20px 50px -24px rgba(3, 29, 66, 0.25);
}
/* Fixed header bar — transparent at top, frosted after scroll (toggle .is-scrolled) */
.glass-header {
  height: 69px;
  border-radius: 0;
  border-width: 0 0 1px 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: background .3s, border-color .3s;
}
.glass-header.is-scrolled {
  background: rgba(3, 29, 66, 0.55);
  border-color: var(--glass-dark-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
/* Pill buttons */
.btn-glass,
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 14px/1 var(--font-sans); letter-spacing: .02em;
  text-decoration: none; cursor: pointer; transition: transform .15s, background .2s;
}
.btn-glass {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.2); }
.btn-primary {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(180deg, var(--n-navy-600), var(--n-navy));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -10px rgba(0,70,142,.7);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary--red {
  background: linear-gradient(180deg, #F04446, var(--n-red));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -10px rgba(231,45,46,.7);
}
/* Fallback when backdrop-filter is unsupported */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(3, 29, 66, 0.82); }
  .glass--light { background: rgba(255, 255, 255, 0.92); }
  .glass-header.is-scrolled { background: rgba(3, 29, 66, 0.92); }
}