/* ==========================================================================
   OPMAN — Operative Manager
   Hand-written stylesheet (vanilla CSS, no framework).
   Values mirror the original design system 1:1.
   Breakpoints: sm 40rem · md 48rem · lg 64rem · xl 80rem
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---------- 1. Design tokens ---------- */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Space Grotesk", sans-serif;

  /* Brand "blue" is a custom navy scale */
  --blue-50: #f0f4f9;
  --blue-100: #dbe4f1;
  --blue-400: #475569;
  --blue-500: #2c4f82;
  --blue-600: #122746;
  --blue-700: #0f1c30;

  --slate-50: oklch(98.4% .003 247.858);
  --slate-100: oklch(96.8% .007 247.896);
  --slate-200: oklch(92.9% .013 255.508);
  --slate-300: oklch(86.9% .022 252.894);
  --slate-400: oklch(70.4% .04 256.788);
  --slate-500: oklch(55.4% .046 257.417);
  --slate-600: oklch(44.6% .043 257.281);
  --slate-700: oklch(37.2% .044 257.287);
  --slate-800: oklch(27.9% .041 260.031);
  --slate-900: oklch(20.8% .042 265.755);
  --slate-950: oklch(12.9% .042 264.695);

  --red-400: oklch(70.4% .191 22.216);
  --red-500: oklch(63.7% .237 25.331);
  --amber-50: oklch(98.7% .022 95.277);
  --amber-100: oklch(96.2% .059 95.617);
  --amber-200: oklch(92.4% .12 95.746);
  --amber-400: oklch(82.8% .189 84.429);
  --amber-500: oklch(76.9% .188 70.08);
  --amber-600: oklch(66.6% .179 58.318);
  --amber-700: oklch(55.5% .163 48.998);
  --emerald-50: oklch(97.9% .021 166.113);
  --emerald-400: oklch(76.5% .177 163.223);
  --emerald-500: oklch(69.6% .17 162.48);
  --emerald-600: oklch(59.6% .145 163.225);
  --cyan-50: oklch(98.4% .019 200.873);
  --cyan-100: oklch(95.6% .045 203.388);
  --cyan-200: oklch(91.7% .08 205.041);
  --cyan-400: oklch(78.9% .154 211.53);
  --cyan-600: oklch(60.9% .126 221.723);
  --sky-400: oklch(74.6% .16 232.661);
  --sky-500: oklch(68.5% .169 237.323);
  --indigo-600: oklch(51.1% .262 276.966);
  --violet-400: oklch(70.2% .183 293.541);
  --violet-500: oklch(60.6% .25 292.717);
  --violet-600: oklch(54.1% .281 293.009);

  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --shadow-2xl: 0 25px 50px -12px #00000040;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .15s var(--ease);

  --grid-pattern: linear-gradient(90deg, #0000000a 1px, #0000 1px), linear-gradient(#0000000a 1px, #0000 1px);
}

/* ---------- 2. Reset ---------- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--slate-50);
  color: var(--slate-800);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; cursor: pointer; }
button:focus { outline: none; }
[hidden] { display: none !important; }

/* ---------- 3. Layout helpers ---------- */
.container { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.container--narrow { max-width: 56rem; }
@media (min-width: 40rem) { .container { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .container { padding-inline: 2rem; } }

.grid-bg { background-image: var(--grid-pattern); background-size: 40px 40px; background-repeat: repeat; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

.glow { position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none; }

/* Pulsing status dot */
@keyframes pulse { 50% { opacity: .5; } }
.pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

.dot { flex-shrink: 0; border-radius: 9999px; }
.dot--red { background: var(--red-500); }
.dot--amber { background: var(--amber-500); }

/* Section header pill */
.pill {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: .75rem; line-height: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-600);
  background: var(--blue-50);
}
.pill--emerald { color: var(--emerald-600); background: var(--emerald-50); }
.pill--slate { color: var(--slate-500); background: var(--slate-100); }

.section { padding-block: 6rem; border-bottom: 1px solid var(--slate-200); }
.section--white { background: #fff; }
.section--muted { background: var(--slate-50); }

.section-head { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.section-title {
  font-family: var(--font-display);
  font-size: 1.875rem; line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--slate-900);
}
@media (min-width: 40rem) { .section-title--lg { font-size: 2.25rem; line-height: calc(2.5 / 2.25); } }
.section-sub { font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: var(--slate-600); max-width: 56rem; }
.section-sub--sm { max-width: 42rem; }

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffe6;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-200);
}
.site-header__inner { height: 5rem; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: .75rem; }
.brand:focus { outline: none; }
.brand__logo { height: 3.75rem; width: auto; transition: opacity var(--t); }
.brand:hover .brand__logo { opacity: .9; }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
  font-weight: 700; letter-spacing: -.025em; color: var(--slate-900);
}
.brand__tag {
  margin-top: .25rem; font-family: var(--font-mono); font-size: 9px; line-height: 1;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600);
}

.main-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 48rem) { .main-nav { display: flex; } }
.main-nav a {
  font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--slate-600); transition: color var(--t);
}
.main-nav a:hover { color: var(--blue-600); }
.main-nav a.main-nav__plain:hover { color: var(--slate-900); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

/* Language selector */
.lang { position: relative; display: inline-block; text-align: left; }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .375rem .75rem; border-radius: .5rem;
  background: var(--slate-100); border: 1px solid var(--slate-200);
  font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--slate-700);
  user-select: none; transition: all var(--t);
}
.lang__btn:hover { background: var(--slate-200); }
.lang__btn svg { width: 1rem; height: 1rem; color: var(--slate-400); }
.lang__label { display: none; }
@media (min-width: 40rem) {
  .lang__btn { font-size: .875rem; line-height: 1.25rem; }
  .lang__label { display: inline; }
}
.lang__menu {
  position: absolute; right: 0; z-index: 50; margin-top: .5rem; width: 10rem;
  padding: .375rem; border-radius: .75rem; background: #fff;
  border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
  box-shadow: var(--shadow-lg);
}
.lang__option {
  display: flex; width: 100%; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: .5rem;
  font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--slate-700);
  transition: background-color var(--t);
}
.lang__option:hover { background: var(--slate-50); }
@media (min-width: 40rem) { .lang__option { font-size: .875rem; line-height: 1.25rem; } }

.menu-toggle { padding: .5rem; border-radius: .5rem; color: var(--slate-600); transition: color var(--t); }
.menu-toggle:hover { color: var(--slate-900); }
.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 48rem) { .menu-toggle { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in oklab, var(--slate-900) 40%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.drawer__panel {
  position: fixed; top: 0; bottom: 0; right: 0; width: 100%; max-width: 20rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.5rem; background: #fff; box-shadow: var(--shadow-xl);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--slate-100); }
.drawer__title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--slate-900); }
.drawer__close { padding: .25rem; border-radius: .5rem; color: var(--slate-500); }
.drawer__close:hover { background: var(--slate-100); }
.drawer__close svg { width: 1.25rem; height: 1.25rem; }
.drawer__nav { display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--slate-800); }
.drawer__nav a { padding-block: .25rem; transition: color var(--t); }
.drawer__nav a:hover { color: var(--blue-600); }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: #fff; padding-block: 5rem; border-bottom: 1px solid var(--slate-100); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 75% 95%, #12274633, #12274600 50%),
    radial-gradient(circle at 95% 75%, #ef444433, #ef444400 40%),
    radial-gradient(circle at 90% 40%, #fb923c3d, #fb923c00 45%),
    radial-gradient(circle at 85% 15%, #fed7aa26, #fed7aa00 35%),
    #fff;
}
.hero__grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 42rem; text-align: left; }
@media (min-width: 64rem) { .hero__copy { grid-column: span 7 / span 7; } }

.hero__badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .75rem; border-radius: 9999px; background: var(--blue-50);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1rem;
  font-weight: 600; letter-spacing: -.025em; color: var(--blue-700);
}
.hero__title {
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1.1;
  font-weight: 700; letter-spacing: -.025em; color: var(--slate-900);
}
@media (min-width: 40rem) { .hero__title { font-size: 3rem; } }
.hero__lead { font-size: 1.125rem; line-height: 1.625; color: var(--slate-600); }

.cert {
  display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 24rem;
  margin-top: .5rem; padding: 1rem; border-radius: 1rem;
  background: var(--slate-50); border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
  transition: border-color var(--t);
}
.cert:hover { border-color: var(--slate-300); }
@media (min-width: 40rem) { .cert { width: auto; } }
.cert svg { height: 3.5rem; width: auto; flex-shrink: 0; }
.cert__text { display: flex; flex-direction: column; }
.cert__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--emerald-600); }
.cert__title { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--slate-800); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; width: 100%; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--slate-200); }
.stat { display: flex; flex-direction: column; }
.stat__value { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
.stat__value--blue { color: var(--blue-600); }
.stat__value--green { color: var(--emerald-600); }
.stat__label { margin-top: .25rem; font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); }

/* Hero dashboard card */
.hero__visual { position: relative; }
@media (min-width: 64rem) { .hero__visual { grid-column: span 5 / span 5; } }
.hero__halo {
  position: absolute; inset: -.25rem; border-radius: 1rem; opacity: .15; filter: blur(16px);
  background: linear-gradient(to top right, var(--blue-600), var(--indigo-600));
}
.dash {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; border-radius: 1rem; background: #fff;
  border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent);
  box-shadow: 0 20px 25px -5px var(--slate-200), 0 8px 10px -6px var(--slate-200);
}
.dash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid var(--slate-100); }
.dash__title { display: flex; align-items: center; gap: .5rem; }
.dash__title .dot { width: .75rem; height: .75rem; }
.dash__label { font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); }
.dash__clock {
  padding: .125rem .5rem; border-radius: .375rem; background: var(--slate-50); border: 1px solid var(--slate-200);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--slate-500);
}

.readiness { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: .75rem; background: var(--slate-50); border: 1px solid var(--slate-200); }
.ring { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { color: var(--slate-200); }
.ring__bar { color: var(--blue-600); }
.ring__value { position: absolute; font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--slate-700); }
.readiness__text { display: flex; flex-direction: column; }
.readiness__title { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--slate-900); }
.readiness__sub { font-size: 11px; color: var(--slate-500); }

.flags { display: flex; flex-direction: column; gap: .5rem; }
.flags__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500);
}
.flags__link { font-size: 11px; font-weight: 600; color: var(--blue-600); cursor: pointer; }
.flags__link:hover { text-decoration: underline; }

.expiring { overflow: hidden; border-radius: .75rem; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.expiring__head { padding: .625rem .875rem; border-bottom: 1px solid var(--slate-200); background: color-mix(in oklab, var(--slate-50) 60%, transparent); }
.expiring__head span { font-family: var(--font-display); font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--slate-800); }
.expiring__row { display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; }
.expiring__row + .expiring__row { border-top: 1px solid var(--slate-100); }
.expiring__name {
  flex-shrink: 0; font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--slate-800);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--slate-300);
}
.expiring__cert { flex: 1 1 0%; min-width: 0; font-size: 10px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.expiring__date { flex-shrink: 0; font-size: 10px; color: var(--slate-600); }
.expiring__row .dot { width: .625rem; height: .625rem; }

.dash__cta {
  display: block; width: 100%; margin-top: .25rem; padding-block: .625rem; border-radius: .75rem;
  border: 1px dashed var(--slate-300); text-align: center;
  font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--slate-600);
  transition: background-color var(--t);
}
.dash__cta:hover { background: var(--slate-50); }

/* ==========================================================================
   6. AI Extraction & Onboarding
   ========================================================================== */
.onboarding { overflow: hidden; }
.onboarding .section-head { margin-bottom: 4rem; }
.panels { display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 64rem) { .panels { gap: 6rem; } }

.panel {
  position: relative; overflow: hidden; padding: 1.5rem; border-radius: 1.5rem;
  background: linear-gradient(to bottom right, var(--slate-50), #fffffff2);
  border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
}
@media (min-width: 40rem) { .panel { padding: 2.5rem; } }
@media (min-width: 64rem) { .panel { padding: 3rem; } }
.panel > .glow { width: 450px; height: 450px; }
.panel--import { margin-top: 3rem; scroll-margin-top: 6rem; }
@media (min-width: 64rem) { .panel--import { margin-top: 4rem; } }

.glow--br { bottom: -5rem; right: -5rem; }
.glow--tl { top: -5rem; left: -5rem; }
.glow--bl { bottom: -5rem; left: -5rem; }
.glow--tr { top: -5rem; right: -5rem; }
.glow--cyan5 { background: color-mix(in oklab, var(--cyan-400) 5%, transparent); }
.glow--blue5 { background: color-mix(in oklab, var(--blue-400) 5%, transparent); }
.glow--amber5 { background: color-mix(in oklab, var(--amber-400) 5%, transparent); }
.glow--red5 { background: color-mix(in oklab, var(--red-400) 5%, transparent); }

.panel__grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 64rem) { .panel__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; } }
@media (min-width: 80rem) { .panel__grid { gap: 4rem; } }
.panel__half { min-width: 0; }
@media (min-width: 64rem) { .panel__half { grid-column: span 6 / span 6; } }
.panel__visual { order: 9999; }
@media (min-width: 64rem) { .panel__visual { order: -9999; } }

/* Panel copy */
.panel__copy { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.tag {
  align-self: flex-start; padding: .25rem .75rem; border-radius: 9999px; box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; border: 1px solid;
}
.tag--cyan { color: var(--cyan-600); background: var(--cyan-50); border-color: var(--cyan-100); }
.tag--amber { color: var(--amber-600); background: var(--amber-50); border-color: var(--amber-100); }
.panel__title {
  font-family: var(--font-display); font-size: 1.5rem; line-height: calc(2 / 1.5);
  font-weight: 700; letter-spacing: -.025em; color: var(--slate-900);
}
@media (min-width: 40rem) { .panel__title { font-size: 1.875rem; line-height: 1.2; } }
.panel__desc { font-size: 1rem; line-height: 1.625; color: var(--slate-600); }
.checks { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; font-size: .875rem; line-height: 1.25rem; color: var(--slate-600); }
.checks li { display: flex; align-items: center; gap: .75rem; list-style: none; }
.check {
  flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; line-height: 1rem; font-weight: 700; border: 1px solid;
}
.check--cyan { background: var(--cyan-50); border-color: var(--cyan-200); color: var(--cyan-600); }
.check--amber { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-600); }

/* "Add Competency" modal mock */
.scan { position: relative; }
.scan__glow1 { bottom: -2rem; right: -2rem; width: 16rem; height: 16rem; background: color-mix(in oklab, var(--cyan-400) 10%, transparent); }
.scan__glow2 { top: -2rem; left: -2rem; width: 14rem; height: 14rem; background: color-mix(in oklab, var(--blue-400) 10%, transparent); }
.mock { position: relative; overflow: hidden; border-radius: 1rem; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-xl); }
.mock__head { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem; border-bottom: 1px solid var(--slate-100); }
.mock__title { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--slate-800); }
.mock__head svg { width: 1rem; height: 1rem; color: var(--slate-400); }
.mock__body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mock__preview { grid-column: span 3 / span 3; padding: 1rem; border-right: 1px solid var(--slate-100); }
.mock__actions { grid-column: span 2 / span 2; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; background: color-mix(in oklab, var(--slate-50) 40%, transparent); }

.idcard { padding: .75rem; border-radius: .5rem; border: 1px solid var(--slate-200); background: color-mix(in oklab, var(--slate-50) 70%, transparent); }
.idcard__meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--slate-500); }
.idcard__cols {
  margin-top: .5rem; padding-bottom: .25rem; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--slate-200); font-size: 9px; font-weight: 700; letter-spacing: .025em;
  text-transform: uppercase; color: var(--slate-400);
}
.idcard__list { margin-top: .375rem; display: flex; flex-direction: column; gap: .25rem; }
.idcard__item { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; font-size: 9px; line-height: 1.25; color: var(--slate-600); }
.idcard__item span:last-child { font-family: var(--font-mono); color: var(--slate-500); white-space: nowrap; }
.idcard__note { margin-top: .625rem; font-size: 8px; line-height: 1.375; color: var(--slate-400); }
.idcard__chips { margin-top: .5rem; display: flex; align-items: center; gap: .375rem; }
.chip-card {
  width: 2.75rem; height: 1.75rem; padding-inline: .25rem; border-radius: .25rem;
  display: flex; align-items: center; gap: .25rem;
  background: linear-gradient(to bottom right, var(--slate-800), var(--slate-600));
}
.chip-card__photo { flex-shrink: 0; width: .75rem; height: .75rem; border-radius: 9999px; background: #ffffff40; }
.chip-card__lines { flex: 1 1 0%; display: flex; flex-direction: column; gap: .125rem; }
.chip-card__lines span { display: block; height: .125rem; border-radius: .25rem; background: #ffffff4d; }
.chip-card__lines span:last-child { width: 66.666667%; background: #fff3; }
.chip-qr { width: 1.75rem; height: 1.75rem; border-radius: .25rem; background: #fff; border: 1px solid var(--slate-300); display: flex; align-items: center; justify-content: center; }
.chip-qr svg { width: 1.25rem; height: 1.25rem; }

.mock__question { margin-bottom: .625rem; font-size: 9px; line-height: 1.375; text-align: center; color: var(--slate-500); }
.mock__choices { display: flex; flex-direction: column; gap: .5rem; }
.mock-btn {
  display: flex; align-items: center; justify-content: center; gap: .375rem; padding-block: .5rem;
  border-radius: .5rem; font-size: 11px; font-weight: 700; cursor: default;
}
.mock-btn svg { width: .875rem; height: .875rem; }
.mock-btn--ai { color: #fff; background: linear-gradient(to bottom right, var(--violet-600), var(--indigo-600)); box-shadow: var(--shadow-sm); }
.mock-btn--manual { color: var(--slate-700); background: #fff; border: 1px solid var(--slate-200); }
.mock-btn--manual svg { color: var(--amber-500); }
.mock__footer { margin-top: 1rem; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.mock__cancel, .mock__save { text-align: center; }
.mock__cancel { padding-inline: .25rem; font-size: 10px; font-weight: 600; color: var(--slate-500); cursor: default; }
.mock__save { padding: .375rem .75rem; border-radius: .5rem; background: var(--blue-600); color: #fff; font-size: 10px; font-weight: 700; box-shadow: var(--shadow-sm); cursor: default; }

/* Import console mock */
.importer {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem; border-radius: 1rem; background: var(--slate-50);
  border: 1px solid color-mix(in oklab, var(--slate-200) 80%, transparent); box-shadow: var(--shadow-sm);
}
@media (min-width: 40rem) { .importer { height: 380px; } }
.importer__g1 { top: -2.5rem; right: -2.5rem; width: 12rem; height: 12rem; background: color-mix(in oklab, var(--amber-400) 10%, transparent); transition: all var(--t); }
.importer:hover .importer__g1 { background: color-mix(in oklab, var(--amber-400) 15%, transparent); }
.importer__g2 { bottom: -2.5rem; left: 5rem; width: 10rem; height: 10rem; background: color-mix(in oklab, var(--cyan-400) 5%, transparent); }
.importer__g3 { top: 5rem; left: 2.5rem; width: 8rem; height: 8rem; background: color-mix(in oklab, var(--red-400) 5%, transparent); }

/* Border colour intentionally inherits currentColor, matching the original. */
.console { position: relative; height: 100%; display: flex; flex-direction: column; padding: 1rem; border-radius: .75rem; background: #fff; border: 1px solid; box-shadow: var(--shadow-sm); }
.console__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--slate-100); }
.console__file { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.console__file svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--amber-500); }
.console__file span { font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console__type {
  flex-shrink: 0; margin-left: .5rem; padding: .125rem .5rem; border-radius: .25rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--amber-700); background: var(--amber-50); border: 1px solid var(--amber-100);
}
.console__art { height: 9rem; display: flex; align-items: center; justify-content: center; }
.console__art svg { width: 100%; height: 100%; }
@media (min-width: 40rem) { .console__art { height: auto; flex: 1 1 0%; min-height: 0; } }
.console__actions { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--slate-100); }
@media (min-width: 40rem) { .console__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.console-btn {
  display: flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem;
  border-radius: .5rem; background: var(--blue-600); color: #fff;
  font-size: 10px; font-weight: 700; box-shadow: var(--shadow-sm); cursor: default;
}
.console-btn svg { flex-shrink: 0; width: .875rem; height: .875rem; }
.console-btn--live { cursor: pointer; box-shadow: 0 1px 3px 0 #12274633, 0 1px 2px -1px #12274633; transition: background-color var(--t); }
.console-btn--live:hover { background: var(--blue-500); }

/* ==========================================================================
   7. Features
   ========================================================================== */
.features .section-head { gap: 1rem; }
.features__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; margin-top: 3rem; text-align: left; }
@media (min-width: 48rem) { .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature {
  padding: 1.5rem; border-radius: 1rem; background: #fff;
  border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); transition: all var(--t);
}
.feature:hover { box-shadow: var(--shadow-md); border-color: var(--blue-400); }
.feature__icon {
  width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-600); transition: color var(--t), background-color var(--t);
}
.feature__icon svg { width: 1.5rem; height: 1.5rem; }
.feature:hover .feature__icon { background: var(--blue-600); color: #fff; }
.feature__title { font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; color: var(--slate-900); transition: color var(--t); }
.feature:hover .feature__title { color: var(--blue-600); }
.feature__desc { margin-top: .75rem; font-size: .875rem; line-height: 1.625; color: var(--slate-600); }

/* ==========================================================================
   8. Demo
   ========================================================================== */
.demo .section-head { margin-bottom: 2.5rem; }
.demo__frame { display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem; background: var(--slate-900); border: 1px solid var(--slate-800); box-shadow: var(--shadow-2xl); }
.demo__frame img { width: 100%; height: auto; }

/* ==========================================================================
   9. Security
   ========================================================================== */
.security { position: relative; background-color: var(--slate-900); color: var(--slate-100); border-bottom-color: var(--slate-950); }
.security__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .security__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.security__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; }
.security__art { position: relative; display: flex; justify-content: center; }
@media (min-width: 64rem) { .security__copy, .security__art { grid-column: span 6 / span 6; } }
.security__art > div { width: 100%; max-width: 28rem; }
.security__art svg { width: 100%; height: auto; }
.security__badge {
  padding: .25rem .75rem; border-radius: 9999px;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-400);
  background: #2c4f821a; border: 1px solid #2c4f8233;
}
.security__title { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: #fff; }
@media (min-width: 40rem) { .security__title { font-size: 2.25rem; } }
.security__lead { font-size: 1rem; line-height: 1.625; color: var(--slate-400); }
.safeguards { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; margin-top: 1.5rem; }
.safeguard { display: flex; gap: 1rem; }
.safeguard__icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; border: 1px solid; }
.safeguard__icon svg { width: 1.25rem; height: 1.25rem; }
.safeguard__icon--blue { color: var(--blue-400); background: #2c4f821a; border-color: #2c4f8240; }
.safeguard__icon--emerald { color: var(--emerald-400); background: color-mix(in oklab, var(--emerald-500) 10%, transparent); border-color: color-mix(in oklab, var(--emerald-500) 25%, transparent); }
.safeguard__icon--sky { color: var(--sky-400); background: color-mix(in oklab, var(--sky-500) 10%, transparent); border-color: color-mix(in oklab, var(--sky-500) 25%, transparent); }
.safeguard__icon--violet { color: var(--violet-400); background: color-mix(in oklab, var(--violet-500) 10%, transparent); border-color: color-mix(in oklab, var(--violet-500) 25%, transparent); }
.safeguard__body { display: flex; flex-direction: column; }
.safeguard__title { font-family: var(--font-display); font-size: 1rem; line-height: 1.5; font-weight: 700; color: #fff; }
.safeguard__desc { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; color: var(--slate-400); }

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.faq .section-head { margin-bottom: 3rem; }
.faq__list { display: flex; flex-direction: column; gap: 1rem; }
.faq__item { overflow: hidden; border-radius: .75rem; border: 1px solid var(--slate-200); background: color-mix(in oklab, var(--slate-50) 50%, transparent); }
.faq__q {
  width: 100%; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; text-align: left;
  font-family: var(--font-display); font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--slate-900);
  transition: background-color var(--t);
}
.faq__q:hover { background: var(--slate-50); }
@media (min-width: 40rem) { .faq__q { font-size: 1.125rem; line-height: calc(1.75 / 1.125); } }
.faq__q svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--slate-400); transition: transform .2s var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(180deg); }
/* Border-top inherits currentColor, matching the original. */
.faq__a { display: none; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid; background: #fff; font-size: .875rem; line-height: 1.625; color: var(--slate-600); }
.faq__item.is-open .faq__a { display: block; }
@media (min-width: 40rem) { .faq__a { font-size: 1rem; } }

/* ==========================================================================
   11. Call to action band
   ========================================================================== */
.cta { position: relative; overflow: hidden; padding-block: 5rem; background: var(--blue-600); color: #fff; text-align: center; }
.cta__grid { position: absolute; inset: 0; opacity: .1; }
.cta__inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta__title { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
@media (min-width: 40rem) { .cta__title { font-size: 2.25rem; line-height: calc(2.5 / 2.25); } }
.cta__lead { max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: var(--blue-100); white-space: pre-line; }
.cta__actions { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: .5rem; }
@media (min-width: 40rem) { .cta__actions { flex-direction: row; width: auto; } }
.cta__btn {
  padding: .875rem 2rem; border-radius: .75rem; border: 2px solid #fff;
  background: #fff; color: var(--blue-600); font-weight: 700;
  transition: color var(--t), background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.cta__btn:hover { background: var(--slate-50); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.footer { padding-block: 4rem; background: var(--slate-900); color: var(--slate-400); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.footer__brand, .footer__links { display: flex; flex-direction: column; }
@media (min-width: 48rem) { .footer__brand, .footer__links { grid-column: span 6 / span 6; } }
.footer__brand { gap: 1rem; }
.footer__logo-row { display: flex; align-items: center; gap: .75rem; }
.footer__logo {
  width: 81px; height: 81px; padding: .5rem; border-radius: .5rem; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 6px -1px #2c4f821a, 0 2px 4px -2px #2c4f821a;
}
.footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.footer__name { font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; letter-spacing: -.025em; color: #fff; }
.footer__tagline { margin-top: .25rem; font-family: var(--font-mono); font-size: .75rem; line-height: 1.625; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); white-space: pre-line; }
.footer__links { gap: .75rem; }
@media (min-width: 48rem) { .footer__links { align-items: flex-end; text-align: right; } }
.footer__heading { font-family: var(--font-mono); font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-300); }
.footer__links a { font-size: .875rem; line-height: 1.25rem; transition: color var(--t); }
.footer__links a:hover { color: #fff; }
.footer__bottom {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--slate-800);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .75rem; line-height: 1rem; color: var(--slate-500);
}
@media (min-width: 40rem) { .footer__bottom { flex-direction: row; } }
.footer__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; }
.footer__contact span { color: var(--slate-400); }
.footer__contact a { font-family: var(--font-mono); letter-spacing: .025em; color: var(--slate-300); transition: color var(--t); }
.footer__contact a:hover { color: #fff; }

/* ==========================================================================
   13. Toasts
   ========================================================================== */
.toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; display: flex; flex-direction: column; gap: .75rem; width: 100%; max-width: 28rem; pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: .75rem; max-width: 24rem; padding: 1rem;
  border-radius: .75rem; background: var(--slate-900); color: var(--slate-100);
  border: 1px solid var(--slate-800); box-shadow: var(--shadow-2xl);
  pointer-events: auto; cursor: pointer;
}
.toast__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--emerald-400); }
.toast__body { flex-grow: 1; display: flex; flex-direction: column; }
.toast__msg { font-size: 13px; line-height: 1.5; font-weight: 600; }
.toast__meta { margin-top: .375rem; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); }
.toast__close { flex-shrink: 0; align-self: flex-start; padding: .125rem; color: var(--slate-500); transition: color var(--t); }
.toast__close:hover { color: var(--slate-300); }
.toast__close svg { width: 1rem; height: 1rem; }