/* ═══════════════════════════════════════════════════════════════════════
   KragAi — kragai.io
   Colour and type follow the OP2026 one-pager; the token names below are the
   ones the brand book (LOGO.pdf p.5) labels them with.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* main.purple / main.light_blue / grey.scale, verbatim from the brand book */
  --navy:      #2a1550;
  --teal:      #5bc6ce;
  --grey:      #414042;

  /* sampled off the sheet */
  --page:      #fdfdfd;
  --line:      #dcdde2;
  --teal-soft: #d1efef;

  /* state accents — reserved for status, used sparingly */
  --red:    #7e1416;
  --blue:   #3957a7;
  --green:  #5c9741;
  --yellow: #dab633;

  --navy-70: rgba(42, 21, 80, 0.70);
  --navy-55: rgba(42, 21, 80, 0.55);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r:    10px;
  --r-lg: 16px;
  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 68px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  font-family: var(--body);
  font-weight: 300;
  background: var(--page);
  color: var(--navy);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(1180px, 100% - 2 * var(--gut)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ─── Type ──────────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.14; font-weight: 600; }

.rule-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 2rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
/* the hairline rules that flank each section head on the sheet */
.rule-title::before,
.rule-title::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ─── Icon system ───────────────────────────────────────────────────────
   Every icon is an SVG lifted from the sheet with its own fills intact, drawn
   as a plain <img>. Sizing is per context via --size.

   These were originally recoloured with CSS masks so one grey file could serve
   every context. Masks turned out not to render at all in some browsers, and
   the failure is silent — the icon vanishes and only its label remains. The
   sheet already colours each icon correctly for where it sits, so there was
   nothing for the masks to buy. */

.ic {
  --size: 1.5rem;
  flex: none;
  width: var(--size);
  height: var(--size);
  object-fit: contain;
}
.poly { --size: 1.9rem; }

/* ─── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 0.72em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: #3b1e70; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); transform: translateY(-1px); }

:where(a, button):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Announcement strip + nav ──────────────────────────────────────── */

.strip {
  background: var(--teal);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1rem;
  text-indent: 0.24em;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 253, 253, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(42, 21, 80, 0.05);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--nav-h);
}
.nav-logo { color: var(--navy); }
.nav-logo img { width: clamp(118px, 15vw, 152px); }

.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--navy-70);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-links a:hover { color: var(--navy); border-bottom-color: var(--teal); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  border-radius: 2px; transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle span + span { margin-top: 5px; }

/* ─── Hero ──────────────────────────────────────────────────────────── */

.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }

/* The copy column takes the larger share so "Active Intelligence" holds one
   line, as it does on the sheet. */
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
}
h1 .l1, h1 .l2 { display: block; }
h1 .l2 { color: var(--teal); }

.lede {
  margin-top: 1.3rem;
  max-width: 46ch;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--grey);
}
.lede b { font-weight: 600; font-style: italic; color: var(--navy); }

.nots {
  margin-top: 1.6rem;
  display: grid;
  gap: 0.7rem;
}
.nots li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 0.98rem;
}
.nots .ic { --size: 1.35rem; }

.hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* device photo + the observe/listen/think/speak rail */
.hero-art { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); }
.device { flex: 1 1 auto; min-width: 0; }

.rail {
  flex: none;
  display: grid;
  gap: clamp(0.9rem, 2.4vw, 1.7rem);
  padding-left: clamp(0.6rem, 1.5vw, 1.1rem);
  border-left: 2px solid var(--teal-soft);
}
.rail li { display: grid; justify-items: center; gap: 0.3rem; color: var(--navy); }
/* two-tone on the sheet: a navy glyph inside teal focus brackets */
.rail .ic { --size: clamp(1.9rem, 2.8vw, 2.4rem); }
.rail span {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-indent: 0.14em;
}

/* ─── Stats band ────────────────────────────────────────────────────── */

.band { background: var(--navy); color: #fff; padding: clamp(2rem, 4.5vw, 3.2rem) 0; }
.band-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
}
.stat { display: grid; gap: 0.45rem; }
.stat .ic { --size: 2.1rem; }
.stat h2 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.stat h2 span { color: #fff; }
.stat p { font-size: 0.9rem; font-weight: 200; color: rgba(255, 255, 255, 0.82); }

/* ─── Sections ──────────────────────────────────────────────────────── */

.sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sec-alt { background: #f6f7f9; }

/* ─── Moat cards ────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(42, 21, 80, 0.07); }

.num {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.num b, .num span { color: var(--teal); font-weight: 600; }

.card h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 600; }
.card-lead { margin-top: 0.9rem; font-size: 0.92rem; color: var(--grey); }

.ticks { margin-top: 1rem; display: grid; gap: 0.42rem; }
.ticks li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--grey);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.ticks b { font-weight: 600; color: var(--navy); }

/* perception › memory › reasoning › action */
.chain {
  margin-top: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
}
.chain li {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  position: relative;
}
.chain li + li::before {
  content: '›';
  position: absolute;
  left: -0.35em; top: 0.15em;
  color: var(--navy-55);
  font-size: 1.1rem;
  line-height: 1;
}
.chain .ic { --size: 1.65rem; }
.chain span {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-indent: 0.09em;
}

/* tinted box that closes each card */
.callout {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--teal-soft);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--navy);
}
.callout .ic { --size: 1.6rem; }
.card > .callout, .card > .quote { margin-top: 1.3rem; }

.quote {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--navy);
  border-radius: var(--r);
  padding: 0.95rem 1.1rem;
  color: #fff;
}
.quote .ic { --size: 1.7rem; }
.quote blockquote { font-size: 0.9rem; font-weight: 300; font-style: italic; }
.quote figcaption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--teal);
}

/* ─── The Shift ─────────────────────────────────────────────────────── */

.shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}

/* Not uppercased. The sheet sets both lane labels in title case, and forcing
   caps here rendered the brand as KRAGAI — it is always KragAi. */
.lane-name {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.lane-old .lane-name { color: var(--grey); }
.lane-new .lane-name { color: var(--navy); }

.flow { display: flex; align-items: flex-start; gap: 0.2rem; }
.flow li {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.42rem;
  text-align: center;
  position: relative;
}
.flow li + li::before {
  content: '›';
  position: absolute;
  left: -0.3em; top: 0.2em;
  font-size: 1.05rem;
  line-height: 1;
}
.flow .ic { --size: clamp(1.5rem, 2.4vw, 1.9rem); }
.flow span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-indent: 0.07em;
}

/* traditional reads muted; KragAi reads teal on navy pills */
.lane-old .flow li::before { color: #9a9a9c; }
.lane-old .flow span { color: var(--grey); }

.lane-new .flow li::before { color: var(--teal); }
.lane-new .flow span {
  background: var(--navy);
  color: #fff;
  padding: 0.28em 0.7em;
  border-radius: 999px;
}

.vs {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  background: var(--navy);
  color: #fff;
  width: 3.1rem; height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ─── Market / Seed / Team ──────────────────────────────────────────── */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  height: 100%;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.panel-title .ic { --size: 1.7rem; }
.panel-title .slash { color: var(--teal); }

.panel h3 { font-size: 1.15rem; font-weight: 600; }
.panel h3.mt { margin-top: 1.9rem; }
.eyebrow {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy-55);
}
/* the decorative watermark beside each market list, as on the sheet */
.ic.art {
  --size: 3.2rem;
  margin-top: 0.9rem;
  margin-left: auto;
}

.steps { display: grid; gap: 1rem; margin-top: 1.3rem; }
.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  align-items: center;
}
.steps .ic { --size: 1.7rem; grid-row: 1 / 3; }
.steps b {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.steps span { font-size: 0.88rem; font-weight: 300; color: var(--grey); line-height: 1.45; }

.people { display: grid; gap: 1.15rem; }
.people li { display: flex; align-items: center; gap: 0.9rem; }
.people img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--teal-soft);
}
.people b { display: block; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; }
/* block, so a role that wraps to two lines does not leave the address
   trailing off the end of the last one */
.people span { display: block; font-size: 0.82rem; font-weight: 300; color: var(--grey); line-height: 1.4; }
.people i { font-style: normal; color: var(--teal); }
.people .mail {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--teal);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.people .mail:hover { color: var(--teal); border-bottom-color: var(--navy); }

/* ─── Investor call to action ───────────────────────────────────────────
   The one thing the sheet is actually asking for, so it gets a full navy band
   of its own rather than a line tucked into the footer. */

.cta {
  background: var(--navy);
  color: #fff;
  padding: clamp(3rem, 7vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}
/* a soft teal bloom, the same glow the status panel casts in the hero */
.cta::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: min(90vw, 900px); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(91, 198, 206, 0.16) 0%, rgba(91, 198, 206, 0) 68%);
  pointer-events: none;
}

.cta-in { position: relative; text-align: center; }

.cta-eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
  color: var(--teal);
}
.cta-eyebrow span { opacity: 0.65; }

.cta-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  margin-top: 0.7rem;
}

.cta-body {
  margin: 1.1rem auto 0;
  max-width: 60ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.86);
}

.cta-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
.btn-teal { background: var(--teal); color: var(--navy); font-weight: 600; }
.btn-teal:hover { background: #74d4db; transform: translateY(-1px); }
.btn-onnavy { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-onnavy:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }

.cta-note {
  margin-top: 1.4rem;
  font-size: 0.86rem;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.62);
}
.cta-note b { font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.cta-note a { color: var(--teal); border-bottom: 1px solid rgba(91, 198, 206, 0.45); }
.cta-note a:hover { border-bottom-color: var(--teal); }

/* ─── Footer ────────────────────────────────────────────────────────── */

/* Navy, not teal — the August sheet moved the closing band to the dark ground
   and split it into a contact half and an "explore" half, divided by a rule. */
/* Teal, not the navy the August sheet uses. On the sheet this band closes the
   page against white; here the investor CTA sits directly above it, and navy on
   navy read as one undifferentiated block no rule could rescue. Teal keeps the
   two bands distinct and is still the sheet's own footer pairing, inverted. */
footer { background: var(--teal); color: var(--navy); }
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
}
.foot-col { display: grid; gap: 0.15rem; }
.foot-col-explore {
  padding-left: clamp(1.2rem, 4vw, 3.5rem);
  border-left: 1px solid rgba(42, 21, 80, 0.25);
}

.foot-ask, .foot-explore {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  color: var(--navy-70);
}
.foot-ask b, .foot-explore b { font-weight: 600; color: var(--navy); }

.foot-links { font-size: 0.98rem; font-weight: 400; color: var(--navy); }
.foot-links a { border-bottom: 1px solid rgba(42, 21, 80, 0.35); }
.foot-links a:hover { border-bottom-color: var(--navy); }
.foot-links span { margin: 0 0.4rem; opacity: 0.5; }

.foot-line {
  font-size: clamp(0.98rem, 1.8vw, 1.2rem);
  font-weight: 300;
  color: var(--navy);
}

.foot-mark { width: 52px; flex: none; margin-left: auto; }

/* ─── Scroll reveal ─────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ─── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cards, .trio { grid-template-columns: repeat(2, 1fr); }
  .cards .card:last-child, .trio .panel:last-child { grid-column: 1 / -1; }
  .band-in { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { flex-direction: column-reverse; }
  .rail {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 6vw, 3rem);
    padding-left: 0;
    padding-top: 0.9rem;
    border-left: 0;
    border-top: 2px solid var(--teal-soft);
    width: 100%;
  }

  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }

  .nav.open .nav-links {
    display: grid;
    position: absolute;
    inset: 100% 0 auto;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem var(--gut) 1.4rem;
    gap: 0.2rem;
  }
  .nav.open .nav-links a { padding: 0.55rem 0; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the two lanes stack, so the VS badge sits between them */
  .shift { grid-template-columns: 1fr; }
  .vs { margin-inline: auto; }
}

@media (max-width: 620px) {
  .cards, .trio, .band-in { grid-template-columns: 1fr; }
  .cards .card:last-child, .trio .panel:last-child { grid-column: auto; }

  /* the chains get too tight to read across; wrap them and drop the chevrons,
     three-up for the five-step flows and two-up so the four-step chain splits
     evenly rather than leaving Action stranded on its own row */
  .flow, .chain { flex-wrap: wrap; gap: 0.9rem 0.2rem; }
  .flow li { flex: 0 0 calc(33.333% - 0.2rem); }
  .chain li { flex: 0 0 calc(50% - 0.2rem); }
  .flow li + li::before, .chain li + li::before { display: none; }

  /* the two halves stack, so the dividing rule moves from left edge to top */
  .foot-in { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .foot-col-explore {
    padding-left: 0;
    padding-top: 1.4rem;
    border-left: 0;
    border-top: 1px solid rgba(42, 21, 80, 0.25);
    width: 100%;
  }
  .foot-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn:hover { transform: none; }
}