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

/* Velora Systems
   ------------------------------------------------------------------
   Dark ground, lime signal, purple secondary, large light-weight display.

   Every colour pair below was verified against WCAG 2.2 AA with our own
   solver before a line of this file was written. Lime is not decoration
   here: it is the colour of a passing check, which is the whole product. */

:root {
  color-scheme: dark;

  --bg:        #101014;
  --surface:   #191920;
  --surface-2: #22222B;
  --rule:      #2A2A34;
  --rule-firm: #3A3A46;

  --text:  #EEEEF2;   /* 13.63:1 on the darkest surface */
  --body:  #B4B5BF;   /* 7.74:1 */
  --muted: #8E8F9B;   /* 4.92:1, the tightest pair on the site */

  --lime:      #CDF04B;
  --lime-dim:  #A9C93C;
  --purple:    #A78BFA;
  --teal:      #34D399;
  --on-accent: #101014;

  --critical: #FF8B7B;
  --serious:  #F5AC6B;
  --moderate: #E0C766;
  --minor:    #A0A2AE;
  --pass:     #6EE7A8;

  --display: 'Space Grotesk', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans:    'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 64ch;
  --radius: 4px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1.0625rem/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The interface element this entire business is about. Never remove. */
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lime); color: var(--on-accent);
  padding: .8rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - (var(--gutter) * 2), 76rem); margin-inline: auto; }
.narrow { max-width: var(--measure); }

/* ---------- header ---------- */

.site-head { border-bottom: 1px solid var(--rule); }
.site-head > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.75rem; flex-wrap: wrap; padding-block: .7rem;
}
.brand-lockup {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--text); font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.03em;
}
.brand-lockup .mark { width: 26px; height: 26px; flex: none; color: var(--lime); }
.brand-lockup .sub { font-weight: 300; color: var(--muted); }

.nav ul { display: flex; gap: clamp(.9rem, 2.2vw, 1.9rem); list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: .82rem; color: var(--muted);
  text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--display); color: var(--text); margin: 0 0 .5em; }
h1 {
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
/* The second half of a headline, held back so the first half carries. */
h1 .dim { color: var(--muted); }
h1 .hit { color: var(--lime); }

h2 { font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-weight: 500; font-size: 1.08rem; line-height: 1.35; letter-spacing: -.015em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.08rem, 1.7vw, 1.24rem); line-height: 1.6; color: var(--body); }

.eyebrow {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--lime); margin: 0 0 1.1rem;
}
.eyebrow .sep { color: var(--rule-firm); }

a { color: var(--lime); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 600; color: var(--text); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Pill tags */
.tags { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tag {
  font-family: var(--mono); font-size: .78rem; color: var(--body);
  border: 1px solid var(--rule-firm); border-radius: 999px; padding: .3rem .8rem;
}

/* ---------- sections ---------- */

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
section + section { border-top: 1px solid var(--rule); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: 600 1rem/1 var(--sans);
  padding: 1.05rem 1.7rem; border-radius: var(--radius);
  background: var(--lime); color: var(--on-accent);
  border: 2px solid var(--lime); cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, transform .1s ease;
}
.btn:hover { background: var(--lime-dim); border-color: var(--lime-dim); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .arrow { font-family: var(--mono); }

/* ---------- scanner ---------- */

.scanner { margin-top: 2.25rem; max-width: 42rem; }
.scan-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.scan-field { flex: 1 1 19rem; display: flex; flex-direction: column; gap: .5rem; }
.scan-field label { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.scan-field input {
  font: 400 1.05rem/1 var(--mono);
  padding: 1.05rem; width: 100%; color: var(--text); background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: var(--radius);
}
.scan-field input:hover { border-color: var(--lime); }
.scan-field input::placeholder { color: var(--muted); }
.scan-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); }

/* ---------- stats ---------- */

.stat-row {
  display: grid; gap: 1px; margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--surface); padding: 1.6rem 1.5rem; }
.stat .v {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.04em;
  color: var(--lime); line-height: 1;
}
.stat .l { display: block; margin-top: .75rem; font-size: .92rem; line-height: 1.5; color: var(--body); }
.stat cite { display: block; margin-top: .8rem; font-family: var(--mono); font-size: .74rem; font-style: normal; color: var(--muted); }

.cols { display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 2.25rem; }

/* ---------- steps ---------- */

.steps { list-style: none; counter-reset: s; margin: 2.25rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.steps li { counter-increment: s; background: var(--surface); padding: 1.75rem 1.6rem; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: .8rem;
  color: var(--lime); margin-bottom: .9rem;
}
.steps h3 { margin-bottom: .45rem; }
.steps p { color: var(--body); font-size: .95rem; margin: 0; }

/* ---------- tables ---------- */

.compare { width: 100%; border-collapse: collapse; margin-top: 1.75rem; font-size: .95rem; }
.compare caption { text-align: left; color: var(--muted); font-size: .88rem; padding-bottom: 1rem; }
.compare th, .compare td { text-align: left; padding: .85rem .9rem; border-bottom: 1px solid var(--rule); }
.compare thead th { font-family: var(--mono); font-size: .76rem; font-weight: 400; color: var(--muted); }
.compare tbody th { font-weight: 500; color: var(--text); }
.compare td { color: var(--body); }
.compare .yes { color: var(--lime); font-weight: 600; }
.compare .no  { color: var(--muted); }
.compare .bad { color: var(--critical); font-weight: 600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }

.callout {
  border-left: 2px solid var(--lime);
  background: var(--surface);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 2rem; font-size: .97rem; color: var(--body);
}

dl.faq { margin: 1.75rem 0 0; }
dl.faq div { padding-block: 1.4rem; border-top: 1px solid var(--rule); }
dl.faq div:first-child { border-top: none; padding-top: 0; }
dl.faq dt { font-family: var(--display); font-weight: 500; font-size: 1.06rem; color: var(--text); }
dl.faq dd { margin: .5rem 0 0; color: var(--body); max-width: var(--measure); }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--rule); padding-block: 3.25rem 3.5rem; font-size: .92rem; color: var(--muted); }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-foot h2 { font-family: var(--mono); font-size: .76rem; font-weight: 400; letter-spacing: .05em; color: var(--text); margin-bottom: 1rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .55rem; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--lime); text-decoration: underline; }
.foot-legal { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------- legal pages ---------- */
.doc h2 { font-size: 1.4rem; font-weight: 500; margin-top: 2.75rem; }
.doc h3 { margin-top: 1.9rem; }
.doc ul, .doc ol { color: var(--body); padding-left: 1.3rem; }
.doc li { margin-bottom: .5rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.doc th, .doc td { text-align: left; padding: .75rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc thead th { font-family: var(--mono); font-size: .76rem; font-weight: 400; color: var(--muted); }

/* ==================================================================
   Atmosphere, icons, motion
   ------------------------------------------------------------------
   Everything here is decorative. It sits behind or beside the content,
   never carries meaning on its own, and switches off entirely when the
   visitor asks for reduced motion. Contrast is re-verified after these
   were added, because a glow behind text is a contrast change. */

/* ---------- background ---------- */

body { position: relative; isolation: isolate; }

.atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* A fine dot grid, barely there. */
  background-image: radial-gradient(circle at 1px 1px, rgba(238,238,242,.055) 1px, transparent 0);
  background-size: 28px 28px;
}
.atmosphere .glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  will-change: transform;
}
.atmosphere .glow.lime   { width: 46vw; height: 46vw; right: -14vw; top: -18vw; background: #CDF04B; opacity: .11; }
.atmosphere .glow.purple { width: 40vw; height: 40vw; left: -16vw; top: 38vh; background: #7C5CE0; opacity: .13; }
.atmosphere .glow.teal   { width: 32vw; height: 32vw; right: -8vw; bottom: -12vw; background: #34D399; opacity: .09; }

@media (prefers-reduced-motion: no-preference) {
  .atmosphere .glow.lime   { animation: drift 26s ease-in-out infinite alternate; }
  .atmosphere .glow.purple { animation: drift 34s ease-in-out infinite alternate-reverse; }
  .atmosphere .glow.teal   { animation: drift 30s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 3vw, 0) scale(1.08); }
}

/* ---------- hero layout ---------- */

.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; } .hero-art { max-width: 30rem; } }

/* ---------- the scan illustration ---------- */

.hero-art { width: 100%; height: auto; display: block; }
.hero-art .frame  { fill: var(--surface); stroke: var(--rule-firm); }
.hero-art .chrome { fill: var(--surface-2); }
.hero-art .dot    { fill: var(--rule-firm); }
.hero-art .block  { fill: var(--surface-2); stroke: var(--rule); }
.hero-art .line   { fill: var(--rule-firm); }
.hero-art .beam   { fill: var(--lime); }
.hero-art .halo   { fill: var(--lime); opacity: .14; }
.hero-art .flag   { fill: var(--critical); }
.hero-art .flag.s { fill: var(--serious); }
.hero-art .ok     { fill: var(--lime); }
.hero-art .label  { font: 500 11px var(--mono); fill: var(--text); }
.hero-art .sub    { font: 400 10px var(--mono); fill: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .hero-art .sweep { animation: sweep 4.6s cubic-bezier(.4,0,.2,1) infinite; }
  .hero-art .flag  { opacity: 0; animation: pop .5s ease-out forwards; }
  .hero-art .flag:nth-of-type(1) { animation-delay: 1.4s; }
  .hero-art .flag:nth-of-type(2) { animation-delay: 2.1s; }
  .hero-art .flag:nth-of-type(3) { animation-delay: 2.7s; }
  .hero-art .flag:nth-of-type(4) { animation-delay: 3.3s; }
  .hero-art .ring  { animation: ring 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes sweep {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(300px); opacity: 0; }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
  70%  { opacity: 1; transform: scale(1.18); transform-box: fill-box; transform-origin: center; }
  100% { opacity: 1; transform: scale(1);   transform-box: fill-box; transform-origin: center; }
}
@keyframes ring {
  0%   { opacity: .7; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.4); }
}

/* ---------- icons ---------- */

.ico { width: 1.35rem; height: 1.35rem; flex: none; color: var(--lime); }
.ico-lg { width: 1.9rem; height: 1.9rem; }
.steps li::before { display: none; }              /* the icon replaces the counter */
.steps .step-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.steps .step-n { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.steps h3 { margin: 0; }

.compare .mark-yes, .compare .mark-no, .compare .mark-bad {
  display: inline-flex; align-items: center; gap: .45rem;
}
.compare .mark-yes .ico { color: var(--lime); }
.compare .mark-no  .ico { color: var(--muted); }
.compare .mark-bad .ico { color: var(--critical); }
.stat .ico { color: var(--muted); margin-bottom: .9rem; display: block; }

/* ---------- motion: reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: .08s; }
  .reveal[data-delay="2"] { transition-delay: .16s; }
  .reveal[data-delay="3"] { transition-delay: .24s; }
}

/* ---------- micro-interactions ---------- */

.btn .arrow { display: inline-block; transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }

.stat, .steps li { transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stat:hover, .steps li:hover { background: var(--surface-2); transform: translateY(-2px); }
}

.tag { transition: border-color .15s ease, color .15s ease; }
.tag:hover { border-color: var(--lime); color: var(--text); }

.scan-field input { transition: border-color .15s ease, box-shadow .15s ease; }
.scan-field input:focus { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(205,240,75,.14); outline: none; }
.scan-field input:focus-visible { outline: none; }

/* ---------- scanning state ---------- */

.scanning { display: flex; align-items: center; gap: .9rem; }
.scanning .pulse {
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--lime); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scanning .pulse { animation: pulse 1.2s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(205,240,75,.55); }
  60%      { box-shadow: 0 0 0 12px rgba(205,240,75,0); }
}

/* ---------- pricing ---------- */

.plans {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 2rem 1.75rem;
  transition: border-color .2s ease, transform .2s ease;
}
.plan-pro { border-color: var(--lime); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover { border-color: var(--lime-dim); transform: translateY(-2px); }
  .plan-pro:hover { border-color: var(--lime); }
}
.plan-flag {
  position: absolute; top: -.75rem; left: 1.5rem; margin: 0;
  font: 500 .74rem/1 var(--mono); letter-spacing: .04em;
  background: var(--lime); color: var(--on-accent);
  padding: .45rem .7rem; border-radius: 999px;
}
.plan h2 { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; margin: 0 0 .9rem; }
.plan .price { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.plan .amt {
  font-family: var(--display); font-weight: 300; font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em; color: var(--text);
}
.plan-pro .amt { color: var(--lime); }
.plan .per { font-family: var(--mono); font-size: .9rem; color: var(--muted); }
.plan .price-note { margin: .6rem 0 0; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.plan-for { margin: 1.4rem 0 0; color: var(--text); font-weight: 500; }
.plan-list { list-style: none; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--rule); }
.plan-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; font-size: .95rem; color: var(--body); }
.plan-list .ico { width: 1.15rem; height: 1.15rem; margin-top: .2rem; }
.plan-cta { margin: 1.75rem 0 0; }
.plan-cta .btn { width: 100%; justify-content: center; display: inline-flex; box-sizing: border-box; }
.btn-ghost { background: transparent; color: var(--lime); border-color: var(--rule-firm); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--lime); color: var(--lime); }
.plan-small { margin: 1rem 0 0; font-size: .84rem; color: var(--muted); }
.plans-foot { margin-top: 2rem; max-width: var(--measure); color: var(--muted); font-size: .95rem; }

.compare td.num { white-space: nowrap; font-family: var(--mono); font-size: .9rem; }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--rule-firm); }

/* Native controls keep the review screencast usable without JavaScript. */
.demo-video { display: block; width: 100%; height: auto; margin-block: 1.5rem; border: 1px solid var(--rule-firm); border-radius: .75rem; background: #101014; }

/* Consent controls remain usable without covering the page or trapping focus. */
.consent-panel { position: fixed; inset: auto 1rem 1rem auto; z-index: 100; max-width: 34rem; max-height: 70vh; overflow: auto; padding: 1.25rem; background: var(--bg); color: var(--body); border: 1px solid var(--lime, #cdf04b); border-radius: .75rem; box-shadow: 0 8px 40px #0008; }
.consent-panel[hidden] { display: none; }
.consent-panel p { margin: 0 0 1rem; font-size: .95rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.consent-actions .btn { font-size: .9rem; padding: .65rem .85rem; }
.consent-settings { background: transparent; border: 0; padding: .5rem 0; color: var(--body); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) { .consent-panel { inset: auto .5rem .5rem; max-width: none; } }