/* /technology: the page-only parts. Shared pieces (hero, section heads, buttons,
   CTA band) come from site.css.

   The product screens on this page follow the theme (dark panels in dark, white
   panels in light), as the boards draw them, so they take the page tokens below
   rather than the fixed --island-* colors. */

/* Page tokens ------------------------------------------------------------------ */

:root,
[data-theme="light"] {
  /* the hero stack */
  --stk-glow: rgba(126, 72, 214, 0.176);
  --stk-glow-mid: rgba(126, 72, 214, 0.052);
  --stk-glow-cyan: rgba(31, 143, 156, 0.105);
  --stk-glow-cyan-mid: rgba(31, 143, 156, 0.028);
  --stk-floor: rgba(139, 92, 246, 0.18);
  --stk-ring-1: rgba(107, 66, 156, 0.24);
  --stk-ring-2: rgba(107, 66, 156, 0.18);
  --stk-ring-3: rgba(107, 66, 156, 0.18);
  --stk-star-cyan: #26A3B2;
  --stk-star-lilac: #9B7BDF;
  --stk-star-glow: rgba(139, 92, 246, 0.35);
  --stk-shaft-glow: rgba(31, 143, 156, 0.175);
  --stk-shaft: rgba(31, 143, 156, 0.3);
  --stk-ghost-a: rgba(139, 92, 246, 0.03);
  --stk-ghost-b: rgba(185, 154, 240, 0.06);
  --stk-ghost-line: rgba(107, 66, 156, 0.2);
  --stk-plate-line: rgba(21, 14, 32, 0.15);
  --stk-plate-glow: rgba(139, 92, 246, 0.22);
  --stk-top-glow: rgba(139, 92, 246, 0.32);
  --stk-cone-a: rgba(31, 143, 156, 0.105);
  --stk-cone-b: rgba(31, 143, 156, 0.014);
  --stk-hot-a: rgba(139, 92, 246, 0.24);
  --stk-hot-b: rgba(31, 143, 156, 0.077);
  --stk-beam-a: rgba(139, 92, 246, 0.285);
  --stk-beam-b: rgba(31, 143, 156, 0.14);
  --stk-orbit-1: rgba(21, 14, 32, 0.15);
  --stk-orbit-2: rgba(31, 143, 156, 0.32);
  --stk-orb-shadow: 0 0 70px rgba(31, 143, 156, 0.158), 0 0 160px rgba(139, 92, 246, 0.22), inset -12px -16px 34px rgba(46, 24, 84, 0.11);
  --stk-tick: rgba(139, 92, 246, 0.16);
  --stk-tick-dot: #9B7BDF;
  --stk-label: #2A2138;
  --stk-nadia: #127A86;
  --stk-nadia-line: rgba(31, 143, 156, 0.2);

  /* the module stages and their screens */
  --stage-fill: linear-gradient(180deg, rgba(139, 92, 246, 0.018), rgba(139, 92, 246, 0.004));
  --stage-glow: rgba(139, 92, 246, 0.16);
  --stage-glow-center: rgba(126, 72, 214, 0.144);
  --stage-edge: rgba(213, 190, 250, 0.5);
  --stage-grid: rgba(21, 14, 32, 0.04);
  --screen-bg: rgba(255, 255, 255, 0.92);
  --screen-border: rgba(21, 14, 32, 0.076);
  --screen-shadow: 0 1px 2px rgba(21, 14, 32, 0.04), 0 40px 80px -30px rgba(46, 24, 84, 0.2);
  --screen-ink: #150E20;
  --screen-text: #2A2138;
  --screen-muted: #685E7C;
  --screen-line: rgba(21, 14, 32, 0.07);
  --screen-ok: #127A86;
  --screen-ok-fill: #26A3B2;
  --screen-ok-line: rgba(31, 143, 156, 0.28);
  --screen-code: #6B429C;
  --screen-note-bg: rgba(185, 154, 240, 0.075);
  --screen-note-line: rgba(107, 66, 156, 0.18);
  --screen-note-text: #6B429C;
  --screen-mark: rgba(185, 154, 240, 0.18);
  --screen-bubble-in: rgba(21, 14, 32, 0.056);
  --screen-bubble-out: rgba(139, 92, 246, 0.2);
  --screen-phone-bg: rgba(31, 143, 156, 0.098);
  --screen-phone: #1F8F9C;

  /* NADIA+ panel, the film frame */
  --plus-bg:
    radial-gradient(ellipse 60% 90% at 0% 0%, rgba(139, 92, 246, 0.168), rgba(139, 92, 246, 0) 60%),
    radial-gradient(ellipse 50% 80% at 100% 100%, rgba(31, 143, 156, 0.06), rgba(31, 143, 156, 0) 70%),
    #FAF8FE;
  --plus-border: rgba(21, 14, 32, 0.12);
  --plus-shadow: 0 1px 2px rgba(21, 14, 32, 0.04), 0 30px 60px -36px rgba(76, 40, 130, 0.3);
  --film-ring: linear-gradient(135deg, rgba(205, 181, 244, 0.5), rgba(139, 92, 246, 0.04) 38%, rgba(139, 92, 246, 0.04) 62%, rgba(31, 143, 156, 0.3));
  --film-mat: #FFFFFF;
  --film-shadow: 0 50px 120px -40px rgba(139, 92, 246, 0.3);
  --services-glow: rgba(139, 92, 246, 0.088);

  /* NADIA+ orbit: the record's orb, its rings and connectors, its moments */
  --orbit-orb: radial-gradient(circle at 28% 20%, #F4FDFE 0%, #C4F0F4 7%, #A68DE9 30%, #7C52C4 62%, #4E2B80 100%);
  --orbit-orb-shadow: inset -14px -18px 34px rgba(46, 24, 84, 0.36), inset 8px 10px 22px rgba(255, 255, 255, 0.28), 0 0 46px rgba(139, 92, 246, 0.42), 0 0 120px rgba(139, 92, 246, 0.24), 0 26px 50px -16px rgba(76, 40, 130, 0.5);
  --orbit-sheen: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 26%);
  --orbit-on-orb: #FFFFFF;
  --orbit-label-shadow: 0 1px 2px rgba(46, 24, 84, 0.35), 0 1px 12px rgba(46, 24, 84, 0.6);
  --orbit-halo: radial-gradient(closest-side, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0.09) 50%, rgba(31, 143, 156, 0.03) 75%, rgba(139, 92, 246, 0) 100%);
  --orbit-ring: rgba(107, 66, 156, 0.15);
  --orbit-ring-strong: rgba(107, 66, 156, 0.28);
  --orbit-link: rgba(107, 66, 156, 0.5);
  --orbit-node: #9B7BDF;
  --orbit-node-glow: rgba(139, 92, 246, 0.6);
  --orbit-light: #8B5CF6;
  --orbit-light-glow: rgba(139, 92, 246, 0.8);
  --orbit-chip-bg: rgba(255, 255, 255, 0.9);
  --orbit-chip-border: rgba(21, 14, 32, 0.07);
  --orbit-chip-shadow: 0 1px 2px rgba(21, 14, 32, 0.05), 0 22px 44px -20px rgba(76, 40, 130, 0.42);
  --orbit-ok-bg: linear-gradient(150deg, #45C3CF, #127A86);
  --orbit-ok-shadow: 0 8px 18px -6px rgba(31, 143, 156, 0.55);
  --orbit-card-bg: linear-gradient(155deg, #9466DA 0%, #6B429C 55%, #4E2B80 100%);
  --orbit-card-border: rgba(255, 255, 255, 0.16);
  --orbit-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 34px 60px -24px rgba(91, 47, 153, 0.7);
  --orbit-card-chip: rgba(255, 255, 255, 0.16);
  --orbit-card-line: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] {
  --stk-glow: rgba(126, 72, 214, 0.44);
  --stk-glow-mid: rgba(126, 72, 214, 0.13);
  --stk-glow-cyan: rgba(143, 233, 242, 0.3);
  --stk-glow-cyan-mid: rgba(143, 233, 242, 0.08);
  --stk-floor: rgba(139, 92, 246, 0.45);
  --stk-ring-1: rgba(205, 181, 244, 0.4);
  --stk-ring-2: rgba(205, 181, 244, 0.24);
  --stk-ring-3: rgba(205, 181, 244, 0.13);
  --stk-star-cyan: #8FE9F2;
  --stk-star-lilac: #D5BEFA;
  --stk-star-glow: rgba(213, 190, 250, 0.9);
  --stk-shaft-glow: rgba(143, 233, 242, 0.5);
  --stk-shaft: rgba(220, 250, 255, 0.85);
  --stk-ghost-a: rgba(139, 92, 246, 0.1);
  --stk-ghost-b: rgba(185, 154, 240, 0.2);
  --stk-ghost-line: rgba(205, 181, 244, 0.36);
  --stk-plate-line: rgba(233, 221, 251, 0.45);
  --stk-plate-glow: rgba(139, 92, 246, 0.55);
  --stk-top-glow: rgba(139, 92, 246, 0.8);
  --stk-cone-a: rgba(200, 244, 252, 0.3);
  --stk-cone-b: rgba(200, 244, 252, 0.04);
  --stk-hot-a: rgba(236, 252, 255, 0.8);
  --stk-hot-b: rgba(190, 240, 250, 0.22);
  --stk-beam-a: rgba(236, 252, 255, 0.95);
  --stk-beam-b: rgba(160, 236, 248, 0.4);
  --stk-orbit-1: rgba(233, 221, 251, 0.34);
  --stk-orbit-2: rgba(143, 233, 242, 0.36);
  --stk-orb-shadow: 0 0 70px rgba(143, 227, 238, 0.45), 0 0 160px rgba(139, 92, 246, 0.55), inset -12px -16px 34px rgba(20, 8, 40, 0.55);
  --stk-tick: rgba(233, 221, 251, 0.3);
  --stk-tick-dot: #D5BEFA;
  --stk-label: #DDD4EA;
  --stk-nadia: #BDF3F8;
  --stk-nadia-line: rgba(143, 233, 242, 0.5);

  --stage-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  --stage-glow: rgba(139, 92, 246, 0.4);
  --stage-glow-center: rgba(126, 72, 214, 0.36);
  --stage-edge: rgba(213, 190, 250, 0.5);
  --stage-grid: rgba(255, 255, 255, 0.05);
  --screen-bg: rgba(14, 10, 22, 0.8);
  --screen-border: rgba(255, 255, 255, 0.08);
  --screen-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --screen-ink: #FFFFFF;
  --screen-text: #D9D0E6;
  --screen-muted: #9D92AD;
  --screen-line: rgba(255, 255, 255, 0.06);
  --screen-ok: #8FE9F2;
  --screen-ok-fill: #8FE9F2;
  --screen-ok-line: rgba(143, 233, 242, 0.4);
  --screen-code: #D5BEFA;
  --screen-note-bg: rgba(185, 154, 240, 0.1);
  --screen-note-line: rgba(185, 154, 240, 0.22);
  --screen-note-text: #E9DDFF;
  --screen-mark: rgba(185, 154, 240, 0.2);
  --screen-bubble-in: rgba(255, 255, 255, 0.07);
  --screen-bubble-out: rgba(139, 92, 246, 0.3);
  --screen-phone-bg: rgba(143, 233, 242, 0.14);
  --screen-phone: #BDF3F8;

  --plus-bg:
    radial-gradient(ellipse 60% 90% at 0% 0%, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0) 60%),
    radial-gradient(ellipse 50% 80% at 100% 100%, rgba(143, 233, 242, 0.14), rgba(143, 233, 242, 0) 70%),
    #0E0A16;
  --plus-border: rgba(233, 221, 251, 0.22);
  --plus-shadow: none;
  --film-ring: linear-gradient(135deg, rgba(205, 181, 244, 0.7), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.06) 62%, rgba(143, 233, 242, 0.6));
  --film-mat: #0E0916;
  --film-shadow: 0 50px 120px -40px rgba(139, 92, 246, 0.75);
  --services-glow: rgba(139, 92, 246, 0.22);

  --orbit-orb: radial-gradient(circle at 28% 20%, #F4FDFE 0%, #BDEFF4 7%, #A68DE9 30%, #7C52C4 62%, #4A2878 100%);
  --orbit-orb-shadow: inset -14px -18px 34px rgba(20, 8, 40, 0.5), inset 8px 10px 22px rgba(255, 255, 255, 0.22), 0 0 50px rgba(160, 120, 240, 0.7), 0 0 150px rgba(139, 92, 246, 0.5), 0 0 34px rgba(143, 233, 242, 0.22);
  --orbit-sheen: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 26%);
  --orbit-on-orb: #FFFFFF;
  --orbit-label-shadow: 0 1px 2px rgba(20, 8, 40, 0.4), 0 1px 12px rgba(20, 8, 40, 0.7);
  --orbit-halo: radial-gradient(closest-side, rgba(139, 92, 246, 0.5), rgba(126, 72, 214, 0.18) 50%, rgba(143, 233, 242, 0.05) 75%, rgba(139, 92, 246, 0) 100%);
  --orbit-ring: rgba(205, 181, 244, 0.15);
  --orbit-ring-strong: rgba(205, 181, 244, 0.32);
  --orbit-link: rgba(205, 181, 244, 0.55);
  --orbit-node: #D5BEFA;
  --orbit-node-glow: rgba(213, 190, 250, 0.9);
  --orbit-light: #F1E9FF;
  --orbit-light-glow: rgba(143, 233, 242, 0.95);
  --orbit-chip-bg: rgba(28, 20, 43, 0.82);
  --orbit-chip-border: rgba(255, 255, 255, 0.1);
  --orbit-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 44px -18px rgba(0, 0, 0, 0.75);
  --orbit-ok-bg: linear-gradient(150deg, #5FD3DE, #1F8F9C);
  --orbit-ok-shadow: 0 8px 18px -6px rgba(143, 233, 242, 0.35);
  --orbit-card-bg: linear-gradient(155deg, #9466DA 0%, #6B429C 55%, #4E2B80 100%);
  --orbit-card-border: rgba(255, 255, 255, 0.18);
  --orbit-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 30px 70px -20px rgba(139, 92, 246, 0.6);
  --orbit-card-chip: rgba(255, 255, 255, 0.16);
  --orbit-card-line: rgba(255, 255, 255, 0.18);
}

/* Hero ---------------------------------------------------------------------------- */

.tech-hero {
  padding-top: clamp(48px, 22px + 4.9vw, 92px);
  padding-bottom: clamp(40px, 10px + 6vw, 110px);
}
.tech-hero > .fx-glow { left: calc(50% - 550px); top: 300px; }
.tech-hero > .fx-beam { left: calc(50% + 100px); }
.tech-hero > .tech-hero__beam-2 {
  left: calc(50% - 220px);
  transform: rotate(-36deg);
  animation-delay: -3.5s;
}
.tech-hero .lead { max-width: 600px; }

/* The stack: a fixed 1144 x 640 drawing, scaled to the column. */
.tech-stack-wrap {
  --stack-scale: 1;
  position: relative;
  z-index: 2;
  height: calc(640px * var(--stack-scale));
  margin-top: 40px;
}
.tech-stack {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1144px;
  height: 640px;
  margin-left: -572px;
  transform: scale(var(--stack-scale));
  transform-origin: 50% 0;
}
.stk { position: absolute; display: block; }

.stk-glow { border-radius: 50%; pointer-events: none; }
.stk-glow--wide {
  left: 32px; top: -70px; width: 1080px; height: 880px;
  background: radial-gradient(closest-side, var(--stk-glow), var(--stk-glow-mid) 55%, transparent 78%);
}
.stk-glow--cyan {
  left: 382px; top: -106px; width: 380px; height: 380px;
  background: radial-gradient(closest-side, var(--stk-glow-cyan), var(--stk-glow-cyan-mid) 50%, transparent 78%);
}
.stk-glow--floor {
  left: 212px; top: 465px; width: 720px; height: 200px;
  background: radial-gradient(closest-side, var(--stk-floor), transparent 80%);
}

.stk-ring {
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 64%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 64%);
}
.stk-ring--1 { left: 367px; top: 432px; width: 410px; height: 205px; border: 1px solid var(--stk-ring-1); }
.stk-ring--2 { left: 297px; top: 398px; width: 550px; height: 275px; border: 1px solid var(--stk-ring-2); }
.stk-ring--3 { left: 227px; top: 362px; width: 690px; height: 345px; border: 1px solid var(--stk-ring-3); }

.stk-star { width: 5px; height: 5px; border-radius: 50%; opacity: 0.9; background: var(--stk-star-lilac); box-shadow: 0 0 15px var(--stk-star-glow); }
.stk-star--1 { left: 331px; top: 601px; background: var(--stk-star-cyan); }
.stk-star--2 { left: 774px; top: 624px; }
.stk-star--3 { left: 418px; top: 687px; }
.stk-star--4 { left: 612px; top: 633px; }

.stk-shaft-glow {
  left: 552px; top: 230px; width: 40px; height: 353px;
  background: linear-gradient(180deg, var(--stk-shaft-glow), transparent);
  filter: blur(14px);
}
.stk-shaft {
  left: 571px; top: 230px; width: 2px; height: 367px;
  background: linear-gradient(180deg, var(--stk-shaft), transparent);
}

.stk-spark {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--stk-star-lilac);
  box-shadow: 0 0 9px var(--stk-star-glow);
  animation: mx-breathe 4.1s ease-in-out infinite;
}
.stk-spark--1 { left: 140px; top: 38px; opacity: 0.6; animation-duration: 3.2s; }
.stk-spark--2 { left: 71px; top: 249px; width: 2px; height: 2px; opacity: 0.5; animation-delay: -0.7s; }
.stk-spark--3 { left: 220px; top: 468px; background: var(--stk-star-cyan); opacity: 0.55; animation-duration: 5s; animation-delay: -1.4s; }
.stk-spark--4 { left: 101px; top: 599px; width: 2px; height: 2px; opacity: 0.45; animation-duration: 5.9s; animation-delay: -2.1s; }
.stk-spark--5 { left: 1011px; top: 69px; width: 2px; height: 2px; opacity: 0.55; animation-duration: 3.2s; animation-delay: -2.8s; }
.stk-spark--6 { left: 1075px; top: 298px; opacity: 0.5; animation-delay: -3.5s; }
.stk-spark--7 { left: 951px; top: 539px; width: 2px; height: 2px; background: var(--stk-star-cyan); opacity: 0.6; animation-duration: 5s; animation-delay: -4.2s; }
.stk-spark--8 { left: 1040px; top: 618px; opacity: 0.4; animation-duration: 5.9s; animation-delay: -4.9s; }
.stk-spark--9 { left: 351px; top: 13px; width: 2px; height: 2px; background: var(--stk-star-cyan); opacity: 0.5; animation-duration: 3.2s; animation-delay: -5.6s; }
.stk-spark--10 { left: 810px; top: 2px; opacity: 0.45; animation-delay: -6.3s; }

/* The plates: squares laid flat (rotateX 60, rotateZ 45). */
.stk-plate {
  left: 461px;
  width: 222px;
  height: 222px;
  border-radius: 30px;
  transform: rotateX(60deg) rotateZ(45deg);
}
.stk-plate--ghost {
  background: linear-gradient(135deg, var(--stk-ghost-a), var(--stk-ghost-b));
  border: 1px solid var(--stk-ghost-line);
}
.stk-plate--g1 { top: 394px; opacity: 0.5; }
.stk-plate--g2 { top: 339px; opacity: 0.65; }
.stk-plate--g3 { top: 284px; opacity: 0.8; }
.stk-plate--g4 { top: 229px; opacity: 0.9; }
.stk-plate--g5 { top: 174px; }
.stk-plate--base {
  top: 130px;
  background: linear-gradient(135deg, #7B52BE, #3A2168);
  border: 1px solid var(--stk-plate-line);
  box-shadow: 0 0 60px var(--stk-plate-glow);
}
.stk-plate--top {
  top: 119px;
  background: linear-gradient(135deg, rgba(184, 148, 244, 0.98), rgba(112, 70, 168, 0.98));
  border: 1px solid var(--stk-plate-line);
  box-shadow: 0 0 44px var(--stk-top-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 40px rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .stk-plate--top { border-color: rgba(240, 232, 253, 0.85); }

.stk-cone {
  left: 475px; top: 94px; width: 195px; height: 136px;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--stk-cone-a), var(--stk-cone-b));
}
.stk-hotspot {
  left: 516px; top: 204px; width: 112px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--stk-hot-a), var(--stk-hot-b) 55%, transparent);
}
.stk-beam {
  left: 571px; top: 128px; width: 2px; height: 102px;
  background: linear-gradient(180deg, var(--stk-beam-a), var(--stk-beam-b));
}
.stk-orbit { border-radius: 50%; }
.stk-orbit > span { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.stk-orbit--1 { left: 454px; top: 50px; width: 236px; height: 68px; border: 1px solid var(--stk-orbit-1); transform: rotate(-13deg); }
.stk-orbit--1 > span { left: -4px; top: 30px; background: var(--stk-star-lilac); box-shadow: 0 0 12px var(--stk-star-glow); }
.stk-orbit--2 { left: 484px; top: 59px; width: 176px; height: 50px; border: 1px solid var(--stk-orbit-2); transform: rotate(17deg); }
.stk-orbit--2 > span { right: -4px; top: 21px; background: var(--stk-star-cyan); box-shadow: 0 0 12px var(--stk-star-cyan); }
.stk-orb {
  left: 534px; top: 46px; width: 76px; height: 76px; border-radius: 50%;
  background: var(--orb);
  box-shadow: var(--stk-orb-shadow);
}
[data-theme="dark"] .stk-orb { animation: mx-glow 6s ease-in-out infinite; }

.stk-nadia-line {
  left: 382px; top: 84px; width: 58px; height: 1px;
  background: linear-gradient(270deg, transparent, var(--stk-nadia-line));
}
.stk-nadia {
  right: 776px;
  top: 75px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stk-nadia);
  white-space: nowrap;
}

/* Module labels with their tick lines (a line and a dot toward the stack). */
.stk-label {
  height: 26px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--stk-label);
  white-space: nowrap;
}
.stk-label::before,
.stk-label::after { content: ""; position: absolute; top: 13px; }
.stk-label::before { width: 74px; height: 1px; }
.stk-label::after { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--stk-tick-dot); opacity: 0.75; }
/* the box spans the text and its 90 px tick, so nothing hangs outside it */
.stk-label--left { right: 745px; padding-right: 90px; }
.stk-label--left::before { right: 0; background: linear-gradient(90deg, var(--stk-tick), transparent); }
.stk-label--left::after { right: 71.5px; }
.stk-label--right { left: 745px; padding-left: 90px; }
.stk-label--right::before { left: 0; background: linear-gradient(270deg, var(--stk-tick), transparent); }
.stk-label--right::after { left: 71.5px; }
.stk-label--records { top: 492px; }
.stk-label--scheduling { top: 437px; }
.stk-label--benefits { top: 382px; }
.stk-label--auth { top: 327px; }
.stk-label--notes { top: 272px; }
.stk-label--billing { top: 217px; }

.tech-hero__modules {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 8px;
}
.tech-hero__modules li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-soft);
}
.tech-hero__modules li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: 0 0 8px var(--accent-fill);
}

@media (max-width: 1199px) { .tech-stack-wrap { --stack-scale: 0.86; } }
@media (max-width: 1023px) { .tech-stack-wrap { --stack-scale: 0.8; } }
@media (max-width: 767px) {
  .tech-stack-wrap { --stack-scale: 0.66; margin-top: 24px; }
  .stk-label,
  .stk-nadia,
  .stk-nadia-line { display: none; }
  /* the outer ring hangs below the drawing: the list starts under it */
  .tech-hero__modules { margin-top: 52px; }
}
@media (max-width: 419px) { .tech-stack-wrap { --stack-scale: 0.6; } }

/* Modules ------------------------------------------------------------------------- */

.tech-modules { display: flex; flex-direction: column; gap: clamp(64px, 40px + 3.6vw, 92px); }

.tech-module { display: grid; gap: 32px; align-items: center; }
.tech-module__text { display: flex; flex-direction: column; min-width: 0; }
.tech-module__title {
  font-size: clamp(30px, 25.5px + 1.16vw, 42px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--text-1);
}
.tech-module__lead { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

.tech-ticks { margin-top: 30px; }
.tech-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--text-soft);
}
.tech-ticks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .tech-module { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
  .tech-module--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .tech-module--flip .tech-stage { order: -1; }
}
@media (min-width: 1200px) {
  .tech-module { grid-template-columns: minmax(0, 1fr) 640px; gap: 72px; }
  .tech-module--flip { grid-template-columns: 640px minmax(0, 1fr); }
  .tech-module__title { white-space: nowrap; }
}

/* The stage: a glass tile with a corner glow, a faint grid and the screen. */
.tech-stage {
  --screen-zoom: 1.26;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 400px;
  padding: 40px 24px;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: radial-gradient(ellipse 75% 85% at var(--glow-x, 100%) 0%, var(--stage-glow), transparent 70%), var(--stage-fill);
}
.tech-stage--left { --glow-x: 0%; }
.tech-stage::before {
  /* the lit top edge, on the glow's side */
  content: "";
  position: absolute;
  top: 0;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-edge) var(--edge-at, 72%), transparent);
}
.tech-stage--right::before { right: 0; }
.tech-stage--left::before { left: 0; --edge-at: 28%; }
.tech-stage__fx {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 50% 52%, var(--stage-glow-center), transparent 80%) center / 560px 320px no-repeat,
    linear-gradient(var(--stage-grid) 1px, transparent 1px) center / 32px 32px,
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px) center / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 20%, transparent 80%);
  pointer-events: none;
}
.tech-stage > .fx-grain { opacity: calc(var(--grain-opacity) * 0.6); }
[data-theme="light"] .tech-stage { box-shadow: 0 1px 2px rgba(21, 14, 32, 0.03); }

/* A screen: the panel inside a stage. Drawn at its board size, then zoomed. */
.tech-screen {
  position: relative;
  z-index: 1;
  width: 400px;
  max-width: 100%;
  zoom: var(--screen-zoom);
  border-radius: 16px;
  background: var(--screen-bg);
  border: 1px solid var(--screen-border);
  box-shadow: var(--screen-shadow);
  font-size: 13px;
  line-height: 1.45;
  color: var(--screen-text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tech-screen--wide { width: 480px; }
.tech-stage:has(.tech-screen--wide) { --screen-zoom: 1.2; }
.tech-screen__title { font-size: 13.5px; font-weight: 600; color: var(--screen-ink); }
.tech-screen__sub { font-size: 12px; color: var(--screen-muted); }

.tech-orb {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--orb);
  box-shadow: 0 0 10px rgba(164, 230, 236, 0.7);
}

/* Billing: today's claims */
.tech-claims { overflow: hidden; }
.tech-claims__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 50px;
  padding: 0 16px;
}
.tech-claims__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  font-size: 12.5px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}
.tech-claims__submit .icon { width: 14px; height: 14px; }
.tech-claims__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--screen-note-bg);
  border: 1px solid var(--screen-note-line);
  font-size: 13px;
  color: var(--screen-note-text);
}
.tech-claims__undo { margin-left: auto; padding-left: 8px; font-weight: 600; color: var(--screen-ink); }
.tech-claims__row {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) 100px 56px;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid var(--screen-line);
}
.tech-claims__who { display: grid; grid-template-columns: 1.1fr 1.4fr; align-items: center; min-width: 0; }
.tech-claims__name { color: var(--screen-ink); }
.tech-claims__amount { text-align: right; color: var(--screen-ink); font-variant-numeric: tabular-nums; }
.tech-claims__status { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--screen-ok); }

/* Benefit verification */
.tech-benefits { padding: 16px 16px 6px; }
.tech-benefits__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tech-benefits__who { display: flex; flex-direction: column; }
.tech-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--screen-ok); }
.tech-ok .icon { width: 14px; height: 14px; }
.tech-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--screen-line);
}
.tech-facts dt { color: var(--screen-muted); }
.tech-facts dd { text-align: right; color: var(--screen-ink); }

/* Prior authorization: a three-step timeline */
.tech-auth { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tech-auth__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tech-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  padding-bottom: 10px;
}
.tech-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--screen-ok-line);
}
.tech-steps li:last-child { padding-bottom: 6px; }
.tech-steps__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--screen-ok-fill);
  color: #0B0712;
}
.tech-steps__mark .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.tech-steps__name { color: var(--screen-ink); }
.tech-steps__date { color: var(--screen-muted); }

/* Scheduling: a call with its voice wave */
.tech-call { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tech-call__head { display: flex; align-items: center; gap: 10px; }
.tech-call__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--screen-phone-bg);
}
.tech-call__phone svg { width: 14px; height: 14px; fill: none; stroke: var(--screen-phone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tech-wave { display: flex; align-items: center; gap: 2px; height: 34px; }
.tech-wave i {
  width: 3px;
  height: var(--h, 12px);
  border-radius: 2px;
  background: linear-gradient(180deg, #BDF3F8, #8A5CD0);
  animation: mx-wave var(--d, 1.2s) ease-in-out var(--o, 0s) infinite;
}
.tech-wave i:nth-child(1) { --h: 8px; --d: 0.9s; --o: 0s; }
.tech-wave i:nth-child(2) { --h: 14px; --d: 1.07s; --o: -0.11s; }
.tech-wave i:nth-child(3) { --h: 22px; --d: 1.24s; --o: -0.22s; }
.tech-wave i:nth-child(4) { --h: 30px; --d: 1.41s; --o: -0.33s; }
.tech-wave i:nth-child(5) { --h: 18px; --d: 1.58s; --o: -0.44s; }
.tech-wave i:nth-child(6) { --h: 26px; --d: 0.9s; --o: -0.55s; }
.tech-wave i:nth-child(7) { --h: 34px; --d: 1.07s; --o: -0.66s; }
.tech-wave i:nth-child(8) { --h: 20px; --d: 1.24s; --o: -0.77s; }
.tech-wave i:nth-child(9) { --h: 12px; --d: 1.41s; --o: -0.88s; }
.tech-wave i:nth-child(10) { --h: 24px; --d: 1.58s; --o: -0.99s; }
.tech-wave i:nth-child(11) { --h: 32px; --d: 0.9s; --o: -1.1s; }
.tech-wave i:nth-child(12) { --h: 16px; --d: 1.07s; --o: -1.21s; }
.tech-wave i:nth-child(13) { --h: 10px; --d: 1.24s; --o: -1.32s; }
.tech-wave i:nth-child(14) { --h: 20px; --d: 1.41s; --o: -1.43s; }
.tech-wave i:nth-child(15) { --h: 28px; --d: 1.58s; --o: -1.54s; }
.tech-wave i:nth-child(16) { --h: 14px; --d: 0.9s; --o: -1.65s; }
.tech-wave i:nth-child(17) { --h: 8px; --d: 1.07s; --o: -1.76s; }
.tech-wave i:nth-child(18) { --h: 18px; --d: 1.24s; --o: -1.87s; }
.tech-wave i:nth-child(19) { --h: 12px; --d: 1.41s; --o: -1.98s; }
.tech-wave i:nth-child(20) { --h: 6px; --d: 1.58s; --o: -2.09s; }
.tech-bubble {
  max-width: 240px;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.45;
}
.tech-bubble--in {
  align-self: flex-start;
  max-width: 230px;
  border-radius: 12px 12px 12px 4px;
  background: var(--screen-bubble-in);
  color: var(--screen-text);
}
.tech-bubble--out {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: var(--screen-bubble-out);
  color: var(--screen-ink);
}

/* AI scribe: the live note and its codes */
.tech-scribe { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tech-scribe__live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--screen-muted); }
.tech-scribe__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F07A6A;
  animation: mx-breathe 1.6s ease-in-out infinite;
}
.tech-scribe__text { font-size: 13px; line-height: 1.55; color: var(--screen-text); }
.tech-scribe__text mark {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--screen-mark);
  color: var(--screen-ink);
  white-space: nowrap;
}
.tech-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--screen-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--screen-code);
}

@media (max-width: 1199px) {
  .tech-stage { --screen-zoom: 1.1; min-height: 360px; }
  .tech-stage:has(.tech-screen--wide) { --screen-zoom: 1.05; }
}
@media (max-width: 767px) {
  .tech-module { gap: 24px; }
  .tech-module__lead { font-size: 16px; }
  .tech-ticks { margin-top: 22px; }
  .tech-ticks li { padding: 12px 0; font-size: 15px; }
  .tech-stage,
  .tech-stage:has(.tech-screen--wide) { --screen-zoom: 1; min-height: 0; padding: 44px 14px; }
  .tech-stage .tech-screen { width: 100%; max-width: 400px; }
  /* the claim rows: the payer moves under the name */
  .tech-claims__row { grid-template-columns: minmax(0, 1fr) auto 50px; gap: 10px; height: auto; padding: 9px 14px; }
  .tech-claims__who { display: flex; flex-direction: column; align-items: flex-start; }
  .tech-claims__payer { font-size: 12px; color: var(--screen-muted); }
  .tech-claims__head,
  .tech-claims__row { padding-inline: 14px; }
  .tech-claims__note { margin-inline: 14px; }
}
@media (max-width: 379px) {
  .tech-claims__submit { padding: 0 10px; }
}

/* NADIA+ ------------------------------------------------------------------------------ */

.tech-plus {
  position: relative;
  display: grid;
  gap: 36px;
  overflow: hidden;
  padding: clamp(24px, 12px + 3vw, 48px);
  border-radius: 30px;
  border: 1px solid var(--plus-border);
  background: var(--plus-bg);
  box-shadow: var(--plus-shadow);
}
.tech-plus > .fx-grain { opacity: calc(var(--grain-opacity) * 0.6); }
.tech-plus__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tech-plus__plus {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tech-plus__sub {
  font-size: clamp(20px, 18px + 0.4vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--text-1);
}
.tech-plus__body { max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.tech-plus__cta { margin-top: 8px; }

/* The record in orbit: Lily Chen's record is the lilac orb at the centre, in three faint
   rings; its moments hang off it on dotted connectors. The geometry is one 600 x 460 frame:
   the connectors are drawn in it (viewBox) and each moment is pinned by its own edge to the
   end of its connector (--x/--y in % of the frame), so the two always meet.
   Motion (technology.js): .is-armed hides the parts, .is-in plays them in order (orb, rings,
   connectors, moments), .is-settled starts the breathing and the light. Without the script,
   under reduced motion and under ?shots=1 the final state shows at once. */
.tech-orbit {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 460;
  margin-inline: auto;
}
.tech-orbit__core {
  position: absolute;
  left: 50%;
  top: 49.13%;
  display: grid;
  place-items: center;
  width: 460px;
  height: 460px;
  translate: -50% -50%;
  pointer-events: none;
}
.tech-orbit__halo {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--orbit-halo);
}
.tech-orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tech-orbit__ring {
  fill: none;
  stroke: var(--orbit-ring);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform: rotate(-90deg);
  transform-origin: 230px 230px;
}
.tech-orbit__ring--0 { stroke: var(--orbit-ring-strong); }
.tech-orbit__ring--2 { stroke-dasharray: 2 7; stroke-linecap: round; }
.tech-orbit__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--orbit-orb);
  box-shadow: var(--orbit-orb-shadow);
  color: var(--orbit-on-orb);
}
.tech-orbit__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orbit-sheen);
}
.tech-orbit__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: var(--orbit-label-shadow);
}
.tech-orbit__label span { font-size: 9px; letter-spacing: 0.18em; opacity: 0.86; }

.tech-orbit__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tech-orbit__link { fill: none; stroke: var(--orbit-link); stroke-width: 1.8; stroke-dasharray: 0 6; stroke-linecap: round; }
.tech-orbit__draw { fill: none; stroke-width: 12; stroke-dasharray: 1 1; }
.tech-orbit__node { fill: var(--orbit-node); filter: drop-shadow(0 0 4px var(--orbit-node-glow)); }
.tech-orbit__light {
  fill: none;
  stroke: var(--orbit-light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.16 2;
  stroke-dashoffset: 0.16;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--orbit-light-glow));
}

.tech-orbit__moments { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tech-orbit__chip,
.tech-orbit__claim {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: var(--tx) var(--ty);
  transform-origin: var(--o);
}
/* each moment: where its connector ends, which edge meets it, its turn in the bloom */
.tech-orbit__chip--coverage { --x: 21.333%; --y: 20.87%; --tx: -50%; --ty: -100%; --o: 50% 100%; --i: 0; }
.tech-orbit__chip--auth { --x: 74.333%; --y: 15.217%; --tx: -50%; --ty: -100%; --o: 50% 100%; --i: 1; }
.tech-orbit__chip--chart { --x: 28.667%; --y: 80.87%; --tx: -50%; --ty: 0%; --o: 50% 0%; --i: 2; }
.tech-orbit__chip--schedule { --x: 29.667%; --y: 49.13%; --tx: -100%; --ty: -50%; --o: 100% 50%; --i: 3; }
.tech-orbit__claim { --x: 62.333%; --y: 73.478%; --tx: 0%; --ty: -28px; --o: 0% 28px; --i: 4; }
.tech-orbit__draw--0, .tech-orbit__node--0 { --i: 0; }
.tech-orbit__draw--1, .tech-orbit__node--1 { --i: 1; }
.tech-orbit__draw--2, .tech-orbit__node--2 { --i: 2; }
.tech-orbit__draw--3 { --i: 3; }
.tech-orbit__draw--4 { --i: 4; }

.tech-orbit__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 18px 0 10px;
  border-radius: 16px;
  border: 1px solid var(--orbit-chip-border);
  background: var(--orbit-chip-bg);
  box-shadow: var(--orbit-chip-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.tech-orbit__chip--pill { height: 46px; padding: 0 18px 0 6px; gap: 10px; border-radius: 999px; }
.tech-orbit__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--accent-tint);
  color: var(--accent);
}
.tech-orbit__icon svg { width: 19px; height: 19px; }
.tech-orbit__chip--pill .tech-orbit__icon { width: 34px; height: 34px; border-radius: 50%; }
.tech-orbit__chip--pill .tech-orbit__icon svg { width: 16px; height: 16px; }
.tech-orbit__icon--ok { border: 0; background: var(--orbit-ok-bg); box-shadow: var(--orbit-ok-shadow); color: var(--orbit-on-orb); }
.tech-orbit__icon--date {
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-1);
}
.tech-orbit__icon--date small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tech-orbit__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tech-orbit__text strong { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); }
.tech-orbit__text span { font-size: 12.5px; color: var(--text-label); }
.tech-orbit__chip--pill .tech-orbit__text { flex-direction: row; align-items: baseline; gap: 6px; }
.tech-orbit__chip--pill .tech-orbit__text span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--accent); }

.tech-orbit__claim {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 220px;
  padding: 15px 18px 14px;
  border-radius: 20px;
  border: 1px solid var(--orbit-card-border);
  background: var(--orbit-card-bg);
  box-shadow: var(--orbit-card-shadow);
  color: var(--orbit-on-orb);
}
.tech-orbit__claim-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tech-orbit__claim-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.tech-orbit__paid { padding: 3px 9px; border-radius: 999px; background: var(--orbit-card-chip); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tech-orbit__amount { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tech-orbit__claim-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--orbit-card-line);
  font-size: 12.5px;
  opacity: 0.88;
}
.tech-orbit__claim-foot svg { width: 13px; height: 13px; flex: none; }

/* the play: each part's start state under .is-armed (no transition, so arming is instant),
   its entrance on .is-in */
.tech-orbit__ring--0,
.tech-orbit__ring--1 { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.tech-orbit__draw { stroke-dashoffset: 0; }
.tech-orbit.is-in .tech-orbit__orb { transition: opacity 0.7s var(--ease-out), scale 1.2s var(--ease-out); }
.tech-orbit.is-in .tech-orbit__halo { transition: opacity 1.4s ease, scale 1.6s var(--ease-out); }
.tech-orbit.is-in .tech-orbit__ring { transition: stroke-dashoffset 1.3s var(--ease-out), opacity 1.2s ease, scale 1.4s var(--ease-out); }
.tech-orbit.is-in .tech-orbit__ring--0 { transition-delay: 0.2s; }
.tech-orbit.is-in .tech-orbit__ring--1 { transition-delay: 0.36s; }
.tech-orbit.is-in .tech-orbit__ring--2 { transition-delay: 0.5s; }
.tech-orbit.is-in .tech-orbit__draw { transition: stroke-dashoffset 0.6s var(--ease-out) calc(0.85s + var(--i) * 0.17s); }
.tech-orbit.is-in .tech-orbit__node { transition: opacity 0.4s ease calc(1.05s + var(--i) * 0.17s); }
.tech-orbit.is-in .tech-orbit__chip,
.tech-orbit.is-in .tech-orbit__claim {
  transition:
    opacity 0.5s ease calc(1.15s + var(--i) * 0.17s),
    scale 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) calc(1.15s + var(--i) * 0.17s),
    filter 0.6s ease calc(1.15s + var(--i) * 0.17s);
}
.tech-orbit.is-armed:not(.is-in) .tech-orbit__orb { opacity: 0; scale: 0.5; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__halo { opacity: 0; scale: 0.6; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__ring--0,
.tech-orbit.is-armed:not(.is-in) .tech-orbit__ring--1 { stroke-dashoffset: 1; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__ring--2 { opacity: 0; scale: 0.9; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__draw { stroke-dashoffset: 1; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__node { opacity: 0; }
.tech-orbit.is-armed:not(.is-in) .tech-orbit__chip,
.tech-orbit.is-armed:not(.is-in) .tech-orbit__claim { opacity: 0; scale: 0.8; filter: blur(6px); }

/* settled: the orb breathes, the outer ring turns, and a light runs from the chart into the
   record and on out to the claim */
.tech-orbit.is-settled .tech-orbit__orb { animation: orbit-breathe 6s ease-in-out infinite; }
.tech-orbit.is-settled .tech-orbit__halo { animation: orbit-halo 6s ease-in-out infinite; }
.tech-orbit.is-settled .tech-orbit__ring--2 { animation: orbit-turn 120s linear infinite; }
.tech-orbit.is-settled .tech-orbit__light--in { animation: orbit-light-in 6s ease-in-out 0.6s infinite; }
.tech-orbit.is-settled .tech-orbit__light--out { animation: orbit-light-out 6s ease-in-out 0.6s infinite; }
@keyframes orbit-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.04; }
}
@keyframes orbit-halo {
  0%, 100% { opacity: 0.8; scale: 0.97; }
  50% { opacity: 1; scale: 1.04; }
}
@keyframes orbit-turn {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
@keyframes orbit-light-in {
  0% { stroke-dashoffset: 0.16; opacity: 0; }
  4% { opacity: 1; }
  28% { opacity: 1; }
  32%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes orbit-light-out {
  0%, 36% { stroke-dashoffset: 0.16; opacity: 0; }
  40% { opacity: 1; }
  54% { opacity: 1; }
  58%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

/* phone: the orb on top, the moments stacked under it on one dotted line */
@media (max-width: 767px) {
  .tech-orbit { display: flex; flex-direction: column; align-items: center; aspect-ratio: auto; max-width: none; }
  .tech-orbit__core { position: relative; left: auto; top: auto; width: 100%; height: 224px; translate: none; }
  .tech-orbit__halo { inset: auto; width: 300px; height: 300px; }
  .tech-orbit__rings { inset: auto; left: 50%; top: 50%; width: 330px; height: 330px; translate: -50% -50%; }
  .tech-orbit__orb { width: 112px; height: 112px; }
  .tech-orbit__label { font-size: 10px; }
  .tech-orbit__links { display: none; }
  .tech-orbit__moments {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  .tech-orbit__moments::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -50px;
    bottom: 40px;
    width: 4px;
    translate: -50% 0;
    background: radial-gradient(circle, var(--orbit-link) 1.1px, transparent 1.7px) 0 0 / 4px 7px repeat-y;
    transform-origin: 50% 0;
  }
  .tech-orbit.is-in .tech-orbit__moments::before { transition: scale 1.1s var(--ease-out) 0.7s; }
  .tech-orbit.is-armed:not(.is-in) .tech-orbit__moments::before { scale: 1 0; }
  .tech-orbit__chip,
  .tech-orbit__claim { position: relative; left: auto; top: auto; translate: none; transform-origin: 50% 0; }
  .tech-orbit__chip { height: auto; min-height: 60px; max-width: 100%; padding-block: 9px; white-space: normal; }
  .tech-orbit__chip--pill { min-height: 46px; padding-block: 6px; }
  .tech-orbit__claim { width: min(100%, 250px); }
}


@media (min-width: 1200px) {
  .tech-plus { grid-template-columns: 404px minmax(0, 1fr); gap: 44px; min-height: 476px; }
  .tech-plus__text { justify-content: center; }
  .tech-plus__orbit { align-self: center; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* the text runs in two columns above the record: name left, the line and the button right */
  .tech-plus__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    column-gap: 40px;
    row-gap: 16px;
    align-items: end;
  }
  .tech-plus__text .eyebrow { grid-column: 1; grid-row: 1; }
  .tech-plus__title { grid-column: 1; grid-row: 2; }
  .tech-plus__sub { grid-column: 1; grid-row: 3; }
  .tech-plus__body { grid-column: 2; grid-row: 2; }
  .tech-plus__cta { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 0; }
}
@media (max-width: 767px) {
  .tech-plus { gap: 28px; border-radius: 24px; }
  .tech-plus__text { gap: 16px; }
}

/* Medico Billing: the film ------------------------------------------------------------ */

.tech-billing {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: var(--section-top);
  padding: clamp(72px, 40px + 5.6vw, 120px) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.tech-billing > .fx-glow {
  left: calc(50% - 880px);
  top: 50%;
  width: 1100px;
  height: 900px;
  margin-top: -450px;
}
.tech-billing__grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
.tech-billing__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.tech-billing__text .body-lg { max-width: 400px; }
.tech-billing__text .actions { margin-top: 6px; }

.tech-film {
  position: relative;
  display: block;
  padding: 1px;
  border-radius: 26px;
  background: var(--film-ring);
  box-shadow: var(--film-shadow);
  transition: transform 0.4s var(--ease-out);
}
.tech-film:hover { transform: translateY(-3px); }
.tech-film:focus-visible { border-radius: 26px; }
.tech-film__frame {
  position: relative;
  display: block;
  padding: 9px;
  border-radius: 25px;
  background: var(--film-mat);
}
.tech-film__frame img,
.tech-film__frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 17px;
  background: #0E0A16;
}
.tech-film__play {
  position: absolute;
  right: 27px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 22px 0 7px;
  border-radius: 999px;
  background: #120B1A;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  transition: transform 0.25s var(--ease-out);
}
.tech-film:hover .tech-film__play { transform: scale(1.04); }
.tech-film__play-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #120B1A;
}
.tech-film__play-dot .icon { width: 13px; height: 13px; margin-left: 2px; }
.tech-film.is-playing { transform: none; }

@media (min-width: 1024px) {
  .tech-billing__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 1200px) {
  .tech-billing__grid { grid-template-columns: 640px minmax(0, 1fr); gap: 80px; }
}
@media (max-width: 767px) {
  .tech-film { border-radius: 20px; }
  .tech-film__frame { padding: 6px; border-radius: 19px; }
  .tech-film__frame img,
  .tech-film__frame video { border-radius: 14px; }
  .tech-film__play { right: 16px; bottom: 16px; height: 44px; padding-right: 18px; font-size: 14px; gap: 10px; }
  .tech-film__play-dot { width: 32px; height: 32px; }
  .tech-billing > .fx-glow { left: -40%; width: 700px; height: 700px; margin-top: -350px; }
}

/* What AI does, and your data: the page's one dark panel (.panel-ink in site.css), so
   everything inside takes the dark tokens in both themes. ---------------------------------- */

.tech-trust {
  --data-bg: radial-gradient(ellipse 60% 140% at 0% 50%, rgba(143, 233, 242, 0.12), rgba(143, 233, 242, 0) 70%), rgba(255, 255, 255, 0.02);
  --data-border: rgba(143, 233, 242, 0.22);
  --data-icon-bg: rgba(143, 233, 242, 0.1);
  --data-icon-line: rgba(143, 233, 242, 0.3);
  --data-icon: #BDF3F8;
  /* the panel's own room around its content; the section above it keeps --section-top */
  padding-block: clamp(64px, 40px + 5vw, 112px);
}
.tech-trust > .fx-grain { opacity: calc(var(--grain-opacity) * 0.5); }
.tech-trust__inner { position: relative; z-index: 1; }
/* the one title here is a statement that runs past a line, so it wraps (site.css keeps
   section titles on their lines at desktop) */
.tech-trust__head .h2 { max-width: 920px; white-space: normal; }

.tech-split { display: grid; gap: 16px; }
.tech-split__card { padding: clamp(24px, 16px + 1.6vw, 36px); }
.tech-split__head {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.tech-split__head--people { color: var(--cyan); }
.tech-dots li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.tech-dots li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: 0 0 10px var(--accent-fill);
}
.tech-dots--people li::before { background: var(--cyan-fill); box-shadow: 0 0 10px var(--cyan-fill); }
.tech-dots strong { font-weight: 600; color: var(--text-1); }

/* Your data: a row under the two lists, the shield, the line and the promise. */
.tech-trust__data {
  display: grid;
  gap: 18px;
  margin-top: 16px;
  padding: clamp(24px, 16px + 1.6vw, 32px) clamp(24px, 16px + 1.6vw, 36px);
  border-radius: var(--radius-card);
  border: 1px solid var(--data-border);
  background: var(--data-bg);
}
.tech-trust__data .accent { color: var(--cyan); }
.tech-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--data-icon-bg);
  border: 1px solid var(--data-icon-line);
}
.tech-shield svg { width: 26px; height: 26px; fill: none; stroke: var(--data-icon); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tech-promise { max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

@media (min-width: 768px) {
  .tech-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-trust__data { grid-template-columns: 56px auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .tech-trust__data-title { white-space: nowrap; }
  .tech-promise { justify-self: end; text-align: right; }
}

/* Or let us run it for you ---------------------------------------------------------- */

.tech-services {
  position: relative;
  display: grid;
  gap: 24px;
  overflow: hidden;
  padding: clamp(26px, 16px + 2vw, 36px) clamp(24px, 12px + 2.6vw, 44px) clamp(26px, 16px + 2vw, 36px) clamp(24px, 12px + 2.2vw, 40px);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: radial-gradient(ellipse 40% 120% at 0% 50%, var(--services-glow), transparent 70%), var(--stage-fill);
}
.tech-services__art { position: relative; width: 210px; height: 120px; }
.tech-services__art img { position: absolute; height: auto; filter: var(--art-shadow); }
.tech-services__a1 { left: 0; top: 20px; z-index: 1; width: 92px; }
.tech-services__a2 { left: 62px; top: 0; z-index: 2; width: 104px; }
.tech-services__a3 { left: 136px; top: 24px; z-index: 1; width: 80px; }
.tech-services__text { display: flex; flex-direction: column; gap: 10px; }
.tech-services .btn { justify-self: start; }
@media (min-width: 900px) {
  .tech-services { grid-template-columns: 210px minmax(0, 1fr) auto; gap: 44px; align-items: center; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .tech-services { gap: 32px; }
}