/* Net Computer 3D scroll hero ([nc_hero3d]). */
.nc3d {
  --navy: #132536;
  --ink: #34495E;
  --blue: #1E74C6;
  --sky: #3A9BF0;
  --amber: #FFB938;
  --amber-ink: #B87400;
  --wall: #F3D54E;
  --bg: #EAF2FB;
  --paper: #FFFFFF;
  --muted: #5B6B7A;
  --line: #D5DEE6;
  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;
  
  font-family: var(--f-display); color: var(--navy); }
.nc3d *, .nc3d *::before, .nc3d *::after { box-sizing: border-box; }



.nc3d { position: relative; background: var(--bg); }
.nc3d .stage { position: relative; height: clamp(560px, calc(100vh - var(--nc3d-top, 0px)), 860px); height: clamp(560px, calc(100dvh - var(--nc3d-top, 0px)), 860px); overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #F7FBFF 0%, var(--bg) 55%, #DCEAF8 100%); }
.nc3d .nc3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nc3d .stage::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(234,242,251,.96) 0%, rgba(234,242,251,.88) 30%, rgba(234,242,251,0) 48%); }
@media (max-width: 760px) { .nc3d .stage::before { background: linear-gradient(0deg, rgba(234,242,251,1) 0%, rgba(234,242,251,.94) 44%, rgba(234,242,251,0) 56%); } }

.nc3d .copy { position: absolute; z-index: 5; left: max(40px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-46%); width: min(420px, 38vw); }
.nc3d .panel { position: absolute; inset: auto 0 auto 0; top: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
.nc3d .panel.on { opacity: 1; pointer-events: auto; }
.nc3d .kick { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.nc3d .panel h1, .nc3d .panel h2 { margin: 0 0 14px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -1.8px; font-weight: 800; text-wrap: balance; color: var(--navy); }
.nc3d .panel h1 em, .nc3d .panel h2 em { font-style: normal; color: var(--blue); }
.nc3d .panel h2 em.amber { color: var(--amber-ink); }
.nc3d .panel p.lead { margin: 0 0 18px; max-width: 38ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.nc3d .card { display: grid; gap: 8px; width: min(300px, 100%); padding: 14px 16px; background: var(--paper); border-radius: 12px; box-shadow: 0 10px 28px rgba(19,37,54,.10); font-size: 13px; }
.nc3d .card .row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.nc3d .card .row b { color: var(--navy); font-variant-numeric: tabular-nums; }
.nc3d .card .big { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--navy); font-variant-numeric: tabular-nums; }
.nc3d .card .bar { height: 5px; border-radius: 3px; background: #E6EDF3; overflow: hidden; }
.nc3d .card .bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); transition: width .9s ease; }
.nc3d .panel.on .card .bar span { width: var(--w, 70%); }
.nc3d .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nc3d .btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border: 1.5px solid var(--ink); border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; background: transparent; }
.nc3d .btn:hover, .nc3d .btn:focus-visible { background: var(--ink); color: #fff; outline: none; }
.nc3d .facts { display: flex; flex-wrap: wrap; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.nc3d .facts li + li::before { content: "·"; margin: 0 9px; color: var(--muted); }

.nc3d .hand { position: absolute; z-index: 4; right: max(48px, env(safe-area-inset-right, 0px)); bottom: 86px; font-family: var(--f-hand); font-size: 26px; color: var(--ink); transform: rotate(-4deg); opacity: .85; }

.nc3d .rail { position: absolute; z-index: 6; left: max(40px, env(safe-area-inset-left, 0px)); right: max(40px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.nc3d .rail li { position: relative; padding-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.nc3d .rail li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.nc3d .rail li::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--blue); }
.nc3d .rail li.on { color: var(--navy); }


@media (max-width: 760px) {
  .nc3d .copy { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); transform: none; height: 46%; }
  .nc3d .panel { top: auto; bottom: 0; transform: none; }
  .nc3d .panel h1, .nc3d .panel h2 { font-size: 30px; letter-spacing: -1px; margin-bottom: 10px; }
  .nc3d .panel p.lead { font-size: 14px; margin-bottom: 12px; }
  .nc3d .card { padding: 10px 12px; font-size: 12px; gap: 6px; }
  .nc3d .card .big { font-size: 19px; }
  .nc3d .btns { margin-top: 12px; }
  .nc3d .btn { padding: 9px 14px; font-size: 13px; }
  .nc3d .facts { font-size: 12px; margin-top: 10px; }
  .nc3d .hand { display: none; }
  .nc3d .rail { left: 16px; right: 16px; gap: 8px; }
  .nc3d .rail li { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .nc3d .panel { transition: none; } .nc3d .card .bar span { transition: none; } }

.nc3d .panel h1, .nc3d .panel h2 { font-family: var(--f-display); }
.nc3d p { margin-top: 0; }

.nc3d .nc3d-canvas { transition: opacity .45s ease; }
.nc3d .nc3d-canvas.is-fading { opacity: 0; }
.nc3d .rail li:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
.nc3d .nc3d-pause { position: absolute; z-index: 7; right: max(40px, env(safe-area-inset-right, 0px)); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--ink); border-radius: 8px; background: rgba(255,255,255,.8); color: var(--ink); cursor: pointer; }
.nc3d .nc3d-pause:hover, .nc3d .nc3d-pause:focus-visible { background: var(--ink); color: #fff; outline: none; }
.nc3d .nc3d-pause .i-play { display: none; }
.nc3d .nc3d-pause.is-paused .i-play { display: block; }
.nc3d .nc3d-pause.is-paused .i-pause { display: none; }
.nc3d .hand { right: max(92px, env(safe-area-inset-right, 0px)); }
@media (max-width: 760px) { .nc3d .stage { height: clamp(600px, calc(100dvh - var(--nc3d-top, 0px)), 760px); } .nc3d .nc3d-pause { right: 16px; bottom: auto; top: 14px; } }

/* v0.1.249: four steps, rail without titles (bullets only), smaller phone titles */
.nc3d .rail { grid-template-columns: repeat(5, 1fr); right: auto; width: min(340px, calc(100% - 80px)); gap: 10px; }
.nc3d .rail li { padding-top: 0; height: 16px; }
.nc3d .rail li::before, .nc3d .rail li::after { top: 7px; height: 3px; border-radius: 2px; }
.nc3d .nc3d-pause { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .nc3d .rail { width: min(250px, calc(100% - 32px)); right: auto; }
  .nc3d .panel h1, .nc3d .panel h2 { font-size: 24px; letter-spacing: -.6px; }
}
@media (max-width: 760px) { .nc3d .stage { height: clamp(520px, calc(100dvh - var(--nc3d-top, 0px)), 640px); } .nc3d .copy { height: 38%; } }
/* v0.1.252: phone play/pause sits bottom-left, bullets next to it */
@media (max-width: 760px) {
  .nc3d .nc3d-pause { top: auto; right: auto; left: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 30px; height: 30px; }
  .nc3d .rail { left: 58px; width: min(230px, calc(100% - 74px)); bottom: calc(19px + env(safe-area-inset-bottom, 0px)); }
}