:root {
  --midnight: #11143b;
  --deep: #07091d;
  --indigo: #312e81;
  --violet: #7c3aed;
  --cyan: #22d3ee;
  --neon: #c6ff00;
  --orange: #fd5811;
  --sea: #0b7198;
  --lagoon: #004f71;
  --ink: #17172b;
  --muted: #5b6380;
  --soft: #f7f8fc;
  --white: #fff;
  --line: #e4e7f0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--midnight);
  background: var(--white);
  line-height: 1.55;
}
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; padding: .75rem 1rem; background: #fff; z-index: 100; }

header {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(260px, auto) 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: .7rem 5vw;
  border-bottom: 1px solid #e8eaf2;
  background: rgba(255,255,255,.97);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { font-size: clamp(1.15rem, 2vw, 1.65rem); font-weight: 850; text-decoration: none; letter-spacing: -.04em; }
.brand .not { color: var(--violet); }
.brand .knowledge { color: var(--sea); }
.brand small { display: block; font-size: .62rem; letter-spacing: .12em; color: #747b95; text-transform: uppercase; }
nav { display: flex; justify-content: center; align-items: center; gap: 1.35rem; }
nav a { text-decoration: none; font-size: .9rem; font-weight: 650; }
.navcta, .primary, .button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--neon);
  color: var(--midnight) !important;
  font-weight: 850;
  border-radius: 999px;
  padding: .78rem 1.2rem;
  text-decoration: none;
}
.parent-brand { display: flex; gap: .65rem; align-items: center; text-decoration: none; color: #6a718a; font-size: .72rem; }
.parent-brand img { width: 120px; height: 39px; object-fit: contain; object-position: center; }

section { padding: 6rem 5vw; }
.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center;
  color: #fff;
  background: radial-gradient(circle at 72% 35%, #24309b 0, #15184d 23%, #090d2b 55%, #05071a 100%);
}
.eyebrow { font-size: .76rem; letter-spacing: .22em; font-weight: 850; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.2rem, 3.65vw, 4.35rem); line-height: 1.08; margin: 1.2rem 0; letter-spacing: -.045em; }
.hero h1 span { display: block; }
.hero h1 b { color: var(--violet); }
.hero h1 em { color: var(--cyan); font-style: normal; }
.rule { width: 74px; height: 5px; background: var(--neon); margin: 1.5rem 0; }
.hero h2 { font-size: clamp(2.55rem, 4.7vw, 5.25rem); line-height: 1.02; letter-spacing: -.045em; margin: .5rem 0 1rem; }
.hero mark, .dark mark, .contact-band mark, .case-hero mark { color: var(--neon); background: none; }
.lead { font-size: 1.15rem; max-width: 720px; color: #e5e8f5; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.secondary { border: 1px solid var(--cyan); padding: .78rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 750; }
.solution-label { margin-top: 1.5rem; color: #aab2d2; font-size: .85rem; }
.solution-label strong { color: var(--cyan); }

.brain { position: relative; min-height: 440px; }
.orb {
  width: min(34vw, 430px);
  aspect-ratio: 1;
  border-radius: 48% 52% 45% 55%;
  margin: auto;
  background: radial-gradient(circle, var(--neon) 0 1%, var(--cyan) 2%, transparent 10%), radial-gradient(circle at 35% 40%, var(--violet), transparent 45%), radial-gradient(circle at 65% 60%, #126cff, transparent 45%);
  box-shadow: 0 0 70px #22d3ee55;
  border: 1px solid #7c3aed88;
  display: grid;
  place-items: center;
}
.nodes { font-size: 3rem; line-height: 1.8; color: #fff; text-shadow: 0 0 15px var(--cyan); text-align: center; }
.brain-labels { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.5rem; }
.brain-labels span { border-left: 2px solid var(--cyan); padding-left: .7rem; font-size: .82rem; }
.brain-labels b { display: block; color: var(--cyan); }

.light { background: #fff; }
.soft { background: var(--soft); }
.dark, .contact-band { background: var(--midnight); color: #fff; }
.violet { color: var(--violet); }
section h2 { font-size: clamp(2.4rem, 4.4vw, 4.7rem); line-height: 1.05; letter-spacing: -.04em; margin: .6rem 0 1.3rem; }
.intro { font-size: 1.1rem; max-width: 830px; color: #606985; }
.dark .intro { color: #d4d8e8; }

.journey, .benefits, .principle-grid, .case-grid, .stage-grid, .three, .outcome-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
.journey { grid-template-columns: repeat(4, 1fr); }
.journey article, .principle-grid article, .stage-grid article, .outcome-grid article {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
}
.journey i, .stage-grid i {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font-style: normal;
  font-weight: 850;
}
.journey .insight i { background: var(--violet); }
blockquote { font-size: 2rem; margin: 4rem 0 0; padding: 2rem; border-left: 6px solid var(--neon); background: #f5f6fb; }

.benefits { grid-template-columns: repeat(3, 1fr); }
.benefits article { padding: 1.5rem; border: 1px solid #363b69; border-radius: 18px; }
.benefits b { font-size: 2rem; color: var(--cyan); }
.principle-grid { grid-template-columns: repeat(2, 1fr); }
.principle-grid .icon { color: var(--violet); font-size: 2rem; }
.principle-grid .limecard { border-top: 5px solid var(--neon); }

.case-grid { grid-template-columns: repeat(3, 1fr); }
.case-card { min-height: 330px; display: flex; flex-direction: column; padding: 1.7rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px #11143b13; }
.case-card span { font-weight: 900; color: var(--violet); }
.case-card h3 { font-size: 1.65rem; line-height: 1.12; margin: auto 0 .75rem; }
.case-card p { color: var(--muted); }
.case-card strong { margin-top: auto; color: var(--indigo); }
.case-card.featured { color: #fff; border: 0; background: linear-gradient(145deg, var(--indigo), var(--violet)); }
.case-card.featured span, .case-card.featured p, .case-card.featured strong { color: #fff; }

.cycle { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 2.5rem 0; }
.cycle span { padding: .75rem 1rem; border: 1px solid #59608e; border-radius: 999px; }
.cycle .neon { border-color: var(--neon); color: var(--neon); }
.tagline { font-size: 1.5rem; }
.evidence { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }

.contact-band { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.contact-band p { max-width: 720px; color: #d6daea; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1rem; }

.sub-hero, .case-hero { padding-top: 7rem; padding-bottom: 7rem; color: #fff; background: radial-gradient(circle at 85% 20%, #27339b 0, #121641 33%, #07091d 72%); }
.sub-hero h1, .case-hero h1 { max-width: 1000px; font-size: clamp(3rem, 6vw, 6.6rem); line-height: .98; letter-spacing: -.055em; margin: .8rem 0 1.5rem; }
.sub-hero .lead, .case-hero .lead { max-width: 850px; }
.case-hero .case-tag { display: inline-block; padding: .4rem .7rem; border-radius: 999px; border: 1px solid #6d74a7; color: var(--cyan); font-size: .76rem; letter-spacing: .16em; font-weight: 850; }

.explain-head, .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.explain-head p:last-child, .split > div > p { font-size: 1.08rem; color: var(--muted); }
.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.story-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 14px 40px #11143b0b; }
.story-visual { min-height: 220px; display: grid; place-items: center; padding: 2rem; text-align: center; font-size: 1.25rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.story-card:nth-child(2) .story-visual { background: linear-gradient(135deg, var(--lagoon), var(--cyan)); }
.story-card:nth-child(3) .story-visual { color: var(--midnight); background: linear-gradient(135deg, var(--neon), #fff46a); }
.story-copy { padding: 1.6rem; }
.story-copy h3 { font-size: 1.75rem; line-height: 1.15; margin: .4rem 0 1rem; }
.story-copy p { color: var(--muted); }
.formats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.formats span { font-size: .75rem; padding: .4rem .65rem; border-radius: 999px; background: #eef0f8; color: var(--indigo); font-weight: 800; }
.definition { margin-top: 1rem; padding: 1rem; border-left: 4px solid var(--violet); background: #f6f3ff; font-weight: 700; }
.three { grid-template-columns: repeat(3, 1fr); }
.three article { padding: 1.5rem; border-radius: 16px; background: #f6f7fb; border-top: 4px solid var(--violet); }
.payoff { margin-top: 2rem; padding: 2rem 2.4rem; border-radius: 18px; display: flex; justify-content: space-between; align-items: center; gap: 2rem; color: #fff; background: var(--midnight); }
.payoff strong { font-size: 2rem; }
.payoff span { color: var(--neon); }

.stage-grid { grid-template-columns: repeat(3, 1fr); }
.stage-grid article { min-height: 255px; }
.stage-grid h3 { font-size: 1.45rem; }
.stage-grid p { color: var(--muted); }
.outcome-grid { grid-template-columns: repeat(2, 1fr); }
.outcome-grid article { background: #fff; }
.outcome-grid h3 { color: var(--indigo); }
.quote-band { padding: 4rem 5vw; color: #fff; text-align: center; background: linear-gradient(120deg, var(--indigo), var(--violet)); }
.quote-band p { max-width: 1000px; margin: auto; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.2; font-weight: 750; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center; padding: 2rem 5vw; color: #fff; background: var(--deep); }
footer .brand { color: #fff; }
footer p { max-width: 540px; margin: 0; font-size: .85rem; color: #c7cbda; }
footer small { color: #9ca3b8; }
footer img { width: 120px; height: 42px; object-fit: contain; }

@media (max-width: 1050px) {
  header { grid-template-columns: auto 1fr; }
  .parent-brand { display: none; }
  .hero { grid-template-columns: 1fr; }
  .brain { max-width: 650px; }
  .orb { width: min(70vw, 430px); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  header { min-height: 72px; padding: .65rem 5vw; }
  nav a:not(.navcta) { display: none; }
  nav { justify-content: flex-end; }
  section { padding: 4.5rem 6vw; }
  .hero, .sub-hero, .case-hero { min-height: auto; padding-top: 5rem; padding-bottom: 5rem; }
  .benefits, .principle-grid, .case-grid, .stage-grid, .three, .outcome-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .explain-head, .split, .evidence, .contact-band { grid-template-columns: 1fr; }
  .payoff { display: block; }
  .payoff .button { margin-top: 1rem; }
  footer { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 480px) {
  .brand { font-size: 1.05rem; }
  .navcta { padding: .58rem .75rem; }
  .actions { flex-direction: column; align-items: flex-start; }
  .brain-labels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .case-card { transition: none; } }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 4px; }