/* Fort Mill Ventures — fortmillventures.com
 *
 * US flag palette (Carlos 2026-07-30). Official hex, per the US government's
 * own flag specification: Old Glory Blue #0A3161 (Pantone 282C) and Old Glory
 * Red #B31942 (Pantone 193C), on white.
 *
 * Unlike the Brazilian palette this replaces, both official colours carry text
 * at full strength — white on blue is 12.9:1, white on red 6.7:1, and each works
 * as text on white at the same ratio. Nothing needed deepening.
 *
 * The one pairing to avoid: red on blue is 1.93:1. They never touch as
 * foreground and background; where both appear, white separates them.
 *
 * Every pair is asserted in shared/design-system/check-contrast.mjs.
 */

:root {
  --us-blue:  #0A3161;   /* Old Glory Blue, Pantone 282C */
  --us-red:   #B31942;   /* Old Glory Red,  Pantone 193C */

  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --bg-card: #FFFFFF;
  --ink: #1A1A2E;
  --ink-2: #4A4F63;
  --border: rgba(10, 49, 97, 0.18);

  --font-voice: 'Georgia', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 62ch;
  --page-max: 960px;
  --sp: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220;
    --bg-alt: #111A2C;
    --bg-card: #111A2C;
    --ink: #EEF2F8;
    --ink-2: #C3CCDA;
    --border: rgba(238, 242, 248, 0.20);
  }
}

* { margin: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); line-height: 1.6; font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  position: relative; overflow-x: hidden;
}

p { max-width: var(--measure); }

:focus-visible { outline: 3px solid var(--us-red); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: calc(var(--sp) * 2); top: -100%;
  z-index: 100; padding: var(--sp) calc(var(--sp) * 2);
  background: var(--bg); color: var(--us-blue);
  border: 2px solid var(--us-blue); border-radius: 8px;
}
.skip-link:focus { top: calc(var(--sp) * 2); }
@media (prefers-color-scheme: dark) { .skip-link { color: var(--ink); border-color: var(--ink); } }

/* ---------------------------------------------------------------- brand + hero */

.brandbar {
  align-items: center; background: #FFFFFF; display: flex; justify-content: center;
  padding: calc(var(--sp) * 3) calc(var(--sp) * 3) calc(var(--sp) * 2);
}
.brandbar img { display: block; height: auto; width: min(230px, 64vw); }

.hero {
  background: var(--us-blue); color: #FFFFFF;
  padding: calc(var(--sp) * 10) calc(var(--sp) * 3) calc(var(--sp) * 12);
  /* Three red stripes at the foot of the blue field — the flag's own rhythm,
     at component scale rather than as decoration laid on top. */
  border-bottom: 6px solid var(--us-red);
}
.hero > * { max-width: var(--page-max); margin-inline: auto; }
.hero__eyebrow {
  color: rgba(255, 255, 255, 0.78); font-size: 0.875rem;
  font-weight: 700; letter-spacing: 0.12em; text-align: center;
  text-transform: uppercase; margin-bottom: calc(var(--sp) * 2);
}
.hero__title {
  font-family: var(--font-voice);
  font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.15;
  margin-bottom: calc(var(--sp) * 3); text-align: center;
}
.hero__lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.94);
  text-align: center; margin-inline: auto;
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--sp) * 1.5);
  margin: calc(var(--sp) * 4) auto calc(var(--sp) * 3);
}
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp);
  min-height: 48px; padding: calc(var(--sp) * 1.25) calc(var(--sp) * 2.5);
  border: 2px solid #FFFFFF; border-radius: 999px; font-weight: 700;
  text-decoration: none;
}
.button--light { background: #FFFFFF; color: var(--us-blue); }
.button--outline { color: #FFFFFF; }
.hero__proof {
  color: rgba(255, 255, 255, 0.76); font-size: 0.875rem;
  margin-inline: auto; text-align: center;
}

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

.section {
  max-width: var(--page-max);
  margin: 0 auto; padding: calc(var(--sp) * 8) calc(var(--sp) * 3);
}
.section__title {
  font-family: var(--font-voice); font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin-bottom: calc(var(--sp) * 3);
}
.section__eyebrow {
  color: var(--us-red); font-size: 0.8125rem; font-weight: 800;
  letter-spacing: 0.12em; margin-bottom: var(--sp); text-transform: uppercase;
}
.section__lede { font-size: 1.125rem; color: var(--ink-2); margin-bottom: calc(var(--sp) * 4); }

.section--products { max-width: none; background: var(--bg-alt); }
.section--products > * { max-width: var(--page-max); margin-inline: auto; }
.section--products .section__title { color: var(--us-blue); }
@media (prefers-color-scheme: dark) { .section--products .section__title { color: #9DB9FF; } }

.products { display: grid; gap: calc(var(--sp) * 3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.product {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 5px solid var(--us-red);
  border-radius: 14px; padding: calc(var(--sp) * 3);
}
/* Blue marks the live product; red the one still in development. */
.product--krateo { border-top-color: var(--us-blue); }
@media (prefers-color-scheme: dark) { .product--krateo { border-top-color: #4C7DD6; } }

.product__name { font-family: var(--font-voice); font-size: 1.5rem; display: flex; align-items: center; gap: var(--sp); flex-wrap: wrap; }
.product__status {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  padding: 2px calc(var(--sp) * 1.5); border-radius: 999px;
  border: 1.5px solid var(--us-red); color: var(--ink);
}
.product__tag { font-style: italic; color: var(--ink-2); margin: var(--sp) 0 calc(var(--sp) * 2); }
.product__body { color: var(--ink-2); margin-bottom: calc(var(--sp) * 3); }
.product__features {
  display: grid; gap: var(--sp); list-style: none; margin: 0 0 calc(var(--sp) * 3);
  padding: 0;
}
.product__features li { color: var(--ink-2); padding-inline-start: calc(var(--sp) * 2.5); position: relative; }
.product__features li::before {
  color: var(--us-red); content: "✓"; font-weight: 800; inset-inline-start: 0; position: absolute;
}
.product__cta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--us-red);
}
@media (prefers-color-scheme: dark) { .product__cta { color: #FF8FA8; } }

.principles {
  display: grid; gap: calc(var(--sp) * 6) calc(var(--sp) * 3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.principle {
  border-inline-start: 4px solid var(--us-red);
  padding-inline-start: calc(var(--sp) * 2);
}
.principle__title { font-family: var(--font-voice); font-size: 1.25rem; margin-bottom: var(--sp); }
.principle p { color: var(--ink-2); }

.section--investors { max-width: none; background: var(--bg-alt); }
.section--investors > * { max-width: var(--page-max); margin-inline: auto; }
.facts { margin: 0; }
.facts dt {
  font-family: var(--font-voice); font-size: 1.25rem;
  color: var(--us-blue); margin-top: calc(var(--sp) * 6);
}
.facts dt:first-child { margin-top: 0; }
@media (prefers-color-scheme: dark) { .facts dt { color: #9DB9FF; } }
.facts dd { margin: calc(var(--sp) * 1.5) 0 0; color: var(--ink-2); max-width: var(--measure); line-height: 1.7; }

/* ---------------------------------------------------------------- contact + footer */

.section--contact {
  max-width: none;
  background: var(--us-blue); color: #FFFFFF;
  border-top: 6px solid var(--us-red);
}
.section--contact > * { max-width: var(--page-max); margin-inline: auto; }
.section--contact p { color: rgba(255, 255, 255, 0.94); }
.contact-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.125rem; font-weight: 600; color: #FFFFFF;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.contact-email { font-size: 0.875rem; margin-top: var(--sp); opacity: 0.78; }

.footer {
  background: var(--us-blue); color: rgba(255, 255, 255, 0.94);
  padding: calc(var(--sp) * 4) calc(var(--sp) * 3);
}
.footer > * { max-width: var(--page-max); margin-inline: auto; }
.footer__note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); margin-top: var(--sp); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}