:root {
  --future-ink: #0b1518;
  --future-panel: #111d20;
  --future-muted: #667174;
  --future-green: #20bd90;
  --future-blue: #4b78ef;
  --future-lime: #c9f36b;
  --future-paper: #f5f7f2;
}

body[data-page="product"] {
  background:
    radial-gradient(circle at 82% 4%, rgba(75,120,239,.13), transparent 31%),
    radial-gradient(circle at 8% 12%, rgba(32,189,144,.13), transparent 30%),
    var(--paper);
}

.future-hero {
  min-height: 820px;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 72px;
  align-items: center;
  padding-block: 86px 110px;
}
.future-copy { max-width: 680px; }
.future-copy h1 {
  margin: 0;
  font-size: clamp(58px,6.5vw,94px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 600;
}
.future-copy h1 em {
  display: block;
  font-style: normal;
  background: linear-gradient(105deg,#079f76,#4a75ed 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.future-copy .hero-lede { max-width: 640px; }
.future-copy .eyebrow { color: #0d745a; }

.future-stage {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 38px 110px rgba(12,27,32,.15);
}
.future-stage::before,
.future-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.future-stage::before {
  width: 260px;
  height: 260px;
  right: -70px;
  top: -80px;
  background: radial-gradient(circle,rgba(75,120,239,.2),transparent 70%);
}
.future-stage::after {
  width: 220px;
  height: 220px;
  left: -55px;
  bottom: -75px;
  background: radial-gradient(circle,rgba(32,189,144,.18),transparent 70%);
}

.micca-shell {
  position: relative;
  display: grid;
  grid-template-columns: 164px minmax(0,1fr);
  min-height: 550px;
  overflow: hidden;
  border: 1px solid rgba(11,21,24,.15);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(11,21,24,.13);
}
.micca-rail {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: #f5f7f3;
}
.micca-new {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 11px;
  background: var(--future-ink);
  color: #fff;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
}
.micca-rail-label {
  margin: 24px 8px 9px;
  color: #9aa29f;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.micca-rail a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 9px;
  color: #697370;
  font-size: 8px;
  font-weight: 700;
}
.micca-rail a.active { color: #fff; background: var(--future-ink); }
.micca-dot { width: 7px; height: 7px; border-radius: 50%; background: #aab1ae; }
.micca-rail a.active .micca-dot { background: #65ddb9; }
.micca-main { display: flex; min-width: 0; flex-direction: column; }
.micca-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.micca-title { display: flex; align-items: center; gap: 9px; }
.micca-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg,var(--future-green),var(--future-blue));
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.micca-title strong { display: block; font-size: 10px; }
.micca-title span { display: block; margin-top: 2px; color: #9aa29f; font-size: 7px; }
.micca-preview {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #7d8683;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.micca-content { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 30px; }
.micca-content small { color: #0a8463; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.micca-content h2 { margin: 11px 0 8px; max-width: 450px; font-size: 28px; line-height: 1.12; }
.micca-content > p { margin: 0; color: #7d8784; font-size: 9px; line-height: 1.6; }
.micca-question-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 22px; }
.micca-question {
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
}
.micca-question b { display: block; color: #9aa19f; font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
.micca-question span { display: block; margin-top: 7px; color: #303a3c; font-size: 8px; line-height: 1.45; font-weight: 700; }
.micca-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 8px 8px 8px 13px;
  border: 1px solid #ccd2cf;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(11,21,24,.08);
}
.micca-input span { flex: 1; color: #a2aaa7; font-size: 8px; }
.micca-input i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--future-ink); color: #fff; font-style: normal; font-size: 11px; }

.breakthrough-band {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  color: #fff;
  background: var(--future-ink);
}
.breakthrough-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom,transparent,black 22%,black 78%,transparent);
}
.breakthrough-grid { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 94px; align-items: center; }
.breakthrough-copy h2 { margin: 0; font-size: clamp(48px,5.8vw,78px); line-height: 1.02; letter-spacing: -.055em; }
.breakthrough-copy h2 span { color: var(--future-lime); }
.breakthrough-copy p { margin: 26px 0 0; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.75; }
.breakthrough-loop { position: relative; min-height: 470px; }
.loop-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.loop-orbit::before,
.loop-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.loop-orbit::before { inset: 54px; }
.loop-orbit::after { inset: 112px; }
.loop-center {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: linear-gradient(135deg,rgba(32,189,144,.25),rgba(75,120,239,.25));
  box-shadow: 0 0 70px rgba(58,174,182,.25);
  text-align: center;
}
.loop-center strong { font-size: 22px; }
.loop-center span { display: block; margin-top: 4px; color: rgba(255,255,255,.6); font-size: 8px; }
.loop-node {
  position: absolute;
  width: 148px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}
.loop-node b { display: block; color: #fff; font-size: 10px; }
.loop-node span { display: block; margin-top: 4px; color: rgba(255,255,255,.56); font-size: 7px; line-height: 1.45; }
.loop-node.n1 { left: 0; top: 27px; }
.loop-node.n2 { right: 0; top: 31px; }
.loop-node.n3 { right: -5px; bottom: 33px; }
.loop-node.n4 { left: -4px; bottom: 31px; }
.loop-node.n5 { left: 50%; top: -8px; transform: translateX(-50%); }
.loop-node.n6 { left: 50%; bottom: -8px; transform: translateX(-50%); }

.product-intro {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 56px;
}
.product-intro h2 { margin: 0; font-size: clamp(46px,5.4vw,72px); letter-spacing: -.05em; }
.product-intro > p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.cycle-toggle {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #eef1ec;
}
.cycle-toggle button {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cycle-toggle button.active { background: #fff; color: var(--future-ink); box-shadow: 0 5px 15px rgba(10,25,30,.08); }
.cycle-panel { display: none; margin-top: 28px; }
.cycle-panel.active { display: block; }
.cycle-canvas {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 31px;
  background: #edf1ec;
}
.cycle-head {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 55px;
  align-items: end;
  padding: 48px 52px;
  border-bottom: 1px solid var(--line);
}
.cycle-head h3 { margin: 0; font-size: 37px; }
.cycle-head p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.cycle-steps { display: grid; grid-template-columns: repeat(4,1fr); }
.cycle-step {
  position: relative;
  min-height: 260px;
  padding: 27px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.36);
}
.cycle-step:nth-child(4n) { border-right: 0; }
.cycle-step:nth-last-child(-n+4) { border-bottom: 0; }
.cycle-step::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 48px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f4f6f2;
  color: #9aa29f;
  font-size: 8px;
}
.cycle-step:nth-child(4n)::after,
.cycle-step:last-child::after { display: none; }
.product-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff;
  color: #55605d;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.product-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--future-green); }
.product-chip.developing::before { background: #e4a43c; }
.product-chip.future::before { background: var(--future-blue); }
.cycle-step h4 { margin: 55px 0 10px; font-size: 22px; }
.cycle-step p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.cycle-step small { display: block; margin-top: 17px; color: #939c99; font-size: 8px; line-height: 1.5; }

.product-constellation { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.product-card {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.72);
}
.product-card.dark { color: #fff; background: var(--future-panel); }
.product-card.green { background: #e4f5ed; }
.product-card.blue { background: #e8eefc; }
.product-card.warm { background: #f1e9dc; }
.product-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.product-card-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.product-status { padding: 6px 8px; border: 1px solid rgba(12,25,30,.1); border-radius: 999px; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.product-card.dark .product-status { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.65); }
.product-card h3 { margin: auto 0 13px; max-width: 360px; font-size: 31px; line-height: 1.12; }
.product-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.product-card.dark p { color: rgba(255,255,255,.63); }
.product-mini-ui { margin-top: 25px; padding: 14px; border: 1px solid rgba(12,25,30,.1); border-radius: 16px; background: rgba(255,255,255,.55); }
.product-card.dark .product-mini-ui { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.mini-line { height: 7px; margin: 7px 0; border-radius: 99px; background: rgba(12,25,30,.1); }
.product-card.dark .mini-line { background: rgba(255,255,255,.11); }
.mini-line.w80 { width: 80%; }
.mini-line.w63 { width: 63%; }
.mini-line.w45 { width: 45%; }
.mini-metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.mini-metric { min-height: 48px; padding: 9px; border-radius: 9px; background: rgba(255,255,255,.65); }
.product-card.dark .mini-metric { background: rgba(255,255,255,.07); }
.mini-metric b { display: block; font-size: 11px; }
.mini-metric span { display: block; margin-top: 3px; color: #88918e; font-size: 6px; }

.impact-section { color: #fff; background: var(--future-ink); }
.impact-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }
.impact-copy { position: sticky; top: 120px; }
.impact-copy h2 { margin: 0; font-size: clamp(48px,5.6vw,76px); line-height: 1.03; letter-spacing: -.055em; }
.impact-copy p { color: rgba(255,255,255,.63); font-size: 16px; line-height: 1.75; }
.impact-cards { display: grid; gap: 14px; }
.impact-card {
  min-height: 180px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  align-items: center;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(255,255,255,.055);
}
.impact-number { font: 600 56px/1 Manrope,sans-serif; color: var(--future-lime); letter-spacing: -.05em; }
.impact-card h3 { margin: 0; font-size: 23px; }
.impact-card p { margin: 9px 0 0; color: rgba(255,255,255,.59); font-size: 12px; line-height: 1.65; }

.future-cta {
  padding: 94px 70px;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 20% 30%,rgba(32,189,144,.28),transparent 32%),
    radial-gradient(circle at 82% 20%,rgba(75,120,239,.3),transparent 35%),
    var(--future-ink);
}
.future-cta h2 { max-width: 1000px; margin: 0 auto; font-size: clamp(48px,6vw,80px); line-height: 1.02; letter-spacing: -.055em; }
.future-cta p { max-width: 740px; margin: 25px auto 0; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.7; }
.future-cta .cta-actions { margin-top: 34px; }

/* Audience-page injections */
.audience-product-rail,
.audience-impact-insert { padding-block: 74px; }
.audience-product-heading {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 38px;
}
.audience-product-heading h2 { margin: 0; font-size: clamp(39px,4.8vw,62px); letter-spacing: -.045em; }
.audience-product-heading p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.audience-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.audience-product {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: rgba(255,255,255,.7);
}
.audience-product:nth-child(2),
.audience-product:nth-child(5) { background: #e8f4ee; }
.audience-product:nth-child(3),
.audience-product:nth-child(6) { background: #e9eefb; }
.audience-product b { color: #7d8784; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.audience-product h3 { margin: 72px 0 10px; font-size: 24px; }
.audience-product p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.audience-impact-box {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 60px;
  padding: 55px;
  border-radius: 29px;
  color: #fff;
  background: var(--future-ink);
}
.audience-impact-box h2 { margin: 0; font-size: clamp(39px,4.8vw,62px); }
.audience-impact-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.audience-impact-item { padding: 21px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.055); }
.audience-impact-item strong { display: block; font-size: 15px; }
.audience-impact-item p { margin: 8px 0 0; color: rgba(255,255,255,.6); font-size: 10px; line-height: 1.55; }

@media (max-width: 1100px) {
  .future-hero,
  .breakthrough-grid,
  .product-intro,
  .impact-grid,
  .audience-product-heading,
  .audience-impact-box { grid-template-columns: 1fr; gap: 46px; }
  .future-stage { max-width: 850px; width: 100%; margin-inline: auto; }
  .cycle-steps { grid-template-columns: repeat(2,1fr); }
  .cycle-step:nth-child(2n) { border-right: 0; }
  .cycle-step:nth-child(4n)::after { display: grid; }
  .cycle-step:nth-child(2n)::after { display: none; }
  .cycle-step:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .cycle-step:nth-last-child(-n+2) { border-bottom: 0; }
  .product-constellation,
  .audience-product-grid { grid-template-columns: repeat(2,1fr); }
  .impact-copy { position: static; }
}

@media (max-width: 760px) {
  .future-hero { min-height: auto; padding-block: 56px 75px; gap: 42px; }
  .future-copy h1 { font-size: clamp(51px,15vw,70px); }
  .future-stage { padding: 9px; border-radius: 24px; }
  .micca-shell { grid-template-columns: 1fr; min-height: 590px; }
  .micca-rail { display: none; }
  .micca-content { padding: 24px 18px; }
  .micca-question-grid { grid-template-columns: 1fr; }
  .breakthrough-band { padding: 75px 0; }
  .breakthrough-loop { min-height: 560px; }
  .loop-orbit { width: 300px; height: 300px; }
  .loop-node { width: 128px; }
  .loop-node.n1 { left: 0; top: 65px; }
  .loop-node.n2 { right: 0; top: 65px; }
  .loop-node.n3 { right: 0; bottom: 65px; }
  .loop-node.n4 { left: 0; bottom: 65px; }
  .cycle-head { grid-template-columns: 1fr; gap: 20px; padding: 34px 22px; }
  .cycle-steps,
  .product-constellation,
  .audience-product-grid,
  .audience-impact-list { grid-template-columns: 1fr; }
  .cycle-step { min-height: 235px; border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .cycle-step:last-child { border-bottom: 0 !important; }
  .cycle-step::after { display: none !important; }
  .product-card { min-height: 350px; }
  .impact-card { grid-template-columns: 1fr; }
  .impact-number { font-size: 45px; }
  .future-cta { padding: 68px 22px; }
  .future-cta .cta-actions { flex-direction: column; }
  .audience-product-rail,
  .audience-impact-insert { padding-block: 55px; }
  .audience-impact-box { padding: 38px 22px; }
}