/* ==========================================================================
   Sections — hero → footer, in page order
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 190px var(--gutter) 90px;
  overflow: hidden;
}

.hero__bg,
.hero__grid,
.hero__orb,
.hero__rings { position: absolute; pointer-events: none; }

.hero__bg {
  inset: -12%;
  background:
    radial-gradient(58% 62% at 22% 28%, rgba(20,117,206,.42) 0%, rgba(0,38,69,0) 62%),
    radial-gradient(52% 58% at 82% 72%, rgba(28,196,233,.26) 0%, rgba(0,23,43,0) 60%);
}
.hero__grid {
  inset: -20%;
  background-image:
    linear-gradient(rgba(28,196,233,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,196,233,.08) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
}
.hero__orb {
  inset-inline-end: -6%;
  top: 12%;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(28,196,233,.30), rgba(0,38,69,0) 66%);
  filter: blur(4px);
  animation: rq-drift 13s ease-in-out infinite;
}
.hero__rings {
  inset-inline-end: 6%;
  top: 20%;
  width: 520px; height: 520px;
}
.hero__rings i {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.hero__rings i:nth-child(1) { inset: 0;   border: 1px solid rgba(28,196,233,.20); animation: rq-pulse 6s ease-in-out infinite; }
.hero__rings i:nth-child(2) { inset: 14%; border: 1px solid rgba(28,196,233,.16); animation: rq-pulse 6s ease-in-out .9s infinite; }
.hero__rings i:nth-child(3) { inset: 28%; border: 1px dashed rgba(28,196,233,.22); animation: rq-spin 34s linear infinite; }
.hero__rings i:nth-child(4) { inset: 44%; border: 1px solid rgba(28,196,233,.34); }

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.32fr .88fr;
  gap: 70px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 30px; }

.pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border: 1px solid rgba(28,196,233,.34);
  border-radius: var(--r-pill);
  align-self: flex-start;
  background: rgba(28,196,233,.07);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--cyan);
  text-transform: uppercase;
  font-weight: 600;
}
.pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  flex: none;
}

.hero__title {
  font-size: clamp(58px, 6.6vw, 110px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(103deg, var(--cyan), var(--royal) 62%, var(--cyan-lt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  font-size: 23px;
  line-height: 1.6;
  color: var(--ink-4);
  max-width: 640px;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.stats {
  display: flex;
  gap: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  flex-wrap: wrap;
}
.stat__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}
.stat__num--magenta { color: var(--magenta); }
.stat__num--lime    { color: var(--lime); }
.stat__label {
  font-size: 14px;
  color: var(--ink-8);
  margin-top: 7px;
  letter-spacing: .04em;
}

/* --- hero case card ------------------------------------------------------- */

.hero__cardwrap { position: relative; perspective: 1400px; }
.casecard {
  position: relative;
  background: var(--card-lift);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-2xl);
  padding: 34px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transform-style: preserve-3d;
  will-change: transform;
}
.casecard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.casecard__kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--cyan);
}
.casecard__dots { display: flex; gap: 6px; }
.casecard__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.casecard__dots i:first-child { background: var(--cyan); }
.casecard__key {
  font-family: var(--mono);
  font-size: 32px;
  color: var(--ink);
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.casecard__sub {
  font-size: 15px;
  color: var(--ink-7);
  margin-bottom: 28px;
}
.casecard__rows { display: flex; flex-direction: column; gap: 14px; }
.crow { display: flex; align-items: center; gap: 14px; }
.crow__box {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(28,196,233,.2);
  border: 1px solid rgba(28,196,233,.5);
  flex: none;
}
.crow__label { font-size: 15px; color: var(--ink-3); flex: 1; }
.crow__time  { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.crow.is-pending .crow__box   { background: var(--wash-strong); border-color: var(--line-strong); }
.crow.is-pending .crow__label { color: var(--ink-7); }
.crow.is-pending .crow__time  { color: var(--ink-10); }
.casecard__sla {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-4);
}
.casecard__sla::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  animation: rq-pulse 2s ease-in-out infinite;
  flex: none;
}

.scrollcue {
  position: absolute;
  bottom: 36px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-10);
  text-transform: uppercase;
}
.scrollcue::after {
  content: '';
  width: 1px; height: 52px;
  background: linear-gradient(var(--cyan), transparent);
}

/* --------------------------------------------------------------------------
   2 · Compliance marquee
   -------------------------------------------------------------------------- */

.marquee {
  padding: 34px 0;
  border-block: 1px solid var(--line-soft);
  background: rgba(255,255,255,.015);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: rq-marquee 34s linear infinite;
}
.marquee__group {
  display: flex;
  gap: 70px;
  padding-inline: 35px;
  align-items: center;
}
.marquee__item {
  font-size: 17px;
  color: var(--ink-9);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__sep { color: var(--steel); }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   3 · Why now
   -------------------------------------------------------------------------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.numcard {
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.numcard__no {
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--royal);
}
.numcard__no--magenta { color: var(--magenta); }
.numcard__no--lime    { color: var(--lime); }
.numcard__title { font-size: 29px; font-weight: 600; color: var(--ink); }
.numcard__body  { font-size: 18px; line-height: 1.65; color: var(--ink-5); }
.card--cyan .numcard__body { color: var(--ink-3); }

.statband {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  padding: 46px 44px;
}
.statband__item { border-inline-end: 1px solid var(--line); padding-inline-end: 30px; }
.statband__item:last-child { border-inline-end: 0; padding-inline-end: 0; }
.statband__num {
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
}
.statband__body {
  font-size: 17px;
  color: var(--ink-5);
  margin-top: 12px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4 · Reporter trust / anonymity dissolve
   -------------------------------------------------------------------------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 80px;
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
}
.split--flip { grid-template-columns: 1.04fr .96fr; gap: 70px; }

.dissolve {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dissolve__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.identity {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  transition: opacity .7s, filter .7s, transform .7s;
}
.identity__avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.2);
}
.identity__name { font-size: 26px; color: var(--ink); }
.identity__meta { font-family: var(--mono); font-size: 15px; color: var(--ink-7); }

.keyseal {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .8s .2s, transform .8s .2s;
}
.keyseal__badge {
  width: 120px; height: 120px;
  border-radius: 26px;
  background: rgba(28,196,233,.12);
  border: 1px solid rgba(28,196,233,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 70px rgba(28,196,233,.34);
}
.lockicon {
  width: 44px; height: 34px;
  border: 3px solid var(--cyan);
  border-radius: 6px;
  position: relative;
}
.lockicon::before {
  content: '';
  position: absolute;
  width: 22px; height: 20px;
  border: 3px solid var(--cyan);
  border-bottom: none;
  border-radius: var(--r-sm) 11px 0 0;
  top: -20px;
  left: 8px;
}
.keyseal__key {
  font-family: var(--mono);
  font-size: 34px;
  color: var(--ink);
  letter-spacing: .08em;
}
.keyseal__label {
  font-size: 16px;
  color: var(--cyan);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stack { display: flex; flex-direction: column; gap: 28px; }
.minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.minicard {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.minicard--cyan { background: var(--cyan-wash); border-color: var(--cyan-edge); }
.minicard__title { font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.minicard__body  { font-size: 16px; line-height: 1.55; color: var(--ink-5); }
.minicard--cyan .minicard__body { color: var(--ink-3); }
.minicard--sm .minicard__title { font-size: 19px; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   5 · Try the intake
   -------------------------------------------------------------------------- */

.tryit { background: linear-gradient(180deg, transparent, rgba(20,117,206,.07), transparent); }
.tryit__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: stretch;
  max-width: 1280px;
  margin-inline: auto;
}
.trypanel {
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trypanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.trypanel__title { font-size: 20px; font-weight: 600; color: var(--ink); }
.badge-anon {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--cyan-wash-2);
  border: 1px solid rgba(28,196,233,.36);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.badge-anon::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}
.trypanel .field__label { font-size: 14px; letter-spacing: .06em; text-transform: none; color: var(--ink-7); }
.trypanel .textarea {
  background: rgba(0,6,13,.55);
  border-radius: var(--r-md);
  padding: 20px;
  font-size: 16px;
  min-height: 170px;
  resize: none;
}
.trypanel__grow { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.receipt {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(0,38,69,.85), rgba(0,23,43,.9));
  border: 1px solid rgba(28,196,233,.28);
  border-radius: var(--r-xl);
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.receipt__scan {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
}
.receipt__scan.is-on { opacity: 1; animation: rq-scan 1.1s linear; }
.receipt__idle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.receipt__idle i {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px dashed rgba(28,196,233,.45);
  animation: rq-spin 18s linear infinite;
}
.receipt__idle p { font-size: 17px; color: var(--ink-7); line-height: 1.6; max-width: 270px; }
.receipt__done {
  display: none;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.receipt.is-done .receipt__idle { display: none; }
.receipt.is-done .receipt__done { display: flex; }
.receipt__kicker {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--cyan);
  text-transform: uppercase;
}
.receipt__key {
  font-family: var(--mono);
  font-size: 36px;
  color: var(--ink);
  letter-spacing: .06em;
  min-height: 1.2em;
}
.receipt__body { font-size: 16px; color: var(--ink-5); line-height: 1.6; max-width: 290px; }
.receipt__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.receipt__step {
  opacity: 0;
  transition: opacity .4s;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: var(--cyan-wash);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-3);
  text-align: start;
}
.receipt__step::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
.receipt__step.is-in { opacity: 1; }

/* --------------------------------------------------------------------------
   6 · Case flow explorer
   -------------------------------------------------------------------------- */

.flow { position: relative; padding: 120px var(--gutter); }
.flow__inner { position: relative; max-width: var(--shell-wide); margin-inline: auto; }
.flow__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.flow__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.stagetabs { display: flex; gap: 10px; margin-bottom: 14px; }
.stagetab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  text-align: start;
  padding: 16px 18px;
  border-radius: 13px;
  font-family: var(--font);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.stagetab__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-9);
}
.stagetab__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-5);
  white-space: nowrap;
}
/* Stages already walked read as "done"; the current stage reads as live. */
.stagetab.is-done {
  background: rgba(28,196,233,.06);
  border-color: rgba(28,196,233,.24);
}
.stagetab.is-done .stagetab__no   { color: var(--cyan); }
.stagetab.is-done .stagetab__name { color: var(--ink-3); }
.stagetab.is-active {
  background: var(--cyan-wash-3);
  border-color: var(--cyan-edge-3);
}
.stagetab.is-active .stagetab__no   { color: var(--cyan); }
.stagetab.is-active .stagetab__name { color: var(--ink); }

.flow__rail {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  margin-bottom: 30px;
}
.flow__railfill {
  height: 100%;
  width: 16.7%;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  border-radius: 3px;
  box-shadow: 0 0 16px rgba(28,196,233,.6);
  transition: width .5s var(--ease);
}

.casestrip {
  background: rgba(0,6,13,.5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.casestrip__cell { display: flex; flex-direction: column; gap: 5px; }
.casestrip__k {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-9);
  text-transform: uppercase;
}
.casestrip__v { font-size: 20px; color: var(--ink); }
.casestrip__v--mono { font-family: var(--mono); letter-spacing: .05em; }
.casestrip__v--cyan { color: var(--cyan); }
.casestrip__v--dim  { font-family: var(--mono); color: var(--ink-3); }

.flowpanel { display: none; gap: 22px; }
.flowpanel.is-active { display: flex; }
.flowpanel__main {
  flex: 1.15;
  background: var(--card-lift);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flowpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.flowpanel__id { display: flex; align-items: center; gap: 14px; }
.flowpanel__no {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .16em;
}
.flowpanel__title { font-size: 30px; font-weight: 600; color: var(--ink); }
.flowpanel__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.flowpanel__artefacts {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.artefacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.artefact {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  background: var(--wash-mid);
  font-size: 15px;
  color: var(--ink-4);
}
.flowpanel__side { flex: .85; display: flex; flex-direction: column; gap: 22px; }
.does {
  background: var(--card-cyan);
  border: 1px solid rgba(28,196,233,.32);
  border-radius: var(--r-lg);
  padding: 30px;
  flex: 1;
}
.sees {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.sees p { font-size: 16px; line-height: 1.6; color: var(--ink-4); margin-top: 12px; }
.does .dotlist { margin-top: 12px; }

/* --------------------------------------------------------------------------
   7 · Architecture explorer
   -------------------------------------------------------------------------- */

.arch { position: relative; padding: 120px 0 130px; overflow: hidden; }
.arch__inner {
  position: relative;
  max-width: var(--shell-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.arch__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.arch__head > div:first-child { max-width: 720px; }
.arch__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn--trace {
  background: rgba(28,196,233,.12);
  border-color: rgba(28,196,233,.5);
  color: var(--cyan);
}
.btn--trace.is-on { background: rgba(28,196,233,.9); color: var(--navy); }

.arch__grid {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: stretch;
}

/* --- layer rail ----------------------------------------------------------- */

.layerrail { display: flex; flex-direction: column; gap: 9px; }
.layerrail__head {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-10);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.layerbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  text-align: start;
  width: 100%;
  font-family: var(--font);
  background: var(--wash-soft);
  border: 1px solid rgba(255,255,255,.09);
  transition: background .35s, border-color .35s, transform .35s;
}
.layerbtn__bar {
  width: 4px; height: 26px;
  border-radius: 2px;
  background: rgba(255,255,255,.16);
  flex: none;
  transition: background .35s;
}
.layerbtn__tag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-10);
  flex: none;
  transition: color .35s;
}
.layerbtn__name {
  font-size: 15px;
  color: var(--ink-5);
  line-height: 1.3;
  transition: color .35s;
}
.layerbtn__zone {
  margin-inline-start: auto;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3E5266;
  flex: none;
  transition: color .35s;
}
.layerbtn.is-active {
  background: color-mix(in srgb, var(--layer) 15%, transparent);
  border-color: color-mix(in srgb, var(--layer) 50%, transparent);
  transform: translateX(4px);
}
[dir="rtl"] .layerbtn.is-active { transform: translateX(-4px); }
.layerbtn.is-active .layerbtn__bar  { background: var(--layer); }
.layerbtn.is-active .layerbtn__tag,
.layerbtn.is-active .layerbtn__zone { color: var(--layer); }
.layerbtn.is-active .layerbtn__name { color: var(--ink); }

.crosscut {
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(0,15,27,.6);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.crosscut__head {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.crosscut div:not(.crosscut__head) { font-size: 14px; line-height: 1.5; color: var(--ink-4); }

/* --- 3D stage ------------------------------------------------------------- */

.stage3d {
  position: relative;
  /* The stage is framed to fit, so a portrait box just adds dead air either
     side of the stack. Pin it to a landscape-ish block and let the taller
     detail column run past it rather than stretching to match. */
  align-self: start;
  height: clamp(520px, 66vh, 780px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(28,196,233,.05), rgba(0,15,27,.55) 42%, rgba(0,15,27,.8));
}
.stage3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}
.stage3d__canvas.is-dragging { cursor: grabbing; }
.stage3d__legend {
  position: absolute;
  top: 20px;
  inset-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.stage3d__legend div { display: flex; align-items: center; gap: 9px; }
.stage3d__legend i { width: 22px; height: 2px; flex: none; }
.stage3d__legend span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stage3d__foot {
  position: absolute;
  bottom: 20px;
  inset-inline: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}
.trace {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-7);
  line-height: 1.6;
  white-space: pre-line;
  margin: 0;
}
.stage3d__hint {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-11);
  text-transform: uppercase;
  text-align: end;
  flex: none;
}
/* Static fallback when WebGL is unavailable or three.js can't load. */
.stage3d__fallback {
  display: none;
  position: absolute;
  inset: 0;
  padding: 64px 34px 84px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.stage3d.is-fallback .stage3d__fallback { display: flex; }
.fbplate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--layer) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--layer) 38%, transparent);
  transform: skewX(-14deg);
}
.fbplate span:first-child { font-family: var(--mono); font-size: 12px; color: var(--layer); }
.fbplate span + span { font-size: 15px; color: var(--ink-2); }
.fbplate--boundary {
  background: none;
  border: 1px dashed rgba(240,32,145,.7);
  color: var(--magenta);
  justify-content: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-block: 6px;
}

/* --- layer detail --------------------------------------------------------- */

.archdetail { display: flex; flex-direction: column; gap: 16px; }
.archdetail__card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--layer) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--layer) 40%, transparent);
  transition: background .4s, border-color .4s;
}
.archdetail__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.archdetail__tag { font-family: var(--mono); font-size: 12px; color: var(--layer); }
.archdetail__zone {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--layer) 40%, transparent);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--layer);
}
.archdetail__name {
  font-size: 25px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}
.archdetail__desc { font-size: 15px; line-height: 1.65; color: var(--ink-4); }

.compbox {
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
}
.compbox__head {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-8);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.compbox__head b { color: var(--ink); font-weight: 400; }
.comps { display: flex; flex-direction: column; gap: 10px; }
.comp {
  display: flex;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-softer);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.comp.is-in { opacity: 1; transform: none; }
.comp::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--layer);
  margin-top: 7px;
  flex: none;
}
.comp__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.comp__desc {
  display: block;
  font-size: 13px;
  color: var(--ink-6);
  line-height: 1.45;
  margin-top: 2px;
}

.guarantee {
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--layer) 10%, transparent);
  border-inline-start: 3px solid var(--layer);
  transition: background .4s;
}
.guarantee__head {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--layer);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.guarantee__body { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   8 · Dashboard
   -------------------------------------------------------------------------- */

.dash__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; }
.dashcard { padding: 38px; }
.dashcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.dashcard__title { font-size: 21px; font-weight: 600; color: var(--ink); }
.dashcard__meta  { font-size: 14px; color: var(--ink-8); }

.bars { display: flex; flex-direction: column; gap: 20px; }
.barrow { display: flex; align-items: center; gap: 18px; }
.barrow__label { width: 210px; font-size: 16px; color: var(--ink-4); flex: none; }
.bartrack {
  flex: 1;
  height: 20px;
  background: var(--wash-mid);
  border-radius: 5px;
  overflow: hidden;
}
.bar {
  width: 0%;
  height: 100%;
  border-radius: 5px;
  transition: width 1.4s var(--ease) var(--bar-delay, 0s);
}
.bar--magenta { background: linear-gradient(90deg, var(--wine-dk), var(--magenta)); }
.bar--royal   { background: linear-gradient(90deg, var(--royal-dk), var(--royal)); }
.bar--cyan    { background: linear-gradient(90deg, var(--royal), var(--cyan)); }
.bar--lime    { background: linear-gradient(90deg, var(--lime-dk), var(--lime)); }
.bar--sky     { background: linear-gradient(90deg, var(--cyan), var(--cyan-lt)); }
.barrow__val {
  width: 42px;
  text-align: end;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  flex: none;
}

.spark {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}
.spark i {
  flex: 1;
  height: 0%;
  background: rgba(28,196,233,.4);
  border-radius: 4px 4px 0 0;
  transition: height 1s var(--ease) var(--spark-delay, 0s);
}
.spark i.is-peak { background: linear-gradient(var(--cyan), rgba(28,196,233,.4)); }

.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 32px;
}
.kpi__num { font-size: 44px; font-weight: 700; line-height: 1; color: var(--ink); }
.kpi__num--cyan    { color: var(--cyan); }
.kpi__num--lime    { color: var(--lime); }
.kpi__num--magenta { color: var(--magenta); }
.kpi__label { font-size: 14px; color: var(--ink-8); margin-top: 8px; }

/* --------------------------------------------------------------------------
   9 · Feature card grids (channels, frameworks, partner)
   -------------------------------------------------------------------------- */

.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.featcard {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  transition: border-color .3s, background .3s, transform .5s var(--ease);
}
.featcard:hover { border-color: rgba(28,196,233,.5); background: rgba(28,196,233,.07); }
.featcard--cyan { background: var(--cyan-wash); border-color: var(--cyan-edge); }
.featcard__kicker {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--cyan);
}
.featcard__kicker--magenta { color: var(--magenta); }
.featcard__kicker--royal   { color: var(--royal); }
.featcard__kicker--lime    { color: var(--lime); }
.featcard__title { font-size: 23px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.featcard__title--lg { font-size: 25px; }
.featcard__body  { font-size: 17px; line-height: 1.6; color: var(--ink-5); }
.featcard--cyan .featcard__body { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   10 · Integrations hub
   -------------------------------------------------------------------------- */

.hub {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)) minmax(230px, 300px) repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(3, minmax(0,1fr));
  gap: 20px;
  align-items: stretch;
  min-height: 540px;
}
.hub__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.spoke {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transition: border-color .3s;
}
.spoke:hover { border-color: rgba(28,196,233,.5); }
.spoke__title { font-size: 20px; font-weight: 600; color: var(--ink); }
.spoke__body  { font-size: 16px; color: var(--ink-5); line-height: 1.5; }

.hubcore {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(28,196,233,.18), rgba(28,196,233,.04));
  border: 1px solid rgba(28,196,233,.4);
  border-radius: var(--r-2xl);
  padding: 36px;
  box-shadow: inset 0 0 90px rgba(28,196,233,.16);
  text-align: center;
}
.hubcore img { width: 118px; }
.hubcore__name { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.hubcore__body { font-size: 16px; color: var(--ink-3); line-height: 1.5; }
.hubcore__badge {
  margin-top: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(28,196,233,.4);
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .12em;
}

/* Explicit placement so the connector geometry stays predictable. */
.spoke--a { grid-column: 1; grid-row: 1; }
.spoke--b { grid-column: 2; grid-row: 1; }
.spoke--c { grid-column: 4; grid-row: 1; }
.spoke--d { grid-column: 5; grid-row: 1; }
.spoke--e { grid-column: 1 / span 2; grid-row: 2; }
.spoke--f { grid-column: 4 / span 2; grid-row: 2; }
.spoke--g { grid-column: 1 / span 2; grid-row: 3; }
.spoke--h { grid-column: 4 / span 2; grid-row: 3; }

/* --------------------------------------------------------------------------
   10b · Add-on modules
   -------------------------------------------------------------------------- */

.addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.addoncard {
  padding: 42px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.addoncard__tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.addoncard__tag--magenta { color: var(--magenta); }
.addoncard__tag--lime    { color: var(--lime); }
.addoncard__title { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.addoncard__sub   { font-size: 17px; color: var(--ink-8); }
@keyframes rq-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.addondemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(0,15,27,.5);
  border: 1px solid var(--line);
}
.addondemo__label {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.addondemo .chiprow { gap: 8px; }
.addondemo .chip { padding: 8px 14px; font-size: 12.5px; }
.addondemo__out {
  display: none;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--cyan);
  background: rgba(255,255,255,.04);
  color: var(--ink-3);
  animation: rq-rise .4s var(--ease) both;
}
.addondemo__out.is-live  { display: block; }
.addondemo__out.is-ok    { border-color: var(--lime);    background: rgba(167,212,56,.08); }
.addondemo__out.is-warn  { border-color: var(--cyan);    background: rgba(28,196,233,.08); }
.addondemo__out.is-alert { border-color: var(--magenta); background: rgba(240,32,145,.08); }
.addondemo__out.is-idle  { border-color: var(--line-strong); }

.addoncard__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.addoncard__cta {
  margin-inline-start: auto;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 940px) {
  .addons { grid-template-columns: 1fr; }
  .addoncard { padding: 28px 24px; }
}

/* --------------------------------------------------------------------------
   11 · Deployment
   -------------------------------------------------------------------------- */

.deploycard {
  padding: 42px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.deploycard__title { font-size: 30px; font-weight: 600; color: var(--ink); }
.deploycard__sub   { font-size: 17px; color: var(--ink-8); margin-top: 8px; }
.card--cyan-strong {
  background: linear-gradient(158deg, rgba(28,196,233,.14), rgba(20,117,206,.06));
  border-color: rgba(28,196,233,.34);
}
.card--cyan-strong .deploycard__sub { color: var(--ink-sky); }
.card--cyan-strong .dashlist li { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   12 · Data sovereignty
   -------------------------------------------------------------------------- */

.regions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.region {
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-size: 16px;
}
.region--own {
  border-color: rgba(28,196,233,.5);
  background: rgba(28,196,233,.12);
  color: var(--ink);
}

.mapwrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.mapwrap i {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mapwrap i:nth-of-type(1) { width: 400px; height: 400px; border: 1px solid rgba(28,196,233,.14); animation: rq-pulse 7s ease-in-out infinite; }
.mapwrap i:nth-of-type(2) { width: 280px; height: 280px; border: 1px solid rgba(28,196,233,.20); animation: rq-pulse 7s ease-in-out 1.2s infinite; }
.mapwrap iframe {
  position: relative;
  width: 100%;
  max-width: 470px;
  height: 500px;
  border: 0;
  background: transparent;
}
.mapwrap__cap {
  position: absolute;
  bottom: 6px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-10);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13 · Time to value
   -------------------------------------------------------------------------- */

.track { padding: 38px; }
.track + .track { margin-top: 24px; }
.track__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.track__title { font-size: 25px; font-weight: 600; color: var(--ink); }
.track__sub   { font-size: 16px; color: var(--ink-8); margin-top: 6px; }
.track__dur   { font-size: 26px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.track__dur--royal { color: var(--royal); }
.track__steps { display: grid; gap: 14px; }
.track__steps--4 { grid-template-columns: repeat(4, 1fr); }
.track__steps--6 { grid-template-columns: repeat(6, 1fr); }
.tstep {
  background: rgba(0,6,13,.4);
  border-radius: var(--r-md);
  padding: 22px;
}
.tstep__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  margin-bottom: 8px;
  color: var(--cyan);
}
.tstep__no--royal { color: var(--royal); }
.tstep__label { font-size: 17px; color: var(--ink-3); }
.track__steps--6 .tstep__label { font-size: 16px; }
.tstep--final {
  background: rgba(28,196,233,.14);
  border: 1px solid var(--cyan-edge);
}
.tstep--final .tstep__label { color: var(--ink); }

/* --------------------------------------------------------------------------
   14 · Partner + testimonial
   -------------------------------------------------------------------------- */

.quote {
  padding: 52px 56px;
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
}
.quote__mark {
  font-size: 70px;
  color: var(--cyan);
  line-height: .7;
  flex: none;
}
.quote__body { flex: 1; min-width: 320px; }
.quote__text {
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  text-wrap: pretty;
}
.quote__by { font-size: 16px; color: var(--ink-8); margin-top: 22px; }

/* --------------------------------------------------------------------------
   15 · FAQ
   -------------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .3s;
}
.faq__item:hover { border-color: rgba(28,196,233,.4); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 30px;
  background: none;
  border: none;
  text-align: start;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.faq__icon {
  font-size: 26px;
  color: var(--cyan);
  line-height: 1;
  flex: none;
}
.faq__a {
  height: 0;
  overflow: hidden;
  transition: height .4s var(--ease);
}
.faq__a-inner {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-5);
  padding: 0 30px 26px;
}

/* --------------------------------------------------------------------------
   16 · Contact — request builder
   -------------------------------------------------------------------------- */

.contact__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.contact__head > div:first-child { max-width: 660px; }

.formswitch {
  display: flex;
  gap: 9px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--wash-mid);
  border: 1px solid var(--line);
}
.formswitch button {
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--wash-soft);
  color: var(--ink-4);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  transition: background .3s, color .3s;
}
.formswitch button.is-active { background: var(--cyan-wash-3); color: var(--ink); }

.builder {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: wrap;
}
.builder__main {
  flex: 1 1 620px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Wide screens: flatten each step card into label-beside-controls rows and
   put the four identity fields on one line, so the whole builder — quote
   mode included — fits one screen without scrolling. */
@media (min-width: 1100px) {
  .builder__main .stepcard {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px 16px;
    align-items: center;
  }
  .builder__main .chiprow { gap: 6px; }
  .builder__main .stepcard__head { grid-column: 1 / -1; margin-bottom: 2px; }
  .builder__main .fieldgrid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .builder__main .optgrid { grid-column: 1 / -1; }
  .builder__main .textarea { grid-column: 1 / -1; }
  .builder__main .sublabel,
  .builder__main .sublabel:not(:first-child) { margin: 0; }
}
.builder__side {
  flex: 1 1 380px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.builder__sticky {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stepcard {
  padding: 16px 20px;
  border-radius: var(--r-lg);
  background: var(--card-lift);
  border: 1px solid rgba(255,255,255,.11);
}
.stepcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stepnum {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(28,196,233,.16);
  border: 1px solid rgba(28,196,233,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cyan);
  font-weight: 600;
  flex: none;
}
.stepnum--magenta { background: rgba(240,32,145,.16); border-color: rgba(240,32,145,.5); color: var(--magenta); }
.stepnum--lime    { background: rgba(167,212,56,.16); border-color: rgba(167,212,56,.5); color: var(--lime); }
.stepnum--royal   { background: rgba(20,117,206,.16); border-color: rgba(20,117,206,.5); color: var(--ink-royal); }
.stepcard__title { font-size: 16px; font-weight: 600; color: var(--ink); }

.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sublabel {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-8);
  margin-bottom: 8px;
}
.sublabel:not(:first-child) { margin-top: 14px; }

.optgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.optbtn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .25s, border-color .25s;
}
.optbtn:hover { border-color: rgba(28,196,233,.45); }
.optbtn.is-on { background: var(--cyan-wash-3); border-color: var(--cyan-edge-3); }
.optbtn__title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.optbtn__sub   { font-size: 11.5px; color: var(--ink-6); line-height: 1.4; }

.quoteonly { display: none; flex-direction: column; gap: 14px; }
.is-quote .quoteonly { display: flex; }

/* Compact form controls inside the builder only — the try-it panel and the
   rest of the site keep their roomier defaults. */
.builder .input { padding: 10px 13px; font-size: 14px; border-radius: var(--r-sm); }
.builder .textarea { padding: 11px 13px; font-size: 14px; min-height: 58px; }
.builder .field { gap: 6px; }
.builder .field__label { font-size: 11px; }
.builder .chip { padding: 6px 11px; font-size: 12px; }

.summarycard {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(0,38,69,.94), rgba(0,26,48,.94));
  border: 1px solid rgba(28,196,233,.28);
}
.summarycard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.summarycard__head span:first-child {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.summarycard__pct { font-family: var(--mono); font-size: 12px; color: var(--ink-8); }
.meter {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  margin-bottom: 16px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--royal), var(--cyan), var(--lime));
  transition: width .5s var(--ease);
}
.summary { display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; gap: 12px; align-items: baseline; }
.srow__k {
  flex: none;
  width: 94px;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-10);
}
.srow__v { font-size: 14.5px; line-height: 1.5; color: var(--ink); word-break: break-word; }
.srow__v.is-empty { color: var(--ink-12); }
.summarycard .btn { margin-top: 18px; font-size: 15.5px; padding: 14px; }
.summarycard__foot {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-9);
  line-height: 1.5;
  text-align: center;
}
.formerror {
  display: none;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--magenta-tint);
}
.formerror.is-on { display: block; }

/* Per-field validation (email, phone) */
.field__error {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--magenta-tint);
}
.field__error.is-on { display: block; }
.input.is-invalid {
  border-color: rgba(240,32,145,.65);
}
.input.is-invalid:focus {
  border-color: var(--magenta);
}

.direct {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.direct__head {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-8);
}
.direct a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.direct a span { color: var(--ink-10); font-size: 13px; }
.direct__note {
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.55;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.disclaimer {
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(240,32,145,.08);
  border-inline-start: 3px solid var(--magenta);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.sent {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  background: linear-gradient(158deg, rgba(28,196,233,.14), rgba(20,117,206,.05));
  border: 1px solid rgba(28,196,233,.34);
  border-radius: var(--r-2xl);
  padding: 70px 48px;
}
.is-sent .sent    { display: flex; }
.is-sent .builder { display: none; }
.sent__tick {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(28,196,233,.16);
  border: 1px solid rgba(28,196,233,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--cyan);
}
.sent__title { font-size: 34px; font-weight: 600; color: var(--ink); }
.sent__body  { font-size: 18px; line-height: 1.6; color: var(--ink-3); max-width: 520px; }
.sent__refwrap { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.sent__refwrap span {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.sent__ref {
  font-family: var(--mono);
  font-size: 27px;
  color: var(--ink);
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   17 · Closing CTA
   -------------------------------------------------------------------------- */

.cta { position: relative; padding: 150px var(--gutter); overflow: hidden; }
.cta__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28,196,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,196,233,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 76%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.cta__logo { width: 230px; }
.cta__title {
  font-size: clamp(44px, 5.4vw, 88px);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
  line-height: 1;
  text-wrap: balance;
}
.cta__lede { font-size: 22px; line-height: 1.6; color: var(--ink-4); max-width: 620px; }
.cta__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.cta__actions .btn--primary {
  padding: 20px 46px;
  font-size: 18px;
  box-shadow: 0 14px 50px rgba(28,196,233,.36);
}
.cta__actions .btn--outline { padding: 20px 40px; font-size: 18px; }