:root{
  --brand: #6B0F1A;
  --brand-2: #8A1623;
  --ink: #172033;
  --muted: #667085;
  --line: #E6E9F0;
  --soft: #F6F7FA;
  --soft-2: #EEF2F7;
  --white: #FFFFFF;
  --green: #1BAE7A;
  --blue: #357ABD;
  --amber: #B7791F;
  --shadow: 0 18px 48px rgba(23,32,51,.10);
  --r8: 8px;
  --r14: 14px;
  --r20: 20px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(107,15,26,.05), transparent 360px),
    var(--white);
}

a{ color: inherit; text-decoration: none; }
button, input, textarea{ font: inherit; }

.siteHeader{
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  min-height: 74px;
  padding: 14px max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(230,233,240,.86);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}

.brand,
.footerBrand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brandMark{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(107,15,26,.20);
}

.brand strong,
.footerBrand strong{
  display: block;
  font-size: 15px;
}

.brand small{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.siteNav{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(246,247,250,.78);
}

.siteNav a{
  padding: 9px 13px;
  border-radius: 999px;
  color: #4C5568;
  font-size: 13px;
  font-weight: 750;
}

.siteNav a:hover,
.siteNav a.is-active{
  color: var(--brand);
  background: #fff;
  box-shadow: 0 8px 18px rgba(23,32,51,.08);
}

.loginButton,
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.loginButton,
.buttonPrimary{
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 26px rgba(107,15,26,.20);
}

.buttonGhost{
  color: var(--brand);
  border-color: rgba(107,15,26,.20);
  background: rgba(107,15,26,.05);
}

.menuToggle{
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.sectionWrap{
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

.hero{
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 46px;
  align-items: center;
  padding: 58px 0 42px;
}

.eyebrow{
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p{ margin-top: 0; }

h1{
  margin-bottom: 18px;
  max-width: 760px;
  font-size: clamp(38px, 6vw, 76px);
  line-height: .98;
  letter-spacing: 0;
}

h2{
  margin-bottom: 12px;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.06;
}

h3{
  margin-bottom: 9px;
  font-size: 18px;
}

.heroText{
  max-width: 690px;
  color: #4C5568;
  font-size: 17px;
  line-height: 1.75;
}

.heroActions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.imageSlot{
  position: relative;
  min-height: 390px;
  display: grid;
  align-content: end;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r20);
  background:
    linear-gradient(135deg, rgba(107,15,26,.10), rgba(53,122,189,.07)),
    repeating-linear-gradient(135deg, rgba(23,32,51,.05) 0 1px, transparent 1px 16px),
    var(--soft);
  padding: 22px;
  box-shadow: var(--shadow);
}

.imageSlot::before{
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(107,15,26,.22);
  border-radius: 16px;
}

.imageSlot span{
  width: fit-content;
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 850;
}

.imageSlot strong,
.imageSlot p{
  position: relative;
  z-index: 1;
}

.imageSlot p{
  color: var(--muted);
  margin-bottom: 0;
}

.proof{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 76px;
}

.proof article,
.infoCard,
.featureItem{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: #fff;
  box-shadow: 0 10px 26px rgba(23,32,51,.06);
}

.proof article{
  padding: 18px;
}

.proof article::before,
.infoCard::before,
.featureItem::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--card-color, var(--brand));
}

.proof article:nth-child(1),
.infoCard:nth-child(1),
.featureItem:nth-child(1){ --card-color: var(--blue); }
.proof article:nth-child(2),
.infoCard:nth-child(2),
.featureItem:nth-child(2){ --card-color: var(--green); }
.proof article:nth-child(3),
.featureItem:nth-child(3){ --card-color: var(--brand); }
.proof article:nth-child(4),
.featureItem:nth-child(4){ --card-color: var(--amber); }

.proof strong,
.proof span{
  display: block;
}

.proof span{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.contentSplit{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.sectionIntro{
  position: sticky;
  top: 104px;
}

.sectionIntro h2,
.featureBand h2,
.contactPanel h2,
.finalCallout h2{
  max-width: 620px;
}

.infoGrid{
  display: grid;
  gap: 14px;
}

.infoCard{
  min-height: 174px;
  padding: 24px;
}

.infoCard p,
.featureBand p,
.contactPanel p,
.finalCallout p{
  color: var(--muted);
  line-height: 1.72;
}

.featureBand{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 34px;
  align-items: start;
  padding: 72px 0;
}

.featureList{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.featureItem{
  min-height: 118px;
  display: grid;
  align-content: space-between;
  padding: 18px;
}

.featureItem span{
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.featureItem strong{
  font-size: 16px;
}

.aboutHero{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 42px;
  align-items: center;
  padding: 64px 0 48px;
}

.aboutHero h1{
  max-width: 820px;
  font-size: clamp(38px, 5.8vw, 68px);
}

.aboutHero__panel{
  display: grid;
  gap: 14px;
}

.aboutImageSlot{
  min-height: 430px;
  box-shadow: var(--shadow);
}

.aboutMetricGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aboutMetricGrid article,
.storyStack article,
.cultureCards article,
.valuesGrid article,
.methodGrid article{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: #fff;
  box-shadow: 0 10px 26px rgba(23,32,51,.06);
}

.aboutMetricGrid article{
  min-height: 112px;
  padding: 18px;
}

.aboutMetricGrid strong{
  display: block;
  color: var(--brand);
  font-size: 30px;
  line-height: 1;
}

.aboutMetricGrid span{
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.aboutStory,
.valuesSection{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.storyStack{
  display: grid;
  gap: 14px;
}

.storyStack article{
  min-height: 150px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px;
}

.storyStack article::before,
.cultureCards article::before,
.valuesGrid article::before,
.methodGrid article::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--card-color, var(--brand));
}

.storyStack article:nth-child(1),
.cultureCards article:nth-child(1),
.valuesGrid article:nth-child(1),
.methodGrid article:nth-child(1){ --card-color: var(--blue); }
.storyStack article:nth-child(2),
.cultureCards article:nth-child(2),
.valuesGrid article:nth-child(2),
.methodGrid article:nth-child(2){ --card-color: var(--green); }
.storyStack article:nth-child(3),
.valuesGrid article:nth-child(3),
.methodGrid article:nth-child(3){ --card-color: var(--brand); }
.valuesGrid article:nth-child(4),
.methodGrid article:nth-child(4){ --card-color: var(--amber); }

.storyStack span,
.valuesGrid span{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(107,15,26,.07);
  font-size: 12px;
  font-weight: 900;
}

.storyStack h3,
.storyStack p{
  grid-column: 2;
}

.storyStack p,
.cultureIntro p,
.cultureCards p,
.valuesGrid p,
.methodSection p,
.methodGrid span{
  color: var(--muted);
  line-height: 1.68;
}

.culturePanel{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r20);
  background:
    linear-gradient(135deg, rgba(107,15,26,.06), rgba(53,122,189,.05)),
    #fff;
  box-shadow: var(--shadow);
}

.cultureCards{
  display: grid;
  gap: 14px;
}

.cultureCards article{
  padding: 22px;
}

.cultureCards span{
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(107,15,26,.07);
  font-size: 12px;
  font-weight: 850;
}

.valuesGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.valuesGrid article{
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
}

.methodSection{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: start;
  padding: 72px 0 34px;
}

.methodGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.methodGrid article{
  min-height: 128px;
  padding: 20px;
}

.methodGrid strong,
.methodGrid span{
  display: block;
}

.methodGrid span{
  margin-top: 8px;
  font-size: 13px;
}

.sgiHero{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: 42px;
  align-items: center;
  padding: 62px 0 48px;
}

.sgiHero h1{
  max-width: 820px;
  font-size: clamp(38px, 5.8vw, 68px);
}

.sgiHero__points{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.sgiHero__points span{
  padding: 8px 12px;
  border: 1px solid rgba(107,15,26,.16);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(107,15,26,.06);
  font-size: 12px;
  font-weight: 850;
}

.sgiSystemCard{
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(107,15,26,.08), rgba(53,122,189,.08)),
    #fff;
  box-shadow: var(--shadow);
  padding: 22px;
}

.systemLabel,
.systemResult{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(78%, 430px);
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 24px rgba(107,15,26,.20);
  font-weight: 850;
  text-align: center;
}

.systemLabel{ top: 24px; }
.systemResult{ bottom: 24px; }

.systemCore{
  position: absolute;
  inset: 50% auto auto 50%;
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  border: 10px solid rgba(107,15,26,.10);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23,32,51,.12);
}

.systemCore span,
.systemCore strong{
  grid-column: 1;
  display: block;
}

.systemCore span{
  color: var(--brand);
  font-size: 22px;
  font-weight: 900;
}

.systemCore strong{
  align-self: start;
  color: var(--muted);
  font-size: 12px;
}

.systemAxis{
  position: absolute;
  top: 50%;
  width: 112px;
  min-height: 230px;
  display: grid;
  align-content: center;
  gap: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(107,15,26,.18);
  background: #fff;
  box-shadow: 0 12px 28px rgba(23,32,51,.10);
  padding: 16px 12px;
  text-align: center;
}

.axisLeft{ left: 24px; }
.axisRight{ right: 24px; }

.systemAxis b{
  color: var(--brand);
  font-size: 13px;
  text-transform: uppercase;
}

.systemAxis small{
  color: var(--muted);
  line-height: 1.35;
}

.sgiModel{
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 36px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.sgiModel__intro p{
  color: var(--muted);
  line-height: 1.72;
}

.sgiOrbit{
  position: relative;
  min-height: 610px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at center, rgba(107,15,26,.08) 0 110px, transparent 112px),
    linear-gradient(135deg, #fff, var(--soft));
  box-shadow: var(--shadow);
}

.orbitCenter{
  position: absolute;
  inset: 50% auto auto 50%;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 8px solid rgba(107,15,26,.12);
  background: #fff;
  text-align: center;
}

.orbitCenter span,
.orbitCenter strong{
  display: block;
}

.orbitCenter span{
  color: var(--brand);
  font-size: 20px;
  font-weight: 900;
}

.orbitCenter strong{
  color: var(--muted);
  font-size: 12px;
}

.orbitNode{
  position: absolute;
  width: 162px;
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 22px;
  border: 1px solid rgba(107,15,26,.16);
  background: #fff;
  box-shadow: 0 12px 28px rgba(23,32,51,.09);
  padding: 14px;
}

.orbitNode span{
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}

.orbitNode strong{
  font-size: 13px;
  line-height: 1.22;
}

.orbitNode--1{ top: 42px; left: calc(50% - 81px); }
.orbitNode--2{ top: 138px; right: 44px; }
.orbitNode--3{ top: 318px; right: 58px; }
.orbitNode--4{ bottom: 44px; right: calc(50% - 206px); }
.orbitNode--5{ bottom: 44px; left: calc(50% - 206px); }
.orbitNode--6{ top: 318px; left: 58px; }
.orbitNode--7{ top: 138px; left: 44px; }

.sgiStages{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.stageRail{
  display: grid;
  gap: 12px;
  counter-reset: stage;
}

.stageStep{
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 116px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23,32,51,.06);
}

.stageStep::before{
  content: "";
  position: absolute;
  left: 46px;
  top: 72px;
  bottom: -14px;
  width: 2px;
  background: linear-gradient(var(--brand), transparent);
  opacity: .25;
}

.stageStep:last-child::before{ display: none; }

.stageStep span{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 12px;
  font-weight: 900;
}

.stageStep p{
  color: var(--muted);
  line-height: 1.6;
}

.sgiOutcomes{
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 34px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(107,15,26,.07), rgba(27,174,122,.06)),
    #fff;
  box-shadow: var(--shadow);
}

.outcomeStrip{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.outcomeStrip article,
.implementationGrid article{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: #fff;
  padding: 18px;
}

.outcomeStrip article::before,
.implementationGrid article::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--card-color, var(--brand));
}

.outcomeStrip article:nth-child(1),
.implementationGrid article:nth-child(1){ --card-color: var(--green); }
.outcomeStrip article:nth-child(2),
.implementationGrid article:nth-child(2){ --card-color: var(--blue); }
.outcomeStrip article:nth-child(3),
.implementationGrid article:nth-child(3){ --card-color: var(--brand); }
.outcomeStrip article:nth-child(4){ --card-color: var(--amber); }

.outcomeStrip strong,
.outcomeStrip span,
.implementationGrid strong,
.implementationGrid span{
  display: block;
}

.outcomeStrip span,
.implementationGrid span{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.sgiImplementation{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: center;
  padding: 72px 0 34px;
}

.sgiImageSlot{
  min-height: 410px;
}

.sgiImplementation p{
  color: var(--muted);
  line-height: 1.72;
}

.implementationGrid{
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.appHero{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  gap: 42px;
  align-items: center;
  padding: 62px 0 48px;
}

.appHero h1{
  max-width: 850px;
  font-size: clamp(38px, 5.8vw, 68px);
}

.appPreview{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
}

.previewTop{
  display: flex;
  gap: 7px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #F9FAFC;
}

.previewTop span{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(107,15,26,.35);
}

.previewLayout{
  display: grid;
  grid-template-columns: 112px 1fr;
  min-height: 430px;
}

.previewLayout aside{
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: #111827;
}

.previewLayout aside b{
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
}

.previewLayout main{
  display: grid;
  gap: 14px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(107,15,26,.04), rgba(53,122,189,.05)),
    #fff;
}

.previewStats,
.previewCards{
  display: grid;
  gap: 10px;
}

.previewStats{
  grid-template-columns: repeat(3, 1fr);
}

.previewStats i,
.previewCards i{
  display: block;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.previewChart{
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, transparent 30%, rgba(107,15,26,.08)),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(23,32,51,.05) 44px 45px),
    #fff;
}

.previewCards{
  grid-template-columns: repeat(4, 1fr);
}

.appPreview p{
  margin: 0;
  padding: 12px 16px 16px;
  color: var(--muted);
  font-size: 12px;
}

.appModules,
.appWorkflow,
.appFeatureMatrix{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.appModuleGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.appModuleGrid article,
.workflowSteps article,
.benefitGrid article,
.featureMatrix span,
.pricingGrid article{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: #fff;
  box-shadow: 0 10px 26px rgba(23,32,51,.06);
}

.appModuleGrid article{
  min-height: 180px;
  padding: 22px;
}

.appModuleGrid article::before,
.workflowSteps article::before,
.benefitGrid article::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--card-color, var(--brand));
}

.appModuleGrid article:nth-child(1),
.workflowSteps article:nth-child(1),
.benefitGrid article:nth-child(1){ --card-color: var(--blue); }
.appModuleGrid article:nth-child(2),
.workflowSteps article:nth-child(2),
.benefitGrid article:nth-child(2){ --card-color: var(--green); }
.appModuleGrid article:nth-child(3),
.workflowSteps article:nth-child(3),
.benefitGrid article:nth-child(3){ --card-color: var(--brand); }
.appModuleGrid article:nth-child(4),
.workflowSteps article:nth-child(4),
.benefitGrid article:nth-child(4){ --card-color: var(--amber); }
.appModuleGrid article:nth-child(5),
.benefitGrid article:nth-child(5){ --card-color: #7C3AED; }
.appModuleGrid article:nth-child(6),
.benefitGrid article:nth-child(6){ --card-color: #0F766E; }

.appModuleGrid span,
.workflowSteps span{
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.appModuleGrid p,
.appWorkflow p,
.benefitGrid span,
.appFeatureMatrix p,
.pricingIntro p{
  color: var(--muted);
  line-height: 1.65;
}

.workflowSteps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.workflowSteps article{
  min-height: 210px;
  padding: 20px;
}

.workflowSteps strong,
.workflowSteps p,
.benefitGrid strong,
.benefitGrid span{
  display: block;
}

.workflowSteps strong{
  margin-top: 18px;
  font-size: 17px;
}

.appBenefits{
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(107,15,26,.06), rgba(27,174,122,.05)),
    #fff;
  box-shadow: var(--shadow);
}

.benefitHeader{
  max-width: 760px;
  margin-bottom: 22px;
}

.benefitGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.benefitGrid article{
  min-height: 138px;
  padding: 18px;
}

.benefitGrid span{
  margin-top: 8px;
  font-size: 13px;
}

.featureMatrix{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.featureMatrix span{
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 13px 14px 13px 40px;
  color: #344054;
  font-size: 13px;
  font-weight: 740;
}

.featureMatrix span::before{
  content: "";
  position: absolute;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand);
}

.pricingSection{
  display: grid;
  gap: 24px;
  padding: 72px 0 34px;
}

.pricingIntro{
  max-width: 760px;
}

.pricingGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pricingGrid article{
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 430px;
  padding: 24px;
}

.pricingGrid article.is-featured{
  border-color: rgba(107,15,26,.28);
  box-shadow: 0 18px 44px rgba(107,15,26,.14);
}

.pricingGrid article > span{
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(107,15,26,.07);
  font-size: 12px;
  font-weight: 850;
}

.pricingGrid strong{
  font-size: 34px;
  line-height: 1;
}

.pricingGrid p{
  color: var(--muted);
  line-height: 1.6;
}

.pricingGrid ul{
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricingGrid li{
  color: #344054;
  font-size: 13px;
}

.pricingGrid li::before{
  content: "•";
  margin-right: 8px;
  color: var(--brand);
}

.contactPanel,
.finalCallout{
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 34px;
  align-items: start;
  margin: 42px auto 80px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r20);
  background: linear-gradient(135deg, #fff, var(--soft));
  box-shadow: var(--shadow);
}

.finalCallout{
  grid-template-columns: 1fr auto;
  align-items: center;
}

.contactForm{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contactForm label{
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 760;
}

.contactForm label:nth-child(4){
  grid-column: 1 / -1;
}

.contactForm input,
.contactForm textarea{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  padding: 12px;
}

.contactForm textarea{
  min-height: 126px;
  resize: vertical;
}

.contactForm .button{
  justify-self: start;
}

.siteFooter{
  display: grid;
  grid-template-columns: minmax(260px, 430px) 1fr;
  gap: 32px;
  align-items: start;
  padding: 34px max(22px, calc((100vw - 1180px) / 2));
  border-top: 1px solid var(--line);
  background: #F9FAFC;
}

.footerBrand p{
  max-width: 420px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.siteFooter nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
}

.siteFooter a{
  color: #4C5568;
  font-size: 13px;
  font-weight: 740;
}

@media (max-width: 980px){
  .siteHeader{
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .menuToggle{ display: inline-grid; place-items: center; }

  .siteNav{
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    justify-self: stretch;
    border-radius: 16px;
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
  }

  .siteHeader.is-open .siteNav{ display: flex; }
  .loginButton{ display: none; }

  .hero,
  .aboutHero,
  .aboutStory,
  .culturePanel,
  .valuesSection,
  .methodSection,
  .sgiHero,
  .sgiModel,
  .sgiStages,
  .sgiOutcomes,
  .sgiImplementation,
  .appHero,
  .appModules,
  .appWorkflow,
  .appFeatureMatrix,
  .contentSplit,
  .featureBand,
  .contactPanel,
  .finalCallout,
  .siteFooter{
    grid-template-columns: 1fr;
  }

  .hero{
    min-height: auto;
    padding-top: 42px;
  }

  .imageSlot{ min-height: 300px; }
  .proof{ grid-template-columns: 1fr 1fr; }
  .sectionIntro{ position: static; }
  .aboutImageSlot{ min-height: 320px; }
  .sgiSystemCard,
  .sgiImageSlot{ min-height: 320px; }
  .appPreview .previewLayout{
    grid-template-columns: 88px 1fr;
  }
  .workflowSteps,
  .benefitGrid,
  .pricingGrid{
    grid-template-columns: 1fr 1fr;
  }
  .sgiOrbit{
    min-height: auto;
    display: grid;
    gap: 12px;
    padding: 18px;
  }
  .orbitCenter,
  .orbitNode{
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: auto;
    transform: none;
  }
  .orbitCenter{
    min-height: 96px;
    border-radius: 18px;
  }
  .orbitNode{
    border-radius: 16px;
  }
  .finalCallout{ align-items: start; }
  .siteFooter nav{ justify-content: flex-start; }
}

@media (max-width: 640px){
  .sectionWrap{ width: min(100% - 28px, 1180px); }
  .siteHeader{ padding: 12px 14px; }
  .brand small{ display: none; }
  .heroActions,
  .contactForm{
    grid-template-columns: 1fr;
  }
  .heroActions .button,
  .contactForm .button,
  .finalCallout .button{
    width: 100%;
  }
  .proof,
  .featureList,
  .aboutMetricGrid,
  .valuesGrid,
  .methodGrid,
  .outcomeStrip{
    grid-template-columns: 1fr;
  }
  .appModuleGrid,
  .workflowSteps,
  .benefitGrid,
  .featureMatrix,
  .pricingGrid{
    grid-template-columns: 1fr;
  }
  .storyStack article{
    grid-template-columns: 1fr;
  }
  .storyStack h3,
  .storyStack p{
    grid-column: auto;
  }
  .contentSplit,
  .featureBand,
  .aboutStory,
  .valuesSection,
  .methodSection,
  .sgiModel,
  .sgiStages,
  .sgiImplementation{
    padding: 46px 0;
  }
  .appModules,
  .appWorkflow,
  .appFeatureMatrix,
  .pricingSection{
    padding: 46px 0;
  }
  .appHero{
    padding: 42px 0 34px;
  }
  .appBenefits{
    padding: 18px;
  }
  .previewLayout{
    grid-template-columns: 1fr;
  }
  .previewLayout aside{
    display: none;
  }
  .previewStats,
  .previewCards{
    grid-template-columns: 1fr;
  }
  .sgiHero{
    padding: 42px 0 34px;
  }
  .sgiOutcomes{
    padding: 18px;
  }
  .sgiSystemCard{
    min-height: 420px;
    padding: 14px;
  }
  .systemLabel,
  .systemResult{
    width: calc(100% - 28px);
    min-height: 38px;
    font-size: 12px;
  }
  .systemCore{
    width: 122px;
    height: 122px;
  }
  .systemAxis{
    width: 96px;
    min-height: 190px;
    padding: 12px 8px;
  }
  .axisLeft{ left: 14px; }
  .axisRight{ right: 14px; }
  .stageStep{
    grid-template-columns: 1fr;
  }
  .stageStep::before{
    display: none;
  }
  .culturePanel{
    padding: 18px;
  }
  .contactPanel,
  .finalCallout{
    margin-bottom: 46px;
    padding: 18px;
  }
}