/* ==========================================================================
   AniTrac design system
   Plain CSS, no build step. See docs/architecture-decision.md for why.

   Palette logic
   The mark is a vivid grass green, so green carries the identity. A deep
   green leaning black is the base, because this is a security product and it
   has to feel serious rather than cheerful. One red is held back for theft
   figures and warnings only, so it always means "this is what it costs you".
   Every pair used for text was checked against WCAG 2.2 AA.
   ========================================================================== */

:root {
  /* Base */
  --veld-950: #071108;
  --veld-900: #0c1a0f;
  --veld-800: #13291a;
  --veld-700: #1d3d27;
  --veld-600: #2b4a35;
  --veld-500: #3f6349;
  --veld-400: #5a7a63;   /* 4.6:1 on white, muted body text */
  --veld-200: #b9cfbf;
  --veld-100: #dbe9de;
  --veld-50:  #eef4ef;

  /* Brand green */
  --grass-300: #9aeb7f;
  --grass-400: #6ede4a;  /* on dark backgrounds only */
  --grass-500: #4caf2f;  /* the logo green */
  --grass-600: #3d8f26;
  --grass-700: #2c6b1d;  /* 6.5:1 on white, safe for text and buttons */
  --grass-800: #235517;

  /* Reserved for theft data and warnings */
  --alert-400: #f08a6c;
  --alert-500: #e05531;
  --alert-600: #c53d1a;  /* 5.2:1 with white text */
  --alert-700: #9e2f12;

  --sand: #f7f9f6;
  --white: #ffffff;

  --max: 1180px;
  --radius: 16px;
  --radius-lg: 22px;
  --pill: 999px;

  --shadow-soft: 0 2px 12px -5px rgb(7 17 8 / 0.18);
  --shadow-lift: 0 20px 44px -20px rgb(7 17 8 / 0.32);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--sand);
  color: var(--veld-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:target { scroll-margin-top: 90px; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--grass-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 780px; margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(60px, 9vw, 120px); }
.section-sm { padding-block: clamp(44px, 6vw, 76px); }
.dark { background: var(--veld-900); color: var(--white); }
.darker { background: var(--veld-950); color: var(--white); }
.on-white { background: var(--white); }
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.stack-8 > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.hide { display: none !important; }
/* Hidden on screen but still read aloud. Use this for table captions and for
   words that give context to a symbol, never plain .hide, which removes the
   text from screen readers as well. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grass-700);
}
.dark .eyebrow, .darker .eyebrow, .eyebrow.on-dark { color: var(--grass-400); }
h1, .h1 {
  font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 800;
}
h2, .h2 {
  font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.08;
  letter-spacing: -0.03em; font-weight: 800;
}
h3, .h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--veld-400); max-width: 60ch; }
.dark .lead, .darker .lead { color: var(--veld-200); }
.muted { color: var(--veld-400); }
.dark .muted, .darker .muted { color: var(--veld-200); }
.small { font-size: 0.88rem; }
.tiny { font-size: 0.78rem; }
.strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  border: 0; cursor: pointer; border-radius: var(--pill);
  padding: 14px 30px; font-weight: 700; font-size: 0.98rem;
  transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s, color 0.25s;
}
.btn-primary { background: var(--grass-700); color: var(--white); box-shadow: 0 14px 32px -14px rgb(44 107 29 / 0.85); }
.btn-primary:hover { background: var(--grass-800); transform: translateY(-2px); }
.btn-alert { background: var(--alert-600); color: var(--white); box-shadow: 0 14px 32px -14px rgb(197 61 26 / 0.8); }
.btn-alert:hover { background: var(--alert-700); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--veld-900); color: var(--veld-900); }
.btn-outline:hover { background: var(--veld-900); color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: transparent; border: 2px solid rgb(255 255 255 / 0.55); color: var(--white); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.12); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgb(12 26 15 / 0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255 255 255 / 0.1); color: var(--white);
}
.header-in { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand svg, .brand img { width: 34px; height: 34px; color: var(--grass-500); }
.brand-name { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand-name span { color: var(--grass-400); }
.nav ul { list-style: none; display: flex; gap: 20px; align-items: center; }
.nav a {
  font-size: 0.9rem; color: var(--veld-100); padding: 8px 2px;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.nav a:hover { color: var(--grass-400); }
.nav a[aria-current="page"] { color: var(--grass-400); font-weight: 700; border-bottom-color: var(--grass-400); }
.nav-toggle { display: none; background: transparent; border: 1px solid rgb(255 255 255 / 0.3); color: var(--white); border-radius: var(--pill); padding: 9px 16px; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--veld-900); color: var(--white); padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--veld-950); color: var(--white); }
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(70% 55% at 12% 8%, rgb(76 175 47 / 0.22), transparent 62%),
    radial-gradient(60% 50% at 92% 90%, rgb(197 61 26 / 0.18), transparent 62%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(75% 65% at 50% 35%, #000 40%, transparent 100%);
}
.hero-in { padding-block: clamp(84px, 12vw, 140px); position: relative; }
.hero h1 { max-width: 17ch; margin-top: 18px; }
.hero .lead { margin-top: 22px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.chip {
  border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.06);
  border-radius: var(--pill); padding: 8px 16px; font-size: 0.76rem; font-weight: 600;
  backdrop-filter: blur(6px);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--veld-100);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--grass-500); }
.dark .card, .darker .card {
  background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.12);
  color: var(--white); backdrop-filter: blur(8px);
}
.card-top-accent { border-top: 4px solid var(--grass-600); }
.card-top-alert { border-top: 4px solid var(--alert-600); }

/* ---------- Stats ---------- */
.stat-value {
  font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-alert { color: var(--alert-500); }
.stat-grass { color: var(--grass-600); }
.dark .stat-grass, .darker .stat-grass { color: var(--grass-400); }
.stat-label { margin-top: 8px; font-size: 0.9rem; font-weight: 600; }
.stat-source { margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid rgb(255 255 255 / 0.12); background: var(--veld-950); padding-block: 16px; }
.marquee-track { display: inline-flex; animation: marquee 40s linear infinite; will-change: transform; }
.marquee-track span { font-size: clamp(0.95rem, 1.8vw, 1.3rem); font-weight: 800; letter-spacing: -0.01em; color: rgb(219 233 222 / 0.55); padding-right: 44px; }
.marquee-track span b { color: var(--grass-400); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Steps, pinned ---------- */
.pin-outer { position: relative; }
.pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.steps { list-style: none; }
.step {
  border-left: 2px solid rgb(255 255 255 / 0.14); padding: 16px 0 16px 22px;
  opacity: 0.32; transition: opacity 0.4s ease, border-color 0.4s ease;
}
.step.is-on { opacity: 1; border-color: var(--grass-400); }
.step-n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; color: var(--grass-400); }
.step h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); margin-top: 6px; }
.step p { margin-top: 6px; color: var(--veld-200); max-width: 44ch; font-size: 0.96rem; }
.progress-rail { height: 3px; background: rgb(255 255 255 / 0.14); border-radius: 2px; overflow: hidden; margin-top: 26px; }
.progress-rail i { display: block; height: 100%; width: 0; background: var(--grass-400); transition: width 0.12s linear; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--veld-100); border-radius: var(--radius); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--veld-50); vertical-align: top; }
thead th { background: var(--veld-900); color: var(--white); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; }
thead th small { display: block; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--veld-200); margin-top: 3px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfcfb; }
td.yes { color: var(--grass-700); font-weight: 700; }
/* Muted, but still legible. veld-200 was only 1.65 to 1 on white, which fails. */
td.no { color: var(--veld-400); }
.row-us { background: rgb(76 175 47 / 0.09) !important; }
.row-us td:first-child { font-weight: 800; color: var(--grass-700); }

/* ---------- Pricing ---------- */
.tier { position: relative; display: flex; flex-direction: column; }
.tier.featured { border: 2px solid var(--grass-600); box-shadow: var(--shadow-lift); }
.tier-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grass-700); color: var(--white); border-radius: var(--pill);
  padding: 5px 16px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.tier-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.tier-badge { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grass-700); }
.tier-price { margin-top: 18px; }
.tier-price .from { font-size: 0.8rem; color: var(--veld-400); }
.tier-price .amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; }
.tier-price .per { font-size: 0.86rem; color: var(--veld-400); }
.tier ul { list-style: none; margin-top: 18px; }
.tier li { position: relative; padding-left: 26px; margin-top: 9px; font-size: 0.92rem; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--grass-600); border-bottom: 2.5px solid var(--grass-600);
  transform: rotate(-45deg);
}
.tier li.not::before { border-color: var(--veld-200); }
.tier li.not { color: var(--veld-400); }
.tier .btn { margin-top: auto; }
.tier-foot { margin-top: 22px; }

/* ---------- Forms and calculators ---------- */
.field {
  width: 100%; border: 1px solid var(--veld-100); background: var(--white);
  border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-soft);
  transition: border-color 0.2s;
}
.field:focus { border-color: var(--grass-600); }
.label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.hint { font-size: 0.8rem; color: var(--veld-400); margin-top: 5px; }
fieldset { border: 0; }
legend { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--alert-600); }
.error-msg { color: var(--alert-700); font-weight: 600; font-size: 0.9rem; }
.notice {
  border: 1px solid var(--grass-600); background: rgb(76 175 47 / 0.08);
  border-radius: 10px; padding: 14px 16px; font-size: 0.9rem;
}
.notice-warn { border-color: var(--alert-600); background: rgb(197 61 26 / 0.07); }

/* Range slider */
input[type="range"] { width: 100%; accent-color: var(--grass-600); height: 28px; }

/* Result panel for the calculator */
.result {
  border: 1px solid var(--veld-100); border-top: 4px solid var(--veld-200);
  background: var(--white); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-soft); transition: border-color 0.3s;
}
.result.is-live { border-top-color: var(--grass-600); }
.result-figure { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- Chart ---------- */
.chart { display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 30px); height: 260px; padding-top: 20px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar {
  width: 100%; max-width: 74px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--grass-500), var(--grass-700));
  height: 0; transition: height 1s var(--ease);
}
.bar-profit { background: linear-gradient(180deg, var(--veld-500), var(--veld-700)); }
.bar-label { margin-top: 10px; font-size: 0.78rem; font-weight: 700; }
.bar-value { font-size: 0.82rem; font-weight: 800; margin-bottom: 7px; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; font-size: 0.84rem; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ---------- FAQ ---------- */
details.faq { border: 1px solid var(--veld-100); background: var(--white); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-soft); }
details.faq + details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--grass-700); font-size: 1.35rem; line-height: 1; transition: transform 0.25s; flex: 0 0 auto; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 12px; color: var(--veld-400); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--veld-100); }
.dark .timeline::before, .darker .timeline::before { background: rgb(255 255 255 / 0.16); }
.tl-item { position: relative; padding-bottom: 32px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--grass-500); border: 3px solid var(--sand);
}
.dark .tl-item::before, .darker .tl-item::before { border-color: var(--veld-900); }
.tl-item.pending::before { background: var(--veld-200); }
.tl-window { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grass-700); }
.dark .tl-window, .darker .tl-window { color: var(--grass-400); }

/* ---------- Footer ---------- */
.footer { background: var(--veld-950); color: var(--veld-200); padding-block: 52px 0; }
.footer h4 { color: var(--white); font-size: 0.95rem; font-weight: 800; margin-bottom: 12px; }
.footer ul { list-style: none; }
.footer li + li { margin-top: 8px; }
.footer a:hover { color: var(--grass-400); }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 0.1); margin-top: 40px; padding-block: 18px; font-size: 0.8rem; text-align: center; opacity: 0.75; }

/* ---------- Motion ---------- */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.word > span { display: inline-block; transform: translateY(108%); opacity: 0; animation: rise 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { transform: none; opacity: 1; } }
.fade-up { opacity: 0; animation: fadeup 0.8s ease forwards; animation-delay: var(--d, 0s); }
@keyframes fadeup { to { opacity: 1; } }
.reveal { opacity: 1; }
.js-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js-on .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Utility badges ---------- */
.pill {
  display: inline-block; border-radius: var(--pill); padding: 5px 13px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.pill-grass { background: rgb(76 175 47 / 0.14); color: var(--grass-700); }
.pill-alert { background: rgb(197 61 26 / 0.12); color: var(--alert-700); }
.pill-todo { background: #fff4d6; color: #7a5a00; }
.dark .pill-grass, .darker .pill-grass { background: rgb(110 222 74 / 0.16); color: var(--grass-400); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .nav ul {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--veld-900); border-top: 1px solid rgb(255 255 255 / 0.12);
    padding: 8px 24px 20px;
  }
  .nav ul[hidden] { display: none; }
  .nav a { display: block; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
  .nav a[aria-current="page"] { border-bottom-color: var(--grass-400); }
  .nav-toggle { display: inline-block; }
  .pin-outer { height: auto !important; }
  .pin { position: static; min-height: 0; padding-block: 56px; }
  .step { opacity: 1; border-color: var(--grass-400); }
  .form-grid { grid-template-columns: 1fr; }
  .chart { height: 200px; }
}
@media (max-width: 620px) {
  .g2, .g4 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .word > span, .fade-up { transform: none; opacity: 1; }
  .js-on .reveal { opacity: 1; transform: none; }
  .step { opacity: 1; }
  .marquee-track { animation: none; }
}

/* ---------- Print, investors do print these ---------- */
@media print {
  .header, .footer, .marquee, .btn, .nav-toggle, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .darker, .hero { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .section { padding-block: 18px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}