/* AssessQu - "Quantum Instrument". Deep-tech, scientific, security-grade.
   Cool light canvas, massive graphite grotesk, ONE electric PQC-blue used like a scalpel.
   The hero object is a 3D isometric voxel lattice (2D canvas, renders everywhere). */

@import url('/vendor/fonts.css');

:root {
  --canvas: #EAEBEF;        /* cool light grey, a breath of blue, never pure white */
  --canvas-2: #E1E3E9;
  --paper: #F3F4F8;
  --ink: #14161F;           /* deep blue-graphite, never pure black */
  --ink-2: #4A4E5C;
  --ink-3: #646879;
  --line: #D3D5DD;
  --line-2: #BFC2CD;

  --noir: #080B14;          /* deep quantum navy-black, the instrument panels */
  --noir-2: #0E1220;
  --noir-3: #161C2E;
  --noir-ink: #E9EBF2;
  --noir-ink-2: #868BA0;
  --noir-line: #232A3E;

  --blue: #4EA1FF;          /* the one accent, light electric PQC blue */
  --blue-deep: #2F7BE0;     /* deeper, for fills and hovers */
  --blue-soft: #93C2FF;
  --blue-wash: #DCEBFF;     /* pale blue fill on light */
  --blue-ink: #08172B;      /* text on blue */
  --blue-text: #175FC2;     /* the only blue allowed on small text: 5.11:1 on --canvas */

  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1320px;
  --gut: clamp(20px, 4vw, 56px);
  --navh: 65px;              /* replaced at runtime with the header's measured height */

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 18px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* type: massive, confident, tightly tracked */
h1,h2,h3 { margin: 0; font-weight: 800; line-height: 0.96; letter-spacing: -0.03em; color: var(--ink); }
.display { font-size: clamp(3.4rem, 9vw, 8.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; }
.h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }
.h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; color: var(--ink-2); }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; color: var(--ink); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--ink-2); line-height: 1.45; max-width: 56ch; }
.underline-grow { box-shadow: inset 0 -0.09em 0 var(--blue); }

/* small labels - clean, no brackets, no rules, no dots */
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }
.tag { font-family: var(--mono); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text); font-weight: 500; }
.tag.dim { color: var(--ink-3); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(46px, 6vh, 92px) 0; }
.section.tight { padding-top: 0; }

/* Skip link. Seven header controls repeat on every page, so a keyboard or switch user had to
   tab through all of them on every navigation. Visible only when focused. */
/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; background: rgba(234,235,239,.94); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); transition: background .2s var(--e-out), box-shadow .2s var(--e-out); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height:64px; padding: 0 var(--gut); }
.nav, .nav a, .nav .logo { color: var(--ink); }
.nav.is-stuck { background: rgba(234,235,239,.985); box-shadow: 0 1px 0 var(--line-2); }
.logo { display:flex; align-items:center; min-height:32px; gap:10px; font-weight:800; letter-spacing:-0.03em; font-size:1.0625rem; }
.logo svg, .logo img { display:block; }
.nav__links { display:flex; gap:26px; align-items:center; }
.nav__links a { font-size:.9375rem; font-weight:500; color: var(--ink-2); transition: color .16s;
  display:inline-flex; align-items:center; min-height:32px; }
.nav__links a:hover { color: var(--ink); }
/* The mobile menu button is hidden by default and only ever revealed inside the
   max-width:620px block. Without this base rule it inherited the browser default and rendered
   as an empty 16x6 box in the header on every desktop page. */
.nav__menu { display:none; }

.nav__cta { display:inline-flex; align-items:center; height:38px; padding:0 18px; border:1px solid var(--ink); border-radius:100px; font-size:.9375rem; font-weight:600;
  transition: background .16s, color .16s, transform .16s var(--e-out); }
.nav__cta:active { transform: scale(.97); transition-duration: .1s; }

/* the one action on the site. Nothing else in a hero or a closing block may carry a fill,
   a border or a border-radius, so the single CTA can never be confused with a link. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:1.0625rem; letter-spacing:-0.005em; line-height:1;
  height:54px; min-width:184px; padding:0 30px; border-radius:100px; border:1px solid var(--ink);
  background: var(--ink); color:#fff; cursor:pointer;
  transition: background .18s var(--e-out), transform .18s var(--e-out); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn:focus-visible, .nav__cta:focus-visible { outline:2px solid var(--blue-text); outline-offset:3px; }
.btn .ar { transition: transform .18s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background:#0C0E16; transform: translateY(-2px); }
  .btn:hover:active { transform: translateY(-2px) scale(.97); }
  .btn:hover .ar { transform: translateX(4px); }
  .nav__cta:hover { background: var(--ink); color:#fff; }
}
.tlink { font-weight:600; color: var(--blue-text); display:inline-flex; align-items:center; gap:7px; }
.tlink .ar { transition: transform .2s var(--e-out); }
.tlink:hover .ar { transform: translateX(4px); }

/* hero: the argument on the left, the object on the right, in its own box.
   Two columns, never one layer over the other, so no hero word ever sits on a voxel. */
.hero {
  max-width: var(--maxw); margin-inline: auto;
  padding: 104px var(--gut) clamp(48px, 7vh, 96px);
  min-height: 92vh;
  display:grid; grid-template-columns: minmax(0, 10fr) minmax(0, 10fr);
  column-gap: clamp(28px, 3vw, 56px);
  align-items:center; position:relative; overflow:visible;
}
.hero__l { padding: 0; z-index:2; position:relative; }
.hero__eye { margin: 0 0 18px; }
.hero h1 { font-size: clamp(2.3rem, 4.3vw, 4.05rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 26px; }
.hero h1 .s { display:block; }
.hero h1 .s + .s { margin-top: 0.26em; }
.hero h1 .ln { display:block; overflow:hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .ln__i { display:block; }
.hero__l .lead { font-size: clamp(1.02rem, 1.28vw, 1.2rem); line-height:1.5; max-width: 46ch; margin: 0 0 40px; }
.hero__act { display:block; }
.hero__jump { display:inline-flex; align-items:center; min-height:32px; gap:7px; margin-top: 26px;
  font-size: .9375rem; font-weight:500; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color: rgba(74,78,92,.42); transition: color .2s, text-decoration-color .2s; }
.hero__jump:hover { color: var(--ink); text-decoration-color: var(--ink); }
.hero__jump .ar { transition: transform .2s var(--e-out); }
.hero__jump:hover .ar { transform: translateY(2px); }
/* the object's own box. It bleeds toward the viewport edge but stops 32px short of it. */
.hero__cube { position:relative; z-index:0; pointer-events:none;
  height: clamp(400px, 68vh, 780px);
  margin-right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2 + var(--gut) - 32px));
  opacity:0; transition: opacity 520ms var(--e-out); }
.hero__cube.is-in { opacity:1; }
.hero__cube::before { content:""; position:absolute; inset:0;
  background: radial-gradient(56% 50% at 50% 46%, rgba(78,161,255,.16), rgba(78,161,255,0) 72%); }
#cube { position:absolute; inset:0; width:100%; height:100%; }

/* the central statement */
.statement { text-align:center; max-width: 22ch; margin: 0 auto; }

/* the four-stage journey - a connected ladder, spine emphasised */
.journey { border-top:1px solid var(--line); }
.stage { display:grid; grid-template-columns: 132px 1fr 190px; gap: clamp(18px,3vw,40px); align-items:start; padding: clamp(30px,4.4vw,52px) 0; border-bottom:1px solid var(--line); position:relative; }
.stage .num { font-size: clamp(2.4rem,4vw,3.4rem); font-weight:800; letter-spacing:-0.04em; color:var(--line-2); line-height:1; }
.stage h3 { margin:0 0 12px; }
.stage .say { font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-2); max-width:52ch; margin:0 0 16px; }
.stage .gives { display:flex; flex-wrap:wrap; gap:8px; }
.stage .gives span { font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; padding:5px 11px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-2); background:var(--paper); }
.stage .status { justify-self:end; text-align:right; }
.stage .status .st { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.stage.spine { background: var(--noir); color:#fff; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); border:none; border-radius:12px; }
.stage.spine .num { color: var(--blue); }
.stage.spine h3 { color:#fff; }
.stage.spine .say { color:#c3c8da; }
.stage.spine .gives span { border-color:var(--noir-line); background:var(--noir-2); color:var(--noir-ink); }
.stage.spine .status .st { color:var(--blue); }
.stage.spine .badge { display:inline-block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-ink); background:var(--blue); padding:4px 10px; border-radius:100px; margin-bottom:14px; font-weight:600; }

/* the real product showcase */
.prodhead { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:clamp(28px,4vw,48px); }
.showcase { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; }
.frame { border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:var(--noir); box-shadow:0 30px 70px -30px rgba(8,11,20,.55); }
.frame .bar { height:auto; width:auto; display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--noir-2); border-bottom:1px solid var(--noir-line); }
.frame .bar .u { font-family:var(--mono); font-size:.72rem; color:var(--noir-ink-2); }
.frame .bar .lock { color:var(--blue); font-size:.8rem; }
.frame img { width:100%; display:block; }
.caps { display:flex; flex-direction:column; gap:2px; }
.cap { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cap:last-child { border-bottom:none; }
.cap .k { font-family:var(--mono); font-size:.74rem; color:var(--blue-deep); white-space:nowrap; }
.cap h4 { font-size:1.08rem; font-weight:700; letter-spacing:-0.015em; margin:0 0 3px; }
.cap p { font-size:.96rem; margin:0; }

.gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:clamp(28px,4vw,44px); }
.shot { margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); }
.shot img { width:100%; height:120px; object-fit:cover; object-position:top; display:block; border-bottom:1px solid var(--line); }
.shot figcaption { padding:8px 11px; font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }

.artifacts { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(28px,4vw,44px); }
.art { border:1px solid var(--line-2); border-radius:10px; padding:clamp(20px,2.4vw,28px); background:var(--paper); transition:transform .3s var(--e-out), border-color .2s; display:flex; flex-direction:column; }
.art:hover { transform:translateY(-3px); border-color:var(--blue); }
.art .big { font-size:clamp(2.4rem,4.4vw,3.4rem); font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--blue-deep); }
.art .u { font-family:var(--mono); font-size:.7rem; color:var(--ink-3); margin:6px 0 16px; }
.art h4 { font-size:1.06rem; font-weight:700; margin:auto 0 4px; }
.art p { font-size:.92rem; margin:0; }

/* the sealed-record proof strip */
.proofstrip { background:var(--noir); color:var(--noir-ink); border-radius:12px; padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
.proofstrip h3 { color:#fff; margin-bottom:14px; }
.proofstrip p { color:var(--noir-ink-2); }
.proofstrip .digest { font-family:var(--mono); font-size:.78rem; color:var(--blue); background:var(--noir-2); border:1px solid var(--noir-line); border-radius:8px; padding:16px; word-break:break-all; line-height:1.7; }
.proofstrip .verified { display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:#8fe3a4; margin-bottom:12px; }

/* customers + partners */
.segs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.seg { border:1px solid var(--line-2); border-radius:10px; padding:clamp(22px,2.6vw,30px); background:var(--paper); transition:transform .3s var(--e-out), border-color .2s; }
.seg:hover { transform:translateY(-3px); border-color:var(--blue); }
.seg .k { font-family:var(--mono); font-size:.7rem; color:var(--blue-deep); letter-spacing:.06em; }
.seg h4 { font-size:1.32rem; font-weight:800; letter-spacing:-0.025em; margin:14px 0 8px; }
.seg p { font-size:.95rem; margin:0; }
.partners { background:var(--noir); color:var(--noir-ink); border-radius:12px; padding:clamp(28px,4vw,52px); margin-top:20px; }
.partners__h { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:clamp(22px,3vw,34px); }
.partners h3 { color:#fff; }
.pgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.pt { border:1px solid var(--noir-line); border-radius:10px; padding:clamp(18px,2vw,24px); background:var(--noir-2); }
.pt h4 { font-size:1.02rem; font-weight:700; color:#fff; margin:0 0 7px; letter-spacing:-0.01em; }
.pt p { font-size:.86rem; color:var(--noir-ink-2); margin:0; }

/* quantum expertise + the group */
.quantum { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.qcard { border-radius:12px; padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; }
.qcard.dark { background:var(--noir); color:var(--noir-ink); border:1px solid var(--noir-line); }
.qcard.blue { background:var(--blue-deep); color:#fff; }
.qcard .k { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; margin-bottom:16px; opacity:.85; }
.qcard.dark .k { color:var(--blue); }
.qcard h3 { color:#fff; margin-bottom:14px; }
.qcard.dark p { color:var(--noir-ink-2); }
.qcard.blue p { color:#dceaff; }
.qcard ul { list-style:none; padding:0; margin:0 0 16px; }
.qcard.blue li { padding:9px 0 9px 18px; border-left:2px solid rgba(255,255,255,.35); margin-bottom:8px; color:#eaf2ff; font-size:.98rem; }
.qcard .foot { margin-top:auto; }

.ecosys { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.eco { border:1px solid var(--line-2); border-radius:10px; padding:clamp(22px,2.6vw,30px); background:var(--paper); }
.eco h4 { font-size:1.2rem; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.eco p { font-size:.94rem; margin:0 0 14px; }

/* the group / parent close */
.group { text-align:center; border-top:1px solid var(--line); margin-top:clamp(40px,6vh,72px); padding-top:clamp(36px,5vh,60px); }
.group .k { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.group h3 { font-size:clamp(1.6rem,3vw,2.4rem); margin:16px auto 14px; max-width:20ch; }
.group p { max-width:60ch; margin:0 auto; }

/* final CTA */
.cta { text-align:center; }

/* footer: the mark, the tagline, the same menu as the header, and the legal row */
.foot { background: var(--noir); color: var(--noir-ink-2); padding: clamp(56px,8vh,88px) 0 34px; }
.foot a { color: var(--noir-ink); }
.foot a:hover { color:#fff; }
.foot__top { display:grid; gap: clamp(20px,3vw,32px); align-items:start; }
.foot__brand { display:inline-flex; align-items:center; gap:14px; }
.foot__brand img { display:block; }
.foot__name { font-family:var(--sans); font-weight:800; letter-spacing:-0.03em;
  font-size:1.6rem; color:#fff; }
.foot__tag { font-family: var(--sans); font-weight:800; letter-spacing:-0.035em; line-height:1.05;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); color:#fff; margin:0; max-width:20ch; }
.foot__bot { display:flex; justify-content:space-between; margin-top: clamp(30px,4vw,44px);
  padding-top:22px; border-top:1px solid var(--noir-line); font-family:var(--mono);
  font-size:.78rem; flex-wrap:wrap; gap:12px; }
@media (min-width: 861px) {
  .foot__top { grid-template-columns: auto minmax(0,1fr); column-gap: clamp(36px,5vw,72px); align-items:center; }
}

/* reveal (progressive enhancement) */
.js .rv { opacity:0; transform: translateY(22px); }
.js .rv-line { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--e-out); }
.js .rv-line.is-in { clip-path: inset(0 0 0 0); }

@media (max-width: 1040px) {
  .showcase { grid-template-columns:1fr; }
  .quantum { grid-template-columns:1fr; }
  .proofstrip { grid-template-columns:1fr; }
  .pgrid { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 96px; row-gap: 8px; }
  .hero h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); }
  .hero__l { order: 0; }
  .hero__cube { order: 1; height: clamp(360px, 82vw, 540px); margin-right: 0; }
  .whynow { grid-template-columns:1fr; }
  .creds { grid-template-columns:1fr; gap:24px; }
  .segs { grid-template-columns:1fr; }
  .ecosys { grid-template-columns:1fr; }
  .stage { grid-template-columns: 60px 1fr; }
  .stage .status { grid-column:2; justify-self:start; text-align:left; margin-top:10px; }
  .artifacts { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  .abc { grid-template-columns:1fr; }
  .abc .op { display:none; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .artifacts { grid-template-columns:1fr; }
  .pgrid { grid-template-columns:1fr; }
  /* phones keep a real menu AND keep the one action reachable: the links wrap onto two rows
     rather than scrolling out of sight, and the bar stays pinned, collapsing to logo plus CTA
     once the reader is past the hero. */
  .nav__in { height:auto; min-height:58px; flex-wrap:wrap; padding-block:10px; row-gap:2px; }
  .nav__links { order:3; flex-basis:100%; margin-top:8px; gap:18px 20px; font-size:.875rem; flex-wrap:wrap; }
  .nav__links a { white-space:nowrap; }
  /* The stuck bar keeps a way back to the menu. Before this, scrolling 24px removed every
     nav link from the page AND from the tab order, on a document 22.9 screens tall, with no
     control anywhere to bring them back. */
  .nav.is-stuck .nav__links { display:none; }
  .nav.is-stuck.nav--open .nav__links { display:flex; }
  .nav__menu { display:none; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto; margin-right:10px;
    background:transparent; border:1px solid var(--line-2); border-radius:100px;
    color:var(--ink); cursor:pointer; }
  .nav.is-stuck .nav__menu { display:inline-flex; }
  .nav__menu:focus-visible { outline:2px solid var(--blue-text); outline-offset:3px; }
  .nav__menu-bar { display:block; width:16px; height:1.5px; background:currentColor;
    position:relative; }
  .nav__menu-bar::before, .nav__menu-bar::after { content:""; position:absolute; left:0;
    width:16px; height:1.5px; background:currentColor; }
  .nav__menu-bar::before { top:-5px; } .nav__menu-bar::after { top:5px; }
  .hero { padding-top: calc(var(--navh, 134px) + 14px); }
  .hero__eye { font-size:.75rem; }
  .btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-property: opacity, background-color, border-color, color, box-shadow !important;
    transition-duration: 180ms !important;
  }
  .btn:hover, .btn:active, .nav__cta:hover, .nav__cta:active,
  .btn:hover .ar, .tlink:hover .ar, .hero__jump:hover .ar { transform:none !important; }
  .hero__cube { opacity:1 !important; }
}