/* ==========================================================================
   NAUTILUS — EON benefits section ("arc")
   All selectors are prefixed with .nb- so nothing collides with existing site CSS.
   Colours and fonts are read from the variables below — change them in one place.
   ========================================================================== */

.nb-benefits{
  /* --- tokens (edit here) --- */
  --nb-bg:#E8E8EA;
  --nb-ink:#101014;
  --nb-grey:#6E6E78;
  --nb-grey-dim:#9A9AA4;
  --nb-line:#D4D3D7;
  --nb-wine:#A11A3D;
  --nb-wine-bright:#C8264F;
  --nb-wine-soft:rgba(161,26,61,.10);
  --nb-display:'Exo2',system-ui,sans-serif;
  --nb-body:'Exo2',system-ui,sans-serif;
  --nb-mono:'Exo2',ui-monospace,monospace;
  --nb-max:1280px;

  padding:120px 0 130px;
  background:var(--nb-bg);
  color:var(--nb-ink);
  font-family:var(--nb-body);
  font-size:17px;
  line-height:1.62;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.nb-benefits *{box-sizing:border-box}
.nb-wrap{max-width:var(--nb-max);margin:0 auto;padding:0 34px}

.nb-benefits h2,
.nb-benefits h3{font-family:var(--nb-display);margin:0;line-height:1.05;letter-spacing:-.005em}
.nb-benefits h2{text-transform:uppercase;font-weight:700}
.nb-benefits p{margin:0}

/* eyebrow */
.nb-tlm{
  font-family:var(--nb-mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nb-wine);display:inline-flex;align-items:center;gap:10px;font-weight:700;
}
.nb-tlm::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--nb-wine);
  box-shadow:0 0 0 4px var(--nb-wine-soft);flex:none;
}

/* heading */
.nb-head{text-align:center;max-width:760px;margin:0 auto 20px}
.nb-head h2{font-size: var(--title-heading);margin:20px 0 18px}
.nb-head p{color:var(--nb-grey);font-size:18px}

/* ===================== ARC ===================== */
.nb-stage{position:relative;width:100%;max-width:980px;margin:0 auto;aspect-ratio:980/560}
.nb-arc-svg{position:absolute;inset:0;width:100%;height:100%}
.nb-arc-line{fill:none;stroke:var(--nb-line);stroke-width:1.5}
.nb-arc-prog{
  fill:none;stroke:var(--nb-wine);stroke-width:2.5;stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1);
}

.nb-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  width:150px;text-align:center;
}
.nb-bead{
  width:54px;height:54px;border-radius:50%;background:var(--nb-bg);
  border:1.5px solid var(--nb-line);display:flex;align-items:center;justify-content:center;
  font-family:var(--nb-mono);font-size:13px;font-weight:700;color:var(--nb-grey-dim);
  transition:background .4s,border-color .4s,color .4s,transform .45s cubic-bezier(.16,1,.3,1);
}
.nb-cap{
  font-family:var(--nb-display);font-weight:600;font-size:14.5px;text-transform:uppercase;
  color:var(--nb-grey);line-height:1.25;transition:color .35s;
}
.nb-node:hover .nb-bead{border-color:var(--nb-wine);color:var(--nb-wine);transform:scale(1.06)}
.nb-node:hover .nb-cap{color:var(--nb-ink)}
.nb-node.is-active .nb-bead{
  background:var(--nb-wine);border-color:var(--nb-wine);color:#fff;transform:scale(1.14);
  box-shadow:0 0 0 8px var(--nb-wine-soft);
}
.nb-node.is-active .nb-cap{color:var(--nb-ink)}

/* centre readout */
.nb-readout{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:min(440px,52%);text-align:center}
.nb-rr{position:relative;min-height:150px}
.nb-panel{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}
.nb-panel.is-on{opacity:1;visibility:visible;transform:none}
.nb-step{font-family:var(--nb-mono);font-size:11px;letter-spacing:.2em;color:var(--nb-wine);font-weight:700}
.nb-panel h3{font-size:clamp(20px,2.4vw,27px);text-transform:uppercase;margin:12px 0 12px;font-weight:600}
.nb-panel p{color:var(--nb-grey);font-size:15.5px;line-height:1.6}
.nb-fig{
  font-family:var(--nb-display);font-weight:700;font-size:44px;color:var(--nb-wine);
  line-height:1;letter-spacing:-.03em;margin-bottom:8px;
}

@media(max-width:1040px){ .nb-stage{display:none} }

/* ===================== VERTICAL CHAIN ===================== */
.nb-chain{display:none;margin-top:52px}
@media(max-width:1040px){ .nb-chain{display:block} }

.nb-chain-item{position:relative;padding:0 0 34px 62px}
.nb-chain-item::before{
  content:"";position:absolute;left:23px;top:44px;bottom:-4px;width:1.5px;background:var(--nb-line);
}
.nb-chain-item:last-child::before{display:none}
.nb-chain-item .nb-bead{
  position:absolute;left:0;top:0;width:47px;height:47px;
  background:var(--nb-wine);color:#fff;border-color:var(--nb-wine);font-size:12.5px;
}
.nb-chain-item h3{font-size:19px;text-transform:uppercase;margin:9px 0 10px;font-weight:600}
.nb-chain-item p{color:var(--nb-grey);font-size:15.5px}
.nb-chain-item .nb-fig{font-size:30px;margin-bottom:6px}

/* ===================== reveal on scroll ===================== */
.nb-rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
.nb-rv.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .nb-benefits *{animation:none!important;transition:none!important}
  .nb-rv{opacity:1;transform:none}
}
.nb-benefits :focus-visible{outline:2px solid var(--nb-wine-bright);outline-offset:4px}