/* ============================================================
   NOVIQORE Technologies — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file a list of @imports — no rules inline.
   ============================================================ */
/* ============================================================
   NOVIQORE Technologies — Webfonts
   Sora        — display + UI + body (variable, weights 400–800)
   Space Mono  — eyebrows, labels, code, technical captions
   Extracted from the brand master; subset to latin + latin-ext.
   ============================================================ */

/* ---- Sora (variable) ---- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/public/assets/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/public/assets/fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Space Mono ---- */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/assets/fonts/spacemono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/assets/fonts/spacemono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public/assets/fonts/spacemono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public/assets/fonts/spacemono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   NOVIQORE Technologies — Color tokens
   A calm, paper-and-blueprint green system. One brand green does
   the heavy lifting; a single bright "Digital" lime is the only
   accent and appears sparingly (the lit wing-fold of the dove).
   Authored in oklch so tints stay perceptually even.
   ============================================================ */
:root {
  /* ---- Base greens ---------------------------------------- */
  --green:        oklch(0.52 0.105 152);   /* NOVIQORE Green — primary brand */
  --green-deep:   oklch(0.34 0.07  153);   /* Structure — deep field / dark surfaces */
  --green-soft:   oklch(0.86 0.045 148);   /* tint — quiet fills, chips */
  --green-tint:   oklch(0.93 0.025 148);   /* faint tint — hover wash, zebra */
  --lime:         oklch(0.82 0.155 138);   /* Digital — the one bright accent */
  --lime-deep:    oklch(0.70 0.155 140);   /* Digital pressed / on light */

  /* ---- Ink & neutrals (warm green-grey) ------------------- */
  --ink:          oklch(0.26 0.022 152);   /* primary text */
  --muted:        oklch(0.56 0.018 152);   /* secondary text */
  --faint:        oklch(0.72 0.012 150);   /* tertiary / captions */
  --line:         oklch(0.90 0.006 145);   /* hairline borders */
  --line-strong:  oklch(0.84 0.008 148);   /* stronger dividers */

  /* ---- Surfaces ------------------------------------------- */
  --canvas:       oklch(0.95 0.006 145);   /* page background (paper) */
  --paper:        oklch(0.995 0.002 145);  /* cards / raised surfaces */
  --grid-line:    oklch(0.90 0.006 145);   /* blueprint grid stroke */

  /* ---- Status -------------------------------------------- */
  --ok:           oklch(0.62 0.13 150);    /* pass / success (reuses green family) */
  --warn:         oklch(0.78 0.14 80);     /* warning — amber */
  --danger:       oklch(0.58 0.17 27);     /* fail / destructive — clay red */
  --info:         oklch(0.60 0.09 230);    /* info — slate blue (rare) */

  /* ---- Semantic aliases ----------------------------------- */
  --bg:               var(--canvas);
  --surface:          var(--paper);
  --surface-sunken:   var(--green-tint);
  --surface-inverse:  var(--green-deep);

  --text-strong:      var(--ink);
  --text-body:        var(--ink);
  --text-secondary:   var(--muted);
  --text-tertiary:    var(--faint);
  --text-brand:       var(--green);
  --text-on-brand:    #ffffff;

  --border:           var(--line);
  --border-strong:    var(--line-strong);
  --border-brand:     var(--green);

  --accent:           var(--green);
  --accent-hover:     oklch(0.47 0.105 152);
  --accent-press:     oklch(0.42 0.10  152);
  --accent-contrast:  #ffffff;
  --signal:           var(--lime);        /* the bright "live / digital twin" signal */

  --focus-ring:       oklch(0.52 0.105 152 / 0.45);
}

/* ============================================================
   NOVIQORE Technologies — Typography tokens
   Two families only:
     Sora        display + UI + body (geometric, calm, modern)
     Space Mono  eyebrows, labels, technical captions, code
   Eyebrows/labels are ALWAYS Space Mono, uppercase, wide-tracked.
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------- */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-sans);
  --font-display: var(--font-sans);

  /* ---- Weights -------------------------------------------- */
  --fw-regular: 400;       /* @kind font */
  --fw-medium:  500;       /* @kind font */
  --fw-semibold: 600;      /* @kind font */
  --fw-bold:    700;       /* @kind font */
  --fw-extrabold: 800;     /* @kind font */

  /* ---- Type scale (px) ------------------------------------ */
  --fs-display:  64px;   /* hero headline */
  --fs-h1:       44px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-title:    17px;   /* card titles */
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-eyebrow:  11px;   /* Space Mono uppercase */
  --fs-micro:    10px;

  /* ---- Line heights --------------------------------------- */
  --lh-tight:   1.05;      /* @kind font */
  --lh-snug:    1.2;       /* @kind font */
  --lh-normal:  1.5;       /* @kind font */
  --lh-relaxed: 1.65;      /* @kind font */

  /* ---- Letter spacing ------------------------------------- */
  --ls-display: -0.02em;   /* @kind font */
  --ls-tight:   -0.01em;   /* @kind font */
  --ls-normal:  0;         /* @kind font */
  --ls-eyebrow: 0.32em;    /* @kind font */
  --ls-label:   0.14em;    /* @kind font */
  --ls-wide:    0.04em;    /* @kind font */
}

/* ============================================================
   NOVIQORE Technologies — Spacing, radius, shadow, motion
   The system is built on a calm unit grid (the same grid the
   dove is folded on). Spacing follows a 4px base. Corners are
   generously rounded (cards 18px). Shadows are soft, low, green-
   tinted — never harsh black.
   ============================================================ */
:root {
  /* ---- Spacing (4px base) --------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout --------------------------------------------- */
  --container:      1180px;
  --container-wide: 1320px;
  --gutter:         40px;
  --grid-unit:      30px;   /* blueprint grid cell */

  /* ---- Radius --------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;   /* default card radius */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders -------------------------------------------- */
  --border-w:    1px;
  --border-w-2:  1.5px;

  /* ---- Shadows (soft, low, green-tinted) ------------------ */
  --shadow-xs:  0 1px 2px oklch(0.34 0.07 153 / 0.06);
  --shadow-sm:  0 2px 6px oklch(0.34 0.07 153 / 0.07);
  --shadow-md:  0 6px 18px -10px oklch(0.34 0.07 153 / 0.28);
  --shadow-lg:  0 18px 40px -18px oklch(0.34 0.07 153 / 0.30);
  --shadow-icon: 0 6px 18px -10px oklch(0.20 0.04 153 / 0.45);

  /* ---- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */
}

/* ============================================================
   NOVIQORE Technologies — Base elements & brand utilities
   Sensible defaults so consuming pages inherit the brand without
   wiring every property by hand. Utilities cover the recurring
   motifs: mono eyebrow, blueprint grid, section heads.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0; }
a  { color: var(--text-brand); text-decoration: none; }
::selection { background: var(--green-soft); color: var(--green-deep); }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ---- Brand utilities ------------------------------------- */
.nq-mono { font-family: var(--font-mono); }

.nq-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}

.nq-container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* blueprint grid — the recurring "modeled on a grid" texture */
.nq-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}

.nq-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
}

/* section head: 01 — Title ............... meta */
.nq-sec-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.nq-sec-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--text-brand); }
.nq-sec-head h2 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.nq-sec-head .meta { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); }




  html, body { margin: 0; background: var(--canvas); }
  #app { min-height: 100vh; display: flex; flex-direction: column; }
  #app > main { flex: 1; }
  @keyframes nqDrawer { from { transform: translateX(36px); } to { transform: translateX(0); } }
  [data-lucide] { display: block; }

@media (max-width: 900px){header nav{display:none!important}header>div{gap:16px!important}header img{width:160px!important}}
@media (max-width: 720px){:root{--gutter:20px;--fs-display:44px;--fs-h1:34px;--fs-h2:26px}header>div{height:64px!important}header button span[style*="max-width: 130px"]{display:none!important}.nq-view div[style*="repeat(3"],.nq-view div[style*="repeat(4"],.nq-view div[style*="repeat(5"],form div[style*="1fr 1fr"]{grid-template-columns:1fr!important}}
@media (max-width: 720px){
  footer > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 430px){
  header > div { gap: 10px !important; }
  header img { width: 132px !important; }
  header > div > div:last-child { gap: 6px !important; }
  header > div > div:last-child button { padding: 7px 9px !important; }
}

/* ============================================================
   NOVIQORE Technologies — About view layouts
   ============================================================ */
.nq-ab-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
/* align-items: start — cards must size to their own content. Stretched (definite)
   heights clip card text when the row was measured before the webfont swapped in. */
.nq-ab-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.nq-ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.nq-ab-founder { display: grid; grid-template-columns: 360px 1fr; gap: 52px; align-items: stretch; }
.nq-ab-founder-photo {
  min-height: 100%;
}
.nq-ab-flagship { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.nq-ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nq-ab-equal-panels {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.nq-ab-equal-panels > * {
  height: 100%;
}
.nq-ab-mission-copy {
  display: flex;
  align-items: center;
  padding: var(--space-6);
}
.nq-ab-mission-panels > * {
  min-height: 184px;
}
.nq-ab-principle-panels > * {
  min-height: 272px;
}
.nq-ab-story-panels > * {
  min-height: 204px;
}
.nq-ab-app-panels > *,
.nq-ab-service-panels > * {
  min-height: 224px;
}
.nq-ab-today-panels > * {
  min-height: 304px;
}
.nq-ab-grid2 > *,
.nq-ab-stats > *,
.nq-ab-founder > *,
.nq-ab-flagship > * {
  min-width: 0;
}
.nq-ab-grid2 p,
.nq-ab-stats p,
.nq-ab-flagship p {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .nq-ab-hero, .nq-ab-founder { grid-template-columns: 1fr; gap: 36px; }
  .nq-ab-stats { grid-template-columns: repeat(2, 1fr); }
  .nq-ab-flagship, .nq-ab-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .nq-ab-grid2, .nq-ab-stats { grid-template-columns: 1fr; }
  .nq-ab-cta { padding: 36px 28px !important; }
}