:root {
  --forest-green: #1A3B2E;
  --saas-gold: #C9A24A;
  --slate-grey: #6B6F72;
  --soft-white: #F7F7F7;
  --white: #FFFFFF;
  --sage: #E3EBE3;
  --light-gold: #F4E6C1;
  --soft-grey: #E6E8EA;
  --charcoal: #1E1F21;
  --dark-canvas: #0D1F19;
  --dark-panel: #13241D;
  --hairline: #E2E6E2;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-soft: 0 24px 70px rgba(13, 31, 25, .12);
  --shadow-tight: 0 14px 34px rgba(13, 31, 25, .10);
  --orbit-scroll: 0;
  --orbit-bg-opacity: 0;
  --orbit-bg-soft-opacity: 0;
  --orbit-bg-y: 0px;
  --orbit-ring-grow-x: 0px;
  --orbit-ring-grow-y: 0px;
  --orbit-core-opacity: 1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--charcoal);
  background:
    linear-gradient(90deg, rgba(26, 59, 46, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(26, 59, 46, .028) 1px, transparent 1px),
    #edefec;
  background-size: 68px 68px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(920px 420px at 78% 0%, rgba(201, 162, 74, .14), transparent 70%),
    radial-gradient(760px 460px at 0% 24%, rgba(227, 235, 227, .62), transparent 72%);
}

::selection {
  background: var(--saas-gold);
  color: var(--charcoal);
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  padding: 0;
}

nav {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(226, 230, 226, .9);
  background: rgba(247, 247, 247, .96);
}

.nav-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.logo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo a::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 9 L43 18 L24 27 L5 18 Z' fill='%231A3B2E' stroke='%23C9A24A' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13 22 V31 C13 31 17 35 24 35 C31 35 35 31 35 31 V22' stroke='%23C9A24A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M43 18 V27' stroke='%23C9A24A' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='43' cy='29' r='2.2' fill='%23C9A24A'/%3E%3Cpath d='M38 7 l1.3 2.7 L42 11 l-2.7 1.3 L38 15 l-1.3-2.7 L34 11 l2.7-1.3 Z' fill='%23C9A24A'/%3E%3C/svg%3E");
}

.logo-main {
  display: block;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: .95;
}

.logo .tick {
  color: var(--saas-gold);
}

.logo-sub {
  display: block;
  margin-top: 6px;
  color: var(--slate-grey);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.6px;
  line-height: 1;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(30, 31, 33, .72);
  font-size: 13px;
  font-weight: 700;
}

.nav-links a {
  transition: color .18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  color: var(--forest-green);
}

.nav-cta,
.btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.nav-cta {
  padding: 12px 18px;
  background: var(--forest-green);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(26, 59, 46, .16);
}

.btn {
  padding: 15px 22px;
}

.btn-solid {
  background: var(--forest-green);
  color: var(--white);
  box-shadow: var(--shadow-tight);
}

.btn-ghost {
  background: var(--white);
  border-color: rgba(107, 111, 114, .45);
  color: var(--forest-green);
}

.nav-cta:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(13, 31, 25, .14);
}

a:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(201, 162, 74, .58);
  outline-offset: 4px;
}

header {
  position: relative;
  overflow: hidden;
  padding: 78px 0 54px;
  background:
    radial-gradient(560px 300px at 76% 48%, rgba(244, 230, 193, .72), transparent 70%),
    linear-gradient(180deg, rgba(247, 247, 247, .74), rgba(247, 247, 247, .28));
  border-bottom: 1px solid rgba(226, 230, 226, .9);
}

header::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: max(-40px, calc((100vw - 1180px) / 2 - 30px));
  top: 36px;
  width: 340px;
  height: 340px;
  opacity: .5;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%3E%3Cg%20stroke%3D%27%23C9A24A%27%20stroke-dasharray%3D%272%207%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2744%27%20opacity%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2776%27%20opacity%3D%27.58%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27108%27%20opacity%3D%27.4%27%2F%3E%3C%2Fg%3E%3Crect%20x%3D%27104%27%20y%3D%27104%27%20width%3D%2732%27%20height%3D%2732%27%20rx%3D%279%27%20fill%3D%27%231A3B2E%27%2F%3E%3Cpath%20d%3D%27M120%20112%20l3%207%207%203%20-7%203%20-3%207%20-3-7%20-7-3%207-3%20Z%27%20fill%3D%27%23C9A24A%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2744%27%20r%3D%276%27%20fill%3D%27%231A3B2E%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23C9A24A%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27196%27%20r%3D%276%27%20fill%3D%27%231A3B2E%27%2F%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%27120%27%20r%3D%275.5%27%20fill%3D%27%23C9A24A%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: radial-gradient(circle at 58% 42%, #000 52%, transparent 78%);
  mask-image: radial-gradient(circle at 58% 42%, #000 52%, transparent 78%);
}

header > .wrap {
  position: relative;
  z-index: 1;
}

.kicker,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--saas-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.kicker::before,
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--saas-gold);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--forest-green);
  font-family: var(--serif);
  line-height: 1.04;
}

h1 {
  position: relative;
  max-width: 13.8ch;
  font-size: clamp(42px, 6.2vw, 74px);
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 em,
h2 em {
  color: var(--saas-gold);
  font-style: normal;
}

p {
  margin: 0;
}

.hero-sub {
  position: relative;
  max-width: 660px;
  margin-top: 24px;
  color: #38413d;
  font-size: 18px;
}

.hero-sub strong,
.lead b,
.note b {
  color: var(--forest-green);
  font-weight: 800;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .68s cubic-bezier(.2, .7, .2, 1) forwards;
}

.d1 { animation-delay: .04s; }
.d2 { animation-delay: .12s; }
.d3 { animation-delay: .2s; }
.d4 { animation-delay: .28s; }
.d5 { animation-delay: .36s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.stats {
  border-bottom: 1px solid var(--hairline);
  background: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  min-height: 116px;
  padding: 24px 22px;
  border-right: 1px solid var(--hairline);
}

.stat:last-child {
  border-right: 0;
}

.stat b {
  display: block;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.stat b span {
  color: var(--saas-gold);
}

.stat small {
  display: block;
  margin-top: 10px;
  color: var(--slate-grey);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  line-height: 1.4;
  text-transform: uppercase;
}

section {
  padding: 82px 0;
  scroll-margin-top: 32px;
}

section:nth-of-type(even) {
  background: rgba(247, 247, 247, .58);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, max-content);
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}

h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 700;
  max-width: 900px;
}

.sec-num,
.plan-group {
  color: var(--saas-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.lead,
.svc-intro {
  max-width: 820px;
  margin: -8px 0 34px;
  color: var(--slate-grey);
  font-size: 17px;
}

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

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }

.card,
.chip,
.plan,
.how-step,
.modal,
.compcard {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(13, 31, 25, .06);
}

.card {
  position: relative;
  display: flex;
  min-height: 236px;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 74, .6);
  box-shadow: var(--shadow-tight);
}

.card.feature {
  background:
    radial-gradient(480px 260px at 16% 0%, rgba(244, 230, 193, .58), transparent 70%),
    var(--white);
}

.link-card { cursor: pointer; }

.card.more {
  border-style: dashed;
  background: rgba(247, 247, 247, .7);
}

.card .tag,
.modal .tag,
.badge {
  align-self: flex-start;
  color: var(--saas-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

.card .tag,
.modal .tag {
  padding: 0;
  background: transparent;
}

.card h3 {
  font-size: 27px;
  font-weight: 700;
}

.card.feature h3 {
  font-size: 34px;
}

.card p,
.card li,
.plan .feat li,
.buy-list .what {
  color: var(--slate-grey);
  font-size: 14.5px;
}

.card .meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--slate-grey);
  font-size: 12px;
  font-weight: 700;
}

.card .meta b,
.card .meta .ref {
  color: var(--forest-green);
}

.card .go {
  margin-top: auto;
  color: var(--forest-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.svc-list,
.buy-list,
.plan .feat {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-list {
  display: grid;
  gap: 9px;
}

.card.feature .svc-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
}

.svc-list li,
.plan .feat li {
  position: relative;
  padding-left: 18px;
}

.svc-list li::before,
.plan .feat li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--saas-gold);
  font-weight: 800;
}

.card.buy {
  background: var(--forest-green);
  color: var(--white);
}

.card.buy h3,
.card.buy .tag {
  color: var(--white);
}

.card.buy .buy-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.card.buy .buy-list li:first-child {
  padding-top: 0;
}

.card.buy .what {
  color: #d7e3db;
}

.buy-list .price {
  display: block;
  margin-top: 4px;
  color: var(--saas-gold);
  font-size: 13px;
  font-weight: 800;
}

.buy-note,
.note {
  color: var(--slate-grey);
  font-size: 14px;
}

.card.buy .buy-note {
  color: #d7e3db;
}

.how {
  border-block: 1px solid var(--hairline);
  background: rgba(227, 235, 227, .62);
}

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

.how-step {
  padding: 28px;
}

.how-step .n {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--forest-green);
  color: var(--white);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
}

.how-step h4 {
  margin: 0 0 10px;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 24px;
}

.how-step p {
  color: var(--slate-grey);
  font-size: 14.5px;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: var(--white);
  padding: 22px 0;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  animation: scroll 40s linear infinite;
}

.marquee span {
  margin: 0 26px;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
}

.marquee .x {
  color: var(--saas-gold);
  font-family: var(--sans);
  font-size: 14px;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

section.cta {
  background:
    radial-gradient(760px 420px at 100% 20%, rgba(244, 230, 193, .58), transparent 70%),
    var(--forest-green);
  color: var(--white);
}

.cta h2,
.cta h2 em {
  color: var(--white);
}

.cta p {
  max-width: 720px;
  margin: 22px 0 30px;
  color: #d7e3db;
  font-size: 17px;
}

.cta .btn-solid {
  background: var(--white);
  color: var(--forest-green);
}

.cta .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: var(--white);
}

.cta .note {
  color: #d7e3db;
}

section.cta .reveal {
  opacity: 1;
  transform: none;
}

footer {
  padding: 30px 0;
  border-top: 1px solid var(--hairline);
  background: var(--white);
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

footer p,
footer a {
  color: var(--slate-grey);
  font-size: 12px;
  font-weight: 700;
}

footer a:hover {
  color: var(--forest-green);
}

.backlink {
  color: var(--forest-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

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

.chip {
  padding: 20px;
}

.chip b {
  display: block;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.18;
}

.chip span {
  display: block;
  margin-top: 8px;
  color: var(--slate-grey);
  font-size: 13.5px;
}

.flow,
.rules,
.crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.flow {
  margin: 24px 0 18px;
}

.rules {
  margin: 18px 0 24px;
}

.phase,
.rule {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--white);
  color: var(--forest-green);
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 800;
}

.phase .ix {
  margin-right: 8px;
  color: var(--saas-gold);
}

.sep {
  color: var(--saas-gold);
  font-weight: 800;
}

.rule::before {
  content: "\2192";
  margin-right: 8px;
  color: var(--saas-gold);
}

.plan-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
}

.plan-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--saas-gold), transparent);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.plan {
  position: relative;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  padding: 30px;
}

.plan.feature {
  background:
    radial-gradient(520px 300px at 16% 0%, rgba(244, 230, 193, .68), transparent 70%),
    var(--white);
  border-color: rgba(201, 162, 74, .45);
}

.plan .badge {
  position: absolute;
  top: -12px;
  left: 28px;
  border-radius: 999px;
  background: var(--saas-gold);
  color: var(--charcoal);
  padding: 6px 11px;
}

.plan .pname {
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
}

.plan .ptag {
  min-height: 44px;
  margin-top: 8px;
  color: var(--slate-grey);
}

.plan .price {
  margin-top: 18px;
  color: var(--forest-green);
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 700;
}

.plan .price .per,
.plan .price .from {
  color: var(--slate-grey);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
}

.plan .feat {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.plan .btn {
  margin-top: auto;
}

.price-note {
  margin-top: 18px;
  color: var(--slate-grey);
  font-size: 13px;
}

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

.bar {
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) 56px;
  gap: 16px;
  align-items: center;
}

.bar .bname,
.bar .bv {
  color: var(--forest-green);
  font-size: 13px;
  font-weight: 800;
}

.bar .track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft-grey);
}

.bar .fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--saas-gold);
  transition: width 1s cubic-bezier(.2, .7, .2, 1);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 64px 20px;
  background: rgba(13, 31, 25, .72);
  backdrop-filter: blur(8px);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  position: relative;
  max-width: 780px;
  width: 100%;
  padding: 44px;
}

.modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--saas-gold);
}

.modal h3 {
  margin-top: 12px;
  font-size: 40px;
}

.modal .sub,
.modal p,
.modal .stack-line {
  color: var(--slate-grey);
}

.modal h5 {
  margin: 24px 0 8px;
  color: var(--forest-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.modal .foryou {
  margin-top: 22px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 74, .45);
  background: var(--light-gold);
  padding: 18px;
}

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

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--white);
  color: var(--forest-green);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.open-hint {
  margin-top: auto;
  color: var(--saas-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.reveal.on {
  opacity: 1;
  transform: none;
}

@media (min-width: 1061px) {
  .grid > .card.span-4,
  .grid > .link-card.span-4 {
    text-align: center;
  }

  .grid > .card.span-4 .tag,
  .grid > .link-card.span-4 .tag,
  .grid > .card.span-4 .go,
  .grid > .link-card.span-4 .go {
    align-self: center;
    text-align: center;
  }

  .grid > .card.span-4 .meta,
  .grid > .link-card.span-4 .meta {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 880px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 1060px) {
  .span-4,
  .span-6,
  .span-8 {
    grid-column: span 12;
  }

  .chips,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-grid,
  .plans,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .plan {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .wrap {
    width: min(100% - 32px, 1180px);
  }

  .nav-inner {
    min-height: 74px;
    align-items: center;
    gap: 12px;
  }

  .logo a::before {
    width: 34px;
    height: 34px;
  }

  .logo-main {
    font-size: 19px;
  }

  .logo-sub {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .nav-cta {
    max-width: 136px;
    padding: 10px 12px;
    text-align: center;
  }

  header {
    padding: 64px 0 52px;
  }

  .hero-copy,
  .hero-sub,
  .lead,
  .svc-intro,
  .sec-head,
  .sec-num,
  .card,
  .plan,
  .how-step,
  .modal,
  .stat,
  .cta,
  footer {
    text-align: center;
  }

  header::before {
    right: -220px;
    opacity: .24;
  }

  h1 {
    max-width: 11ch;
    font-size: clamp(40px, 12vw, 54px);
    margin-inline: auto;
  }

  .hero-sub,
  .lead,
  .svc-intro {
    font-size: 16px;
    margin-inline: auto;
  }

  .hero-actions,
  .cta .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  section {
    padding: 56px 0;
    scroll-margin-top: 18px;
  }

  .sec-head {
    display: block;
    margin-bottom: 20px;
  }

  .sec-num {
    display: block;
    margin-top: 10px;
  }

  .lead,
  .svc-intro {
    margin-top: 0;
    margin-bottom: 28px;
    line-height: 1.68;
  }

  .stats-grid,
  .chips {
    grid-template-columns: 1fr;
  }

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    place-items: center;
  }

  .stat:last-child {
    border-bottom: 0;
  }

  .grid {
    gap: 14px;
  }

  .card,
  .plan,
  .how-step,
  .modal {
    align-items: center;
    padding: 22px;
  }

  .card .tag,
  .modal .tag,
  .badge,
  .card .go,
  .card .meta {
    align-self: center;
    text-align: center;
  }

  .card .meta {
    width: 100%;
  }

  .svc-list,
  .buy-list,
  .plan .feat {
    justify-items: center;
    text-align: center;
  }

  .card.feature .svc-list {
    grid-template-columns: 1fr;
  }

  .flow {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 380px);
    margin: 24px auto 18px;
    gap: 10px;
  }

  .flow .sep {
    display: none;
  }

  .phase,
  .rule {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    padding: 12px 16px;
    white-space: normal;
  }

  .phase .ix {
    margin-right: 10px;
  }

  .rules {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 380px);
    margin: 18px auto 24px;
    gap: 10px;
  }

  .rule::before {
    position: static;
    margin-right: 10px;
  }

  .bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .foot-inner {
    align-items: center;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
   ORBITAL SIGNATURE — homepage hero focal visual
   ============================================================ */
header.home {
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 60px;
}
header.home::before { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 44px;
  align-items: center;
}
.hero-copy { min-width: 0; max-width: 660px; }
.hero-copy .hero-sub { max-width: 600px; }

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.orbital { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.orbital .orbit-rings { transform-box: view-box; transform-origin: 210px 210px; animation: orbit-spin 90s linear infinite; }
.orbital .spark { transform-box: fill-box; transform-origin: center; animation: orbit-twinkle 6s ease-in-out infinite; }
.orbital .node { transform-box: fill-box; transform-origin: center; animation: orbit-float 7s ease-in-out infinite; }
.orbital .node.n2 { animation-delay: .9s; }
.orbital .node.n3 { animation-delay: 1.8s; }
.orbital .node.n4 { animation-delay: 2.7s; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .5; transform: scale(.86); } }
@keyframes orbit-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================================
   OPERATING STACK ORBIT — homepage hero (logo nodes)
   ============================================================ */
.hero-visual.stack-orbit { display: block; width: 100%; max-width: 520px; margin-inline: auto; }

.orbit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: size;
  --ring-sm: 46cqmin;
  --ring-md: 66cqmin;
  --ring-lg: 86cqmin;
}

.orbit-glow {
  position: absolute;
  top: 47%; left: 50%;
  width: 64%; height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 230, 193, .72), rgba(244, 230, 193, 0) 68%);
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(201, 162, 74, .55);
}
.orbit-ring.ring-sm { width: var(--ring-sm); height: var(--ring-sm); opacity: .85; animation: ring-spin 64s linear infinite; }
.orbit-ring.ring-md { width: var(--ring-md); height: var(--ring-md); opacity: .6; animation: ring-spin 120s linear infinite reverse; }
.orbit-ring.ring-lg { width: var(--ring-lg); height: var(--ring-lg); opacity: .42; animation: ring-spin 180s linear infinite; }

.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(104px, 30cqmin, 140px);
  height: clamp(104px, 30cqmin, 140px);
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 12px;
  text-align: center;
  border-radius: 50%;
  background: var(--forest-green);
  color: var(--white);
  border: 1.5px solid rgba(201, 162, 74, .5);
  box-shadow: 0 20px 44px rgba(13, 31, 25, .3);
}
.orbit-core .core-mark { font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 6.4cqmin, 27px); line-height: 1; }
.orbit-core .core-name { font-size: clamp(9px, 2.6cqmin, 11px); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--saas-gold); }

.orbit-node-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: rotate(var(--a)) translate(0, calc(-1 * var(--r)));
  animation: node-orbit 28s linear infinite;
}
.orbit-inner { --r: calc(var(--ring-sm) / 2); }
.orbit-mid   { --r: calc(var(--ring-md) / 2); }
.orbit-outer { --r: calc(var(--ring-lg) / 2); }

.stack-node {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  display: grid;
  justify-items: center;
  gap: 7px;
  width: max-content;
  animation: node-upright 28s linear infinite;
}
.stack-node img {
  width: clamp(40px, 12cqmin, 58px);
  height: clamp(40px, 12cqmin, 58px);
  object-fit: contain;
  padding: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 26px rgba(13, 31, 25, .12);
}
.stack-node figcaption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes node-orbit {
  from { transform: rotate(var(--a)) translate(0, calc(-1 * var(--r))); }
  to   { transform: rotate(calc(var(--a) + 360deg)) translate(0, calc(-1 * var(--r))); }
}
@keyframes node-upright {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to   { transform: translate(-50%, -50%) rotate(calc((-1 * var(--a)) - 360deg)); }
}

@media (max-width: 920px) {
  .hero-visual.stack-orbit { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .orbit-node-wrap, .stack-node { animation: none; }
}

/* Repaired solar-system scroll polish. */
header.home {
  position: relative;
  z-index: auto;
  overflow: visible;
}

.hero-grid {
  position: relative;
  /* Reserve the orbit's height so pinning it (position:fixed) can't collapse
     the hero and jump the page content. */
  min-height: clamp(390px, 42vw, 560px);
}

.hero-visual.stack-orbit {
  width: 100%;
  max-width: 560px;
  min-height: clamp(390px, 42vw, 560px);
  margin-inline: auto;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
}

.hero-visual.stack-orbit.is-pinned {
  position: fixed;
  top: clamp(96px, 12vh, 138px);
  right: max(28px, calc((100vw - 1180px) / 2));
  z-index: 1;
  width: clamp(390px, 42vw, 560px);
  max-width: none;
  min-height: 0;
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-visual.stack-orbit .orbit-stage {
  width: clamp(390px, 42vw, 560px);
  max-width: 100%;
  margin-inline: auto;
  --ring-sm: 43cqmin;
  --ring-md: 64cqmin;
  --ring-lg: 84cqmin;
  opacity: var(--orbit-stage-opacity, 1);
  transform: scale(var(--orbit-stage-scale, 1));
  transform-origin: center;
  transition: transform .06s linear, opacity .06s linear;
  will-change: transform;
  overflow: visible;
}

.hero-visual.stack-orbit .orbit-stage::before {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .58;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .95) 0 1.5px, transparent 2px),
    radial-gradient(circle at 68% 16%, rgba(201, 162, 74, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 66%, rgba(26, 59, 46, .34) 0 1.4px, transparent 2px),
    radial-gradient(circle at 30% 78%, rgba(201, 162, 74, .46) 0 1px, transparent 2px);
}

.hero-visual.stack-orbit .orbit-ring {
  border-color: rgba(201, 162, 74, .42);
}

.hero-visual.stack-orbit .ring-sm {
  border-style: dashed;
  animation-duration: var(--orbit-ring-sm-speed, 70s);
}

.hero-visual.stack-orbit .ring-md {
  border-color: rgba(26, 59, 46, .16);
  animation-duration: var(--orbit-ring-md-speed, 116s);
}

.hero-visual.stack-orbit .ring-lg {
  border-color: rgba(201, 162, 74, .25);
  animation-duration: var(--orbit-ring-lg-speed, 168s);
}

.hero-visual.stack-orbit .orbit-core {
  width: clamp(110px, 28cqmin, 146px);
  height: clamp(110px, 28cqmin, 146px);
  gap: 5px;
}

.hero-visual.stack-orbit .core-mark {
  display: block;
  font-size: clamp(22px, 6cqmin, 30px);
  white-space: nowrap;
}

.hero-visual.stack-orbit .core-name {
  display: block;
  margin-top: 1px;
  letter-spacing: 1.8px;
}

.hero-visual.stack-orbit .orbit-node-wrap,
.hero-visual.stack-orbit .stack-node {
  animation-duration: var(--orbit-node-speed, 44s);
  backface-visibility: hidden;
}

.hero-visual.stack-orbit.is-spinning {
  --orbit-node-speed: 5.2s;
  --orbit-ring-sm-speed: 6.4s;
  --orbit-ring-md-speed: 8.2s;
  --orbit-ring-lg-speed: 10.8s;
}

.hero-visual.stack-orbit.is-pinned.is-spinning {
  --orbit-node-speed: 4.6s;
  --orbit-ring-sm-speed: 5.6s;
  --orbit-ring-md-speed: 7.4s;
  --orbit-ring-lg-speed: 9.6s;
}

.hero-visual.stack-orbit.is-pinned .orbit-ring,
.hero-visual.stack-orbit.is-pinned .orbit-node-wrap,
.hero-visual.stack-orbit.is-pinned .stack-node {
  animation-play-state: running;
}

.hero-visual.stack-orbit.is-scattered .orbit-node-wrap {
  z-index: 4;
  animation: none;
  transform: translate3d(var(--scatter-x, 0px), var(--scatter-y, 0px), 0) scale(var(--scatter-scale, 1));
  transition: transform .12s linear;
}

.hero-visual.stack-orbit.is-scattered .stack-node {
  animation: none;
  transform: translate(-50%, -50%);
  opacity: var(--scatter-opacity, .86);
  transition: transform .12s linear, opacity .18s ease;
}

/* Keep the original solar-system memory alive as a faint moving background
   while the logos scatter into a looser constellation. */
.hero-visual.stack-orbit.is-scattered .orbit-ring {
  opacity: var(--orbit-ring-opacity, .18);
  transition: opacity .35s ease;
}

.hero-visual.stack-orbit.is-scattered .orbit-core {
  opacity: var(--orbit-core-opacity, .08);
  transition: opacity .35s ease;
}

.hero-visual.stack-orbit.is-scattered .orbit-glow,
.hero-visual.stack-orbit.is-scattered .orbit-stage::before {
  opacity: var(--orbit-star-opacity, .14);
  transition: opacity .35s ease;
}

/* Scattered logos shrink a touch so they drift like chips, not buttons. */
.hero-visual.stack-orbit.is-scattered .stack-node img {
  width: 44px;
  height: 44px;
  padding: 9px;
  transition: width .3s ease, height .3s ease;
}

.hero-visual.stack-orbit.is-scattered:not(.is-scrolling) .stack-node img {
  animation: orbit-idle-float var(--idle-duration, 5.6s) ease-in-out infinite;
  animation-delay: var(--idle-delay, 0s);
}

@keyframes orbit-idle-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(var(--idle-x, 4px), var(--idle-y, -5px), 0) rotate(var(--idle-rotate, 1deg));
  }
}

.hero-visual.stack-orbit .stack-node img {
  width: clamp(45px, 11cqmin, 60px);
  height: clamp(45px, 11cqmin, 60px);
  padding: 11px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px rgba(13, 31, 25, .14);
}

.hero-visual.stack-orbit .stack-node figcaption {
  display: none !important;
}

.stats,
section,
.marquee,
footer {
  position: relative;
}

.stats > .wrap,
section > .wrap,
.marquee-track,
footer > .wrap {
  position: relative;
  z-index: 2;
}

#offerings::before,
#work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--orbit-bg-opacity, 0);
  background:
    radial-gradient(680px 360px at 80% 8%, rgba(201, 162, 74, .13), transparent 72%),
    radial-gradient(600px 360px at 16% 74%, rgba(26, 59, 46, .07), transparent 70%);
}

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual.stack-orbit {
    max-width: 420px;
    min-height: min(84vw, 420px);
    order: -1;
  }

  .hero-visual.stack-orbit .orbit-stage {
    width: min(84vw, 420px);
  }

  .hero-visual.stack-orbit.is-pinned .orbit-stage {
    width: 100%;
  }

  .hero-visual.stack-orbit.is-pinned {
    top: 92px;
    right: 8vw;
    width: min(84vw, 420px);
  }
}

@media (max-width: 560px) {
  .hero-visual.stack-orbit .stack-node img {
    width: clamp(39px, 12cqmin, 50px);
    height: clamp(39px, 12cqmin, 50px);
    padding: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual.stack-orbit .orbit-stage {
    transition: none;
  }

  .hero-visual.stack-orbit.is-scattered .stack-node img {
    animation: none;
  }
}